diff --git a/src/ts/@overflow/app/views/layout/TempLayout.tsx b/src/ts/@overflow/app/views/layout/TempLayout.tsx
index e562961..d8981d8 100644
--- a/src/ts/@overflow/app/views/layout/TempLayout.tsx
+++ b/src/ts/@overflow/app/views/layout/TempLayout.tsx
@@ -6,6 +6,7 @@ import { Footer } from './Footer';
 import LeftMenu from './LeftMenu';
 
 import TableSortView from '../../../temp/react/components/TableSortView';
+import DiscoveryTreeContainer from '@overflow/discovery/react/DiscoveryTree';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -36,6 +37,7 @@ export class AppLayout extends React.Component<Props, State> {
           <Segment basic style={{ margin: '0 0 0 210px', padding: '0' }}>
             <Header />
             <Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
+            <Route exact path={`${this.props.match.url}/discoveryTree`} component={DiscoveryTreeContainer} />
             <Footer />
           </Segment>
         </Container >
diff --git a/src/ts/@overflow/discovery/react/DiscoveryTree.tsx b/src/ts/@overflow/discovery/react/DiscoveryTree.tsx
new file mode 100644
index 0000000..96aee40
--- /dev/null
+++ b/src/ts/@overflow/discovery/react/DiscoveryTree.tsx
@@ -0,0 +1,21 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  DiscoveryTree,
+  DiscoveryTreeStateProps,
+  DiscoveryTreeDispatchProps,
+} from './components/DiscoveryTree';
+
+
+export function mapStateToProps(state: any): DiscoveryTreeStateProps {
+  return {
+
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DiscoveryTreeDispatchProps {
+  return {
+
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DiscoveryTree);
diff --git a/src/ts/@overflow/discovery/react/components/DiscoveryTree.tsx b/src/ts/@overflow/discovery/react/components/DiscoveryTree.tsx
index 83d9db0..5133054 100644
--- a/src/ts/@overflow/discovery/react/components/DiscoveryTree.tsx
+++ b/src/ts/@overflow/discovery/react/components/DiscoveryTree.tsx
@@ -1,6 +1,7 @@
 
 import * as React from 'react';
 // import update from 'immutability-helper';
+import * as _ from 'lodash';
 
 import {
   Checkbox,
@@ -8,8 +9,9 @@ import {
   Label,
   Accordion,
   Icon,
-  List,
+  List, Button,
   ListItemProps,
+  CheckboxProps,
 } from 'semantic-ui-react';
 
 
@@ -19,114 +21,199 @@ import Service from '@overflow/discovery/api/model/Service';
 
 import * as Utils from '@overflow/commons/util/Utils';
 
-export interface DiscoveryResultProps {
+export interface DiscoveryTreeStateProps {
 }
 
-export interface DiscoveryResultState {
-  portState: { [key: number]: boolean; };
+export interface DiscoveryTreeDispatchProps {
+}
+
+export type DiscoveryTreeProps = DiscoveryTreeStateProps & DiscoveryTreeDispatchProps;
+
+export interface DiscoveryTreeState {
+  portState: Map<string, boolean>;
+  serviceState: Map<string, boolean>;
+  checkHostState: Map<string, boolean>;
+  checkPortState: Map<string, boolean>;
+  checkServiceState: Map<string, boolean>;
+
 }
 
 
-export class DiscoveryTree extends React.Component<DiscoveryResultProps, DiscoveryResultState> {
+export class DiscoveryTree extends React.Component<DiscoveryTreeProps, DiscoveryTreeState> {
+
+  private selectedHostState: Map<string, boolean>;
+  private selectedPortState: Map<string, boolean>;
+  private selectedServiceState: Map<string, boolean>;
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.state = {
-      portState: {},
+      portState: new Map,
+      serviceState: new Map,
+      checkHostState: new Map,
+      checkPortState: new Map,
+      checkServiceState: new Map,
     };
 
+    this.selectedHostState = new Map;
+    this.selectedPortState = new Map;
+    this.selectedServiceState = new Map;
 
     // fs.readFile('../../../../../dh.json', this.handlJSONFile);
   }
 
+  public onClickHost = (key: string) => {
+    let newPortStateMap: Map<string, boolean> = _.clone(this.state.portState);
+    newPortStateMap[key] = !newPortStateMap[key];
+    this.setState({ portState: newPortStateMap });
+  }
+
+  public onClickPort = (key: string) => {
+    let newServiceStateMap: Map<string, boolean> = _.clone(this.state.serviceState);
+    newServiceStateMap[key] = !newServiceStateMap[key];
+    this.setState({ serviceState: newServiceStateMap });
+  }
+
+  public onCheckHost = (host: Host, key: string) => {
+    console.log('aa');
+  }
+  public onCheckPort = (port: Port, key: string) => {
+    console.log('aa');
+  }
+  public onCheckService = (service: Service, key: string) => {
+    console.log('aa');
+  }
+
+  public onCheck = (checkProps: CheckboxProps, checkState: Map<string, boolean>, key: string, stateKey: string,
+                    selectedMap: Map<string, any>, selectedObj: any) => {
+    let newCheckState = _.clone(checkState);
+    newCheckState[key] = !newCheckState[key];
+    let state: any = {};
+    state[stateKey] = newCheckState;
+    this.setState(state);
+
+    if (checkProps.checked) {
+      selectedMap[key] = selectedObj;
+    } else {
+      delete selectedMap[key];
+    }
+  }
+
+  public renderDiscovery(): JSX.Element[] {
+
+    let elems: JSX.Element[] = new Array();
+
+    let hostList: Host[] = hostListJson;
+    let host: Host;
+    for (let index: number = 0; index < hostList.length; ++index) {
+      host = hostList[index];
+      let key: string = String(index);
+      elems.push(
+        <List.Item key={key} >
+          <List.Icon name={host.ports ? (this.state.portState[key] ? 'chevron up' : 'chevron down') : 'file'}
+            onClick={this.onClickHost.bind(this, key)} />
+          <List.Content>
+            <List.Header>
+              <Checkbox label={Utils.int2ip(host.ip) + ' ' + host.os} checked={this.state.checkHostState[key]} onChange={
+                (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                  {
+                    this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedHostState, host);
+                  }
+                }} />
+            </List.Header>
+            <List.Description style={{ marginLeft: '26px' }}>Host</List.Description>
+            {host.ports ? (this.state.portState[key] ? this.renderPort(host.ports, index) : null) : null}
+          </List.Content>
+        </List.Item>,
+      );
+    }
+    return elems;
+  }
+
+  public renderPort(portList: Port[], hostIndex: number): JSX.Element[] {
+
+    if (portList === undefined) {
+      return null;
+    }
+
+    let elems: JSX.Element[] = new Array();
+    let port: Port;
+    for (let index: number = 0; index < portList.length; ++index) {
+      port = portList[index];
+      let key: string = String(hostIndex) + '-' + String(index);
+      elems.push(
+        <List.List key={key}>
+          <List.Item >
+            <List.Icon name={port.services ? (this.state.serviceState[key] ? 'chevron up' : 'chevron down') : 'file'}
+              onClick={this.onClickPort.bind(this, key)} />
+            <List.Content>
+              <List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} checked={this.state.checkHostState[key]} onChange={
+                (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                  {
+                    this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedPortState, port);
+                  }
+                }} /></List.Header>
+              <List.Description style={{ marginLeft: '26px' }}>Port</List.Description>
+              {port.services ? (this.state.serviceState[key] ? this.renderService(port.services, key) : null) : null}
+            </List.Content>
+          </List.Item>
+        </List.List>,
+      );
+    }
+
+    return elems;
+  }
+
+  public renderService(serviceList: Service[], portKey: string): JSX.Element[] {
+    let elems: JSX.Element[] = new Array();
+    let service: Service;
+    for (let index: number = 0; index < serviceList.length; ++index) {
+      service = serviceList[index];
+      let key: string = portKey + '-' + String(index);
+      elems.push(
+        <List.List key={key}>
+          <List.Item >
+            <List.Icon name='file' />
+            <List.Content>
+              <List.Header> <Checkbox label={service.serviceName + ' ' + service.portType}
+                checked={this.state.checkHostState[key]} onChange={
+                  (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                    {
+                      this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedServiceState, service);
+                    }
+                  }} /></List.Header>
+              <List.Description style={{ marginLeft: '26px' }}>Service</List.Description>
+            </List.Content>
+          </List.Item>
+        </List.List>,
+      );
+    }
+
+    return elems;
+  }
 
   public render(): JSX.Element {
 
     return (
-      <Container>
+      <Container fluid>
         <List selection>
-          {
-
-            jsonData.map((data: any, index: number) => {
-              let hh: Host = data;
-              this.state.portState[hh.ip] = false;
-              return (
-                <List.Item key={index} >
-
-                  <List.Icon name='folder' onClick={() => {
-
-
-
-                    {/*const newPortState = update.newContext()(this.state.portState, {
-                      [hh.ip]: !this.state.portState[hh.ip]
-                    });*/}
-
-                    {/*this.setState({ portState: newPortState });*/ }
-
-                  }} />
-
-                  <List.Content>
-
-                    <List.Header> <Checkbox label={Utils.int2ip(hh.ip) + ' ' + hh.os} />   </List.Header>
-                    <List.Description>Host</List.Description>
-                    {this.state.portState[hh.ip] ?
-                      hh.ports ? hh.ports.map((port: Port, idx: number) => {
-
-                        return (
-                          <List.List key={idx * 1000}>
-                            <List.Item>
-                              <List.Icon name='folder' />
-                              <List.Content>
-                                <List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} /></List.Header>
-                                <List.Description>Port</List.Description>
-                                {port.services ? port.services.map((service: Service, sIdx: number) => {
-                                  return (
-                                    <List.List key={sIdx * 10000}>
-                                      <List.Item>
-                                        <List.Icon name='folder' />
-                                        <List.Content>
-                                          <List.Header><Checkbox label={service.serviceName + ' ' + service.portType} /></List.Header>
-                                          <List.Description>Service</List.Description>
-                                        </List.Content>
-                                      </List.Item>
-                                    </List.List>
-                                  );
-                                }) : ''}
-                              </List.Content>
-                            </List.Item>
-                          </List.List>
-                        );
-                      }) : '' : ''}
-
-                  </List.Content>
-                </List.Item>
-              );
-
-            })}
+          {this.renderDiscovery()}
         </List>
-
-        {/*<List>
-          <List.Item >
-            <Label basic onClick={() => {
-              this.setState({ tt: !this.state.tt });
-            }}>Host</Label>
-            <Checkbox />
-          </List.Item>
-          {this.state.tt ? <List.Item selection >
-            <List.List>
-              <List.Item>Port 22 NOR</List.Item>
-              <List.Item>Port 443 TLS</List.Item>
-              <List.Item>Port 80 NOR </List.Item>
-            </List.List>
-          </List.Item> : ''}
-        </List>*/}
+        <Button primary floated='right' onClick={() => {
+          console.log(this.selectedHostState);
+          console.log(this.selectedPortState);
+          console.log(this.selectedServiceState);
+        }}>Test</Button><br /><br />
       </Container>
     );
   }
+
 }
 
-const jsonData = [{
+
+
+const hostListJson: any = [{
   'firstScanRange': 1,
   'lastScanRange': 10000,
   'name': '',
@@ -299,3 +386,5 @@ const jsonData = [{
 
 
 ];
+
+const jsonData = hostListJson;