diff --git a/README.md b/README.md
index ff06dd171..3716fc4c0 100644
--- a/README.md
+++ b/README.md
@@ -31,5 +31,5 @@ The `Tabs` page should also show a `Tabs` component implemented in [React Tabs](
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
 - Open one more terminal and run tests with `npm test` to ensure your solution is correct.
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_tabs-with-router/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://artyomwhite.github.io/react_tabs-with-router/) and add it to the PR description.
 
diff --git a/package-lock.json b/package-lock.json
index 0129b3c14..6723a927a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2126,9 +2126,9 @@
       }
     },
     "@mate-academy/scripts": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.3.tgz",
-      "integrity": "sha512-clsxVN4sQap5pgFev+WOEi9GVSYU5/C6puBgwGFmwePMTK+ssFFw+tdE5agrKkqmRsEgT38+wRbzITh+rZs1Yw==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.8.tgz",
+      "integrity": "sha512-MqvuqrG8UUzQkRc375ZUIOd23nJ0BYqae/Nn5t01aDutSqZnz1ye65W4sLHiSuQJGIuHRO0CEyJxAO72wX1efw==",
       "dev": true,
       "requires": {
         "@octokit/rest": "^17.11.2",
@@ -4147,9 +4147,9 @@
       }
     },
     "before-after-hook": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
       "dev": true
     },
     "bfj": {
@@ -12420,9 +12420,9 @@
       "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw=="
     },
     "macos-release": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz",
-      "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz",
+      "integrity": "sha512-DXqXhEM7gW59OjZO8NIjBCz9AQ1BEMrfiOAl4AYByHCtVHRF4KoGNO8mqQeM8lRCtQe/UnJ4imO/d2HdkKsd+A==",
       "dev": true
     },
     "magic-string": {
@@ -13316,9 +13316,9 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
diff --git a/src/App.tsx b/src/App.tsx
index 621008eff..63dac4323 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,52 +1,25 @@
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigation } from './components/Nav';
+import { HomePage } from './components/pagesRout/Home';
+import { ErrorPage } from './components/pagesRout/NotFound';
+import { TabsPage } from './components/pagesRout/Tabs';
 
-// const tabs = [
-//   { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
-//   { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
-//   { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
-// ];
-
-export const App = () => (
-  <>
-    {/* Also requires <html class="has-navbar-fixed-top"> */}
-    <nav
-      className="navbar is-light is-fixed-top is-mobile has-shadow"
-      data-cy="Nav"
-    >
-      <div className="container">
-        <div className="navbar-brand">
-          <a href="/" className="navbar-item is-active">Home</a>
-          <a href="/tabs" className="navbar-item">Tabs</a>
-        </div>
-      </div>
-    </nav>
-
-    <div className="section">
-      <div className="container">
-        <h1 className="title">Home page</h1>
-        <h1 className="title">Tabs page</h1>
-        <h1 className="title">Page not found</h1>
-
-        <div className="tabs is-boxed">
-          <ul>
-            <li data-cy="Tab" className="is-active">
-              <a href="#/">Tab 1</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 2</a>
-            </li>
-            <li data-cy="Tab">
-              <a href="#/">Tab 3</a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="block" data-cy="TabContent">
-          Please select a tab
-        </div>
-      </div>
-    </div>
-  </>
-);
+export const App = () => {
+  return (
+    <>
+      <Navigation />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="tabs">
+          <Route index element={<TabsPage />} />
+          <Route path=":tabId" element={<TabsPage />} />
+        </Route>
+        <Route path="*" element={<ErrorPage />} />
+        <Route path="/home" element={<Navigate to="/" />} />
+      </Routes>
+    </>
+  );
+};
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 000000000..80e77cd98
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+
+const getActiveLink = ({ isActive }: { isActive: boolean }) => classNames(
+  'navbar-item', { 'is-active': isActive },
+);
+
+export const Navigation = () => {
+  return (
+    <nav
+      className="navbar is-light is-fixed-top is-mobile has-shadow"
+      data-cy="Nav"
+    >
+      <div className="container">
+        <div className="navbar-brand">
+          <NavLink to="/" className={getActiveLink}>Home</NavLink>
+          <NavLink to="/tabs" className={getActiveLink}>Tabs</NavLink>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/pagesRout/Home.tsx b/src/components/pagesRout/Home.tsx
new file mode 100644
index 000000000..dd35a7b71
--- /dev/null
+++ b/src/components/pagesRout/Home.tsx
@@ -0,0 +1,9 @@
+export const HomePage = () => {
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Home page</h1>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/pagesRout/NotFound.tsx b/src/components/pagesRout/NotFound.tsx
new file mode 100644
index 000000000..de9eed1a8
--- /dev/null
+++ b/src/components/pagesRout/NotFound.tsx
@@ -0,0 +1,9 @@
+export const ErrorPage = () => {
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Page not found</h1>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/pagesRout/Tabs.tsx b/src/components/pagesRout/Tabs.tsx
new file mode 100644
index 000000000..0eb45f73a
--- /dev/null
+++ b/src/components/pagesRout/Tabs.tsx
@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { Link, useParams } from 'react-router-dom';
+
+const tabs = [
+  { id: 'tab-1', title: 'Tab 1', content: 'Some text 1' },
+  { id: 'tab-2', title: 'Tab 2', content: 'Some text 2' },
+  { id: 'tab-3', title: 'Tab 3', content: 'Some text 3' },
+];
+
+export const TabsPage = () => {
+  const { tabId } = useParams();
+  const selectedTab = tabs.find(tab => tab.id === tabId);
+
+  return (
+
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Tabs page</h1>
+        <div className="tabs is-boxed">
+          <ul>
+            {tabs.map(tab => (
+              <li
+                key={tab.id}
+                data-cy="Tab"
+                className={
+                  classNames({
+                    'is-active': tab.id === tabId,
+                  })
+                }
+              >
+                <Link to={`../${tab.id}`}>{tab.title}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="block" data-cy="TabContent">
+          {selectedTab?.content || 'Please select a tab'}
+        </div>
+
+      </div>
+
+    </div>
+  );
+};