diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css
index cc22cd4..5a6ecf6 100644
--- a/egovframe-template-simple-react-contribution/src/css/page.css
+++ b/egovframe-template-simple-react-contribution/src/css/page.css
@@ -20,19 +20,21 @@
 .Plogin .list li::before {content: ""; display: block; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background: #666;}
 .Plogin .list li + li {margin-top: 5px;}
 
-.Pjoin h1 {color: #222; font-size: 48px; font-weight: 500; letter-spacing: -2px; line-height: 48px; text-align: center;}
-.Pjoin .join_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;}
+.Pjoin h1 {color: #222; font-size: 30px; font-weight: 600; text-align: center; padding-top: 30px;}
+.Pjoin .join_box {width: 690px; margin: 40px auto 0; padding: 30px 50px; border: 1px solid #dde2e5; border-radius: 25px; box-shadow: 3px 4px 5px #ccc;}
 .Pjoin .join_box input[type=text],
 .Pjoin .join_box input[type=password] {width: 100%; height: 46px; padding: 0 20px; border: 0; border-radius: 8px; color: #666; font-size: 16px; background: #f5f5f5;}
 .Pjoin .join_box .group input + input {margin-top: 18px;}
 .Pjoin .join_box input[type=text]:-ms-input-placeholder,
 .Pjoin .join_box input[type=password]:-ms-input-placeholder {color: #aaa; opacity: 1;}
+.Pjoin .join_box label {padding-top: 20px; font-weight: 700;}
 .Pjoin .join_box .chk {margin-top: 20px;}
 .Pjoin .join_box .chk em {display: inline-block; height: 30px; margin-left: 40px; color: #666; font-size: 16px;}
-.Pjoin .join_box button {width: 500px;height: 50px;border-radius: 8px;color: #fff;font-size: 20px;font-weight: 500;text-align: center;line-height: 50px;background: #169bd5;}
-.Pjoin .join_box button:disabled {background: rgba(22, 155, 213, 0.4); cursor: auto;}
-.Pjoin .join_box button span {display: block; position: relative; height: 100%;}
-.Pjoin .join_box .list li {position: relative; padding-left: 15px; color: #666; font-size: 16px; line-height: 26px;}
+.Pjoin .join_box button {width: 50%; padding-top: 10px; }
+/*.Pjoin .join_box button {width: 500px;height: 50px;border-radius: 8px;color: #fff;font-size: 20px;font-weight: 500;text-align: center;line-height: 50px;background: #169bd5;}*/
+/*.Pjoin .join_box button:disabled {background: rgba(22, 155, 213, 0.4); cursor: auto;}*/
+/*.Pjoin .join_box button span {display: block; position: relative; height: 100%;}*/
+.Pjoin .join_box .list li {padding-left: 15px; color: #666; font-size: 13px; line-height: 23px;}
 .Pjoin .join_box .list li + li {margin-top: 5px;}
 
 
diff --git a/egovframe-template-simple-react-contribution/src/pages/login/join/InfoShareChk.jsx b/egovframe-template-simple-react-contribution/src/pages/login/join/InfoShareChk.jsx
index 140969f..51977b5 100644
--- a/egovframe-template-simple-react-contribution/src/pages/login/join/InfoShareChk.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/login/join/InfoShareChk.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 function InfoShareChk() {
     return (
         <ul className="list">
-            <li>건설기준 포털시스템(KCSC)은 회원님께 원활한 서비스 제공을 위해 최소한의 개인정보를 수집하고 있으며, 각 목적 별로 수집하는 개인정보를 다음과 같이 정하고 있습니다.</li>
+            <li>건설기준 포털시스템(KCSC)은 회원님께 원활한 서비스 제공을 위해 최소한의 개인정보를 수집하고 있으며,<br /> 각 목적 별로 수집하는 개인정보를 다음과 같이 정하고 있습니다.</li>
             <li className="no_dot">&nbsp;</li>
             <li className="no_dot">◌ 수집하는 개인정보의 항목</li>
             <li className="no_dot">&nbsp;&nbsp;&nbsp;수집항목: 아이디(ID), 비밀번호, 이메일(e-mail)</li>
@@ -13,7 +13,7 @@ function InfoShareChk() {
             <li className="no_dot">&nbsp;&nbsp;&nbsp;회원가입정보 : 탈퇴시까지</li>
             <li className="no_dot">◌ 정보주체의 동의 거부 권리 및 그에 따른 불이익 사항</li>
             <li className="no_dot">&nbsp;</li>
-            <li>귀하는 건설기준 포털시스템(KCSC) 이용을 위한 개인정보의 수집·이용 동의를 거부할 권리가 있습니다. 다만, 개인정보의 수집·이용 동의를 거부할 경우 건설기준 포털시스템(KCSC) 일부 기능에 대한 서비스 이용에 제한을 받으실 수 있습니다.</li>
+            <li>귀하는 건설기준 포털시스템(KCSC) 이용을 위한 개인정보의 수집·이용 동의를 거부할 권리가 있습니다. <br />다만, 개인정보의 수집·이용 동의를 거부할 경우 건설기준 포털시스템(KCSC) 일부 기능에 대한 서비스 이용에 제한을 받으실 수 있습니다.</li>
         </ul>
     )
 }
diff --git a/egovframe-template-simple-react-contribution/src/pages/login/join/Join.jsx b/egovframe-template-simple-react-contribution/src/pages/login/join/Join.jsx
index 26d0118..2753cc9 100644
--- a/egovframe-template-simple-react-contribution/src/pages/login/join/Join.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/login/join/Join.jsx
@@ -71,13 +71,13 @@ function Join(props) {
         <div className="container">
             <div className="c_wrap">
                 {/* <!-- Location --> */}
-                <div className="location">
-                    <ul>
-                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
-                        <li><Link to={URL.LOGIN}>로그인</Link></li>
-                        <li>회원가입</li>
-                    </ul>
-                </div>
+                {/*<div className="location">*/}
+                {/*    <ul>*/}
+                {/*        <li><Link to={URL.MAIN} className="home" >Home</Link></li>*/}
+                {/*        <li><Link to={URL.LOGIN}>로그인</Link></li>*/}
+                {/*        <li>회원가입</li>*/}
+                {/*    </ul>*/}
+                {/*</div>*/}
                 {/* <!--// Location --> */}
 
                 <div className="layout">
@@ -89,33 +89,39 @@ function Join(props) {
                                 {infoShareChk?(
                                     <form name="" method="" action="" >
                                         <span className="group">
+                                            <label for="idInput">아이디</label>
                                             <input type="text" name="" title="아이디" placeholder="아이디" value={userInfo?.id}
                                                    onChange={e => setUserInfo({ ...userInfo, id: e.target.value })} />
+                                            <label for="passwordInput">비밀번호</label>
                                             <input type="password" name="" id="passwordInput" title="비밀번호" placeholder="비밀번호"
                                                    onChange={e => setUserInfo({ ...userInfo, password: e.target.value })}/>
                                             <input type="password" name="" id="passwordChkInput" title="비밀번호 확인" placeholder="비밀번호 확인"
                                                    onChange={e => setUserInfo({ ...userInfo, passwordChk: e.target.value })}/>
+                                            <ul className="list">
+                                                <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.
+                                                {/*<br />쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로*/}
+                                                {/*    변경하셔서 사용하는 것이 좋습니다.*/}
+                                                </li>
+                                            </ul>
+                                            <label for="userNmInput">이름</label>
                                             <input type="text" name="" title="이름" placeholder="이름" value={userInfo?.userNm}
                                                    onChange={e => setUserInfo({ ...userInfo, userNm: e.target.value })} />
+                                            <label for="emailInput">이메일</label>
                                             <input type="text" name="" title="이메일" placeholder="이메일" value={userInfo?.email}
                                                    onChange={e => setUserInfo({ ...userInfo, email: e.target.value })} />
+                                            <label for="phoneNumInput">연락처</label>
                                             <input type="text" name="" title="연락처" placeholder="연락처" value={userInfo?.phoneNum}
                                                    onChange={e => setUserInfo({ ...userInfo, phoneNum: e.target.value })} />
                                         </span>
-                                        <ul className="list">
-                                            <li>비밀번호는 6~12자의 영문 대/소문자, 숫자, 특수문자를 혼합해서 사용하실 수 있습니다.</li>
-                                            <li>쉬운 비밀번호나 자주 쓰는 사이트의 비밀번호가 같을 경우, 도용되기 쉬우므로 주기적으로
-                                                변경하셔서 사용하는 것이 좋습니다.</li>
-                                        </ul>
-                                        <button type="button" onClick={submitFormHandler}><span>회원가입</span></button>
+                                        <div className="pt-3 d-flex justify-content-center"><button type="button" onClick={submitFormHandler} className="btn btn-22498E">회원가입</button></div>
                                     </form>
                                 ):(
-                                    <Row className="justify-content-end">
+                                    <Row className="justify-content-center">
                                         <Col xs={12}>
                                             <InfoShareChk/>
                                         </Col>
-                                        <Col xs={"auto"}>
-                                            <button onClick={infoShareBtn}>동의하기</button>
+                                        <Col xs={12} className="pt-3 d-flex justify-content-center">
+                                            <button type="button" onClick={infoShareBtn} className="btn btn-22498E">동의하기</button>
                                         </Col>
                                     </Row>
                                 )}