diff --git a/src/packages/discovery/component/setting/setting.component.ts b/src/packages/discovery/component/setting/setting.component.ts
index 665f53d..7283fff 100644
--- a/src/packages/discovery/component/setting/setting.component.ts
+++ b/src/packages/discovery/component/setting/setting.component.ts
@@ -2,10 +2,14 @@ import { Component, OnInit, AfterContentInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
 import { Store, select } from '@ngrx/store';
 import { RPCError } from 'packages/core/rpc/error';
-import * as DiscoverySettingStore from '../../store/setting';
-import { DiscoveryStartInfo } from '../../model';
+import {
+  DiscoveryStartInfo,
+  DiscoveryZone
+} from '../../model';
 import * as CIDR from 'ip-cidr';
-import * as DiscoveryStore from '../../store/setting';
+import * as DiscoveredStore from '../../store/setting';
+import * as DiscoverStore from '../../store/notification';
+
 import { SettingSelector } from '../../store';
 
 @Component({
@@ -15,7 +19,7 @@ import { SettingSelector } from '../../store';
 })
 export class SettingComponent implements OnInit, AfterContentInit {
 
-  settingSucceed$ = this.store.pipe(select(SettingSelector.select('isStart')));
+  settingSucceed$ = this.discoverdstore.pipe(select(SettingSelector.select('isStart')));
   started = false;
 
   cidr;
@@ -38,7 +42,8 @@ export class SettingComponent implements OnInit, AfterContentInit {
   hosts = nodes;
 
   constructor(
-    private store: Store<DiscoverySettingStore.State>,
+    private discoverdstore: Store<DiscoveredStore.State>,
+    private discoverstore: Store<DiscoverStore.State>,
   ) {
   }
 
@@ -102,7 +107,16 @@ export class SettingComponent implements OnInit, AfterContentInit {
       startPort: this.startPort,
       endPort: this.endPort
     };
-    this.store.dispatch(new DiscoverySettingStore.Setting(startInfo));
+
+    const discoveryZone: DiscoveryZone = {
+      discoveryHost: {
+        firstScanRange: this.startIP,
+        lastScanRange: this.endIP,
+      }
+    };
+
+    // this.store.dispatch(new DiscoverySettingStore.Setting(startInfo));
+    this.discoverstore.dispatch(new DiscoverStore.DiscoverZone({probeID: '52abd6fd57e511e7ac52080027658d13', discoveryZone: discoveryZone}));
     this.started = true;
   }
 
diff --git a/src/packages/discovery/model/DiscoveryHost.ts b/src/packages/discovery/model/DiscoveryHost.ts
index a6a0489..a1dc3e4 100644
--- a/src/packages/discovery/model/DiscoveryHost.ts
+++ b/src/packages/discovery/model/DiscoveryHost.ts
@@ -1,10 +1,10 @@
 import { DiscoveryPort } from './DiscoveryPort';
 
 export interface DiscoveryHost {
-  firstScanRange: string;
-  lastScanRange: string;
-  excludeHosts: string[];
-  includeHosts: string[];
+  firstScanRange?: string;
+  lastScanRange?: string;
+  excludeHosts?: string[];
+  includeHosts?: string[];
 
   discoveryPort?: DiscoveryPort;
 }
diff --git a/src/packages/discovery/store/index.ts b/src/packages/discovery/store/index.ts
index d173ee3..cf50576 100644
--- a/src/packages/discovery/store/index.ts
+++ b/src/packages/discovery/store/index.ts
@@ -26,6 +26,7 @@ export const REDUCERS = {
 
 export const EFFECTS = [
   SettingStore.Effects,
+  NotificationStore.Effects,
 ];
 
 export const selectDiscoveryState = createFeatureSelector<State>(MODULE.name);
diff --git a/src/packages/discovery/store/notification/index.ts b/src/packages/discovery/store/notification/index.ts
index f9e09d0..76ee543 100644
--- a/src/packages/discovery/store/notification/index.ts
+++ b/src/packages/discovery/store/notification/index.ts
@@ -1,3 +1,4 @@
 export * from './notification.action';
 export * from './notification.reducer';
 export * from './notification.state';
+export * from './notification.effect';
diff --git a/src/packages/discovery/store/notification/notification.action.ts b/src/packages/discovery/store/notification/notification.action.ts
index 179b7f5..3ac3b5c 100644
--- a/src/packages/discovery/store/notification/notification.action.ts
+++ b/src/packages/discovery/store/notification/notification.action.ts
@@ -8,15 +8,47 @@ import {
   Host,
   Port,
   Service,
- } from '../../model';
+  DiscoveryZone,
+  DiscoveryHost,
+  DiscoveryPort,
+  DiscoveryService as MDiscoveryService,
+} from '../../model';
 
  export enum ActionType {
+  DiscoverZone = '[@@NOTIFICATION] DiscoveryService.discoverZone',
+  DiscoverHost = '[@@NOTIFICATION] DiscoveryService.discoverHost',
+  DiscoverPort = '[@@NOTIFICATION] DiscoveryService.discoverPort',
+  DiscoverService = '[@@NOTIFICATION] DiscoveryService.discoverService',
   DiscoveredZone = '[@@NOTIFICATION] DiscoveryService.discoveredZone',
   DiscoveredHost = '[@@NOTIFICATION] DiscoveryService.discoveredHost',
   DiscoveredPort = '[@@NOTIFICATION] DiscoveryService.discoveredPort',
   DiscoveredService = '[@@NOTIFICATION] DiscoveryService.discoveredService',
 }
 
+export class DiscoverZone implements Action {
+  readonly type = ActionType.DiscoverZone;
+
+  constructor(public payload: {probeID: string, discoveryZone: DiscoveryZone}) {}
+}
+
+export class DiscoverHost implements Action {
+  readonly type = ActionType.DiscoverHost;
+
+  constructor(public payload: {probeID: string, zone: Zone, discoveryHost: DiscoveryHost}) {}
+}
+
+export class DiscoverPort implements Action {
+  readonly type = ActionType.DiscoverPort;
+
+  constructor(public payload: {probeID: string, host: Host, discoveryPort: DiscoveryPort}) {}
+}
+
+export class DiscoverService implements Action {
+  readonly type = ActionType.DiscoverService;
+  constructor(public payload: {probeID: string, port: Port, discoveryService: MDiscoveryService}) {}
+}
+
+
 export class DiscoveredZone implements Action {
   readonly type = ActionType.DiscoveredZone;
 
@@ -41,6 +73,10 @@ export class DiscoveredService implements Action {
 }
 
 export type Actions =
+  | DiscoverZone
+  | DiscoverHost
+  | DiscoverPort
+  | DiscoverService
   | DiscoveredZone
   | DiscoveredHost
   | DiscoveredPort
diff --git a/src/packages/discovery/store/notification/notification.effect.ts b/src/packages/discovery/store/notification/notification.effect.ts
new file mode 100644
index 0000000..ce2def8
--- /dev/null
+++ b/src/packages/discovery/store/notification/notification.effect.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCError } from 'packages/core/rpc/error';
+import {
+  DiscoverZone,
+  DiscoverHost,
+  DiscoverPort,
+  DiscoverService,
+  ActionType
+} from './notification.action';
+import {DiscoveryService} from '../../service/discovery.service';
+
+
+@Injectable()
+export class Effects {
+
+  constructor(private actions$: Actions,
+              private discoveryService: DiscoveryService,
+              private router: Router) {
+  }
+
+  @Effect({ dispatch: false })
+  discoveryZone$ = this.actions$
+    .ofType(ActionType.DiscoverZone)
+    .map((action: DiscoverZone) => action.payload)
+    .do(payload => {
+      this.discoveryService.discoverZone(payload.probeID, payload.discoveryZone);
+    });
+
+}
diff --git a/src/packages/discovery/store/setting/setting.effect.ts b/src/packages/discovery/store/setting/setting.effect.ts
index 163016e..9df6d81 100644
--- a/src/packages/discovery/store/setting/setting.effect.ts
+++ b/src/packages/discovery/store/setting/setting.effect.ts
@@ -47,4 +47,5 @@ export class Effects {
     console.log(error.response.message);
     return of(new SettingFailure(error));
   });
+
 }
diff --git a/src/packages/infra/component/map/map.component.ts b/src/packages/infra/component/map/map.component.ts
index e46b257..8468828 100644
--- a/src/packages/infra/component/map/map.component.ts
+++ b/src/packages/infra/component/map/map.component.ts
@@ -8,7 +8,7 @@ import { ListSelector } from '../../store';
 import { Page, PageParams } from 'app/commons/model';
 import { Domain } from '../../../domain/model';
 import { MatDialog } from '@angular/material';
-import { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component';
+import { SettingComponent } from '../../../sensor/component/setting/setting.component';
 
 @Component({
   selector: 'of-infra-map',
@@ -64,7 +64,7 @@ export class MapComponent implements OnInit, AfterContentInit {
     const targetId = infra.target.id;
     console.log(targetId);
 
-    const dialogRef = this.dialog.open(SensorSettingPageComponent, {
+    const dialogRef = this.dialog.open(SettingComponent, {
       width: '80%',
       data: { }
     });
diff --git a/src/packages/infra/infra.module.ts b/src/packages/infra/infra.module.ts
index 9159f2c..ce72315 100644
--- a/src/packages/infra/infra.module.ts
+++ b/src/packages/infra/infra.module.ts
@@ -7,15 +7,16 @@ import { InfraStoreModule } from './infra-store.module';
 
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
-import { SensorSettingPageComponent } from 'app/pages/sensor-setting/sensor-setting-page.component';
 import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting-page.module';
+import { SensorModule } from '../sensor/sensor.module';
+import { SettingComponent } from '../sensor/component/setting/setting.component';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
     InfraStoreModule,
-    SensorSettingPageModule
+    SensorModule
   ],
   declarations: [
     COMPONENTS,
@@ -27,7 +28,7 @@ import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting
     SERVICES
   ],
   entryComponents: [
-    SensorSettingPageComponent,
+    SettingComponent,
   ]
 })
 export class InfraModule { }
diff --git a/src/packages/sensor/component/index.ts b/src/packages/sensor/component/index.ts
index 7d11086..bb35714 100644
--- a/src/packages/sensor/component/index.ts
+++ b/src/packages/sensor/component/index.ts
@@ -3,6 +3,10 @@ import { SettingResultComponent } from './setting-result/setting-result.componen
 import { FilterComponent } from './list/filter/filter.component';
 import { ListComponent } from './list/list.component';
 import { DetailComponent } from './detail/detail.component';
+import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
+import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
+import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
+import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
 
 export const COMPONENTS = [
   SettingComponent,
@@ -10,4 +14,8 @@ export const COMPONENTS = [
   ListComponent,
   FilterComponent,
   DetailComponent,
+  TargetSelectorComponent,
+  CrawlerSelectorComponent,
+  CrawlerAuthComponent,
+  SensorItemSelectorComponent
 ];
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
new file mode 100644
index 0000000..798cb00
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
@@ -0,0 +1,15 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 3</mat-card-title>
+      <mat-card-subtitle>Crawler 인증</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+        크롤러 인증해야 됨
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
new file mode 100644
index 0000000..87f023d
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerAuthComponent } from './crawler-auth.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerAuthComponent;
+  let fixture: ComponentFixture<CrawlerAuthComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerAuthComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerAuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
new file mode 100644
index 0000000..69feba2
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-crawler-auth',
+  templateUrl: './crawler-auth.component.html',
+  styleUrls: ['./crawler-auth.component.scss']
+})
+export class CrawlerAuthComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
new file mode 100644
index 0000000..ad139e4
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
@@ -0,0 +1,15 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 2</mat-card-title>
+      <mat-card-subtitle>Crawler 선택</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+        크롤러 골라야됨
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
new file mode 100644
index 0000000..77251eb
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerSelectorComponent } from './crawler-selector.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerSelectorComponent;
+  let fixture: ComponentFixture<CrawlerSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
new file mode 100644
index 0000000..9e9b028
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-crawler-selector',
+  templateUrl: './crawler-selector.component.html',
+  styleUrls: ['./crawler-selector.component.scss']
+})
+export class CrawlerSelectorComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
new file mode 100644
index 0000000..ad5047c
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
@@ -0,0 +1,17 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 4</mat-card-title>
+      <mat-card-subtitle>Select Sensor Items</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+        트리 들어가야됨
+        
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
new file mode 100644
index 0000000..25e7477
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SensorItemSelectorComponent } from './sensor-item-selector.component';
+
+describe('SensorItemSelectorComponent', () => {
+  let component: SensorItemSelectorComponent;
+  let fixture: ComponentFixture<SensorItemSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SensorItemSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SensorItemSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
new file mode 100644
index 0000000..d8fc1cd
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-sensor-item-selector',
+  templateUrl: './sensor-item-selector.component.html',
+  styleUrls: ['./sensor-item-selector.component.scss']
+})
+export class SensorItemSelectorComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html
index 61ef2ca..d0fccb0 100644
--- a/src/packages/sensor/component/setting/setting.component.html
+++ b/src/packages/sensor/component/setting/setting.component.html
@@ -1,86 +1,19 @@
-<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-  <div *ngIf="step == 1">
-    <!--  -->
-    <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-      <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+<mat-grid-list cols="2" rowHeight="200px">
 
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 1</mat-card-title>
-            <mat-card-subtitle>Select Target</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            여기에 타겟들 출력
-          </mat-card-content>
-        </mat-card>
+  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
+    <of-target-selector></of-target-selector>
+  </mat-grid-tile>
 
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 3</mat-card-title>
-            <mat-card-subtitle>Crawler Auth</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            <form class="example-form">
-              <mat-form-field class="example-full-width">
-                <input matInput placeholder="Account" value="Loafe">
-              </mat-form-field>
+  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightcoral">
+    <of-crawler-auth></of-crawler-auth>
+  </mat-grid-tile>
 
-              <mat-form-field class="example-full-width">
-                <input matInput type="password" placeholder="Password" value="">
-              </mat-form-field>
-              <div fxLayout="row" fxLayoutWrap fxLayoutAlign="right">
-                <button mat-button>Confirm</button>
-              </div>
-            </form>
-          </mat-card-content>
-        </mat-card>
+  <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightgrey">
+    <of-sensor-item-selector></of-sensor-item-selector>
+  </mat-grid-tile>
 
-      </div>
+  <mat-grid-tile [colspan]="1" [rowspan]="1" style="background-color: lightpink">
+    <of-crawler-selector></of-crawler-selector>
+  </mat-grid-tile>
 
-      <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
-
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 2</mat-card-title>
-            <mat-card-subtitle>Select Crawler</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            <mat-radio-group class="example-radio-group" [(ngModel)]="selectCrawler">
-              <mat-radio-button class="example-radio-button" *ngFor="let crawler of crawlerList" [value]="crawler">
-                {{crawler}}
-              </mat-radio-button>
-            </mat-radio-group>
-            <div class="example-selected-value">Your select crawler is: {{selectCrawler}}</div>
-          </mat-card-content>
-        </mat-card>
-
-        <mat-card class="example-card">
-          <mat-card-header>
-            <mat-card-title>Step 4</mat-card-title>
-            <mat-card-subtitle>Select Sensor Item</mat-card-subtitle>
-          </mat-card-header>
-          <mat-card-content>
-            트리로 센서 아이템 목록 출력
-          </mat-card-content>
-        </mat-card>
-
-      </div>
-    </div>
-
-    <!--  -->
-  </div>
-  <div *ngIf="step == 2">
-    <of-sensor-setting-result></of-sensor-setting-result>
-  </div>
-  <div fxLayout="col" fxLayoutWrap fxLayoutAlign="center">
-
-    <button mat-button (click)="onCloseCancel()">Cancel</button>
-    스텝 순서를 바꿨으니 나중에 바꾸잡
-    <button mat-button (click)="onNext()">Next</button>
-
-  </div>
-
-
-</div>
-
-<!--  -->
\ No newline at end of file
+</mat-grid-list>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts
index 1a1f611..59a8fec 100644
--- a/src/packages/sensor/component/setting/setting.component.ts
+++ b/src/packages/sensor/component/setting/setting.component.ts
@@ -13,21 +13,12 @@ export class SettingComponent implements OnInit, AfterContentInit {
 
   constructor() { }
 
-  selectCrawler: String;
-
-  crawlerList: Array<String>;
 
   ngOnInit() {
   }
 
   ngAfterContentInit() {
 
-    this.crawlerList = new Array();
-
-    this.crawlerList.push('SSH Crawler');
-    this.crawlerList.push('WMI Crawler');
-    this.crawlerList.push('MySQL Crawler');
-    this.crawlerList.push('PostgreSQL Crawler');
   }
 
   onNext() {
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.html b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
new file mode 100644
index 0000000..6bc0369
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
@@ -0,0 +1,21 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 1</mat-card-title>
+      <mat-card-subtitle>Select Target</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+          <mat-selection-list>
+              <mat-list-option *ngFor="let target of targets">
+                {{target.name}}
+              </mat-list-option>
+            </mat-selection-list>
+
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.scss b/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
new file mode 100644
index 0000000..c13ee67
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetSelectorComponent } from './target-selector.component';
+
+describe('FilterComponent', () => {
+  let component: TargetSelectorComponent;
+  let fixture: ComponentFixture<TargetSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
new file mode 100644
index 0000000..3cb7fd7
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-target-selector',
+  templateUrl: './target-selector.component.html',
+  styleUrls: ['./target-selector.component.scss']
+})
+export class TargetSelectorComponent implements OnInit {
+
+  targets = [
+    {
+      'name': 'Target1'
+    },
+    {
+      'name': 'Target2'
+    },
+    {
+      'name': 'Target3'
+    },
+    {
+      'name': 'Target4'
+    },
+    {
+      'name': 'Target5'
+    },
+  ];
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/sensor.module.ts b/src/packages/sensor/sensor.module.ts
index 62a5d34..42183ee 100644
--- a/src/packages/sensor/sensor.module.ts
+++ b/src/packages/sensor/sensor.module.ts
@@ -9,6 +9,7 @@ import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
 import { SettingComponent } from './component/setting/setting.component';
 import { TreeModule } from 'angular-tree-component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   imports: [
@@ -16,7 +17,8 @@ import { TreeModule } from 'angular-tree-component';
     MaterialModule,
     FormsModule,
     SensorStoreModule,
-    TreeModule
+    TreeModule,
+    PerfectScrollbarModule
   ],
   declarations: [
     COMPONENTS,