diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index e4171b1..bf29304 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label } from 'semantic-ui-react';
-import { Targets } from './Targets';
+import { TargetTable } from './Targets';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -85,7 +85,7 @@ export class ProbeDetails extends React.Component<any, any> {
           <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
           {this.showStartStopBtn()}
 
-          <Targets/>
+          <TargetTable probe={this.props.probe}/>
         </div>;
     }
     return (
diff --git a/src/ts/containers/test/ProbeDown.tsx b/src/ts/containers/test/ProbeDown.tsx
index b201938..5019a9f 100644
--- a/src/ts/containers/test/ProbeDown.tsx
+++ b/src/ts/containers/test/ProbeDown.tsx
@@ -11,13 +11,13 @@ export interface Props {
 
 }
 
-const osNames = ["Windows","Debian","Ubuntu","Fedora"];
+const osNames = ["Windows","Debian","Ubuntu","Fedora", "CentOS"];
 
 export class ProbeDown extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
-  this.state = { activeItem: 'Windows' }
+  this.state = { activeItem: osNames[0] }
 
   
   }
@@ -35,10 +35,14 @@ const { activeItem } = this.state
        <Grid>
         <Grid.Column width={4}>
           <Menu fluid vertical tabular>
-            <Menu.Item name='Windows' active={activeItem === 'Windows'} onClick={this.handleItemClick} />
-            <Menu.Item name='Debian' active={activeItem === 'Debian'} onClick={this.handleItemClick} />
-            <Menu.Item name='Ubuntu' active={activeItem === 'Ubuntu'} onClick={this.handleItemClick} />
-            <Menu.Item name='Fedora' active={activeItem === 'Fedora'} onClick={this.handleItemClick} />
+            {osNames.map((os: string) => {
+                  return (
+                     <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+                  )
+            })}
+
+
+           
           </Menu>
         </Grid.Column>
         
diff --git a/src/ts/containers/test/Sensors.tsx b/src/ts/containers/test/Sensors.tsx
new file mode 100644
index 0000000..fdbd8d3
--- /dev/null
+++ b/src/ts/containers/test/Sensors.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Table, Button } from 'semantic-ui-react';
+
+
+export class Sensors extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "111",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "WMI",
+          "description": "WMI description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "222",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "SNMP",
+          "description": "SNMP description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "333",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "JMX",
+          "description": "JMX description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+    ];
+  }
+
+  handleSelect(selectedProbe: object) {
+    this.setState({
+      selected: selectedProbe,
+    });
+  }
+
+  checkCellStatus(status: any): boolean {
+    if (status.name === 'STOPPED') {
+      return true;
+    }
+    return false;
+  }
+
+  showStartStopBtn(status: any) {
+    if (status.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} />;
+    }
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+
+  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'}>Crawler</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
+              <Table.HeaderCell />
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((sensor: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, sensor)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>{sensor.metaSensorStatus.name}</Table.Cell>
+                <Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
+                <Table.Cell>{sensor.description}</Table.Cell>
+                <Table.Cell>to do</Table.Cell>
+                <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/SignIn.tsx b/src/ts/containers/test/SignIn.tsx
index 94176f9..9531a06 100644
--- a/src/ts/containers/test/SignIn.tsx
+++ b/src/ts/containers/test/SignIn.tsx
@@ -15,12 +15,16 @@ export class SignIn extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
+    
+
     this.state = {
       forgotPopup: false,
     };
 
 
   }
+forgotPopupOpen = () => this.setState({ forgotPopup: true });
+  forgotPopupClose = () => this.setState({ forgotPopup: false });
 
 
   render() {
@@ -35,7 +39,8 @@ export class SignIn extends React.Component<any, any> {
         <Label>  Password  </Label>
         <Input placeholder='Password' type='password' />
         <br />
-        <Modal trigger={<Button>Forgot Password</Button>}>
+        <Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
+        <Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
           <Modal.Header>Change your password Enter email address.</Modal.Header>
           <Modal.Content >
             <Label>  Email  </Label>
@@ -43,14 +48,14 @@ export class SignIn extends React.Component<any, any> {
 
           </Modal.Content>
           <Modal.Actions>
-            <Button basic color='blue' >              Submit      </Button>
-            <Button >              Cancel      </Button>
+            <Button basic color='blue'  >              Submit      </Button>
+            <Button onClick={this.forgotPopupClose}>              Cancel      </Button>
           </Modal.Actions>
         </Modal>
         <br />
 
         <Button>    Sign In  </Button>
-        <Button>    Sign Up  </Button>
+        <Button href='/#/test2'>    Sign Up  </Button>
 
 
 
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index 2cf7d30..325f730 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, Table, Label } from 'semantic-ui-react';
+import { Button, Table, Container } from 'semantic-ui-react';
+import { Sensors } from './Sensors';
 
 export class TargetDetails extends React.Component<any, any> {
 
@@ -9,11 +10,62 @@ export class TargetDetails extends React.Component<any, any> {
     };
   }
 
+  handleBack() {
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
   render() {
     return (
-      <div>
-        target details
-      </div>
+      <Container>
+        <Table celled={true}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                Name
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Type
+            </Table.Cell>
+              <Table.Cell>
+                ????
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Sensor count
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Created at
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+          </Table.Body>
+        </Table>
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+
+        <Sensors target={this.props.target} />
+
+      </Container >
     );
   }
 }
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
index 0f5e183..1418d1d 100644
--- a/src/ts/containers/test/Targets.tsx
+++ b/src/ts/containers/test/Targets.tsx
@@ -1,7 +1,47 @@
 import * as React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, Container } from 'semantic-ui-react';
+import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  handleAddTarget() {
+    alert('Add a Target');
+  }
+
+  render() {
+
+    return (
+      <Container>
+        <Grid columns={2}>
+          <Grid.Row>
+            <Grid.Column width='4'>
+              <Segment>SEARCH AREA</Segment>
+            </Grid.Column>
+            <Grid.Column>
+              <TargetTable />
+              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+          
+        <TargetDetails target={this.state.selected}/>
+      </Container>
+    );
+  }
+}
+
+
+export class TargetTable extends React.Component<any, any> {
   private data: any;
 
   constructor(props: any, context: any) {
@@ -56,7 +96,7 @@ export class Targets extends React.Component<any, any> {
   }
 
   render() {
-
+    console.log(this.props.probe);
     return (
       <Table celled selectable striped>
         <Table.Header>
diff --git a/src/ts/containers/test/TopBar.tsx b/src/ts/containers/test/TopBar.tsx
index dbaf348..38cf881 100644
--- a/src/ts/containers/test/TopBar.tsx
+++ b/src/ts/containers/test/TopBar.tsx
@@ -46,31 +46,20 @@ export class TopBar extends React.Component<any, any> {
     return (
       <div>
         <Menu>
-          <Menu.Item>           Home    </Menu.Item>
+          <Menu.Item href='//google.com' target='_blank'>           Home    </Menu.Item>
           <Dropdown text='Monitoring' pointing className='link item'>
             <Dropdown.Menu>
-              <Dropdown.Header>Monitoring</Dropdown.Header>
-              <Dropdown.Item>
-                <Icon name='dropdown' />
-                <span className='text'>Probe</span>
-                <Dropdown.Menu>
-                  <Dropdown.Header>Mens</Dropdown.Header>
-                  <Dropdown.Item>Shirts</Dropdown.Item>
-                  <Dropdown.Item>Pants</Dropdown.Item>
-                  <Dropdown.Item>Jeans</Dropdown.Item>
-                  <Dropdown.Item>Shoes</Dropdown.Item>
-                  <Dropdown.Divider />
-                  <Dropdown.Header>Womens</Dropdown.Header>
-                  <Dropdown.Item>Dresses</Dropdown.Item>
-                  <Dropdown.Item>Shoes</Dropdown.Item>
-                  <Dropdown.Item>Bags</Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown.Item>
+              <Dropdown.Item> Probe </Dropdown.Item>
               <Dropdown.Item>Sensors</Dropdown.Item>
-
             </Dropdown.Menu>
           </Dropdown>
-          <Menu.Item>            Infrastructure    </Menu.Item>
+          
+          <Dropdown text='Infrastructure' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Item> Maps </Dropdown.Item>
+              <Dropdown.Item>Targets</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
           <Menu.Item>            Dashboard    </Menu.Item>
           <Menu.Item>            Metrics    </Menu.Item>
           <Menu.Item>            Alert    </Menu.Item>
@@ -114,7 +103,7 @@ export class TopBar extends React.Component<any, any> {
             icon='labeled'
             vertical
             inverted
-            
+
           >
             <Menu.Item name='home'>
               <Icon name='home' />