diff --git a/.gitignore b/.gitignore
index abdfecc..5b646ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -60,4 +60,5 @@ typings/
 dist/
 
 .idea/
-yarn.lock
\ No newline at end of file
+yarn.lock
+webpack.config.js
\ No newline at end of file
diff --git a/src/ts/containers/test/SignIn.tsx b/src/ts/containers/test/SignIn.tsx
index c44fd14..1644080 100644
--- a/src/ts/containers/test/SignIn.tsx
+++ b/src/ts/containers/test/SignIn.tsx
@@ -1,7 +1,7 @@
 import *as React from 'react'
 import {
   Icon, Label, Input, InputOnChangeData,
-  Select, Button, Header, Modal
+  Select, Button, Header, Modal, Grid, Container, Segment
 } from 'semantic-ui-react'
 
 
@@ -52,36 +52,65 @@ export class SignIn extends React.Component<any, any> {
 
 
     return (
-      <div>
-
-        <Input label='Email ' placeholder='Email' onChange={
-          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-            this.setState({ email: data.value });
-          }} />
-        <br />
-
-        <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>
-        <br />
-
-        <Button onClick={this.onSignIn}>    Sign In  </Button>
-        <Button href='/#/test2'>    Sign Up  </Button>
-
-
+      <Container>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Grid columns='equal'>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Email' onChange={
+                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ email: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Password' type='password' onChange={
+                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ pass: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column textAlign='right'>
+                    <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Button fluid primary onClick={this.onSignIn}>    Sign In  </Button>
+                  </Grid.Column>
+                  <Grid.Column>
+                    <Button fluid href='/#/test2'>    Sign Up  </Button>
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
 
         <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
-          <Modal.Header>Change your password Enter email address.</Modal.Header>
+          <Modal.Header>Change your password</Modal.Header>
           <Modal.Content >
-            <Label>  Email  </Label>
-            <Input placeholder='Email' />
-
+            Enter email address
+            <Grid>
+              <Grid.Column mobile={16} tablet={3} computer={4}>
+              </Grid.Column>
+              <Grid.Column mobile={16} tablet={10} computer={8}>
+               <Input fluid placeholder='Email' />
+              </Grid.Column>
+              <Grid.Column mobile={16} tablet={3} computer={4}>
+              </Grid.Column>
+            </Grid>
           </Modal.Content>
           <Modal.Actions>
-            <Button onClick={this.sendComOpen} basic color='blue'  >              Submit      </Button>
+            <Button primary onClick={this.sendComOpen}>              Submit      </Button>
             <Button onClick={this.PopupClose}>              Cancel      </Button>
           </Modal.Actions>
         </Modal>
@@ -95,13 +124,11 @@ export class SignIn extends React.Component<any, any> {
             </Modal.Description>
           </Modal.Content>
           <Modal.Actions>
-            <Button onClick={this.PopupClose}>              확인      </Button>
+            <Button primary onClick={this.PopupClose}>              Ok      </Button>
           </Modal.Actions>
         </Modal>
         <br />
-
-
-      </div>
+      </Container>
     );
   }
 
diff --git a/src/ts/containers/test/SignUp.tsx b/src/ts/containers/test/SignUp.tsx
index 602ee2c..36685b9 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, InputOnChangeData,
-  Select, Button, Dropdown
+  Select, Button, Dropdown, Grid, Container, Form
 } from 'semantic-ui-react'
 
 
@@ -47,47 +47,121 @@ export class SignUp extends React.Component<any, any> {
 
 
     return (
-      <div>
+      <Container>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Grid>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid value={this.state.email} placeholder='Email' onChange={
+                      (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                        this.setState({ email: data.value });
+                      }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ name: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ pass: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ passCon: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ company: data.value });
+                    }} />
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column>
+                    <Input fluid>
+                      <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>
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row style={{padding:'5'}}>
+                  <Grid.Column width='8'>
+                    <Button primary fluid onClick={this.onSubmit}>   Sign Up  </Button>
+                  </Grid.Column>
+                  <Grid.Column width='8'>
+                    <Button fluid>    Cancel  </Button>
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
 
-        <Input label='Email ' value={this.state.email} placeholder='Email' onChange={
-          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-            this.setState({ email: data.value });
-          }} />
-        <br />
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Form>
+                    <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+                      (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                        this.setState({ email: data.value });
+                      }} />
+                    <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ name: data.value });
+                    }} />
+                    <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ pass: data.value });
+                    }} />
+                    <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ passCon: data.value });
+                    }} />
+                    <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ company: data.value });
+                    }} />
+                    <Form.Group>
+                      <Form.Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                        this.setState({ country: data.value });
+                      }} />
+                      <Form.Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                        this.setState({ phone: data.value });
+                      }} 
+                      />
+                    </Form.Group>
+                    <Form.Group>
+                      <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>   Sign Up  </Button>
+                      <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+                    </Form.Group>
+              </Form>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
 
-        <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/webpack.config.js b/webpack.config.js
index 8d1f2dc..09533ba 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.105',
+        host: '192.168.1.230',
         port: 9091,
         stats: { 
             colors: true