diff --git a/src/App.tsx b/src/App.tsx
index adcb8594e..82367bb9d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,23 @@
-import { PeoplePage } from './components/PeoplePage';
-import { Navbar } from './components/Navbar';
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { HomePage } from './HomePage/HomePage';
+import { PeoplePage } from './PeoplePage/PeoplePage';
+import { NotFoundPage } from './NotFoundPage/NotFoundPage';
+import { Navigation } from './Navigation/Navigation';
 
-import './App.scss';
-
-export const App = () => {
+export const App: React.FC = () => {
   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>
-      </div>
+      <Navigation />
+      <main className="section">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/home" element={<Navigate to="/" replace />} />
+          <Route path="/people" element={<PeoplePage />} />
+          <Route path="/people/:slug" element={<PeoplePage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </main>
     </div>
   );
 };
diff --git a/src/HomePage/HomePage.tsx b/src/HomePage/HomePage.tsx
new file mode 100644
index 000000000..b1b9f99a4
--- /dev/null
+++ b/src/HomePage/HomePage.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const HomePage: React.FC = () => (
+  <div className="section">
+    <h1 className="title">Home Page</h1>
+  </div>
+);
diff --git a/src/Navigation/Navigation.tsx b/src/Navigation/Navigation.tsx
new file mode 100644
index 000000000..2d89c18f5
--- /dev/null
+++ b/src/Navigation/Navigation.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+export const Navigation: React.FC = () => {
+  const location = useLocation();
+  const isHome = location.pathname === '/';
+  const isPeople = location.pathname.startsWith('/people');
+
+  return (
+    <nav className="navbar is-fixed-top has-shadow" data-cy="nav">
+      <div className="container">
+        <div className="navbar-brand">
+          <Link
+            to="/"
+            className={`navbar-item ${isHome ? 'has-background-grey-lighter' : ''}`}
+          >
+            Home
+          </Link>
+
+          <Link
+            to="/people"
+            className={`navbar-item ${isPeople ? 'has-background-grey-lighter' : ''}`}
+          >
+            People
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/NotFoundPage/NotFoundPage.tsx b/src/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 000000000..9b70f5b8f
--- /dev/null
+++ b/src/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const NotFoundPage: React.FC = () => (
+  <div className="section">
+    <div className="container">
+      <h1 className="title">Page not found</h1>
+    </div>
+  </div>
+);
diff --git a/src/PeopleFilter/PeopleFilter.tsx b/src/PeopleFilter/PeopleFilter.tsx
new file mode 100644
index 000000000..ecf005328
--- /dev/null
+++ b/src/PeopleFilter/PeopleFilter.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SearchLink } from '../components/SearchLink';
+import classNames from 'classnames';
+
+export const PeopleFilters = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const query = searchParams.get('query') || '';
+  const gender = searchParams.get('sex') || '';
+  const century = searchParams.getAll('century') || [];
+
+  function handleQueryChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const params = new URLSearchParams(searchParams);
+
+    if (event.target.value) {
+      params.set('query', event.target.value);
+    } else {
+      params.delete('query');
+    }
+
+    setSearchParams(params);
+  }
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">Filters</p>
+
+      <p className="panel-tabs" data-cy="SexFilter">
+        <SearchLink
+          params={{ sex: null }}
+          className={gender === '' ? 'is-active' : ''}
+        >
+          All
+        </SearchLink>
+        <SearchLink
+          params={{ sex: 'm' }}
+          className={gender === 'm' ? 'is-active' : ''}
+        >
+          Male
+        </SearchLink>
+        <SearchLink
+          params={{ sex: 'f' }}
+          className={gender === 'f' ? 'is-active' : ''}
+        >
+          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">
+            {['16', '17', '18', '19', '20'].map(currentCentury => (
+              <SearchLink
+                data-cy="century"
+                className={classNames('button mr-1', {
+                  'is-info': century.includes(currentCentury),
+                })}
+                params={{
+                  century: century.includes(currentCentury)
+                    ? century.filter(curr => curr !== currentCentury)
+                    : [...century, currentCentury],
+                }}
+                key={currentCentury}
+              >
+                {currentCentury}
+              </SearchLink>
+            ))}
+          </div>
+          <div className="level-right ml-4">
+            <SearchLink
+              data-cy="centuryALL"
+              className="button is-success is-outlined"
+              params={{ century: null }}
+            >
+              All
+            </SearchLink>
+          </div>
+        </div>
+      </div>
+
+      <div className="panel-block">
+        <SearchLink
+          className="button is-link is-outlined is-fullwidth"
+          params={{ query: null, sex: null, century: null }}
+        >
+          Reset all filters
+        </SearchLink>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/PeoplePage/PeoplePage.tsx b/src/PeoplePage/PeoplePage.tsx
new file mode 100644
index 000000000..e5c6de843
--- /dev/null
+++ b/src/PeoplePage/PeoplePage.tsx
@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { getPeople } from '../api';
+import { Loader } from '../components/Loader';
+import { PeopleTable } from '../PeopleTable/PeopleTable';
+import { Person } from '../types/Person';
+import { PeopleFilters } from '../PeopleFilter/PeopleFilter';
+
+export const PeoplePage: React.FC = () => {
+  const [people, setPeople] = useState<Person[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const { slug } = useParams<{ slug: string }>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Получаем параметры сортировки из URL
+  const initialSortField = searchParams.get('sortField') as keyof Person | null;
+  const initialSortOrder = searchParams.get('sortOrder') as
+    | 'asc'
+    | 'desc'
+    | null;
+
+  const [sortField, setSortField] = useState<keyof Person | null>(
+    initialSortField,
+  );
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(
+    initialSortOrder,
+  );
+
+  useEffect(() => {
+    getPeople()
+      .then(data => {
+        setPeople(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+        setError(true);
+      });
+  }, []);
+
+  if (error) {
+    return (
+      <p data-cy="peopleLoadingError" className="has-text-danger">
+        Something went wrong
+      </p>
+    );
+  }
+
+  const query = searchParams.get('query') || '';
+  const sex = searchParams.get('sex') || '';
+  const centuries = searchParams.getAll('century') || [];
+
+  let filteredPeople = people.filter(person => {
+    const matchesName = (name: string) =>
+      name.toLowerCase().includes(query.toLowerCase());
+    const century = Math.floor((person.born + 99) / 100);
+
+    return (
+      (query === '' ||
+        matchesName(person.name) ||
+        matchesName(person.motherName || '') ||
+        matchesName(person.fatherName || '')) &&
+      (sex === '' || person.sex === sex) &&
+      (centuries.length === 0 || centuries.includes(century.toString()))
+    );
+  });
+
+  if (sortField) {
+    filteredPeople = [...filteredPeople].sort((a, b) => {
+      const aValue = a[sortField as keyof Person];
+      const bValue = b[sortField as keyof Person];
+
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        return sortOrder === 'asc'
+          ? aValue.localeCompare(bValue)
+          : bValue.localeCompare(aValue);
+      }
+
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        return sortOrder === 'asc' ? aValue - bValue : bValue - aValue;
+      }
+
+      return 0;
+    });
+  }
+
+  const handleSort = (field: keyof Person) => {
+    const newSortOrder =
+      sortField === field && sortOrder === 'asc' ? 'desc' : 'asc';
+
+    setSortField(field);
+    setSortOrder(newSortOrder);
+
+    setSearchParams({
+      ...Object.fromEntries(searchParams.entries()),
+      sortField: field,
+      sortOrder: newSortOrder,
+    });
+  };
+
+  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">
+              {loading ? (
+                <Loader />
+              ) : (
+                <>
+                  {people.length === 0 ? (
+                    <p data-cy="noPeopleMessage">
+                      There are no people on the server
+                    </p>
+                  ) : (
+                    <>
+                      {filteredPeople.length === 0 ? (
+                        <p>
+                          There are no people matching the current search
+                          criteria
+                        </p>
+                      ) : (
+                        <PeopleTable
+                          people={filteredPeople}
+                          selectedSlug={slug}
+                          onSort={handleSort}
+                          sortField={sortField}
+                          sortOrder={sortOrder}
+                        />
+                      )}
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/PeopleTable/PeopleTable.tsx b/src/PeopleTable/PeopleTable.tsx
new file mode 100644
index 000000000..b30a1a30d
--- /dev/null
+++ b/src/PeopleTable/PeopleTable.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { Person } from '../types/Person';
+import { useSearchParams } from 'react-router-dom';
+
+interface PeopleTableProps {
+  people: Person[];
+  selectedSlug?: string;
+  onSort: (field: keyof Person) => void;
+  sortOrder: 'asc' | 'desc' | null;
+  sortField: keyof Person | null;
+}
+
+export const PeopleTable: React.FC<PeopleTableProps> = ({
+  people,
+  selectedSlug,
+  onSort,
+  sortOrder,
+  sortField,
+}) => {
+  const [searchParams] = useSearchParams();
+
+  const findPersonSlug = (
+    name: string | null | undefined,
+    persons: Person[],
+  ): string | undefined => {
+    return persons.find(person => person.name === name)?.slug;
+  };
+
+  const getSortIcon = (field: keyof Person) => {
+    if (sortField === field) {
+      return sortOrder === 'asc' ? (
+        <i className="fas fa-sort-up" />
+      ) : (
+        <i className="fas fa-sort-down" />
+      );
+    }
+
+    return <i className="fas fa-sort" />;
+  };
+
+  const searchParamsString = searchParams.toString(); // Get the current search params as a string
+
+  return (
+    <table
+      data-cy="peopleTable"
+      className="table is-striped is-hoverable is-narrow is-fullwidth"
+    >
+      <thead>
+        <tr>
+          <th onClick={() => onSort('name')}>Name {getSortIcon('name')}</th>
+          <th onClick={() => onSort('sex')}>Sex {getSortIcon('sex')}</th>
+          <th onClick={() => onSort('born')}>Born {getSortIcon('born')}</th>
+          <th onClick={() => onSort('died')}>Died {getSortIcon('died')}</th>
+          <th>Mother</th>
+          <th>Father</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {people.map(person => {
+          const motherSlug = findPersonSlug(person.motherName, people);
+          const fatherSlug = findPersonSlug(person.fatherName, people);
+
+          return (
+            <tr
+              key={person.slug}
+              className={
+                person.slug === selectedSlug ? 'has-background-warning' : ''
+              }
+              data-cy="person"
+            >
+              <td>
+                <a
+                  className={person.sex === 'f' ? 'has-text-danger' : ''}
+                  href={`#/people/${person.slug}?${searchParamsString}`}
+                >
+                  {person.name}
+                </a>
+              </td>
+              <td>{person.sex}</td>
+              <td>{person.born}</td>
+              <td>{person.died}</td>
+
+              <td>
+                {motherSlug ? (
+                  <a
+                    href={`#/people/${motherSlug}?${searchParamsString}`}
+                    className="has-text-danger"
+                  >
+                    {person.motherName}
+                  </a>
+                ) : (
+                  <span>{person.motherName || '-'}</span>
+                )}
+              </td>
+
+              <td>
+                {fatherSlug ? (
+                  <a href={`#/people/${fatherSlug}?${searchParamsString}`}>
+                    {person.fatherName}
+                  </a>
+                ) : (
+                  <span>{person.fatherName || '-'}</span>
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
diff --git a/src/api.ts b/src/api.ts
index dafca7c8d..0c0a91cf8 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -8,7 +8,7 @@ function wait(delay: number) {
   return new Promise(resolve => setTimeout(resolve, delay));
 }
 
-export async function getPeople(): Promise<Person[]> {
+export function getPeople(): Promise<Person[]> {
   // keep this delay for testing purpose
   return wait(500)
     .then(() => fetch(API_URL))
diff --git a/src/components/SearchLink.tsx b/src/components/SearchLink.tsx
index f78b83cbc..331562a2e 100644
--- a/src/components/SearchLink.tsx
+++ b/src/components/SearchLink.tsx
@@ -1,5 +1,6 @@
 import { Link, LinkProps, useSearchParams } from 'react-router-dom';
 import { getSearchWith, SearchParams } from '../utils/searchHelper';
+import React from 'react';
 
 /**
  * To replace the the standard `Link` we take all it props except for `to`