diff --git a/src/App.tsx b/src/App.tsx
index adcb8594e..073d6536c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,8 @@
-import { PeoplePage } from './components/PeoplePage';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { PeoplePage } from './pages/PeoplePage';
 import { Navbar } from './components/Navbar';
+import { HomePage } from './pages/HomePage';
+import { ErrorPage } from './pages/ErrorPage';
 
 import './App.scss';
 
@@ -10,9 +13,15 @@ export const App = () => {
 
       <div className="section">
         <div className="container">
-          <h1 className="title">Home Page</h1>
-          <h1 className="title">Page not found</h1>
-          <PeoplePage />
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/home" element={<Navigate to="/" replace />} />
+            <Route path="people">
+              <Route index element={<PeoplePage />} />
+              <Route path=":slug" element={<PeoplePage />} />
+            </Route>
+            <Route path="*" element={<ErrorPage />} />
+          </Routes>
         </div>
       </div>
     </div>
diff --git a/src/components/ErrorLoading.tsx b/src/components/ErrorLoading.tsx
new file mode 100644
index 000000000..06e527d7a
--- /dev/null
+++ b/src/components/ErrorLoading.tsx
@@ -0,0 +1,5 @@
+export const ErrorLoading: React.FC = () => (
+  <p data-cy="peopleLoadingError" className="has-text-danger">
+    Something went wrong
+  </p>
+);
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
deleted file mode 100644
index c2aa20f1c..000000000
--- a/src/components/Navbar.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export const Navbar = () => {
-  return (
-    <nav
-      data-cy="nav"
-      className="navbar is-fixed-top has-shadow"
-      role="navigation"
-      aria-label="main navigation"
-    >
-      <div className="container">
-        <div className="navbar-brand">
-          <a className="navbar-item" href="#/">Home</a>
-
-          <a
-            aria-current="page"
-            className="navbar-item has-background-grey-lighter"
-            href="#/people"
-          >
-            People
-          </a>
-        </div>
-      </div>
-    </nav>
-  );
-};
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
new file mode 100644
index 000000000..342d3a7a9
--- /dev/null
+++ b/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+
+export const Navbar = () => {
+  const handleClassName = ({ isActive }: { isActive: boolean }) => classNames(
+    'navbar-item', { 'has-background-grey-lighter': isActive },
+  );
+
+  return (
+    <nav
+      data-cy="nav"
+      className="navbar is-fixed-top has-shadow"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div className="container">
+        <div className="navbar-brand">
+          <NavLink to="/" className={handleClassName}>Home</NavLink>
+          <NavLink to="/people" className={handleClassName}>People</NavLink>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts
new file mode 100644
index 000000000..e8a656233
--- /dev/null
+++ b/src/components/Navbar/index.ts
@@ -0,0 +1 @@
+export * from './Navbar';
diff --git a/src/components/NoPeople.tsx b/src/components/NoPeople.tsx
new file mode 100644
index 000000000..ad79ad0d5
--- /dev/null
+++ b/src/components/NoPeople.tsx
@@ -0,0 +1,5 @@
+export const NoPeople: React.FC = () => (
+  <p data-cy="noPeopleMessage">
+    There are no people on the server
+  </p>
+);
diff --git a/src/components/PeopleFilters.tsx b/src/components/PeopleFilters.tsx
deleted file mode 100644
index 2f1608bef..000000000
--- a/src/components/PeopleFilters.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-export const PeopleFilters = () => {
-  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>
-      </p>
-
-      <div className="panel-block">
-        <p className="control has-icons-left">
-          <input
-            data-cy="NameFilter"
-            type="search"
-            className="input"
-            placeholder="Search"
-          />
-
-          <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>
-
-            <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>
-          </div>
-
-          <div className="level-right ml-4">
-            <a
-              data-cy="centuryALL"
-              className="button is-success is-outlined"
-              href="#/people"
-            >
-              All
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div className="panel-block">
-        <a
-          className="button is-link is-outlined is-fullwidth"
-          href="#/people"
-        >
-          Reset all filters
-        </a>
-      </div>
-    </nav>
-  );
-};
diff --git a/src/components/PeopleFilters/PeopleFilters.tsx b/src/components/PeopleFilters/PeopleFilters.tsx
new file mode 100644
index 000000000..06c471041
--- /dev/null
+++ b/src/components/PeopleFilters/PeopleFilters.tsx
@@ -0,0 +1,123 @@
+import classNames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+import { getSearchWith } from '../../utils/searchHelper';
+import { SearchLink } from '../SearchLink';
+
+const centuriesButton = ['16', '17', '18', '19', '20'];
+
+export const PeopleFilters = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const query = searchParams.get('query') || '';
+  const sex = searchParams.get('sex') || '';
+  const centuries = searchParams.getAll('centuries') || [];
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const search = getSearchWith(
+      searchParams,
+      { query: event.target.value.trim() || null },
+    );
+
+    setSearchParams(search);
+  };
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">Filters</p>
+
+      <p className="panel-tabs" data-cy="SexFilter">
+        <SearchLink
+          params={{ sex: null }}
+          className={classNames({
+            'is-active': sex === '',
+          })}
+        >
+          All
+        </SearchLink>
+
+        <SearchLink
+          params={{ sex: 'm' }}
+          className={classNames({
+            'is-active': sex === 'm',
+          })}
+        >
+          Male
+        </SearchLink>
+
+        <SearchLink
+          params={{ sex: 'f' }}
+          className={classNames({
+            'is-active': sex === 'f',
+          })}
+        >
+          Female
+        </SearchLink>
+      </p>
+
+      <div className="panel-block">
+        <p className="control has-icons-left">
+          <input
+            data-cy="NameFilter"
+            type="search"
+            className="input"
+            placeholder="Search"
+            value={query}
+            onChange={handleQueryChange}
+          />
+
+          <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">
+            {centuriesButton.map(century => (
+              <SearchLink
+                key={century}
+                data-cy="century"
+                className={classNames('button mr-1', {
+                  'is-info': centuries.includes(century),
+                })}
+                params={{
+                  centuries: centuries.includes(century)
+                    ? centuries.filter(year => year !== century)
+                    : [...centuries, century],
+                }}
+              >
+                {century}
+              </SearchLink>
+            ))}
+          </div>
+
+          <div className="level-right ml-4">
+            <SearchLink
+              data-cy="centuryALL"
+              className={classNames('button is-success', {
+                'is-outlined': centuries.length !== 0,
+              })}
+              params={{ centuries: null }}
+            >
+              All
+            </SearchLink>
+          </div>
+        </div>
+      </div>
+
+      <div className="panel-block">
+        <SearchLink
+          className="button is-link is-outlined is-fullwidth"
+          params={{
+            centuries: null,
+            sex: null,
+            query: null,
+          }}
+        >
+          Reset all filters
+        </SearchLink>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/PeopleFilters/index.ts b/src/components/PeopleFilters/index.ts
new file mode 100644
index 000000000..7272dc04d
--- /dev/null
+++ b/src/components/PeopleFilters/index.ts
@@ -0,0 +1 @@
+export * from './PeopleFilters';
diff --git a/src/components/PeoplePage.tsx b/src/components/PeoplePage.tsx
deleted file mode 100644
index 4c8713b16..000000000
--- a/src/components/PeoplePage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PeopleFilters } from './PeopleFilters';
-import { Loader } from './Loader';
-import { PeopleTable } from './PeopleTable';
-
-export const PeoplePage = () => {
-  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 />
-          </div>
-
-          <div className="column">
-            <div className="box table-container">
-              <Loader />
-
-              <p data-cy="peopleLoadingError">Something went wrong</p>
-
-              <p data-cy="noPeopleMessage">
-                There are no people on the server
-              </p>
-
-              <p>There are no people matching the current search criteria</p>
-
-              <PeopleTable />
-            </div>
-          </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/PeopleTable/PeopleTable.tsx b/src/components/PeopleTable/PeopleTable.tsx
new file mode 100644
index 000000000..ebbfcf27d
--- /dev/null
+++ b/src/components/PeopleTable/PeopleTable.tsx
@@ -0,0 +1,153 @@
+import { Link, useParams, useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { Person } from '../../types';
+import { peopleFilter } from '../../utils/filterFunction';
+import { SearchLink } from '../SearchLink';
+
+const sortingField = ['name', 'sex', 'born', 'died'];
+
+type Props = {
+  allPeople: Person[];
+};
+
+export const PeopleTable: React.FC<Props> = ({ allPeople }) => {
+  const { slug } = useParams();
+
+  const [searchParams] = useSearchParams();
+
+  const query = searchParams.get('query') || '';
+  const sex = searchParams.get('sex') || '';
+  const centuries = searchParams.getAll('centuries') || [];
+  const sort = searchParams.get('sort') || '';
+  const order = searchParams.get('order') || '';
+
+  const setSortType = (value: string) => {
+    if (sort === value && !order) {
+      return {
+        sort: value,
+        order: 'desc',
+      };
+    }
+
+    if (sort === value && order) {
+      return {
+        sort: null,
+        order: null,
+      };
+    }
+
+    return {
+      sort: value,
+      order: null,
+    };
+  };
+
+  const visiblePeople: Person[] = useMemo(() => (
+    peopleFilter(allPeople,
+      {
+        query,
+        sex,
+        centuries,
+        sort,
+        order,
+      })
+  ), [allPeople, query, sex, centuries, sort, order]);
+
+  if (visiblePeople.length === 0) {
+    return (
+      <p>No results for your search</p>
+    );
+  }
+
+  return (
+    <table
+      data-cy="peopleTable"
+      className="table is-striped is-hoverable is-narrow is-fullwidth"
+    >
+      <thead>
+        <tr>
+          {sortingField.map(field => (
+            <th key={field}>
+              <span className="is-flex is-flex-wrap-nowrap">
+                {field[0].toUpperCase() + field.slice(1)}
+                <SearchLink
+                  params={setSortType(`${field}`)}
+                >
+                  <span className="icon">
+                    <i className={classNames('fas fa-sort', {
+                      'fa-sort-up': sort === field && order !== 'desc',
+                      'fa-sort-down': sort === field && order === 'desc',
+                    })}
+                    />
+                  </span>
+                </SearchLink>
+              </span>
+            </th>
+          ))}
+
+          <th>Mother</th>
+          <th>Father</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {visiblePeople.map(person => (
+          <tr
+            key={person.slug}
+            className={classNames({
+              'has-background-warning': person.slug === slug,
+            })}
+            data-cy="person"
+          >
+            <td>
+              <Link
+                to={`/people/${person.slug}`}
+                onClick={() => person.slug === slug}
+                className={classNames({
+                  'has-text-danger': person.sex === 'f',
+                })}
+              >
+                {person.name}
+              </Link>
+            </td>
+
+            <td>{person.sex}</td>
+            <td>{person.born}</td>
+            <td>{person.died}</td>
+            <td>
+              {
+                person.mother?.slug ? (
+                  <Link
+                    to={`/people/${person.mother?.slug}`}
+                    className="has-text-danger"
+                    onClick={() => slug === person.mother?.slug}
+                  >
+                    {person.mother?.name}
+                  </Link>
+                ) : (
+                  <p>{person.motherName ? person.motherName : '-'}</p>
+                )
+              }
+
+            </td>
+            <td>
+              {
+                person.father?.slug ? (
+                  <Link
+                    to={`/people/${person.father?.slug}`}
+                    onClick={() => slug === person.father?.slug}
+                  >
+                    {person.fatherName ? person.fatherName : '-'}
+                  </Link>
+                ) : (
+                  <p>{person.fatherName ? person.fatherName : '-'}</p>
+                )
+              }
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
diff --git a/src/components/PeopleTable/index.ts b/src/components/PeopleTable/index.ts
new file mode 100644
index 000000000..45984e7c3
--- /dev/null
+++ b/src/components/PeopleTable/index.ts
@@ -0,0 +1 @@
+export * from './PeopleTable';
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
new file mode 100644
index 000000000..7426de133
--- /dev/null
+++ b/src/pages/ErrorPage.tsx
@@ -0,0 +1,3 @@
+export const ErrorPage: React.FC = () => (
+  <h1 className="title">Page not found</h1>
+);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 000000000..e6510554f
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage: React.FC = () => (
+  <h1 className="title">Home Page</h1>
+);
diff --git a/src/pages/PeoplePage.tsx b/src/pages/PeoplePage.tsx
new file mode 100644
index 000000000..719762605
--- /dev/null
+++ b/src/pages/PeoplePage.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useState } from 'react';
+import { PeopleFilters } from '../components/PeopleFilters';
+import { Loader } from '../components/Loader';
+import { PeopleTable } from '../components/PeopleTable';
+import { Person } from '../types';
+import { getPeople } from '../api';
+import { ErrorLoading } from '../components/ErrorLoading';
+import { NoPeople } from '../components/NoPeople';
+
+export const PeoplePage = () => {
+  const [people, setPeople] = useState<Person[]>([]);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    getPeople()
+      .then(setPeople)
+      .catch((newError) => {
+        setError(true);
+        throw newError;
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const allPeople = useMemo(() => (
+    people.map(person => {
+      const mother = people.find(findPerson => (
+        findPerson.name === person.motherName
+      ));
+
+      const father = people.find(findPerson => (
+        findPerson.name === person.fatherName
+      ));
+
+      return { ...person, mother, father };
+    })
+  ), [people]);
+
+  return (
+    <>
+      <h1 className="title">People Page</h1>
+
+      <div className="block">
+        <div className="columns is-desktop is-flex-direction-row-reverse">
+          {!loading
+            && (
+              <div className="column is-7-tablet is-narrow-desktop">
+                <PeopleFilters />
+              </div>
+            )}
+
+          <div className="column">
+            <div className="box table-container">
+              {loading && <Loader />}
+
+              {error && <ErrorLoading />}
+
+              {!error && !loading && people.length === 0 && <NoPeople />}
+
+              {people.length !== 0 && !error
+                && <PeopleTable allPeople={allPeople} />}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/utils/filterFunction.tsx b/src/utils/filterFunction.tsx
new file mode 100644
index 000000000..c5365410e
--- /dev/null
+++ b/src/utils/filterFunction.tsx
@@ -0,0 +1,62 @@
+import { Person } from '../types';
+
+interface Params {
+  query: string | null,
+  sex: string | null,
+  centuries: string[],
+  sort: string,
+  order: string,
+}
+
+export const peopleFilter = (people : Person[], {
+  query,
+  sex,
+  centuries,
+  sort,
+  order,
+}: Params):Person[] => {
+  let filteredPeople = [...people];
+
+  if (query) {
+    const normQuery = query.trim().toLowerCase();
+
+    filteredPeople = filteredPeople.filter(person => {
+      return person.name.toLowerCase().includes(normQuery)
+        || (person.motherName || '').toLowerCase().includes(normQuery)
+        || (person.fatherName || '').toLowerCase().includes(normQuery);
+    });
+  }
+
+  if (sex) {
+    filteredPeople = filteredPeople.filter(person => person.sex === sex);
+  }
+
+  if (centuries.length > 0) {
+    filteredPeople = filteredPeople.filter(person => {
+      return centuries.includes(Math.ceil(person.born / 100).toString());
+    });
+  }
+
+  if (sort) {
+    filteredPeople.sort((a: Person, b: Person) => {
+      switch (sort) {
+        case 'name':
+        case 'sex':
+          return a[sort].localeCompare(b[sort]);
+
+        case 'born':
+        case 'died':
+          return a[sort] - b[sort];
+
+        default:
+          return 0;
+      }
+    });
+  }
+
+  if (order) {
+    filteredPeople.reverse();
+  }
+
+  return filteredPeople;
+};