diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index ef7cf997..2ccd2066 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -186,6 +186,7 @@
 
 .col-form-label-sm.text-start, .col-sm-11.form-control-sm, .col-sm-10.form-control-sm{
   border: 1px solid rgba(var(--bs-secondary-rgb))!important;
+  text-align: left;
 }
 
 
@@ -201,3 +202,61 @@
 .bg-light.text-center{
   background-color: #deebff78!important;
 }
+
+html,body {height: 100%;font-family: 'Noto Sans KR';font-weight:400;font-size:14px;color:#333;}
+body {display: flex;flex-direction: column;text-align: center;margin: 0;}
+html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0px;padding:0px;border:0px}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
+legend {position:absolute;font-size:0px;line-height:0px;text-indent:-9999em;overflow:hidden}
+input, button {margin:0px;padding:0px;border-radius:0; /*-webkit-appearance:none;*/background:none;}
+button, input[type=submit] {cursor:pointer}
+input[type=text], input[type=password], input[type=image], button {-webkit-appearance:none}
+textarea, select,button {font-style: normal; -webkit-appearance:none;}
+a {color:inherit;text-decoration:none}
+a:visited {color:inherit;text-decoration:none}
+a,img,input, a:active, a:focus {outline:none;}
+ul,li,dl,dt,dd {padding:0px;margin:0px;list-style:none;box-sizing:border-box;}
+img {margin:0px;padding:0px;}
+div {margin:0px;padding:0px;box-sizing:border-box;}
+
+
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
+/*font-family: 'Noto Sans KR' font-family: 'Nanum Gothic' font-family: 'Noto Serif KR',*/
+@font-face {font-family: 'GmarketSansBold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight: normal;font-style: normal;}
+@font-face {font-family: 'GmarketSansMedium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: normal;font-style: normal;}
+@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('image/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;}
+.index_warp li {float:left;height:470px;box-sizing:border-box;padding:20px}
+.index_warp li:nth-child(1) {width:420px;}
+.index_warp li:nth-child(1) div{width:100%;height:100%;border-radius:10px;background-image: linear-gradient(120deg, #012f82 0%, #001a61 100%);text-align:center;padding-top:calc(50% - 115px);box-sizing:border-box;}
+.index_warp li:nth-child(2) {width:380px;text-align:left;color:#757575;padding:20px 55px 0px}
+.index_warp li:nth-child(2) img {margin:20px auto 0px;display:block;}
+.index_warp li:nth-child(2) h3 {clear:both;width:100%;font-family: 'GmarketSansMedium';color:#001a61;font-size:16px;text-align:left;display:block;padding:0px;margin:40px 0px 0px 0px;}
+.index_warp li:nth-child(2) h4 {clear:both;width:100%;font-family: 'GmarketSansLight';color:#8b91aa;font-size:16px;text-align:left;display:block;padding:0px;margin:5px 0px 30px 0px;}
+.index_warp li:nth-child(2) .join {float:left;width:100px;height:26px;line-height:24px;border:1px solid #99accd;border-radius:4px;font-size:13px;text-align:center;color:#8b91aa;transition: background 0.5s ease-in-out;}
+.index_warp li:nth-child(2) .join:hover {background:#99accd;color:#fff;cursor:pointer;}
+.index_warp li:nth-child(2) .find {float:right;width:150px;height:26px;line-height:24px;border:1px solid #99accd;border-radius:4px;font-size:13px;text-align:center;color:#8b91aa;transition: background 0.5s ease-in-out;}
+.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('image/log_icon1.png') 15px 5px no-repeat;}
+.form_pw {background:#fff url('image/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;}
+
+.boardHeader {
+  text-align: left;
+  margin-bottom: 10px;
+}
+
+.h4 {
+  text-align: left;
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/img/log_icon1.png b/src/main/resources/static/img/log_icon1.png
new file mode 100644
index 00000000..c073aedf
Binary files /dev/null and b/src/main/resources/static/img/log_icon1.png differ
diff --git a/src/main/resources/static/img/log_icon2.png b/src/main/resources/static/img/log_icon2.png
new file mode 100644
index 00000000..0c60d820
Binary files /dev/null and b/src/main/resources/static/img/log_icon2.png differ
diff --git a/src/main/resources/static/img/logo1.png b/src/main/resources/static/img/logo1.png
new file mode 100644
index 00000000..a6c09fc5
Binary files /dev/null and b/src/main/resources/static/img/logo1.png differ
diff --git a/src/main/resources/static/img/logo_big.png b/src/main/resources/static/img/logo_big.png
new file mode 100644
index 00000000..f10aabc2
Binary files /dev/null and b/src/main/resources/static/img/logo_big.png differ
diff --git a/src/main/resources/static/img/main_bg.png b/src/main/resources/static/img/main_bg.png
new file mode 100644
index 00000000..454c48a8
Binary files /dev/null and b/src/main/resources/static/img/main_bg.png differ
diff --git a/src/main/resources/templates/login/login_back.html b/src/main/resources/templates/login/login_back.html
new file mode 100644
index 00000000..0cc6b6e0
--- /dev/null
+++ b/src/main/resources/templates/login/login_back.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout/layout}">
+<th:block layout:fragment="css">
+  <link rel="stylesheet" th:href="@{/css/login/login.css}">
+</th:block>
+<th:block layout:fragment="script">
+  <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>
+    <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>
+      <!-- 로그인 시 아이디의 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>
+    </form>
+  </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/publicBoard/board/boardPage.html b/src/main/resources/templates/publicBoard/board/boardPage.html
index 1cad231a..216ea1b7 100644
--- a/src/main/resources/templates/publicBoard/board/boardPage.html
+++ b/src/main/resources/templates/publicBoard/board/boardPage.html
@@ -9,7 +9,7 @@
 </th:block>
 <div layout:fragment="content">
   <main>
-    <h4>게시판</h4>
+    <h4 class="boardHeader">■ 게시판</h4>
     <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
     <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
     <div class="row mx-0">
diff --git a/src/main/resources/templates/publicBoard/notice/noticePage.html b/src/main/resources/templates/publicBoard/notice/noticePage.html
index 2d199e2c..8892cbf9 100644
--- a/src/main/resources/templates/publicBoard/notice/noticePage.html
+++ b/src/main/resources/templates/publicBoard/notice/noticePage.html
@@ -9,7 +9,7 @@
 </th:block>
 <div layout:fragment="content">
   <main>
-    <h5><i class="bi bi-square-fill"></i> 공지사항</h5>
+    <h4 class="boardHeader"> ■ 공지사항</h4>
     <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
     <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
     <div class="row mx-0">
diff --git a/src/main/resources/templates/publicBoard/qna/qnaPage.html b/src/main/resources/templates/publicBoard/qna/qnaPage.html
index 3c3cdeb1..0675d5d5 100644
--- a/src/main/resources/templates/publicBoard/qna/qnaPage.html
+++ b/src/main/resources/templates/publicBoard/qna/qnaPage.html
@@ -10,7 +10,7 @@
 </th:block>
 <div layout:fragment="content">
   <main>
-    <h4>QnA</h4>
+    <h4 class="boardHeader">■ QnA</h4>
     <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
     <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
     <div class="row mx-0">
diff --git a/src/main/resources/templates/publicBoard/reference/referencePage.html b/src/main/resources/templates/publicBoard/reference/referencePage.html
index 4626eea5..91d25e18 100644
--- a/src/main/resources/templates/publicBoard/reference/referencePage.html
+++ b/src/main/resources/templates/publicBoard/reference/referencePage.html
@@ -9,7 +9,7 @@
 </th:block>
 <div layout:fragment="content">
   <main>
-    <h4>자료실</h4>
+    <h4 class="boardHeader">■ 자료실</h4>
     <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
     <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
     <div class="row mx-0">
diff --git a/src/main/resources/templates/publicBoard/reference/referenceViewModal.html b/src/main/resources/templates/publicBoard/reference/referenceViewModal.html
index 69eb65eb..57714dab 100644
--- a/src/main/resources/templates/publicBoard/reference/referenceViewModal.html
+++ b/src/main/resources/templates/publicBoard/reference/referenceViewModal.html
@@ -41,7 +41,7 @@
         <hr class="my-1">
         <label for="content" class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label>
         <div class="col-sm-11 form-control-sm">
-          <div id="content" th:utext="${info.content}"></div>
+          <div id="content"  th:utext="${info.content}"></div>
         </div>
       </div>
     </div>