diff --git a/src/App.tsx b/src/App.tsx
index f587aebf0..4476bfa37 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,55 +1,66 @@
+import React, { Suspense } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import './App.scss';
 
-// 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' },
-// ];
+import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
+import cn from 'classnames';
 
-export const App = () => (
+const HomePage = () => {
+  return <h1 className="title">Home page</h1>;
+};
+
+const NotFoundPage = () => {
+  return <h1 className="title">Page not found</h1>;
+};
+
+const TabsPage = React.lazy(() =>
+  import('./components/TabsPage').then(module => ({
+    default: module.TabsPage,
+  })),
+);
+
+export const App: React.FC = () => (
   <>
-    {/* 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">
+          <NavLink
+            to="/"
+            className={({ isActive }) =>
+              cn('navbar-item', { 'is-active': isActive })
+            }
+          >
             Home
-          </a>
-          <a href="/tabs" className="navbar-item">
+          </NavLink>
+          <NavLink
+            to="/tabs"
+            className={({ isActive }) =>
+              cn('navbar-item', { 'is-active': isActive })
+            }
+          >
             Tabs
-          </a>
+          </NavLink>
         </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>
+        <Suspense fallback={<p>Loading...</p>}>
+          <Routes>
+            <Route index path="/" element={<HomePage />} />
+            <Route path="/tabs">
+              <Route index element={<TabsPage />} />
+              <Route path=":tabId" element={<TabsPage />} />
+            </Route>
+            <Route path="/home" element={<Navigate to="/" />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </Suspense>
       </div>
     </div>
   </>
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
new file mode 100644
index 000000000..664429bcb
--- /dev/null
+++ b/src/components/Tabs.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import cn from 'classnames';
+import { useTabs } from '../providers/TabsProvider';
+
+export const Tabs: FC = () => {
+  const { tabs, activeTab } = useTabs();
+
+  return (
+    <div data-cy="TabsComponent">
+      <div className="tabs is-boxed">
+        <ul>
+          {tabs.map(tab => (
+            <li
+              key={tab.id}
+              data-cy="Tab"
+              className={cn({ 'is-active': activeTab?.id === tab.id })}
+            >
+              <Link to={`/tabs/${tab.id}`}>{tab.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="block" data-cy="TabContent">
+        {activeTab ? activeTab.content : 'Please select a tab'}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/TabsPage.tsx b/src/components/TabsPage.tsx
new file mode 100644
index 000000000..14ccb32a2
--- /dev/null
+++ b/src/components/TabsPage.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TabsProvider } from '../providers/TabsProvider';
+import { Tabs } from './Tabs';
+
+export const TabsPage: FC = () => (
+  <TabsProvider>
+    <h1 className="title">Tabs page</h1>
+    <Tabs />
+  </TabsProvider>
+);
diff --git a/src/providers/TabsProvider.tsx b/src/providers/TabsProvider.tsx
new file mode 100644
index 000000000..289c03c60
--- /dev/null
+++ b/src/providers/TabsProvider.tsx
@@ -0,0 +1,40 @@
+import React, { createContext, useContext, PropsWithChildren } from 'react';
+import { useParams } from 'react-router-dom';
+import { Tab } from '../types/Tab';
+
+interface TabsContextI {
+  tabs: Tab[];
+  activeTab?: Tab;
+}
+
+const TABS: Tab[] = [
+  { 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' },
+];
+
+const TabsContext = createContext<TabsContextI>({
+  tabs: TABS,
+  activeTab: undefined,
+});
+
+export const TabsProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const { tabId } = useParams<{ tabId?: string }>();
+  const activeTab = TABS.find(tab => tab.id === tabId);
+
+  return (
+    <TabsContext.Provider value={{ tabs: TABS, activeTab }}>
+      {children}
+    </TabsContext.Provider>
+  );
+};
+
+export const useTabs = (): TabsContextI => {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error('useTabs must be used within a TabsProvider');
+  }
+
+  return context;
+};
