diff --git a/egovframe-template-simple-react-contribution/public/assets/images/icon_id.png b/egovframe-template-simple-react-contribution/public/assets/images/icon_id.png
new file mode 100644
index 0000000..848563a
Binary files /dev/null and b/egovframe-template-simple-react-contribution/public/assets/images/icon_id.png differ
diff --git a/egovframe-template-simple-react-contribution/public/assets/images/icon_pw.png b/egovframe-template-simple-react-contribution/public/assets/images/icon_pw.png
new file mode 100644
index 0000000..0512257
Binary files /dev/null and b/egovframe-template-simple-react-contribution/public/assets/images/icon_pw.png differ
diff --git a/egovframe-template-simple-react-contribution/src/css/layout.css b/egovframe-template-simple-react-contribution/src/css/layout.css
index 28a03f0..2453556 100644
--- a/egovframe-template-simple-react-contribution/src/css/layout.css
+++ b/egovframe-template-simple-react-contribution/src/css/layout.css
@@ -78,7 +78,7 @@ body {min-width: 1400px;}
 .user_info_m {display: none;}
 
 
-.container {min-height: calc(100vh - 300px);}
+.container {min-height: calc(100vh - 400px);}
 .c_wrap { margin: 0 auto;}      /* removed by lim      width: 1400px;  padding: 0 50px; */
 .c_wrap .layout {display: table; width: 100%; table-layout: fixed; padding-bottom: 20px;}       /* added by lim   padding-bottom: 20px; */
 
@@ -93,7 +93,7 @@ body {min-width: 1400px;}
 .c_wrap .layout .nav ul li a:hover::after {content: ""; display: block; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 9px; height: 15px; background: url(css/images/ico_arrow_r_gray_9x15.png) no-repeat;}
 .c_wrap .layout .nav ul li a.cur {color: #222; font-weight: 700;}
 
-.c_wrap .layout .contents {display: table-cell; width: auto; padding: 0 0 50px 30px; vertical-align: top;} /* changed by lim   padding: 0 0 120px 70px; */
+.c_wrap .layout .contents {display: table-cell; width: auto; vertical-align: top;} /* changed by lim   padding: 0 0 120px 70px; */
 
 
 /* location */
diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index 5a6ecf6..41c57a6 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -1,20 +1,27 @@
 @charset "utf-8";
 
 .Plogin {padding-bottom: 100px;}
-.Plogin h1 {color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;}
+.Plogin h1 {color: #222; font-size: 30px; font-weight: 600; text-align: center; padding-top: 30px;}
 .Plogin .txt {margin-top: 43px; color: #666; font-size: 20px; line-height: 30px; text-align: center;}
-.Plogin .login_box {position: relative; width: 690px; margin: 54px auto 0; padding: 70px 95px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
+.Plogin .login_box {position: relative; width: 690px; margin: 54px auto 0; padding: 30px 50px ; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
 .Plogin .login_box .group {display: block; width: 320px;}
 .Plogin .login_box input[type=text],
-.Plogin .login_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}
+.Plogin .login_box input[type=password] {height: 50px; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
+/*.Plogin .login_box input[type=text],*/
+/*.Plogin .login_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}*/
 .Plogin .login_box .group input + input {margin-top: 18px;}
 .Plogin .login_box input[type=text]:-ms-input-placeholder,
 .Plogin .login_box input[type=password]:-ms-input-placeholder {color: #aaa; opacity: 1;}
-.Plogin .login_box button {display: block; position: absolute; left: 435px; top: 70px; width: 160px; height: 110px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 500; text-align: center; line-height: 110px; background: #169bd5;}
-.Plogin .login_box button span {display: block; position: relative; height: 100%;}
+.Plogin .login_box button {width: 100%; height: 50px; font-size: 15px;}
+.Plogin .login_box a {font-size: 15px;}
+/*.Plogin .login_box button {display: block; width: 160px; height: 110px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 500; text-align: center; line-height: 110px; background: #169bd5;}*/
+/*.Plogin .login_box button span {display: block; position: relative; height: 100%;}*/
+.Plogin .login_box .line_t {height: 15px; border-bottom: 1px solid #D6D6D6; }
+.Plogin .login_box .line_b {height: 15px; border-top: 1px solid #C2C2C2; }
 .Plogin .login_box .chk {margin-top: 20px;}
-.Plogin .login_box .chk em {display: inline-block; height: 30px; margin-left: 40px; color: #666; font-size: 16px;}
-.Plogin .login_box .chk label {display: inline-block; height: 30px; color: #666; font-size: 16px;}
+.Plogin .login_box .chk em {display: inline-block; height: 30px; color: #666; font-size: 15px;}
+.Plogin .login_box .chk em:nth-child(2) {padding: 0 10px;}
+.Plogin .login_box .chk label {display: inline-block; height: 30px; color: #666; font-size: 15px;}
 .Plogin .list {margin-top: 44px; padding: 0 360px;}
 .Plogin .list li {position: relative; padding-left: 15px; color: #666; font-size: 16px; line-height: 26px;}
 .Plogin .list li::before {content: ""; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: #666;}
diff --git a/egovframe-template-simple-react-contribution/src/pages/login/EgovLogin.jsx b/egovframe-template-simple-react-contribution/src/pages/login/EgovLogin.jsx
index 3fe6b90..2e24093 100644
--- a/egovframe-template-simple-react-contribution/src/pages/login/EgovLogin.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/login/EgovLogin.jsx
@@ -21,12 +21,12 @@ function EgovLogin(props) {
         <div className="container">
             <div className="c_wrap">
                 {/* <!-- Location --> */}
-                <div className="location">
-                    <ul>
-                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
-                        <li>로그인</li>
-                    </ul>
-                </div>
+                {/*<div className="location">*/}
+                {/*    <ul>*/}
+                {/*        <li><Link to={URL.MAIN} className="home" >Home</Link></li>*/}
+                {/*        <li>로그인</li>*/}
+                {/*    </ul>*/}
+                {/*</div>*/}
                 {/* <!--// Location --> */}
 
                 <div className="layout">
diff --git a/egovframe-template-simple-react-contribution/src/pages/login/EgovLoginContent.jsx b/egovframe-template-simple-react-contribution/src/pages/login/EgovLoginContent.jsx
index 86b35fb..9dec67b 100644
--- a/egovframe-template-simple-react-contribution/src/pages/login/EgovLoginContent.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/login/EgovLoginContent.jsx
@@ -131,40 +131,46 @@ function EgovLoginContent(props) {
                 {/* <!-- 본문 --> */}
                 <div className="Plogin">
                     <h1>로그인</h1>
-                    <p className="txt">전자정부표준프레임워크 경량환경 홈페이지 로그인 페이지입니다.<br />로그인을 하시면 모든 서비스를 제한없이 이용하실 수 있습니다.</p>
-
                     <div className="login_box">
                         <fieldset>
                             <legend>로그인</legend>
-                            <span className="group">
-                                    <input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}
-                                           onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
-                                    <input type="password" name="" title="비밀번호" placeholder="비밀번호"
-                                           onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
-                                </span>
+                            <div className="input-group">
+                                <span className="input-group-text"><img src="/assets/images/icon_id.png" /></span>
+                                <input type="text" className="form-control shadow-none" title="아이디" placeholder="아이디" value={userInfo?.username}
+                                 onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />
+                            </div>
+                            <div className="input-group mt-3">
+                                <span className="input-group-text"><img src="/assets/images/icon_pw.png" /></span>
+                                <input type="password" className="form-control shadow-none" title="비밀번호" placeholder="비밀번호"
+                                       onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />
+                            </div>
+                            {/*<span className="group">*/}
+                                {/*<input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.username}*/}
+                                {/*       onChange={e => setUserInfo({ ...userInfo, username: e.target.value })} />*/}
+                                {/*<input type="password" name="" title="비밀번호" placeholder="비밀번호"*/}
+                                {/*       onChange={e => setUserInfo({ ...userInfo, password: e.target.value })} />*/}
+                            {/*</span>*/}
                             <Row className="chk justify-content-between">
                                 <Col xs={3}>
-                                    <Form.Check inline label={"ID 저장"} id={"saveid"} name={""} checked={saveIDFlag} onChange={handleSaveIDFlag}/>
+                                    <Form.Check inline label={"아이디 저장"} id={"saveid"} name={""} checked={saveIDFlag} onChange={handleSaveIDFlag}/>
 
                                     {/*<label className="f_chk" htmlFor="saveid" ref={checkRef}>
                                         <input type="checkbox" name="" id="saveid" onChange={handleSaveIDFlag} checked={saveIDFlag}/> <em>ID저장</em>
                                     </label>*/}
                                 </Col>
                                 <Col xs={"auto"}>
-                                    <em className="clickable" onClick={idFindModal}>ID 찾기</em>
-                                    <em className="clickable" onClick={pwFindModal}>PW 찾기</em>
-                                    <Link to={URL.JOIN}><em>회원가입</em></Link>
+                                    <em className="clickable" onClick={idFindModal}>아이디 찾기</em>
+                                    <em> | </em>
+                                    <em className="clickable" onClick={pwFindModal}>비밀번호 찾기</em>
+                                    {/*<Link to={URL.JOIN}><em>회원가입</em></Link>*/}
                                 </Col>
                             </Row>
-                            <button type="button" onClick={submitFormHandler}><span>LOGIN</span></button>
+                            <button type="button" onClick={submitFormHandler} className="btn btn-22498E btn-lg">로그인</button>
+                            <div className="line_t"></div>
+                            <div className="line_b"></div>
+                            <Link to={URL.JOIN} className="btn btn-outline-secondary btn-lg w-100">회원가입</Link>
                         </fieldset>
                     </div>
-
-                    <ul className="list">
-                        <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.</li>
-                        <li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
-                            변경하셔서 사용하는 것이 좋습니다.</li>
-                    </ul>
                 </div>
             </div>
             <Modal show={findModalState} onHide={handleClose}>