diff --git a/src/app/commons/api/service/api.service.spec.ts b/src/app/commons/service/api.service.spec.ts
similarity index 61%
rename from src/app/commons/api/service/api.service.spec.ts
rename to src/app/commons/service/api.service.spec.ts
index 9b2fbe6..3fc0d05 100644
--- a/src/app/commons/api/service/api.service.spec.ts
+++ b/src/app/commons/service/api.service.spec.ts
@@ -13,7 +13,13 @@ describe('APIService', () => {
     expect(service).toBeTruthy();
   }));
 
-  it('should be created', inject([APIService], (service: APIService) => {
+  it('apiService connect to server', inject([APIService], (service: APIService) => {
+    service.connect();
+    service.getConnectionStatus().subscribe(
+      (isConnected: boolean) => {
+        console.log('isConnected:' + isConnected);
+      }
+    );
 
     expect(service).toBeTruthy();
   }));
diff --git a/src/app/commons/api/service/api.service.ts b/src/app/commons/service/api.service.ts
similarity index 57%
rename from src/app/commons/api/service/api.service.ts
rename to src/app/commons/service/api.service.ts
index 271952e..0131cbf 100644
--- a/src/app/commons/api/service/api.service.ts
+++ b/src/app/commons/service/api.service.ts
@@ -1,15 +1,17 @@
 import { Injectable } from '@angular/core';
-import { RxWebsocketSubject } from 'app/commons/core/rx/websocket/rx-websocket-subject';
 import { Observable } from 'rxjs/Observable';
 
+import { RxWebsocketSubject } from 'app/core/rx/websocket/rx-websocket-subject';
+import { RPCRegistry } from 'app/core/rpc/registry/rpc-registry';
 
 
 @Injectable()
 export class APIService {
   private wsSocketSubject: RxWebsocketSubject<Object>;
+  private rpcRegistry: RPCRegistry;
 
   constructor() {
-    this.wsSocketSubject = new RxWebsocketSubject<Object>('');
+    this.wsSocketSubject = new RxWebsocketSubject<Object>('ws://127.0.0.1:19090/webapp');
   }
 
   public connect(): void {
@@ -22,24 +24,35 @@ export class APIService {
         this.onError(error);
       },
       () => {
-
+        this.onDisconnected();
       }
     );
   }
 
+  public call<T>(method: string, ...args: any[]): Observable<T> {
+    return undefined;
+  }
+
+  public send(method: string, ...args: any[]): void {
+
+  }
+
   public getConnectionStatus(): Observable<boolean> {
     return this.wsSocketSubject.connectionStatus;
   }
 
   private onMessage(message: Object): void {
     //
+    console.log(message);
   }
 
   private onError(error: any): void {
     //
+    console.log(error);
   }
 
   private onDisconnected(): void {
     //
+    console.log('disconnected');
   }
 }
diff --git a/src/app/commons/core/rpc/protocol/client-codec.ts b/src/app/core/rpc/protocol/client-codec.ts
similarity index 100%
rename from src/app/commons/core/rpc/protocol/client-codec.ts
rename to src/app/core/rpc/protocol/client-codec.ts
diff --git a/src/app/commons/core/rpc/protocol/json/client-notification.ts b/src/app/core/rpc/protocol/json/client-notification.ts
similarity index 100%
rename from src/app/commons/core/rpc/protocol/json/client-notification.ts
rename to src/app/core/rpc/protocol/json/client-notification.ts
diff --git a/src/app/commons/core/rpc/protocol/json/client-request.ts b/src/app/core/rpc/protocol/json/client-request.ts
similarity index 100%
rename from src/app/commons/core/rpc/protocol/json/client-request.ts
rename to src/app/core/rpc/protocol/json/client-request.ts
diff --git a/src/app/commons/core/rpc/protocol/json/client-response.ts b/src/app/core/rpc/protocol/json/client-response.ts
similarity index 100%
rename from src/app/commons/core/rpc/protocol/json/client-response.ts
rename to src/app/core/rpc/protocol/json/client-response.ts
diff --git a/src/app/commons/core/rpc/registry/rpc-registry.ts b/src/app/core/rpc/registry/rpc-registry.ts
similarity index 100%
rename from src/app/commons/core/rpc/registry/rpc-registry.ts
rename to src/app/core/rpc/registry/rpc-registry.ts
diff --git a/src/app/commons/core/rx/websocket/rx-websocket-subject.ts b/src/app/core/rx/websocket/rx-websocket-subject.ts
similarity index 98%
rename from src/app/commons/core/rx/websocket/rx-websocket-subject.ts
rename to src/app/core/rx/websocket/rx-websocket-subject.ts
index 1ea93d5..0ee3bfb 100644
--- a/src/app/commons/core/rx/websocket/rx-websocket-subject.ts
+++ b/src/app/core/rx/websocket/rx-websocket-subject.ts
@@ -7,7 +7,6 @@ import {
 } from 'rxjs/observable/dom/WebSocketSubject';
 
 import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/interval';
 import 'rxjs/add/operator/share';
 import 'rxjs/add/operator/takeWhile';
 import 'rxjs/add/observable/interval';
@@ -112,7 +111,8 @@ export class RxWebsocketSubject<T> extends Subject<T> {
           this.complete();
           this.connectionObserver.complete();
         }
-      });
+      }
+    );
   }
 
   public send(data: any): void {
diff --git a/src/app/packages/member/components/signup/signup.component.scss b/src/app/packages/member/components/signup/signup.component.scss
deleted file mode 100644
index eaf77bc..0000000
--- a/src/app/packages/member/components/signup/signup.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-$gray-lighter: #eceeef !default;
-$image_path: "/assets/images/" !default;
-
-$prefix: 'sigin';
-
-.#{$prefix} {
-
-  &-conainer {
-    min-height: 100%;
-    background-size: cover;
-    padding: 100px;
-  }
-
-  &-main {
-    position: relative;
-    margin: 0 auto;
-    width: 500px;
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-.help {
-
-}
-
-.is-danger {
-
-}
-
-.redirect {
-  font-size: 14px;
-  margin-left: 10px;
-  color: #00AAAA;
-}
diff --git a/src/app/packages/member/service/member.service.ts b/src/app/packages/member/service/member.service.ts
index 85c1ee1..c56720c 100644
--- a/src/app/packages/member/service/member.service.ts
+++ b/src/app/packages/member/service/member.service.ts
@@ -1,11 +1,23 @@
 import { Injectable } from '@angular/core';
+import { APIService } from 'app/commons/service/api.service';
+
+import { Member } from '../model/member';
 
 @Injectable()
 export class MemberService {
 
-  constructor() { }
+  public constructor(
+    private apiService: APIService,
+  ) { }
 
-  signin(email: string, password: string) {
+  public signin(email: string, password: string) {
+    this.apiService.call<Member>('MemberService.signin', email, password).subscribe(
+      (member: Member) => {
 
+      },
+      (error: any) => {
+
+      }
+    );
   }
 }
diff --git a/src/app/packages/target/component/detail/detail.component.html b/src/app/packages/target/component/detail/detail.component.html
new file mode 100644
index 0000000..89e0f1f
--- /dev/null
+++ b/src/app/packages/target/component/detail/detail.component.html
@@ -0,0 +1,43 @@
+<div fxLayout="column" fxLayoutWrap style=" padding: 8px;">
+
+
+
+  <div fxLayout="column" fxLayout.xs="column" style="background-color: white;padding: 10px;">
+
+    <div class="mat-headline" style="margin: 20px; border-bottom: 1px solid #dddddd;">
+      TARGET ALIAS
+    </div>
+
+    <div fxLayoutAlign="end">
+      <button mat-raised-button>Check Alive</button>
+      <button mat-raised-button>Traceroute</button>
+    </div>
+
+    <div fxLayout="row" fxLayout.xs="column">
+      <div fxFlex.gt-xs="35" style="padding-top: 10px;">
+        info
+
+      </div>
+
+      <div fxFlex.gt-xs="10"></div>
+
+      <div style="padding: 5px 10px;" fxFlex.gt-xs="55">
+        <div style="height: 300px;">
+
+          <table class="table">
+            <tr *ngFor="let detail of tableData">
+              <td class="mat-subheading-1">{{ detail?.country }}</td>
+              <td class="text-right mat-subheading-1">{{ detail?.sales }}</td>
+              <td class="text-right mat-subheading-1">{{ detail?.percentage }}</td>
+            </tr>
+          </table>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+
diff --git a/src/app/packages/target/component/detail/detail.component.scss b/src/app/packages/target/component/detail/detail.component.scss
new file mode 100644
index 0000000..3cdd426
--- /dev/null
+++ b/src/app/packages/target/component/detail/detail.component.scss
@@ -0,0 +1,27 @@
+.table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+}
+.table tr:first-child td {
+    border-top: none;
+}
+
+.text-right {
+	text-align: right;
+}
+
+th, td {
+    padding: 8px;
+    text-align: left;
+    border-top: 1px solid #ddd;
+}
+.nav-item {
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  cursor: default;
+
+  &:hover {
+    transform: translate(0, -8px);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+  }
+}
diff --git a/src/app/packages/target/component/detail/detail.component.spec.ts b/src/app/packages/target/component/detail/detail.component.spec.ts
new file mode 100644
index 0000000..149b9be
--- /dev/null
+++ b/src/app/packages/target/component/detail/detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailComponent } from './detail.component';
+
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/packages/target/component/detail/detail.component.ts b/src/app/packages/target/component/detail/detail.component.ts
new file mode 100644
index 0000000..849f5f9
--- /dev/null
+++ b/src/app/packages/target/component/detail/detail.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-target-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+  @Input() sensors = [];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/packages/target/component/list/list.component.html b/src/app/packages/target/component/list/list.component.html
index 02a3e93..c670bbe 100644
--- a/src/app/packages/target/component/list/list.component.html
+++ b/src/app/packages/target/component/list/list.component.html
@@ -1,7 +1,7 @@
 <div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
 
   <!-- Filter -->
-  <div fxFlex="30%" fxFlex.lt-sm="30" fxFlex.sm="30">
+  <div fxFlex="30%" fxFlex.lt-sm="30" fxFlex.sm="30" >
     Filter Area
   </div>
 
diff --git a/src/app/packages/target/component/list/list.component.ts b/src/app/packages/target/component/list/list.component.ts
index 2d05372..005f86f 100644
--- a/src/app/packages/target/component/list/list.component.ts
+++ b/src/app/packages/target/component/list/list.component.ts
@@ -35,7 +35,7 @@ export class ListComponent implements OnInit, AfterContentInit {
     const data: Probe[] = new Array();
     for (let i = 0; i < 10; i++) {
       const p: Probe = {
-        id: String('id' + i),
+        id: String(i),
         name: String('name' + i),
         ip: String('ip' + i),
         os: String('os' + i),
@@ -57,6 +57,6 @@ export class ListComponent implements OnInit, AfterContentInit {
   }
 
   handleRowClick(obj: Probe) {
-    this.router.navigate(['probe', obj.id]);
+    this.router.navigate(['target', obj.id]);
   }
 }
diff --git a/src/app/packages/target/target.module.ts b/src/app/packages/target/target.module.ts
index d8f558c..167469b 100644
--- a/src/app/packages/target/target.module.ts
+++ b/src/app/packages/target/target.module.ts
@@ -2,15 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ListComponent } from 'app/packages/target/component/list/list.component';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { DetailComponent } from './component/detail/detail.component';
+import { InfoTableModule } from 'app/commons/component/info-table/info-table.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    MaterialModule
+    MaterialModule,
+    InfoTableModule
   ],
-  declarations: [ListComponent],
+  declarations: [ListComponent, DetailComponent],
   exports: [
-    ListComponent
+    ListComponent,
+    DetailComponent
   ]
 })
 export class TargetModule { }
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index f179fc6..2525034 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -14,6 +14,7 @@ const routes: Routes = [
       { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' },
       { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' },
       { path: 'sensor-setting', loadChildren: './sensor-setting/sensor-setting-page.module#SensorSettingPageModule' },
+      { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' },
     ]
   }
 ];
diff --git a/src/app/pages/probe/probe-page-routing.module.ts b/src/app/pages/probe/probe-page-routing.module.ts
index 7d1856d..46952b7 100644
--- a/src/app/pages/probe/probe-page-routing.module.ts
+++ b/src/app/pages/probe/probe-page-routing.module.ts
@@ -20,4 +20,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class ProbesPageRoutingModule { }
+export class ProbePageRoutingModule { }
diff --git a/src/app/pages/probe/probe-page.component.ts b/src/app/pages/probe/probe-page.component.ts
index ca18f27..233ad82 100644
--- a/src/app/pages/probe/probe-page.component.ts
+++ b/src/app/pages/probe/probe-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-pages-probe',
@@ -10,14 +10,16 @@ export class ProbePageComponent implements OnInit {
 
   tabs = undefined;
 
-  constructor(private router: Router) {
+  constructor(private route: ActivatedRoute, private router: Router) {
   }
 
   ngOnInit() {
+    const id = this.router.url.split('probe/')[1].split('/')[0];
+
     this.tabs = [
-      { label: 'Info', path: this.router.url },
-      { label: 'Targets', path: this.router.url + '/targets' },
-      { label: 'History', path: this.router.url + '/history' },
+      { label: 'Info', path: '/probe/' + id },
+      { label: 'Targets', path: '/probe/' + id + '/targets' },
+      { label: 'History', path: '/probe/' + id + '/history' },
     ];
   }
 
diff --git a/src/app/pages/probe/probe-page.module.ts b/src/app/pages/probe/probe-page.module.ts
index 70937fc..d5b8adb 100644
--- a/src/app/pages/probe/probe-page.module.ts
+++ b/src/app/pages/probe/probe-page.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ProbePageComponent } from './probe-page.component';
-import { ProbesPageRoutingModule } from './probe-page-routing.module';
+import { ProbePageRoutingModule } from './probe-page-routing.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
 import { ProbeModule } from 'app/packages/probe/probe.module';
 import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.module';
@@ -9,7 +9,7 @@ import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.
 @NgModule({
   imports: [
     CommonModule,
-    ProbesPageRoutingModule,
+    ProbePageRoutingModule,
     MaterialModule,
     ProbeModule,
     SubMenubarModule,
diff --git a/src/app/pages/target/target-page-routing.module.ts b/src/app/pages/target/target-page-routing.module.ts
new file mode 100644
index 0000000..4f0225f
--- /dev/null
+++ b/src/app/pages/target/target-page-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TargetPageComponent } from './target-page.component';
+
+const routes: Routes = [
+  {
+    path: ':id',
+    component: TargetPageComponent,
+    children: [
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TargetPageRoutingModule { }
diff --git a/src/app/pages/target/target-page.component.html b/src/app/pages/target/target-page.component.html
new file mode 100644
index 0000000..0178d45
--- /dev/null
+++ b/src/app/pages/target/target-page.component.html
@@ -0,0 +1 @@
+<of-target-detail></of-target-detail>
\ No newline at end of file
diff --git a/src/app/pages/target/target-page.component.scss b/src/app/pages/target/target-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/target/target-page.component.spec.ts b/src/app/pages/target/target-page.component.spec.ts
new file mode 100644
index 0000000..1c82b34
--- /dev/null
+++ b/src/app/pages/target/target-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetPageComponent } from './target-page.component';
+
+describe('ProbeComponent', () => {
+  let component: TargetPageComponent;
+  let fixture: ComponentFixture<TargetPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/target/target-page.component.ts b/src/app/pages/target/target-page.component.ts
new file mode 100644
index 0000000..79870ea
--- /dev/null
+++ b/src/app/pages/target/target-page.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-pages-target',
+  templateUrl: './target-page.component.html',
+  styleUrls: ['./target-page.component.scss']
+})
+export class TargetPageComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/pages/target/target-page.module.ts b/src/app/pages/target/target-page.module.ts
new file mode 100644
index 0000000..12db881
--- /dev/null
+++ b/src/app/pages/target/target-page.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TargetPageComponent } from './target-page.component';
+import { TargetPageRoutingModule } from './target-page-routing.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { TargetModule } from 'app/packages/target/target.module';
+import { SubMenubarModule } from 'app/commons/component/sub-menubar/sub-menubar.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TargetPageRoutingModule,
+    MaterialModule,
+    TargetModule,
+    SubMenubarModule,
+  ],
+  declarations: [
+    TargetPageComponent,
+  ]
+})
+export class TargetPageModule { }