diff --git a/src/ts/containers/test/Components.tsx b/src/ts/containers/test/Components.tsx
new file mode 100644
index 0000000..19d082e
--- /dev/null
+++ b/src/ts/containers/test/Components.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Button } from 'semantic-ui-react';
+import { Probes } from './Probes';
+import { NoauthProbes } from './NoauthProbes';
+import { SensorConfiguration } from './SensorConfiguration';
+import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
+
+const panes = [
+  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
+  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
+  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
+];
+
+
+export class Components extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      no: 0,
+    };
+  }
+
+  handleButton(n: number): void {
+    this.setState({
+      no: n,
+    });
+  }
+
+  showContent() {
+    switch(this.state.no) {
+      case 0: {
+        return <Probes/>;
+      }
+      case 1: {
+        return <NoauthProbes/>;
+      }
+      case 2: {
+        return <SensorConfiguration/>;
+      }
+      default: {
+
+      }
+    }
+  }
+
+  render() {
+
+    return (
+      <div style={{margin:'20px'}}>
+        {/*<Tab panes={panes} />*/}
+        
+        <Button.Group>
+          <Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
+          <Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
+          <Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
+        </Button.Group>
+        <div style={{margin:'20px'}}>
+          {this.showContent()}
+        </div>
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/NoauthProbes.tsx b/src/ts/containers/test/NoauthProbes.tsx
new file mode 100644
index 0000000..2ebb02b
--- /dev/null
+++ b/src/ts/containers/test/NoauthProbes.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { Table, Checkbox, Button } from 'semantic-ui-react';
+
+
+export class NoauthProbes extends React.Component<any, any> {
+
+  private data: any;
+  private selectedIds: Array<string>;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: [],
+    };
+    this.selectedIds = new Array();
+  }
+
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "11",
+        "MetaNoAuthProbeStatus": {
+          "name": "NORMAL"
+        },
+        "hostName": "insanity's windows",
+        "macAddress": "14:fe:b5:9d:54:7e",
+        "ipAddress": "192.168.1.105",
+        "tempProbeKey": "45374d4egsdfw332",
+        "apiKey": "45374d4egsdfw332",
+        "domain": {
+
+        },
+        "probe": {
+
+        },
+      },
+      {
+        "id": "22",
+        "MetaNoAuthProbeStatus": {
+          "name": "NORMAL"
+        },
+        "hostName": "insanity's ubuntu",
+        "macAddress": "14:fe:b5:9d:54:7e",
+        "ipAddress": "192.168.1.105",
+        "tempProbeKey": "45374d4egsdfw332",
+        "apiKey": "45374d4egsdfw332",
+        "domain": {
+
+        },
+        "probe": {
+
+        },
+      },
+    ];
+  }
+
+  handleSelect(id: string) {
+    let idx = this.selectedIds.indexOf(id);
+    if (idx === -1) {
+      this.selectedIds.push(id);
+    } else {
+      this.selectedIds.splice(idx, 1);
+    }
+    this.setState({
+      selected: this.selectedIds,
+    });
+  }
+
+  checkExist(id: string): boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  handleAccept() {
+    alert(this.state.selected);
+  }
+
+  handleDeny() {
+    alert(this.state.selected);
+  }
+
+  handleRowActive(id: string):boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell />
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>API Key</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((probe: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
+                <Table.Cell collapsing>
+                  <Checkbox checked={this.checkExist(probe.id)} />
+                </Table.Cell>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
+                <Table.Cell>{probe.hostName}</Table.Cell>
+                <Table.Cell textAlign={'center'}></Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+
+          <Table.Footer fullWidth>
+            <Table.Row>
+              <Table.HeaderCell />
+              <Table.HeaderCell colSpan='6'>
+                <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
+                <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
new file mode 100644
index 0000000..e4171b1
--- /dev/null
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Button, Table, Label } from 'semantic-ui-react';
+import { Targets } from './Targets';
+
+export class ProbeDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+  handleDiscovery(event: any, data: any) {
+    alert('Discovery');
+  }
+
+  handleBack(event: any, data: any) {
+    console.log(data);
+  }
+
+
+  showStartStopBtn() {
+    if (this.props.probe.metaProbeStatus.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  render() {
+    let elem: any;
+    if (this.props.probe === null) {
+      elem = <div></div>;
+    } else {
+      elem =
+        <div>Probe Details...
+          <Table celled={false}>
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon>Domain</Label>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon>Status</Label>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon >Host IP</Label>
+                </Table.Cell>
+                <Table.Cell>????</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon >Host Name</Label>
+                </Table.Cell>
+                <Table.Cell>????</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon>Authorized at</Label>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell collapsing>
+                  <Label ribbon>Description</Label>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.description}</Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+          <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+          <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+          {this.showStartStopBtn()}
+
+          <Targets/>
+        </div>;
+    }
+    return (
+      <div>
+        {elem}
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
new file mode 100644
index 0000000..97a4961
--- /dev/null
+++ b/src/ts/containers/test/Probes.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Table } from 'semantic-ui-react';
+import { ProbeDetails } from './ProbeDetails';
+
+
+export class Probes extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "11",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "overFlow's domain111"
+        },
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description1111111111",
+      },
+      {
+        "id": "22",
+        "metaProbeStatus": {
+          "name": "STOPPED"
+        },
+        "domain": {
+          "name": "overFlow's domain222"
+        },
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description22222222",
+      },
+      {
+        "id": "33",
+        "metaProbeStatus": {
+          "name": "STOPPED"
+        },
+        "domain": {
+          "name": "overFlow's domain333"
+        },
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description33333",
+      },
+      {
+        "id": "44",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "overFlow's domain444"
+        },
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description4444",
+      },
+    ];
+  }
+
+  checkCellStatus(status: any): boolean {
+    if(status.name === 'STOPPED') {
+      return true;
+    }
+    return false;
+  }
+
+  handleSelect(selectedProbe: object) {
+    this.setState({
+      selected: selectedProbe,
+    });
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Probe Key</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((probe: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+                <Table.Cell>{probe.probeKey}</Table.Cell>
+                <Table.Cell>{probe.description}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <div style={{ margin: '20px' }}>
+          <ProbeDetails probe={this.state.selected} />
+        </div>
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/SensorConfiguration.tsx b/src/ts/containers/test/SensorConfiguration.tsx
new file mode 100644
index 0000000..134b12a
--- /dev/null
+++ b/src/ts/containers/test/SensorConfiguration.tsx
@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { Icon, Step, Button } from 'semantic-ui-react';
+import { Grid, Image, Label, Segment, Dropdown } from 'semantic-ui-react';
+
+
+export class SensorConfiguration extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+
+  render() {
+    let steps = [<CrawlerSelector />, <SensorItemSelector />];
+
+    return (
+      <Stepper steps={steps} />
+    );
+  }
+}
+
+
+export class Stepper extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      currentStep: 1,
+    };
+  }
+
+  handleActive(idx: number): boolean {
+    if (this.state.currentStep === idx) {
+      return true;
+    }
+    return false;
+  }
+
+  handleCompleted(idx: number): boolean {
+    if (this.state.currentStep > idx) {
+      return true;
+    }
+    return false;
+  }
+
+  handlePrev(event: any, data: object) {
+    let step: number = this.state.currentStep;
+    if (step <= 1) {
+      step = 1;
+    } else {
+      step--;
+    }
+    this.setState({
+      currentStep: step,
+    });
+  }
+  handleNext(event: any, data: object) {
+    let step: number = this.state.currentStep;
+    if (step >= 4) {
+      step = 4;
+    } else {
+      step++;
+    }
+    this.setState({
+      currentStep: step,
+    });
+    console.log(this.state.currentStep);
+  }
+
+  showContent() {
+    return this.props.steps[this.state.currentStep - 1];
+  }
+
+  render() {
+    return (
+      <div>
+        <Step.Group>
+          <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
+            <Icon name='settings' />
+            <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
+          </Step>
+
+          <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
+            <Icon name='list ul' />
+            <Step.Content title='Step 2' description='골라골라 아이템도 골라' />
+          </Step>
+
+          <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
+            <Icon name='options' />
+            <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
+          </Step>
+        </Step.Group>
+        <br />
+        {this.showContent()}
+        <br />
+        <Button.Group floated={'right'}>
+          <Button onClick={this.handlePrev.bind(this)}>Prev</Button>
+          <Button.Or />
+          <Button positive onClick={this.handleNext.bind(this)} >Next</Button>
+        </Button.Group>
+
+      </div>
+    );
+  }
+}
+
+
+export class CrawlerSelector extends React.Component<any, any> {
+
+  private crawlers: object[];
+  
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+
+  componentWillMount() {
+    //todo. getting MetaCrawler list
+    this.crawlers = [
+      {
+        "id": "1",
+        "name": "WMI",
+        "description": "WMI DESCRIPTION"
+      },
+      {
+        "id": "2",
+        "name": "SNMP",
+        "description": "SNMP DESCRIPTION"
+      },
+      {
+        "id": "3",
+        "name": "JMX",
+        "description": "JMX DESCRIPTION"
+      },
+    ];
+
+    let crawlerOptions = [];
+    let crawler: any;
+    for (crawler of this.crawlers) {
+      var option = {
+        key: crawler.id,
+        text: crawler.name,
+        value: crawler.name,
+        icon: 'windows',
+      };
+    }
+
+  }
+
+  handleCrawlerSelection(e: any, data: any) {
+    this.setState({
+      selected: data.value,
+    });
+  }
+
+  showCrawlerAuthInfo() {
+    if (this.state.selected === null) {
+      return null;
+    }
+    return <div>{this.state.selected} auth inputs </div>;
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Grid columns={1}>
+          <Grid.Column>
+            <Segment raised>
+              <Label color='red' ribbon>INFO</Label>
+              <span>Choose a Crawler type.</span>
+              <br />
+              <br />
+              <Dropdown openOnFocus
+                placeholder='Select Crawler' selection options={crawlerOptions} onChange={this.handleCrawlerSelection.bind(this)} />
+
+              {this.showCrawlerAuthInfo()}
+            </Segment>
+          </Grid.Column>
+        </Grid>
+
+      </div>
+    );
+  }
+
+}
+
+export class SensorItemSelector extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <div>SensorItemSelector</div>
+    );
+  }
+
+}
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
new file mode 100644
index 0000000..0f5e183
--- /dev/null
+++ b/src/ts/containers/test/Targets.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Table } from 'semantic-ui-react';
+
+export class Targets extends React.Component<any, any> {
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+  handleSelect(selectedTarget: object) {
+    this.setState({
+      selected: selectedTarget,
+    });
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "1",
+        "createDate": "",
+        "probe": {
+          "id": "1",
+        },
+        "infra": {
+          "id": "1",
+          "metaInfraType": {
+            "id": "1",
+            "name": "OS",
+            "createDate": "424252"
+          },
+          "childId": "1",
+          "createDate": "13345235"
+        },
+      },
+      {
+        "id": "2",
+        "createDate": "",
+        "probe": {
+          "id": "1",
+        },
+        "infra": {
+          "id": "1",
+          "metaInfraType": {
+            "id": "1",
+            "name": "OS",
+            "createDate": "424252"
+          },
+          "childId": "1",
+          "createDate": "13345235"
+        },
+      },
+    ];
+  }
+
+  render() {
+
+    return (
+      <Table celled selectable striped>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {this.data.map((target: any, index: number) => (
+            <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
+              <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+              <Table.Cell textAlign={'center'}>{target.infra.metaInfraType.name}</Table.Cell>
+              <Table.Cell>{target.childId}</Table.Cell>
+              <Table.Cell>{target.createDate}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  }
+}
+
+
+