diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx
index a727745..6d140a7 100644
--- a/FITple-Frontend/src/App.jsx
+++ b/FITple-Frontend/src/App.jsx
@@ -1,5 +1,4 @@
 import "./App.css";
-import Navbar from "./components/Navbar/Navbar";
 import { Routes } from "react-router-dom";
 import { Route } from "react-router-dom";
 import LoginPage from "./pages/LoginPage/LoginPage";
@@ -7,27 +6,34 @@ import SignupPage from "./pages/SignupPage/SignupPage";
 import ClothdetailPage from "./pages/ClothdetailPage/ClothdetailPage";
 import ClothmainPage from "./pages/ClothmainPage/ClothmainPage";
 import UserInfoPage from "./pages/UserInfoPage/UserInfoPage";
-import { useLocation } from "react-router-dom";
 import ProfilePage from "./pages/ProfilePage/ProfilePage";
 import RecomMainPage from "./pages/RecomMainPage/RecomMainPage";
+import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
+import RecomUserFeedPage from "./pages/RecomUserFeedPage/RecomUserFeedPage";
+// import RecomAllPage from "./pages/RecomAllPage/RecomAllPage";
+
+import LayoutNonNav from "./layout/LayoutNonNav";
+import Layout from "./layout/Layout";
 function App() {
-  const location = useLocation();
-  console.log("Current path:", location.pathname);
-  // Navbar를 제외할 경로 목록
-  const excludeNavbarPaths = ["/", "/SignUp", "/user"];
   return (
     <>
-      {/* 특정 경로에서만 Navbar 렌더링 */}
-      {!excludeNavbarPaths.includes(location.pathname) && <Navbar />}
-      {/* 각자 route 설정하기 */}
       <Routes>
-        <Route path="/" element={<LoginPage />} />
-        <Route path="/signup" element={<SignupPage />} />
-        <Route path="/user" element={<UserInfoPage />} />
-        <Route path="/cloth" element={<ClothmainPage />} />
-        <Route path="/detail" element={<ClothdetailPage />} />
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route path="/recommend" element={<RecomMainPage />} />
+        {/* Navbar 없는 layout */}
+        <Route element={<LayoutNonNav />}>
+          <Route path="/" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/user" element={<UserInfoPage />} />
+        </Route>
+        {/* Navbar 있는 layout */}
+        <Route element={<Layout />}>
+          <Route path="/cloth" element={<ClothmainPage />} />
+          <Route path="/detail" element={<ClothdetailPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/recommend" element={<RecomMainPage />} />
+          <Route path="/recommendall" element={<RecomAllPage />} />
+          <Route path="/recommendcloth" element={<RecomAllPage />} />
+          <Route path="/recommendfeed" element={<RecomUserFeedPage />} />
+        </Route>
       </Routes>
     </>
   );
diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx
index 6a6408e..4c70ea3 100644
--- a/FITple-Frontend/src/components/Navbar/Navbar.jsx
+++ b/FITple-Frontend/src/components/Navbar/Navbar.jsx
@@ -29,9 +29,9 @@ const Navbar = () => {
           {/* 메뉴 */}
           <MenuBox>
             <MenuItem to="/cloth">옷장</MenuItem>
-            <MenuItem>추천</MenuItem>
+            <MenuItem to="/recommend">추천</MenuItem>
             <MenuItem>검색</MenuItem>
-            <MenuItem>프로필</MenuItem>
+            <MenuItem to="/profile">프로필</MenuItem>
           </MenuBox>
         </MainBox>
         {/* 오른쪽 검색 영역 */}
@@ -46,5 +46,4 @@ const Navbar = () => {
   );
 };
 
-
 export default Navbar;
diff --git a/FITple-Frontend/src/layout/Layout.jsx b/FITple-Frontend/src/layout/Layout.jsx
new file mode 100644
index 0000000..08f2c9c
--- /dev/null
+++ b/FITple-Frontend/src/layout/Layout.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import Navbar from "../components/Navbar/Navbar";
+
+const Layout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/FITple-Frontend/src/layout/LayoutNonNav.jsx b/FITple-Frontend/src/layout/LayoutNonNav.jsx
new file mode 100644
index 0000000..c4cebc2
--- /dev/null
+++ b/FITple-Frontend/src/layout/LayoutNonNav.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+const LayoutNonNav = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default LayoutNonNav;