diff --git a/src/main/resources/static/css/login/login.css b/src/main/resources/static/css/login/login.css
index 170655d1..dab51b4f 100644
--- a/src/main/resources/static/css/login/login.css
+++ b/src/main/resources/static/css/login/login.css
@@ -59,7 +59,7 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
 @font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight: normal;font-style: normal;}
 @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*font-family: 'NanumSquare';300,400,700,800*/
 
-.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('static/img/main_bg.png') center no-repeat;background-size:cover;}
+.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('../../img/main_bg.png') center no-repeat;background-size:cover;}
 .index_warp h1 {display:block;margin:8.5% auto 0px;font-family: 'GmarketSansBold';color:#fff;font-size:60px;}
 .index_warp h2 {clear:both;display:block;margin:0px auto 0px;font-family: 'GmarketSansLight';color:#fff;font-size:18px;}
 .index_warp ul {width:800px;border-radius:10px;background-color:#fff;margin:50px auto 0px;overflow:hidden;}
@@ -76,9 +76,24 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
 .index_warp li:nth-child(2) .find:hover {background:#99accd;color:#fff;cursor:pointer;}
 
 .form_01 {width:100%;height:30px;padding-left:57px;font-size:14px;margin:0px auto 10px;border:0px;border:1px solid #d3d7e4;display:inline-block;border-radius:3px;color:#333;box-sizing:border-box;}
-.form_log {background:#fff url('img/log_icon1.png') 15px 5px no-repeat;}
-.form_pw {background:#fff url('img/log_icon2.png') 15px 5px no-repeat;}
+.form_log {background:#fff url('../../img/log_icon1.png') 15px 5px no-repeat;}
+.form_pw {background:#fff url('../../img/log_icon2.png') 15px 5px no-repeat;}
 .form_02 {clear:both;width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;border:1px solid #d3d7e4;display:inline-block;position:relative;top:2px;}
 
 .btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#012f82;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:40px 0px 10px;transition: background 0.5s ease-in-out;}
 .btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;}
+
+
+.form-login{
+  width: 100%;
+  margin: auto;
+  position: absolute;
+  z-index: 200;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.login-Fail {
+  font-size: 25px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/login/login.js b/src/main/resources/static/js/login/login.js
index 56ea2c53..8c0c75ee 100644
--- a/src/main/resources/static/js/login/login.js
+++ b/src/main/resources/static/js/login/login.js
@@ -1,3 +1,8 @@
+$(document).on('click', '#userSginModal', function (){
+  alert("##");
+  $("#userInsertModal").modal('show');
+})
+
 $(document).on('click', '#dicCodeSearchBtn', function (){
   const dicCode = $("#dicCode").val();
   if(dicCode!==''){
diff --git a/src/main/resources/templates/login/login.html b/src/main/resources/templates/login/login.html
index 0cc6b6e0..908f3d5a 100644
--- a/src/main/resources/templates/login/login.html
+++ b/src/main/resources/templates/login/login.html
@@ -9,65 +9,79 @@
   <script type="text/javascript" th:src="@{/js/login/login.js}"></script>
 </th:block>
 <div layout:fragment="content">
-  <img id="img02" th:src="@{/img/img02.jpg}" class="w-100 h-100" alt="배경2">
-  <div id="form-signin" class="form-signin text-center bg-white">
-    <!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
-    <div class="row">
-      <h2>반갑습니다</h2>
-      <p>이곳은 외사정보시스템입니다</p>
-    </div>
+
+  <div class="index_warp form-login">
     <form action="/login" method="post">
       <!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
       <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
       <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-      <p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
+      <p th:if="${loginError}" class="error text-warning login-Fail">로그인에 실패하였습니다.</p>
       <!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
       <!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
-      <div class="row">
-        <label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>
-        <div class="col-sm-8 mb-2">
-          <input type="text" class="form-control form-control-sm" id="username" name="username">
-        </div>
-        <label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>
-        <div class="col-sm-8 mb-2">
-          <input type="password" class="form-control form-control-sm" id="password" name="password">
-        </div>
-      </div>
-      <!--<div class="checkbox mb-3">
-        <label>
-          <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
-        </label>
-      </div>-->
-      <button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>
-      <div class="row my-2 justify-content-between">
-        <div class="col-auto">
-          <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
-        </div>
-        <div class="col-auto">
-          <a href="#">아이디/비밀번호 찾기</a>
-        </div>
-      </div>
+      <h1>사이버외사정보시스템</h1>
+      <h2>FOREIGN AFFAIRS INTELLIGENCE CYBER SYSTEM</h2>
+      <ul>
+        <li>
+          <div><img src="img/logo_big.png" alt="해양경찰청"></div>
+        </li>
+        <li>
+          <img src="img/logo.png" alt="해양경찰청">
+          <h3>FOREIGN AFFAIRS DIVISION</h3>
+          <h4>LOGIN</h4>
+
+          <input type="text" name="username" id="username" placeholder="아이디" onfocus="this.placeholder=''"
+                 onblur="this.placeholder='아이디'" class="form_01 form_log">
+          <input type="password" name="password" id="password" placeholder="비밀번호" onfocus="this.placeholder=''"
+                 onblur="this.placeholder='비밀번호'" class="form_01 form_pw">
+
+          <!-- <input name="idcchk" type="checkbox" id="idcchk" class="form_02"> 아이디저장-->
+          <!--<div class="checkbox mb-3">
+                  <label>
+                    <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
+                  </label>
+                </div>-->
+          <input type="submit" name="login" id="login" value="로그인" class="btn_login">
+
+
+          <!--<div class="join">
+            <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
+          </div>-->
+          <div class="row my-2 justify-content-between">
+
+          <div class="col-auto">
+            <a href="#"  id="userSginModal">회원가입</a>
+          </div>
+          </div>
+
+
+          <a href="#">
+            <div class="find">아이디/패스워드찾기</div>
+          </a>
+        </li>
+      </ul>
     </form>
   </div>
+</div>
 
-  <div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userInsertModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-      <div class="modal-content " id="userInsertModalContent">
-        <div class="modal-header bg-dark">
-          <h5 class="modal-title text-white" id="userInsertModalLabel">사용자 신청</h5>
-          <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <div class="mb-3 mt-3 row">
-            <label for="dicCode" class="col-sm-2 col-form-label col-form-label-sm text-center ">공무원식별번호</label>
-            <div class="col-sm-3">
-              <input type="text" class="form-control form-control-sm" id="dicCode" name="dicCode" autocomplete="off">
-            </div>
-            <button type="button" class="btn btn-sm btn-outline-primary col-sm-1" id="dicCodeSearchBtn">검색</button>
+<div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userEditModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content " id="userInsertModalContent">
+      <div class="modal-header bg-dark">
+        <h5 class="modal-title text-white" id="userInsertModalLabel">사용자 신청</h5>
+        <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3 mt-3 row">
+          <label for="dicCode" class="col-sm-2 col-form-label col-form-label-sm text-center ">공무원식별번호</label>
+          <div class="col-sm-3">
+            <input type="text" class="form-control form-control-sm" id="dicCode" name="dicCode" autocomplete="off">
           </div>
+          <button type="button" class="btn btn-sm btn-outline-primary col-sm-1" id="dicCodeSearchBtn">검색</button>
         </div>
       </div>
     </div>
   </div>
 </div>
+
+</div>
 </html>
\ No newline at end of file