diff --git a/eslint.config.js b/eslint.config.js
index f57fe1a..53326fa 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -42,8 +42,12 @@ export default tseslint.config(
           allowList: {
             props: true,
             prop: true,
+            Props: true,
+            Prop: true,
             ref: true,
             refs: true,
+            Ref: true,
+            Refs: true,
           },
         },
       ],
diff --git a/package-lock.json b/package-lock.json
index a5c4d14..ee855a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.5.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@vitejs/plugin-react": "^4.4.1",
@@ -1626,6 +1628,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -2499,6 +2515,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.42.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.42.0.tgz",
@@ -4817,6 +4842,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
+      "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
+      "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -5041,6 +5104,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index a4a2df5..a254c75 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,14 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.5.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
diff --git a/src/app.test.ts b/src/app.test.ts
deleted file mode 100644
index dfe3445..0000000
--- a/src/app.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { render, screen } from '@testing-library/react';
-import { describe, expect, test } from 'vitest';
-import App from './app.tsx';
-
-describe('Badge', () => {
-  test('renders successfully', () => {
-    render(App());
-    expect(screen.getByText('Hello World')).toBeInTheDocument();
-  });
-});
diff --git a/src/app.tsx b/src/app.tsx
index 3c65265..d06bd32 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,13 @@
+import { BrowserRouter } from 'react-router-dom';
 import './app.css';
+import { Router } from './router';
 
 function App() {
-  return <>Hello World</>;
+  return (
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
+  );
 }
 
 export default App;
diff --git a/src/lib/layouts/main/index.tsx b/src/lib/layouts/main/index.tsx
new file mode 100644
index 0000000..97be987
--- /dev/null
+++ b/src/lib/layouts/main/index.tsx
@@ -0,0 +1,18 @@
+import { Link, Outlet } from 'react-router-dom';
+
+export const MainLayout: React.FC = () => {
+  return (
+    <div className="main-layout">
+      <header>
+        <nav role="navigation" aria-label="Main navigation">
+          <Link to="/">Home</Link>
+          <span aria-hidden="true"> | </span>
+          <Link to="about">About</Link>
+        </nav>
+      </header>
+      <main role="main">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
diff --git a/src/lib/layouts/main/main.test.tsx b/src/lib/layouts/main/main.test.tsx
new file mode 100644
index 0000000..41b2c59
--- /dev/null
+++ b/src/lib/layouts/main/main.test.tsx
@@ -0,0 +1,48 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  createBrowserRouter,
+  RouterProvider,
+  type RouteObject,
+} from 'react-router-dom';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { HomePage } from '../../../pages/home/index.tsx';
+import { MainLayout } from './index.tsx';
+
+const mockRoutes: RouteObject[] = [
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      {
+        path: 'about',
+        element: <div>About Page</div>,
+      },
+    ],
+  },
+];
+let user: ReturnType<typeof userEvent.setup>;
+
+describe('MainLayout with Router', () => {
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  test('renders layout with Home route', async () => {
+    const router = createBrowserRouter(mockRoutes);
+    render(<RouterProvider router={router} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Home Page')).toBeInTheDocument();
+
+    // Navigate to About page
+    const aboutLink = screen.getByRole('link', { name: 'About' });
+    await act(async () => {
+      await user.click(aboutLink);
+    });
+    expect(screen.getByText('About Page')).toBeInTheDocument();
+    expect(screen.queryByText('Home Page')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/errors/not-found.tsx b/src/pages/errors/not-found.tsx
new file mode 100644
index 0000000..c9b03ad
--- /dev/null
+++ b/src/pages/errors/not-found.tsx
@@ -0,0 +1,3 @@
+export function NotFound() {
+  return <div>not-found</div>;
+}
diff --git a/src/pages/home/home.css b/src/pages/home/home.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/home/home.test.tsx b/src/pages/home/home.test.tsx
new file mode 100644
index 0000000..1d9c7d0
--- /dev/null
+++ b/src/pages/home/home.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { HomePage } from './index.tsx';
+
+describe('HomePage', () => {
+  test('renders successfully', () => {
+    render(<HomePage />);
+    expect(screen.getByText('Home Page')).toBeInTheDocument();
+  });
+});
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
new file mode 100644
index 0000000..e16fa60
--- /dev/null
+++ b/src/pages/home/index.tsx
@@ -0,0 +1,5 @@
+import './home.css';
+
+export function HomePage() {
+  return <>Home Page</>;
+}
diff --git a/src/router/index.tsx b/src/router/index.tsx
new file mode 100644
index 0000000..c69a40a
--- /dev/null
+++ b/src/router/index.tsx
@@ -0,0 +1,19 @@
+import { Route, Routes } from 'react-router-dom';
+import { MainLayout } from '../lib/layouts/main';
+import { NotFound } from '../pages/errors/not-found';
+import { HomePage } from '../pages/home';
+
+export function Router() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainLayout />}>
+        <Route index element={<HomePage />} />
+        <Route path="about" element={<div>About Page</div>} />
+      </Route>
+
+      <Route path="auth" element={<div>Auth Page</div>} />
+
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index b35501e..5c6545a 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -24,5 +24,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "vitest.setup.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 45e8553..f298c6e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,5 +8,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
   },
 });
diff --git a/vitest.setup.js b/vitest.setup.ts
similarity index 100%
rename from vitest.setup.js
rename to vitest.setup.ts