diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index fd540b9..a80b278 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -12,6 +12,7 @@ button {
   text-transform: uppercase;
   margin-bottom: 20px;
   width: 200px;
+  font-weight: bold;
 }
 
 button:hover {
diff --git a/src/components/router/Router.js b/src/components/router/Router.js
index 01c740d..80a6f35 100644
--- a/src/components/router/Router.js
+++ b/src/components/router/Router.js
@@ -30,3 +30,7 @@ export function Router() {
   app.innerHTML = '';
   setRenderFunction(url)();
 }
+
+export function onNavigationChange(e) {
+  window.location.hash = e.target.className;
+}
diff --git a/src/views/MainPage/MainPage.css b/src/views/MainPage/MainPage.css
index f055a3b..916ea43 100644
--- a/src/views/MainPage/MainPage.css
+++ b/src/views/MainPage/MainPage.css
@@ -35,7 +35,8 @@
   grid-area: nav;
   display: flex;
   justify-content: center;
-  align-items: start;
+  align-items: center;
+  flex-direction: column;
 }
 
 .navigation-container ul {
@@ -44,7 +45,8 @@
   padding: 0;
 }
 
-.navigation-container li {
+.navigation-container li,
+.wrapper {
   position: relative;
 }
 
diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js
index 5e35b58..9648410 100644
--- a/src/views/MainPage/MainPage.js
+++ b/src/views/MainPage/MainPage.js
@@ -1,4 +1,6 @@
+import Button from '../../components/Button/Button.js';
 import './MainPage.css';
+import { onNavigationChange } from '../../components/router/Router.js';
 
 const MAIN_ANIMAL_PATH = './public/kangoroo.png';
 const FACT_ANIMAL_URL = 'http://placekitten.com/400/500';
@@ -18,14 +20,6 @@ function renderMainView() {
     </div>
 
     <div class="navigation-container">
-      <nav>
-        <ul>
-          <li><a href="#quiz-settings" data-name="StartQuiz">Start quiz</a></li>
-          <li><a href="#" data-name="Leaderboard">Leaderboard </a></li>
-          <li><a href="#" data-name="Adoption">Adoption </a></li>
-          <li><a href="#" data-name="Credits">Credits</a></li>
-        </ul>
-      </nav>
     </div>
 
     <div class="info">
@@ -62,6 +56,15 @@ function renderMainView() {
   `;
 
   const navContainer = document.querySelector('.navigation-container');
+
+  const handleNavigationButtonClick = (e) => onNavigationChange(e);
+
+  const quizButton = Button('Start Quiz', 'quiz-settings', true, 'click', handleNavigationButtonClick);
+  const leaderboardButton = Button('Leaderboard', 'whatever', true, 'click', handleNavigationButtonClick);
+  const adoptionButton = Button('Adoption', 'adoption-button', true, 'click', handleNavigationButtonClick);
+  const creditsButton = Button('Credits', 'credits-button', true, 'click', handleNavigationButtonClick);
+
+  navContainer.append(quizButton, leaderboardButton, adoptionButton, creditsButton);
   const navItems = navContainer.querySelectorAll('a');
 
   navItems.forEach((item) => {