diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
index 6069b44..2a44a4b 100644
--- a/src/main/resources/static/css/custom.css
+++ b/src/main/resources/static/css/custom.css
@@ -1,6 +1,9 @@
 /* 이 파일은 커스텀 파일입니다*/
 body {
-    font-family: 'NotoSansKR', sans-serif;
+    font-family: 'NotoSansKR', sans-serif !important;
+    /*font-family: 'Nanum Gothic', sans-serif !important;*/
+    /*font-family: 'NanumBarunGothic', sans-serif !important;*/
+    font-weight: bold;
 }
 
 a {
@@ -8,6 +11,10 @@ a {
     text-decoration: none !important;
 }
 
+h1 {
+    font-weight: bold;
+}
+
 .mt70 {
     margin-top: 70px;
 }
@@ -20,9 +27,8 @@ ul li {
     display: block;
     position: relative;
     float: left;
-    width: 160px;
-    height: 50px;
-    background: url(/img/logo.png) no-repeat center;
+    width: 215px;
+    height: 30px;
     text-indent: -99999px;
 }
 
@@ -44,107 +50,31 @@ ul li {
     border-top: 1px solid #ccc;
 }
 
-
+a.btn.btn-primary {
+    color: #fff !important;
+    text-decoration: none !important;
+}
 .btn-primary {
-    background-color: #f57e0e;
-    border-color: #f57e0e;
+    background-color: #39077A;
+    border-color: #39077A;
+}
+
+.list-group-item.active {
+    background-color: #39077A !important;
+    border-color: #39077A !important;
+}
+
+.list-group-item.active > a {
+    color : #fff !important;
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
-    background-color: #f57e0e;
+    background-color: #39077A;
 }
 
 .btn-primary:disabled {
-    background-color: #f5c08d;
-    border-color: #f5c08d;
-}
-
-
-/*사이트소개*/
-.portal_main_head {
-    position: relative;
-    min-width: 1550px;
-    height: 440px;
-    background: url(../img/bg_company_main_head.jpg) repeat-x;
-}
-
-.portal_main_head::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 50%;
-    height: 440px;
-    background: url(../img/bg_company_main_head2.jpg) repeat-x;
-}
-
-.portal_main_head .portal_main_section {
-    height: 440px;
-    background: url(../img/v_company_main.jpg) 100% 0 no-repeat;
-}
-
-.portal_main_section {
-    position: relative;
-    width: 1100px;
-    margin: 0 auto;
-}
-
-.portal_main_head .txt_box {
-    position: absolute;
-    top: 190px;
-    left: 0;
-    width: 530px;
-    height: 320px;
-    padding: 50px 60px;
-    background-color: #3942af;
-    border-radius: 60px 10px;
-}
-
-.portal_main_head h2 {
-    line-height: 52px;
-    font-weight: 700;
-    font-size: 46px;
-    color: #fff;
-}
-
-.portal_main_head p {
-    font-size: 15px;
-    line-height: 24px;
-    margin-top: 15px;
-    color: #d4d7fd;
-}
-
-.portal_main_body {
-    min-width: 1550px;
-    padding: 100px 0 130px;
-    background-color: #f8f9fb;
-}
-
-
-.portal_content_wrap {
-    margin: 0 auto;
-    display: block;
-    position: relative;
-    width: 1110px;
-}
-
-.dna {
-    width: 1110px;
-    text-align: center;
-    margin-top: 20px;
-    padding: 0;
-}
-
-.dna li {
-    display: inline-block;
-    width: 31%;
-    height: 240px;
-    margin-right: 32px;
-    padding: 40px 40px 50px;
-    vertical-align: top;
-    border-radius: 8px;
-    background-color: #fff;
-    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.05);
+    background-color: #766d81;
+    border-color: #766d81;
 }
 
 .info_img {
@@ -173,10 +103,10 @@ ul li {
 .panel,
 .panel-group .panel,
 .panel-heading {
-    border-radius: 0px; /*background: url(../img/faq_arrow.png)no-repeat 1060px;*/
+    border-radius: 0px; /*background: url(/developer/img/faq_arrow.png)no-repeat 1060px;*/
 }
 
-/*.panel-heading.on {background: url(../img/faq_arrow_on.png)no-repeat 1060px;}*/
+/*.panel-heading.on {background: url(./developer/img/faq_arrow_on.png)no-repeat 1060px;}*/
 .panel-default {
     border: none;
 }
@@ -211,36 +141,6 @@ ul li {
 }
 
 
-/*메인페이지의 FAQ*/
-/*.panel-group_s {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}*/
-.panel-group_s .panel-default_s {
-    border: none;
-}
-
-.panel-group_s .panel-default_s > .panel-heading {
-    padding: 19px 30px;
-    border-top: 1px solid #ddd;
-    background-color: #fff;
-}
-
-.panel-group_s .panel-default_s:first-child > .panel-heading {
-    border-top: 0;
-}
-
-/*.panel-group_s .panel-default_s > .panel-heading:last-child {border-bottom: 2px solid red;}*/
-.panel-group_s .panel-default_s > .panel-heading + .panel-collapse .panel-body {
-    padding-left: 30px;
-    font-size: 16px;
-}
-
-.panel-group_s .panel {
-    margin-bottom: 0;
-}
-
-.panel-group_s .panel + .panel {
-    margin-top: 0;
-}
-
 .f-g-l fieldset {
     display: block;
     float: left;
@@ -248,15 +148,6 @@ ul li {
     width: 440px;
 }
 
-.calen {
-    display: block;
-    position: relative;
-    float: left;
-    width: 130px;
-    margin-right: 10px;
-}
-
-
 .signup .idsave {
     margin: 10px 0 0 95px;
 }
@@ -271,6 +162,26 @@ ul li {
     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 }
 
+.btn-toggle {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 20px; /*margin: 10px 0 5px 0;*/
+    height: 30px;
+    background-color: /*transparent*/ #fff8eb;
+    border-radius: 4px;
+    border: 0;
+    font-weight: 500;
+    font-size: 16px;
+    color: #222;
+}
+
+.btn-toggle:hover,
+.btn-toggle:focus {
+    color: rgba(0, 0, 0, .85);
+    background-color: #fff8eb;
+}
+
 /* 화면 스크롤 해도 nav_bar를 상단에 고정 */
 .fixed_top {
     position: fixed;
@@ -282,6 +193,10 @@ ul li {
     animation: appear 0.5s ease-in-out;
 }
 
+.dropdown-menu {
+    min-width: 7rem !important;
+}
+
 .fixed_menu {
     position: fixed;
     top: 50px;
@@ -290,14 +205,97 @@ ul li {
     display: block;
 }
 
+.btn-toggle[aria-expanded="true"] {
+    width: 100%;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    background-color: #fd9b00;
+}
+
+.btn-toggle[aria-expanded="true"]::before {
+    transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+    display: inline-flex;
+    width: 100%;
+    padding: .1875rem .5rem;
+    margin-top: .125rem;
+    margin-left: 1.25rem;
+    text-decoration: none;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #222;
+}
+
+
 .scrollarea {
     overflow-y: auto;
 }
 
+.admin_content {
+    display: block;
+    position: relative;
+    margin: 0 auto;
+}
+
 .has-error .form-control {
     border-color: #dc312d;
 }
 
+.explan.error {
+    color: #dc312d;
+}
+
+
+/*테스트 등록*/
+.testregister_wrap {
+    width: 100%;
+    padding: 0;
+    border-radius: 10px;
+    border: 1px solid #ddd;
+    margin: 20px 0 40px 0;
+}
+
+.testregister_top {
+    padding: 40px 60px 40px 60px;
+}
+
+.testregister_left, .testregister_right {
+    display: inline-block;
+    width: 49.8%;
+    padding: 40px 60px 60px 60px;
+    vertical-align: top;
+}
+
+.testregister_left {
+    border-right: 1px solid #e6e6e6;
+}
+
+
+.testregister_wrap h3 {
+    display: block;
+    float: left;
+    margin-top: 10px;
+    font-weight: 600;
+    margin-bottom: 20px;
+}
+
+.jg-regist {
+    display: block;
+    position: relative;
+    float: left;
+    width: 100%;
+}
+
+.jg-regist table tr {
+    height: 40px;
+    font-size: 14px;
+    border-bottom: 1px solid #ddd;
+}
+
 .jsgrid-table {
     position: relative;
     margin-left: 15px;
@@ -307,6 +305,103 @@ ul li {
     width: 150px;
 }
 
+.testregister_wrap h3 span {
+    display: inline-block;
+    position: relative;
+    width: 26px;
+    height: 26px;
+    margin-right: 10px;
+    top: -2px;
+    background-color: #222;
+    border-radius: 50%;
+    text-align: center;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.testregister_wrap hr {
+    display: block;
+    width: 100%;
+    margin: 0;
+    border-color: #ddd;
+}
+
+.testregister_result {
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 10px 0 10px 20px;
+    line-height: 1.7;
+    list-style: none;
+}
+
+.testregister_select_tit {
+    float: left;
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px 0 15px 20px;
+    line-height: 1.7;
+    list-style: none;
+}
+
+.testregister_select_tit li {
+    text-align: center;
+}
+
+.testregister_select {
+    float: left;
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 10px 20px;
+    background-color: #fafafa;
+    line-height: 1.7;
+    list-style: none;
+}
+
+.testregister_select li {
+    display: inline-block;
+    width: 100%;
+    height: 46px;
+    line-height: 2.8;
+    text-indent: 20px;
+}
+
+.testregister_select li:first-child {
+    border-bottom: 1px solid #ddd;
+}
+
+.testregister_select li:hover {
+    display: inline-block;
+    width: 100%;
+    background-color: #f1f1f1;
+}
+
+.testregister_result a, .testregister_select a {
+    color: #222;
+}
+
+.testregister_left .pagination {
+    margin-top: 15px;
+}
+
+.testregister_left .pagination ul li a,
+.testregister_left .pagination ul li.on a,
+.testregister_left .pagination ul li:hover a {
+    border-radius: 4px;
+}
+
+.testregister_detail {
+    padding: 40px 60px 40px 60px;
+}
+
+.testregister_detail label {
+    font-size: 20px;
+}
+
 .board_content {
     padding: 10px;
     line-height: 1.5;
@@ -327,22 +422,6 @@ ul li {
     grid-area: list
 }
 
-.search_field {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    column-gap: 10px;
-    grid-template-areas: "input button";
-}
-
-.search_field_input {
-    grid-area: input
-}
-
-.search_field_button {
-    grid-area: button;
-}
-
-
 /*기타 css*/
 
 .CodeMirror {
@@ -382,34 +461,6 @@ ul li {
     height: 1rem
 }
 
-.pt-subnavbar {
-    position: relative;
-    z-index: 1020;
-    background-color: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.15)
-}
-
-.pt-subnavbar .dropdown-menu {
-    font-size: .875rem;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05)
-}
-
-.pt-subnavbar .dropdown-item.current {
-    font-weight: 600;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 1rem top 0.6rem;
-    background-size: .75rem .75rem
-}
-
-@media (min-width: 768px) {
-    .pt-subnavbar {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0
-    }
-}
-
 .pt-search {
     position: relative
 }
@@ -552,6 +603,11 @@ ul li {
 }
 
 @media (max-width: 991.98px) {
+
+    .logo_only {
+        display: none;
+    }
+
     .pt-content > .table {
         display: block;
         overflow-x: auto
@@ -584,6 +640,18 @@ ul li {
     }
 }
 
+@media (max-width: 849px){
+    .hide {
+        display: none !important;
+    }
+}
+
+@media (min-width: 850px){
+    .main_menu {
+        display: none !important;
+    }
+}
+
 .pt-lead {
     font-size: calc(1.275rem + .3vw);
     font-weight: 300
@@ -695,6 +763,7 @@ ul li {
 @media (min-width: 768px) {
     .pt-layout {
         display: grid;
+        gap: 1.5rem;
         grid-template-areas:"sidebar main";
         grid-template-columns:1fr 3fr
     }
@@ -845,7 +914,14 @@ ul li {
     font-weight: 600;
     color: #fff;
     background-color: #7952b3;
-    border-color: #7952b3
+    border-color: #7952b3;
+}
+
+.nav-pills .nav-link.active {
+    font-weight: 600 !important;
+    color: #fff !important;
+    background-color: #39077A !important;
+    border-color: #39077A !important;
 }
 
 .btn-pt-primary:hover, .btn-pt-primary:active {
@@ -1322,14 +1398,10 @@ ul li {
 
 .pt-table thead tr th {
     background-color: #f6f6f6;
-    font-size: .9rem;
-    font-weight: 500;
     letter-spacing: 0;
 }
 
 .pt-table tbody tr td {
-    font-size: .9rem;
-    font-weight: 400;
     letter-spacing: 0;
 }
 
@@ -1352,6 +1424,11 @@ ul li {
     padding: 9px 0;
 }
 
+ul.api_tab > li > a > .active {
+    color: #ffffff !important;
+    font-weight: bold;
+}
+
 footer {
     display: block;
     position: relative;
@@ -1364,7 +1441,7 @@ footer {
     right: 15px;
     width: 34px;
     height: 34px;
-    background: #666 url(/img/footer_top_arrow.png) no-repeat center 3px;
+    background: #666 url(/developer/img/footer_top_arrow.png) no-repeat center 3px;
 }
 
 footer div.foot_info {
@@ -1381,41 +1458,46 @@ footer div.foot_info span {
     letter-spacing: .2px;
 }
 
-
-
-.figure_img {
-    /*width: 100%;*/
-    width: 1000px;
-    height: 527px;
-    margin: 0 auto;
-    object-fit: fill;
-    background: url(/img/figure.jpg);
+@media(max-width: 1459px){
+    .header{
+        max-width: 100% !important;
+    }
+}
+@media(min-width: 1460px){
+    .header{
+        max-width: 1460px !important;
+    }
 }
 
-figure div p {
-    display: block;
-    position: relative;
-    padding-top: 50px;
-    font-size: 1.7rem;
-    color: #474747;
-    font-weight: 400;
-    text-align: center;
+.cut-sides {
+    overflow: hidden;
 }
 
-figure div span {
-    display: block;
-    position: relative;
-    font-size: 2.5rem;
-    color: #f74140;
-    font-weight: 500;
-    text-align: center;
+@media(max-width: 1919px){
+
+    .figure_img {
+        width: 100%;
+        display: block;
+        margin: 0 auto;
+        object-fit: cover;
+        object-position: center;
+    }
+}
+@media(min-width: 1920px){
+    .figure_img {
+        width: 1900px;
+        display: block;
+        margin: 0 auto;
+        object-fit: contain;
+        object-position: center;
+    }
 }
 
 .api_banner {
     display: block;
     width: 220px;
     height: 50px;
-    background: url(/img/api_mainban.png);
+    background: url(/developer/img/api_mainban.png);
 }
 
 .api_banner a {
@@ -1479,7 +1561,7 @@ figure div span {
     position: relative;
     padding-left: 150px;
     height: 120px;
-    background: url(/img/api_info_a.png) no-repeat;
+    background: url(/developer/img/api_info_a.png) no-repeat;
 }
 
 .api_info ul .api_info_b {
@@ -1487,7 +1569,7 @@ figure div span {
     position: relative;
     padding-left: 150px;
     height: 120px;
-    background: url(/img/api_info_b.png) no-repeat;
+    background: url(/developer/img/api_info_b.png) no-repeat;
 }
 
 .api_info ul .api_info_c {
@@ -1495,7 +1577,7 @@ figure div span {
     position: relative;
     padding-left: 150px;
     height: 120px;
-    background: url(/img/api_info_c.png) no-repeat;
+    background: url(/developer/img/api_info_c.png) no-repeat;
 }
 
 .api_info ul .api_info_d {
@@ -1503,13 +1585,13 @@ figure div span {
     position: relative;
     padding-left: 150px;
     height: 120px;
-    background: url(/img/api_info_d.png) no-repeat;
+    background: url(/developer/img/api_info_d.png) no-repeat;
 }
 
 
-/*.CodeMirror {*/
-/*    margin-bottom: 0.1rem !important;*/
-/*}*/
+.CodeMirror {
+    margin-bottom: 0.1rem !important;
+}
 
 .CodeMirror-fullscreen {
     position: fixed !important;
@@ -1538,7 +1620,6 @@ figure div span {
     background-color: lightgrey;
 }
 
-
 .dev {
     background-color : #f74140 !important;
     color : white !important;
@@ -1549,6 +1630,10 @@ figure div span {
     color : white !important;
 }
 
+.current {
+    color : #39077A !important;
+}
+
 .reset-button {
     /* Reset button styles */
     background: none;
@@ -1562,13 +1647,4 @@ figure div span {
     /* Style the icon */
     display: inline-block;
     margin-right: 5px; /* Adjust this value as per your requirement */
-}
-
-.nav-link {
-    color: #AAAAAA;
-}
-
-.nav-link.active{
-    font-weight: bold;
-    color: #000000;
 }
\ No newline at end of file
diff --git a/src/main/resources/static/img/logo.png b/src/main/resources/static/img/logo.png
new file mode 100644
index 0000000..957f996
Binary files /dev/null and b/src/main/resources/static/img/logo.png differ
diff --git a/src/main/resources/templates/fragment/header.html b/src/main/resources/templates/fragment/header.html
index 7876970..df234c0 100644
--- a/src/main/resources/templates/fragment/header.html
+++ b/src/main/resources/templates/fragment/header.html
@@ -10,35 +10,45 @@
 <header th:fragment="headerFragment" class="border-bottom" id="header">
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
-            <a class="navbar-brand" href="#">
-                API Simulator
+            <a th:href="@{/}" class="text-dark text-decoration-none">
+                <div class="d-flex align-items-center">
+                    <img th:src="@{/img/logo.png}" class="logo me-3"/>
+                    <div class="logo_only" style="width: 20px; height: 30px; border-left: 2px solid #efefef;"></div>
+                    <span class="fs-3 logo_only" style="color: #6d6447">API Simulator</span>
+                </div>
             </a>
-            <div class="d-flex" id="navbarNav">
-                <ul class="navbar-nav">
-                    <li class="nav-item" sec:authorize="isAuthenticated()">
+            <div class="d-flex justify-content-end">
+                <div class="d-flex flex-fill justify-content-between hide">
+                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
                         <a class="nav-link" href="/mgmt/routes/list_view.do">응답 관리</a>
-                    </li>
-                    <li class="nav-item" sec:authorize="isAuthenticated()">
-                        <a class="nav-link" href="/mgmt/api_tester.do">테스터</a>
-                    </li>
-                    <li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
-                        <a class="nav-link dropdown-toggle" href="#" id="mgmtDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            시스템 관리
-                        </a>
-                        <ul class="dropdown-menu" aria-labelledby="mgmtDropDown">
-                            <li><a class="dropdown-item" href="/mgmt/users/list_view.do">사용자 관리</a></li>
-<!--                            <li><a class="dropdown-item" href="/mgmt/groups/list_view.do">그룹 관리</a></li>-->
-                            <li><a class="dropdown-item" href="/mgmt/servers/list_view.do">서버 관리</a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item" sec:authorize="isAnonymous()">
+                    </div>
+                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
+                        <a class="nav-link" href="/mgmt/api_tester.do">요청 관리</a>
+                    </div>
+                    <div class="text-center flex-fill" sec:authorize="hasRole('ROLE_ADMIN')" >
+                        <div class="d-flex justify-content-center">
+                            <div class="nav-item dropdown">
+                                <a class="nav-link" style="padding: 0.5rem 0.5rem !important;" href="#" id="mgmtDropDown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <span>시스템 관리</span>
+                                </a>
+                                <ul class="dropdown-menu" aria-labelledby="mgmtDropDown" style="width: 8rem;">
+                                    <li><a class="dropdown-item" href="/mgmt/users/list_view.do">사용자 관리</a></li>
+                                    <!--                            <li><a class="dropdown-item" href="/mgmt/groups/list_view.do">그룹 관리</a></li>-->
+                                    <li><a class="dropdown-item" href="/mgmt/servers/list_view.do">서버 관리</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
+                        <a href="/change_password.do" class="nav-link">비밀번호 변경</a>
+                    </div>
+                    <div class="text-center flex-fill" sec:authorize="isAuthenticated()">
+                        <a href="/actionLogout.do" class="nav-link">로그 아웃</a>
+                    </div>
+                    <div class="text-center flex-fill" sec:authorize="isAnonymous()">
                         <a href="/login" class="nav-link">로그인</a>
-                    </li>
-                    <li class="nav-item" sec:authorize="isAuthenticated()">
-                        <a href="/change_password.do" class="nav-link">비밀번호 변경</a></li>
-                    <li class="nav-item" sec:authorize="isAuthenticated()">
-                        <a href="/actionLogout.do" class="nav-link">로그 아웃</a></li>
-                </ul>
+                    </div>
+                </div>
             </div>
         </div>
     </nav>
diff --git a/src/main/resources/templates/page/routes/mockRouteEdit.html b/src/main/resources/templates/page/routes/mockRouteEdit.html
index 8995872..73ccfbe 100644
--- a/src/main/resources/templates/page/routes/mockRouteEdit.html
+++ b/src/main/resources/templates/page/routes/mockRouteEdit.html
@@ -7,7 +7,7 @@
     <script>
         require.config({paths: {'vs': '/plugins/vs'}});
     </script>
-    <div class="container mt-1">
+    <div class="container mt-2">
         <form name="mockRouteForm" id="mockRouteForm"
               th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}"
               th:object='${mockRoute}' method="post">
diff --git a/src/main/resources/templates/page/routes/mockRouteList.html b/src/main/resources/templates/page/routes/mockRouteList.html
index 5222ad5..bab264c 100644
--- a/src/main/resources/templates/page/routes/mockRouteList.html
+++ b/src/main/resources/templates/page/routes/mockRouteList.html
@@ -8,26 +8,28 @@
 <section layout:fragment="contentFragment">
 
     <div class="container">
-        <div class="card mt-1">
+        <div class="card mt-2">
             <div class="card-header">
                 <h1>응답 API 목록</h1>
             </div>
             <div class="card-body">
                 <div class="d-flex justify-content-between">
-                    <form role="form" name="searchForm" th:action="@{/mgmt/routes/list_view.do}" method="get" th:object="${modelSearch}">
+                    <form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/routes/list_view.do}" method="get" th:object="${modelSearch}">
                         <input name="page" type="hidden" value="1"/>
-                        <div class="search_field">
-                            <div class="search_field_input">
-                                <input class="form-control" name="username" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
-                                       th:value="${modelSearch.name}"
-                                       maxlength="255"/>
-                            </div>
-                            <div class="search_field_button">
-                                <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
-                                </button>
-                                <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
-                                <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
-                            </div>
+                        <div class="col-auto">
+                            <input class="form-control" name="username" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
+                                   th:value="${modelSearch.name}"
+                                   maxlength="255"/>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
+                            </button>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
                         </div>
                     </form>
                 </div>
@@ -43,30 +45,38 @@
                         <colgroup>
                             <col style="width: 5%;">
                             <col style="width: 5%;">
-                            <col style="width: 5%;">
+                            <col style="width: 10%;">
                             <col>
                             <col>
                             <col style="width: 5%;">
                         </colgroup>
                         <thead>
                         <tr>
-                            <th class="no">번호</th>
-                            <th><input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}"></th><!-- 전체선택 -->
-                            <th>method</th>
-                            <th>path</th>
-                            <th>이름</th>
-                            <th>비고</th>
+                            <th><div class="text-center">번호</div></th>
+                            <th>
+                                <div class="text-center">
+                                <input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
+                                </div>
+                            </th>
+                            <th><div class="text-center">method</div></th>
+                            <th><div class="text-center">path</div></th>
+                            <th><div class="text-center">이름</div></th>
+                            <th><div class="text-center">비고</div></th>
                         </tr>
                         </thead>
                         <tbody>
                         <tr th:each="row, status : ${page.content}">
-                            <td class="no" th:text="${page.getTotalElements() - (page.getNumber() * page.getSize() + status.count ) + 1}"></td>
+                            <td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
                             <td>
-                                <input type="checkbox" name="checkField" class="check2" title="선택"/>
-                                <input name="checkId" type="hidden" th:value="${row.id}"/>
+                                <div class="d-flex justify-content-center">
+                                    <input type="checkbox" name="checkField" class="check2" title="선택"/>
+                                    <input name="checkId" type="hidden" th:value="${row.id}"/>
+                                </div>
                             </td>
                             <td>
-                                <span th:text="${row.method}"></span>
+                                <div class="d-flex justify-content-center">
+                                    <span th:text="${row.method}"></span>
+                                </div>
                             </td>
 
                             <td>
@@ -76,9 +86,11 @@
                                 <span th:text="${row.name}"></span>
                             </td>
                             <td>
-                                <button type="button" class="btn btn-primary btn-sm" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
-                                    [[#{button.update}]]
-                                </button>
+                                <div class="d-flex justify-content-end">
+                                    <button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
+                                        [[#{button.update}]]
+                                    </button>
+                                </div>
                             </td>
                         </tr>
                         <!-- 글이 없는 경우 -->
diff --git a/src/main/resources/templates/page/servers/serverEdit.html b/src/main/resources/templates/page/servers/serverEdit.html
index 2a68920..44b23d6 100644
--- a/src/main/resources/templates/page/servers/serverEdit.html
+++ b/src/main/resources/templates/page/servers/serverEdit.html
@@ -3,8 +3,8 @@
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default_layout}">
 <body>
 <section layout:fragment="contentFragment">
-    <div class="container m-0">
-        <div class="card">
+    <div class="container">
+        <div class="card mt-2">
             <div class="card-header">
                 <h1 th:if="${server.id == null}">서버 등록</h1>
                 <h1 th:if="${server.id != null}">서버 수정</h1>
diff --git a/src/main/resources/templates/page/servers/serverList.html b/src/main/resources/templates/page/servers/serverList.html
index f60ac10..1dd7ed4 100644
--- a/src/main/resources/templates/page/servers/serverList.html
+++ b/src/main/resources/templates/page/servers/serverList.html
@@ -14,21 +14,27 @@
             </div>
             <div class="card-body">
                 <div class="d-flex justify-content-between">
-                    <form role="form" name="searchForm" th:action="@{/mgmt/servers/list_view.do}" method="get" th:object="${modelSearch}">
+                    <form role="form"  class="row g-3" name="searchForm" th:action="@{/mgmt/servers/list_view.do}" method="get" th:object="${modelSearch}">
                         <input name="page" type="hidden" value="1"/>
-                        <div class="search_field">
-                            <div class="search_field_input">
-                                <input class="form-control" name="username" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
-                                       th:value="${modelSearch.name}"
-                                       maxlength="255"/>
-                            </div>
-                            <div class="search_field_button">
-                                <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
-                                </button>
-                                <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
-                                <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
-                            </div>
+                        <div class="col-auto">
+                            <input class="form-control" name="username" placeholder="이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
+                                   th:value="${modelSearch.name}"
+                                   maxlength="255"/>
+
                         </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
+                            </button>
+
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
+
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
+                        </div>
+
                     </form>
                 </div>
             </div>
@@ -49,34 +55,46 @@
                         </colgroup>
                         <thead>
                         <tr>
-                            <th class="no">번호</th>
-                            <th><input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}"></th><!-- 전체선택 -->
-                            <th>이름</th>
-                            <th>주소</th>
-                            <th>사용 중</th>
-                            <th>비고</th>
+                            <th><div class="text-center">번호</div></th>
+                            <th>
+                                <div class="text-center">
+                                    <input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
+                                </div>
+                            </th>
+                            <th><div class="text-center">이름</div></th>
+                            <th><div class="text-center">주소</div></th>
+                            <th><div class="text-center">사용 중</div></th>
+                            <th><div class="text-center">비고</div></th>
                         </tr>
                         </thead>
                         <tbody>
                         <tr th:each="row, status : ${page.content}">
-                            <td class="no" th:text="${page.getTotalElements() - (page.getNumber() * page.getSize() + status.count ) + 1}"></td>
+                            <td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
                             <td>
-                                <input type="checkbox" name="checkField" class="check2" title="선택"/>
-                                <input name="checkId" type="hidden" th:value="${row.id}"/>
+                                <div class="d-flex justify-content-center">
+                                    <input type="checkbox" name="checkField" class="check2" title="선택"/>
+                                    <input name="checkId" type="hidden" th:value="${row.id}"/>
+                                </div>
                             </td>
                             <td>
-                                <span th:text="${row.name}"></span>
+                                <div class="d-flex justify-content-center">
+                                    <span th:text="${row.name}"></span>
+                                </div>
                             </td>
                             <td>
                                 <span th:text="${row.getFullHostAddress()}"></span>
                             </td>
                             <td>
+                                <div class="d-flex justify-content-center">
                                 <span th:text="${row.enabled}"></span>
+                                </div>
                             </td>
                             <td>
-                                <button type="button" class="btn btn-primary btn-sm" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
-                                    [[#{button.update}]]
-                                </button>
+                                <div class="d-flex justify-content-end">
+                                    <button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.id}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
+                                        [[#{button.update}]]
+                                    </button>
+                                </div>
                             </td>
                         </tr>
                         <!-- 글이 없는 경우 -->
diff --git a/src/main/resources/templates/page/tester/apiCollection.html b/src/main/resources/templates/page/tester/apiCollection.html
index 7ce0fa9..f6e7c80 100644
--- a/src/main/resources/templates/page/tester/apiCollection.html
+++ b/src/main/resources/templates/page/tester/apiCollection.html
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-<aside class="pt-sidebar" th:fragment="collectionFragment">
+<aside class="pt-sidebar border" th:fragment="collectionFragment" style="min-width: 200px;">
 <!--    <div class="input-group p-1">-->
 <!--        <input type="text" class="form-control" placeholder="검색어를 입력하세요" aria-label="검색어를 입력하세요" id="filter_text"-->
 <!--               aria-describedby="button-addon2">-->
diff --git a/src/main/resources/templates/page/tester/apiTester.html b/src/main/resources/templates/page/tester/apiTester.html
index 660d910..39a977e 100644
--- a/src/main/resources/templates/page/tester/apiTester.html
+++ b/src/main/resources/templates/page/tester/apiTester.html
@@ -17,11 +17,17 @@
             </div>
         </div>
     </div>
-    <div class="container">
+    <div class="container-fluid mt-2">
         <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
-        <ul class="nav nav-tabs" role="tablist" id="apiRequestTabTitle">
-        </ul>
-        <div class="tab-content" id="apiRequestTabContent">
+        <div class="card">
+            <div class="card-header" style="min-height: 50px;">
+                <ul class="nav nav-tabs card-header-tabs" role="tablist" id="apiRequestTabTitle">
+                </ul>
+            </div>
+            <div class="card-body" style="min-height: 800px;">
+                <div class="tab-content" id="apiRequestTabContent">
+                </div>
+            </div>
         </div>
     </div>
     <div class="modal fade" id="new_api_request_modal" tabindex="-1" aria-labelledby="new_api_request_modal"
diff --git a/src/main/resources/templates/page/updatePw.html b/src/main/resources/templates/page/updatePw.html
index 03cd725..353efaf 100644
--- a/src/main/resources/templates/page/updatePw.html
+++ b/src/main/resources/templates/page/updatePw.html
@@ -6,7 +6,7 @@
 <body>
 
 <section layout:fragment="contentFragment">
-    <div class="container m-0">
+    <div class="container">
         <div class="card mt-2">
             <div class="card-header">
                 <h1>비밀 번호 변경 </h1>
@@ -44,7 +44,7 @@
             </div>
             <div class="card-footer">
                 <button type="button" class="btn btn-primary btn_update"><i class="fa-sharp fa-solid fa-floppy-disk"></i> 저장</button>
-                <a th:href="@{/mypage.do}" class="btn btn-primary" th:title="#{button.cancel}"><i class="fa-sharp fa-solid fa-cancel"></i> [[#{button.cancel}]]</a>
+                <a th:href="@{/}" class="btn btn-primary" th:title="#{button.cancel}"><i class="fa-sharp fa-solid fa-cancel"></i> [[#{button.cancel}]]</a>
             </div>
         </div>
     </div>
diff --git a/src/main/resources/templates/page/users/adminRegister.html b/src/main/resources/templates/page/users/adminRegister.html
index 3858b6c..422fb0d 100644
--- a/src/main/resources/templates/page/users/adminRegister.html
+++ b/src/main/resources/templates/page/users/adminRegister.html
@@ -13,8 +13,8 @@
                 <form name="staffUserForm" id="staffUserForm" th:action="@{/admin_register.do}" th:object='${user}' method="post">
                     <input id="csrf" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                     <div class="form-floating mt-2">
-                        <input type="email" class="form-control" th:classappend="${#fields.hasErrors('userId')}? 'is-invalid'" th:field="*{userId}" name="userId" id="userId" required th:readonly="${user.esntlId != null}"/>
-                        <label for="userId" class="form-label must" th:text="#{email}">이메일</label>
+                        <input type="text" class="form-control" th:classappend="${#fields.hasErrors('userId')}? 'is-invalid'" th:field="*{userId}" name="userId" id="userId" required th:readonly="${user.esntlId != null}"/>
+                        <label for="userId" class="form-label must">사용자ID</label>
                         <th:block th:each="err : ${#fields.errors('userId')}">
                             <div th:text="${err}" class="invalid-feedback"></div>
                         </th:block>
diff --git a/src/main/resources/templates/page/users/staffUserEdit.html b/src/main/resources/templates/page/users/staffUserEdit.html
index 8e5769e..a1bab31 100644
--- a/src/main/resources/templates/page/users/staffUserEdit.html
+++ b/src/main/resources/templates/page/users/staffUserEdit.html
@@ -4,8 +4,8 @@
 <body>
 
 <section layout:fragment="contentFragment">
-    <div class="container m-0">
-        <div class="card">
+    <div class="container">
+        <div class="card mt-2">
             <div class="card-header">
                 <h1 th:if="${user.esntlId == null}">내부 사용자 등록</h1>
                 <h1 th:if="${user.esntlId != null}">내부 사용자 수정</h1>
@@ -18,8 +18,8 @@
                         <label for="esntlId" class="form-label must" th:text="#{esntlId}">고유ID</label>
                     </div>
                     <div class="form-floating mt-2">
-                        <input type="email" class="form-control" th:classappend="${#fields.hasErrors('userId')}? 'is-invalid'" th:field="*{userId}" name="userId" id="userId" required th:readonly="${user.esntlId != null}"/>
-                        <label for="userId" class="form-label must" th:text="#{email}">이메일</label>
+                        <input type="text" class="form-control" th:classappend="${#fields.hasErrors('userId')}? 'is-invalid'" th:field="*{userId}" name="userId" id="userId" required th:readonly="${user.esntlId != null}"/>
+                        <label for="userId" class="form-label must">사용자 ID</label>
                         <th:block th:each="err : ${#fields.errors('userId')}">
                             <div th:text="${err}" class="invalid-feedback"></div>
                         </th:block>
diff --git a/src/main/resources/templates/page/users/staffUserList.html b/src/main/resources/templates/page/users/staffUserList.html
index 1cc9e97..68d98bb 100644
--- a/src/main/resources/templates/page/users/staffUserList.html
+++ b/src/main/resources/templates/page/users/staffUserList.html
@@ -13,20 +13,22 @@
             </div>
             <div class="card-body">
                 <div class="d-flex justify-content-between">
-                    <form role="form" name="searchForm" th:action="@{/mgmt/users/list_view.do}" method="get" th:object="${modelSearch}">
+                    <form role="form" class="row g-3" name="searchForm" th:action="@{/mgmt/users/list_view.do}" method="get" th:object="${modelSearch}">
                         <input name="page" type="hidden" value="1"/>
-                        <div class="search_field">
-                            <div class="search_field_input">
-                                <input class="form-control" name="username" placeholder="사용자 이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
-                                       th:value="${modelSearch.username}"
-                                       maxlength="255"/>
-                            </div>
-                            <div class="search_field_button">
-                                <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
-                                </button>
-                                <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
-                                <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
-                            </div>
+                        <div class="col-auto">
+                            <input class="form-control" name="username" placeholder="사용자 이름" type="text" size="35" th:title="#{title.search}+ '' + #{input.input}"
+                                   th:value="${modelSearch.username}"
+                                   maxlength="255"/>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_search" th:value="#{button.inquire}"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> [[#{title.inquire}]]
+                            </button>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_delete"><i class="fa-sharp fa-solid fa-trash"></i> [[#{title.delete}]]</button>
+                        </div>
+                        <div class="col-auto">
+                            <button type="button" class="btn btn-primary btn_add"><i class="fa-sharp fa-solid fa-plus"></i> [[#{button.create}]]</button><!-- 등록 -->
                         </div>
                     </form>
                 </div>
@@ -49,34 +51,46 @@
                         </colgroup>
                         <thead>
                         <tr>
-                            <th class="no">번호</th>
-                            <th><input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}"></th><!-- 전체선택 -->
-                            <th>ID</th>
-                            <th>이름</th>
-                            <th>상태</th>
-                            <th>비고</th>
+                            <th><div class="text-center">번호</div></th>
+                            <th>
+                                <div class="text-center">
+                                    <input type="checkbox" name="checkAll" class="check2" onclick="fncCheckAll()" th:title="#{input.selectAll.title}">
+                                </div>
+                            </th>
+                            <th><div class="text-center">ID</div></th>
+                            <th><div class="text-center">이름</div></th>
+                            <th><div class="text-center">상태</div></th>
+                            <th><div class="text-center">비고</div></th>
                         </tr>
                         </thead>
                         <tbody>
                         <tr th:each="row, status : ${page.content}">
-                            <td class="no" th:text="${page.getTotalElements() - (page.getNumber() * page.getSize() + status.count ) + 1}"></td>
+                            <td class="text-center" th:text="${page.getNumber() * page.getSize() + status.count}"></td>
                             <td>
-                                <input type="checkbox" name="checkField" class="check2" title="선택"/>
-                                <input name="checkId" type="hidden" th:value="${row.esntlId}"/>
+                                <div class="d-flex justify-content-center">
+                                    <input type="checkbox" name="checkField" class="check2" title="선택"/>
+                                    <input name="checkId" type="hidden" th:value="${row.esntlId}"/>
+                                </div>
                             </td>
                             <td>
                                 <span th:text="${row.userId}"></span>
                             </td>
                             <td>
-                                <span th:text="${row.username}"></span>
+                                <div class="d-flex justify-content-center">
+                                    <span th:text="${row.username}"></span>
+                                </div>
                             </td>
                             <td>
-                                <span th:text="${row.status.toString()}"></span>
+                                <div class="d-flex justify-content-center">
+                                    <span th:text="${row.status.toString()}"></span>
+                                </div>
                             </td>
                             <td>
-                                <button type="button" class="btn btn-primary btn-sm" th:onclick="fnSelectItem([[${row.esntlId}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
-                                    [[#{button.update}]]
-                                </button>
+                                <div class="d-flex justify-content-end">
+                                    <button type="button" class="btn btn-primary btn-sm me-2" th:onclick="fnSelectItem([[${row.esntlId}]])" th:value="#{button.update}"><i class="fa-sharp fa-solid fa-edit"></i>
+                                        [[#{button.update}]]
+                                    </button>
+                                </div>
                             </td>
                         </tr>
                         <!-- 글이 없는 경우 -->