diff --git a/skillswap/src/App.jsx b/skillswap/src/App.jsx
index 336718fdfea40a08101406df8e9d25354989bd02..5f84f0657b32b94cb3522edbea03ecf319d157af 100644
--- a/skillswap/src/App.jsx
+++ b/skillswap/src/App.jsx
@@ -1,9 +1,16 @@
 import Header from '@/components/header';
+import Footer from './components/footer';
+
+import { Outlet } from 'react-router-dom';
 
 export default function App() {
   return (
-    <div>
+    <>
       <Header />
-    </div>
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </>
   );
 }
diff --git a/skillswap/src/components/footer.jsx b/skillswap/src/components/footer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..622ef80907dda55c9d58297659ff279b4acc969f
--- /dev/null
+++ b/skillswap/src/components/footer.jsx
@@ -0,0 +1,3 @@
+export default function Footer() {
+  return <div>Footer</div>;
+}
diff --git a/skillswap/src/main.jsx b/skillswap/src/main.jsx
index fb54d7b2364f205ff687de70afacef2d5741b5d5..100a0b6a7f1c4d0e8e804428bbfc2209cdb58873 100644
--- a/skillswap/src/main.jsx
+++ b/skillswap/src/main.jsx
@@ -13,14 +13,16 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
-  },
-  {
-    path: '/login',
-    element: <LoginPage />,
-  },
-  {
-    path: '/register',
-    element: <RegisterPage />,
+    children: [
+      {
+        path: '/login',
+        element: <LoginPage />,
+      },
+      {
+        path: '/register',
+        element: <RegisterPage />,
+      },
+    ],
   },
 ]);