diff --git a/package.json b/package.json
index edd6041..327440e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
         "cheerio": "1.0.0-rc.12",
         "react": "experimental",
         "react-dom": "experimental",
+        "react-router-dom": "^6.9.0",
         "rect-use": "^1.0.0"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fec9eb2..1b4c0df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ specifiers:
   cheerio: 1.0.0-rc.12
   react: experimental
   react-dom: experimental
+  react-router-dom: ^6.9.0
   rect-use: ^1.0.0
   typescript: ^4.9.3
   vite: ^3.2.5
@@ -20,6 +21,7 @@ dependencies:
   cheerio: 1.0.0-rc.12
   react: 0.0.0-experimental-9c54b29b4-20230322
   react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my
+  react-router-dom: 6.9.0_tah32hmxhmi2g7goovfvj5m5ou
   rect-use: 1.0.0_tah32hmxhmi2g7goovfvj5m5ou
 
 devDependencies:
@@ -464,6 +466,11 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@remix-run/router/1.4.0:
+    resolution: {integrity: sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@tanstack/query-core/4.27.0:
     resolution: {integrity: sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA==}
     dev: false
@@ -1296,6 +1303,29 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /react-router-dom/6.9.0_tah32hmxhmi2g7goovfvj5m5ou:
+    resolution: {integrity: sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.4.0
+      react: 0.0.0-experimental-9c54b29b4-20230322
+      react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my
+      react-router: 6.9.0_ed6xpwya6oca3tppk6uilvo2my
+    dev: false
+
+  /react-router/6.9.0_ed6xpwya6oca3tppk6uilvo2my:
+    resolution: {integrity: sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.4.0
+      react: 0.0.0-experimental-9c54b29b4-20230322
+    dev: false
+
   /react/0.0.0-experimental-9c54b29b4-20230322:
     resolution: {integrity: sha512-aFi5dUOoDIxM1zVPbrwcltNii/ZEBJGj1ODqmq+RIPScX/Q7fpHnBHHoomJIfBxx9bhK13ygr1bDWmj0Q13V0Q==}
     engines: {node: '>=0.10.0'}
diff --git a/src/app/App.css b/src/app/App.css
index 2c5e2ef..2d3ee3a 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -39,3 +39,28 @@
 .read-the-docs {
   color: #888;
 }
+
+/* navigation */
+.nav {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  justify-content: center;
+  padding: 10px 0;
+  background-color: #213547;
+}
+
+.nav a {
+  display: inline-block;
+}
+
+.nav a:first-of-type {
+  margin-right: 15px;
+}
+
+.nav a.active {
+  color: #ffffff;
+  font-weight: bold;
+}
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 089f557..a60e886 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,8 +1,8 @@
-import { Suspense } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router/Router'
 
 import reactLogo from '../assets/react.svg'
 
-import UsersPage from './users/UsersPage'
 import './App.css'
 
 function App() {
@@ -12,9 +12,7 @@ function App() {
             <div>
                 <img src={reactLogo} className="logo react" alt="React logo" />
             </div>
-            <Suspense fallback={<h2>Loading…</h2>}>
-                <UsersPage />
-            </Suspense>
+            <RouterProvider router={router} />
             <p className="read-the-docs">
                 React 18 use() hook showcase
             </p>
diff --git a/src/app/constantineSpeakers/SpeakersList.tsx b/src/app/constantineSpeakers/SpeakersList.tsx
new file mode 100644
index 0000000..253751f
--- /dev/null
+++ b/src/app/constantineSpeakers/SpeakersList.tsx
@@ -0,0 +1,15 @@
+import { Speaker } from "@/lib/services/speakerService"
+
+type Props = {
+    speakers: Speaker[] | any[]
+}
+
+const SpeakersList = ({ speakers }: Props) => (
+    <section>
+        {speakers.map((user) => (
+            <p key={user.id}>{`${user.name} (${user.lecture})`}</p>
+        ))}
+    </section>
+)
+
+export default SpeakersList
diff --git a/src/app/constantineSpeakers/SpeakersPage.tsx b/src/app/constantineSpeakers/SpeakersPage.tsx
new file mode 100644
index 0000000..e68f59d
--- /dev/null
+++ b/src/app/constantineSpeakers/SpeakersPage.tsx
@@ -0,0 +1,20 @@
+import { use } from 'react'
+
+import { speakerService } from '@/lib/services/speakerService'
+
+import Title from '@/components/Title'
+import UsersList from './SpeakersList'
+
+
+function SpeakersPage() {
+    const speakers = use(speakerService.fetchSpeakers())
+
+    return (
+        <>
+            <Title>React Speakers</Title>
+            <UsersList speakers={speakers} />
+        </>
+    )
+}
+
+export default SpeakersPage
diff --git a/src/app/router/Router.tsx b/src/app/router/Router.tsx
new file mode 100644
index 0000000..c0d3551
--- /dev/null
+++ b/src/app/router/Router.tsx
@@ -0,0 +1,22 @@
+import { createBrowserRouter } from 'react-router-dom'
+
+import Root from './root'
+import UsersPage from '../users/UsersPage'
+import SpeakersPage from '../constantineSpeakers/SpeakersPage'
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Root />,
+        children: [
+            {
+                path: '/',
+                element: <UsersPage />
+            },
+            {
+                path: '/constantine/speakers',
+                element:  <SpeakersPage />
+            }]
+    }]
+)
+
diff --git a/src/app/router/root.tsx b/src/app/router/root.tsx
new file mode 100644
index 0000000..dc296de
--- /dev/null
+++ b/src/app/router/root.tsx
@@ -0,0 +1,17 @@
+import { Suspense } from 'react'
+import { Outlet } from 'react-router-dom'
+
+import Nav from '@/components/Nav'
+
+function Root() {
+    return (
+        <>
+            <Nav />
+            <Suspense fallback={<h2>Loading…</h2>}>
+                <Outlet />
+            </Suspense>
+        </>
+    )
+}
+
+export default Root
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..81365c5
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,10 @@
+import { NavLink } from 'react-router-dom'
+
+const Nav = () => (
+    <div className='nav'>
+        <NavLink to='/'>Home</NavLink>
+        <NavLink to='/constantine/speakers'>Constantine Speakers</NavLink>
+    </div>
+)
+
+export default Nav
diff --git a/src/lib/services/speakerService.ts b/src/lib/services/speakerService.ts
index fca35c6..1b19cf2 100644
--- a/src/lib/services/speakerService.ts
+++ b/src/lib/services/speakerService.ts
@@ -45,7 +45,7 @@ class SpeakerService {
                 }
             }
 
-            return speakers
+            return speakers.filter((speaker) => Object.keys(speaker).length);
         } catch (error) {
             throw error
         }