diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 4e3b361..f391d62 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -17,7 +17,9 @@ const DefaultLayout: React.FC<LayoutProps> = ({ children=null }) => {
       ) : (
         <Navbar />
       )}
-      {children}
+      <div style={{marginTop: "105px"}}>
+        {children}
+      </div>
     </>
   );
 };
diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
index f212db3..f21261d 100644
--- a/src/components/shared/NavBar.tsx
+++ b/src/components/shared/NavBar.tsx
@@ -20,13 +20,13 @@ function Navbar() {
     <div>
       <div className={styles.overallHeader}>
         <div>
-          <a href="/public">
+          <Link to="/">
             <img
               src={fintechLogo}
               alt="fintech Logo"
               className={styles.fintechLogo}
             />
-          </a>
+          </Link>
         </div>
         <div>
           <Link to="/announcements" className={styles.Link}>
diff --git a/src/components/shared/NavBarMobile.tsx b/src/components/shared/NavBarMobile.tsx
index 99aefc3..4ba1057 100644
--- a/src/components/shared/NavBarMobile.tsx
+++ b/src/components/shared/NavBarMobile.tsx
@@ -12,11 +12,13 @@ function NavBarMobile() {
     <header>
       <div className={styles.overallHeader}>
         <div>
+          <Link to="/">
           <img
             src={fintechLogo}
             alt="fintech Logo"
             className={styles.fintechLogo}
           />
+          </Link>
         </div>
         <div>
           {showSideBar ? (
diff --git a/src/components/shared/Announcements.tsx b/src/pages/Announcements.tsx
similarity index 88%
rename from src/components/shared/Announcements.tsx
rename to src/pages/Announcements.tsx
index 19507fd..0cdd635 100644
--- a/src/components/shared/Announcements.tsx
+++ b/src/pages/Announcements.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 const Announcements: React.FC = () => {
+  console.log("i am here ")
   return (
     <div>
       <h1>Announcements</h1>
diff --git a/src/components/shared/Events.tsx b/src/pages/Events.tsx
similarity index 100%
rename from src/components/shared/Events.tsx
rename to src/pages/Events.tsx
diff --git a/src/components/shared/Home.tsx b/src/pages/Home.tsx
similarity index 58%
rename from src/components/shared/Home.tsx
rename to src/pages/Home.tsx
index 188dc1b..0422578 100644
--- a/src/components/shared/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,11 +1,8 @@
 import React from "react";
-import Navbar from "./NavBar.tsx";
-import NavbarMobile from "./NavBarMobile.tsx";
 
 const Home: React.FC = () => {
   return (
     <div>
-      <Navbar />
       <h1>Home</h1>
     </div>
   );
diff --git a/src/components/shared/Members.tsx b/src/pages/Members.tsx
similarity index 84%
rename from src/components/shared/Members.tsx
rename to src/pages/Members.tsx
index ffcb320..413a68f 100644
--- a/src/components/shared/Members.tsx
+++ b/src/pages/Members.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const Members: React.FC = () => {
   return (
     <div>
-      <h1>members</h1>
+      <h1>Members</h1>
     </div>
   );
 };
diff --git a/src/components/shared/Recruitment.tsx b/src/pages/Recruitment.tsx
similarity index 100%
rename from src/components/shared/Recruitment.tsx
rename to src/pages/Recruitment.tsx
diff --git a/src/components/shared/Tasks.tsx b/src/pages/Tasks.tsx
similarity index 100%
rename from src/components/shared/Tasks.tsx
rename to src/pages/Tasks.tsx
diff --git a/src/routes/App.tsx b/src/routes/App.tsx
index d1e398b..681e5a2 100644
--- a/src/routes/App.tsx
+++ b/src/routes/App.tsx
@@ -1,9 +1,10 @@
 import DefaultLayout from "components/layout.tsx";
+import { Outlet } from "react-router-dom";
 
 
 const App = () => {
     return (
-      <DefaultLayout/>
+      <DefaultLayout children={<Outlet />}/>
     );
 };
 
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 74434a2..0e38074 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -1,6 +1,40 @@
 import { createBrowserRouter } from "react-router-dom";
-import routesConfig from "routes/routesConfig.ts";
+import TestPage from "./shared/TestPage.tsx";
+import App from "./App.tsx";
+import Home from "@/pages/Home.tsx";
+import Announcements from "@/pages/Announcements.tsx";
+import Members from "@/pages/Members.tsx";
+import Tasks from "@/pages/Tasks.tsx";
+import Events from "@/pages/Events.tsx";
 
-const router = createBrowserRouter(routesConfig);
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [{
+      path: '/',
+      element: <Home />
+    },
+    {
+      path: 'announcements',
+      element: <Announcements />
+    },
+    {
+      path: 'members',
+      element: <Members />
+    },
+    {
+      path: 'events',
+      element: <Events />
+    }, {
+      path: 'tasks',
+      element: <Tasks />
+    }]
+  },
+  {
+    path: "/test",
+    Component: TestPage,
+  }
+]);
 
 export default router;