diff --git a/web/src/App.tsx b/web/src/App.tsx
index 63bf493..6c7ca47 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,6 +4,10 @@ import WebLayout from "./layouts/WebLayout";
 import NotFound from './pages/NotFound';
 
 import ROUTE_CONSTANTS from './types/routes';
+import Create from './pages/Create';
+import Favorites from './pages/Favorites';
+import Profile from './pages/Profile';
+import ShoppingList from './pages/ShoppingList';
 
 function App() {
   return (
@@ -13,6 +17,11 @@ function App() {
         <Route path="/v2/web" element={<WebLayout />}>
           <Route index element={<Navigate to={ROUTE_CONSTANTS.Home} replace />} />
           <Route path="home" element={<Home />} />
+          <Route path="favorites" element={<Favorites />} />
+          <Route path="create" element={<Create />} />
+          <Route path="profile" element={<Profile />} />
+          <Route path="list" element={<ShoppingList />} />
+
           {/* <Route path="recipe/:id" element={<Home />} /> */}
 
         </Route>
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index b59ff8b..0ebd4a8 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -38,7 +38,7 @@ export default function Navigation() {
                   d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
                 ></path>
               </svg>
-              <svg 
+              <svg
                 className={`${displayHamburgerMenu ? "hidden" : "flex"} size-5`}
                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                 <path
diff --git a/web/src/layouts/WebLayout.tsx b/web/src/layouts/WebLayout.tsx
index eee2cdb..7c63cb4 100644
--- a/web/src/layouts/WebLayout.tsx
+++ b/web/src/layouts/WebLayout.tsx
@@ -6,8 +6,12 @@ export default function WebLayout() {
 
   return (
     <>
-      <Navigation />
-      <Outlet />
+      <div className="bg-gray-100 min-h-[100vh]">
+        <Navigation />
+        <div className="pt-0 md:pt-14">
+          <Outlet />
+        </div>
+      </div>
     </>
 
   );
diff --git a/web/src/pages/Create.tsx b/web/src/pages/Create.tsx
new file mode 100644
index 0000000..865a3d0
--- /dev/null
+++ b/web/src/pages/Create.tsx
@@ -0,0 +1,8 @@
+
+export default function Create() {
+  return (
+    <>
+      <p>Create</p>
+    </>
+  );
+}
diff --git a/web/src/pages/Favorites.tsx b/web/src/pages/Favorites.tsx
new file mode 100644
index 0000000..bf231a5
--- /dev/null
+++ b/web/src/pages/Favorites.tsx
@@ -0,0 +1,7 @@
+export default function Favorites() {
+  return (
+    <>
+      <p>Favorites</p>
+    </>
+  );
+}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 1a39e91..2c30a5f 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,9 +1,7 @@
-
-
 export default function Home() {
   return (
     <>
-      <p className="text-red-500">Hello world </p>
+      <p>Home</p>
     </>
   );
 }
diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx
new file mode 100644
index 0000000..355a3d1
--- /dev/null
+++ b/web/src/pages/Profile.tsx
@@ -0,0 +1,7 @@
+export default function Profile() {
+  return (
+    <>
+      <p>Profile</p>
+    </>
+  );
+}
diff --git a/web/src/pages/ShoppingList.tsx b/web/src/pages/ShoppingList.tsx
new file mode 100644
index 0000000..c6ded7f
--- /dev/null
+++ b/web/src/pages/ShoppingList.tsx
@@ -0,0 +1,7 @@
+export default function ShoppingList() {
+  return (
+    <>
+      <p>ShoppingList</p>
+    </>
+  );
+}