Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision a3ae097ff557650aeeb473a86f99d8430c23d60d)
+++ frontend/src/App.tsx	(revision 0f71490112c86ba2e2d18bbf12dac1b42e534433)
@@ -1,34 +1,52 @@
-import { useEffect } from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
 import AllUsers from "./components/userProfile/AllUsersHelper";
 import UserDetail from "./components/userProfile/UserDetailView";
+import LandingPage from "./LandingPage";
+import Login from "./Login";
+import Nav from "./Nav";
+import Register from "./Register";
 
-function Home() {
-  useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetch("http://localhost:8080/");
-      const data = await response.json();
-      console.log(data);
-    };
-    fetchData();
-  });
+const Layout = () => {
+	return (
+		<div className="flex flex-col min-h-screen">
+			<Nav />
+			<main className="grow">
+				<Outlet />
+			</main>
+		</div>
+	);
+};
 
-  return (
-    <>
-      <p className="text-red-500">ok</p>
-    </>
-  );
-}
+const router = createBrowserRouter([
+	{
+		path: "",
+		element: <Layout />,
+		children: [
+			{
+				path: "/",
+				element: <LandingPage />,
+			},
+			{
+				path: "/login",
+				element: <Login />,
+			},
+			{
+				path: "/users",
+				element: <AllUsers />,
+			},
+			{
+				path: "/users/:userId",
+				element: <UserDetail />,
+			},
+			{
+				path: "/register",
+				element: <Register />,
+			},
+		],
+	},
+]);
 
 function App() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/users" element={<AllUsers />} />
-        <Route path="/users/:userId" element={<UserDetail />} />
-      </Routes>
-    </BrowserRouter>
-  );
+	return <RouterProvider router={router} />;
 }