diff --git a/package.json b/package.json
index 30e5d2a..3f4379d 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react": "^15.5.4",
     "react-dom": "15.5.4",
     "react-router-dom": "^4.1.1",
-    "react-tap-event-plugin": "^2.0.1"
+    "react-tap-event-plugin": "^2.0.1",
+    "semantic-ui-react": "^0.70.0"
   }
 }
diff --git a/src/ts/Routes.tsx b/src/ts/Routes.tsx
index e2bfe85..2f8ab0e 100644
--- a/src/ts/Routes.tsx
+++ b/src/ts/Routes.tsx
@@ -8,9 +8,8 @@ import { SignIn } from './containers/test/SignIn';
 import { PWChange } from './containers/test/PWChange';
 import { ProbeDown } from './containers/test/ProbeDown';
 import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
-
-
 import { Components } from './containers/test/Components';
+import { Layout } from './containers/test/layout/Layout'
 
 
 export class Routes extends React.Component<any, any> {
@@ -18,6 +17,7 @@ export class Routes extends React.Component<any, any> {
     return (
       <div>
         <h1>React Redux sample</h1>
+        <li><Link to='/layout' >Layout</Link></li>
         <li><Link to='/test' >TopBar</Link></li>
         <li><Link to='/test2' >Signup</Link></li>
         <li><Link to='/test3' >SignIn</Link></li>
@@ -29,6 +29,7 @@ export class Routes extends React.Component<any, any> {
 
 
         <Switch>
+          <Route exact path='/layout' component={Layout} />
           <Route exact path='/test' component={TopBar} />
           <Route exact path='/test2' component={SignUp} />
           <Route exact path='/test3' component={SignIn} />
diff --git a/src/ts/containers/test/Components.tsx b/src/ts/containers/test/Components.tsx
index 2ed62ea..da1d183 100644
--- a/src/ts/containers/test/Components.tsx
+++ b/src/ts/containers/test/Components.tsx
@@ -7,12 +7,6 @@ import { Targets } from './Targets';
 
 import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
 
-const panes = [
-  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
-  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
-  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
-];
-
 
 export class Components extends React.Component<any, any> {
 
@@ -29,41 +23,17 @@ export class Components extends React.Component<any, any> {
     });
   }
 
-  showContent() {
-    switch(this.state.no) {
-      case 0: {
-        return <Probes/>;
-      }
-      case 1: {
-        return <NoauthProbes/>;
-      }
-      case 2: {
-        return <SensorConfiguration/>;
-      }
-      case 3: {
-        return <Targets/>;
-      }
-      default: {
-      }
-    }
-  }
-
   render() {
 
+    const panes = [
+      { menuItem: 'Probes', render: () => <Tab.Pane attached={false}><Probes /></Tab.Pane> },
+      { menuItem: 'Noauth Probes', render: () => <Tab.Pane attached={false}><NoauthProbes /></Tab.Pane> },
+      { menuItem: 'Sensor Configuration', render: () => <Tab.Pane attached={false}><SensorConfiguration /></Tab.Pane> },
+      { menuItem: 'Targets', render: () => <Tab.Pane attached={false}><Targets /></Tab.Pane> },
+    ];
+
     return (
-      <div style={{margin:'20px'}}>
-        {/*<Tab panes={panes} />*/}
-        
-        <Button.Group>
-          <Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
-          <Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
-          <Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
-          <Button onClick={this.handleButton.bind(this, 3)}>Target list</Button>
-        </Button.Group>
-        <div style={{margin:'20px'}}>
-          {this.showContent()}
-        </div>
-      </div>
+      <Tab menu={{ pointing: true }} panes={panes} />
     );
   }
 }
diff --git a/src/ts/containers/test/SensorConfiguration.tsx b/src/ts/containers/test/SensorConfiguration.tsx
index 29af4e7..3d03960 100644
--- a/src/ts/containers/test/SensorConfiguration.tsx
+++ b/src/ts/containers/test/SensorConfiguration.tsx
@@ -167,7 +167,7 @@ export class CrawlerSelector extends React.Component<any, any> {
         key: crawler.id,
         text: crawler.name,
         value: crawler.name,
-        icon: 'windows',
+        icon: 'check', //or close?
       };
       crawlerOptions.push(option);
     }
diff --git a/src/ts/containers/test/SignIn.tsx b/src/ts/containers/test/SignIn.tsx
index 9531a06..4e59f8b 100644
--- a/src/ts/containers/test/SignIn.tsx
+++ b/src/ts/containers/test/SignIn.tsx
@@ -1,6 +1,6 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input,
+  Icon, Label, Input, InputOnChangeData,
   Select, Button, Header, Modal
 } from 'semantic-ui-react'
 
@@ -15,32 +15,57 @@ export class SignIn extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
-    
+
 
     this.state = {
       forgotPopup: false,
+      sendComPopup: false,
+      email: '',
+      pass: '',
     };
 
 
   }
-forgotPopupOpen = () => this.setState({ forgotPopup: true });
-  forgotPopupClose = () => this.setState({ forgotPopup: false });
+  forgotPopupOpen = () => this.setState({ forgotPopup: true });
+  PopupClose = () => this.setState({ forgotPopup: false, sendComPopup: false });
+  sendComOpen = () => {
+    this.setState({
+      forgotPopup: false,
+      sendComPopup: true,
 
+    });
+  }
+
+  onSignIn = () => {
+    console.log(this.state);
+  }
 
   render() {
 
 
     return (
       <div>
-        <Label>  Email  </Label>
-        <Input placeholder='Email' />
+
+        <Input label='Email ' placeholder='Email' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ email: data.value });
+          }} />
         <br />
 
-        <Label>  Password  </Label>
-        <Input placeholder='Password' type='password' />
+        <Input label='Password ' placeholder='Password' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ pass: data.value });
+          }} />
         <br />
         <Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
-        <Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
+        <br />
+
+        <Button onClick={this.onSignIn}>    Sign In  </Button>
+        <Button href='/#/test2'>    Sign Up  </Button>
+
+
+
+        <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
           <Modal.Header>Change your password Enter email address.</Modal.Header>
           <Modal.Content >
             <Label>  Email  </Label>
@@ -48,16 +73,25 @@ forgotPopupOpen = () => this.setState({ forgotPopup: true });
 
           </Modal.Content>
           <Modal.Actions>
-            <Button basic color='blue'  >              Submit      </Button>
-            <Button onClick={this.forgotPopupClose}>              Cancel      </Button>
+            <Button onClick={this.sendComOpen} basic color='blue'  >              Submit      </Button>
+            <Button onClick={this.PopupClose}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+
+        <Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
+          <Modal.Header>Send Complete</Modal.Header>
+          <Modal.Content>
+            <Modal.Description>
+              <Header>비밀번호 변경이 신청 되었습니다.</Header>
+              <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={this.PopupClose}>              확인      </Button>
           </Modal.Actions>
         </Modal>
         <br />
 
-        <Button>    Sign In  </Button>
-        <Button href='/#/test2'>    Sign Up  </Button>
-
-
 
       </div>
     );
diff --git a/src/ts/containers/test/SignUp.tsx b/src/ts/containers/test/SignUp.tsx
index 9b8f4d4..602ee2c 100644
--- a/src/ts/containers/test/SignUp.tsx
+++ b/src/ts/containers/test/SignUp.tsx
@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
-  Icon, Label, Input,
-  Select, Button
+  Icon, Label, Input, InputOnChangeData,
+  Select, Button, Dropdown
 } from 'semantic-ui-react'
 
 
@@ -20,6 +20,25 @@ export class SignUp extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
+    this.state = {
+      email: '',
+      name: '',
+      pass: '',
+      passCon: '',
+      company: '',
+      phone: '',
+      country: '',
+    };
+
+  }
+
+
+  onSubmit = () => {
+    console.log(this.state)
+
+  }
+
+  onChange = (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
 
   }
 
@@ -29,31 +48,45 @@ export class SignUp extends React.Component<any, any> {
 
     return (
       <div>
-        <Label>  Email  </Label>
-        <Input placeholder='Email' />
-        <br/>
-        <Label>  User Name  </Label>
-        <Input placeholder='Name' />
-        <br/>
-        <Label>  Password  </Label>
-        <Input placeholder='Password' type='password' />
-        <br/>
-        <Label>  Password Confirm  </Label>
-        <Input placeholder='Password Confirm' type='password' />
-        <br/>
-        <Label>  Company Name  </Label>
-        <Input placeholder='Company' />
-        <br/>
-        <Label>  Phone  </Label>
-        <Select placeholder='Select your country' options={options} />
-        <Input placeholder='Phone' />
-        <br/>
-        <Button>
-    Sign Up
-  </Button>
-  <Button>
-    Cancel
-  </Button>
+
+        <Input label='Email ' value={this.state.email} placeholder='Email' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ email: data.value });
+          }} />
+        <br />
+
+        <Input label='User Name ' placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ name: data.value });
+        }} />
+        <br />
+
+        <Input label='Password ' placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ pass: data.value });
+        }} />
+        <br />
+
+        <Input label='Password Confirm ' placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ passCon: data.value });
+        }} />
+        <br />
+
+        <Input label='Company Name ' placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ company: data.value });
+        }} />
+        <br />
+
+        <Input >
+          <Label> Phone </Label>
+          <Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ country: data.value });
+          }} />
+          <Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ phone: data.value });
+          }} />
+        </Input>
+        <br />
+        <Button onClick={this.onSubmit}>   Sign Up  </Button>
+        <Button>    Cancel  </Button>
       </div>
     );
   }
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
index 1418d1d..4b197cd 100644
--- a/src/ts/containers/test/Targets.tsx
+++ b/src/ts/containers/test/Targets.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Grid, Segment, Button, Container } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, Container, Modal } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetails';
 
 export class Targets extends React.Component<any, any> {
@@ -7,6 +7,7 @@ export class Targets extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      openAddTarget: false,
     };
   }
 
@@ -15,7 +16,9 @@ export class Targets extends React.Component<any, any> {
   }
 
   handleAddTarget() {
-    alert('Add a Target');
+    this.setState({
+      openAddTarget: true,
+    });
   }
 
   render() {
@@ -29,12 +32,26 @@ export class Targets extends React.Component<any, any> {
             </Grid.Column>
             <Grid.Column>
               <TargetTable />
-              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
+              <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}/>
+
+        <TargetDetails target={this.state.selected} />
+        <Modal
+          open={this.state.openAddTarget}
+        >
+          <Modal.Header>
+            Adding a Target
+          </Modal.Header>
+          <Modal.Content>
+            <p>contents</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button negative onClick={ ()=> this.setState({openAddTarget:false}) }>Cancel</Button>
+            <Button positive labelPosition='right' icon='checkmark' content='Done' />
+          </Modal.Actions>
+        </Modal>
       </Container>
     );
   }
diff --git a/src/ts/containers/test/layout/Footer.tsx b/src/ts/containers/test/layout/Footer.tsx
new file mode 100644
index 0000000..a8e3f49
--- /dev/null
+++ b/src/ts/containers/test/layout/Footer.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Container } from 'semantic-ui-react';
+
+export class Footer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  render() {
+    return (
+      <Container>
+        Footer area
+      </Container>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/layout/Header.tsx b/src/ts/containers/test/layout/Header.tsx
new file mode 100644
index 0000000..bdb111b
--- /dev/null
+++ b/src/ts/containers/test/layout/Header.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Container } from 'semantic-ui-react';
+import { TopBar } from '../TopBar';
+
+export class Header extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  render() {
+    return (
+      <TopBar/>
+    );
+  }
+}
+
+
+
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
new file mode 100644
index 0000000..50317ed
--- /dev/null
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Container } from 'semantic-ui-react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+
+export class Layout extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <Container>
+        <Header />
+        <Container>
+          contents area
+        </Container>
+        <Footer />
+      </Container>
+    );
+  }
+}
+
+
+