diff --git a/src/ts/@overflow/member/react/components/Modify.tsx b/src/ts/@overflow/member/react/components/Modify.tsx
index 377f016..12e5c76 100644
--- a/src/ts/@overflow/member/react/components/Modify.tsx
+++ b/src/ts/@overflow/member/react/components/Modify.tsx
@@ -6,6 +6,8 @@ import {
   Button,
   Form,
   ButtonProps,
+  Grid,
+  Image,
 } from 'semantic-ui-react';
 import MemberStatus from '../../api/model/MemberStatus';
 
@@ -63,57 +65,84 @@ export class Modify extends React.Component<Props, State> {
     console.log(data);
   }
 
-  public render(): JSX.Element {
+  // public render(): JSX.Element {
 
+  //   let modifyElement = null;
+
+  //   if (this.props.member === null || this.props.member === undefined) {
+  //     return null;
+  //   }
+  //   modifyElement = <Form>
+  //     <Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' disabled/>
+  //     <Form.Input fluid placeholder='Name' defaultValue={this.props.member.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' defaultValue={this.props.member.companyName} onChange={
+  //       (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+  //         this.setState({ company: data.value });
+  //       }
+  //     }/>
+  //     {/* <Form.Select fluid  placeholder='Select your country' options={options} onChange={
+  //       (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+  //         this.setState({ country: data.value });
+  //       }
+  //     } /> */}
+  //     <Form.Input fluid placeholder='phone' defaultValue={this.props.member.phone} onChange={
+  //       (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+  //         this.setState({ phone: data.value });
+  //       }
+  //     } />
+  //     <Form.Group>
+  //       <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}>   Modify  </Button>
+  //       <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+  //     </Form.Group>
+  //   </Form>;
+  //   // if (this.props.member !== undefined && this.props.member.id > 0) {
+  //     // Todo Please check the member registration e-mail.
+  //     // this.props.onRedirectHome();
+  //   // } else {
+  //   return modifyElement;
+  //   // }
+
+  // }
+
+  public render(): JSX.Element {
     let modifyElement = null;
 
     if (this.props.member === null || this.props.member === undefined) {
       return null;
     }
-    modifyElement = <Form>
-      <Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' disabled/>
-      <Form.Input fluid placeholder='Name' defaultValue={this.props.member.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' defaultValue={this.props.member.companyName} onChange={
-        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-          this.setState({ company: data.value });
-        }
-      }/>
-      <Form.Select fluid  placeholder='Select your country' options={options} onChange={
-        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-          this.setState({ country: data.value });
-        }
-      } />
-      <Form.Input fluid placeholder='phone' defaultValue={this.props.member.phone} onChange={
-        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-          this.setState({ phone: data.value });
-        }
-      } />
-      <Form.Group>
-        <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}>   Modify  </Button>
-        <Button fluid style={{margin:'7'}}>    Cancel  </Button>
-      </Form.Group>
-    </Form>;
-    // if (this.props.member !== undefined && this.props.member.id > 0) {
-      // Todo Please check the member registration e-mail.
-      // this.props.onRedirectHome();
-    // } else {
-    return modifyElement;
-    // }
+    modifyElement = 
+      <Form>
+        <Grid>
+          <Grid.Column width={4}>
+            <Image src='../public/asset/image/overFlow_CI_blue_180.png'  />
+          </Grid.Column>
+          <Grid.Column width={12} >
+            <Form.Input fluid defaultValue={this.props.member.email} placeholder='Email'  />
+            <Form.Input fluid defaultValue={this.props.member.name} placeholder='Name'  />
+            <Form.Input fluid defaultValue={this.props.member.companyName} placeholder='CompanyName'  />
+            <Form.Input fluid defaultValue={this.props.member.phone} placeholder='Phone'  />
+          </Grid.Column>
+        </Grid>
 
+        <Form.Group>
+          <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}>   Save  </Button>
+        </Form.Group>
+      </Form>;
+    return modifyElement;
   }
 
   private modifyClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
diff --git a/src/ts/@overflow/member/react/components/SignIn.tsx b/src/ts/@overflow/member/react/components/SignIn.tsx
index 3c16b67..d737580 100644
--- a/src/ts/@overflow/member/react/components/SignIn.tsx
+++ b/src/ts/@overflow/member/react/components/SignIn.tsx
@@ -68,21 +68,23 @@ export class SignIn extends React.Component<Props, State> {
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ pass: data.value });
         }} />
-      <div style={{textAlign:'right'}}>
+      {/* <div style={{textAlign:'right'}}>
         <Button size='tiny' style={{background:'#fff'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
-      </div>
+      </div> */}
       <Form.Group>
         <Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }>    Sign In  </Button>
+      </Form.Group>
+      <Form.Group>
+        <Button fluid style={{margin:'7'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
         <Button fluid style={{margin:'7'}} href='/#/test2'>    Sign Up  </Button>
       </Form.Group>
 
       <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
-        <Modal.Header>Change your password</Modal.Header>
+        <Modal.Header>Reset your password</Modal.Header>
         <Modal.Content >
-          Enter email address
           <Grid centered>
             <Grid.Column mobile={14} tablet={10} computer={10}>
-              <Input fluid placeholder='Email' onChange={
+              <Input fluid placeholder='Please enter your email.' onChange={
                 (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
                   this.setState({ email: data.value });
                 }} />
@@ -90,21 +92,21 @@ export class SignIn extends React.Component<Props, State> {
           </Grid>
         </Modal.Content>
         <Modal.Actions>
-          <Button primary onClick={this._sendComOpen}>              Submit      </Button>
-          <Button onClick={this.PopupClose}>              Cancel      </Button>
+          <Button  fluid style={{margin:'7'}} primary onClick={this._sendComOpen}>              Send Email      </Button>
+          <Button  primary style={{margin:'7'}} onClick={this._sendComOpen}>             Sign In      </Button>
+          <Button  style={{margin:'7'}} 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.Header>Reset Password</Modal.Header>
         <Modal.Content>
           <Modal.Description>
-            <Header>비밀번호 변경이 신청 되었습니다.</Header>
-            <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
+            <p>Your password reset email has been sent if this email/username exists.</p>
           </Modal.Description>
         </Modal.Content>
         <Modal.Actions>
-          <Button primary onClick={this.PopupClose}>              Ok      </Button>
+          <Button primary onClick={this.PopupClose}>              Go Home      </Button>
         </Modal.Actions>
       </Modal>
     </Form>;
diff --git a/src/ts/@overflow/member/react/components/SignUp.tsx b/src/ts/@overflow/member/react/components/SignUp.tsx
index 504574e..e83d635 100644
--- a/src/ts/@overflow/member/react/components/SignUp.tsx
+++ b/src/ts/@overflow/member/react/components/SignUp.tsx
@@ -3,6 +3,7 @@ import Member from '../../api/model/Member';
 
 import {
   InputOnChangeData,
+  CheckboxProps,
   Button,
   Form,
   ButtonProps,
@@ -28,12 +29,13 @@ export interface State {
   company: string;
   phone: string;
   country: string;
+  checked: boolean;
 }
 
-const options = [
-  { key: 'southkorea', value: '82', text: 'South Korea(82)' },
-  { key: 'unitedstates', value: '1', text: 'United States(1)' },
-];
+// const options = [
+//   { key: 'southkorea', value: '82', text: 'South Korea(82)' },
+//   { key: 'unitedstates', value: '1', text: 'United States(1)' },
+// ];
 
 
 export class SignUp extends React.Component<Props, State> {
@@ -48,6 +50,7 @@ export class SignUp extends React.Component<Props, State> {
       company: null,
       phone: null,
       country: null,
+      checked: false,
     };
 
   }
@@ -61,6 +64,7 @@ export class SignUp extends React.Component<Props, State> {
 
     let signupElement = <Form>
       <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+        // Todo Email Check
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ email: data.value });
         }} />
@@ -69,12 +73,14 @@ export class SignUp extends React.Component<Props, State> {
           this.setState({ name: data.value });
         }
       }/>
-      <Form.Input fluid placeholder='Password' type='password' onChange={
+      <Form.Input fluid placeholder='Password' prompt='dfsdfs' type='password' onChange={
+        // Todo Password Complexity Check & Length Check (8 characters or more and 50 characters or less)
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ pass: data.value });
         }
       } />
       <Form.Input fluid placeholder='Password Confirm' type='password' onChange={
+        // Todo Password Equal Check
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ passCon: data.value });
         }
@@ -84,19 +90,33 @@ export class SignUp extends React.Component<Props, State> {
           this.setState({ company: data.value });
         }
       }/>
-      <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
+      {/* <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ country: data.value });
         }
-      } />
+      } /> */}
       <Form.Input fluid placeholder='phone' onChange={
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
           this.setState({ phone: data.value });
         }
       } />
+      <Form.Checkbox label={<label>I accept <a href = '/' target='_blank'> Term </a>and
+        <a href='/' target='_blank'>privacy</a></label>} onClick={
+        (event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => {
+          if (this.state.checked) {
+            this.setState({ checked: false });
+          } else {
+            this.setState({ checked: true });
+          }
+        }
+      } />
+
       <Form.Group>
-        <Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}>   Sign Up  </Button>
-        <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+        <Button primary fluid style={{margin:'2'}} onClick={this.signUpClick}>   Join Now </Button>
+      </Form.Group>
+      <Form.Group>
+        <Button fluid style={{margin:'5'}}>    Cancel  </Button>
+        <Button primary fluid style={{margin:'5'}} onClick={this.signinClick}>   Sign In  </Button>
       </Form.Group>
     </Form>;
     if (this.props.member !== undefined && this.props.member.id > 0) {
@@ -108,6 +128,10 @@ export class SignUp extends React.Component<Props, State> {
 
   }
 
+  private signinClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
+    return;
+  }
+
   private signUpClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
 
     let member:Member = {};