diff --git a/backend/sql_app/static/css/style.css b/backend/sql_app/static/css/style.css
index 54f1519..a1cc5b2 100644
--- a/backend/sql_app/static/css/style.css
+++ b/backend/sql_app/static/css/style.css
@@ -28,12 +28,6 @@ body {
   font-weight: 400;
 }
 
-@media screen and (min-width: 768px) {
-  .nav_contents {
-    max-width: 120rem;
-  }
-}
-
 .nav_contents {
   padding: 1.2rem 2rem;
   height: 5.6rem;
@@ -96,6 +90,87 @@ body {
 
 .material-symbols-outlined {
   color: white;
+  cursor: pointer;
+}
+
+@media screen and (min-width: 768px) {
+  .navBar {
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-bottom: 10px double #85c124;
+    z-index: 999;
+
+    font-family: "Do Hyeon", sans-serif;
+    font-weight: 400;
+  }
+
+  .nav_contents {
+    padding: 1.2rem 2rem;
+    height: 5.6rem;
+    box-sizing: border-box;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  /* 홈화면 이동 */
+  .nav_contents a {
+    font-size: 1.5em;
+    text-decoration: none;
+    color: #85c124;
+  }
+
+  /* 회원가입, 로그인 버튼 */
+  .nav_contents ul {
+    list-style: none;
+    display: flex;
+    gap: 1em;
+  }
+
+  .nav_contents ul li {
+    display: inline-block;
+    list-style: none;
+  }
+
+  /* 검색창 */
+  .nav_contents .search-container {
+    /*width: max-content;*/
+    width: 40%;
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    padding: 14px;
+    background: #85c124;
+    border-radius: 28px;
+  }
+
+  .nav_contents .search-container input {
+    width: 90%;
+    display: block;
+    font-size: 1.4em;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: white;
+
+    font-family: "Nanum Gothic", sans-serif;
+    font-weight: 400;
+  }
+
+  .nav_contents .search-container input::placeholder {
+    color: white;
+  }
+
+  .material-symbols-outlined {
+    color: white;
+    cursor: pointer;
+  }
 }
 
 main {
@@ -103,6 +178,7 @@ main {
   display: flex;
   gap: 2em;
   padding-top: 8rem;
+  height: auto;
 }
 
 /* sign in/out main */
@@ -129,6 +205,12 @@ main {
   height: 100%;
 }
 
+/* Swiper 좌우 버튼 */
+.swiper-button-next,
+.swiper-button-prev {
+  color: #fff !important;
+}
+
 /* 대형폐기물, 근처 수거함 */
 .contents .secondRow {
   width: 100%;
@@ -143,28 +225,57 @@ main {
   width: 100%;
   height: 100%;
   display: flex;
-  background-color: #aa7b08;
+  background-color: #f7d300;
   border-radius: 50px;
   text-align: center;
   align-items: center;
   justify-content: center;
   color: white;
-  font-size: 50px;
+  font-size: 5vw;
   cursor: pointer;
 }
 
+.nearText {
+  padding-left: 3%;
+  padding-bottom: 5%;
+  font-weight: bolder;
+  text-shadow: 5px 5px 5px #997009;
+}
+.overText {
+  padding-bottom: 7%;
+  font-weight: bolder;
+  text-shadow: 5px 5px 5px #dfbe04;
+}
+.imgWrapper {
+  width: 15vw;
+  padding-top: 7%;
+  padding-left: -5%;
+}
+.oversizeImg {
+  width: 15vw;
+  padding-top: 15%;
+}
+.battery1 {
+  width: 30%;
+  object-fit: contain;
+}
+.battery2 {
+  width: 40%;
+  object-fit: contain;
+}
+
 /* 근처 */
 .contents .secondRow .near {
   width: 100%;
   height: 100%;
   display: flex;
-  background-color: #f7d300;
+  background-color: #aa7b08;
   border-radius: 50px;
   text-align: center;
   align-items: center;
   justify-content: center;
   color: white;
-  font-size: 50px;
+  font-size: 5vw;
   cursor: pointer;
 }
 
@@ -194,6 +305,7 @@ footer a {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 }
 
 .swiper-slide {
@@ -204,11 +316,13 @@ footer a {
   color: white;
 }
 
-.swiper-slide img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.swiper-slide > .daily_contents {
+  display: flex;
+  height: 70%;
+  align-items: center;
+
+  font-size: 30px;
+  font-weight: bold;
 }
 
 .swiper-slide-next {
@@ -284,7 +398,7 @@ footer a {
 
 /* select box 디자인 */
 #gugun {
-  width: 30%;
+  width: fit-content;
   height: 30px;
   padding: 0 10px;
   box-sizing: border-box;
@@ -300,3 +414,266 @@ footer a {
 option {
   height: 25px;
 }
+
+.nearMain {
+  height: 75vh;
+}
+
+/* 검색화면 css */
+.left {
+  width: 40vw;
+}
+
+.left > img {
+  width: 40vw;
+}
+
+.right {
+  font-family: "Nanum Gothic", sans-serif;
+  font-weight: 800;
+  font-size: 1.8vw;
+
+  color: #4a4a4a;
+}
+
+.right > .recycleAble {
+  display: flex;
+  flex-direction: row;
+}
+
+.right > .recycleHow {
+  display: flex;
+  flex-direction: row;
+}
+
+.warning > ul {
+  padding-inline-start: 1.5em;
+  line-height: 1.2;
+}
+
+.warning > ul > li {
+  margin-bottom: 0.6em;
+}
+
+.deco {
+  width: fit-content;
+  border-bottom: 3px dotted #578507;
+  padding-bottom: 2px;
+}
+
+.S_main {
+  gap: 4em;
+}
+
+/* 대형폐기물 텝메뉴 */
+.tab_menu {
+  overflow: hidden;
+  padding: 1px;
+  display: flex;
+  width: 40%;
+}
+.tab_menu > ul {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  flex-grow: 1;
+}
+.tab_menu > ul > li {
+  flex-grow: 1;
+}
+.tab_menu ul li a {
+  display: block;
+  border: #d0d0d0 solid 1px;
+  background-color: #f4f4f4;
+  line-height: 22px;
+  padding: 16px 0;
+  text-align: center;
+  color: #333333;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.tab_menu ul li.on a,
+.tab_menu ul li a:hover {
+  background-color: #578507;
+  color: #fff;
+}
+
+.ovMain {
+  display: flex;
+  flex-direction: column;
+}
+
+.tab_menu > ul > .active > a {
+  display: block;
+  border: #d0d0d0 solid 1px;
+  background-color: #578507;
+  color: #fff;
+  line-height: 22px;
+  padding: 16px 0;
+  text-align: center;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+/* 반응형 웹 디자인을 위한 미디어 쿼리 추가 */
+@media screen and (max-width: 1200px) {
+  .nav_contents {
+    padding: 1rem;
+  }
+
+  .nav_contents a {
+    font-size: 1.4em;
+  }
+
+  .nav_contents .search-container {
+    width: 50%;
+    padding: 12px;
+  }
+
+  .nav_contents .search-container input {
+    font-size: 1.2em;
+  }
+
+  .contents .secondRow .oversizedWaste,
+  .contents .secondRow .near {
+    font-size: 4.5vw;
+  }
+
+  .left,
+  .left > img {
+    width: 50vw;
+  }
+
+  .right {
+    font-size: 2vw;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .nav_contents {
+    padding: 0.8rem;
+  }
+
+  .nav_contents a {
+    font-size: 1.3em;
+  }
+
+  .nav_contents .search-container {
+    width: 60%;
+    padding: 10px;
+  }
+
+  .nav_contents .search-container input {
+    font-size: 1.1em;
+  }
+
+  .contents .secondRow .oversizedWaste,
+  .contents .secondRow .near {
+    font-size: 4.8vw;
+  }
+
+  .left,
+  .left > img {
+    width: 60vw;
+  }
+
+  .right {
+    font-size: 2.2vw;
+  }
+
+  .tab_menu {
+    width: 60%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .nav_contents {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0.5rem;
+  }
+
+  .nav_contents a {
+    font-size: 1.2em;
+  }
+
+  .nav_contents ul {
+    gap: 0.5em;
+  }
+
+  .nav_contents .search-container {
+    width: 80%;
+    padding: 8px;
+  }
+
+  .nav_contents .search-container input {
+    font-size: 1em;
+  }
+
+  main {
+    flex-direction: column;
+    padding-top: 6rem;
+  }
+
+  .contents .secondRow {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .contents .secondRow .oversizedWaste,
+  .contents .secondRow .near {
+    font-size: 5vw;
+  }
+
+  .left,
+  .left > img {
+    width: 80vw;
+  }
+
+  .right {
+    font-size: 2.4vw;
+  }
+
+  .tab_menu {
+    width: 80%;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .nav_contents {
+    padding: 0.3rem;
+  }
+
+  .nav_contents a {
+    font-size: 1.1em;
+  }
+
+  .nav_contents .search-container {
+    width: 100%;
+    padding: 6px;
+  }
+
+  .nav_contents .search-container input {
+    font-size: 0.9em;
+  }
+
+  .contents .secondRow .oversizedWaste,
+  .contents .secondRow .near {
+    font-size: 5.5vw;
+  }
+
+  .left,
+  .left > img {
+    width: 100vw;
+  }
+
+  .right {
+    font-size: 2.6vw;
+  }
+
+  .tab_menu {
+    width: 100%;
+  }
+}
diff --git a/backend/sql_app/static/js/main.js b/backend/sql_app/static/js/main.js
index 56da6c6..88fedeb 100644
--- a/backend/sql_app/static/js/main.js
+++ b/backend/sql_app/static/js/main.js
@@ -13,3 +13,41 @@ function swiperInitialize() {
 https: $.get("navigation.html", function (data) {
   $("#nav-placeholder").replaceWith(data);
 });
+
+// 요일별 분리수거 업데이트 -- API 생성 후 다시 확인!!!
+async function updateSchedule() {
+  const region = document.getElementById("gugun").value;
+  if (!region) return;
+
+  try {
+    const schedule = await fetchSchedule(region);
+    populateSwiper(schedule);
+  } catch (error) {
+    console.error("Error fetching schedule:", error);
+  }
+}
+
+document.getElementById("gugun").addEventListener("change", updateSchedule);
+
+//대형 폐기물 탭메뉴 선택 JS
+document.addEventListener("DOMContentLoaded", function () {
+  const tabs = document.querySelectorAll(".tab-item");
+  const tabPanes = document.querySelectorAll(".tab-pane");
+
+  tabs.forEach((tab) => {
+    tab.addEventListener("click", function (e) {
+      e.preventDefault();
+      const target = tab.getAttribute("data-tab");
+
+      // Remove active class from all tabs
+      tabs.forEach((t) => t.classList.remove("active"));
+      // Remove active class from all tab panes
+      tabPanes.forEach((pane) => pane.classList.remove("active"));
+
+      // Add active class to clicked tab
+      tab.classList.add("active");
+      // Add active class to corresponding tab pane
+      document.getElementById(target).classList.add("active");
+    });
+  });
+});
diff --git a/backend/sql_app/static/navigation.html b/backend/sql_app/static/navigation.html
index 8039cd5..39f6c0b 100644
--- a/backend/sql_app/static/navigation.html
+++ b/backend/sql_app/static/navigation.html
@@ -1,14 +1,31 @@
 <div class="navBar">
   <div class="nav_contents">
-    <a href="/"> 2팀프젝 </a>
+    <a href="../template/main.html"> 2팀프젝 </a>
     <div class="search-container">
       <input type="text" id="search" placeholder="이건 어떻게 버리지?" />
-      <span class="material-symbols-outlined"> search </span>
+      <span
+        id="searchBtn"
+        class="material-symbols-outlined"
+        onclick="location.href='../template/search.html'"
+      >
+        search
+      </span>
+      <!-- 엔터키 검색 기능 -->
+      <script>
+        var input = document.getElementById("search");
+
+        input.addEventListener("keyup", function (event) {
+          if (event.keyCode === 13) {
+            event.preventDefault();
+            document.getElementById("searchBtn").click();
+          }
+        });
+      </script>
     </div>
     <nav class="nav_link">
       <ul class="sign_log">
-        <li><a href="/sign_up">회원가입</a></li>
-        <li><a href="/sign_in">로그인</a></li>
+        <li><a href="../template/sign_up.html">회원가입</a></li>
+        <li><a href="../template/sign_in.html">로그인</a></li>
       </ul>
     </nav>
   </div>
diff --git a/backend/sql_app/template/index.html b/backend/sql_app/template/index.html
index 17837e8..24ad574 100644
--- a/backend/sql_app/template/index.html
+++ b/backend/sql_app/template/index.html
@@ -1,12 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-
-</head>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
+  </head>
+  <body></body>
+</html>
diff --git a/backend/sql_app/template/main.html b/backend/sql_app/template/main.html
index 1e2348d..1e78301 100644
--- a/backend/sql_app/template/main.html
+++ b/backend/sql_app/template/main.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -32,7 +32,7 @@
       <!-- navbar -->
       <div id="nav-placeholder">
         <script>
-          $.get("/static/navigation.html", function (data) {
+          $.get("../static/navigation.html", function (data) {
             $("#nav-placeholder").replaceWith(data);
           });
         </script>
@@ -40,27 +40,93 @@
     </div>
     <main>
       <div class="contents">
+        <div class="region">
+          <select id="gugun" name="gugun">
+            <option value="">-구/군 선택-</option>
+            <option value="gangseo">강서구</option>
+            <option value="geumjeong">금정구</option>
+            <option value="nam">남구</option>
+            <option value="dong">동구</option>
+            <option value="dongnae">동래구</option>
+            <option value="busanjin">부산진구</option>
+            <option value="buk">북구</option>
+            <option value="sasang">사상구</option>
+            <option value="saha">사하구</option>
+            <option value="seo">서구</option>
+            <option value="suyeong">수영구</option>
+            <option value="yeonje">연제구</option>
+            <option value="yeongdo">영도구</option>
+            <option value="jung">중구</option>
+            <option value="haeundae">해운대구</option>
+            <option value="gijang">기장군</option>
+          </select>
+        </div>
         <div class="firstRow">
           <div id="daily" class="daily">
             <!-- Swiper -->
             <div class="swiper mySwiper">
               <div class="swiper-wrapper">
-                <div id="swiper-slide" class="swiper-slide">일요일</div>
-                <div id="swiper-slide" class="swiper-slide">월요일</div>
-                <div id="swiper-slide" class="swiper-slide">화요일</div>
-                <div id="swiper-slide" class="swiper-slide">수요일</div>
-                <div id="swiper-slide" class="swiper-slide">목요일</div>
-                <div id="swiper-slide" class="swiper-slide">금요일</div>
-                <div id="swiper-slide" class="swiper-slide">토요일</div>
-                <div id="swiper-slide" class="swiper-slide">일요일</div>
-                <div id="swiper-slide" class="swiper-slide">월요일</div>
-                <div id="swiper-slide" class="swiper-slide">화요일</div>
-                <div id="swiper-slide" class="swiper-slide">수요일</div>
-                <div id="swiper-slide" class="swiper-slide">목요일</div>
-                <div id="swiper-slide" class="swiper-slide">금요일</div>
-                <div id="swiper-slide" class="swiper-slide">토요일</div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">일요일</div>
+                  <div class="daily_contents" class="sun"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">월요일</div>
+                  <div class="daily_contents" class="mon"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">화요일</div>
+                  <div class="daily_contents" class="tue"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">수요일</div>
+                  <div class="daily_contents" class="wed"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">목요일</div>
+                  <div class="daily_contents" class="thu"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">금요일</div>
+                  <div class="daily_contents" class="fri"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">토요일</div>
+                  <div class="daily_contents" class="sat"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">일요일</div>
+                  <div class="daily_contents" class="sun"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">월요일</div>
+                  <div class="daily_contents" class="mon"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">화요일</div>
+                  <div class="daily_contents" class="tue"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">수요일</div>
+                  <div class="daily_contents" class="wed"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">목요일</div>
+                  <div class="daily_contents" class="thu"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">금요일</div>
+                  <div class="daily_contents" class="fri"></div>
+                </div>
+                <div id="swiper-slide" class="swiper-slide">
+                  <div class="day">토요일</div>
+                  <div class="daily_contents" class="sat"></div>
+                </div>
               </div>
               <div class="swiper-pagination"></div>
+              <!-- 네비게이션 버튼 -->
+              <div class="swiper-button-next"></div>
+              <div class="swiper-button-prev"></div>
             </div>
 
             <!-- Swiper JS -->
@@ -93,6 +159,10 @@
                   spaceBetween: 10,
                   speed: 1000,
                   initialSlide: getInitialSlide(),
+                  navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                  },
                   breakpoints: {
                     1000: {
                       slidesPerView: 4,
@@ -109,11 +179,28 @@
           </div>
         </div>
         <div class="secondRow">
-          <div class="oversizedWaste" onclick="location.href='/oversize_waste'">
-            대형폐기물<br />처리방침
+          <div
+            class="oversizedWaste"
+            onclick="location.href='oversize_waste.html'"
+          >
+            <div class="overText">대형폐기물<br />처리방침</div>
+            <img
+              class="oversizeImg"
+              src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfg1mwXX7EDIi1uc8l1Qcb6u2e8sVpFzSuTX-78sgi9IWdkJWKhXsyLdUSR6h3cCCT8G72fhAErVIezbGLuVKJgZ5n8plsIllzSCnqcObgPlNkT1oulVgqP1ZWqdaFyLH2lQGBH4XjK8/s800/sodai_gomi.png"
+            />
           </div>
-          <div class="near" onclick="location.href='/near'">
-            근처 수거함<br />위치
+          <div class="near" onclick="location.href='near.html'">
+            <div class="nearText">근처 수거함<br />위치</div>
+            <div class="imgWrapper">
+              <img
+                class="battery2"
+                src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80HLM1R_zgX3BRk0ICBuvGrVP_C_Yuf8l2TFqVVmRxTioAlHy8FvcFRMqx4Z1PIuKucFcGiFhcwv9MfaIOIw5q9wCsAVAyYeN59o_J_FsTXH_ZnjBg_5WxC6676J9aCgZ03DfOKz_2K6g/s300/battery_tan1.png"
+              />
+              <img
+                class="battery1"
+                src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0jdFgDMT1UNb4NLFZxPmM8TFbPnpMixuU8DgCwR-PJmawxrUsemRbFD8XBxrw1Qf9LyCEcI2KfSO6mu9XVXNbGyNWGREHJqhlMtbKZk5E9mKywB0dMZER1jE_qAqLw7Dwi6TIUnyQlDzw/s300/battery_tan4.png"
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/backend/sql_app/template/near.html b/backend/sql_app/template/near.html
index 9205c25..cbf819e 100644
--- a/backend/sql_app/template/near.html
+++ b/backend/sql_app/template/near.html
@@ -2,10 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -21,30 +24,97 @@
     <!-- Reuse navBar -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!-- 네이버맵 인증키부분 -->
-    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=NAVER_API"></script>
-  </head>
+    <script
+      type="text/javascript"
+      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nqswh19jjg"
+    ></script>
   </head>
   <body>
-    <div id="map" style="width:100%;height:400px;"></div>
-    <!-- 지도위치 조절해서 사이트 꾸미기 -->
-    <script>
-      // getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
-      var mapOptions = {
-          center: new naver.maps.LatLng(37.3595704, 127.105399),
-          zoom: 10
-      };
-
-      var map = new naver.maps.Map('map', mapOptions);
-    </script>
     <div id="gnb_root">
       <!-- navbar -->
       <div id="nav-placeholder">
         <script>
-          $.get("navigation.html", function (data) {
+          $.get("../static/navigation.html", function (data) {
             $("#nav-placeholder").replaceWith(data);
           });
         </script>
       </div>
     </div>
+    <main class="nearMain">
+      <div id="map" style="width: 100%; height: 100%"></div>
+      <!-- 지도위치 조절해서 사이트 꾸미기 -->
+      <script>
+        // getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
+        // var mapOptions = {
+        //     center: new naver.maps.LatLng(37.3595704, 127.105399),
+        //     zoom: 10
+        // };
+
+        // var map = new naver.maps.Map('map', mapOptions);
+
+        var map = new naver.maps.Map("map", {
+          center: new naver.maps.LatLng(37.5666805, 126.9784147),
+          zoom: 10,
+          mapTypeId: naver.maps.MapTypeId.NORMAL,
+        });
+
+        var infowindow = new naver.maps.InfoWindow();
+
+        function onSuccessGeolocation(position) {
+          var location = new naver.maps.LatLng(
+            position.coords.latitude,
+            position.coords.longitude
+          );
+
+          map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
+          map.setZoom(10); // 지도의 줌 레벨을 변경합니다.
+
+          infowindow.setContent(
+            '<div style="padding:20px;">' +
+              "geolocation.getCurrentPosition() 위치" +
+              "</div>"
+          );
+
+          infowindow.open(map, location);
+          console.log("Coordinates: " + location.toString());
+        }
+
+        function onErrorGeolocation() {
+          var center = map.getCenter();
+
+          infowindow.setContent(
+            '<div style="padding:20px;">' +
+              '<h5 style="margin-bottom:5px;color:#f00;">Geolocation failed!</h5>' +
+              "latitude: " +
+              center.lat() +
+              "<br />longitude: " +
+              center.lng() +
+              "</div>"
+          );
+
+          infowindow.open(map, center);
+        }
+
+        $(window).on("load", function () {
+          if (navigator.geolocation) {
+            /**
+             * navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다.
+             * http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다.
+             * chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com"
+             */
+            navigator.geolocation.getCurrentPosition(
+              onSuccessGeolocation,
+              onErrorGeolocation
+            );
+          } else {
+            var center = map.getCenter();
+            infowindow.setContent(
+              '<div style="padding:20px;"><h5 style="margin-bottom:5px;color:#f00;">Geolocation not supported</h5></div>'
+            );
+            infowindow.open(map, center);
+          }
+        });
+      </script>
+    </main>
   </body>
 </html>
diff --git a/backend/sql_app/template/oversize_pay.html b/backend/sql_app/template/oversize_pay.html
new file mode 100644
index 0000000..7d7e06c
--- /dev/null
+++ b/backend/sql_app/template/oversize_pay.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
+    <title>부산분리배출</title>
+    <link rel="stylesheet" href="../static/css/style.css" />
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Search icon -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+    />
+    <!-- Reuse navBar -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <div id="gnb_root">
+      <!-- navbar -->
+      <div id="nav-placeholder">
+        <script>
+          $.get("../static/navigation.html", function (data) {
+            $("#nav-placeholder").replaceWith(data);
+          });
+        </script>
+      </div>
+    </div>
+    <main class="ovMain">
+      <div class="tab_menu">
+        <ul class="oversize_menu">
+          <li class="tab-item" data-tab="tab1">
+            <a href="./oversize_waste.html"><span>대형폐기물이란?</span></a>
+          </li>
+          <li class="tab-item active" data-tab="tab2">
+            <a href=""><span>대형폐기물 요금 안내</span></a>
+          </li>
+        </ul>
+      </div>
+      <div class="tab-content">
+        <!-- 여기에 '대형폐기물 요금 안내'에 대한 내용 첨부 -->
+        <p>대형폐기물 요금 안내</p>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/backend/sql_app/template/oversize_waste.html b/backend/sql_app/template/oversize_waste.html
index 4588131..f32b78b 100644
--- a/backend/sql_app/template/oversize_waste.html
+++ b/backend/sql_app/template/oversize_waste.html
@@ -2,10 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+    />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -20,30 +23,33 @@
     />
     <!-- Reuse navBar -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <!-- 네이버맵 인증키부분 -->
-    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=NAVER_API"></script>
   </head>
   <body>
-    <div id="map" style="width:100%;height:400px;"></div>
-    <!-- 지도위치 조절해서 사이트 꾸미기 -->
-    <script>
-      // getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
-      var mapOptions = {
-          center: new naver.maps.LatLng(37.3595704, 127.105399),
-          zoom: 10
-      };
-
-      var map = new naver.maps.Map('map', mapOptions);
-    </script>
     <div id="gnb_root">
       <!-- navbar -->
       <div id="nav-placeholder">
         <script>
-          $.get("navigation.html", function (data) {
+          $.get("../static/navigation.html", function (data) {
             $("#nav-placeholder").replaceWith(data);
           });
         </script>
       </div>
     </div>
+    <main class="ovMain">
+      <div class="tab_menu">
+        <ul class="oversize_menu">
+          <li class="tab-item active" data-tab="tab1">
+            <a href=""><span>대형폐기물이란?</span></a>
+          </li>
+          <li class="tab-item" data-tab="tab2">
+            <a href="./oversize_pay.html"><span>대형폐기물 요금 안내</span></a>
+          </li>
+        </ul>
+      </div>
+      <div class="tab-content">
+        <!-- 여기에 '대형폐기물이란?'에 대한 내용 첨부 -->
+        <p>대형폐기물이란?</p>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/backend/sql_app/template/search.html b/backend/sql_app/template/search.html
index 46ab899..6f1ca26 100644
--- a/backend/sql_app/template/search.html
+++ b/backend/sql_app/template/search.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -25,11 +25,44 @@
       <!-- navbar -->
       <div id="nav-placeholder">
         <script>
-          $.get("/navigation.html", function (data) {
+          $.get("../static/navigation.html", function (data) {
             $("#nav-placeholder").replaceWith(data);
           });
         </script>
       </div>
     </div>
+    <main class="S_main">
+      <!-- 내용부분 -->
+      <div class="left">
+        <img
+          src="https://img.freepik.com/premium-photo/isolated-blue-umbrella_100488-906.jpg"
+        />
+      </div>
+      <div class="right">
+        <h1 class="deco">우산</h1>
+        <div class="recycleAble">
+          <p class="deco">재활용 여부</p>
+          <p>&nbsp:&nbsp</p>
+          <p>불가능</p>
+        </div>
+        <div class="recycleHow">
+          <p class="deco">분리수거</p>
+          <p>&nbsp:&nbsp</p>
+          <p>일반</p>
+        </div>
+        <div class="warning">
+          <p class="deco">주의 사항</p>
+          <ul>
+            <li>
+              분리 가능하다면 뼈대는 고철로, 손잡이가 플라스틱이면 플라스틱으로,
+              나머지 천과 비닐은 일반 종량제 봉투에 넣어 배출
+            </li>
+            <li>
+              분리가 불가능한 자동우산은 펴지지 않게 묶어서 일반 쓰레기로 배출
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/backend/sql_app/template/sign_in.html b/backend/sql_app/template/sign_in.html
index 20ce04a..7f9a696 100644
--- a/backend/sql_app/template/sign_in.html
+++ b/backend/sql_app/template/sign_in.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -16,7 +16,7 @@
   <body>
     <main class="sign">
       <div class="login-wrapper">
-        <div class="toMain"><a href="/"> 2팀프젝 </a></div>
+        <div class="toMain"><a href="../template/main.html"> 2팀프젝 </a></div>
         <form method="post" action="서버의url" id="login-form">
           <!-- 나중에 action 통해 서버로 데이터 전송하고 redirection? 하는
           방향으로 -->
@@ -26,7 +26,9 @@
             <input type="checkbox" id="remember-check" />아이디 저장하기
           </label> -->
           <input type="submit" value="로그인" />
-          <div class="signToSign"><a href="/sign_up">회원가입</a></div>
+          <div class="signToSign">
+            <a href="../template/sign_up.html">회원가입</a>
+          </div>
         </form>
       </div>
     </main>
diff --git a/backend/sql_app/template/sign_up.html b/backend/sql_app/template/sign_up.html
index 4c28e0c..676fd00 100644
--- a/backend/sql_app/template/sign_up.html
+++ b/backend/sql_app/template/sign_up.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>부산분리배출</title>
-    <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -16,10 +16,11 @@
   <body>
     <main class="sign">
       <div class="login-wrapper">
-        <div class="toMain"><a href="/"> 2팀프젝 </a></div>
+        <div class="toMain"><a href="../template/main.html"> 2팀프젝 </a></div>
         <form method="post" action="서버의url" id="login-form">
           <!-- 나중에 action 통해 서버로 데이터 전송하고 redirection? 하는
           방향으로 -->
+          <input type="text" name="userName" placeholder="닉네임" />
           <input type="text" name="userName" placeholder="이메일" />
           <input type="password" name="userPassword" placeholder="비밀번호" />
           <input
@@ -51,7 +52,9 @@
           </select>
           <input type="submit" value="회원가입" />
 
-          <div class="signToSign"><a href="/sign_in">로그인</a></div>
+          <div class="signToSign">
+            <a href="../template/sign_in.html">로그인</a>
+          </div>
         </form>
       </div>
     </main>
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
new file mode 100644
index 0000000..e69de29