diff --git a/src/ts/containers/test/layout/Header.tsx b/src/ts/containers/test/layout/Header.tsx
index fba00ce..930e903 100644
--- a/src/ts/containers/test/layout/Header.tsx
+++ b/src/ts/containers/test/layout/Header.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Container } from 'semantic-ui-react';
 import { TopBar } from '../TopBar';
+import { LogoBar } from './LogoBar';
+import { TitleBar } from './TitleBar';
 
 export class Header extends React.Component<any, any> {
 
@@ -12,7 +14,11 @@ export class Header extends React.Component<any, any> {
 
   render() {
     return (
-      <TopBar onSidebar={this.props.onSidebar}/>
+      <Container fluid>
+        <LogoBar />
+        <TitleBar />
+      </Container>
+      // <TopBar onSidebar={this.props.onSidebar}/>
     );
   }
 }
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index f965e1e..9de6227 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -14,12 +14,12 @@ export class Layout extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
-      notification_visible:false,
+      notification_visible: false,
     };
   }
 
   onSidebar = () => {
-    this.setState({notification_visible:!this.state.notification_visible})
+    this.setState({ notification_visible: !this.state.notification_visible });
   }
 
   render() {
@@ -27,66 +27,73 @@ export class Layout extends React.Component<any, any> {
       <Container fluid>
         <Grid>
           <Grid.Row>
-            <Grid.Column>
+            <Grid.Column width='2'>
               Left menu
             </Grid.Column>
-            <Grid.Column>
+            <Grid.Column width='14'>
               <Grid.Row>
                 <Grid.Column>
-                  Logo
+                  <Header />
                 </Grid.Column>
                 <Grid.Column>
-                  Page Content
+                  <Router history={history} >
+                    <Routes />
+                  </Router>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Column>
+                  <Footer />
                 </Grid.Column>
               </Grid.Row>
             </Grid.Column>
           </Grid.Row>
         </Grid>
-        <Header onSidebar={this.onSidebar.bind(this)}/>
-        <Sidebar.Pushable as={Segment} vertical >
-          <Sidebar
-            as={Menu}
-            animation='overlay'
-            width='thin'
-            direction='right'
-            visible={this.state.notification_visible}
-            icon='labeled'
-            vertical
-            inverted
-          >
-            <Menu.Item name='home'>
-              Notification 1
+        {/* <Header onSidebar={this.onSidebar.bind(this)} />
+          <Sidebar.Pushable as={Segment} vertical >
+            <Sidebar
+              as={Menu}
+              animation='overlay'
+              width='thin'
+              direction='right'
+              visible={this.state.notification_visible}
+              icon='labeled'
+              vertical
+              inverted
+            >
+              <Menu.Item name='home'>
+                Notification 1
             </Menu.Item>
-            <Menu.Item name='gamepad'>
-              Notification 2
+              <Menu.Item name='gamepad'>
+                Notification 2
             </Menu.Item>
-          </Sidebar>
+            </Sidebar>
 
-          <Sidebar.Pusher >
-            <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
-              <Breadcrumb size='mini'>
-                <Breadcrumb.Section link>Home</Breadcrumb.Section>
-                <Breadcrumb.Divider icon='right angle' />
-                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-                <Breadcrumb.Divider icon='right angle' />
-                <Breadcrumb.Section active>Probe</Breadcrumb.Section>
-              </Breadcrumb>
-            </Container>
-
-            <Segment vertical>
-              <Container>
-                <Router history={history} >
-                  <Routes />
-                </Router>
+            <Sidebar.Pusher >
+              <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
+                <Breadcrumb size='mini'>
+                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section active>Probe</Breadcrumb.Section>
+                </Breadcrumb>
               </Container>
 
-              <Footer />
-            </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>
+              <Segment vertical>
+                <Container>
+                  <Router history={history} >
+                    <Routes />
+                  </Router>
+                </Container>
+
+                <Footer />
+              </Segment>
+            </Sidebar.Pusher>
+          </Sidebar.Pushable> */}
 
 
-      </Container>
+      </Container >
     );
   }
 }
diff --git a/src/ts/containers/test/layout/LogoBar.tsx b/src/ts/containers/test/layout/LogoBar.tsx
new file mode 100644
index 0000000..f1a5665
--- /dev/null
+++ b/src/ts/containers/test/layout/LogoBar.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Menu, Header } from 'semantic-ui-react';
+
+export class LogoBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleLogoClick = () => {
+    alert('handleLogoClick');
+  }
+
+  handleNotiClick = () => {
+    alert('handleNotiClick');
+  }
+
+  render() {
+    return (
+      <div>
+        <Menu borderless secondary >
+          <Menu.Item
+            name='logo'
+            onClick={this.handleLogoClick}
+          >
+            <Header as='h3' icon='stack overflow' content='overFlow' />
+          </Menu.Item>
+          <Menu.Item
+            position='right'
+            icon='bell outline'
+            onClick={this.handleNotiClick}
+          />
+        </Menu>
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/layout/TitleBar.tsx b/src/ts/containers/test/layout/TitleBar.tsx
new file mode 100644
index 0000000..9f3df64
--- /dev/null
+++ b/src/ts/containers/test/layout/TitleBar.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Breadcrumb, Header } from 'semantic-ui-react';
+
+export class TitleBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+
+  render() {
+    return (
+      <div>
+        <Header as='h3'>Page Title<Header.Subheader>
+          <Breadcrumb>
+            <Breadcrumb.Section link>Home</Breadcrumb.Section>
+            <Breadcrumb.Divider />
+            <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+            <Breadcrumb.Divider />
+            <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+          </Breadcrumb>
+        </Header.Subheader>
+        </Header>
+
+
+      </div>
+    );
+  }
+}
+
+
+
diff --git a/webpack.config.js b/webpack.config.js
index 09533ba..8d1f2dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,7 +25,7 @@ module.exports = {
         historyApiFallback: true,
         contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
         publicPath:  '/' ,// match the output `publicPath`
-        host: '192.168.1.230',
+        host: '192.168.1.105',
         port: 9091,
         stats: { 
             colors: true