diff --git a/src/ts/@overflow/infra/react/InfraMap.tsx b/src/ts/@overflow/infra/react/InfraMap.tsx
index 6b3306c..905ba7c 100644
--- a/src/ts/@overflow/infra/react/InfraMap.tsx
+++ b/src/ts/@overflow/infra/react/InfraMap.tsx
@@ -3,7 +3,7 @@ import {
   InfraMap,
   StateProps as StateProps,
   DispatchProps as DispatchProps,
-} from './components/InfraMap';
+} from './components/infra_map';
 
 import { push as routerPush } from 'react-router-redux';
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
diff --git a/src/ts/@overflow/infra/react/components/InfraMap.tsx b/src/ts/@overflow/infra/react/components/InfraMap.tsx
deleted file mode 100644
index 8db724e..0000000
--- a/src/ts/@overflow/infra/react/components/InfraMap.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { Table, Header, Container, Form, Checkbox, Button, Rating } from 'semantic-ui-react';
-import { ListContainer } from '@overflow/commons/react/component/ListContainer';
-
-export interface StateProps {
-}
-
-export interface DispatchProps {
-}
-
-export type Props = StateProps & DispatchProps;
-
-export interface State {
-}
-
-export class InfraMap extends React.Component<Props, State> {
-
-  constructor(props: Props, context: State) {
-    super(props, context);
-
-    this.state = {
-      selected: null,
-    };
-  }
-
-
-  public render(): JSX.Element {
-    return (
-      <Table celled padded>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell singleLine>Zone : 192.168.1.0/24</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h2' textAlign='center'>Windows / Probe</Header>
-          </Table.Cell>
-          <Table.Cell>
-              Creatine supplementation is the reference compound for increasing muscular creatine levels; there is
-              variability in this increase, however, with some nonresponders.
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h2' textAlign='center'>Windows</Header>
-          </Table.Cell>
-          <Table.Cell>
-              Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess
-              potency
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h2' textAlign='center'>Linux</Header>
-          </Table.Cell>
-          <Table.Cell>
-              Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess
-              potency
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-    );
-  }
-
-}
-
-
-
-
diff --git a/src/ts/@overflow/infra/react/components/infra_map.tsx b/src/ts/@overflow/infra/react/components/infra_map.tsx
new file mode 100644
index 0000000..f1c2b5d
--- /dev/null
+++ b/src/ts/@overflow/infra/react/components/infra_map.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Table, Header, Container, Form, Checkbox, Button, Rating,
+Tab,
+ } from 'semantic-ui-react';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+import { InfraMapZoneTable } from './infra_map_zone_table';
+import { InfraMapHostTable } from './infra_map_host_table';
+import { SensorConfig} from '@overflow/sensor/react/components/sensor_config';
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class InfraMap extends React.Component<Props, State> {
+
+  private panes: any = [
+    { menuItem: 'sc Test', render: () => <Tab.Pane attached={false}><SensorConfig /></Tab.Pane> },
+    { menuItem: 'Zone', render: () => <Tab.Pane attached={false}><InfraMapZoneTable /></Tab.Pane> },
+    { menuItem: 'Host', render: () => <Tab.Pane attached={false}><InfraMapHostTable /></Tab.Pane> },
+  ];
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        <Tab menu={{ pointing: true }} panes={this.panes} />
+      </Container>
+    );
+  }
+
+}
+
+
+
+
diff --git a/src/ts/@overflow/infra/react/components/infra_map_host_table.tsx b/src/ts/@overflow/infra/react/components/infra_map_host_table.tsx
new file mode 100644
index 0000000..49062f3
--- /dev/null
+++ b/src/ts/@overflow/infra/react/components/infra_map_host_table.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+import {InfraMapHostTableRow} from './infra_map_host_table_row';
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class InfraMapHostTable extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Table celled padded>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell singleLine>Host : 192.168.1.106</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <InfraMapHostTableRow />
+          <InfraMapHostTableRow />
+        </Table.Body>
+      </Table>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/infra/react/components/infra_map_host_table_row.tsx b/src/ts/@overflow/infra/react/components/infra_map_host_table_row.tsx
new file mode 100644
index 0000000..c5c3f09
--- /dev/null
+++ b/src/ts/@overflow/infra/react/components/infra_map_host_table_row.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class InfraMapHostTableRow extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Table.Row>
+        <Table.Cell>
+          <Header textAlign='center'>MySQL</Header>
+        </Table.Cell>
+        <Table.Cell>
+          <List>
+            <List.Item>Port : 3306 | TCP | TLS</List.Item>
+            <List.Item>Sensors(2) :
+                <List horizontal>
+                <List.Item>
+                  <Icon link name='square' />Health Crawler
+                    </List.Item>
+                <List.Item>
+                  <Icon link name='square outline' />MySQL
+                    </List.Item>
+              </List>
+              <Button.Group floated='right'>
+                <Button>Add Sensor</Button>
+              </Button.Group>
+            </List.Item>
+          </List>
+        </Table.Cell>
+      </Table.Row>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx b/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx
new file mode 100644
index 0000000..6a9f664
--- /dev/null
+++ b/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+import {InfraMapZoneTableRow} from './infra_map_zone_table_row';
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class InfraMapZoneTable extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Table celled padded>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell singleLine>Zone : 192.168.1.0/24</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <InfraMapZoneTableRow />
+          <InfraMapZoneTableRow />
+        </Table.Body>
+      </Table>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx b/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx
new file mode 100644
index 0000000..9dc0613
--- /dev/null
+++ b/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class InfraMapZoneTableRow extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Table.Row>
+        <Table.Cell>
+          <Header textAlign='center'>Windows / Probe</Header>
+        </Table.Cell>
+        <Table.Cell>
+          <List>
+            <List.Item>Host : 192.168.1.106</List.Item>
+            <List.Item>Service :
+                <List horizontal>
+                <List.Item>FTP</List.Item>
+                <List.Item>MySQL</List.Item>
+                <List.Item>SMB</List.Item>
+              </List>
+            </List.Item>
+            <List.Item>Sensors(2) :
+                <List horizontal>
+                <List.Item>
+                  <Icon link name='square' />FTP
+                    </List.Item>
+                <List.Item>
+                  <Icon link name='square outline' />MySQL
+                    </List.Item>
+              </List>
+              <Button.Group floated='right'>
+                <Button>Add Sensor</Button>
+              </Button.Group>
+            </List.Item>
+          </List>
+        </Table.Cell>
+      </Table.Row>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config.tsx b/src/ts/@overflow/sensor/react/components/sensor_config.tsx
new file mode 100644
index 0000000..0b0e7fa
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+import {SensorConfigTarget} from './sensor_config_target';
+import {SensorConfigCrawler} from './sensor_config_crawler';
+import {SensorConfigAuthCrawler} from './sensor_config_auth_crawler';
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class SensorConfig extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        Target Select
+        <SensorConfigTarget />
+        Crawler Select
+        <SensorConfigCrawler />
+        Auth Crawler
+        <SensorConfigAuthCrawler />
+        {/* <SensorConfigItem /> */}
+        {/* <SensorConfigSetting /> */}
+      </Container>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
new file mode 100644
index 0000000..077f696
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon, Radio, CheckboxProps,
+} from 'semantic-ui-react';
+
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class SensorConfigAuthCrawler extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+      </Container>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx
new file mode 100644
index 0000000..3bee240
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon, Radio, CheckboxProps,
+} from 'semantic-ui-react';
+
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  selectedValue: number|string;
+}
+
+export class SensorConfigCrawler extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selectedValue: null,
+    };
+  }
+
+  public handleChange = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
+    this.setState({ selectedValue: data.value });
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+         <Form>
+        <Form.Field>
+          Selected Crawler : <b>{this.state.selectedValue}</b>
+        </Form.Field>
+        <Form.Field>
+          <Radio
+            label='SSH Crawler'
+            name='radioGroup'
+            value='SSH Crawler'
+            checked={this.state.selectedValue === 'SSH Crawler'}
+            onChange={this.handleChange}
+          />
+        </Form.Field>
+        <Form.Field>
+          <Radio
+            label='WMI Crawler'
+            name='radioGroup'
+            value='WMI Crawler'
+            checked={this.state.selectedValue === 'WMI Crawler'}
+            onChange={this.handleChange}
+          />
+        </Form.Field>
+      </Form>
+      </Container>
+    );
+  }
+
+}
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx
new file mode 100644
index 0000000..a14c36b
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_target.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon,
+} from 'semantic-ui-react';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+}
+
+export class SensorConfigTarget extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      selected: null,
+    };
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        <List>
+          <List.Item >
+            <List.Icon name={true ? 'chevron up' : 'chevron down'}
+              onClick={null} />
+            <List.Content>
+              <List.Header>
+                Host
+            </List.Header>
+              <List.Description style={{ marginLeft: '26px' }}></List.Description>
+              <List.List onClick={null}>
+                <List.Item >
+                  <List.Content>
+                    <List.Header>
+                      <Checkbox label={'192.168.1.1 | Linux'} checked={false} onChange={null} />
+                    </List.Header>
+                    <List.Description style={{ marginLeft: '26px' }}>
+                    </List.Description>
+                  </List.Content>
+                </List.Item>
+              </List.List>
+            </List.Content>
+          </List.Item>
+        </List>
+      </Container>
+    );
+  }
+
+}