diff --git a/README.md b/README.md
index 24519caab..5c3a42959 100644
--- a/README.md
+++ b/README.md
@@ -28,4 +28,4 @@ implement the ability to filter and sort people in the table.
 - 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_people-table-advanced/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://serkrops.github.io/react_people-table-advanced/) and add it to the PR description.
diff --git a/src/App.tsx b/src/App.tsx
index adcb8594e..d8117c7fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,14 @@
-import { PeoplePage } from './components/PeoplePage';
-import { Navbar } from './components/Navbar';
-
 import './App.scss';
+import { Outlet } from 'react-router-dom';
+import { Navbar } from './components/Navbar';
 
-export const App = () => {
-  return (
-    <div data-cy="app">
-      <Navbar />
-
-      <div className="section">
-        <div className="container">
-          <h1 className="title">Home Page</h1>
-          <h1 className="title">Page not found</h1>
-          <PeoplePage />
-        </div>
+export const App = () => (
+  <div data-cy="app">
+    <Navbar />
+    <main className="section">
+      <div className="container">
+        <Outlet />
       </div>
-    </div>
-  );
-};
+    </main>
+  </div>
+);
diff --git a/src/Root.tsx b/src/Root.tsx
new file mode 100644
index 000000000..fbb008a25
--- /dev/null
+++ b/src/Root.tsx
@@ -0,0 +1,25 @@
+import {
+  Navigate,
+  Route,
+  HashRouter as Router,
+  Routes,
+} from 'react-router-dom';
+import { App } from './App';
+import { NotFoundPage } from './components/NotFoundPage';
+import { PeoplePage } from './components/PeoplePage';
+import { HomePage } from './components/HomePage';
+
+export const Root = () => (
+  <Router>
+    <Routes>
+      <Route path="/" element={<App />}>
+        <Route index element={<HomePage />} />
+        <Route path="people">
+          <Route path=":selectedPerson?" element={<PeoplePage />} />
+        </Route>
+        <Route path="*" element={<NotFoundPage />} />
+        <Route path="/home" element={<Navigate to="/" replace />} />
+      </Route>
+    </Routes>
+  </Router>
+);
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 000000000..e6510554f
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage: React.FC = () => (
+  <h1 className="title">Home Page</h1>
+);
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c2aa20f1c..c3b601138 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,4 +1,8 @@
-export const Navbar = () => {
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { getLinkClass } from '../helpers/getLinkClass';
+
+export const Navbar: React.FC = () => {
   return (
     <nav
       data-cy="nav"
@@ -8,15 +12,13 @@ export const Navbar = () => {
     >
       <div className="container">
         <div className="navbar-brand">
-          <a className="navbar-item" href="#/">Home</a>
+          <NavLink className={getLinkClass} to="/">
+            Home
+          </NavLink>
 
-          <a
-            aria-current="page"
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
-          >
+          <NavLink className={getLinkClass} to="people">
             People
-          </a>
+          </NavLink>
         </div>
       </div>
     </nav>
diff --git a/src/components/NotFoundPage.tsx b/src/components/NotFoundPage.tsx
new file mode 100644
index 000000000..4735b3144
--- /dev/null
+++ b/src/components/NotFoundPage.tsx
@@ -0,0 +1,3 @@
+export const NotFoundPage: React.FC = () => (
+  <h1 className="title">Page not found</h1>
+);
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
index 2f1608bef..c04d30d06 100644
--- a/src/components/PeopleFilters.tsx
+++ b/src/components/PeopleFilters.tsx
@@ -1,14 +1,58 @@
-export const PeopleFilters = () => {
+import classNames from 'classnames';
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SearchLink } from './SearchLink';
+import { CENTURIES, SEX_FILTER_LINKS } from '../utils/constants';
+
+type Props = {
+  query: string,
+  sex: string,
+  centuries: string[],
+};
+
+export const PeopleFilters: React.FC<Props> = ({
+  query,
+  sex,
+  centuries,
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  function handleChangeQuery(event: React.ChangeEvent<HTMLInputElement>) {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('query', event.target.value);
+    setSearchParams(params);
+  }
+
   return (
     <nav className="panel">
       <p className="panel-heading">Filters</p>
-
       <p className="panel-tabs" data-cy="SexFilter">
-        <a className="is-active" href="#/people">All</a>
-        <a className="" href="#/people?sex=m">Male</a>
-        <a className="" href="#/people?sex=f">Female</a>
+        <SearchLink
+          className={classNames({
+            'is-active': sex === SEX_FILTER_LINKS.All,
+          })}
+          params={{ sex: null }}
+        >
+          All
+        </SearchLink>
+        <SearchLink
+          className={classNames({
+            'is-active': sex === SEX_FILTER_LINKS.Male,
+          })}
+          params={{ sex: SEX_FILTER_LINKS.Male }}
+        >
+          Male
+        </SearchLink>
+        <SearchLink
+          className={classNames({
+            'is-active': sex === SEX_FILTER_LINKS.Female,
+          })}
+          params={{ sex: SEX_FILTER_LINKS.Female }}
+        >
+          Female
+        </SearchLink>
       </p>
-
       <div className="panel-block">
         <p className="control has-icons-left">
           <input
@@ -16,77 +60,62 @@ export const PeopleFilters = () => {
             type="search"
             className="input"
             placeholder="Search"
+            value={query}
+            onChange={handleChangeQuery}
           />
-
           <span className="icon is-left">
             <i className="fas fa-search" aria-hidden="true" />
           </span>
         </p>
       </div>
-
       <div className="panel-block">
         <div className="level is-flex-grow-1 is-mobile" data-cy="CenturyFilter">
           <div className="level-left">
-            <a
-              data-cy="century"
-              className="button mr-1"
-              href="#/people?centuries=16"
-            >
-              16
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=17"
-            >
-              17
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=18"
-            >
-              18
-            </a>
+            {CENTURIES.map(century => {
+              const isCenturyIncluded = centuries.includes(century);
+              const updatedCenturies = isCenturyIncluded
+                ? centuries.filter(cent => cent !== century)
+                : [...centuries, century];
 
-            <a
-              data-cy="century"
-              className="button mr-1 is-info"
-              href="#/people?centuries=19"
-            >
-              19
-            </a>
-
-            <a
-              data-cy="century"
-              className="button mr-1"
-              href="#/people?centuries=20"
-            >
-              20
-            </a>
+              return (
+                <SearchLink
+                  key={century}
+                  data-cy="century"
+                  className={classNames('button mr-1', {
+                    'is-info': isCenturyIncluded,
+                  })}
+                  params={{ centuries: updatedCenturies }}
+                >
+                  {century}
+                </SearchLink>
+              );
+            })}
           </div>
-
           <div className="level-right ml-4">
-            <a
+            <SearchLink
+              type="button"
               data-cy="centuryALL"
-              className="button is-success is-outlined"
-              href="#/people"
+              className={classNames('button is-success', {
+                'is-outlined': !!centuries.length,
+              })}
+              params={{ centuries: null }}
             >
               All
-            </a>
+            </SearchLink>
           </div>
         </div>
       </div>
-
       <div className="panel-block">
-        <a
+        <SearchLink
           className="button is-link is-outlined is-fullwidth"
-          href="#/people"
+          params={{
+            centuries: null,
+            sex: null,
+            query: null,
+          }}
         >
           Reset all filters
-        </a>
+        </SearchLink>
       </div>
     </nav>
   );
diff --git a/src/components/PeopleList.tsx b/src/components/PeopleList.tsx
new file mode 100644
index 000000000..8f927802e
--- /dev/null
+++ b/src/components/PeopleList.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Person } from '../types';
+import { PersonTile } from './PersonTile';
+import {
+  FATHER_THEAD_TITLE,
+  MOTHER_THEAD_TITLE,
+  THEAD_TITLES,
+} from '../utils/constants';
+import { SearchLink } from './SearchLink';
+import { getSortedParams } from '../helpers/getSortedParams';
+
+type Props = {
+  sort: string,
+  order: string,
+  persons: Person[],
+};
+
+export const PeopleList: React.FC<Props> = ({
+  sort,
+  order,
+  persons,
+}) => {
+  const isParentsExist = (title: string) => {
+    return (MOTHER_THEAD_TITLE === title || FATHER_THEAD_TITLE === title);
+  };
+
+  return (
+    <table
+      data-cy="peopleTable"
+      className="table is-striped is-hoverable is-narrow is-fullwidth"
+    >
+      <thead>
+        <tr>
+          {THEAD_TITLES.map(title => {
+            const normalizedTitle = title.toLowerCase();
+            const isNotSorted = sort !== normalizedTitle;
+            const isSorted = !isNotSorted && !order;
+            const isReversed = sort === normalizedTitle && order;
+
+            return (
+              <th key={title}>
+                {isParentsExist(title)
+                  ? (
+                    <span className="is-flex is-flex-wrap-nowrap">
+                      {title}
+                    </span>
+                  ) : (
+                    <span className="is-flex is-flex-wrap-nowrap">
+                      {title}
+                      <SearchLink params={getSortedParams(
+                        normalizedTitle,
+                        sort,
+                        order,
+                      )}
+                      >
+                        <span className="icon">
+                          <i
+                            className={classNames('fas', {
+                              'fa-sort': isNotSorted,
+                              'fa-sort-up': isSorted,
+                              'fa-sort-down': isReversed,
+                            })}
+                          />
+                        </span>
+                      </SearchLink>
+                    </span>
+                  )}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {persons.map(person => (
+          <PersonTile key={person.slug} person={person} />
+        ))}
+      </tbody>
+    </table>
+  );
+};
diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
index 4c8713b16..26eafc7ff 100644
--- a/src/components/PeoplePage.tsx
+++ b/src/components/PeoplePage.tsx
@@ -1,31 +1,88 @@
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { PeopleFilters } from './PeopleFilters';
 import { Loader } from './Loader';
-import { PeopleTable } from './PeopleTable';
+import { getPeople } from '../api';
+import { Person } from '../types';
+import { PeopleList } from './PeopleList';
+import { getSortedPeople } from '../helpers/getSortedPeople';
+import { getPreparedPeople } from '../helpers/getPreparedPeople';
 
 export const PeoplePage = () => {
+  const [persons, setPersons] = useState<Person[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const [searchParams] = useSearchParams();
+  const sort = searchParams.get('sort') || '';
+  const order = searchParams.get('order') || '';
+  const sex = searchParams.get('sex') || '';
+  const centuries = searchParams.getAll('centuries') || [];
+  const query = searchParams.get('query') || '';
+
+  useEffect(() => {
+    setIsLoading(true);
+    getPeople()
+      .then(setPersons)
+      .catch(() => setIsError(true))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const filteredPersons = getSortedPeople(
+    getPreparedPeople(persons),
+    sort,
+    order,
+    query,
+    sex,
+    centuries,
+  );
+
+  const isSomethingWrong = isError && !isLoading;
+  const isLoaded = !isError && !isLoading;
+
   return (
     <>
       <h1 className="title">People Page</h1>
-
       <div className="block">
         <div className="columns is-desktop is-flex-direction-row-reverse">
           <div className="column is-7-tablet is-narrow-desktop">
-            <PeopleFilters />
+            {!!persons.length && (
+              <PeopleFilters
+                query={query}
+                sex={sex}
+                centuries={centuries}
+              />
+            )}
           </div>
-
           <div className="column">
             <div className="box table-container">
-              <Loader />
+              {isLoading && (
+                <Loader />
+              )}
 
-              <p data-cy="peopleLoadingError">Something went wrong</p>
+              {isSomethingWrong && (
+                <p data-cy="peopleLoadingError" className="has-text-danger">
+                  Something went wrong
+                </p>
+              )}
 
-              <p data-cy="noPeopleMessage">
-                There are no people on the server
-              </p>
+              {(!persons.length && isLoaded) && (
+                <p data-cy="noPeopleMessage">
+                  There are no people on the server
+                </p>
+              )}
 
-              <p>There are no people matching the current search criteria</p>
+              {!filteredPersons.length && !isLoading && (
+                <p>There are no people matching the current search criteria</p>
+              )}
 
-              <PeopleTable />
+              {!!filteredPersons.length && (
+                <PeopleList
+                  sort={sort}
+                  order={order}
+                  persons={filteredPersons}
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/PeopleTable.tsx b/src/components/PeopleTable.tsx
deleted file mode 100644
index 8ab5b90f7..000000000
--- a/src/components/PeopleTable.tsx
+++ /dev/null
@@ -1,683 +0,0 @@
-export const PeopleTable = () => {
-  return (
-    <table
-      data-cy="peopleTable"
-      className="table is-striped is-hoverable is-narrow is-fullwidth"
-    >
-      <thead>
-        <tr>
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Name
-              <a href="#/people?sort=name">
-                <span className="icon">
-                  <i className="fas fa-sort" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Sex
-              <a href="#/people?sort=sex">
-                <span className="icon">
-                  <i className="fas fa-sort" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Born
-              <a href="#/people?sort=born&amp;order=desc">
-                <span className="icon">
-                  <i className="fas fa-sort-up" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>
-            <span className="is-flex is-flex-wrap-nowrap">
-              Died
-              <a href="#/people?sort=died">
-                <span className="icon">
-                  <i className="fas fa-sort" />
-                </span>
-              </a>
-            </span>
-          </th>
-
-          <th>Mother</th>
-          <th>Father</th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-haverbeke-1602">Pieter Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1602</td>
-          <td>1642</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/lieven-van-haverbeke-1570">
-              Lieven van Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/anna-van-hecke-1607"
-            >
-              Anna van Hecke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1607</td>
-          <td>1670</td>
-          <td>Martijntken Beelaert</td>
-          <td>Paschasius van Hecke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1631</td>
-          <td>1676</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/anna-van-hecke-1607"
-            >
-              Anna van Hecke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-haverbeke-1602">Pieter Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1632</td>
-          <td>1674</td>
-          <td>Margriet de Brabander</td>
-          <td>Willem Hercke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/daniel-haverbeke-1652">Daniel Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1652</td>
-          <td>1723</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-pape-1654"
-            >
-              Joanna de Pape
-            </a>
-          </td>
-          <td>f</td>
-          <td>1654</td>
-          <td>1723</td>
-          <td>Petronella Wauters</td>
-          <td>Vincent de Pape</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/martina-de-pape-1666"
-            >
-              Martina de Pape
-            </a>
-          </td>
-          <td>f</td>
-          <td>1666</td>
-          <td>1727</td>
-          <td>Petronella Wauters</td>
-          <td>Vincent de Pape</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/willem-haverbeke-1668">Willem Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1668</td>
-          <td>1731</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1671</td>
-          <td>1731</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-hercke-1632"
-            >
-              Elisabeth Hercke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-haverbeke-1631">Lieven Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person" className="has-background-warning">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1683</td>
-          <td>1724</td>
-          <td>Laurentia van Vlaenderen</td>
-          <td>Frederik de Rycke</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1692</td>
-          <td>1743</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-pape-1654"
-            >
-              Joanna de Pape
-            </a>
-          </td>
-          <td>
-            <a href="#/people/daniel-haverbeke-1652">Daniel Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1695</td>
-          <td>1762</td>
-          <td>Petronella Wauters</td>
-          <td>
-            <a href="#/people/willem-haverbeke-1668">Willem Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/lieven-de-causmaecker-1696">
-              Lieven de Causmaecker
-            </a>
-          </td>
-          <td>m</td>
-          <td>1696</td>
-          <td>1724</td>
-          <td>Joanna Claes</td>
-          <td>Carel de Causmaecker</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/jacoba-lammens-1699"
-            >
-              Jacoba Lammens
-            </a>
-          </td>
-          <td>f</td>
-          <td>1699</td>
-          <td>1740</td>
-          <td>Livina de Vrieze</td>
-          <td>Lieven Lammens</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-de-decker-1705">Pieter de Decker</a>
-          </td>
-          <td>m</td>
-          <td>1705</td>
-          <td>1780</td>
-          <td>Petronella van de Steene</td>
-          <td>Joos de Decker</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/laurentia-haverbeke-1710"
-            >
-              Laurentia Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1710</td>
-          <td>1786</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-haverbeke-1711"
-            >
-              Elisabeth Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1711</td>
-          <td>1754</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-de-rycke-1683"
-            >
-              Maria de Rycke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-haverbeke-1671">Jan Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-van-brussel-1714">Jan van Brussel</a>
-          </td>
-          <td>m</td>
-          <td>1714</td>
-          <td>1748</td>
-          <td>Joanna van Rooten</td>
-          <td>Jacobus van Brussel</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/bernardus-de-causmaecker-1721">
-              Bernardus de Causmaecker
-            </a>
-          </td>
-          <td>m</td>
-          <td>1721</td>
-          <td>1789</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/lieven-de-causmaecker-1696">
-              Lieven de Causmaecker
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-francies-haverbeke-1725">
-              Jan Francies Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1725</td>
-          <td>1779</td>
-          <td>Livina de Vrieze</td>
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/angela-haverbeke-1728"
-            >
-              Angela Haverbeke
-            </a>
-          </td>
-          <td>f</td>
-          <td>1728</td>
-          <td>1734</td>
-          <td>Livina de Vrieze</td>
-          <td>
-            <a href="#/people/pieter-bernard-haverbeke-1695">
-              Pieter Bernard Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/petronella-de-decker-1731"
-            >
-              Petronella de Decker
-            </a>
-          </td>
-          <td>f</td>
-          <td>1731</td>
-          <td>1781</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-haverbeke-1692"
-            >
-              Livina Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-de-decker-1705">Pieter de Decker</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jacobus-bernardus-van-brussel-1736">
-              Jacobus Bernardus van Brussel
-            </a>
-          </td>
-          <td>m</td>
-          <td>1736</td>
-          <td>1809</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/elisabeth-haverbeke-1711"
-            >
-              Elisabeth Haverbeke
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-van-brussel-1714">Jan van Brussel</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/pieter-antone-haverbeke-1753">
-              Pieter Antone Haverbeke
-            </a>
-          </td>
-          <td>m</td>
-          <td>1753</td>
-          <td>1798</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/petronella-de-decker-1731"
-            >
-              Petronella de Decker
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-francies-haverbeke-1725">
-              Jan Francies Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/jan-frans-van-brussel-1761">
-              Jan Frans van Brussel
-            </a>
-          </td>
-          <td>m</td>
-          <td>1761</td>
-          <td>1833</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/jacobus-bernardus-van-brussel-1736">
-              Jacobus Bernardus van Brussel
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-sierens-1761"
-            >
-              Livina Sierens
-            </a>
-          </td>
-          <td>f</td>
-          <td>1761</td>
-          <td>1826</td>
-          <td>Maria van Waes</td>
-          <td>Jan Sierens</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-causmaecker-1762"
-            >
-              Joanna de Causmaecker
-            </a>
-          </td>
-          <td>f</td>
-          <td>1762</td>
-          <td>1807</td>
-          <td>-</td>
-          <td>
-            <a href="#/people/bernardus-de-causmaecker-1721">
-              Bernardus de Causmaecker
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/carel-haverbeke-1796">Carel Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1796</td>
-          <td>1837</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/livina-sierens-1761"
-            >
-              Livina Sierens
-            </a>
-          </td>
-          <td>
-            <a href="#/people/pieter-antone-haverbeke-1753">
-              Pieter Antone Haverbeke
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-van-brussel-1801"
-            >
-              Maria van Brussel
-            </a>
-          </td>
-          <td>f</td>
-          <td>1801</td>
-          <td>1834</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/joanna-de-causmaecker-1762"
-            >
-              Joanna de Causmaecker
-            </a>
-          </td>
-          <td>
-            <a href="#/people/jan-frans-van-brussel-1761">
-              Jan Frans van Brussel
-            </a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/carolus-haverbeke-1832">Carolus Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1832</td>
-          <td>1905</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-van-brussel-1801"
-            >
-              Maria van Brussel
-            </a>
-          </td>
-          <td>
-            <a href="#/people/carel-haverbeke-1796">Carel Haverbeke</a>
-          </td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-sturm-1835"
-            >
-              Maria Sturm
-            </a>
-          </td>
-          <td>f</td>
-          <td>1835</td>
-          <td>1917</td>
-          <td>Seraphina Spelier</td>
-          <td>Charles Sturm</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/emma-de-milliano-1876"
-            >
-              Emma de Milliano
-            </a>
-          </td>
-          <td>f</td>
-          <td>1876</td>
-          <td>1956</td>
-          <td>Sophia van Damme</td>
-          <td>Petrus de Milliano</td>
-        </tr>
-
-        <tr data-cy="person">
-          <td>
-            <a href="#/people/emile-haverbeke-1877">Emile Haverbeke</a>
-          </td>
-          <td>m</td>
-          <td>1877</td>
-          <td>1968</td>
-          <td>
-            <a
-              className="has-text-danger"
-              href="#/people/maria-sturm-1835"
-            >
-              Maria Sturm
-            </a>
-          </td>
-          <td>
-            <a href="#/people/carolus-haverbeke-1832">Carolus Haverbeke</a>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  );
-};
diff --git a/src/components/PersonLink.tsx b/src/components/PersonLink.tsx
new file mode 100644
index 000000000..52617fce4
--- /dev/null
+++ b/src/components/PersonLink.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import { Person } from '../types';
+import { SEX_FILTER_LINKS } from '../utils/constants';
+
+type Props = {
+  person: Person,
+};
+
+export const PersonLink: React.FC<Props> = ({ person }) => (
+  <Link
+    to={`../${person.slug}`}
+    className={classNames(
+      { 'has-text-danger': person.sex === SEX_FILTER_LINKS.Female },
+    )}
+  >
+    {person.name}
+  </Link>
+);
diff --git a/src/components/PersonTile.tsx b/src/components/PersonTile.tsx
new file mode 100644
index 000000000..7bf16cf8f
--- /dev/null
+++ b/src/components/PersonTile.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import classNames from 'classnames';
+import { Person } from '../types';
+import { PersonLink } from './PersonLink';
+import { NOT_SET_VALUE } from '../utils/constants';
+
+type Props = {
+  person: Person,
+};
+
+export const PersonTile: React.FC<Props> = ({ person }) => {
+  const { selectedPerson = '' } = useParams();
+  const {
+    sex,
+    born,
+    died,
+    mother,
+    father,
+    motherName,
+    fatherName,
+    slug,
+  } = person;
+
+  return (
+    <tr
+      data-cy="person"
+      className={classNames({
+        'has-background-warning': selectedPerson === slug,
+      })}
+    >
+      <td>
+        <PersonLink person={person} />
+      </td>
+      <td>{sex}</td>
+      <td>{born}</td>
+      <td>{died}</td>
+      <td>
+        {mother ? (
+          <PersonLink person={mother} />
+        ) : (
+          motherName || NOT_SET_VALUE
+        )}
+      </td>
+      <td>
+        {father ? (
+          <PersonLink person={father} />
+        ) : (
+          fatherName || NOT_SET_VALUE
+        )}
+      </td>
+    </tr>
+  );
+};
diff --git a/src/helpers/getLinkClass.tsx b/src/helpers/getLinkClass.tsx
new file mode 100644
index 000000000..fcbc61b6b
--- /dev/null
+++ b/src/helpers/getLinkClass.tsx
@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+
+export const getLinkClass = (
+  { isActive }: { isActive: boolean },
+) => classNames(
+  'navbar-item',
+  {
+    'has-background-grey-lighter': isActive,
+  },
+);
diff --git a/src/helpers/getPreparedPeople.tsx b/src/helpers/getPreparedPeople.tsx
new file mode 100644
index 000000000..1be784cc0
--- /dev/null
+++ b/src/helpers/getPreparedPeople.tsx
@@ -0,0 +1,14 @@
+import { Person } from '../types';
+
+export function getPreparedPeople(persons: Person[]) {
+  return persons.map(person => {
+    const mother = persons.find(({ name }) => person.motherName === name);
+    const father = persons.find(({ name }) => person.fatherName === name);
+
+    return {
+      ...person,
+      mother,
+      father,
+    };
+  });
+}
diff --git a/src/helpers/getSortedParams.tsx b/src/helpers/getSortedParams.tsx
new file mode 100644
index 000000000..339b1ec11
--- /dev/null
+++ b/src/helpers/getSortedParams.tsx
@@ -0,0 +1,23 @@
+import { SearchParams } from '../utils/searchHelper';
+
+export function getSortedParams(
+  newSortType: string,
+  prevSortType: string,
+  order: string,
+): SearchParams {
+  if (prevSortType !== newSortType) {
+    return {
+      sort: newSortType,
+      order: null,
+    };
+  }
+
+  if (prevSortType === newSortType && !order) {
+    return { order: 'desc' };
+  }
+
+  return {
+    sort: null,
+    order: null,
+  };
+}
diff --git a/src/helpers/getSortedPeople.tsx b/src/helpers/getSortedPeople.tsx
new file mode 100644
index 000000000..2b8c1c0f4
--- /dev/null
+++ b/src/helpers/getSortedPeople.tsx
@@ -0,0 +1,56 @@
+import { Person } from '../types';
+import { CENTURY, SortingType } from '../utils/constants';
+
+export function getCentury(person: Person, centuries: string[]) {
+  return centuries.includes(Math.ceil(person.born / CENTURY).toString());
+}
+
+export function getSortedPeople(
+  persons: Person[],
+  sort: string,
+  order: string,
+  query: string,
+  sex: string,
+  centuries: string[],
+): Person[] {
+  let personsClone = [...persons];
+
+  if (sort) {
+    personsClone = personsClone.sort((personA, personB) => {
+      switch (sort) {
+        case SortingType.Name:
+        case SortingType.Sex:
+          return personA[sort].localeCompare(personB[sort]);
+
+        case SortingType.Born:
+        case SortingType.Died:
+          return (+personA[sort]) - (+personB[sort]);
+
+        default:
+          return 0;
+      }
+    });
+  }
+
+  if (order) {
+    personsClone.reverse();
+  }
+
+  if (query) {
+    personsClone = personsClone.filter(({ name, motherName, fatherName }) => {
+      const preparedNames = (name + motherName + fatherName).toLowerCase();
+
+      return preparedNames.includes(query);
+    });
+  }
+
+  if (sex) {
+    personsClone = personsClone.filter(person => person.sex === sex);
+  }
+
+  if (centuries.length) {
+    personsClone = personsClone.filter(person => getCentury(person, centuries));
+  }
+
+  return personsClone;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 8cb63aeff..807d33e00 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,8 @@
 import { createRoot } from 'react-dom/client';
-import { HashRouter as Router } from 'react-router-dom';
+import { Root } from './Root';
 
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 
-import { App } from './App';
-
 createRoot(document.getElementById('root') as HTMLDivElement)
-  .render(
-    <Router>
-      <App />
-    </Router>,
-  );
+  .render(<Root />);
diff --git a/src/utils/constants.tsx b/src/utils/constants.tsx
new file mode 100644
index 000000000..8909edd92
--- /dev/null
+++ b/src/utils/constants.tsx
@@ -0,0 +1,17 @@
+export const NOT_SET_VALUE = '-';
+export const THEAD_TITLES = ['Name', 'Sex', 'Born', 'Died', 'Mother', 'Father'];
+export const FATHER_THEAD_TITLE = 'Father';
+export const MOTHER_THEAD_TITLE = 'Mother';
+export const CENTURIES = ['16', '17', '18', '19', '20'];
+export const SEX_FILTER_LINKS = {
+  All: '',
+  Male: 'm',
+  Female: 'f',
+};
+export enum SortingType {
+  Name = 'name',
+  Sex = 'sex',
+  Born = 'born',
+  Died = 'died',
+}
+export const CENTURY = 100;