diff --git a/404.html b/404.html
index 8d5745a..fb11244 100644
--- a/404.html
+++ b/404.html
@@ -5,61 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>404 — WerySkok.ru</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
-            margin: 0;
-            -webkit-touch-callout: none;
-            /* iOS Safari */
-            -webkit-user-select: none;
-            /* Chrome/Safari/Opera */
-            -khtml-user-select: none;
-            /* Konqueror */
-            -moz-user-select: none;
-            /* Firefox */
-            -ms-user-select: none;
-            /* Internet Explorer/Edge */
-            user-select: none;
-            /* Non-prefixed version, currently not supported by any browser */
-        }
-
-        .center {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-right: -50%;
-            transform: translate(-50%, -50%);
-            padding: 0 5vmin;
-            max-width: 100vw;
-        }
-
-        h1 {
-            font-size: 3em;
-        }
-
-        nav {
-            background-color: #f8f8f8;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            flex-flow: row nowrap;
-            padding: .5em;
-        }
-
-        a.sitelogo {
-            font-weight: 600;
-            font-size: 2.5em;
-            text-decoration: none;
-            color: black;
-            width: max-content;
-            margin-right: auto;
-            margin-left: auto;
-        }
-
-        .darkmode--activated .center {
-            color: #fff;
         }
     </style>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -72,37 +24,36 @@
 </head>
 
 <body>
-    <nav>
-        <a class="sitelogo" href="https://weryskok.ru">WerySkok.ru</a>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="https://weryskok.ru">WerySkok.ru</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Открыть меню">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://blog.weryskok.ru">Блог</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://t.me/WerySkok">Telegram</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </nav>
-    <div class="center">
-        <h1>Ошибка 404</h1>
-        <p>Здесь ничего нет, зря ищешь. Приходи, когда сайт будет готов.</p>
-    </div>
+    <main>
+        <div class="position-absolute top-50 start-50 translate-middle">
+            <h1 class="display-3">Ошибка 404</h1>
+            <p>Здесь ничего нет, зря ищешь. Приходи, когда сайт будет готов.</p>
+        </div>
+    </main>
 
-    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
-    <script>
-        const options = {
-            bottom: '64px', // default: '32px'
-            right: 'unset', // default: '32px'
-            left: '32px', // default: 'unset'
-            time: '0.5s', // default: '0.3s'
-            mixColor: '#fff', // default: '#fff'
-            backgroundColor: '#fff',  // default: '#fff'
-            buttonColorDark: '#100f2c',  // default: '#100f2c'
-            buttonColorLight: '#fff', // default: '#fff'
-            saveInCookies: true, // default: true,
-            label: '🌓', // default: ''
-            autoMatchOsTheme: true // default: true
-        }
-
-        const darkmode = new Darkmode(options);
-        darkmode.showWidget();
-        function addDarkmodeWidget() {
-            new Darkmode().showWidget();
-        }
-        window.addEventListener('load', addDarkmodeWidget);
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
+        crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index fc21549..8c21706 100644
--- a/index.html
+++ b/index.html
@@ -4,76 +4,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Сайт готовится</title>
+    <title>Сайт готовится — WerySkok.ru</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
-            margin: 0;
-            -webkit-touch-callout: none;
-            /* iOS Safari */
-            -webkit-user-select: none;
-            /* Chrome/Safari/Opera */
-            -khtml-user-select: none;
-            /* Konqueror */
-            -moz-user-select: none;
-            /* Firefox */
-            -ms-user-select: none;
-            /* Internet Explorer/Edge */
-            user-select: none;
-            /* Non-prefixed version, currently not supported by any browser */
-        }
-
-        .center {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-right: -50%;
-            transform: translate(-50%, -50%);
-            padding: 0 5vmin;
-            max-width: 100vw;
-        }
-
-        h1 {
-            font-size: 3em;
-        }
-
-        a {
-            text-decoration: dotted;
-            text-decoration-line: underline;
-            text-decoration-thickness: .05vmin;
-        }
-
-        nav {
-            background-color: #f8f8f8;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            flex-flow: row nowrap;
-            padding: .5em;
-        }
-
-        a.sitelogo {
-            font-weight: 600;
-            font-size: 2.5em;
-            text-decoration: none;
-            color: black;
-            width: max-content;
-            margin-right: auto;
-            margin-left: auto;
-        }
-
-        .darkmode--activated .center {
-            color: #fff;
-        }
-
-        .darkmode--activated .center a {
-            color: #5e5eff;
-        }
-
-        .darkmode--activated .center a:visited {
-            color: #895eff;
         }
     </style>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -86,44 +24,42 @@
 </head>
 
 <body>
-    <nav>
-        <a class="sitelogo" href="https://weryskok.ru">WerySkok.ru</a>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="https://weryskok.ru">WerySkok.ru</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Открыть меню">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://blog.weryskok.ru">Блог</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://t.me/WerySkok">Telegram</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </nav>
-    <div class="center">
-        <h1>Сайт готовится</h1>
-        <p>Сайт только готовится к открытию, но если я вам срочно нужен, то вот вам мои контакты:</p>
-        <ul>
-            <li><a href="https://t.me/WerySkok">Telegram</a></li>
-            <li><a href="https://vk.com/weryskok">ВКонтакте</a></li>
-            <li><a href="mailto:i_am@weryskok.ru">i_am@WerySkok.ru</a></li>
-            <li><a href="mailto:weryskok@gmail.com">weryskok@gmail.com</a></li>
-        </ul>
-    </div>
-    
-    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
-    <script>
-        const options = {
-            bottom: '64px', // default: '32px'
-            right: 'unset', // default: '32px'
-            left: '32px', // default: 'unset'
-            time: '0.5s', // default: '0.3s'
-            mixColor: '#fff', // default: '#fff'
-            backgroundColor: '#fff',  // default: '#fff'
-            buttonColorDark: '#100f2c',  // default: '#100f2c'
-            buttonColorLight: '#fff', // default: '#fff'
-            saveInCookies: true, // default: true,
-            label: '🌓', // default: ''
-            autoMatchOsTheme: true // default: true
-        }
-
-        const darkmode = new Darkmode(options);
-        darkmode.showWidget();
-        function addDarkmodeWidget() {
-            new Darkmode().showWidget();
-        }
-        window.addEventListener('load', addDarkmodeWidget);
-    </script>
+    <main>
+        <div class="position-absolute top-50 start-50 translate-middle">
+            <h1 class="display-3">Сайт готовится</h1>
+            <p>Сайт только готовится к открытию, но если я вам срочно нужен, то вот вам мои контакты:</p>
+            <div class="start-50 translate-middle-x btn-group-vertical">
+                <a class="btn btn-outline-primary" href="https://t.me/WerySkok">Telegram</a>
+                <a class="btn btn-outline-secondary" href="https://vk.com/weryskok">ВКонтакте</a>
+                <a class="btn btn-outline-secondary" href="mailto:i_am@weryskok.ru">i_am@WerySkok.ru</a>
+                <a class="btn btn-outline-secondary" href="mailto:weryskok@gmail.com">weryskok@gmail.com</a>
+            </div>
+        </div>
+    </main>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
+        crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
