diff --git a/frontend/app/(route)/alarm/page.tsx b/frontend/app/(route)/(main)/alarm/page.tsx
similarity index 100%
rename from frontend/app/(route)/alarm/page.tsx
rename to frontend/app/(route)/(main)/alarm/page.tsx
diff --git a/frontend/app/(route)/feed/page.tsx b/frontend/app/(route)/(main)/feed/page.tsx
similarity index 100%
rename from frontend/app/(route)/feed/page.tsx
rename to frontend/app/(route)/(main)/feed/page.tsx
diff --git a/frontend/app/(route)/profile/page.tsx b/frontend/app/(route)/(main)/profile/page.tsx
similarity index 100%
rename from frontend/app/(route)/profile/page.tsx
rename to frontend/app/(route)/(main)/profile/page.tsx
diff --git a/frontend/app/(route)/search/_components/PostItem/index.tsx b/frontend/app/(route)/(main)/search/_components/PostItem/index.tsx
similarity index 100%
rename from frontend/app/(route)/search/_components/PostItem/index.tsx
rename to frontend/app/(route)/(main)/search/_components/PostItem/index.tsx
diff --git a/frontend/app/(route)/search/_components/PostItem/pokeCard.module.css b/frontend/app/(route)/(main)/search/_components/PostItem/pokeCard.module.css
similarity index 100%
rename from frontend/app/(route)/search/_components/PostItem/pokeCard.module.css
rename to frontend/app/(route)/(main)/search/_components/PostItem/pokeCard.module.css
diff --git a/frontend/app/(route)/search/_components/PostList/index.tsx b/frontend/app/(route)/(main)/search/_components/PostList/index.tsx
similarity index 100%
rename from frontend/app/(route)/search/_components/PostList/index.tsx
rename to frontend/app/(route)/(main)/search/_components/PostList/index.tsx
diff --git a/frontend/app/(route)/search/_components/PostList/postList.module.css b/frontend/app/(route)/(main)/search/_components/PostList/postList.module.css
similarity index 100%
rename from frontend/app/(route)/search/_components/PostList/postList.module.css
rename to frontend/app/(route)/(main)/search/_components/PostList/postList.module.css
diff --git a/frontend/app/(route)/search/_components/SearchInput/index.tsx b/frontend/app/(route)/(main)/search/_components/SearchInput/index.tsx
similarity index 100%
rename from frontend/app/(route)/search/_components/SearchInput/index.tsx
rename to frontend/app/(route)/(main)/search/_components/SearchInput/index.tsx
diff --git a/frontend/app/(route)/search/_components/SearchInput/searchInput.module.css b/frontend/app/(route)/(main)/search/_components/SearchInput/searchInput.module.css
similarity index 100%
rename from frontend/app/(route)/search/_components/SearchInput/searchInput.module.css
rename to frontend/app/(route)/(main)/search/_components/SearchInput/searchInput.module.css
diff --git a/frontend/app/(route)/search/page.module.css b/frontend/app/(route)/(main)/search/page.module.css
similarity index 100%
rename from frontend/app/(route)/search/page.module.css
rename to frontend/app/(route)/(main)/search/page.module.css
diff --git a/frontend/app/(route)/search/page.tsx b/frontend/app/(route)/(main)/search/page.tsx
similarity index 100%
rename from frontend/app/(route)/search/page.tsx
rename to frontend/app/(route)/(main)/search/page.tsx
diff --git a/frontend/app/_common/BottomMenu/bottomMenu.module.css b/frontend/app/_common/BottomMenu/bottomMenu.module.css
index 0283e5d..5a26e68 100644
--- a/frontend/app/_common/BottomMenu/bottomMenu.module.css
+++ b/frontend/app/_common/BottomMenu/bottomMenu.module.css
@@ -1,11 +1,18 @@
-.main {
-  background-color: white;
+.main_wrapper {
+  width: 100%;
   display: flex;
-  width: 360px;
-  border-top: 1px solid #999999;
+  justify-content: center;
+  align-items: center;
+}
+.util_wrapper {
+  background-color: #fff;
+  display: flex;
+  width: 100%;
+  max-width: 700px;
   position: fixed;
   z-index: 100;
   bottom: 0;
+  margin: auto;
 }
 .link {
   flex: 1;
@@ -16,13 +23,17 @@
 .button {
   display: flex;
   flex-direction: column;
-  padding: 8px 0;
+  padding: 4px 0;
   align-items: center;
   color: #999999;
   color:#ff5757;
 }
-
 .icon {
   width: 24px;
   height: 24px;
+}
+@media (min-width:1001px) {
+  .main_wrapper {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/_common/BottomMenu/index.tsx b/frontend/app/_common/BottomMenu/index.tsx
index ff67d80..9badb10 100644
--- a/frontend/app/_common/BottomMenu/index.tsx
+++ b/frontend/app/_common/BottomMenu/index.tsx
@@ -10,38 +10,41 @@ import Link from 'next/link'
 import style from './bottomMenu.module.css'
 
 const userTools = () => (
-  <div className={style.main}>
-    <Link href="/" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faHouse} className={style.icon} />
-        <span>메인</span>
-      </button>
-    </Link>
-    <Link href="/feed" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faClipboard} className={style.icon} />
-        <span>피드</span>
-      </button>
-    </Link>
-    <Link href="search" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faMagnifyingGlass} className={style.icon} />
-        <span>검색</span>
-      </button>
-    </Link>
-    <Link href="alarm" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faBell} className={style.icon} />
-        <span>알림</span>
-      </button>
-    </Link>
-    <Link href="profile" className={style.link}>
-      <button type="button" className={style.button}>
-        <FontAwesomeIcon icon={faUser} className={style.icon} />
-        <span>내 정보</span>
-      </button>
-    </Link>
+  <div className={style.main_wrapper}>
+    <div className={style.util_wrapper}>
+      <Link href="/" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faHouse} className={style.icon} />
+          <span>메인</span>
+        </button>
+      </Link>
+      <Link href="/feed" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faClipboard} className={style.icon} />
+          <span>피드</span>
+        </button>
+      </Link>
+      <Link href="search" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faMagnifyingGlass} className={style.icon} />
+          <span>검색</span>
+        </button>
+      </Link>
+      <Link href="alarm" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faBell} className={style.icon} />
+          <span>알림</span>
+        </button>
+      </Link>
+      <Link href="profile" className={style.link}>
+        <button type="button" className={style.button}>
+          <FontAwesomeIcon icon={faUser} className={style.icon} />
+          <span>내 정보</span>
+        </button>
+      </Link>
   </div>
+  </div>
+  
 )
 
 export default userTools
diff --git a/frontend/app/_components/Carousel/carousel.module.css b/frontend/app/_components/Carousel/carousel.module.css
index a385136..f981b6d 100644
--- a/frontend/app/_components/Carousel/carousel.module.css
+++ b/frontend/app/_components/Carousel/carousel.module.css
@@ -1,7 +1,14 @@
-.main {
+.main_wrapper {
   width: 100%;
+  background-color: rgba(255, 141, 35, 0.705);
+  margin-bottom: 24px;
 }
-.carouselContainer {
+.data_wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+}
+.carousel_container {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -25,7 +32,7 @@
 .carouselItems {
   display: flex;
   position: relative;
-  height: 100%;
+  max-height: 440px;
   padding: 0;
   margin: 0;
 }
@@ -33,20 +40,23 @@
   display: flex;
   flex: none;
   width: 100%;
+  min-height: 300px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
-.carouselTextContainer {
+.carousel_text_container {
   position: absolute;
   width: 100%;
   bottom: 0;
   background: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 0, 0, 0.3));
   padding: 0 24px;
 }
-.carouselText {
+.carousel_text {
   margin: 0;
-  color: white;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
 }
 .carouselImage {
   width: 100%;
@@ -68,4 +78,37 @@
 }
 .monthlyCatText {
   margin-bottom: 12px;
+}
+/* @media (min-width:481px) {
+  .main_wrapper {
+    display: hidden;
+  }
+} */
+@media (min-width:601px) {
+  .main_wrapper {
+    height: 302px;
+    margin-bottom: 100px;
+  }
+  .data_wrapper {
+    position: absolute;
+    top: 80px;
+    justify-content: center;
+    align-items: center;
+    padding: 0 40px;
+  }
+  .carousel_container {
+    min-width: 268px;
+    flex: 1;
+    max-width: 560px;
+    height: 284px;
+    border-radius: 20px;
+  }
+  .carousel_text_container {
+    position: relative;
+    background:none;
+    flex-shrink: 0;
+    width: 236px;
+    height:206px;
+    padding: 24px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/_components/Carousel/index.tsx b/frontend/app/_components/Carousel/index.tsx
index b9ee0e3..005fdcf 100644
--- a/frontend/app/_components/Carousel/index.tsx
+++ b/frontend/app/_components/Carousel/index.tsx
@@ -78,48 +78,51 @@ function Carousel({ carouselList }: CarouselProps) {
   }, 5000)
 
   return (
-    <div className={style.main}>
-      <div className={style.carouselContainer}>
-        <FaChevronCircleLeft
-          size={20}
-          color="#000000"
-          opacity={0.5}
-          className={cn(style.moveBtn, style.left)}
-          onClick={() => handleSwipe(-1)}
-        />
-        <FaChevronCircleRight
-          size={20}
-          color="#000000"
-          opacity={0.5}
-          className={cn(style.moveBtn, style.right)}
-          onClick={() => handleSwipe(1)}
-        />
-        <ul className={style.carouselItems} ref={carouselRef}>
-          {currList?.map((image, idx) => {
-            const key = `${image.url}-${idx}`
-            return (
-              <li key={key} className={style.carouselItem}>
-                <img
-                  src={image.url}
-                  alt="carousel-img"
-                  className={style.carouselImage}
-                />
-              </li>
-            )
-          })}
-        </ul>
-        <div className={style.carouselTextContainer}>
+    <section className={style.main_wrapper}>
+      <div className={style.data_wrapper}>
+        <div className={style.carousel_container}>
+          <FaChevronCircleLeft
+            size={20}
+            color="#000000"
+            opacity={0.5}
+            className={cn(style.moveBtn, style.left)}
+            onClick={() => handleSwipe(-1)}
+          />
+          <FaChevronCircleRight
+            size={20}
+            color="#000000"
+            opacity={0.5}
+            className={cn(style.moveBtn, style.right)}
+            onClick={() => handleSwipe(1)}
+          />
+          <ul className={style.carouselItems} ref={carouselRef}>
+            {currList?.map((image, idx) => {
+              const key = `${image.url}-${idx}`
+              return (
+                <li key={key} className={style.carouselItem}>
+                  <img
+                    src={image.url}
+                    alt="carousel-img"
+                    className={style.carouselImage}
+                  />
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+        <div className={style.carousel_text_container}>
           <div className={style.monthlyCatBadge}>이달의 고양이</div>
           <div className={style.monthlyCatText}>
             {currList[currIndex]?.text.split('\n').map((line) => (
-              <p className={style.carouselText} key={line}>
+              <p className={style.carousel_text} key={line}>
                 {line}
               </p>
             ))}
           </div>
         </div>
       </div>
-    </div>
+      
+    </section>
   )
 }
 
diff --git a/frontend/app/_components/Navbar2/index.tsx b/frontend/app/_components/Navbar2/index.tsx
index dd258ff..ba49b9e 100644
--- a/frontend/app/_components/Navbar2/index.tsx
+++ b/frontend/app/_components/Navbar2/index.tsx
@@ -8,21 +8,28 @@ import style from './navbar2.module.css'
 import {useRouter} from 'next/navigation'
 import { useRecoilState } from 'recoil'
 import { authState } from '@/app/_store/atom/auth'
+import { usePathname } from 'next/navigation'
+
+const navItems = [
+  {name:'투데이' ,path:'/'},
+  {name:'피드', path:'/feed'},
+  {name:'검색', path:'/search'},
+  {name:'알림',path:'/alarm'},
+  {name:'프로필',path:'/profile'}
+]
 
 function Navbar2() {
   const [scrollY, setScrollY] = useState(0)
   const [auth,setAuth] = useRecoilState(authState);
+  
+  const pathname = usePathname();
   const router = useRouter();
   useEffect(() => {
     const handleScroll = () => {
-      // window.scrollY를 사용하여 현재 스크롤 위치를 가져옵니다.
       setScrollY(window.scrollY)
     }
-
-    // 스크롤 이벤트 리스너를 추가합니다.
     window.addEventListener('scroll', handleScroll)
 
-    // 컴포넌트 언마운트 시 이벤트 리스너를 제거합니다.
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
@@ -38,17 +45,34 @@ function Navbar2() {
     }
   }
   return (
-    <div className={cn(style.main, { [style.scrolled]: scrollY > 0 })}>
-      <div>왓냐옹</div>
-      <div>
-        {auth ? 
-        <button className={style.navBtn} onClick={onHandleLogout}>로그아웃</button> :
-        <Link href="/login" className={style.navBtn}>
-          로그인
-        </Link>
+    <section className={cn(style.main_wrapper, { [style.scrolled]: scrollY > 0 })}>
+      <h3 className={style.logo_wrapper}>
+        <Link href='/'>LOGO</Link>
+      </h3>
+      <nav className={style.nav}>
+        <ul className={style.nav_ul}>
+          {navItems.map(({name,path},idx)=>
+            <li key={`${name}-${idx}`}>
+              <Link href={path} className={cn(style.nav_link,{[style.nav_clicked]: pathname===path })}>{name}</Link>
+            </li>
+          )}
+        </ul>
+      </nav>
+      <ul className={style.util_ul}>
+        {auth ?
+        <li>
+          <button className={cn(style.util_button,{[style.util_scrolled]: scrollY > 0})} onClick={onHandleLogout}>로그아웃</button>
+        </li> :
+        <li>
+          <Link href="/login">
+            <button  className={cn(style.util_button,{[style.util_scrolled]: scrollY > 0})}>
+              로그인
+            </button>
+          </Link>
+        </li>
         }
-      </div>
-    </div>
+      </ul>
+    </section>
   )
 }
 
diff --git a/frontend/app/_components/Navbar2/navbar2.module.css b/frontend/app/_components/Navbar2/navbar2.module.css
index ab60d2b..3932efe 100644
--- a/frontend/app/_components/Navbar2/navbar2.module.css
+++ b/frontend/app/_components/Navbar2/navbar2.module.css
@@ -1,22 +1,66 @@
-.main {
+.main_wrapper {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
   position: fixed;
-  width: 360px;
+  width: 100%;
+  height: 44px;
   z-index: 10;
-  /* background:linear-gradient(#00000041,#ffffff00); */
+  padding: 0 24px;
   background-color: transparent;
-  color: white;
-  padding: 8px 24px;
 }
 .scrolled {
   background-color: rgba(255,255,255,0.8);
-  color: black;
 }
-.navBtn {
+.logo_wrapper {
+  margin-right: 8px;
+}
+.nav {
+  display: none;
+}
+.nav_ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nav_link {
+  padding: 12px 24px;
+}
+.nav_clicked {
+  font-weight: bold;
+  font-size: 16px;
+}
+.util_ul {
+  margin-left: auto;
+}
+.util_button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: white;
   color: black;
-  border-radius: 15px;
+  border-radius: 8px;
   padding: 4px 8px;
-  font-size: 14px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.util_button.util_scrolled {
+  background-color: #333;
+  color: #fff;
+}
+
+@media (min-width:1001px) {
+  .main_wrapper {
+    background-color: white;
+    height: 64px;
+    color:black;
+  }
+  .nav {
+    display: block;
+  }
+  .util_button {
+    color: white;
+    background-color: #333;
+    height: 32px;
+    width: 80px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 2b7e6ea..ed1d498 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -5,20 +5,11 @@
   font-family: 'Spoqa Han Sans Neo', 'sans-serif';
 }
 
-html {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: black;
-}
-
 body {
   position: relative;
   margin: 0;
   padding: 0;
   display: flex;
-  width:360px;
   flex-direction: column;
   box-sizing: border-box;
 }