diff --git a/@overflow/commons/ui/component/primeng/popup-panel.component.ts b/@overflow/commons/ui/component/primeng/popup-panel.component.ts
index 64daa3f..db3214d 100644
--- a/@overflow/commons/ui/component/primeng/popup-panel.component.ts
+++ b/@overflow/commons/ui/component/primeng/popup-panel.component.ts
@@ -98,7 +98,7 @@ export class PopupPanelComponent implements OnDestroy {
   }
 
   onOverlayAnimationDone(event: AnimationEvent) {
-    console.log('onOverlayAnimationDone');
+
   }
 
   appendOverlay() {
diff --git a/@overflow/commons/ui/directive/auto-height.directive.ts b/@overflow/commons/ui/directive/auto-height.directive.ts
index d4ed6d6..1a6655f 100644
--- a/@overflow/commons/ui/directive/auto-height.directive.ts
+++ b/@overflow/commons/ui/directive/auto-height.directive.ts
@@ -30,10 +30,6 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
   ngOnDestroy(): void {
   }
 
-  onVisible(event) {
-    console.log('visibilitychange');
-  }
-
   /**
    * forceCalculate
    */
@@ -51,7 +47,6 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
     const footerElementMargin = this.getfooterElementMargin();
 
     this.elementRef.nativeElement.style.height = windowHeight - footerElementMargin - elementOffsetTop + 'px';
-    console.log([windowHeight, elementOffsetTop, elementMarginBottom, footerElementMargin, this.elementRef.nativeElement.style.height]);
   }
 
   private getElementOffsetTop() {
diff --git a/@overflow/model/discovery/index.ts b/@overflow/model/discovery/index.ts
index 8166441..f9ab223 100644
--- a/@overflow/model/discovery/index.ts
+++ b/@overflow/model/discovery/index.ts
@@ -1,3 +1,5 @@
+export * from './discovery';
+
 export * from './DiscoverHost';
 export * from './DiscoverPort';
 export * from './DiscoverService';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d5a9bdd..61de7b5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,12 +1,21 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PagesComponent } from './pages/pages.component';
+import { HomePageComponent } from './pages/home/home-page.component';
 
 const routes: Routes = [
-  { path: '', loadChildren: './pages/pages.module#PagesModule' },
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  {
+    path: '',
+    component: PagesComponent,
+    children: [
+      { path: 'home', component: HomePageComponent },
+    ]
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule],
 })
 export class AppRoutingModule { }
diff --git a/src/app/app-store.module.ts b/src/app/app-store.module.ts
index 52cde6f..8a710a2 100644
--- a/src/app/app-store.module.ts
+++ b/src/app/app-store.module.ts
@@ -8,14 +8,14 @@ import { EffectsModule } from '@ngrx/effects';
 
 
 import { environment } from '../environments/environment';
-import { reducers, metaReducers, effects } from '../commons/store';
+import { REDUCERS, META_REDUCERS, EFFECTS } from './store';
 
 @NgModule({
   exports: [
     StoreModule,
   ],
   imports: [
-    StoreModule.forRoot(reducers, { metaReducers }),
+    StoreModule.forRoot(REDUCERS, { metaReducers: META_REDUCERS }),
     /**
      * @ngrx/router-store keeps router state up-to-date in the store.
      */
@@ -41,7 +41,7 @@ import { reducers, metaReducers, effects } from '../commons/store';
       maxAge: 50,
       logOnly: environment.production,
     }),
-    EffectsModule.forRoot(effects),
+    EffectsModule.forRoot(EFFECTS),
   ],
   providers: [
   ],
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9a95840..b546585 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,18 +1,21 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef, AfterContentInit, AfterViewInit } from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
 
 import { of, Subscription } from 'rxjs';
 import { map, catchError, take } from 'rxjs/operators';
 
-import { ElectronProxyService } from '../commons/service/electron-proxy.service';
-import { ProbeService } from '../commons/service/probe.service';
+import { ElectronProxyService } from './service/electron-proxy.service';
 import { MenuEvent } from '../commons/type';
+import * as AppStore from './store/app';
+import * as UserStore from './store/environment/user';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
   title = 'scanner-app';
   showTitleBar: boolean;
   block: boolean;
@@ -25,6 +28,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   public constructor(
     private changeDetector: ChangeDetectorRef,
+    private store: Store<any>,
     private electronProxyService: ElectronProxyService,
   ) {
     // this.showTitleBar = !__LINUX__;
@@ -33,6 +37,8 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.store.dispatch(new AppStore.AppInit());
+    this.store.dispatch(new UserStore.SetMemberID({ memberID: 'scannerUser' }));
     // this.probeService.connect();
     this.electronProxyService.sendReady(performance.now());
     this.menuSubscription = this.electronProxyService.menuObservable()
@@ -64,7 +70,19 @@ export class AppComponent implements OnInit, OnDestroy {
 
   }
 
+  ngAfterContentInit(): void {
+    this.store.dispatch(new AppStore.AppAfterContentInit());
+
+  }
+
+  ngAfterViewInit(): void {
+    this.store.dispatch(new AppStore.AppAfterViewInit());
+  }
+
+
   ngOnDestroy(): void {
+    this.store.dispatch(new AppStore.AppDestroy());
+
     this.menuSubscription.unsubscribe();
   }
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c884970..f1c6e4f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,30 +4,50 @@ import { NgModule } from '@angular/core';
 
 import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
 
+import {
+  PerfectScrollbarModule,
+  PERFECT_SCROLLBAR_CONFIG,
+  PerfectScrollbarConfigInterface,
+} from 'ngx-perfect-scrollbar';
+
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppStoreModule } from './app-store.module';
 
 import { AppComponent } from './app.component';
+import { COMPONENTS } from './component';
+import { PAGES } from './pages';
+
+import { SERVICES } from './service';
+
+const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+  suppressScrollX: true
+};
 
-import { CommonsModule } from '../commons/commons.module';
-import { SERVICES } from '../commons/service';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
 
+    PerfectScrollbarModule,
+
     CommonsUIModule,
-    CommonsModule,
 
     AppRoutingModule,
     AppStoreModule,
   ],
+  declarations: [
+    AppComponent,
+    ...COMPONENTS,
+    ...PAGES,
+  ],
   providers: [
     ...SERVICES,
+    {
+      provide: PERFECT_SCROLLBAR_CONFIG,
+      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
+    }
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/component/index.ts b/src/app/component/index.ts
new file mode 100644
index 0000000..3069d82
--- /dev/null
+++ b/src/app/component/index.ts
@@ -0,0 +1,18 @@
+import {
+  COMPONENTS as LAYOUT_COMPONENTS
+} from './layout';
+
+import {
+  COMPONENTS as MENU_COMPONENTS
+} from './menu';
+
+import {
+  COMPONENTS as TARGET_COMPONENTS
+} from './target';
+
+
+export const COMPONENTS = [
+  ...LAYOUT_COMPONENTS,
+  ...MENU_COMPONENTS,
+  ...TARGET_COMPONENTS,
+];
diff --git a/src/app/component/layout/index.ts b/src/app/component/layout/index.ts
new file mode 100644
index 0000000..8cdbdd6
--- /dev/null
+++ b/src/app/component/layout/index.ts
@@ -0,0 +1,8 @@
+import {
+  COMPONENTS as TOOLBAR_COMPONENTS
+} from './toolbar';
+
+
+export const COMPONENTS = [
+  ...TOOLBAR_COMPONENTS,
+];
diff --git a/src/app/component/layout/toolbar/index.ts b/src/app/component/layout/toolbar/index.ts
new file mode 100644
index 0000000..953e13e
--- /dev/null
+++ b/src/app/component/layout/toolbar/index.ts
@@ -0,0 +1,7 @@
+import { NicDropdownComponent } from './nic-dropdown.component';
+import { ScannerSettingDropdownComponent } from './scanner-setting-dropdown.component';
+
+export const COMPONENTS = [
+  NicDropdownComponent,
+  ScannerSettingDropdownComponent,
+];
diff --git a/src/commons/component/toolbar/nic-dropdown.component.html b/src/app/component/layout/toolbar/nic-dropdown.component.html
similarity index 93%
rename from src/commons/component/toolbar/nic-dropdown.component.html
rename to src/app/component/layout/toolbar/nic-dropdown.component.html
index dbb0920..31bd6be 100644
--- a/src/commons/component/toolbar/nic-dropdown.component.html
+++ b/src/app/component/layout/toolbar/nic-dropdown.component.html
@@ -4,11 +4,11 @@
       <!-- <svg _ngcontent-c1="" aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16" width="16px" height="16px">
         <path _ngcontent-c1="" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
       </svg> -->
-      <div _ngcontent-c1="" class="text" *ngIf="selected else loading">
+      <div _ngcontent-c1="" class="text" *ngIf="selected">
         <div _ngcontent-c1="" class="description">{{selected.network || ''}}</div>
         <div _ngcontent-c1="" class="title">{{selected.friendlyName || ''}}</div>
       </div>
-      <ng-template #loading>
+      <ng-template *ngIf="pending$ | async">
         Loading...
       </ng-template>
       <svg _ngcontent-c1="" aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16" width="16px"
diff --git a/src/commons/component/toolbar/nic-dropdown.component.scss b/src/app/component/layout/toolbar/nic-dropdown.component.scss
similarity index 100%
rename from src/commons/component/toolbar/nic-dropdown.component.scss
rename to src/app/component/layout/toolbar/nic-dropdown.component.scss
diff --git a/src/app/component/layout/toolbar/nic-dropdown.component.ts b/src/app/component/layout/toolbar/nic-dropdown.component.ts
new file mode 100644
index 0000000..9883409
--- /dev/null
+++ b/src/app/component/layout/toolbar/nic-dropdown.component.ts
@@ -0,0 +1,136 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+  OnDestroy,
+  ChangeDetectorRef
+} from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
+
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, map, tap, exhaustMap } from 'rxjs/operators';
+
+import { SelectItem } from 'primeng/primeng';
+
+import { Interface } from '@overflow/model/net/nic';
+import { Zone } from '@overflow/model/discovery';
+import { toMetaIPType, MetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
+import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
+
+import * as AppStore from '../../../store';
+import * as DiscoveryConfigStore from '../../../store/discovery/config';
+
+class NICInfo {
+  iface: string;
+  friendlyName: string;
+  metaIPType: MetaIPType;
+  mac: string;
+  address: string;
+  network: string;
+}
+
+@Component({
+  selector: 'app-layout-toolbar-nic-dropdown',
+  templateUrl: './nic-dropdown.component.html',
+  styleUrls: ['./nic-dropdown.component.scss']
+})
+export class NicDropdownComponent implements OnInit, OnDestroy {
+
+  @Input()
+  blockTarget: any;
+
+  @ViewChild('panel')
+  panel: DropdownPanelComponent;
+
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  interfacesSubscription: Subscription | null;
+
+  nics: SelectItem[] | null;
+  selected: NICInfo;
+
+  constructor(
+    private store: Store<any>,
+    private changeDetector: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    const __this = this;
+    this.interfacesSubscription = this.store.pipe(
+      tap(() => {
+        __this.pending$ = of(true);
+      }),
+      select(AppStore.EnvironmentSelector.InterfacesSelector.selectInterfaces),
+      map((ifaces: Interface[]) => {
+        if (null === ifaces) {
+          return;
+        }
+        __this.nics = [];
+        ifaces.forEach(iface => {
+          if (undefined === iface.addresses) {
+            return;
+          }
+          iface.addresses.forEach(address => {
+            if (
+              address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key
+            ) {
+              return;
+            }
+            const nicInfo = {
+              iface: iface.iface,
+              friendlyName: iface.friendlyName,
+              metaIPType: address.metaIPType,
+              mac: iface.mac,
+              address: address.address,
+              network: address.network
+            };
+            __this.nics.push({
+              label: iface.friendlyName + ' (' + address.network + ')',
+              value: nicInfo,
+              disabled:
+                address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key
+                  ? true
+                  : false
+            });
+            if (address.gateway !== undefined && address.gateway.length > 0) {
+              __this.nicSelected(nicInfo);
+            }
+          });
+        });
+        this.changeDetector.detectChanges();
+      }),
+      catchError(error => {
+        console.log(error);
+        return of();
+      }),
+      tap(() => {
+        __this.pending$ = of(false);
+      }),
+    ).subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (null !== this.interfacesSubscription) {
+      this.interfacesSubscription.unsubscribe();
+    }
+  }
+
+  nicSelected(nic: NICInfo) {
+    this.selected = nic;
+
+    const zone: Zone = {
+      network: this.selected.network,
+      iface: this.selected.iface,
+      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
+      address: this.selected.address,
+      mac: this.selected.mac
+    };
+
+    this.store.dispatch(new DiscoveryConfigStore.ChangeZone(zone));
+
+    this.panel.hide();
+  }
+}
diff --git a/src/commons/component/toolbar/scanner-setting-dropdown.component.html b/src/app/component/layout/toolbar/scanner-setting-dropdown.component.html
similarity index 100%
rename from src/commons/component/toolbar/scanner-setting-dropdown.component.html
rename to src/app/component/layout/toolbar/scanner-setting-dropdown.component.html
diff --git a/src/commons/component/toolbar/scanner-setting-dropdown.component.scss b/src/app/component/layout/toolbar/scanner-setting-dropdown.component.scss
similarity index 100%
rename from src/commons/component/toolbar/scanner-setting-dropdown.component.scss
rename to src/app/component/layout/toolbar/scanner-setting-dropdown.component.scss
diff --git a/src/commons/component/toolbar/scanner-setting-dropdown.component.ts b/src/app/component/layout/toolbar/scanner-setting-dropdown.component.ts
similarity index 82%
rename from src/commons/component/toolbar/scanner-setting-dropdown.component.ts
rename to src/app/component/layout/toolbar/scanner-setting-dropdown.component.ts
index 877a862..cdc2379 100644
--- a/src/commons/component/toolbar/scanner-setting-dropdown.component.ts
+++ b/src/app/component/layout/toolbar/scanner-setting-dropdown.component.ts
@@ -1,21 +1,27 @@
-import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, ViewChild, Output, EventEmitter, OnDestroy, ChangeDetectorRef } from '@angular/core';
+
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+import { Store, select } from '@ngrx/store';
+
 import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
 import { DiscoverHost, Zone } from '@overflow/model/discovery';
 import { toMetaIPType, MetaIPTypeEnum, MetaPortTypeEnum } from '@overflow/model/meta';
-import { DiscoveryConfigService } from '../../service/discovery-config.service';
+
+import * as AppStore from '../../../store';
+import * as DiscoveryConfigStore from '../../../store/discovery/config';
 
 const IPCIDR = require('ip-cidr');
 
 @Component({
-  selector: 'app-scanner-setting-dropdown',
+  selector: 'app-layout-toolbar-scanner-setting-dropdown',
   templateUrl: './scanner-setting-dropdown.component.html',
   styleUrls: ['./scanner-setting-dropdown.component.scss'],
 })
 
-export class ScannerSettingDropdownComponent implements OnInit {
+export class ScannerSettingDropdownComponent implements OnInit, OnDestroy {
 
   @Input() blockTarget: any;
-  @Output() ready = new EventEmitter<DiscoverHost>();
   @ViewChild('panel') panel: DropdownPanelComponent;
 
   valid: boolean;
@@ -35,17 +41,36 @@ export class ScannerSettingDropdownComponent implements OnInit {
 
   validIPArray: string[];
 
+  zoneSubscription: Subscription | null;
+
   constructor(
-    private discoveryConfigService: DiscoveryConfigService
+    private store: Store<any>,
+    private changeDetector: ChangeDetectorRef,
   ) {
   }
 
   ngOnInit(): void {
-    this.discoveryConfigService.zone.subscribe(res => {
-      this.zone = res as Zone;
-      this.setDefault();
-    });
+    this.zoneSubscription = this.store.pipe(
+      select(AppStore.DiscoverySelector.ConfigSelector.selectZone),
+      map((zone: Zone) => {
+        if (null === zone) {
+          return;
+        }
 
+        this.zone = zone;
+        this.setDefault();
+      }),
+      catchError(error => {
+        console.log(error);
+        return of();
+      }),
+    ).subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (null !== this.zoneSubscription) {
+      this.zoneSubscription.unsubscribe();
+    }
   }
 
   setDefault(): void {
@@ -66,6 +91,8 @@ export class ScannerSettingDropdownComponent implements OnInit {
     this.portErrMsg = '';
 
     this.setSummary();
+
+    this.changeDetector.detectChanges();
   }
 
   validateIP(value: string, idx: number) {
@@ -212,9 +239,9 @@ export class ScannerSettingDropdownComponent implements OnInit {
         }
       }
     };
-    this.ready.emit(discoverHost);
-  }
 
+    this.store.dispatch(new DiscoveryConfigStore.ChangeDiscoverHost(discoverHost));
+  }
 }
 
 class Condition {
diff --git a/src/commons/component/menu/about.component.html b/src/app/component/menu/about.component.html
similarity index 100%
rename from src/commons/component/menu/about.component.html
rename to src/app/component/menu/about.component.html
diff --git a/src/commons/component/menu/about.component.scss b/src/app/component/menu/about.component.scss
similarity index 100%
rename from src/commons/component/menu/about.component.scss
rename to src/app/component/menu/about.component.scss
diff --git a/src/commons/component/menu/about.component.ts b/src/app/component/menu/about.component.ts
similarity index 100%
rename from src/commons/component/menu/about.component.ts
rename to src/app/component/menu/about.component.ts
diff --git a/src/commons/component/menu/export-csv.component.html b/src/app/component/menu/export-csv.component.html
similarity index 100%
rename from src/commons/component/menu/export-csv.component.html
rename to src/app/component/menu/export-csv.component.html
diff --git a/src/commons/component/menu/export-csv.component.scss b/src/app/component/menu/export-csv.component.scss
similarity index 100%
rename from src/commons/component/menu/export-csv.component.scss
rename to src/app/component/menu/export-csv.component.scss
diff --git a/src/commons/component/menu/export-csv.component.ts b/src/app/component/menu/export-csv.component.ts
similarity index 100%
rename from src/commons/component/menu/export-csv.component.ts
rename to src/app/component/menu/export-csv.component.ts
diff --git a/src/app/component/menu/index.ts b/src/app/component/menu/index.ts
new file mode 100644
index 0000000..ff3c390
--- /dev/null
+++ b/src/app/component/menu/index.ts
@@ -0,0 +1,11 @@
+import { AboutComponent } from './about.component';
+import { ExportCSVComponent } from './export-csv.component';
+import { PreferencesComponent } from './preferences.component';
+import { PrintComponent } from './print.component';
+
+export const COMPONENTS = [
+  AboutComponent,
+  ExportCSVComponent,
+  PreferencesComponent,
+  PrintComponent,
+];
diff --git a/src/commons/component/menu/preferences.component.html b/src/app/component/menu/preferences.component.html
similarity index 100%
rename from src/commons/component/menu/preferences.component.html
rename to src/app/component/menu/preferences.component.html
diff --git a/src/commons/component/menu/preferences.component.scss b/src/app/component/menu/preferences.component.scss
similarity index 100%
rename from src/commons/component/menu/preferences.component.scss
rename to src/app/component/menu/preferences.component.scss
diff --git a/src/commons/component/menu/preferences.component.ts b/src/app/component/menu/preferences.component.ts
similarity index 100%
rename from src/commons/component/menu/preferences.component.ts
rename to src/app/component/menu/preferences.component.ts
diff --git a/src/commons/component/menu/print.component.html b/src/app/component/menu/print.component.html
similarity index 100%
rename from src/commons/component/menu/print.component.html
rename to src/app/component/menu/print.component.html
diff --git a/src/commons/component/menu/print.component.scss b/src/app/component/menu/print.component.scss
similarity index 100%
rename from src/commons/component/menu/print.component.scss
rename to src/app/component/menu/print.component.scss
diff --git a/src/commons/component/menu/print.component.ts b/src/app/component/menu/print.component.ts
similarity index 100%
rename from src/commons/component/menu/print.component.ts
rename to src/app/component/menu/print.component.ts
diff --git a/src/commons/component/detail/host-detail.component.html b/src/app/component/target/detail/host.component.html
similarity index 100%
rename from src/commons/component/detail/host-detail.component.html
rename to src/app/component/target/detail/host.component.html
diff --git a/src/commons/component/detail/host-detail.component.scss b/src/app/component/target/detail/host.component.scss
similarity index 100%
rename from src/commons/component/detail/host-detail.component.scss
rename to src/app/component/target/detail/host.component.scss
diff --git a/src/commons/component/detail/host-detail.component.ts b/src/app/component/target/detail/host.component.ts
similarity index 76%
rename from src/commons/component/detail/host-detail.component.ts
rename to src/app/component/target/detail/host.component.ts
index 17b03d6..f334473 100644
--- a/src/commons/component/detail/host-detail.component.ts
+++ b/src/app/component/target/detail/host.component.ts
@@ -6,16 +6,16 @@ import { map, catchError, take } from 'rxjs/operators';
 import { Host } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
 
-import { ProbeService } from '../../service/probe.service';
 import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
-
+import { PingService } from '../../../service/ping.service';
+import { PingOption } from '@overflow/model/config/ping';
 
 @Component({
-  selector: 'app-host-detail',
-  templateUrl: './host-detail.component.html',
-  styleUrls: ['./host-detail.component.scss'],
+  selector: 'app-target-detail-host',
+  templateUrl: './host.component.html',
+  styleUrls: ['./host.component.scss'],
 })
-export class HostDetailComponent implements OnChanges {
+export class HostComponent implements OnChanges {
   @Input() host: Host;
 
   @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
@@ -32,7 +32,7 @@ export class HostDetailComponent implements OnChanges {
 
 
   constructor(
-    private probeService: ProbeService,
+    private pingService: PingService,
   ) {
     this.pingWaiting = false;
     this.count = 5;
@@ -48,14 +48,13 @@ export class HostDetailComponent implements OnChanges {
   doPing() {
     this.pingWaiting = true;
 
-    const option = {
-      Count: this.count,
-      Interval: this.interval,
-      Deadline: this.deadline,
+    const option: PingOption = {
+      count: this.count,
+      interval: this.interval,
+      deadline: this.deadline,
     };
 
-    this.probeService
-      .call<PingResult>('PingService.PingHost', this.host, option)
+    this.pingService.pingHost(this.host, option)
       .pipe(
         map((pingResult: PingResult) => {
           if (pingResult) {
diff --git a/src/app/component/target/detail/index.ts b/src/app/component/target/detail/index.ts
new file mode 100644
index 0000000..b04aa63
--- /dev/null
+++ b/src/app/component/target/detail/index.ts
@@ -0,0 +1,11 @@
+import { HostComponent } from './host.component';
+import { NodeComponent } from './node.component';
+import { ServiceComponent } from './service.component';
+import { ZoneComponent } from './zone.component';
+
+export const COMPONENTS = [
+  NodeComponent,
+  ZoneComponent,
+  HostComponent,
+  ServiceComponent,
+];
diff --git a/src/app/component/target/detail/node.component.html b/src/app/component/target/detail/node.component.html
new file mode 100644
index 0000000..9609c3d
--- /dev/null
+++ b/src/app/component/target/detail/node.component.html
@@ -0,0 +1,26 @@
+<div class="ui-g">
+
+  <div class="ui-g-12">
+
+
+    <ng-container [ngSwitch]="selectedTarget.group">
+
+      <ng-container *ngSwitchCase="'zone'">
+        <app-target-detail-zone [zone]="selectedTarget.target" (otherHostSelect)="otherHostSelected($event)"></app-target-detail-zone>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'host'">
+        <app-target-detail-host [host]="selectedTarget.target" (ping)="ping.emit($event)"></app-target-detail-host>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'service'">
+        <app-target-detail-service [service]="selectedTarget.target" (ping)="ping.emit($event)"></app-target-detail-service>
+      </ng-container>
+
+      <ng-container *ngSwitchDefault>
+      </ng-container>
+
+    </ng-container>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/commons/component/detail/node-detail.component.scss b/src/app/component/target/detail/node.component.scss
similarity index 100%
rename from src/commons/component/detail/node-detail.component.scss
rename to src/app/component/target/detail/node.component.scss
diff --git a/src/app/component/target/detail/node.component.ts b/src/app/component/target/detail/node.component.ts
new file mode 100644
index 0000000..646e5f0
--- /dev/null
+++ b/src/app/component/target/detail/node.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PingResult } from '@overflow/model/ping';
+import { Host, Port, Service } from '@overflow/model/discovery';
+
+
+@Component({
+  selector: 'app-target-detail-node',
+  templateUrl: './node.component.html',
+  styleUrls: ['./node.component.scss'],
+})
+export class NodeComponent {
+
+  @Input() selectedTarget: { group: string, target: Host | Port | Service } | null;
+  @Output() otherHostSelect = new EventEmitter<Host>();
+  @Output() ping = new EventEmitter<PingResult>();
+
+  constructor(
+  ) {
+
+  }
+
+  otherHostSelected(host: Host) {
+    this.otherHostSelect.emit(host);
+  }
+
+}
diff --git a/src/commons/component/detail/service-detail.component.html b/src/app/component/target/detail/service.component.html
similarity index 100%
rename from src/commons/component/detail/service-detail.component.html
rename to src/app/component/target/detail/service.component.html
diff --git a/src/commons/component/detail/service-detail.component.scss b/src/app/component/target/detail/service.component.scss
similarity index 100%
rename from src/commons/component/detail/service-detail.component.scss
rename to src/app/component/target/detail/service.component.scss
diff --git a/src/commons/component/detail/service-detail.component.ts b/src/app/component/target/detail/service.component.ts
similarity index 75%
rename from src/commons/component/detail/service-detail.component.ts
rename to src/app/component/target/detail/service.component.ts
index 24e7cbc..540be31 100644
--- a/src/commons/component/detail/service-detail.component.ts
+++ b/src/app/component/target/detail/service.component.ts
@@ -1,17 +1,21 @@
 import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
-import { Service } from '@overflow/model/discovery';
-import { PingResult } from '@overflow/model/ping';
-import { ProbeService } from '../../service/probe.service';
-import { map, catchError, take } from 'rxjs/operators';
+
 import { of } from 'rxjs';
+import { map, catchError, take } from 'rxjs/operators';
+
+import { Service } from '@overflow/model/discovery';
 import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
+import { PingResult } from '@overflow/model/ping';
+
+import { PingService } from '../../../service/ping.service';
+import { PingOption } from '@overflow/model/config/ping';
 
 @Component({
-  selector: 'app-service-detail',
-  templateUrl: './service-detail.component.html',
-  styleUrls: ['./service-detail.component.scss'],
+  selector: 'app-target-detail-service',
+  templateUrl: './service.component.html',
+  styleUrls: ['./service.component.scss'],
 })
-export class ServiceDetailComponent implements OnChanges {
+export class ServiceComponent implements OnChanges {
 
   @Input() service: Service;
 
@@ -28,7 +32,7 @@ export class ServiceDetailComponent implements OnChanges {
 
 
   constructor(
-    private probeService: ProbeService
+    private pingService: PingService
   ) {
     this.pingWaiting = false;
     this.count = 5;
@@ -44,14 +48,13 @@ export class ServiceDetailComponent implements OnChanges {
   doPing() {
     this.pingWaiting = true;
 
-    const option = {
-      Count: this.count,
-      Interval: this.interval,
-      Deadline: this.deadline,
+    const option: PingOption = {
+      count: this.count,
+      interval: this.interval,
+      deadline: this.deadline,
     };
 
-    this.probeService
-      .call<PingResult>('PingService.PingService', this.service, option)
+    this.pingService.pingService(this.service, option)
       .pipe(
         map((pingResult: PingResult) => {
           console.log(pingResult);
diff --git a/src/commons/component/detail/zone-detail.component.html b/src/app/component/target/detail/zone.component.html
similarity index 100%
rename from src/commons/component/detail/zone-detail.component.html
rename to src/app/component/target/detail/zone.component.html
diff --git a/src/commons/component/detail/zone-detail.component.scss b/src/app/component/target/detail/zone.component.scss
similarity index 100%
rename from src/commons/component/detail/zone-detail.component.scss
rename to src/app/component/target/detail/zone.component.scss
diff --git a/src/commons/component/detail/zone-detail.component.ts b/src/app/component/target/detail/zone.component.ts
similarity index 84%
rename from src/commons/component/detail/zone-detail.component.ts
rename to src/app/component/target/detail/zone.component.ts
index 5c3e610..bbb5db1 100644
--- a/src/commons/component/detail/zone-detail.component.ts
+++ b/src/app/component/target/detail/zone.component.ts
@@ -5,11 +5,11 @@ import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.
 const IPCIDR = require('ip-cidr');
 
 @Component({
-  selector: 'app-zone-detail',
-  templateUrl: './zone-detail.component.html',
-  styleUrls: ['./zone-detail.component.scss'],
+  selector: 'app-target-detail-zone',
+  templateUrl: './zone.component.html',
+  styleUrls: ['./zone.component.scss'],
 })
-export class ZoneDetailComponent implements OnInit {
+export class ZoneComponent implements OnInit {
 
   @Input() zone: Zone;
   @Output() otherHostSelect = new EventEmitter<Host>();
diff --git a/src/app/component/target/display/display.component.html b/src/app/component/target/display/display.component.html
new file mode 100644
index 0000000..342554b
--- /dev/null
+++ b/src/app/component/target/display/display.component.html
@@ -0,0 +1,18 @@
+<div>
+  <ng-container [ngSwitch]="(targetDisplayType$ | async)">
+    <app-target-display-map *ngSwitchCase="'MAP'"></app-target-display-map>
+    <app-target-display-grid *ngSwitchCase="'GRID'"></app-target-display-grid>
+    <app-target-display-tree *ngSwitchCase="'TREE'"></app-target-display-tree>
+  </ng-container>
+
+
+  <div #detailSidebar style="position: inherit; top: 0; left: 0; height: 100%;"></div>
+
+  <p-sidebar [(visible)]="displaySidebar" [modal]="false" [appendTo]="detailSidebar" styleClass="ui-sidebar-md"
+    position="right" (onHide)="onHideDetail()" [style]="{position:'absolute'}">
+    <div *ngIf="selectedTarget">
+      <app-target-detail-node [selectedTarget]="selectedTarget" (otherHostSelect)="otherHostSelected($event)"></app-target-detail-node>
+    </div>
+  </p-sidebar>
+
+</div>
\ No newline at end of file
diff --git a/src/app/component/target/display/display.component.scss b/src/app/component/target/display/display.component.scss
new file mode 100644
index 0000000..11671d7
--- /dev/null
+++ b/src/app/component/target/display/display.component.scss
@@ -0,0 +1,21 @@
+/deep/ .target-display {
+  width: 100%;
+  height: 100vh;
+  margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 400px; //text-align: center;
+}
+
+.detail-sidebar {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+/deep/ .ui-panel .ui-panel-content {
+  padding: .6em .75em;
+}
\ No newline at end of file
diff --git a/src/app/component/target/display/display.component.ts b/src/app/component/target/display/display.component.ts
new file mode 100644
index 0000000..d1113b3
--- /dev/null
+++ b/src/app/component/target/display/display.component.ts
@@ -0,0 +1,74 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterContentInit,
+  ChangeDetectorRef
+} from '@angular/core';
+
+import { Store, select } from '@ngrx/store';
+
+import { Observable, Subscription } from 'rxjs';
+import { map, catchError, take, tap } from 'rxjs/operators';
+
+import { Port, Service, Host } from '@overflow/model/discovery';
+
+import { TargetDisplayType } from '../../../core/type';
+import * as AppStore from '../../../store';
+import * as TargetStore from '../../../store/target/target';
+
+
+@Component({
+  selector: 'app-target-display',
+  templateUrl: './display.component.html',
+  styleUrls: ['./display.component.scss']
+})
+export class DisplayComponent implements OnInit, AfterContentInit, OnDestroy {
+  private targetDisplayType$: Observable<TargetDisplayType>;
+
+  displaySidebar = false;
+  selectedTargetSubscription: Subscription | null;
+  selectedTarget: { group: string, target: Host | Port | Service } | null;
+
+  constructor(
+    private store: Store<any>,
+    private changeDetector: ChangeDetectorRef,
+  ) {
+  }
+
+  ngOnInit(): void {
+    const __this = this;
+
+    this.targetDisplayType$ = this.store.pipe(select(AppStore.TargetSelector.TargetSelector.selectTargetDisplayType));
+
+    this.selectedTargetSubscription = this.store.pipe(
+      select(AppStore.TargetSelector.TargetSelector.selectSelectedTarget)
+    ).pipe(
+      map((_selectedTarget) => {
+        if (null === _selectedTarget) {
+          __this.displaySidebar = false;
+          __this.selectedTarget = null;
+        } else {
+          __this.displaySidebar = true;
+          __this.selectedTarget = _selectedTarget;
+        }
+        __this.changeDetector.detectChanges();
+      }),
+    ).subscribe();
+
+  }
+
+  ngAfterContentInit(): void {
+  }
+
+  ngOnDestroy(): void {
+    if (null !== this.selectedTargetSubscription) {
+      this.selectedTargetSubscription.unsubscribe();
+    }
+  }
+
+  onHideDetail() {
+    this.store.dispatch(new TargetStore.ChangeSelectedTarget(null));
+  }
+
+}
diff --git a/src/app/component/target/display/grid.component.html b/src/app/component/target/display/grid.component.html
new file mode 100644
index 0000000..849c823
--- /dev/null
+++ b/src/app/component/target/display/grid.component.html
@@ -0,0 +1,3 @@
+<div>
+  Grid
+</div>
\ No newline at end of file
diff --git a/src/commons/component/discovery/discovery-map.component.scss b/src/app/component/target/display/grid.component.scss
similarity index 100%
rename from src/commons/component/discovery/discovery-map.component.scss
rename to src/app/component/target/display/grid.component.scss
diff --git a/src/app/component/target/display/grid.component.ts b/src/app/component/target/display/grid.component.ts
new file mode 100644
index 0000000..4135610
--- /dev/null
+++ b/src/app/component/target/display/grid.component.ts
@@ -0,0 +1,31 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterContentInit
+} from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-target-display-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss']
+})
+export class GridComponent implements OnInit, AfterContentInit, OnDestroy {
+  constructor(
+    private store: Store<any>,
+  ) {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterContentInit(): void {
+  }
+
+  ngOnDestroy(): void {
+  }
+
+}
diff --git a/src/app/component/target/display/index.ts b/src/app/component/target/display/index.ts
new file mode 100644
index 0000000..46a5c24
--- /dev/null
+++ b/src/app/component/target/display/index.ts
@@ -0,0 +1,11 @@
+import { DisplayComponent } from './display.component';
+import { GridComponent } from './grid.component';
+import { MapComponent } from './map.component';
+import { TreeComponent } from './tree.component';
+
+export const COMPONENTS = [
+  DisplayComponent,
+  GridComponent,
+  MapComponent,
+  TreeComponent,
+];
diff --git a/src/commons/component/discovery/discovery-map.component.html b/src/app/component/target/display/map.component.html
similarity index 89%
rename from src/commons/component/discovery/discovery-map.component.html
rename to src/app/component/target/display/map.component.html
index 1d0c03b..d97d8e0 100644
--- a/src/commons/component/discovery/discovery-map.component.html
+++ b/src/app/component/target/display/map.component.html
@@ -1,5 +1,5 @@
-<div>
-  <svg #discoveryTarget width="100%" height="100%">
+<div class="target-display">
+  <svg #displayTarget width="100%" height="100%">
     <g>
       <g *ngFor="let link of links">
         <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
@@ -51,15 +51,18 @@
       </g>
     </g>
   </svg>
-  <p-card class="ui-map-info" *ngIf="discoveryResult">
+  <p-card class="ui-map-info" *ngIf="displaySummary">
     <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Hosts: </div>{{discoveryResult.totalHosts}}
+      <div>Total Hosts: </div>{{displaySummary.totalHosts}}
     </div>
     <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Services: </div>{{discoveryResult.totalServices}}
+      <div>Total Ports: </div>{{displaySummary.totalPorts}}
+    </div>
+    <div class="ui-map-info-row ui-border-bottom">
+      <div>Total Services: </div>{{displaySummary.totalServices}}
     </div>
     <div class="ui-map-info-row">
-      <div>Elapsed: </div>{{discoveryResult.elapsedTime}}
+      <div>Elapsed: </div>{{displaySummary.elapsedTime}}
     </div>
   </p-card>
 </div>
\ No newline at end of file
diff --git a/src/app/component/target/display/map.component.scss b/src/app/component/target/display/map.component.scss
new file mode 100644
index 0000000..9c9ae95
--- /dev/null
+++ b/src/app/component/target/display/map.component.scss
@@ -0,0 +1,83 @@
+.link {
+  stroke: #999;
+  stroke-opacity: 0.6;
+}
+
+.textClass {
+  stroke: #323232;
+  font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  stroke-width: .5;
+  font-size: 14px;
+}
+
+.linkTextClass {
+  stroke: #b6b4b4;
+  font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  stroke-width: .3;
+  font-size: 9px;
+}
+
+.focused {
+  opacity: 1 !important;
+}
+
+.semi-focused {
+  opacity: 0.8 !important;
+}
+
+.semi-unfocused {
+  opacity: 0.8;
+}
+
+.unfocused {
+  opacity: 0.3;
+}
+
+.semi-unselected {
+  opacity: 0.8;
+}
+
+.unselected {
+  opacity: 0.3;
+}
+
+.ui-map-info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  .ui-map-info-row {
+    //display: inline;
+    font-size: 0.8em;
+    line-height: 2em;
+    width: 120px;
+    font-weight: bold;
+    user-select: text;
+    div {
+      display: inline-block;
+      font-weight: normal;
+      padding-left: 5px;
+      width: 75px;
+      user-select: text;
+    }
+  }
+  .ui-border-bottom {
+    border-bottom: 1px solid #d6d6d6;
+  }
+}
+
+/deep/ .ui-card-body {
+  padding: 0.5em;
+  border: 1px solid #d6d6d6;
+  border-radius: 3px;
+}
+
+// /deep/ .ui-blockui {
+//   opacity: 0.1;
+// }
+/deep/ .ui-widget-overlay {
+  background-color: #666666;
+  opacity: .20;
+  filter: Alpha(Opacity=50);
+}
\ No newline at end of file
diff --git a/src/app/component/target/display/map.component.ts b/src/app/component/target/display/map.component.ts
new file mode 100644
index 0000000..087da7f
--- /dev/null
+++ b/src/app/component/target/display/map.component.ts
@@ -0,0 +1,820 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  EventEmitter,
+  Output,
+  ViewChild,
+  OnDestroy,
+  ElementRef,
+  AfterContentInit,
+  ChangeDetectorRef,
+  HostListener
+} from '@angular/core';
+
+import { Observable, of, Subscription, combineLatest } from 'rxjs';
+import { catchError, map, tap, exhaustMap, take, filter } from 'rxjs/operators';
+import { Store, select } from '@ngrx/store';
+
+import * as d3 from 'd3';
+
+import { Zone, Host, Service, Port } from '@overflow/model/discovery';
+import { Link } from '../../../core/model/link';
+import { Node } from '../../../core/model/node';
+
+import * as AppStore from '../../../store';
+import * as DiscoveryConfigStore from '../../../store/discovery/config';
+import * as TargetStore from '../../../store/target/target';
+import * as UILayoutStore from '../../../store/ui/layout';
+import { DiscoverySession } from '../../../core/discovery/discovery-session';
+import { DiscoveryMessageType } from 'src/app/core/type';
+
+export class DisplaySummary {
+  totalHosts: number;
+  totalPorts: number;
+  totalServices: number;
+  elapsedTime: string;
+
+  startDate: Date;
+
+  hTimer: any;
+
+  constructor() {
+    this.totalHosts = 0;
+    this.totalPorts = 0;
+    this.totalServices = 0;
+    this.elapsedTime = '00:00:00';
+  }
+
+  start(startDate: Date) {
+    this.startDate = startDate;
+    const __this = this;
+    const _startDate = new Date();
+    this.hTimer = setInterval(function () {
+      // Get todays date and time
+      const now = new Date().getTime();
+      __this.setElapsedTime(_startDate, new Date());
+    }, 1000);
+  }
+
+  setElapsedTime(startDate: Date, now: Date) {
+    const distance = now.getTime() - startDate.getTime();
+
+    // Time calculations for days, hours, minutes and seconds
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    this.elapsedTime = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
+  }
+
+  stop(stopDate: Date) {
+    clearInterval(this.hTimer);
+    this.setElapsedTime(this.startDate, stopDate);
+  }
+
+  increaseHost() {
+    this.totalHosts++;
+  }
+
+  increasePort() {
+    this.totalPorts++;
+  }
+
+  increaseService() {
+    this.totalServices++;
+  }
+}
+
+@Component({
+  selector: 'app-target-display-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
+
+  zone: Zone | null = null;
+  hosts: Map<string, Host>;
+  ports: Map<string, Map<number, Port>>;
+  services: Map<string, Map<number, Map<string, Service>>>;
+
+  zoneNode: Node | null = null;
+  nodes: Node[];
+  links: Link[];
+
+  selectedNode: Node | null = null;
+
+  @ViewChild('displayTarget') set displayTarget(content: ElementRef) {
+    this.displayTargetRef = content;
+  }
+
+  private displayTargetRef: ElementRef;
+  public simulation: d3.Simulation<Node, Link> | undefined;
+  private zoomBehavior: d3.ZoomBehavior<Element, {}>;
+  private displayTargetWidth: number;
+  private displayTargetHeight: number;
+  private readonly maxScale: number;
+  private readonly minScale: number;
+
+  displaySummary: DisplaySummary | null = null;
+
+  discoverySessionSubscription: Subscription | null = null;
+  refreshTargetDisplaySubscription: Subscription | null = null;
+  targetSubscription: Subscription | null = null;
+  targetObservable: Observable<void>;
+  selectedTargetSubscription: Subscription | null = null;
+
+  discoverySubscription: Subscription | null = null;
+
+  constructor(
+    private store: Store<any>,
+    private changeDetector: ChangeDetectorRef,
+  ) {
+    this.maxScale = 1;
+    this.minScale = 0.7;
+
+    const __this = this;
+    this.targetObservable = this.store.pipe(
+      take(1),
+      select((state) => {
+        const zone = AppStore.DiscoverySelector.ConfigSelector.selectZone(state);
+        const hosts = AppStore.TargetSelector.TargetSelector.selectHosts(state);
+        const ports = AppStore.TargetSelector.TargetSelector.selectPorts(state);
+        const services = AppStore.TargetSelector.TargetSelector.selectServices(state);
+
+        __this.initMapDisplay(zone, hosts, ports, services);
+      }),
+    );
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (undefined !== this.displayTargetRef) {
+      this.displayTargetWidth = this.displayTargetRef.nativeElement.clientWidth;
+      this.displayTargetHeight = this.displayTargetRef.nativeElement.clientHeight;
+
+      this.zoneNode.fx = this.displayTargetWidth / 2;
+      this.zoneNode.fy = this.displayTargetHeight / 2;
+
+      this.simulationRestart(false);
+    }
+  }
+
+
+  ngOnInit(): void {
+    const __this = this;
+    this.discoverySessionSubscription = this.store.pipe(
+      select(AppStore.DiscoverySelector.RequestSelector.selectDiscoverySession),
+      map((discoverySession: DiscoverySession) => {
+        if (null === discoverySession) {
+          if (null !== __this.discoverySubscription) {
+            __this.discoverySubscription.unsubscribe();
+            __this.discoverySubscription = null;
+          }
+          return;
+        }
+        __this.discoverySubscription = discoverySession.discoveryObservable().pipe(
+          map((discoveryMessage: { messageType: DiscoveryMessageType, params: any[] }) => {
+            switch (discoveryMessage.messageType) {
+              case DiscoveryMessageType.Queueing:
+                break;
+              case DiscoveryMessageType.QueueingFailed:
+                break;
+              case DiscoveryMessageType.QueueingTimeout:
+                break;
+              case DiscoveryMessageType.DiscoveryStart: {
+                __this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
+                __this.initMapDisplay(__this.zone, null, null, null);
+                __this.displaySummary.start(discoveryMessage.params[0]);
+              }
+                break;
+              case DiscoveryMessageType.DiscoveryStop: {
+                __this.simulationRestart(true);
+                __this.zoomToFit(0.95, 500);
+
+                __this.displaySummary.stop(discoveryMessage.params[0]);
+                __this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: false }));
+              }
+                break;
+              case DiscoveryMessageType.DiscoveryMode:
+                break;
+              case DiscoveryMessageType.DiscoveryError:
+                break;
+              case DiscoveryMessageType.DiscoveredHost:
+
+                __this.addHost(discoveryMessage.params[0], true);
+                break;
+              case DiscoveryMessageType.DiscoveredPort:
+                __this.addPort(discoveryMessage.params[0], false);
+                break;
+              case DiscoveryMessageType.DiscoveredService:
+                __this.addService(discoveryMessage.params[0], true);
+                break;
+              default:
+                break;
+            }
+          }),
+        ).subscribe();
+      }),
+      catchError(error => {
+        console.log(error);
+        return of();
+      }),
+    ).subscribe();
+
+    this.refreshTargetDisplaySubscription = this.store.pipe(
+      select(AppStore.TargetSelector.TargetSelector.selectRefreshTargetDisplay),
+      filter(v => !!v),
+      map((refreshTargetDisplay: boolean) => {
+        if (!refreshTargetDisplay) {
+          return;
+        }
+        __this.targetObservable.subscribe();
+      }),
+      catchError(error => {
+        console.log(error);
+        return of();
+      }),
+    ).subscribe();
+
+    this.selectedTargetSubscription = this.store.pipe(
+      select(AppStore.TargetSelector.TargetSelector.selectSelectedTarget)
+    ).pipe(
+      map((selectedTarget) => {
+        if (null === selectedTarget) {
+          __this.onHideDetail();
+          return;
+        } else {
+
+        }
+      }),
+    ).subscribe();
+
+  }
+
+  ngAfterContentInit(): void {
+    this.displayTargetWidth = this.displayTargetRef.nativeElement.clientWidth;
+    this.displayTargetHeight = this.displayTargetRef.nativeElement.clientHeight;
+
+    this.targetObservable.subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (null !== this.targetSubscription) {
+      this.targetSubscription.unsubscribe();
+    }
+    if (null !== this.refreshTargetDisplaySubscription) {
+      this.refreshTargetDisplaySubscription.unsubscribe();
+    }
+    if (null !== this.discoverySessionSubscription) {
+      this.discoverySessionSubscription.unsubscribe();
+    }
+    if (null !== this.selectedTargetSubscription) {
+      this.selectedTargetSubscription.unsubscribe();
+    }
+  }
+
+  initMapDisplay(zone: Zone, hosts: Host[], ports: Port[], services: Service[]) {
+    if (null === zone) {
+      return;
+    }
+    this.nodes = [];
+    this.links = [];
+    this.hosts = new Map();
+    this.ports = new Map();
+    this.services = new Map();
+    this.displaySummary = new DisplaySummary();
+
+    this.simulationInit();
+
+    this.setZone(zone);
+
+    if (null !== hosts) {
+      hosts.forEach((host) => {
+        this.addHost(host);
+      });
+    }
+
+    if (null !== ports) {
+      ports.forEach((port) => {
+        this.addPort(port);
+      });
+    }
+
+    if (null !== services) {
+      services.forEach((service) => {
+        this.addService(service);
+      });
+    }
+
+    this.simulationRestart(true);
+  }
+
+  simulationInit() {
+    if (undefined !== this.simulation) {
+      return;
+    }
+
+    const svg = d3.select(this.displayTargetRef.nativeElement);
+
+    this.zoomBehavior = d3.zoom()
+      .scaleExtent([0.2, 4])
+      .on('zoom', () => {
+        const transform = d3.event.transform;
+        svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
+      });
+    svg.call(this.zoomBehavior);
+
+    const __this = this;
+    this.simulation = d3
+      .forceSimulation<Node, Link>()
+      .nodes(this.nodes)
+      .force('charge', d3.forceManyBody().strength(-200))
+      .force('link', d3.forceLink(this.links).distance(150))
+      .force('center', d3.forceCenter(this.displayTargetWidth / 2, this.displayTargetHeight / 2))
+      .force('collision', d3.forceCollide().radius(function (node: Node) {
+        return node.r * 1.2;
+      }))
+      .on('tick', () => {
+        __this.changeDetector.markForCheck();
+      })
+      ;
+  }
+
+  simulationRestart(attachEvent: boolean = false) {
+    // Update and restart the simulation.
+    this.simulation
+      .nodes(this.nodes)
+      .force('link', d3.forceLink(this.links).distance(150))
+      .force('center', d3.forceCenter(this.displayTargetWidth / 2, this.displayTargetHeight / 2))
+      .alpha(1)
+      .restart()
+      ;
+    this.changeDetector.detectChanges();
+
+    if (attachEvent) {
+      const __this = this;
+
+      const nodeElements = d3.select(this.displayTargetRef.nativeElement).selectAll('.node-container');
+      const linkElements = d3.select(this.displayTargetRef.nativeElement).selectAll('.link-container');
+
+      function getNodeFromElement(element: Element): Node | null {
+        const container = d3.select(element);
+        const nodeId = container.attr('nodeId');
+        return __this.getNode(nodeId);
+      }
+
+      // drag
+      nodeElements.call(
+        d3.drag()
+          .on('start', function () {
+            const node = getNodeFromElement(this);
+            if (null === node || 'zone' === node.group) {
+              return;
+            }
+
+            d3.event.sourceEvent.stopPropagation();
+
+            if (!d3.event.active) {
+              __this.simulation.alphaTarget(0.3).restart();
+            }
+
+            d3.event.on('drag', dragged).on('end', ended);
+
+            function dragged(d, i) {
+              node.fx = d3.event.x;
+              node.fy = d3.event.y;
+            }
+
+            function ended() {
+              if (!d3.event.active) {
+                __this.simulation.alphaTarget(0);
+              }
+
+              node.fx = null;
+              node.fy = null;
+            }
+          })
+      );
+
+      enum ConnectedNode {
+        TARGET = 1,
+        CONNECTED,
+        NOT_CONNECTED,
+      }
+
+      function isConnectedNode(node: Node, element: Element): ConnectedNode {
+        const _node = getNodeFromElement(element);
+        if (node === _node) {
+          return ConnectedNode.TARGET;
+        }
+        for (let i = 0; i < node.links.length; i++) {
+          const link = node.links[i];
+          if (node === _node || link.source === _node || link.target === _node) {
+            return ConnectedNode.CONNECTED;
+          }
+        }
+        return ConnectedNode.NOT_CONNECTED;
+      }
+
+      function isConnectedLink(node: Node, element: Element) {
+        const _linkElement = d3.select(element);
+        const sourceId = _linkElement.attr('sourceId');
+        const targetId = _linkElement.attr('targetId');
+
+        if (sourceId === node.id || targetId === node.id) {
+          return true;
+        }
+
+        return false;
+      }
+
+      nodeElements.on('click', function () {
+        d3.event.stopPropagation();
+
+        const nodeElement = this as Element;
+        const node = getNodeFromElement(nodeElement);
+        if (null === node || 'zone' === node.group) {
+          __this.onTargetClick(node);
+          return;
+        }
+
+        if (null === __this.selectedNode) {
+          nodeElements.each(function () {
+            const _thisElement = this as Element;
+            d3.select(_thisElement).classed('semi-unfocused', false);
+            d3.select(_thisElement).classed('unfocused', false);
+          });
+
+          linkElements.each(function () {
+            const _thisElement = this as Element;
+            d3.select(_thisElement).classed('semi-unfocused', false);
+            d3.select(_thisElement).classed('unfocused', false);
+          });
+        } else {
+          nodeElements.each(function () {
+            const _thisElement = this as Element;
+            d3.select(_thisElement).classed('semi-unselected', false);
+            d3.select(_thisElement).classed('unselected', false);
+          });
+
+          linkElements.each(function () {
+            const _thisElement = this as Element;
+            d3.select(_thisElement).classed('semi-unselected', false);
+            d3.select(_thisElement).classed('unselected', false);
+          });
+        }
+
+        __this.selectedNode = node;
+
+        nodeElements.each(function () {
+          const _thisElement = this as Element;
+          switch (isConnectedNode(node, _thisElement)) {
+            case ConnectedNode.CONNECTED:
+              d3.select(_thisElement).classed('semi-unselected', true);
+              break;
+            case ConnectedNode.NOT_CONNECTED:
+              d3.select(_thisElement).classed('unselected', true);
+              break;
+            default:
+              break;
+          }
+        });
+
+        linkElements.each(function () {
+          const _thisElement = this as Element;
+          if (isConnectedLink(node, _thisElement)) {
+            d3.select(_thisElement).classed('semi-unselected', true);
+          } else {
+            d3.select(_thisElement).classed('unselected', true);
+          }
+        });
+
+
+        __this.onTargetClick(node);
+      });
+
+      // Highlight
+      const displayTarget = d3.select(this.displayTargetRef.nativeElement);
+      displayTarget.on('click', function () {
+        __this.selectedNode = null;
+        __this.store.dispatch(new TargetStore.ChangeSelectedTarget(null));
+
+        nodeElements.each(function () {
+          const _thisElement = this as Element;
+          d3.select(_thisElement).classed('semi-unselected', false);
+          d3.select(_thisElement).classed('unselected', false);
+        });
+
+        linkElements.each(function () {
+          const _thisElement = this as Element;
+          d3.select(_thisElement).classed('semi-unselected', false);
+          d3.select(_thisElement).classed('unselected', false);
+        });
+      });
+
+      nodeElements
+        .on('mouseover', function () {
+          const node = getNodeFromElement(this as Element);
+          if ('zone' === node.group) {
+            return;
+          }
+
+          if (null === __this.selectedNode) {
+            nodeElements.each(function () {
+              const _thisElement = this as Element;
+              switch (isConnectedNode(node, _thisElement)) {
+                case ConnectedNode.CONNECTED:
+                  d3.select(_thisElement).classed('semi-unfocused', true);
+                  break;
+                case ConnectedNode.NOT_CONNECTED:
+                  d3.select(_thisElement).classed('unfocused', true);
+                  break;
+                default:
+                  break;
+              }
+            });
+
+            linkElements.each(function () {
+              const _thisElement = this as Element;
+              if (isConnectedLink(node, _thisElement)) {
+                d3.select(_thisElement).classed('semi-unfocused', true);
+              } else {
+                d3.select(_thisElement).classed('unfocused', true);
+              }
+            });
+          } else {
+            nodeElements.each(function () {
+              const _thisElement = this as Element;
+              switch (isConnectedNode(node, _thisElement)) {
+                case ConnectedNode.TARGET:
+                  d3.select(_thisElement).classed('focused', true);
+                  break;
+                case ConnectedNode.CONNECTED:
+                  d3.select(_thisElement).classed('semi-focused', true);
+                  break;
+                default:
+                  break;
+              }
+            });
+
+            linkElements.each(function () {
+              const _thisElement = this as Element;
+              if (isConnectedLink(node, _thisElement)) {
+                d3.select(_thisElement).classed('semi-focused', true);
+              }
+            });
+          }
+
+        })
+        .on('mouseout', function () {
+          const node = getNodeFromElement(this as Element);
+
+          if (null === __this.selectedNode) {
+            nodeElements.each(function () {
+              const _thisElement = this as Element;
+              d3.select(_thisElement).classed('semi-unfocused', false);
+              d3.select(_thisElement).classed('unfocused', false);
+            });
+
+            linkElements.each(function () {
+              const _thisElement = this as Element;
+              d3.select(_thisElement).classed('semi-unfocused', false);
+              d3.select(_thisElement).classed('unfocused', false);
+            });
+
+          } else {
+            nodeElements.each(function () {
+              const _thisElement = this as Element;
+              d3.select(_thisElement).classed('semi-focused', false);
+              d3.select(_thisElement).classed('focused', false);
+            });
+
+            linkElements.each(function () {
+              const _thisElement = this as Element;
+              d3.select(_thisElement).classed('semi-focused', false);
+              d3.select(_thisElement).classed('focused', false);
+            });
+
+          }
+        })
+        ;
+
+    }
+  }
+
+  zoomToFit(paddingPercent, transitionDuration) {
+    const root = d3.select(this.displayTargetRef.nativeElement);
+    const bounds = root.node().getBBox();
+
+    const fullWidth = this.displayTargetWidth;
+    const fullHeight = this.displayTargetHeight;
+
+    const width = bounds.width;
+    const height = bounds.height;
+
+    const midX = bounds.x + width / 2;
+    const midY = bounds.y + height / 2;
+
+    if (width === 0 || height === 0) { return; } // nothing to fit
+
+    let scale = (paddingPercent || 0.75) / Math.max(width / fullWidth, height / fullHeight);
+    console.log(`scale: ${scale}`);
+
+    if (this.maxScale < scale) {
+      scale = this.maxScale;
+    }
+    if (this.minScale > scale) {
+      scale = this.minScale;
+    }
+
+    const translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
+
+    root
+      .transition()
+      .duration(transitionDuration || 0) // milliseconds
+      .call(this.zoomBehavior.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
+  }
+
+  onTargetClick(node: Node) {
+    console.log(node);
+
+    switch (node.group) {
+      case 'zone':
+        const zone: Zone = node.target;
+        zone.hostList = [];
+
+        this.hosts.forEach(_host => {
+          if (_host.zone.network === zone.network) {
+            zone.hostList.push(_host);
+          }
+        });
+
+        break;
+      case 'host':
+        const host: Host = node.target;
+        host.portList = [];
+        if (this.ports.has(host.address)) {
+          this.ports.get(host.address).forEach(port => {
+            host.portList.push(port);
+          });
+        }
+        break;
+      default:
+        break;
+    }
+
+    this.store.dispatch(new TargetStore.ChangeSelectedTarget({
+      group: node.group,
+      target: node.target,
+    }));
+
+    this.selectedNode = node;
+  }
+
+  onHideDetail() {
+    const __this = this;
+
+    const nodeElements = d3.select(this.displayTargetRef.nativeElement).selectAll('.node-container');
+    const linkElements = d3.select(this.displayTargetRef.nativeElement).selectAll('.link-container');
+
+    __this.selectedNode = null;
+
+    nodeElements.each(function () {
+      const _thisElement = this as Element;
+      d3.select(_thisElement).classed('semi-unselected', false);
+      d3.select(_thisElement).classed('unselected', false);
+    });
+
+    linkElements.each(function () {
+      const _thisElement = this as Element;
+      d3.select(_thisElement).classed('semi-unselected', false);
+      d3.select(_thisElement).classed('unselected', false);
+    });
+  }
+
+
+  private getNode(id: string): Node | null {
+    let _n: Node = null;
+    this.nodes.some((node): boolean => {
+      if (node.id === id) {
+        _n = node;
+        return true;
+      }
+      return false;
+    });
+    return _n;
+  }
+
+
+  refreshTargetDisplay(zone: Zone, hosts: Host[], services: Service[]) {
+
+  }
+
+  setZone(zone: Zone, requireRefresh: boolean = false) {
+    if (null === zone) {
+      return;
+    }
+    this.zone = zone;
+    this.zoneNode = new Node(zone.network);
+    this.zoneNode.group = 'zone';
+    this.zoneNode.target = zone;
+    this.zoneNode.fx = this.displayTargetWidth / 2;
+    this.zoneNode.fy = this.displayTargetHeight / 2;
+    this.zoneNode.r = 60;
+
+    this.nodes.push(
+      this.zoneNode,
+    );
+
+    if (requireRefresh) {
+      this.simulationRestart();
+    }
+  }
+
+  addHost(host: Host, requireRefresh: boolean = false) {
+    if (null === host) {
+      return;
+    }
+    this.hosts.set(host.address, host);
+
+    const hostId = `${host.address}`;
+
+    let hostNode = this.getNode(hostId);
+    if (null !== hostNode) {
+      hostNode.target = host;
+    } else {
+      hostNode = new Node(hostId);
+      hostNode.target = host;
+      hostNode.group = 'host';
+      hostNode.r = 40;
+      hostNode.x = this.zoneNode.x;
+      hostNode.y = this.zoneNode.y;
+
+      this.nodes.push(hostNode);
+      this.links.push(new Link(this.zoneNode, hostNode));
+
+      this.displaySummary.increaseHost();
+
+      if (requireRefresh) {
+        this.simulationRestart();
+      }
+    }
+
+  }
+
+  addPort(port: Port, requireRefresh: boolean = false) {
+    if (null === port) {
+      return;
+    }
+
+    let _ports: Map<number, Port>;
+    if (!this.ports.has(port.host.address)) {
+      _ports = new Map();
+      this.ports.set(port.host.address, _ports);
+    } else {
+      _ports = this.ports.get(port.host.address);
+    }
+
+    if (!_ports.has(port.portNumber)) {
+      this.displaySummary.increasePort();
+    }
+
+    _ports.set(port.portNumber, port);
+
+    if (requireRefresh) {
+      this.simulationRestart();
+    }
+  }
+
+  addService(service: Service, requireRefresh: boolean = false) {
+    if (null === service) {
+      return;
+    }
+
+    const hostId = `${service.port.host.address}`;
+    const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.port.metaPortType.key}`;
+
+    const hostNode = this.getNode(hostId);
+    let serviceNode = this.getNode(serviceId);
+    if (null !== serviceNode) {
+      serviceNode.target = service;
+    } else {
+      serviceNode = new Node(serviceId);
+      serviceNode.target = service;
+      serviceNode.group = 'service';
+      serviceNode.r = 30;
+      serviceNode.x = hostNode.x;
+      serviceNode.y = hostNode.y;
+
+      this.nodes.push(serviceNode);
+      this.links.push(new Link(hostNode, serviceNode));
+
+      this.displaySummary.increaseService();
+
+      if (requireRefresh) {
+        this.simulationRestart();
+      }
+    }
+  }
+}
diff --git a/src/app/component/target/display/tree.component.html b/src/app/component/target/display/tree.component.html
new file mode 100644
index 0000000..4064f01
--- /dev/null
+++ b/src/app/component/target/display/tree.component.html
@@ -0,0 +1,3 @@
+<div>
+  Tree
+</div>
\ No newline at end of file
diff --git a/src/app/component/target/display/tree.component.scss b/src/app/component/target/display/tree.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/component/target/display/tree.component.ts b/src/app/component/target/display/tree.component.ts
new file mode 100644
index 0000000..34a3541
--- /dev/null
+++ b/src/app/component/target/display/tree.component.ts
@@ -0,0 +1,31 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterContentInit
+} from '@angular/core';
+
+import { Store } from '@ngrx/store';
+
+@Component({
+  selector: 'app-target-display-tree',
+  templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.scss']
+})
+export class TreeComponent implements OnInit, AfterContentInit, OnDestroy {
+  constructor(
+    private store: Store<any>,
+  ) {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterContentInit(): void {
+  }
+
+  ngOnDestroy(): void {
+  }
+
+}
diff --git a/src/app/component/target/index.ts b/src/app/component/target/index.ts
new file mode 100644
index 0000000..b393505
--- /dev/null
+++ b/src/app/component/target/index.ts
@@ -0,0 +1,13 @@
+import {
+  COMPONENTS as DETAIL_COMPONENTS
+} from './detail';
+
+import {
+  COMPONENTS as DISPLAY_COMPONENTS
+} from './display';
+
+
+export const COMPONENTS = [
+  ...DETAIL_COMPONENTS,
+  ...DISPLAY_COMPONENTS,
+];
diff --git a/src/app/core/discovery/discovery-session.ts b/src/app/core/discovery/discovery-session.ts
new file mode 100644
index 0000000..11ddb71
--- /dev/null
+++ b/src/app/core/discovery/discovery-session.ts
@@ -0,0 +1,230 @@
+import { Store, select } from '@ngrx/store';
+
+import { Host, Port, DiscoveryModeType, Service } from '@overflow/model/discovery';
+import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
+import { RPCError } from '@overflow/rpc-js';
+
+import { ProbeService } from '../../service/probe.service';
+import { DiscoverRequestInfo } from '../model';
+
+import * as AppStore from '../../store';
+import * as DiscoveryRequestStore from '../../store/discovery/request';
+import * as UserStore from '../../store/environment/user';
+import * as TargetTargetStore from '../../store/target/target';
+import { take, map } from 'rxjs/operators';
+import { DiscoveryMessageType, TargetDisplayType, DiscoveryStatusType } from '../type';
+import { Subject, Observable } from 'rxjs';
+
+export class DiscoverySession {
+
+  private _discoverRequestInfo: DiscoverRequestInfo | null;
+  private _requestID: string | null;
+  private startDate: Date | null;
+  private discoverySubject: Subject<{ messageType: DiscoveryMessageType, params: any[] }> | null;
+
+  private constructor(
+    private store: Store<any>,
+    private probeService: ProbeService,
+  ) {
+  }
+
+  public static requestDiscover(store: Store<any>, probeService: ProbeService): void {
+    store.pipe(
+      take(1),
+      select((state) => {
+        const memberID = AppStore.EnvironmentSelector.UserSelector.selectMemberID(state);
+        const zone = AppStore.DiscoverySelector.ConfigSelector.selectZone(state);
+        const host = AppStore.DiscoverySelector.ConfigSelector.selectHost(state);
+        const port = AppStore.DiscoverySelector.ConfigSelector.selectPort(state);
+        const discoverHost = AppStore.DiscoverySelector.ConfigSelector.selectDiscoverHost(state);
+        const discoverPort = AppStore.DiscoverySelector.ConfigSelector.selectDiscoverPort(state);
+        const discoverService = AppStore.DiscoverySelector.ConfigSelector.selectDiscoverService(state);
+        const discoverySession = AppStore.DiscoverySelector.RequestSelector.selectDiscoverySession(state);
+
+        if (null !== discoverySession) {
+          return null;
+        }
+        const discoverRequestInfo = {
+          requesterID: memberID,
+          zone,
+          host,
+          port,
+          discoverHost,
+          discoverPort,
+          discoverService,
+        };
+        const _discoverySession = new DiscoverySession(store, probeService);
+        _discoverySession.init(discoverRequestInfo);
+
+        return _discoverySession;
+      }),
+    ).pipe(
+      map((discoverySession) => {
+        if (null === discoverySession) {
+          return;
+        }
+
+        store.dispatch(new UserStore.ChangeShowWelcomPage({ showWelcomPage: false }));
+        store.dispatch(new TargetTargetStore.ChangeTargetDisplayType({ targetDisplayType: TargetDisplayType.MAP }));
+
+        store.dispatch(new DiscoveryRequestStore.RequestDiscover({ discoverySession }));
+        // store.dispatch(new UserStore.ChangeShowWelcomPage({ showWelcomPage: false }));
+        // store.dispatch(new TargetTargetStore.ChangeTargetDisplayType({ targetDisplayType: TargetDisplayType.MAP }));
+      }),
+    ).subscribe();
+  }
+
+  public static requestDiscoverStop(store: Store<any>): void {
+    store.pipe(
+      take(1),
+      select((state) => {
+        const discoverySession = AppStore.DiscoverySelector.RequestSelector.selectDiscoverySession(state);
+
+        if (null === discoverySession) {
+          return null;
+        }
+
+        return discoverySession;
+      }),
+    ).pipe(
+      map((discoverySession) => {
+        if (null === discoverySession) {
+          return;
+        }
+        store.dispatch(new DiscoveryRequestStore.RequestDiscoverStop({ discoverySession }));
+      }),
+    ).subscribe();
+  }
+
+  init(discoverRequestInfo: DiscoverRequestInfo) {
+    this._discoverRequestInfo = discoverRequestInfo;
+    this.discoverySubject = new Subject();
+    this.probeService.subscribeNotification(this);
+  }
+
+  destroy(requireDispatch: boolean = true) {
+    this.probeService.unsubscribeNotification(this);
+
+    if (requireDispatch) {
+      this.store.dispatch(new DiscoveryRequestStore.DiscoveryComplete());
+    }
+
+    this._requestID = null;
+    this.startDate = null;
+
+    this._discoverRequestInfo = null;
+    this.discoverySubject = null;
+  }
+
+  public get requestID(): string {
+    return this._requestID;
+  }
+
+  public get discoverRequestInfo(): DiscoverRequestInfo {
+    return this._discoverRequestInfo;
+  }
+
+  public discoveryObservable(): Observable<{ messageType: DiscoveryMessageType, params: any[] }> {
+    return this.discoverySubject.asObservable();
+  }
+
+
+  /**
+   * DiscoveryQueueing
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.Queueing' })
+  public DiscoveryQueueing(requestID: string, queueingDate: Date) {
+    this._requestID = requestID;
+
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryStatus({ discoveryStatus: DiscoveryStatusType.Queueing }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.Queueing, params: [requestID, queueingDate] });
+  }
+
+  /**
+   * DiscoveryQueueingFailed
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.QueueingFailed' })
+  public DiscoveryQueueingFailed(queueingFailedDate: Date) {
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryStatus({ discoveryStatus: DiscoveryStatusType.Stopped }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.QueueingFailed, params: [queueingFailedDate] });
+
+    this.destroy();
+  }
+
+  /**
+   * DiscoveryQueueingTimeout
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.QueueingTimeout' })
+  public DiscoveryQueueingTimeout(queueingTimeoutDate: Date) {
+    this._requestID = null;
+
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryStatus({ discoveryStatus: DiscoveryStatusType.Stopped }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.QueueingTimeout, params: [queueingTimeoutDate] });
+
+    this.destroy();
+  }
+
+  /**
+   * DiscoveryStart
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryStart' })
+  public DiscoveryStart(startDate: Date) {
+    this.startDate = startDate;
+
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryStatus({ discoveryStatus: DiscoveryStatusType.Started }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveryStart, params: [startDate] });
+  }
+
+  /**
+   * DiscoveryStop
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryStop' })
+  public DiscoveryStop(stopDate: Date) {
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryStatus({ discoveryStatus: DiscoveryStatusType.Stopped }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveryStop, params: [stopDate] });
+
+    this.destroy();
+  }
+
+  /**
+ * DiscoveryMode
+ */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryMode' })
+  public DiscoveryMode(discoveryMode: DiscoveryModeType) {
+    this.store.dispatch(new DiscoveryRequestStore.ChangeDiscoveryMode({ discoveryMode: discoveryMode }));
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveryMode, params: [discoveryMode] });
+  }
+
+  /**
+   * DiscoveryError
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryError' })
+  public DiscoveryError(err: RPCError) {
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveryError, params: [err] });
+  }
+
+  /**
+   * DiscoveredHost
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredHost' })
+  public DiscoveredHost(host: Host) {
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveredHost, params: [host] });
+  }
+
+  /**
+   * DiscoveredPort
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredPort' })
+  public DiscoveredPort(port: Port) {
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveredPort, params: [port] });
+  }
+
+  /**
+   * DiscoveredService
+   */
+  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredService' })
+  public DiscoveredService(service: Service) {
+    this.discoverySubject.next({ messageType: DiscoveryMessageType.DiscoveredService, params: [service] });
+  }
+
+}
diff --git a/src/app/core/model/discover-request-info.ts b/src/app/core/model/discover-request-info.ts
new file mode 100644
index 0000000..1519326
--- /dev/null
+++ b/src/app/core/model/discover-request-info.ts
@@ -0,0 +1,11 @@
+import { Zone, Host, Port, DiscoverHost, DiscoverPort, DiscoverService } from '@overflow/model/discovery';
+
+export interface DiscoverRequestInfo {
+  requesterID: string;
+  zone: Zone | null;
+  host: Host | null;
+  port: Port | null;
+  discoverHost: DiscoverHost | null;
+  discoverPort: DiscoverPort | null;
+  discoverService: DiscoverService | null;
+}
diff --git a/src/app/core/model/index.ts b/src/app/core/model/index.ts
new file mode 100644
index 0000000..6c3d186
--- /dev/null
+++ b/src/app/core/model/index.ts
@@ -0,0 +1,3 @@
+export * from './link';
+export * from './node';
+export * from './discover-request-info';
diff --git a/src/commons/model/link.ts b/src/app/core/model/link.ts
similarity index 100%
rename from src/commons/model/link.ts
rename to src/app/core/model/link.ts
diff --git a/src/commons/model/node.ts b/src/app/core/model/node.ts
similarity index 100%
rename from src/commons/model/node.ts
rename to src/app/core/model/node.ts
diff --git a/src/app/core/type/discovery-message.ts b/src/app/core/type/discovery-message.ts
new file mode 100644
index 0000000..d79891e
--- /dev/null
+++ b/src/app/core/type/discovery-message.ts
@@ -0,0 +1,13 @@
+
+export enum DiscoveryMessageType {
+  Queueing = 'Queueing',
+  QueueingFailed = 'QueueingFailed',
+  QueueingTimeout = 'QueueingTimeout',
+  DiscoveryStart = 'DiscoveryStart',
+  DiscoveryStop = 'DiscoveryStop',
+  DiscoveryMode = 'DiscoveryMode',
+  DiscoveryError = 'DiscoveryError',
+  DiscoveredHost = 'DiscoveredHost',
+  DiscoveredPort = 'DiscoveredPort',
+  DiscoveredService = 'DiscoveredService',
+}
diff --git a/src/app/core/type/discovery-status.ts b/src/app/core/type/discovery-status.ts
new file mode 100644
index 0000000..4fd761e
--- /dev/null
+++ b/src/app/core/type/discovery-status.ts
@@ -0,0 +1,7 @@
+export enum DiscoveryStatusType {
+  Requested = 'Requested',
+  Queueing = 'Queueing',
+  Started = 'Started',
+  Stopping = 'Stopping',
+  Stopped = 'Stopped'
+}
diff --git a/src/app/core/type/index.ts b/src/app/core/type/index.ts
new file mode 100644
index 0000000..0012843
--- /dev/null
+++ b/src/app/core/type/index.ts
@@ -0,0 +1,3 @@
+export * from './discovery-message';
+export * from './discovery-status';
+export * from './target-display';
diff --git a/src/app/core/type/target-display.ts b/src/app/core/type/target-display.ts
new file mode 100644
index 0000000..b5673d3
--- /dev/null
+++ b/src/app/core/type/target-display.ts
@@ -0,0 +1,7 @@
+
+export enum TargetDisplayType {
+  NONE = 'NONE',
+  MAP = 'MAP',
+  GRID = 'GRID',
+  TREE = 'TREE',
+}
diff --git a/src/app/core/util/discovery.util.ts b/src/app/core/util/discovery.util.ts
new file mode 100644
index 0000000..514c1f5
--- /dev/null
+++ b/src/app/core/util/discovery.util.ts
@@ -0,0 +1,48 @@
+import { combineLatest, Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+import { DiscoverHost, DiscoverPort, DiscoverService, Zone, Host, Port } from '@overflow/model/discovery';
+
+import * as AppStore from '../../store';
+import { DiscoverRequestInfo } from '../model';
+import { DiscoverySession } from '../discovery/discovery-session';
+
+export class DiscoveryUtil {
+  /**
+   * name
+   */
+  public static getRequestInfo(store: Store<any>): Observable<DiscoverRequestInfo> {
+    return combineLatest(
+      store.select(AppStore.EnvironmentSelector.UserSelector.selectMemberID),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectZone),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectHost),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectPort),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectDiscoverHost),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectDiscoverPort),
+      store.select(AppStore.DiscoverySelector.ConfigSelector.selectDiscoverService),
+      (
+        memberID: string,
+        zone: Zone, host: Host, port: Port,
+        discoverHost: DiscoverHost, discoverPort: DiscoverPort, discoverService: DiscoverService) => {
+        return {
+          requesterID: memberID,
+          zone,
+          host,
+          port,
+          discoverHost,
+          discoverPort,
+          discoverService,
+        };
+      }
+    );
+  }
+
+  public static getDiscoverySession(store: Store<any>): Observable<DiscoverySession> {
+    return combineLatest(
+      store.select(AppStore.DiscoverySelector.RequestSelector.selectDiscoverySession),
+      (discoverySession: DiscoverySession) => {
+        return discoverySession;
+      }
+    );
+  }
+}
diff --git a/src/app/pages/home/home-page-routing.module.ts b/src/app/pages/home/home-page-routing.module.ts
deleted file mode 100644
index 126218e..0000000
--- a/src/app/pages/home/home-page-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomePageComponent } from './home-page.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: HomePageComponent,
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HomePageRoutingModule { }
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 9057f50..e1d1d3e 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,6 +1,6 @@
-<of-p-div #discoveryContainer>
-  <div *ngIf="showIntro" class="home-start">
-    <div class="start-button" (click)="discoveryConfigService.setDiscoveryStatus('Started')">
+<of-p-div>
+  <div *ngIf="(showWelcomPage$ | async)" class="home-start">
+    <div class="start-button" (click)="requestDiscover()">
       <svg version="1.1" viewBox="0 0 200 210">
         <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
         c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
@@ -10,127 +10,19 @@
       <img src="assets/image/logo/overFlow_CI_white_90.png">
       <h1>Network Scanner </h1>
       <br>
-      <b>를 이용해 주셔서 감사합니다.</b>
+      <b>이용해 주셔서 감사합니다.</b>
       <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
     </div>
   </div>
 
-  <div *ngIf="!showIntro" class="discovery-container">
-    <svg #discoveryTarget width="100%" height="100%">
-      <g>
-        <g *ngFor="let link of links">
-          <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
-            [attr.targetId]="link.target.id">
-            <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
-            <text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
-              [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
-          </g>
-        </g>
-        <g *ngFor="let node of nodes">
-          <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
-            <g *ngIf="node.group === 'zone'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                xlink:href="assets/image/node/icon/icon_overflow.svg"></image>
-            </g>
-            <g *ngIf="node.group === 'zone'">
-              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
-            </g>
-            <g *ngIf="node.group !== 'zone'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                xlink:href="assets/image/node/icon/icon_background.svg"></image>
-            </g>
-            <g *ngIf="node.group === 'host'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                attr.xlink:href="assets/image/node/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
-            </g>
-            <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                attr.xlink:href="assets/image/node/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
-            </g>
-            <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
-            <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
-          </g> -->
-            <g *ngIf="node.group === 'host'">
-              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
-            </g>
-            <g *ngIf="node.group === 'service'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                attr.xlink:href="assets/image/node/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
-            </g>
-            <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
-              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
-                attr.xlink:href="assets/image/node/logo/logo_{{node.target.key | lowercase}}.svg"></image>
-            </g>
-            <g *ngIf="node.group === 'service'">
-              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <p-card class="ui-map-info" *ngIf="discoveryResult">
-      <div class="ui-map-info-row ui-border-bottom">
-        <div>Total Hosts: </div>{{discoveryResult.totalHosts}}
-      </div>
-      <div class="ui-map-info-row ui-border-bottom">
-        <div>Total Services: </div>{{discoveryResult.totalServices}}
-      </div>
-      <div class="ui-map-info-row">
-        <div>Elapsed: </div>{{discoveryResult.elapsedTime}}
-      </div>
-    </p-card>
-
-    <div #detailSidebar style="position: sticky; top: 0; left: 0; height: 100%;"></div>
-
-    <p-sidebar [(visible)]="displaySidebar" [modal]="false" [appendTo]="detailSidebar" styleClass="ui-sidebar-md"
-      position="right" (onHide)="onHideDetail()" [style]="{position:'absolute'}">
-      <div *ngIf="selectedNode !== null">
-        <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
-      </div>
-    </p-sidebar>
+  <div *ngIf="!(showWelcomPage$ | async)" class="display-container">
+    <app-target-display></app-target-display>
   </div>
 </of-p-div>
 
 <p-confirmDialog></p-confirmDialog>
 
-<p-blockUI id="discovery-blockUI" [target]="discoveryContainer" [blocked]="discoveryRequestID !== null">
-</p-blockUI>
-
 <p-dialog [showHeader]="false" [(visible)]="stopping" [modal]="true" [responsive]="false" [width]="300" [height]="100"
   [minY]="70" [closeOnEscape]="false" [closable]="false">
   <div class="ui-dialog-text-center">Discovery is being stopped...</div>
-</p-dialog>
-
-
-<!-- <div class="ui-fluid">
-    <div class="ui-g">
-        <div class="ui-g-12">
-            <h1>Home works!!!!</h1>
-            <p-panel #content [showHeader]="false" class="block-panel">
-                <div class="ui-g" dir="rtl">
-                    <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
-                </div>
-            </p-panel>
-
-            <h3 class="first">Document</h3>
-            <p-blockUI [blocked]="blockedDocument"></p-blockUI>
-
-            <button type="button" pButton label="Block" (click)="blockDocument()"></button>
-
-            <h3>Panel</h3>
-            <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
-            <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
-
-            <p-blockUI [target]="pnl" [blocked]="blockedPanel">
-                <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
-            </p-blockUI>
-            <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
-                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                son Michael has just come home from the war, but does not intend to become part of his father's business.
-                Through Michael's life the nature of the family business becomes clear. The business of the family is
-                just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
-                violence whenever anything stands against the good of the family.
-            </p-panel>
-        </div>
-    </div>
-</div> -->
\ No newline at end of file
+</p-dialog>
\ No newline at end of file
diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss
index 6e65a14..2334de7 100644
--- a/src/app/pages/home/home-page.component.scss
+++ b/src/app/pages/home/home-page.component.scss
@@ -48,105 +48,15 @@
   padding: .6em .75em;
 }
 
-.discovery-container {
-  height: 100vh;
-  margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
-  padding: 0;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 400px; //text-align: center;
-}
-
-.link {
-  stroke: #999;
-  stroke-opacity: 0.6;
-}
-
-.textClass {
-  stroke: #323232;
-  font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
-  font-weight: normal;
-  stroke-width: .5;
-  font-size: 14px;
-}
-
-.linkTextClass {
-  stroke: #b6b4b4;
-  font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
-  font-weight: normal;
-  stroke-width: .3;
-  font-size: 9px;
-}
-
-.focused {
-  opacity: 1 !important;
-}
-
-.semi-focused {
-  opacity: 0.8 !important;
-}
-
-.semi-unfocused {
-  opacity: 0.8;
-}
-
-.unfocused {
-  opacity: 0.3;
-}
-
-.semi-unselected {
-  opacity: 0.8;
-}
-
-.unselected {
-  opacity: 0.3;
-}
-
-.ui-map-info {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  .ui-map-info-row {
-    //display: inline;
-    font-size: 0.8em;
-    line-height: 2em;
-    width: 120px;
-    font-weight: bold;
-    user-select: text;
-    div {
-      display: inline-block;
-      font-weight: normal;
-      padding-left: 5px;
-      width: 75px;
-      user-select: text;
-    }
-  }
-  .ui-border-bottom {
-    border-bottom: 1px solid #d6d6d6;
-  }
-}
-
-/deep/ .ui-card-body {
-  padding: 0.5em;
-  border: 1px solid #d6d6d6;
-  border-radius: 3px;
-}
-
-.detail-sidebar {
-  top: 0;
-  left: 0;
-  height: 100%;
-}
-
-// /deep/ .ui-blockui {
-//   opacity: 0.1;
-// }
-/deep/ .ui-widget-overlay {
-  background-color: #666666;
-  opacity: .20;
-  filter: Alpha(Opacity=50);
+.display-container {
+  position: relative; // height: 100vh;
+  // margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em;
+  // padding: 0;
+  // box-sizing: border-box;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  // min-width: 400px; //text-align: center;
 }
 
 .ui-dialog-text-center {
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 9e49d1c..22af793 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -1,75 +1,19 @@
 
 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core';
 
-import { Subject, Subscription, of } from 'rxjs';
-import { map, catchError, take } from 'rxjs/operators';
+import { Subject, Subscription, of, Observable } from 'rxjs';
+import { map, catchError, take, tap } from 'rxjs/operators';
 
-import * as d3 from 'd3';
+import { Store, select } from '@ngrx/store';
 
 import { ConfirmationService } from 'primeng/primeng';
 
-import { Zone, Host, Port, Service, DiscoverHost } from '@overflow/model/discovery';
-import { RPCSubscriber } from '@overflow/commons/ui/decorator/RPCSubscriber';
-import { RPCError } from '@overflow/rpc-js';
-import { toMetaIPType, MetaIPTypeEnum, toMetaCryptoType, MetaCryptoTypeEnum, toMetaPortType, MetaPortTypeEnum } from '@overflow/model/meta';
-import { DiscoveryModeType } from '@overflow/model/discovery/discovery';
+import { ProbeService } from '../../service/probe.service';
 
-import { ProbeService, requesterID } from '../../../commons/service/probe.service';
-import { DiscoveryConfigService, DiscoveryStatusType } from '../../../commons/service/discovery-config.service';
-import { Node } from '../../../commons/model/node';
-import { Link } from '../../../commons/model/link';
+import * as AppStore from '../../store';
+import { DiscoverySession } from '../../core/discovery/discovery-session';
 
 
-export class DiscoveryResult {
-  totalHosts: number;
-  totalServices: number;
-  elapsedTime: string;
-
-  hTimer: any;
-
-  constructor() {
-    this.totalHosts = 0;
-    this.totalServices = 0;
-    this.elapsedTime = '00:00:00';
-  }
-
-  start() {
-    const __this = this;
-    const startTime = new Date().getTime();
-    this.hTimer = setInterval(function () {
-      // Get todays date and time
-      const now = new Date().getTime();
-
-      // Find the distance between now and the count down date
-      const distance = now - startTime;
-
-      // Time calculations for days, hours, minutes and seconds
-      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-      __this.setElapsedTime(hours, minutes, seconds);
-    }, 1000);
-  }
-
-  setElapsedTime(hour: number, minute: number, second: number) {
-    this.elapsedTime = String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
-  }
-
-  stop(hours: number, minutes: number, seconds: number) {
-    clearInterval(this.hTimer);
-    this.setElapsedTime(hours, minutes, seconds);
-  }
-
-  increaseHost() {
-    this.totalHosts++;
-  }
-
-  increaseService() {
-    this.totalServices++;
-  }
-}
-
 @Component({
   selector: 'app-pages-home',
   templateUrl: './home-page.component.html',
@@ -80,101 +24,32 @@ export class DiscoveryResult {
 })
 export class HomePageComponent implements OnInit, OnDestroy {
 
-  private discoveryTargetRef: ElementRef;
-
-  zone: Zone;
-  discoverHost: DiscoverHost;
-
-  blockedPanel = false;
-  displaySidebar = false;
-  stopping = false;
-
   blockedDocument = false;
 
-  showIntro = true;
-  selectedNode = null;
-
-  private zoneNode: Node;
-  private nodes: Node[];
-  private links: Link[];
-  public simulation: d3.Simulation<Node, Link> | undefined;
-  private zoomBehavior: d3.ZoomBehavior<Element, {}>;
-  private discoveryContainerWidth: number;
-  private discoveryContainerHeight: number;
-  private readonly maxScale: number;
-  private readonly minScale: number;
-
-  private discoveryStartDate: Date;
-  discoveryRequestID: string | null;
-  hosts: Map<string, Host>;
-  ports: Map<string, Map<number, Port>>;
-  discoveryResult: DiscoveryResult;
   private preventBrowserCloseSubject: Subject<void>;
   private preventBrowserCloseSubscription: Subscription;
 
-  @HostListener('window:resize', ['$event'])
-  onResize(event) {
-    if (undefined !== this.discoveryTargetRef) {
-      this.discoveryContainerWidth = this.discoveryTargetRef.nativeElement.clientWidth;
-      this.discoveryContainerHeight = this.discoveryTargetRef.nativeElement.clientHeight;
-
-      this.zoneNode.fx = this.discoveryContainerWidth / 2;
-      this.zoneNode.fy = this.discoveryContainerHeight / 2;
-
-      this.simulationRestart(false);
-    }
-  }
+  showWelcomPage$: Observable<boolean>;
 
   @HostListener('window:beforeunload', ['$event'])
   onBeforeUnload($event: Event) {
-    if (null !== this.discoveryRequestID) {
-      this.preventBrowserCloseSubject.next();
-      $event.returnValue = true;
-    }
-  }
-
-  @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) {
-    this.discoveryTargetRef = content;
+    // if (null !== this.discoveryRequestID) {
+    //   this.preventBrowserCloseSubject.next();
+    //   $event.returnValue = true;
+    // }
   }
 
   constructor(
-    private changeDetector: ChangeDetectorRef,
     private confirmationService: ConfirmationService,
     private probeService: ProbeService,
-    private discoveryConfigService: DiscoveryConfigService,
+    private store: Store<any>,
   ) {
-    this.nodes = [];
-    this.links = [];
-    this.maxScale = 1;
-    this.minScale = 0.7;
-
-    this.hosts = new Map();
-    this.ports = new Map();
-
-    this.discoveryRequestID = null;
     this.preventBrowserCloseSubject = new Subject<void>();
-    this.discoveryResult = null;
   }
 
   ngOnInit() {
-    this.probeService.subscribeNotification(this);
-    // this.startDiscovery("");
-    this.discoveryConfigService.zone.subscribe(res => {
-      this.zone = res as Zone;
-    });
-    this.discoveryConfigService.discoverHost.subscribe(res => {
-      this.discoverHost = res as DiscoverHost;
-    });
-    this.discoveryConfigService.discoveryStatus.subscribe(res => {
-      if (res === DiscoveryStatusType.Started) {
-        this.startDiscovery();
-      } else if (res === DiscoveryStatusType.Stopping) {
-        if (null !== this.discoveryRequestID) {
-          this.stopping = true;
-          this.probeService.send('DiscoveryService.DiscoverStop', requesterID, this.discoveryRequestID);
-        }
-      }
-    });
+    this.showWelcomPage$ = this.store.pipe(select(AppStore.EnvironmentSelector.UserSelector.selectShowWelcomPage));
+
     this.preventBrowserCloseSubscription = this.preventBrowserCloseSubject
       .pipe(
         map(() => {
@@ -197,7 +72,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.probeService.unsubscribeNotification(this);
     this.preventBrowserCloseSubscription.unsubscribe();
   }
 
@@ -208,831 +82,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
     }, 3000);
   }
 
-  startDiscovery() {
-    // this.zone = {
-    //   network: '192.168.1.0/24',
-    //   iface: 'enp3s0',
-    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-    //   address: '192.168.1.101',
-    //   mac: '44:8a:5b:f1:f1:f3',
-    // };
-
-    // this.discoverHost = {
-    //   metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-    //   firstScanRange: '192.168.1.1',
-    //   lastScanRange: '192.168.1.254',
-    //   discoveryConfig: {
-    //   },
-    //   discoverPort: {
-    //     firstScanRange: 1,
-    //     lastScanRange: 65535,
-    //     includeTCP: true,
-    //     includeUDP: true,
-    //     discoverService: {
-    //     }
-    //   }
-    // };
-
-    console.log('########################################################');
-    console.log(this.zone);
-    console.log(this.discoverHost);
-    console.log('########################################################');
-
-    this.discoveryResult = new DiscoveryResult();
-    this.showIntro = false;
-    this.changeDetector.detectChanges();
-
-    this.discoveryContainerWidth = this.discoveryTargetRef.nativeElement.clientWidth;
-    this.discoveryContainerHeight = this.discoveryTargetRef.nativeElement.clientHeight;
-
-    this.simulationInit();
-
-    this.nodes = [];
-    this.links = [];
-
-    this.zoneNode = new Node(this.zone.network);
-    this.zoneNode.group = 'zone';
-    this.zoneNode.target = this.zone;
-    this.zoneNode.fx = this.discoveryContainerWidth / 2;
-    this.zoneNode.fy = this.discoveryContainerHeight / 2;
-    this.zoneNode.r = 60;
-
-    this.nodes.push(
-      this.zoneNode,
-    );
-
-    this.links.push(
-    );
-
-    // this.setTestData();
-    // this.simulationRestart(true);
-
-    this.simulationRestart();
-    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
-  }
-
-  simulationInit() {
-    if (undefined !== this.simulation) {
-      return;
-    }
-
-    const svg = d3.select(this.discoveryTargetRef.nativeElement);
-
-    this.zoomBehavior = d3.zoom()
-      .scaleExtent([0.2, 4])
-      .on('zoom', () => {
-        const transform = d3.event.transform;
-        svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
-      });
-    svg.call(this.zoomBehavior);
-
-    const __this = this;
-    this.simulation = d3
-      .forceSimulation<Node, Link>()
-      .nodes(this.nodes)
-      .force('charge', d3.forceManyBody().strength(-200))
-      .force('link', d3.forceLink(this.links).distance(150))
-      .force('center', d3.forceCenter(this.discoveryContainerWidth / 2, this.discoveryContainerHeight / 2))
-      .force('collision', d3.forceCollide().radius(function (node: Node) {
-        return node.r * 1.2;
-      }))
-      .on('tick', () => {
-        __this.changeDetector.markForCheck();
-      })
-      ;
-  }
-
-  simulationRestart(attachEvent: boolean = false) {
-    // Update and restart the simulation.
-    this.simulation
-      .nodes(this.nodes)
-      .force('link', d3.forceLink(this.links).distance(150))
-      .force('center', d3.forceCenter(this.discoveryContainerWidth / 2, this.discoveryContainerHeight / 2))
-      .alpha(1)
-      .restart()
-      ;
-    this.changeDetector.detectChanges();
-
-    if (attachEvent) {
-      const __this = this;
-
-      const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
-      const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
-
-      function getNodeFromElement(element: Element): Node | null {
-        const container = d3.select(element);
-        const nodeId = container.attr('nodeId');
-        return __this.getNode(nodeId);
-      }
-
-      // drag
-      nodeElements.call(
-        d3.drag()
-          .on('start', function () {
-            const node = getNodeFromElement(this);
-            if (null === node || 'zone' === node.group) {
-              return;
-            }
-
-            d3.event.sourceEvent.stopPropagation();
-
-            if (!d3.event.active) {
-              __this.simulation.alphaTarget(0.3).restart();
-            }
-
-            d3.event.on('drag', dragged).on('end', ended);
-
-            function dragged(d, i) {
-              node.fx = d3.event.x;
-              node.fy = d3.event.y;
-            }
-
-            function ended() {
-              if (!d3.event.active) {
-                __this.simulation.alphaTarget(0);
-              }
-
-              node.fx = null;
-              node.fy = null;
-            }
-          })
-      );
-
-      enum ConnectedNode {
-        TARGET = 1,
-        CONNECTED,
-        NOT_CONNECTED,
-      }
-
-      function isConnectedNode(node: Node, element: Element): ConnectedNode {
-        const _node = getNodeFromElement(element);
-        if (node === _node) {
-          return ConnectedNode.TARGET;
-        }
-        for (let i = 0; i < node.links.length; i++) {
-          const link = node.links[i];
-          if (node === _node || link.source === _node || link.target === _node) {
-            return ConnectedNode.CONNECTED;
-          }
-        }
-        return ConnectedNode.NOT_CONNECTED;
-      }
-
-      function isConnectedLink(node: Node, element: Element) {
-        const _linkElement = d3.select(element);
-        const sourceId = _linkElement.attr('sourceId');
-        const targetId = _linkElement.attr('targetId');
-
-        if (sourceId === node.id || targetId === node.id) {
-          return true;
-        }
-
-        return false;
-      }
-
-      nodeElements.on('click', function () {
-        d3.event.stopPropagation();
-
-        const nodeElement = this as Element;
-        const node = getNodeFromElement(nodeElement);
-        if (null === node || 'zone' === node.group) {
-          __this.onTargetClick(node);
-          return;
-        }
-
-        if (null === __this.selectedNode) {
-          nodeElements.each(function () {
-            const _thisElement = this as Element;
-            d3.select(_thisElement).classed('semi-unfocused', false);
-            d3.select(_thisElement).classed('unfocused', false);
-          });
-
-          linkElements.each(function () {
-            const _thisElement = this as Element;
-            d3.select(_thisElement).classed('semi-unfocused', false);
-            d3.select(_thisElement).classed('unfocused', false);
-          });
-        } else {
-          nodeElements.each(function () {
-            const _thisElement = this as Element;
-            d3.select(_thisElement).classed('semi-unselected', false);
-            d3.select(_thisElement).classed('unselected', false);
-          });
-
-          linkElements.each(function () {
-            const _thisElement = this as Element;
-            d3.select(_thisElement).classed('semi-unselected', false);
-            d3.select(_thisElement).classed('unselected', false);
-          });
-        }
-
-        __this.selectedNode = node;
-
-        nodeElements.each(function () {
-          const _thisElement = this as Element;
-          switch (isConnectedNode(node, _thisElement)) {
-            case ConnectedNode.CONNECTED:
-              d3.select(_thisElement).classed('semi-unselected', true);
-              break;
-            case ConnectedNode.NOT_CONNECTED:
-              d3.select(_thisElement).classed('unselected', true);
-              break;
-            default:
-              break;
-          }
-        });
-
-        linkElements.each(function () {
-          const _thisElement = this as Element;
-          if (isConnectedLink(node, _thisElement)) {
-            d3.select(_thisElement).classed('semi-unselected', true);
-          } else {
-            d3.select(_thisElement).classed('unselected', true);
-          }
-        });
-
-
-        __this.onTargetClick(node);
-      });
-
-      // Highlight
-      const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
-      discoveryContainer.on('click', function () {
-        __this.selectedNode = null;
-        __this.displaySidebar = false;
-
-        nodeElements.each(function () {
-          const _thisElement = this as Element;
-          d3.select(_thisElement).classed('semi-unselected', false);
-          d3.select(_thisElement).classed('unselected', false);
-        });
-
-        linkElements.each(function () {
-          const _thisElement = this as Element;
-          d3.select(_thisElement).classed('semi-unselected', false);
-          d3.select(_thisElement).classed('unselected', false);
-        });
-      });
-
-      nodeElements
-        .on('mouseover', function () {
-          const node = getNodeFromElement(this as Element);
-          if ('zone' === node.group) {
-            return;
-          }
-
-          if (null === __this.selectedNode) {
-            nodeElements.each(function () {
-              const _thisElement = this as Element;
-              switch (isConnectedNode(node, _thisElement)) {
-                case ConnectedNode.CONNECTED:
-                  d3.select(_thisElement).classed('semi-unfocused', true);
-                  break;
-                case ConnectedNode.NOT_CONNECTED:
-                  d3.select(_thisElement).classed('unfocused', true);
-                  break;
-                default:
-                  break;
-              }
-            });
-
-            linkElements.each(function () {
-              const _thisElement = this as Element;
-              if (isConnectedLink(node, _thisElement)) {
-                d3.select(_thisElement).classed('semi-unfocused', true);
-              } else {
-                d3.select(_thisElement).classed('unfocused', true);
-              }
-            });
-          } else {
-            nodeElements.each(function () {
-              const _thisElement = this as Element;
-              switch (isConnectedNode(node, _thisElement)) {
-                case ConnectedNode.TARGET:
-                  d3.select(_thisElement).classed('focused', true);
-                  break;
-                case ConnectedNode.CONNECTED:
-                  d3.select(_thisElement).classed('semi-focused', true);
-                  break;
-                default:
-                  break;
-              }
-            });
-
-            linkElements.each(function () {
-              const _thisElement = this as Element;
-              if (isConnectedLink(node, _thisElement)) {
-                d3.select(_thisElement).classed('semi-focused', true);
-              }
-            });
-          }
-
-        })
-        .on('mouseout', function () {
-          const node = getNodeFromElement(this as Element);
-
-          if (null === __this.selectedNode) {
-            nodeElements.each(function () {
-              const _thisElement = this as Element;
-              d3.select(_thisElement).classed('semi-unfocused', false);
-              d3.select(_thisElement).classed('unfocused', false);
-            });
-
-            linkElements.each(function () {
-              const _thisElement = this as Element;
-              d3.select(_thisElement).classed('semi-unfocused', false);
-              d3.select(_thisElement).classed('unfocused', false);
-            });
-
-          } else {
-            nodeElements.each(function () {
-              const _thisElement = this as Element;
-              d3.select(_thisElement).classed('semi-focused', false);
-              d3.select(_thisElement).classed('focused', false);
-            });
-
-            linkElements.each(function () {
-              const _thisElement = this as Element;
-              d3.select(_thisElement).classed('semi-focused', false);
-              d3.select(_thisElement).classed('focused', false);
-            });
-
-          }
-        })
-        ;
-
-    }
-  }
-
-  zoomToFit(paddingPercent, transitionDuration) {
-    const root = d3.select(this.discoveryTargetRef.nativeElement);
-    const bounds = root.node().getBBox();
-
-    const fullWidth = this.discoveryContainerWidth;
-    const fullHeight = this.discoveryContainerHeight;
-
-    const width = bounds.width;
-    const height = bounds.height;
-
-    const midX = bounds.x + width / 2;
-    const midY = bounds.y + height / 2;
-
-    if (width === 0 || height === 0) { return; } // nothing to fit
-
-    let scale = (paddingPercent || 0.75) / Math.max(width / fullWidth, height / fullHeight);
-    console.log(`scale: ${scale}`);
-
-    if (this.maxScale < scale) {
-      scale = this.maxScale;
-    }
-    if (this.minScale > scale) {
-      scale = this.minScale;
-    }
-
-    const translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
-
-    root
-      .transition()
-      .duration(transitionDuration || 0) // milliseconds
-      .call(this.zoomBehavior.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
-  }
-
-  onTargetClick(node: Node) {
-    console.log(node);
-    this.displaySidebar = true;
-
-    switch (node.group) {
-      case 'zone':
-        const zone: Zone = node.target;
-        zone.hostList = [];
-
-        this.hosts.forEach(_host => {
-          if (_host.zone.network === zone.network) {
-            zone.hostList.push(_host);
-          }
-        });
-        break;
-      case 'host':
-        const host: Host = node.target;
-        host.portList = [];
-        if (this.ports.has(host.address)) {
-          this.ports.get(host.address).forEach(port => {
-            host.portList.push(port);
-          });
-        }
-        break;
-      default:
-        break;
-    }
-    this.selectedNode = node;
-  }
-
-  onHideDetail() {
-    const __this = this;
-
-    const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container');
-    const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link-container');
-
-    __this.selectedNode = null;
-
-    nodeElements.each(function () {
-      const _thisElement = this as Element;
-      d3.select(_thisElement).classed('semi-unselected', false);
-      d3.select(_thisElement).classed('unselected', false);
-    });
-
-    linkElements.each(function () {
-      const _thisElement = this as Element;
-      d3.select(_thisElement).classed('semi-unselected', false);
-      d3.select(_thisElement).classed('unselected', false);
-    });
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.Queueing' })
-  public DiscoveryQueueing(requestID: string, queueingDate: Date) {
-    console.log('DiscoveryQueueing', requestID, queueingDate);
-    this.discoveryRequestID = requestID;
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.QueueingFailed' })
-  public DiscoveryQueueingFailed(queueingFailedDate: Date) {
-    console.log('DiscoveryQueueingFailed', queueingFailedDate);
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.QueueingTimeout' })
-  public DiscoveryQueueingTimeout(queueingTimeoutDate: Date) {
-    console.log('DiscoveryQueueingTimeout', queueingTimeoutDate);
-    this.discoveryRequestID = null;
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryStart' })
-  public DiscoveryStart(startDate: Date) {
-    console.log('DiscoveryStart', startDate);
-    this.discoveryStartDate = startDate;
-
-    this.discoveryResult.start();
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryStop' })
-  public DiscoveryStop(stopDate: Date) {
-    console.log('DiscoveryStop', stopDate);
-
-    this.discoveryRequestID = null;
-
-    const _millisecond = Math.abs(stopDate.getTime() - this.discoveryStartDate.getTime());
-
-    const _seconds = _millisecond / 1000;
-    const seconds = Math.floor(_seconds % 60);
-    const _minutes = _seconds / 60;
-    const minutes = Math.floor(_minutes % 60);
-    const _hours = _minutes / 60;
-    const hours = Math.floor(_hours % 24);
-    const days = Math.floor(_hours / 24);
-
-    console.log(`${days}일 ${hours}시 ${minutes}분 ${seconds}초`);
-
-    let hostCount = 0;
-    let serviceCount = 0;
-
-    this.nodes.forEach((node) => {
-      switch (node.group) {
-        case 'host':
-          hostCount++;
-          break;
-        case 'service':
-          serviceCount++;
-          break;
-
-        default:
-          break;
-      }
-    });
-
-    console.log(`Host: ${hostCount}개 Service: ${serviceCount}개`);
-
-    this.discoveryConfigService.setDiscoveryStatus(DiscoveryStatusType.Stopped);
-
-    this.simulationRestart(true);
-    this.zoomToFit(0.95, 500);
-
-    this.discoveryResult.stop(hours, minutes, seconds);
-    // this.resultMsg = [];
-    // this.resultMsg.push(hostCount + '');
-    // this.resultMsg.push(serviceCount + '');
-    // this.resultMsg.push(hours + ':' + minutes + ':' + seconds);
-    this.stopping = false;
-  }
-
-  /**
- * DiscoveryMode
- */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryMode' })
-  public DiscoveryMode(mode: DiscoveryModeType) {
-    this.discoveryConfigService.setDiscoveryMode(mode);
-  }
-
-  /**
-   * DiscoverHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveryError' })
-  public DiscoveryError(err: RPCError) {
-    console.log('DiscoveryError', err);
-  }
-
-  /**
-   * DiscoveredHost
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredHost' })
-  public DiscoveredHost(host: Host) {
-    console.log('DiscoveredHost', host);
-
-    // if (this.hosts.has(host.address)) {
-
-    // }
-
-    // let dup = false;
-    // this.hosts.forEach((item) => {
-    //   if (item.address === host.address) {
-    //     dup = true;
-    //     return;
-    //   }
-    // });
-    // if (!dup) {
-    //   this.hosts.push(host);
-    // }
-    this.hosts.set(host.address, host);
-
-    const hostId = `${host.address}`;
-
-    let hostNode = this.getNode(hostId);
-    if (null !== hostNode) {
-      hostNode.target = host;
-    } else {
-      hostNode = new Node(hostId);
-      hostNode.target = host;
-      hostNode.group = 'host';
-      hostNode.r = 40;
-      hostNode.x = this.zoneNode.x;
-      hostNode.y = this.zoneNode.y;
-
-      this.nodes.push(hostNode);
-      this.links.push(new Link(this.zoneNode, hostNode));
-
-      this.discoveryResult.increaseHost();
-    }
-
-    this.simulationRestart();
-  }
-
-  /**
-   * DiscoveredPort
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredPort' })
-  public DiscoveredPort(port: Port) {
-    console.log('DiscoveredPort', port);
-
-    let _ports: Map<number, Port>;
-    if (!this.ports.has(port.host.address)) {
-      _ports = new Map();
-      this.ports.set(port.host.address, _ports);
-    } else {
-      _ports = this.ports.get(port.host.address);
-    }
-
-    _ports.set(port.portNumber, port);
-  }
-
-  /**
-   * DiscoveredService
-   */
-  @RPCSubscriber({ method: 'DiscoveryService.DiscoveredService' })
-  public DiscoveredService(service: Service) {
-    console.log('DiscoveredService', service);
-    const hostId = service.port.host.address;
-    const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.port.metaPortType.key}`;
-
-    const hostNode = this.getNode(hostId);
-    let serviceNode = this.getNode(serviceId);
-    if (null !== serviceNode) {
-      serviceNode.target = service;
-    } else {
-      serviceNode = new Node(serviceId);
-      serviceNode.target = service;
-      serviceNode.group = 'service';
-      serviceNode.r = 30;
-      serviceNode.x = hostNode.x;
-      serviceNode.y = hostNode.y;
-
-      this.nodes.push(serviceNode);
-      this.links.push(new Link(hostNode, serviceNode));
-
-      this.discoveryResult.increaseService();
-    }
-
-    this.simulationRestart();
-  }
-
-  private getNode(id: string): Node | null {
-    let _n: Node = null;
-    this.nodes.some((node): boolean => {
-      if (node.id === id) {
-        _n = node;
-        return true;
-      }
-      return false;
-    });
-    return _n;
-  }
-
-
-  otherHostSelected(host: Host) {
-    const foundNode = this.nodes.find(node => {
-      return node.group === 'host' && node.id === host.address;
-    });
-    if (!foundNode) {
-      return;
-    }
-    this.selectedNode = foundNode;
-  }
-
-  private setTestData() {
-
-    const host1: Host = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      name: 'Host1',
-      address: '192.168.1.1',
-      mac: '44:8a:5b:f1:f1:f3',
-      osType: 'UNKNOWN',
-      hostType: 'HOST',
-      hostVendor: 'UNKNOWN',
-      hostModel: 'UNKNOWN',
-      zone: this.zone,
-    };
-
-    const hostNode = new Node('192.168.1.1');
-    hostNode.group = 'host';
-    hostNode.target = host1;
-    hostNode.r = 40;
-
-    const host2: Host = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      name: 'Host2',
-      address: '192.168.1.2',
-      mac: '44:8a:5b:f1:f1:f3',
-      osType: 'UNKNOWN',
-      hostType: 'HOST',
-      hostVendor: 'UNKNOWN',
-      hostModel: 'UNKNOWN',
-      zone: this.zone,
-    };
-
-    const hostNode2 = new Node('192.168.1.2');
-    hostNode2.group = 'host';
-    hostNode2.target = host2;
-    hostNode2.r = 40;
-
-    const host3: Host = {
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      name: 'Host2',
-      address: '192.168.1.3',
-      mac: '44:8a:5b:f1:f1:f3',
-      osType: 'UNKNOWN',
-      hostType: 'HOST',
-      hostVendor: 'UNKNOWN',
-      hostModel: 'UNKNOWN',
-      zone: this.zone,
-    };
-
-    const hostNode3 = new Node('192.168.1.3');
-    hostNode3.group = 'host';
-    hostNode3.target = host3;
-    hostNode3.r = 40;
-
-    const serviceNode1 = new Node('192.168.1.1-10-HTTP');
-    serviceNode1.target = {
-      metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
-      key: 'HTTP',
-      name: 'Apache',
-      serviceType: 'WEB',
-      serviceVendor: 'Apache',
-      serviceVersion: 'UNKNOWN',
-      port: {
-        host: host1,
-        portNumber: 10,
-        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
-      },
-    };
-    serviceNode1.group = 'service';
-    serviceNode1.r = 30;
-
-    const serviceNode2 = new Node('192.168.1.1-20-HTTP');
-    serviceNode2.target = {
-      metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
-      key: 'HTTP',
-      name: 'Apache',
-      serviceType: 'WEB',
-      serviceVendor: 'Apache',
-      serviceVersion: 'UNKNOWN',
-      port: {
-        host: host1,
-        portNumber: 20,
-        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
-      },
-    };
-    serviceNode2.group = 'service';
-    serviceNode2.r = 30;
-
-    const serviceNode3 = new Node('192.168.1.1-30-HTTP');
-    serviceNode3.target = {
-      metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
-      key: 'HTTP',
-      name: 'Apache',
-      serviceType: 'WEB',
-      serviceVendor: 'Apache',
-      serviceVersion: 'UNKNOWN',
-      port: {
-        host: host1,
-        portNumber: 30,
-        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
-      },
-
-    };
-    serviceNode3.group = 'service';
-    serviceNode3.r = 30;
-
-
-    const serviceNode31 = new Node('192.168.1.3-10-HTTP');
-    serviceNode31.target = {
-      metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
-      key: 'HTTP',
-      name: 'Apache',
-      serviceType: 'WEB',
-      serviceVendor: 'Apache',
-      serviceVersion: 'UNKNOWN',
-      port: {
-        host: host3,
-        portNumber: 10,
-        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
-      },
-
-    };
-    serviceNode31.group = 'service';
-    serviceNode31.r = 30;
-
-    const serviceNode32 = new Node('192.168.1.3-20-HTTP');
-    serviceNode32.target = {
-      metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE),
-      key: 'HTTP',
-      name: 'Apache',
-      serviceType: 'WEB',
-      serviceVendor: 'Apache',
-      serviceVersion: 'UNKNOWN',
-      port: {
-        host: host3,
-        portNumber: 20,
-        metaPortType: toMetaPortType(MetaPortTypeEnum.TCP),
-      },
-
-    };
-    serviceNode32.group = 'service';
-    serviceNode32.r = 30;
-
-    this.nodes.push(
-      hostNode,
-      hostNode2,
-      hostNode3,
-      serviceNode1,
-      serviceNode2,
-      serviceNode3,
-      serviceNode31,
-      serviceNode32,
-    );
-
-    this.links.push(
-      new Link(this.zoneNode, hostNode),
-      new Link(this.zoneNode, hostNode2),
-      new Link(this.zoneNode, hostNode3),
-      new Link(hostNode, serviceNode1),
-      new Link(hostNode, serviceNode2),
-      new Link(hostNode, serviceNode3),
-      new Link(hostNode3, serviceNode31),
-      new Link(hostNode3, serviceNode32),
-    );
+  requestDiscover() {
+    DiscoverySession.requestDiscover(this.store, this.probeService);
   }
 
 }
diff --git a/src/app/pages/home/home-page.module.ts b/src/app/pages/home/home-page.module.ts
deleted file mode 100644
index e13afff..0000000
--- a/src/app/pages/home/home-page.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
-
-import { HomePageComponent } from './home-page.component';
-import { HomePageRoutingModule } from './home-page-routing.module';
-import { CommonsModule } from '../../../commons/commons.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CommonsUIModule,
-    HomePageRoutingModule,
-    CommonsModule
-  ],
-  entryComponents: [
-  ],
-  declarations: [HomePageComponent],
-})
-export class HomePageModule { }
diff --git a/src/app/pages/home/index.ts b/src/app/pages/home/index.ts
new file mode 100644
index 0000000..af98644
--- /dev/null
+++ b/src/app/pages/home/index.ts
@@ -0,0 +1,5 @@
+import { HomePageComponent } from './home-page.component';
+
+export const PAGES = [
+  HomePageComponent,
+];
diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts
new file mode 100644
index 0000000..1f581a6
--- /dev/null
+++ b/src/app/pages/index.ts
@@ -0,0 +1,8 @@
+import { PagesComponent } from './pages.component';
+
+import { PAGES as HOME_PAGES } from './home';
+
+export const PAGES = [
+  PagesComponent,
+  ...HOME_PAGES,
+];
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
deleted file mode 100644
index 6e8eed5..0000000
--- a/src/app/pages/pages-routing.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { PagesComponent } from './pages.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: PagesComponent,
-    children: [
-      { path: '', redirectTo: 'home' },
-      { path: 'home', loadChildren: './home/home-page.module#HomePageModule' },
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class PagesRoutingModule { }
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 1be01f1..e53a4cb 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1,9 +1,9 @@
 <app-toolbar>
-  <app-nic-dropdown [blockTarget]="pagesContent" (select)="onNICSelect($event)"></app-nic-dropdown>
-  <app-scanner-setting-dropdown [blockTarget]="pagesContent" (ready)="onConfigReady($event)"></app-scanner-setting-dropdown>
+  <app-layout-toolbar-nic-dropdown [blockTarget]="pagesContent"></app-layout-toolbar-nic-dropdown>
+  <app-layout-toolbar-scanner-setting-dropdown [blockTarget]="pagesContent"></app-layout-toolbar-scanner-setting-dropdown>
   <ng-template #play>
     <div class="toolbar-button push-pull-button" style="width: 32px">
-      <button class="button-component" type="button" (click)="onStart()" [hidden]="discoveryStatus === 'Started' ">
+      <button class="button-component" type="button" (click)="requestDiscover()" [hidden]="(discoveryStatus$ | async) === 'Started' ">
         <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 15 17">
           <path d="M0.2,15.6c0,0.2,0.1,0.4,0.2,0.6c0.4,0.6,1.2,0.8,1.8,0.5l12.2-7.1c0.2-0.1,0.3-0.3,0.4-0.4
                   c0.4-0.6,0.1-1.4-0.5-1.8L2.1,0.3C1.9,0.2,1.7,0.2,1.5,0.2c-0.7,0-1.3,0.6-1.3,1.3V15.6z"></path>
@@ -13,8 +13,8 @@
   </ng-template>
 
   <!-- Stop button -->
-  <div class="toolbar-button push-pull-button" style="width: 36px" *ngIf="discoveryStatus === 'Started' else play">
-    <button class="button-component" type="button" (click)="onStop()">
+  <div class="toolbar-button push-pull-button" style="width: 36px" *ngIf="(discoveryStatus$ | async) === 'Started' else play">
+    <button class="button-component" type="button" (click)="requestDiscoverStop()">
       <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 15 17">
         <path d="M13.6,16.1H1.4c-0.8,0-1.4-0.6-1.4-1.4V2.5c0-0.8,0.6-1.4,1.4-1.4h12.2c0.8,0,1.4,0.6,1.4,1.4v12.2
               C15,15.5,14.4,16.1,13.6,16.1z" />
@@ -23,7 +23,7 @@
   </div>
 
   <!-- Loading image -->
-  <div class="toolbar-button push-pull-button" style="width: 36px" *ngIf="discoveryStatus !== 'Stopped' ">
+  <div class="toolbar-button push-pull-button" style="width: 36px" *ngIf="(discoveryStatus$ | async) !== 'Stopped' ">
     <button class="button-component" type="button">
       <svg aria-hidden="true" class="octicon icon spin" version="1.1" viewBox="0 0 15 15">
         <path d="M14.6,5.2l-0.7,0.3l-0.7,0.3c0.7,2.6-0.3,5.4-2.7,6.8c-2.3,1.3-5.1,1-7-0.7L4.4,12l0.1-1.5l-3.1-0.2l-0.9,3.2
@@ -33,8 +33,8 @@
       </svg>
     </button>
   </div>
-  <div *ngIf="discoveryMode" class="ui-menu-mode">
-    <span>{{discoveryMode}} Mode</span>
+  <div *ngIf="(discoveryMode$ | async)" class="ui-menu-mode">
+    <span>{{discoveryMode$ | async}} Mode</span>
   </div>
 </app-toolbar>
 
@@ -42,4 +42,7 @@
   <div id="pages-content">
     <router-outlet #o="outlet"></router-outlet>
   </div>
-</of-p-div>
\ No newline at end of file
+</of-p-div>
+
+<p-blockUI id="pagesContent-blockUI" [target]="pagesContent" [blocked]="blockPagesContent$ | async">
+</p-blockUI>
\ No newline at end of file
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index c5df122..96fa912 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -2,8 +2,17 @@ import {
   Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { DiscoverHost, Zone } from '@overflow/model/discovery';
-import { DiscoveryConfigService, DiscoveryStatusType } from '../../commons/service/discovery-config.service';
+import { Store, select } from '@ngrx/store';
+
+import { DiscoveryStatusType } from '../core/type';
+
+import * as AppStore from '../store';
+import * as DiscoveryRequestStore from '../store/discovery/request';
+import { DiscoveryUtil } from '../core/util/discovery.util';
+import { map, catchError, take } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { ProbeService } from '../service/probe.service';
+import { DiscoverySession } from '../core/discovery/discovery-session';
 
 enum MenuOrientation {
   STATIC,
@@ -57,17 +66,18 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
 
   rippleInitListener: any;
-
   rippleMouseDownListener: any;
 
-  discoveryMode: string;
-  discoveryStatus: DiscoveryStatusType;
+  discoveryMode$ = this.store.pipe(select(AppStore.DiscoverySelector.RequestSelector.selectDiscoveryMode));
+  discoveryStatus$ = this.store.pipe(select(AppStore.DiscoverySelector.RequestSelector.selectDiscoveryStatus));
+  blockPagesContent$ = this.store.pipe(select(AppStore.UISelector.LayoutSelector.selectBlockPagesContent));
 
   constructor(
     public renderer: Renderer,
+    private store: Store<any>,
     public zone: NgZone,
     private router: Router,
-    private discoveryConfigService: DiscoveryConfigService,
+    private probeService: ProbeService,
   ) {
   }
 
@@ -76,14 +86,6 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
       return;
     }
     this.zone.runOutsideAngular(() => { this.bindRipple(); });
-    this.discoveryConfigService.discoveryMode.subscribe(res => {
-      this.discoveryMode = res as string;
-    });
-
-    this.discoveryConfigService.discoveryStatus.subscribe(res => {
-      this.discoveryStatus = res as DiscoveryStatusType;
-    });
-
   }
 
   bindRipple() {
@@ -365,20 +367,12 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
     this.router.navigate([command]);
   }
 
-  onNICSelect(zone: Zone) {
-    this.discoveryConfigService.setZone(zone);
+  requestDiscover() {
+    DiscoverySession.requestDiscover(this.store, this.probeService);
   }
 
-  onConfigReady(discoverHost: DiscoverHost) {
-    this.discoveryConfigService.setDiscoverHost(discoverHost);
-  }
-
-  onStart() {
-    this.discoveryConfigService.setDiscoveryStatus(DiscoveryStatusType.Started);
-  }
-
-  onStop() {
-    this.discoveryConfigService.setDiscoveryStatus(DiscoveryStatusType.Stopping);
+  requestDiscoverStop() {
+    DiscoverySession.requestDiscoverStop(this.store);
   }
 
 }
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
deleted file mode 100644
index eb1d66a..0000000
--- a/src/app/pages/pages.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
-import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
-
-import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
-
-import { CommonsModule } from '../../commons/commons.module';
-
-import { PagesComponent } from './pages.component';
-import { PagesRoutingModule } from './pages-routing.module';
-import { DiscoveryConfigService } from '../../commons/service/discovery-config.service';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PagesRoutingModule,
-
-    CommonsUIModule,
-    CommonsModule,
-  ],
-  declarations: [
-    PagesComponent,
-  ],
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy },
-    DiscoveryConfigService,
-  ]
-})
-export class PagesModule { }
diff --git a/src/commons/service/database.service.ts b/src/app/service/database.service.ts
similarity index 87%
rename from src/commons/service/database.service.ts
rename to src/app/service/database.service.ts
index 21f522f..d6d6441 100644
--- a/src/commons/service/database.service.ts
+++ b/src/app/service/database.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import Dexie from 'dexie';
-import { LaunchState } from '../model';
+import { LaunchState } from '../../commons/model';
 
 const DatabaseVersion = 1;
 
diff --git a/src/app/service/discovery.service.ts b/src/app/service/discovery.service.ts
new file mode 100644
index 0000000..24acc9d
--- /dev/null
+++ b/src/app/service/discovery.service.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+
+import { Zone, DiscoverHost, Host, DiscoverPort, Port, DiscoverService } from '@overflow/model/discovery';
+
+import { ProbeService } from './probe.service';
+import { DiscoverRequestInfo } from '../core/model';
+
+@Injectable()
+export class DiscoveryService {
+
+  public constructor(
+    private probeService: ProbeService,
+  ) {
+  }
+
+  public discover(discoverRequestInfo: DiscoverRequestInfo): void {
+    if (null !== discoverRequestInfo.zone && null !== discoverRequestInfo.discoverHost) {
+      this.discoverHost(
+        discoverRequestInfo.requesterID,
+        discoverRequestInfo.zone,
+        discoverRequestInfo.discoverHost
+      );
+    } else if (null !== discoverRequestInfo.host && null !== discoverRequestInfo.discoverPort) {
+      this.discoverPort(
+        discoverRequestInfo.requesterID,
+        discoverRequestInfo.host,
+        discoverRequestInfo.discoverPort
+      );
+    } else if (null !== discoverRequestInfo.port && null !== discoverRequestInfo.discoverService) {
+      this.discoverService(
+        discoverRequestInfo.requesterID,
+        discoverRequestInfo.port,
+        discoverRequestInfo.discoverService
+      );
+    } else {
+      return;
+    }
+  }
+
+  public discoverHost(requesterID: string, zone: Zone, discoverHost: DiscoverHost): void {
+    this.probeService.send('DiscoveryService.DiscoverHost', requesterID, zone, discoverHost);
+  }
+
+  public discoverPort(requesterID: string, host: Host, discoverPort: DiscoverPort): void {
+    this.probeService.send('DiscoveryService.DiscoverPort', requesterID, host, discoverPort);
+  }
+
+  public discoverService(requesterID: string, port: Port, discoverService: DiscoverService): void {
+    this.probeService.send('DiscoveryService.DiscoverService', requesterID, port, discoverService);
+  }
+
+  public discoverStop(requesterID: string, requestID: string): void {
+    this.probeService.send('DiscoveryService.DiscoverStop', requesterID, requestID);
+  }
+}
diff --git a/src/commons/service/electron-proxy.service.ts b/src/app/service/electron-proxy.service.ts
similarity index 94%
rename from src/commons/service/electron-proxy.service.ts
rename to src/app/service/electron-proxy.service.ts
index 46bb2a2..ad93c81 100644
--- a/src/commons/service/electron-proxy.service.ts
+++ b/src/app/service/electron-proxy.service.ts
@@ -4,9 +4,9 @@ import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { ipcRenderer } from 'electron';
 
-import { MenuEvent } from '../type';
-import { LaunchState } from '../model';
+import { MenuEvent } from '../../commons/type';
 import { LaunchService } from './launch.service';
+import { LaunchState } from '../../commons/model';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/commons/service/index.ts b/src/app/service/index.ts
similarity index 60%
rename from src/commons/service/index.ts
rename to src/app/service/index.ts
index 145f967..d2377d9 100644
--- a/src/commons/service/index.ts
+++ b/src/app/service/index.ts
@@ -2,12 +2,16 @@ import { DatabaseService } from './database.service';
 import { ElectronProxyService } from './electron-proxy.service';
 import { LaunchService } from './launch.service';
 import { ProbeService } from './probe.service';
-import { DiscoveryConfigService } from './discovery-config.service';
+import { MachineService } from './machine.service';
+import { DiscoveryService } from './discovery.service';
+import { PingService } from './ping.service';
 
 export const SERVICES = [
   DatabaseService,
   ElectronProxyService,
   LaunchService,
   ProbeService,
-  DiscoveryConfigService
+  MachineService,
+  DiscoveryService,
+  PingService,
 ];
diff --git a/src/commons/service/launch.service.ts b/src/app/service/launch.service.ts
similarity index 87%
rename from src/commons/service/launch.service.ts
rename to src/app/service/launch.service.ts
index 8845de9..c36a7a6 100644
--- a/src/commons/service/launch.service.ts
+++ b/src/app/service/launch.service.ts
@@ -2,13 +2,13 @@ import { Injectable } from '@angular/core';
 import { Observable, defer } from 'rxjs';
 
 import { DatabaseService } from './database.service';
-import { LaunchState } from '../model';
+import { LaunchState } from '../../commons/model';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LaunchService {
-  public constructor(private readonly databaseService: DatabaseService) {}
+  public constructor(private readonly databaseService: DatabaseService) { }
 
   public save(launchState: LaunchState): Observable<number> {
     return defer(async () => {
diff --git a/src/app/service/machine.service.ts b/src/app/service/machine.service.ts
new file mode 100644
index 0000000..fd04060
--- /dev/null
+++ b/src/app/service/machine.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Interface } from '@overflow/model/net/nic';
+
+import { ProbeService } from './probe.service';
+
+
+@Injectable()
+export class MachineService {
+
+  public constructor(
+    private probeService: ProbeService,
+  ) {
+
+  }
+
+  public interfaces(): Observable<Interface[]> {
+    return this.probeService.call<Interface[]>('MachineService.Interfaces');
+  }
+
+}
diff --git a/src/app/service/ping.service.ts b/src/app/service/ping.service.ts
new file mode 100644
index 0000000..a64e23f
--- /dev/null
+++ b/src/app/service/ping.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { Interface } from '@overflow/model/net/nic';
+
+import { ProbeService } from './probe.service';
+import { PingResult } from '@overflow/model/ping';
+import { Host, Service } from '@overflow/model/discovery';
+import { PingOption } from '@overflow/model/config/ping';
+
+
+@Injectable()
+export class PingService {
+
+  public constructor(
+    private probeService: ProbeService,
+  ) {
+
+  }
+
+  public pingHost(host: Host, pingOption: PingOption): Observable<PingResult> {
+    return this.probeService.call<PingResult>('PingService.PingHost', host, pingOption);
+  }
+
+  public pingService(service: Service, pingOption: PingOption): Observable<PingResult> {
+    return this.probeService.call<PingResult>('PingService.PingService', service, pingOption);
+  }
+
+}
diff --git a/src/commons/service/probe.service.ts b/src/app/service/probe.service.ts
similarity index 100%
rename from src/commons/service/probe.service.ts
rename to src/app/service/probe.service.ts
diff --git a/src/app/store/app/app.action.ts b/src/app/store/app/app.action.ts
new file mode 100644
index 0000000..9ed0231
--- /dev/null
+++ b/src/app/store/app/app.action.ts
@@ -0,0 +1,39 @@
+import { Action } from '@ngrx/store';
+
+export enum ActionType {
+  AppInit = '[app] AppInit',
+  AppAfterContentInit = '[app] AppAfterContentInit',
+  AppAfterViewInit = '[app] AppAfterViewInit',
+  AppDestroy = '[app] AppDestroy',
+}
+
+export class AppInit implements Action {
+  readonly type = ActionType.AppInit;
+
+  constructor() { }
+}
+
+export class AppAfterContentInit implements Action {
+  readonly type = ActionType.AppAfterContentInit;
+
+  constructor() { }
+}
+
+export class AppAfterViewInit implements Action {
+  readonly type = ActionType.AppAfterViewInit;
+
+  constructor() { }
+}
+
+export class AppDestroy implements Action {
+  readonly type = ActionType.AppDestroy;
+
+  constructor() { }
+}
+
+export type Actions =
+  | AppInit
+  | AppAfterContentInit
+  | AppAfterViewInit
+  | AppDestroy
+  ;
diff --git a/src/app/store/app/index.ts b/src/app/store/app/index.ts
new file mode 100644
index 0000000..b2c7235
--- /dev/null
+++ b/src/app/store/app/index.ts
@@ -0,0 +1 @@
+export * from './app.action';
diff --git a/src/app/store/discovery/config/config.action.ts b/src/app/store/discovery/config/config.action.ts
new file mode 100644
index 0000000..d2c9854
--- /dev/null
+++ b/src/app/store/discovery/config/config.action.ts
@@ -0,0 +1,26 @@
+import { Action } from '@ngrx/store';
+import { Zone, DiscoverHost } from '@overflow/model/discovery';
+
+export enum ActionType {
+  ChangeZone = '[app.discovery] ChangeZone',
+  ChangeDiscoverHost = '[app.discovery] ChangeDiscoverHost',
+}
+
+export class ChangeZone implements Action {
+  readonly type = ActionType.ChangeZone;
+
+  constructor(public payload: Zone) { }
+}
+
+export class ChangeDiscoverHost implements Action {
+  readonly type = ActionType.ChangeDiscoverHost;
+
+  constructor(public payload: DiscoverHost) { }
+}
+
+
+export type Actions =
+  | ChangeZone
+  | ChangeDiscoverHost
+
+  ;
diff --git a/src/app/store/discovery/config/config.effect.ts b/src/app/store/discovery/config/config.effect.ts
new file mode 100644
index 0000000..4acfcaf
--- /dev/null
+++ b/src/app/store/discovery/config/config.effect.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ConfigEffects {
+
+  constructor(
+  ) { }
+}
diff --git a/src/app/store/discovery/config/config.reducer.ts b/src/app/store/discovery/config/config.reducer.ts
new file mode 100644
index 0000000..b092962
--- /dev/null
+++ b/src/app/store/discovery/config/config.reducer.ts
@@ -0,0 +1,31 @@
+import {
+  Actions,
+  ActionType,
+} from './config.action';
+
+import {
+  State,
+  initialState,
+} from './config.state';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ChangeZone: {
+      return {
+        ...state,
+        zone: action.payload,
+      };
+    }
+
+    case ActionType.ChangeDiscoverHost: {
+      return {
+        ...state,
+        discoverHost: action.payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/discovery/config/config.state.ts b/src/app/store/discovery/config/config.state.ts
new file mode 100644
index 0000000..f5be354
--- /dev/null
+++ b/src/app/store/discovery/config/config.state.ts
@@ -0,0 +1,32 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { Zone, DiscoverHost, Port, Host, DiscoverPort, DiscoverService } from '@overflow/model/discovery';
+
+export interface State {
+  zone: Zone | null;
+  host: Host | null;
+  port: Port | null;
+  discoverHost: DiscoverHost | null;
+  discoverPort: DiscoverPort | null;
+  discoverService: DiscoverService | null;
+}
+
+export const initialState: State = {
+  zone: null,
+  host: null,
+  port: null,
+  discoverHost: null,
+  discoverPort: null,
+  discoverService: null,
+};
+
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectZone: createSelector(selector, (state: State) => state.zone),
+    selectHost: createSelector(selector, (state: State) => state.host),
+    selectPort: createSelector(selector, (state: State) => state.port),
+    selectDiscoverHost: createSelector(selector, (state: State) => state.discoverHost),
+    selectDiscoverPort: createSelector(selector, (state: State) => state.discoverPort),
+    selectDiscoverService: createSelector(selector, (state: State) => state.discoverService),
+  };
+}
diff --git a/src/app/store/discovery/config/index.ts b/src/app/store/discovery/config/index.ts
new file mode 100644
index 0000000..390f49c
--- /dev/null
+++ b/src/app/store/discovery/config/index.ts
@@ -0,0 +1,4 @@
+export * from './config.action';
+export * from './config.effect';
+export * from './config.reducer';
+export * from './config.state';
diff --git a/src/app/store/discovery/index.ts b/src/app/store/discovery/index.ts
new file mode 100644
index 0000000..bf1b8e5
--- /dev/null
+++ b/src/app/store/discovery/index.ts
@@ -0,0 +1,38 @@
+import { Type } from '@angular/core';
+import {
+  Selector,
+  createSelector,
+  combineReducers
+} from '@ngrx/store';
+
+import * as ConfigStore from './config';
+import * as RequestStore from './request';
+
+
+export interface State {
+  config: ConfigStore.State;
+  request: RequestStore.State;
+}
+
+export const EFFECTS: Type<any>[] = [
+  ConfigStore.ConfigEffects,
+  RequestStore.RequestEffects,
+];
+
+export const REDUCER = combineReducers({
+  config: ConfigStore.reducer,
+  request: RequestStore.reducer,
+});
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    ConfigSelector: ConfigStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.config,
+    )),
+    RequestSelector: RequestStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.request,
+    )),
+  };
+}
diff --git a/src/app/store/discovery/request/index.ts b/src/app/store/discovery/request/index.ts
new file mode 100644
index 0000000..da025d0
--- /dev/null
+++ b/src/app/store/discovery/request/index.ts
@@ -0,0 +1,4 @@
+export * from './request.action';
+export * from './request.effect';
+export * from './request.reducer';
+export * from './request.state';
diff --git a/src/app/store/discovery/request/request.action.ts b/src/app/store/discovery/request/request.action.ts
new file mode 100644
index 0000000..91b95a5
--- /dev/null
+++ b/src/app/store/discovery/request/request.action.ts
@@ -0,0 +1,54 @@
+import { Action } from '@ngrx/store';
+import { DiscoveryModeType } from '@overflow/model/discovery';
+import { DiscoverySession } from '../../../core/discovery/discovery-session';
+import { DiscoveryStatusType } from 'src/app/core/type';
+
+export enum ActionType {
+  RequestDiscover = '[app.discovery] RequestDiscover',
+
+  RequestDiscoverStop = '[app.discovery] RequestDiscoverStop',
+
+  ChangeDiscoveryMode = '[app.discovery] ChangeDiscoveryMode',
+  ChangeDiscoveryStatus = '[app.discovery] ChangeDiscoveryStatus',
+
+  DiscoveryComplete = '[app.discovery] DiscoveryComplete',
+}
+
+
+export class RequestDiscover implements Action {
+  readonly type = ActionType.RequestDiscover;
+
+  constructor(public payload: { discoverySession: DiscoverySession }) { }
+}
+
+export class ChangeDiscoveryMode implements Action {
+  readonly type = ActionType.ChangeDiscoveryMode;
+
+  constructor(public payload: { discoveryMode: DiscoveryModeType }) { }
+}
+
+export class RequestDiscoverStop implements Action {
+  readonly type = ActionType.RequestDiscoverStop;
+
+  constructor(public payload: { discoverySession: DiscoverySession }) { }
+}
+
+export class ChangeDiscoveryStatus implements Action {
+  readonly type = ActionType.ChangeDiscoveryStatus;
+
+  constructor(public payload: { discoveryStatus: DiscoveryStatusType }) { }
+}
+
+export class DiscoveryComplete implements Action {
+  readonly type = ActionType.DiscoveryComplete;
+
+  constructor() { }
+}
+
+export type Actions =
+  | RequestDiscover
+  | ChangeDiscoveryMode
+  | RequestDiscoverStop
+  | ChangeDiscoveryStatus
+  | DiscoveryComplete
+  ;
diff --git a/src/app/store/discovery/request/request.effect.ts b/src/app/store/discovery/request/request.effect.ts
new file mode 100644
index 0000000..c0c4a4e
--- /dev/null
+++ b/src/app/store/discovery/request/request.effect.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { map, tap } from 'rxjs/operators';
+
+import {
+  ActionType,
+  RequestDiscover,
+  RequestDiscoverStop,
+  ChangeDiscoveryStatus,
+} from './request.action';
+import { DiscoveryService } from '../../../service/discovery.service';
+import { DiscoveryStatusType } from 'src/app/core/type';
+
+@Injectable()
+export class RequestEffects {
+  @Effect({ dispatch: false })
+  requestDiscover$ = this.actions$.pipe(
+    ofType<RequestDiscover>(ActionType.RequestDiscover),
+    map((action) => {
+      this.discoveryService.discover(action.payload.discoverySession.discoverRequestInfo);
+    }),
+  );
+
+  @Effect({ dispatch: false })
+  requestDiscoverStop$ = this.actions$.pipe(
+    ofType<RequestDiscoverStop>(ActionType.RequestDiscoverStop),
+    map((action) => action.payload),
+    map((payload) => {
+      this.discoveryService.discoverStop(payload.discoverySession.discoverRequestInfo.requesterID, payload.discoverySession.requestID);
+    })
+  );
+
+  constructor(
+    private store: Store<any>,
+    private actions$: Actions,
+    private router: Router,
+    private discoveryService: DiscoveryService,
+  ) { }
+}
diff --git a/src/app/store/discovery/request/request.reducer.ts b/src/app/store/discovery/request/request.reducer.ts
new file mode 100644
index 0000000..ca38a1a
--- /dev/null
+++ b/src/app/store/discovery/request/request.reducer.ts
@@ -0,0 +1,54 @@
+import {
+  Actions,
+  ActionType,
+} from './request.action';
+
+import {
+  State,
+  initialState,
+} from './request.state';
+import { DiscoveryStatusType } from '../../../core/type';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.RequestDiscover: {
+      return {
+        ...state,
+        discoverySession: action.payload.discoverySession,
+        discoveryStatus: DiscoveryStatusType.Requested,
+      };
+    }
+
+    case ActionType.RequestDiscoverStop: {
+      return {
+        ...state,
+        discoveryStatus: DiscoveryStatusType.Stopping,
+      };
+    }
+
+    case ActionType.ChangeDiscoveryMode: {
+      return {
+        ...state,
+        discoveryMode: action.payload.discoveryMode,
+      };
+    }
+
+    case ActionType.ChangeDiscoveryStatus: {
+      return {
+        ...state,
+        discoveryStatus: action.payload.discoveryStatus,
+      };
+    }
+
+    case ActionType.DiscoveryComplete: {
+      return {
+        ...state,
+        discoverySession: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/discovery/request/request.state.ts b/src/app/store/discovery/request/request.state.ts
new file mode 100644
index 0000000..88971d5
--- /dev/null
+++ b/src/app/store/discovery/request/request.state.ts
@@ -0,0 +1,27 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { DiscoveryModeType } from '@overflow/model/discovery';
+import { DiscoveryStatusType } from '../../../core/type';
+import { DiscoverySession } from '../../../core/discovery/discovery-session';
+
+export interface State {
+  discoveryMode: DiscoveryModeType | null;
+  discoveryStatus: DiscoveryStatusType | null;
+
+  discoverySession: DiscoverySession | null;
+}
+
+export const initialState: State = {
+  discoveryMode: null,
+  discoveryStatus: DiscoveryStatusType.Stopped,
+
+  discoverySession: null,
+};
+
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectDiscoveryMode: createSelector(selector, (state: State) => state.discoveryMode),
+    selectDiscoveryStatus: createSelector(selector, (state: State) => state.discoveryStatus),
+    selectDiscoverySession: createSelector(selector, (state: State) => state.discoverySession),
+  };
+}
diff --git a/src/app/store/environment/index.ts b/src/app/store/environment/index.ts
new file mode 100644
index 0000000..1d4693c
--- /dev/null
+++ b/src/app/store/environment/index.ts
@@ -0,0 +1,38 @@
+import { Type } from '@angular/core';
+import {
+  Selector,
+  createSelector,
+  combineReducers
+} from '@ngrx/store';
+
+import * as InterfacesStore from './interfaces';
+import * as UserStore from './user';
+
+
+export interface State {
+  interfaces: InterfacesStore.State;
+  user: UserStore.State;
+}
+
+export const EFFECTS: Type<any>[] = [
+  InterfacesStore.InterfacesEffects,
+  UserStore.UserEffects,
+];
+
+export const REDUCER = combineReducers({
+  interfaces: InterfacesStore.reducer,
+  user: UserStore.reducer,
+});
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    InterfacesSelector: InterfacesStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.interfaces,
+    )),
+    UserSelector: UserStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.user,
+    )),
+  };
+}
diff --git a/src/app/store/environment/interfaces/index.ts b/src/app/store/environment/interfaces/index.ts
new file mode 100644
index 0000000..891d8f9
--- /dev/null
+++ b/src/app/store/environment/interfaces/index.ts
@@ -0,0 +1,4 @@
+export * from './interfaces.action';
+export * from './interfaces.effect';
+export * from './interfaces.reducer';
+export * from './interfaces.state';
diff --git a/src/app/store/environment/interfaces/interfaces.action.ts b/src/app/store/environment/interfaces/interfaces.action.ts
new file mode 100644
index 0000000..7620af2
--- /dev/null
+++ b/src/app/store/environment/interfaces/interfaces.action.ts
@@ -0,0 +1,33 @@
+import { Action } from '@ngrx/store';
+import { Interface } from '@overflow/model/net/nic';
+
+export enum ActionType {
+  Interfaces = '[app.environment] Interfaces',
+  InterfacesSuccess = '[app.environment] InterfacesSuccess',
+  InterfacesFailure = '[app.environment] InterfacesFailure',
+}
+
+export class Interfaces implements Action {
+  readonly type = ActionType.Interfaces;
+
+  constructor() { }
+}
+
+export class InterfacesSuccess implements Action {
+  readonly type = ActionType.InterfacesSuccess;
+
+  constructor(public payload: Interface[]) { }
+}
+
+export class InterfacesFailure implements Action {
+  readonly type = ActionType.InterfacesFailure;
+
+  constructor(public payload: { error: any }) { }
+}
+
+
+export type Actions =
+  | Interfaces
+  | InterfacesSuccess
+  | InterfacesFailure
+  ;
diff --git a/src/app/store/environment/interfaces/interfaces.effect.ts b/src/app/store/environment/interfaces/interfaces.effect.ts
new file mode 100644
index 0000000..24b6f85
--- /dev/null
+++ b/src/app/store/environment/interfaces/interfaces.effect.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { Interface } from '@overflow/model/net/nic';
+
+import * as AppStore from '../../app';
+import { InterfacesSuccess, InterfacesFailure, Interfaces, ActionType } from './interfaces.action';
+import { MachineService } from '../../../service/machine.service';
+
+@Injectable()
+export class InterfacesEffects {
+  @Effect()
+  appInit$ = this.actions$.pipe(
+    ofType<AppStore.AppInit>(AppStore.ActionType.AppInit),
+    map(() =>
+      new Interfaces()
+    )
+  );
+
+  @Effect()
+  interfaces$ = this.actions$.pipe(
+    ofType<Interfaces>(ActionType.Interfaces),
+    exhaustMap(() => this.machineService.interfaces()
+      .pipe(
+        map((ifaces: Interface[]) => new InterfacesSuccess(ifaces)),
+        catchError(error => of(new InterfacesFailure({ error }))),
+      )
+    )
+  );
+
+
+  constructor(
+    private actions$: Actions,
+    private router: Router,
+    private machineService: MachineService,
+  ) { }
+}
diff --git a/src/app/store/environment/interfaces/interfaces.reducer.ts b/src/app/store/environment/interfaces/interfaces.reducer.ts
new file mode 100644
index 0000000..026db95
--- /dev/null
+++ b/src/app/store/environment/interfaces/interfaces.reducer.ts
@@ -0,0 +1,42 @@
+import {
+  Actions,
+  ActionType,
+} from './interfaces.action';
+
+import {
+  State,
+  initialState,
+} from './interfaces.state';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Interfaces: {
+      return {
+        ...state,
+        pending: true,
+      };
+    }
+
+    case ActionType.InterfacesSuccess: {
+      return {
+        ...state,
+        interfaces: action.payload,
+        error: null,
+        pending: false,
+      };
+    }
+
+    case ActionType.InterfacesFailure: {
+      return {
+        ...state,
+        interfaces: null,
+        error: action.payload.error,
+        pending: false,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/environment/interfaces/interfaces.state.ts b/src/app/store/environment/interfaces/interfaces.state.ts
new file mode 100644
index 0000000..d330b84
--- /dev/null
+++ b/src/app/store/environment/interfaces/interfaces.state.ts
@@ -0,0 +1,23 @@
+import { Interface } from '@overflow/model/net/nic';
+import { Selector, createSelector } from '@ngrx/store';
+
+export interface State {
+  interfaces: Interface[] | null;
+  error: string | null;
+  pending: boolean;
+}
+
+export const initialState: State = {
+  interfaces: null,
+  error: null,
+  pending: false,
+};
+
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectInterfaces: createSelector(selector, (state: State) => state.interfaces),
+    selectError: createSelector(selector, (state: State) => state.error),
+    selectPending: createSelector(selector, (state: State) => state.pending),
+  };
+}
diff --git a/src/app/store/environment/user/index.ts b/src/app/store/environment/user/index.ts
new file mode 100644
index 0000000..078f206
--- /dev/null
+++ b/src/app/store/environment/user/index.ts
@@ -0,0 +1,4 @@
+export * from './user.action';
+export * from './user.effect';
+export * from './user.reducer';
+export * from './user.state';
diff --git a/src/app/store/environment/user/user.action.ts b/src/app/store/environment/user/user.action.ts
new file mode 100644
index 0000000..5cfb610
--- /dev/null
+++ b/src/app/store/environment/user/user.action.ts
@@ -0,0 +1,25 @@
+import { Action } from '@ngrx/store';
+import { Interface } from '@overflow/model/net/nic';
+
+export enum ActionType {
+  SetMemberID = '[app.environment] SetMemberID',
+
+  ChangeShowWelcomPage = '[app.environment] ChangeShowWelcomPage',
+}
+
+export class SetMemberID implements Action {
+  readonly type = ActionType.SetMemberID;
+
+  constructor(public payload: { memberID: string }) { }
+}
+
+export class ChangeShowWelcomPage implements Action {
+  readonly type = ActionType.ChangeShowWelcomPage;
+
+  constructor(public payload: { showWelcomPage: boolean }) { }
+}
+
+export type Actions =
+  | SetMemberID
+  | ChangeShowWelcomPage
+  ;
diff --git a/src/app/store/environment/user/user.effect.ts b/src/app/store/environment/user/user.effect.ts
new file mode 100644
index 0000000..dfc4874
--- /dev/null
+++ b/src/app/store/environment/user/user.effect.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { Actions } from '@ngrx/effects';
+
+@Injectable()
+export class UserEffects {
+
+  constructor(
+    private actions$: Actions,
+  ) { }
+}
diff --git a/src/app/store/environment/user/user.reducer.ts b/src/app/store/environment/user/user.reducer.ts
new file mode 100644
index 0000000..57d4755
--- /dev/null
+++ b/src/app/store/environment/user/user.reducer.ts
@@ -0,0 +1,31 @@
+import {
+  Actions,
+  ActionType,
+} from './user.action';
+
+import {
+  State,
+  initialState,
+} from './user.state';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.SetMemberID: {
+      return {
+        ...state,
+        memberID: action.payload.memberID,
+      };
+    }
+
+    case ActionType.ChangeShowWelcomPage: {
+      return {
+        ...state,
+        showWelcomPage: action.payload.showWelcomPage,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/environment/user/user.state.ts b/src/app/store/environment/user/user.state.ts
new file mode 100644
index 0000000..bfe8593
--- /dev/null
+++ b/src/app/store/environment/user/user.state.ts
@@ -0,0 +1,21 @@
+import { Selector, createSelector } from '@ngrx/store';
+
+export interface State {
+  memberID: string | null;
+
+  showWelcomPage: boolean;
+}
+
+export const initialState: State = {
+  memberID: null,
+
+  showWelcomPage: true,
+};
+
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectMemberID: createSelector(selector, (state: State) => state.memberID),
+    selectShowWelcomPage: createSelector(selector, (state: State) => state.showWelcomPage),
+  };
+}
diff --git a/src/app/store/index.ts b/src/app/store/index.ts
new file mode 100644
index 0000000..1508a7f
--- /dev/null
+++ b/src/app/store/index.ts
@@ -0,0 +1,75 @@
+import { Type } from '@angular/core';
+import {
+  ActionReducer,
+  ActionReducerMap,
+  MetaReducer,
+} from '@ngrx/store';
+
+import * as fromRouter from '@ngrx/router-store';
+import { storeFreeze } from 'ngrx-store-freeze';
+
+
+import * as DiscoveryStore from './discovery';
+import * as EnvironmentStore from './environment';
+import * as TargetStore from './target';
+import * as UIStore from './ui';
+
+
+import { environment } from '../../environments/environment';
+
+export const EFFECTS: Type<any>[] = [
+  ...DiscoveryStore.EFFECTS,
+  ...EnvironmentStore.EFFECTS,
+  ...TargetStore.EFFECTS,
+  ...UIStore.EFFECTS,
+];
+
+export const REDUCERS: ActionReducerMap<any> = {
+  router: fromRouter.routerReducer,
+  discovery: DiscoveryStore.REDUCER,
+  environment: EnvironmentStore.REDUCER,
+  target: TargetStore.REDUCER,
+  ui: UIStore.REDUCER,
+};
+
+// console.log all actions
+export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
+  return function (state: State, action: any): State {
+    const result = reducer(state, action);
+    console.groupCollapsed(action.type);
+    console.log('prev state', state);
+    console.log('action', action);
+    console.log('next state', result);
+    console.groupEnd();
+
+    return result;
+  };
+}
+
+export const META_REDUCERS: MetaReducer<State>[] = !environment.production
+  ? [logger]
+  : [];
+
+export interface State {
+  router: fromRouter.RouterReducerState;
+  discovery: DiscoveryStore.State;
+  environment: EnvironmentStore.State;
+  target: TargetStore.State;
+  ui: UIStore.State;
+}
+
+export const DiscoverySelector = DiscoveryStore.getSelectors(
+  (state: State) => state.discovery,
+);
+
+export const EnvironmentSelector = EnvironmentStore.getSelectors(
+  (state: State) => state.environment,
+);
+
+export const TargetSelector = TargetStore.getSelectors(
+  (state: State) => state.target,
+);
+
+export const UISelector = UIStore.getSelectors(
+  (state: State) => state.ui,
+);
diff --git a/src/app/store/target/index.ts b/src/app/store/target/index.ts
new file mode 100644
index 0000000..3c37f5b
--- /dev/null
+++ b/src/app/store/target/index.ts
@@ -0,0 +1,30 @@
+import { Type } from '@angular/core';
+import {
+  Selector,
+  createSelector,
+  combineReducers
+} from '@ngrx/store';
+
+import * as TargetStore from './target';
+
+
+export interface State {
+  target: TargetStore.State;
+}
+
+export const EFFECTS: Type<any>[] = [
+  TargetStore.TargetEffects,
+];
+
+export const REDUCER = combineReducers({
+  target: TargetStore.reducer,
+});
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    TargetSelector: TargetStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.target,
+    )),
+  };
+}
diff --git a/src/app/store/target/target/index.ts b/src/app/store/target/target/index.ts
new file mode 100644
index 0000000..3332134
--- /dev/null
+++ b/src/app/store/target/target/index.ts
@@ -0,0 +1,4 @@
+export * from './target.action';
+export * from './target.effect';
+export * from './target.reducer';
+export * from './target.state';
diff --git a/src/app/store/target/target/target.action.ts b/src/app/store/target/target/target.action.ts
new file mode 100644
index 0000000..7b24edf
--- /dev/null
+++ b/src/app/store/target/target/target.action.ts
@@ -0,0 +1,59 @@
+import { Action } from '@ngrx/store';
+import { Host, Port, Service } from '@overflow/model/discovery';
+import { TargetDisplayType } from '../../../core/type';
+
+export enum ActionType {
+  SetHosts = '[app.target] SetHosts',
+  SetPorts = '[app.target] SetPorts',
+  SetServices = '[app.target] SetServices',
+
+  ChangeTargetDisplayType = '[app.target] ChangeTargetDisplayType',
+  RefreshTargetDisplay = '[app.target] RefreshTargetDisplay',
+  ChangeSelectedTarget = '[app.target] ChangeSelectedTarget',
+}
+
+export class SetHosts implements Action {
+  readonly type = ActionType.SetHosts;
+
+  constructor(public payload: Host[]) { }
+}
+
+export class SetPorts implements Action {
+  readonly type = ActionType.SetPorts;
+
+  constructor(public payload: Port[]) { }
+}
+
+export class SetServices implements Action {
+  readonly type = ActionType.SetServices;
+
+  constructor(public payload: Service[]) { }
+}
+
+export class ChangeTargetDisplayType implements Action {
+  readonly type = ActionType.ChangeTargetDisplayType;
+
+  constructor(public payload: { targetDisplayType: TargetDisplayType }) { }
+}
+
+export class RefreshTargetDisplay implements Action {
+  readonly type = ActionType.RefreshTargetDisplay;
+
+  constructor(public payload: boolean) { }
+}
+
+export class ChangeSelectedTarget implements Action {
+  readonly type = ActionType.ChangeSelectedTarget;
+
+  constructor(public payload: { group: string, target: Host | Port | Service }) { }
+}
+
+export type Actions =
+  | SetHosts
+  | SetPorts
+  | SetServices
+  | ChangeTargetDisplayType
+  | RefreshTargetDisplay
+  | ChangeSelectedTarget
+
+  ;
diff --git a/src/app/store/target/target/target.effect.ts b/src/app/store/target/target/target.effect.ts
new file mode 100644
index 0000000..6829284
--- /dev/null
+++ b/src/app/store/target/target/target.effect.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { map, tap } from 'rxjs/operators';
+
+@Injectable()
+export class TargetEffects {
+
+  constructor(
+    private actions$: Actions,
+    private router: Router,
+  ) { }
+}
diff --git a/src/app/store/target/target/target.reducer.ts b/src/app/store/target/target/target.reducer.ts
new file mode 100644
index 0000000..fde0bea
--- /dev/null
+++ b/src/app/store/target/target/target.reducer.ts
@@ -0,0 +1,59 @@
+import {
+  Actions,
+  ActionType,
+} from './target.action';
+
+import {
+  State,
+  initialState,
+} from './target.state';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.SetHosts: {
+      return {
+        ...state,
+        hosts: action.payload,
+      };
+    }
+
+    case ActionType.SetPorts: {
+      return {
+        ...state,
+        ports: action.payload,
+      };
+    }
+
+    case ActionType.SetServices: {
+      return {
+        ...state,
+        services: action.payload,
+      };
+    }
+
+    case ActionType.ChangeTargetDisplayType: {
+      return {
+        ...state,
+        targetDisplayType: action.payload.targetDisplayType,
+      };
+    }
+
+    case ActionType.RefreshTargetDisplay: {
+      return {
+        ...state,
+        refreshTargetDisplay: action.payload,
+      };
+    }
+
+    case ActionType.ChangeSelectedTarget: {
+      return {
+        ...state,
+        selectedTarget: action.payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/target/target/target.state.ts b/src/app/store/target/target/target.state.ts
new file mode 100644
index 0000000..05b48a9
--- /dev/null
+++ b/src/app/store/target/target/target.state.ts
@@ -0,0 +1,37 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { Host, Port, Service } from '@overflow/model/discovery';
+import { TargetDisplayType } from '../../../core/type';
+
+export interface State {
+  hosts: Host[] | null;
+  ports: Port[] | null;
+  services: Service[] | null;
+
+  targetDisplayType: TargetDisplayType;
+  refreshTargetDisplay: boolean;
+  selectedTarget: {
+    group: string;
+    target: Host | Port | Service;
+  } | null;
+}
+
+export const initialState: State = {
+  hosts: null,
+  ports: null,
+  services: null,
+
+  targetDisplayType: TargetDisplayType.NONE,
+  refreshTargetDisplay: false,
+  selectedTarget: null,
+};
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectHosts: createSelector(selector, (state: State) => state.hosts),
+    selectPorts: createSelector(selector, (state: State) => state.ports),
+    selectServices: createSelector(selector, (state: State) => state.services),
+    selectTargetDisplayType: createSelector(selector, (state: State) => state.targetDisplayType),
+    selectRefreshTargetDisplay: createSelector(selector, (state: State) => state.refreshTargetDisplay),
+    selectSelectedTarget: createSelector(selector, (state: State) => state.selectedTarget),
+  };
+}
diff --git a/src/app/store/ui/index.ts b/src/app/store/ui/index.ts
new file mode 100644
index 0000000..adf01b6
--- /dev/null
+++ b/src/app/store/ui/index.ts
@@ -0,0 +1,30 @@
+import { Type } from '@angular/core';
+import {
+  Selector,
+  createSelector,
+  combineReducers
+} from '@ngrx/store';
+
+import * as LayoutStore from './layout';
+
+
+export interface State {
+  layout: LayoutStore.State;
+}
+
+export const EFFECTS: Type<any>[] = [
+  LayoutStore.LayoutEffects,
+];
+
+export const REDUCER = combineReducers({
+  layout: LayoutStore.reducer,
+});
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    LayoutSelector: LayoutStore.getSelectors(createSelector(
+      selector,
+      (state: State) => state.layout,
+    )),
+  };
+}
diff --git a/src/app/store/ui/layout/index.ts b/src/app/store/ui/layout/index.ts
new file mode 100644
index 0000000..6402168
--- /dev/null
+++ b/src/app/store/ui/layout/index.ts
@@ -0,0 +1,4 @@
+export * from './layout.action';
+export * from './layout.effect';
+export * from './layout.reducer';
+export * from './layout.state';
diff --git a/src/app/store/ui/layout/layout.action.ts b/src/app/store/ui/layout/layout.action.ts
new file mode 100644
index 0000000..6aa8db7
--- /dev/null
+++ b/src/app/store/ui/layout/layout.action.ts
@@ -0,0 +1,16 @@
+import { Action } from '@ngrx/store';
+
+export enum ActionType {
+  ChangeBlockPagesContent = '[app.ui.layout] ChangeBlockPagesContent',
+}
+
+export class ChangeBlockPagesContent implements Action {
+  readonly type = ActionType.ChangeBlockPagesContent;
+
+  constructor(public payload: { blockPagesContent: boolean }) { }
+}
+
+export type Actions =
+  | ChangeBlockPagesContent
+
+  ;
diff --git a/src/app/store/ui/layout/layout.effect.ts b/src/app/store/ui/layout/layout.effect.ts
new file mode 100644
index 0000000..09b433d
--- /dev/null
+++ b/src/app/store/ui/layout/layout.effect.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { map, tap } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutEffects {
+
+  constructor(
+    private actions$: Actions,
+    private router: Router,
+  ) { }
+}
diff --git a/src/app/store/ui/layout/layout.reducer.ts b/src/app/store/ui/layout/layout.reducer.ts
new file mode 100644
index 0000000..c47a5ab
--- /dev/null
+++ b/src/app/store/ui/layout/layout.reducer.ts
@@ -0,0 +1,24 @@
+import {
+  Actions,
+  ActionType,
+} from './layout.action';
+
+import {
+  State,
+  initialState,
+} from './layout.state';
+
+export function reducer(state: State = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ChangeBlockPagesContent: {
+      return {
+        ...state,
+        blockPagesContent: action.payload.blockPagesContent,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/app/store/ui/layout/layout.state.ts b/src/app/store/ui/layout/layout.state.ts
new file mode 100644
index 0000000..ed5f79c
--- /dev/null
+++ b/src/app/store/ui/layout/layout.state.ts
@@ -0,0 +1,15 @@
+import { Selector, createSelector } from '@ngrx/store';
+
+export interface State {
+  blockPagesContent: boolean;
+}
+
+export const initialState: State = {
+  blockPagesContent: false,
+};
+
+export function getSelectors<S>(selector: Selector<any, State>) {
+  return {
+    selectBlockPagesContent: createSelector(selector, (state: State) => state.blockPagesContent),
+  };
+}
diff --git a/src/commons/commons.module.ts b/src/commons/commons.module.ts
deleted file mode 100644
index 9a5c00f..0000000
--- a/src/commons/commons.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
-import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
-
-import { COMPONENTS } from './component';
-
-const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
-  suppressScrollX: true
-};
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CommonsUIModule,
-    PerfectScrollbarModule
-  ],
-  exports: [
-    ...COMPONENTS,
-  ],
-  declarations: [
-    ...COMPONENTS,
-  ],
-  providers: [
-    {
-      provide: PERFECT_SCROLLBAR_CONFIG,
-      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
-    }
-  ]
-})
-export class CommonsModule { }
diff --git a/src/commons/component/detail/index.ts b/src/commons/component/detail/index.ts
deleted file mode 100644
index ac38d1c..0000000
--- a/src/commons/component/detail/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './host-detail.component';
-export * from './node-detail.component';
-export * from './service-detail.component';
-export * from './zone-detail.component';
diff --git a/src/commons/component/detail/node-detail.component.html b/src/commons/component/detail/node-detail.component.html
deleted file mode 100644
index 87f95b9..0000000
--- a/src/commons/component/detail/node-detail.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="ui-g">
-
-  <div class="ui-g-12">
-
-
-    <ng-container [ngSwitch]="node.group">
-
-      <ng-container *ngSwitchCase="'zone'">
-        <app-zone-detail [zone]="node.target" (otherHostSelect)="otherHostSelected($event)"></app-zone-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchCase="'host'">
-        <app-host-detail [host]="node.target" (ping)="ping.emit($event)"></app-host-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchCase="'service'">
-        <app-service-detail [service]="node.target" (ping)="ping.emit($event)"></app-service-detail>
-      </ng-container>
-
-      <ng-container *ngSwitchDefault>
-      </ng-container>
-
-    </ng-container>
-
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/commons/component/detail/node-detail.component.ts b/src/commons/component/detail/node-detail.component.ts
deleted file mode 100644
index 5299179..0000000
--- a/src/commons/component/detail/node-detail.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, Input, Output, Host, EventEmitter } from '@angular/core';
-import { PingResult } from '@overflow/model/ping';
-
-
-@Component({
-  selector: 'app-node-detail',
-  templateUrl: './node-detail.component.html',
-  styleUrls: ['./node-detail.component.scss'],
-})
-export class NodeDetailComponent {
-
-  @Input() node;
-  @Output() otherHostSelect = new EventEmitter<Host>();
-  @Output() ping = new EventEmitter<PingResult>();
-
-  constructor(
-  ) {
-
-  }
-
-  otherHostSelected(host: Host) {
-    this.otherHostSelect.emit(host);
-  }
-
-}
diff --git a/src/commons/component/discovery/discovery-map.component.ts b/src/commons/component/discovery/discovery-map.component.ts
deleted file mode 100644
index f2b9662..0000000
--- a/src/commons/component/discovery/discovery-map.component.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  Component,
-  Input,
-  OnInit,
-  EventEmitter,
-  Output,
-  ViewChild,
-  OnDestroy,
-  ElementRef
-} from '@angular/core';
-import { Node } from '../../model/node';
-import { Link } from '../../model/link';
-import { Zone } from '@overflow/model/discovery';
-
-
-export class DiscoveryResult {
-  totalHosts: number;
-  totalServices: number;
-  elapsedTime: string;
-
-  hTimer: any;
-
-  constructor() {
-    this.totalHosts = 0;
-    this.totalServices = 0;
-    this.elapsedTime = '00:00:00';
-  }
-
-  start() {
-    const __this = this;
-    const startTime = new Date().getTime();
-    this.hTimer = setInterval(function () {
-      // Get todays date and time
-      const now = new Date().getTime();
-
-      // Find the distance between now and the count down date
-      const distance = now - startTime;
-
-      // Time calculations for days, hours, minutes and seconds
-      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-      __this.setElapsedTime(hours, minutes, seconds);
-    }, 1000);
-  }
-
-  setElapsedTime(hour: number, minute: number, second: number) {
-    this.elapsedTime = String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
-  }
-
-  stop(hours: number, minutes: number, seconds: number) {
-    clearInterval(this.hTimer);
-    this.setElapsedTime(hours, minutes, seconds);
-  }
-
-  increaseHost() {
-    this.totalHosts++;
-  }
-
-  increaseService() {
-    this.totalServices++;
-  }
-}
-
-@Component({
-  selector: 'app-discovery-map',
-  templateUrl: './discovery-map.component.html',
-  styleUrls: ['./discovery-map.component.scss']
-})
-export class DiscoveryMapComponent implements OnInit {
-  @Input() zone: Zone;
-
-  @Input() nodes: Node[];
-
-  @Input() links: Link[];
-
-
-  @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) {
-    this.discoveryTargetRef = content;
-  }
-
-  private discoveryTargetRef: ElementRef;
-  public simulation: d3.Simulation<Node, Link> | undefined;
-  private zoomBehavior: d3.ZoomBehavior<Element, {}>;
-  private discoveryContainerWidth: number;
-  private discoveryContainerHeight: number;
-  private readonly maxScale: number;
-  private readonly minScale: number;
-
-  constructor() { }
-
-  ngOnInit(): void {
-
-  }
-}
diff --git a/src/commons/component/index.ts b/src/commons/component/index.ts
deleted file mode 100644
index 1d234d3..0000000
--- a/src/commons/component/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  HostDetailComponent,
-  NodeDetailComponent,
-  ServiceDetailComponent,
-  ZoneDetailComponent,
-} from './detail';
-
-import {
-  AboutComponent,
-  ExportCSVComponent,
-  PreferencesComponent,
-  PrintComponent,
-} from './menu';
-
-import {
-  NicDropdownComponent,
-  ScannerSettingDropdownComponent,
-} from './toolbar';
-
-export const COMPONENTS = [
-  NicDropdownComponent,
-  ScannerSettingDropdownComponent,
-  NodeDetailComponent,
-  ZoneDetailComponent,
-  HostDetailComponent,
-  ServiceDetailComponent,
-  AboutComponent,
-  ExportCSVComponent,
-  PreferencesComponent,
-  PrintComponent,
-];
diff --git a/src/commons/component/menu/index.ts b/src/commons/component/menu/index.ts
deleted file mode 100644
index 7d9c457..0000000
--- a/src/commons/component/menu/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './about.component';
-export * from './export-csv.component';
-export * from './preferences.component';
-export * from './print.component';
diff --git a/src/commons/component/toolbar/index.ts b/src/commons/component/toolbar/index.ts
deleted file mode 100644
index 367bc81..0000000
--- a/src/commons/component/toolbar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './nic-dropdown.component';
-export * from './scanner-setting-dropdown.component';
diff --git a/src/commons/component/toolbar/nic-dropdown.component.ts b/src/commons/component/toolbar/nic-dropdown.component.ts
deleted file mode 100644
index f9d12f8..0000000
--- a/src/commons/component/toolbar/nic-dropdown.component.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import {
-  Component,
-  Input,
-  OnInit,
-  EventEmitter,
-  Output,
-  ViewChild,
-  OnDestroy
-} from '@angular/core';
-
-import { of } from 'rxjs';
-import { catchError, map, take } from 'rxjs/operators';
-
-import { ProbeService } from '../../service/probe.service';
-import { Interface } from '@overflow/model/net/nic';
-import { SelectItem } from 'primeng/primeng';
-import { Zone } from '@overflow/model/discovery';
-import { toMetaIPType, MetaIPType, MetaIPTypeEnum } from '@overflow/model/meta';
-import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
-
-class NICInfo {
-  iface: string;
-  friendlyName: string;
-  metaIPType: MetaIPType;
-  mac: string;
-  address: string;
-  network: string;
-}
-
-@Component({
-  selector: 'app-nic-dropdown',
-  templateUrl: './nic-dropdown.component.html',
-  styleUrls: ['./nic-dropdown.component.scss']
-})
-export class NicDropdownComponent implements OnInit {
-  @Input()
-  blockTarget: any;
-  @Output()
-  select = new EventEmitter<Zone>();
-  @ViewChild('panel')
-  panel: DropdownPanelComponent;
-
-  nics: SelectItem[] = [];
-  selected: NICInfo;
-
-  constructor(private probeService: ProbeService) { }
-
-  ngOnInit(): void {
-    this.probeService
-      .call<Interface[]>('MachineService.Interfaces')
-      .pipe(
-        map((ifaces: Interface[]) => {
-          ifaces.forEach(iface => {
-            if (undefined === iface.addresses) {
-              return;
-            }
-            iface.addresses.forEach(address => {
-              if (
-                address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key
-              ) {
-                return;
-              }
-              const nicInfo = {
-                iface: iface.iface,
-                friendlyName: iface.friendlyName,
-                metaIPType: address.metaIPType,
-                mac: iface.mac,
-                address: address.address,
-                network: address.network
-              };
-              this.nics.push({
-                label: iface.friendlyName + ' (' + address.network + ')',
-                value: nicInfo,
-                disabled:
-                  address.metaIPType.key !== toMetaIPType(MetaIPTypeEnum.V4).key
-                    ? true
-                    : false
-              });
-              if (address.gateway !== undefined && address.gateway.length > 0) {
-                this.nicSelected(nicInfo);
-              }
-            });
-          });
-        }),
-        catchError(error => {
-          console.log(error);
-          return of();
-        }),
-        take(1)
-      )
-      .subscribe();
-  }
-
-  nicSelected(nic: NICInfo) {
-    this.selected = nic;
-
-    const zone: Zone = {
-      network: this.selected.network,
-      iface: this.selected.iface,
-      metaIPType: toMetaIPType(MetaIPTypeEnum.V4),
-      address: this.selected.address,
-      mac: this.selected.mac
-    };
-    this.select.emit(zone);
-
-    this.panel.hide();
-  }
-}
diff --git a/src/commons/model/launch-state.ts b/src/commons/model/launch-state.ts
index b2bfda0..218a688 100644
--- a/src/commons/model/launch-state.ts
+++ b/src/commons/model/launch-state.ts
@@ -4,17 +4,17 @@ export interface LaunchState {
    * The time (in milliseconds) it takes from when our main process code is
    * first loaded until the app `ready` event is emitted.
    */
-  readonly mainReadyTime: number
+  readonly mainReadyTime: number;
 
   /**
    * The time (in milliseconds) it takes from when loading begins to loading
    * end.
    */
-  readonly loadTime: number
+  readonly loadTime: number;
 
   /**
    * The time (in milliseconds) it takes from when our renderer process code is
    * first loaded until the renderer `ready` event is emitted.
    */
-  readonly rendererReadyTime: number
+  readonly rendererReadyTime: number;
 }
diff --git a/src/commons/service/discovery-config.service.ts b/src/commons/service/discovery-config.service.ts
deleted file mode 100644
index 83ac92a..0000000
--- a/src/commons/service/discovery-config.service.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Injectable } from '@angular/core';
-import { DiscoverHost, Zone } from '@overflow/model/discovery';
-import { Observable, BehaviorSubject } from 'rxjs';
-
-export enum DiscoveryStatusType {
-  Started = 'Started',
-  Stopping = 'Stopping',
-  Stopped = 'Stopped'
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DiscoveryConfigService {
-
-
-  private discoverHostSubject = new BehaviorSubject<DiscoverHost>(null);
-  private zoneSubject = new BehaviorSubject<Zone>(null);
-  private discoveryModeSubject = new BehaviorSubject<string>('');
-
-  private statusSubject = new BehaviorSubject<DiscoveryStatusType>(DiscoveryStatusType.Stopped);
-
-  discoverHost: Observable<DiscoverHost>;
-  zone: Observable<Zone>;
-  discoveryMode: Observable<string>;
-
-  discoveryStatus: Observable<DiscoveryStatusType>;
-
-
-  constructor() {
-    this.discoverHost = this.discoverHostSubject.asObservable();
-    this.zone = this.zoneSubject.asObservable();
-    this.discoveryMode = this.discoveryModeSubject.asObservable();
-    this.discoveryStatus = this.statusSubject.asObservable();
-  }
-
-  public setZone(zone: Zone): void {
-    this.zoneSubject.next(zone);
-  }
-
-  public setDiscoverHost(discoverHost: DiscoverHost): void {
-    this.discoverHostSubject.next(discoverHost);
-  }
-
-
-  public setDiscoveryMode(mode: string): void {
-    this.discoveryModeSubject.next(mode);
-  }
-
-  public setDiscoveryStatus(mode: DiscoveryStatusType) {
-    this.statusSubject.next(mode);
-  }
-}
diff --git a/src/commons/store/index.ts b/src/commons/store/index.ts
deleted file mode 100644
index b6333cd..0000000
--- a/src/commons/store/index.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Type } from '@angular/core';
-
-import {
-  ActionReducer,
-  ActionReducerMap,
-  MetaReducer
-} from '@ngrx/store';
-
-import { environment } from '../../environments/environment';
-import * as fromRouter from '@ngrx/router-store';
-
-import { storeFreeze } from 'ngrx-store-freeze';
-
-export interface State {
-  router: fromRouter.RouterReducerState;
-}
-
-export const reducers: ActionReducerMap<State> = {
-  router: fromRouter.routerReducer,
-};
-
-// console.log all actions
-export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
-  return function (state: State, action: any): State {
-    const result = reducer(state, action);
-    console.groupCollapsed(action.type);
-    console.log('prev state', state);
-    console.log('action', action);
-    console.log('next state', result);
-    console.groupEnd();
-
-    return result;
-  };
-}
-
-export const metaReducers: MetaReducer<State>[] = !environment.production
-  ? [logger, storeFreeze]
-  : [];
-
-export const effects: Type<any>[] = [
-
-];
diff --git a/src/electron/main.ts b/src/electron/main.ts
index f713767..93defba 100644
--- a/src/electron/main.ts
+++ b/src/electron/main.ts
@@ -438,7 +438,7 @@ function createWindow() {
 
   if (__DEV__) {
     const {
-      default: installExtension
+      default: installExtension, REDUX_DEVTOOLS
     } = require('electron-devtools-installer');
 
     require('electron-debug')({ showDevTools: true });
@@ -448,7 +448,7 @@ function createWindow() {
       electron: '>=1.2.1'
     };
 
-    const extensions = [ChromeLens];
+    const extensions = [ChromeLens, REDUX_DEVTOOLS];
 
     for (const extension of extensions) {
       try {