diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..504afef
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json
diff --git a/_media/css/chota.min.css b/_media/css/chota.min.css
new file mode 120000
index 0000000..4c10fd2
--- /dev/null
+++ b/_media/css/chota.min.css
@@ -0,0 +1 @@
+../../node_modules/chota/dist/chota.min.css
\ No newline at end of file
diff --git a/_media/css/styles.css b/_media/css/styles.css
new file mode 100644
index 0000000..ee7421d
--- /dev/null
+++ b/_media/css/styles.css
@@ -0,0 +1,22 @@
+@font-face {
+	font-family: 'F5.6';
+	src: url('/_media/fonts/F5.6-Regular.eot');
+	src: url('/_media/fonts/F5.6-Regular.eot?#iefix') format('embedded-opentype'),
+		url('/_media/fonts/F5.6-Regular.woff2') format('woff2'),
+		url('/_media/fonts/F5.6-Regular.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+body.dark {
+	--bg-color: #000;
+	--bg-secondary-color: #131316;
+	--font-color: #f5f5f5;
+	--color-grey: #ccc;
+	--color-darkGrey: #777;
+}
+
+body {
+	font-family: 'F5.6';
+}
diff --git a/_media/fonts/F5.6-Regular.eot b/_media/fonts/F5.6-Regular.eot
new file mode 100644
index 0000000..072c050
Binary files /dev/null and b/_media/fonts/F5.6-Regular.eot differ
diff --git a/_media/fonts/F5.6-Regular.woff b/_media/fonts/F5.6-Regular.woff
new file mode 100644
index 0000000..5249ceb
Binary files /dev/null and b/_media/fonts/F5.6-Regular.woff differ
diff --git a/_media/fonts/F5.6-Regular.woff2 b/_media/fonts/F5.6-Regular.woff2
new file mode 100644
index 0000000..84382a6
Binary files /dev/null and b/_media/fonts/F5.6-Regular.woff2 differ
diff --git a/index.html b/index.html
index eba506b..92bbe2d 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +1,72 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <!--
  /_     ...   _    /_
 /_//_/ ////_//_//_//\
    _/     _//
 -->
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <title>hgman</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
-  <link rel="stylesheet" type="text/css" href="styles.css">
+  <meta charset="utf-8">
+  <title>Hangman</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="_media/css/chota.min.css">
+  <link rel="stylesheet" href="_media/css/styles.css">
+  <link rel="icon" type="image/png" href="_media/img/favicon.png">
 </head>
 <body>
+  <div class="container">
+    <header>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">Hangman game</a>
+        </div>
+        <div class="nav-right">
+          <a class="button dark" id="theme-switch" onclick="switchMode(this)">☀️</a>
+        </div>
+      </nav>
+    </header>
 
-  <div class="wrap">
-    <div id="WORD" class="word">
-      LOADING
-    </div>
+    <nav class="tabs is-full">
+      <a class="active">Game</a>
+      <a>Statistics</a>
+      <a>Credits</a>
+    </nav>
 
-    <div id="lives" class="lives">
-      ...
-    </div>
+    <br>
 
-    <div id="keyboard" class="keyboard">
-      ...
-    </div>
+    <section>
+      <p id="word" class="card text-center text-uppercase">
+        Loading word...
+      </p>
 
-    <footer>
-      2021 by <a href="//iiiypuk.me/">iiiypuk</a>
-      <p>ver: 0.2.1</p>
+      <div id="keyboard" class="is-hidden text-center">
+        ... keyboard ...
+      </div>
+    </section>
+
+    <hr>
+    <footer class="text-center">
+      <p class="text-grey is-marginless is-small">
+        by iiiypuk<br>
+        ver: 2.0.0
+      </p>
     </footer>
   </div>
 
-  <script type="text/javascript" src="game.js"></script>
+  <script>
+    if (window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.body.classList.add('dark');
+    }
+
+    function switchMode(el) {
+      const bodyClass = document.body.classList;
+      bodyClass.contains("dark")
+        ? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
+        : ((el.innerHTML = "🌙"), bodyClass.add("dark"));
+    }
+
+  </script>
+  <script type="text/javascript" src="_media/js/game.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..33f7144
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "chota": "0.8.0"
+  }
+}
