diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 8483445..89707e1 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -706,7 +706,8 @@ background-size: 75% auto;
 }  */
 
 /*datepicker-custom*/
-.datepicker-custom {display: flex;align-items:center;}
+.datepicker-custom {display: flex;align-items:center;cursor: pointer;}
+.datepicker-custom input{cursor: pointer;}
 .datepicker-custom .react-datepicker{background:#161d31;border-color:#161d31;color:#b4b7bd;font-size:0.875rem;font-weight:400;}
 .datepicker-custom .react-datepicker__header{background:transparent;border-color:transparent;color:#b4b7bd;font-size: 1.1rem;font-weight:300;}
 .datepicker-custom .react-datepicker__year-read-view--down-arrow,
@@ -753,3 +754,15 @@ background-size: 75% auto;
 		margin-top:0px;
 	}
 }
+
+.login .info-search .pal-card{width:95%;}
+.login-form.info-search form{padding:0;}
+.info-search .input-btn button{width:100%; padding: 0.786rem 1.5rem;}
+.full-btn-2n{display:flex;justify-content:space-between;}
+.full-btn-2n button{width:49%;}
+.timeInput{position:relative;}
+.timeInput .time{position:absolute;right:16px;top:50%;transform: translateY(-50%);font-size:14px;}
+.user-search-id{font-weight:500;}
+.user-search-modal .modal-body{font-size:1.125rem;padding:30px 20px}
+.user-search-modal .modal-body .etc-txt{display:block;font-weight:500;margin-bottom:1rem}
+.user-search-link button{font-size:0.875rem;margin-top:20px}
\ No newline at end of file
diff --git a/src/views/design/DesignPassword.js b/src/views/design/DesignPassword.js
new file mode 100644
index 0000000..5c9e795
--- /dev/null
+++ b/src/views/design/DesignPassword.js
@@ -0,0 +1,204 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button,
+  Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+  import { User, Info, CreditCard, Lock, Check, X } from 'react-feather'
+
+import loginImg from '../../assets/images/login01.png';
+import '../../assets/css/custom.css';
+
+const DesignPassword = () => {
+    // ** States & Vars
+    const [activeTab, setActiveTab] = useState('1'),
+    store = useSelector(state => state.users),
+    dispatch = useDispatch(),
+    { id } = useParams()
+
+    // ** Function to toggle tabs
+    const toggle = tab => setActiveTab(tab)
+    const [centeredModal, setCenteredModal] = useState(false)
+    const [centeredModal02, setCenteredModal02] = useState(false)
+  return (
+    <>
+      <div className='login'>
+        <div className='login-logo'>Drone Control System</div>
+        <div className='login-img'>
+          <img src={loginImg} />
+        </div>
+        <div className='login-form info-search'>
+          <div className='pal-card'>
+            <div className='card-body-tab-menu'>
+              <Nav pills>
+                <NavItem>
+                  <NavLink active={activeTab === '1'} onClick={() => toggle('1')}>
+                    <User size={14} />
+                    <span className='align-middle d-none d-sm-block'>아이디 찾기</span>
+                  </NavLink>
+                </NavItem>
+                <NavItem>
+                  <NavLink active={activeTab === '2'} onClick={() => toggle('2')}>
+                    <Lock size={14} />
+                    <span className='align-middle d-none d-sm-block'>비밀번호 찾기</span>
+                  </NavLink>
+                </NavItem>
+              </Nav>
+            </div>
+            <Row className='app-user-edit'>
+              <Col sm='12'>
+                <Card>
+                  <CardBody className='card-body-tab-cont'>
+                    <TabContent activeTab={activeTab}>
+                      <TabPane tabId='1'>
+                      <Form>
+                        <FormGroup className='form-label-group position-relative has-icon-left'>
+                        <InputGroup className=''>
+                          <InputGroupAddon addonType='prepend'>
+                            <InputGroupText>
+                              <User size={14} />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input placeholder='이름' />
+                        </InputGroup>
+                        </FormGroup>
+                        <FormGroup>
+                          <div className='input-btn'>
+                            <Col md='3' xs='12'>
+                              <Input type='select' placeholder='+(국가번호)'>
+                                <option>+82</option>
+                                <option>21111</option>                       
+                              </Input>
+                            </Col>
+                            <Col md='6' xs='12'>
+                              <Input type='number' placeholder='휴대폰번호'/>
+                           </Col>       
+                           <Col md='3' xs='12'>
+                             <Button color='primary' type='button'>인증번호 발송</Button>
+                           </Col>       
+                          </div>
+                        </FormGroup>
+                        <FormGroup>
+                          <div className='input-btn'>
+                            <Col md='9' xs='12' className='timeInput'>
+                              <Input type='number' placeholder='인증번호 입력'/>
+                              <span className='time'>남은시간 : 3:00</span>
+                           </Col>       
+                           <Col md='3' xs='12'>
+                             <Button color='primary' type='button'>인증번호 확인</Button>
+                           </Col>       
+                          </div>
+                        </FormGroup>
+                        <FormGroup>
+                        <div className='full-btn-2n vertically-centered-modal'>
+                          <Button color='secondary' type='button'>취소</Button>
+                          <Button color='primary' type='button' onClick={() => setCenteredModal(!centeredModal)} >확인</Button>
+                            <Modal isOpen={centeredModal} toggle={() => setCenteredModal(!centeredModal)} className='modal-dialog-centered user-search-modal'>
+                              <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>아이디 확인</ModalHeader>
+                                <ModalBody>
+                                  회원님의 아이디는<br/><span className='user-search-id'>TEST123123</span> 입니다.
+                                </ModalBody>
+                                <ModalFooter>
+                                  <Button color='primary' onClick={() => setCenteredModal(!centeredModal)}>
+                                    로그인
+                                  </Button>{' '}
+                                </ModalFooter>
+                            </Modal>
+                        </div>
+                        </FormGroup>
+                      </Form>
+                      </TabPane>
+                      <TabPane tabId='2'>
+                      <Form>
+                        <FormGroup className='form-label-group position-relative has-icon-left'>
+                        <InputGroup className=''>
+                          <InputGroupAddon addonType='prepend'>
+                            <InputGroupText>
+                              <User size={14} />
+                            </InputGroupText>
+                          </InputGroupAddon>
+                          <Input placeholder='아이디' />
+                        </InputGroup>
+                        </FormGroup>
+                        <FormGroup>
+                          <div className='input-btn'>
+                            <Col md='3' xs='12'>
+                              <Input type='select' placeholder='+(국가번호)'>
+                                <option>+82</option>
+                                <option>21111</option>                       
+                              </Input>
+                            </Col>
+                            <Col md='6' xs='12'>
+                              <Input type='number' placeholder='휴대폰번호'/>
+                           </Col>       
+                           <Col md='3' xs='12'>
+                             <Button color='primary' type='button'>인증번호 발송</Button>
+                           </Col>       
+                          </div>
+                        </FormGroup>
+                        <FormGroup>
+                          <div className='input-btn time-span'>
+                            <Col md='9' xs='12' className='timeInput'>
+                              <Input type='number' placeholder='인증번호 입력'/>
+                              <span className='time'>남은시간 : 3:00</span>
+                             </Col>       
+                           <Col md='3' xs='12'>
+                             <Button color='primary' type='button'>인증번호 확인</Button>
+                           </Col>       
+                          </div>
+                        </FormGroup>
+                        <FormGroup>
+                        <div className='full-btn-2n vertically-centered-modal'>
+                          <Button color='secondary' type='button'>취소</Button>
+                          <Button color='primary' type='button' onClick={() => setCenteredModal02(!centeredModal02)} >확인</Button>
+                            <Modal isOpen={centeredModal02} toggle={() => setCenteredModal02(!centeredModal02)} className='modal-dialog-centered user-search-modal'>
+                              <ModalHeader toggle={() => setCenteredModal02(!centeredModal02)}>비밀번호 확인</ModalHeader>
+                                <ModalBody>
+                                  <span class="etc-txt">새로운 비밀번호로 변경해주세요.</span>
+                                  <FormGroup className='form-label-group position-relative has-icon-left'>
+                                    <InputGroup>
+                                      <InputGroupAddon addonType='prepend'>
+                                        <InputGroupText>
+                                          <Lock size={14} />
+                                        </InputGroupText>
+                                      </InputGroupAddon>
+                                      <Input placeholder='새로운 비밀번호' type='password'/>
+                                    </InputGroup>
+                                    </FormGroup>
+                                    <FormGroup className='form-label-group position-relative has-icon-left mb-0'>
+                                    <InputGroup>
+                                      <InputGroupAddon addonType='prepend'>
+                                        <InputGroupText>
+                                          <Lock size={14} />
+                                        </InputGroupText>
+                                      </InputGroupAddon>
+                                      <Input placeholder='새로운 비밀번호 확인' type='password'/>
+                                    </InputGroup>
+                                  </FormGroup>
+                                </ModalBody>
+                                <ModalFooter>
+                                  <Button color='primary' onClick={() => setCenteredModal02(!centeredModal02)}>
+                                    저장
+                                  </Button>
+                                </ModalFooter>
+                            </Modal>
+                        </div>
+                        </FormGroup>
+                      </Form>                  
+                      </TabPane>
+                    </TabContent>
+                  </CardBody>
+                </Card>
+              </Col>
+            </Row>
+          </div>
+          <div className='user-search-link'>
+            <Button.Ripple color='flat-warning'>회원가입 바로가기</Button.Ripple>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DesignPassword;