diff --git a/src/main.tsx b/src/main.tsx
index fd10eb6..4d1541c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,36 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import Map from "./pages/Map/index.tsx";
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import AuthLayout from "./layouts/AuthLayout"
+import AppLayout from "./layouts/AppLayout";
+import Login from "./pages/Login/login";
+import Register from "./pages/Register/register";
+import RoleSelect from "./pages/roleSelect/roleSelect";
+
+const LandingPage = () => (
+  <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    <Link to="/login" style={{ color: 'black', textDecoration: 'underline' }}>Login click here</Link>
+    <Link to="/app" style={{ color: 'blue', textDecoration: 'underline' }}>AppLayout (Preview Layout)</Link>
+  </div>
+);
 
 createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-        <Map />
-    </StrictMode>,
+  <StrictMode>
+    <BrowserRouter>
+      <Routes>
+        {/* ONE Auth Group for all pages with the map background */}
+        <Route path="/" element={<AuthLayout />}>
+          <Route index element={<LandingPage />} />
+          <Route path="login" element={<Login />} />
+          <Route path="register" element={<Register />} />
+          <Route path="role-select" element={<RoleSelect />} />
+        </Route>
+
+        {/* ONE App Group for the main map application */}
+        <Route path="/app" element={<AppLayout />}>
+          <Route index element={<div>Map Content Placeholder</div>} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
 )