diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index eb62e68..ac88c68 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
+import { DetailContainer } from './commons/DetailContainer';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -14,6 +15,25 @@ export class ProbeDetails extends React.Component<any, any> {
 
   }
 
+  render() {
+    const items = [
+      { name: 'Info', child: <ProbeBasicInfo probe={this.props.probe}/> },
+      { name: 'Targets', child: <TargetTable /> },
+    ];
+    return (
+      <DetailContainer panes={items}/>
+    );
+  }
+}
+
+export class ProbeBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
   handleStartStop(event: any, data: any) {
     console.log(event);
   }
@@ -22,7 +42,7 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   handleBack(event: any, data: any) {
-    console.log(data);
+    this.props.onBack();
   }
 
 
@@ -35,82 +55,63 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   render() {
-    let elem: any;
-    if (this.props.probe === null) {
-      elem = <div></div>;
-    } else {
-      elem =
-        <Segment.Group>
-          <Segment inverted color='grey'>
-          <h4>Probe Details</h4>
-          </Segment>
-          <Segment>
-            <Table celled={false} basic='very'>
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Domain</Header>
-                  </Table.Cell>
-                  <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Status</Header>
-                  </Table.Cell>
-                  <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Host IP</Header>
-                  </Table.Cell>
-                  <Table.Cell>????</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Host Name</Header>
-                  </Table.Cell>
-                  <Table.Cell>????</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Authorized at</Header>
-                  </Table.Cell>
-                  <Table.Cell>{this.props.probe.createDate}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>
-                    <Header size='small'>Description</Header>
-                  </Table.Cell>
-                  <Table.Cell>{this.props.probe.description}</Table.Cell>
-                </Table.Row>
-
-                <Table.Row>
-                  <Table.Cell colSpan='4'>
-                    <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()}
-
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-          </Segment>
-
-          <Segment inverted color='grey'>
-          <h4>Probe's Targets</h4>
-          </Segment>
-          <Segment>
-            <TargetTable probe={this.props.probe}/>
-          </Segment>
-        </Segment.Group>;
-    }
     return (
-      <div>
-        {elem}
-      </div>
+      <Segment.Group>
+        <Segment inverted color='grey'>
+          <h4>Probe Details</h4>
+        </Segment>
+        <Segment>
+          <Table celled={false} basic='very'>
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Domain</Header>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Status</Header>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Host IP</Header>
+                </Table.Cell>
+                <Table.Cell>????</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Host Name</Header>
+                </Table.Cell>
+                <Table.Cell>????</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Authorized at</Header>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+              </Table.Row>
+              <Table.Row>
+                <Table.Cell>
+                  <Header size='small'>Description</Header>
+                </Table.Cell>
+                <Table.Cell>{this.props.probe.description}</Table.Cell>
+              </Table.Row>
+
+              <Table.Row>
+                <Table.Cell colSpan='4'>
+                  <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
+                  <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+                  {this.showStartStopBtn()}
+
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Segment>
+      </Segment.Group>
     );
   }
-}
-
-
-
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index ce051aa..ac3b12b 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -11,6 +11,7 @@ export class Probes extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: null,
+      isDetail: false,
     };
   }
 
@@ -64,7 +65,7 @@ export class Probes extends React.Component<any, any> {
   }
 
   checkCellStatus(status: any): boolean {
-    if(status.name === 'STOPPED') {
+    if (status.name === 'STOPPED') {
       return true;
     }
     return false;
@@ -73,40 +74,39 @@ export class Probes extends React.Component<any, any> {
   handleSelect(selectedProbe: object) {
     this.setState({
       selected: selectedProbe,
+      isDetail: true,
     });
   }
 
   render() {
+    if (this.state.isDetail) {
+      return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
+    } 
 
     return (
-      <div>
-        <Table selectable striped>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
+      <Table selectable striped>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
+            <Table.HeaderCell textAlign={'center'}>Sensor Count</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 >todo. {probe.name}</Table.Cell>
-                <Table.Cell>todo. {probe.cidr}</Table.Cell>
-                <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)}  textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
-                <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
-                <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-        <div>
-          <ProbeDetails probe={this.state.selected} />
-        </div>
-      </div>
+        <Table.Body>
+          {this.data.map((probe: any, index: number) => (
+            <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
+              <Table.Cell >todo. {probe.name}</Table.Cell>
+              <Table.Cell>todo. {probe.cidr}</Table.Cell>
+              <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+              <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+              <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
     );
   }
 }
diff --git a/src/ts/containers/test/commons/DetailContainer.tsx b/src/ts/containers/test/commons/DetailContainer.tsx
new file mode 100644
index 0000000..50c6b16
--- /dev/null
+++ b/src/ts/containers/test/commons/DetailContainer.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Grid, Menu, Segment } from 'semantic-ui-react';
+
+export class DetailContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      active: 0,
+    };
+  }
+
+  showContents() {
+    return this.props.panes[this.state.active].child;
+  }
+
+  handleClick(index: number) {
+    this.setState({
+      active: index,
+    });
+  }
+
+  render() {
+    const activeItem = this.state.activeItem;
+
+    return (
+      <Grid>
+        <Grid.Column width={4} >
+          <Menu pointing secondary vertical >
+            {this.props.panes.map((pane: any, index: number) => (
+              <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
+            ))}
+          </Menu>
+        </Grid.Column>
+
+        <Grid.Column stretched width={12} >
+          <Segment basic>
+            {this.showContents()}
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
\ No newline at end of file