diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index fff8a5d..3d14ab8 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
-import { DetailContainer } from './commons/DetailContainer';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -16,12 +15,11 @@ 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}/>
+      <Container fluid>
+        <ProbeBasicInfo probe={this.props.probe} />
+        <TargetTable />
+      </Container>
     );
   }
 }
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index 976176b..dba2358 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Table, Header, Container } from 'semantic-ui-react';
 import { ProbeDetails } from './ProbeDetails';
-
+import { ListContainer } from './commons/ListContainer';
 
 export class Probes extends React.Component<any, any> {
 
@@ -80,12 +80,10 @@ export class Probes extends React.Component<any, any> {
 
   render() {
     if (this.state.isDetail) {
-      return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
-    } 
-
-    return (
+      return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
+    }
+    let probeList =
       <Container fluid>
-        <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
           <Table.Header>
             <Table.Row>
@@ -109,7 +107,10 @@ export class Probes extends React.Component<any, any> {
             ))}
           </Table.Body>
         </Table>
-      </Container>
+      </Container>;
+
+    return (
+      <ListContainer contents={probeList}/>
     );
   }
 }
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index 7135813..0773432 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -23,11 +23,15 @@ export class TargetDetails extends React.Component<any, any> {
 
     const items = [
       { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
-      { name: 'Sensors', child: <Sensors probe={this.props.probe}/> },
+      { name: 'Sensors', child: <Sensors probe={this.props.probe} /> },
     ];
 
     return (
-      <DetailContainer panes={items}/>
+      // <DetailContainer panes={items}/>
+      <Container>
+        <TargetBasicInfo probe={this.props.probe} />
+        <Sensors probe={this.props.probe} />
+      </Container>
     );
   }
 }
@@ -55,7 +59,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Name</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -64,7 +68,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Type</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ????
             </Table.Cell>
@@ -73,7 +77,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Sensor count</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -82,7 +86,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Created at</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
diff --git a/src/ts/containers/test/commons/ListContainer.tsx b/src/ts/containers/test/commons/ListContainer.tsx
new file mode 100644
index 0000000..b6a199a
--- /dev/null
+++ b/src/ts/containers/test/commons/ListContainer.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Grid } from 'semantic-ui-react';
+
+export class ListContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    return (
+      <Grid>
+        <Grid.Column width={4} textAlign='center' color='grey'>
+          CHART AREA
+        </Grid.Column>
+        <Grid.Column stretched width={12} >
+          {this.showContents()}
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/commons/SideBarContainer.tsx b/src/ts/containers/test/commons/SideBarContainer.tsx
new file mode 100644
index 0000000..a293064
--- /dev/null
+++ b/src/ts/containers/test/commons/SideBarContainer.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Sidebar, Segment } from 'semantic-ui-react';
+
+export class SideBarContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    return (
+        <Sidebar.Pushable as={Segment}>
+          <Sidebar
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={true}
+            icon='labeled'
+            vertical
+            inverted
+          >
+          test contents
+          </Sidebar>  
+        </Sidebar.Pushable>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
index da75f89..6b20f1e 100644
--- a/src/ts/containers/test/layout/TitleBar.tsx
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -9,20 +9,19 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
-  handleMenu(idx: number) {
-    alert(idx);
-  }
-
   render() {
     let subMenus = [
       {
         "name": "Menu1",
+        "href": "#/test2"
       },
       {
         "name": "Menu2",
+        "href": "#/test3"
       },
       {
         "name": "Menu3",
+        "href": "#/test4"
       },
     ];
     return (
@@ -43,7 +42,7 @@ export class TitleBar extends React.Component<any, any> {
           <Grid.Column width='13'>
             <Menu secondary borderless>
               {subMenus.map((menu: any, index: number) => (
-                <Menu.Item name={menu.name} key={index} onClick={this.handleMenu.bind(this, index)}/>
+                <Menu.Item key={index} name={menu.name} href={menu.href} />
               ))}
             </Menu>
           </Grid.Column>