diff --git a/src/App.tsx b/src/App.tsx
index e473ce1..a74d371 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,33 @@
+import { createHashRouter, RouterProvider } from 'react-router-dom';
+
+import MainLayout from '@/layouts/MainLayout';
+import LoginPage from '@pages/LoginPage';
+import MainPage from '@pages/MainPage';
+import WelcomePage from '@pages/WelcomePage';
+
+const router = createHashRouter([
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      {
+        path: '/',
+        element: <WelcomePage />,
+      },
+      {
+        path: 'login',
+        element: <LoginPage />,
+      },
+      {
+        path: 'mainpage',
+        element: <MainPage />,
+      },
+    ],
+  },
+]);
+
 function App() {
-  return (
-    <div className="h-[100dvh] bg-[green] text-3xl">
-      <div>Hello, I&apos;m the future graphiql app!</div>
-      <div>Trulala</div>
-    </div>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
new file mode 100644
index 0000000..e2b9ccc
--- /dev/null
+++ b/src/layouts/MainLayout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+
+export default function MainLayout() {
+  return (
+    <main>
+      <header>Here will be header</header>
+      <section>
+        <Outlet />
+      </section>
+      <footer>Here will be footer</footer>
+    </main>
+  );
+}
diff --git a/src/pages/.gitkeep b/src/pages/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..5152c3b
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <section>Here is my fancy login page!</section>;
+}
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100644
index 0000000..a92be59
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <section>Here is my fancy main page!</section>;
+}
diff --git a/src/pages/WelcomePage.tsx b/src/pages/WelcomePage.tsx
new file mode 100644
index 0000000..1ab3d41
--- /dev/null
+++ b/src/pages/WelcomePage.tsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+export default function LoginPage() {
+  return (
+    <section>
+      Here is my fancy welcome page!
+      <div className="flex flex-col">
+        <Link to="../login">login</Link>
+        <Link to="../mainpage">main page</Link>
+      </div>
+    </section>
+  );
+}