diff --git a/package-lock.json b/package-lock.json
index 96754a98..f33ed4c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "eslint-config-airbnb-typescript": "^18.0.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.0"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -1084,6 +1085,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.20.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz",
@@ -5231,6 +5241,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index b6981e22..a1d66020 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,14 @@
     "dev": "vite",
     "build": "npm run lint && tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "npm run lint -- --fix",
     "preview": "vite preview"
   },
   "dependencies": {
     "eslint-config-airbnb-typescript": "^18.0.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/src/App.tsx b/src/App.tsx
index a7194a74..19faf202 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './pages/router';
 
 export const App = () => {
-    return <div></div>;
+    return <RouterProvider router={router} />;
 };
diff --git a/src/index.css b/src/index.css
index e7d4bb2f..652239b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,14 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
+/* :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -69,4 +69,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */
diff --git a/src/pages/not-found-page/not-found-page.tsx b/src/pages/not-found-page/not-found-page.tsx
new file mode 100644
index 00000000..35e82fdb
--- /dev/null
+++ b/src/pages/not-found-page/not-found-page.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const NotFoundPage: React.FC = () => {
+    return (
+        <section className="bg-white">
+            <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+                <div className="mx-auto max-w-screen-sm text-center">
+                    <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600">
+                        404
+                    </h1>
+                    <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl">
+                        Something's missing.
+                    </p>
+                    <p className="mb-4 text-lg font-light text-gray-500">
+                        Sorry, we can't find that page. You'll find lots to
+                        explore on the home page.
+                    </p>
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/src/pages/router.tsx b/src/pages/router.tsx
new file mode 100644
index 00000000..5d7fea59
--- /dev/null
+++ b/src/pages/router.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { RouteObject, createBrowserRouter } from 'react-router-dom';
+import { NotFoundPage } from './not-found-page/not-found-page';
+
+const routes: RouteObject[] = [
+    {
+        path: '*',
+        element: <NotFoundPage />,
+    },
+];
+
+export const router = createBrowserRouter(routes);