diff --git a/index.html b/index.html
index 610b9b9..f2770de 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
   <title>Vite + React + TS</title>
 </head>
 
-<body class="m-0 min-h-screen flex place-items-center">
+<body class="m-0 min-h-screen">
   <div id="root" class="my-0 mx-auto"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
diff --git a/src/error-page.tsx b/src/error-page.tsx
new file mode 100644
index 0000000..33ff033
--- /dev/null
+++ b/src/error-page.tsx
@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError() as {
+    status?: number,
+    statusText?: string,
+    message?: string,
+  };
+  console.error(error);
+
+  return (
+    <div>
+      <h1>{error.status} {error.statusText || error.message}</h1>
+      <p><i>Atsiprašome, įvyko nenumatyta klaida.</i></p>
+    </div>
+  );
+}
diff --git a/src/index.css b/src/index.css
index f9cebf3..7be8d7f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  h1 {
+    @apply text-2xl my-5;
+  }
+
+  p,
+  li {
+    @apply my-4;
+  }
+
+  a.nav-button {
+    @apply bg-neutral-100 dark:bg-neutral-900 cursor-pointer px-5 py-2 rounded-lg border border-transparent hover:border-indigo-500 transition-colors duration-1000;
+  }
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   color-scheme: light dark;
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..ab3f6a6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,34 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
 import './index.css'
-import App from './App.tsx'
+import List from './routes/list.tsx'
+import Root from './routes/root.tsx'
+import ErrorPage from './error-page.tsx';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "/list",
+        element: <List />,
+      },
+      {
+        path: "/fetch",
+        element: <div/>,
+      },
+    ],
+  },
+]);
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 )
diff --git a/src/App.tsx b/src/routes/list.tsx
similarity index 100%
rename from src/App.tsx
rename to src/routes/list.tsx
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
new file mode 100644
index 0000000..ccee0e6
--- /dev/null
+++ b/src/routes/root.tsx
@@ -0,0 +1,17 @@
+import { Outlet, Link } from "react-router-dom";
+
+export default function Root() {
+  return (
+    <>
+      <nav className="mx-auto flex items-center justify-center gap-x-5 py-6 px-8">
+        <Link to={`/list`} className="nav-button">Sąrašas</Link>
+        <Link to={`/fetch`} className="nav-button">Duomenys</Link>
+      </nav>
+      <main className="flex justify-center">
+        <article>
+          <Outlet />
+        </article>
+      </main>
+    </>
+  );
+}
\ No newline at end of file
