diff --git a/assets/css/liczby.css b/assets/css/liczby.css
index 34176da..a55d706 100644
--- a/assets/css/liczby.css
+++ b/assets/css/liczby.css
@@ -26,18 +26,17 @@ a:hover {
     flex-direction: column;
     justify-content: space-between;
     position: fixed;
-    top: 4rem;
+    top: 0rem;
     width: 100vw;
-    height: calc(100vh - 4rem);
+    height: 100vh;
     text-align: center;
 
     background: linear-gradient(180deg,
         transparent 0%,
-        transparent 10%,
         var(--colorSurface0) 20%,
         var(--colorSurface1) 30%,
-        var(--colorSurface0) 70%,
-        var(--colorSurface0) 100%
+        var(--colorSurface0) 90%,
+        transparent 100%
     );
 }
 
@@ -62,7 +61,7 @@ a:hover {
     padding: 1rem;
     border-width: .5rem;
     font-size: 56pt;
-    margin-bottom: 4rem;
+    margin-bottom: 10rem;
 
     animation: ZacznijTracic 5s ease-in-out infinite;
 }
@@ -118,7 +117,7 @@ input[type="number"] {
 
 .ukryj, .dialog-ukryj .okno {
     animation: Ukryj 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
 }
 
 .dialog-pokaz {
@@ -127,13 +126,13 @@ input[type="number"] {
 
 .dialog-ukryj {
     animation: UkryjDialog 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
 
 .ukryte, .ukryte * {
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
@@ -210,3 +209,65 @@ input[type="number"] {
     margin-top: .3rem;
     margin-left: .3rem;
 }
+
+
+
+/* Gra */
+#gra {
+    overflow-y: auto;
+    display: flex;
+    max-height: calc(100vh - 4rem);
+}
+
+#gra aside {
+    border-radius: .3rem;
+    background: var(--colorBase);
+    position: fixed;
+    right: 1rem;
+    margin: 1rem;
+    padding: 1rem;
+    width: 18rem;
+}
+
+#gra aside div {
+    font-size: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+#gra h2 {
+    text-align: center;
+}
+
+#gra table {
+    margin: auto;
+}
+
+#gra button {
+    width: 3rem;
+    height: 5rem;
+}
+
+#gra button:hover {
+    scale: 1.1;
+    box-shadow: 0px 7px 10px var(--colorSubtext0);
+}
+
+.bledna {
+    background: var(--colorRed);
+    color: var(--colorSurface2);
+}
+
+.poprawna {
+    background: var(--colorGreen);
+    color: var(--colorSurface2);
+}
+
+.bledna:hover {
+    scale: 1 !important;
+    box-shadow: 0px 0px 0px #000 !important;
+    background: var(--colorRed) !important;
+    color: var(--colorSurface2) !important;
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/assets/js/liczby.js b/assets/js/liczby.js
index 4fda94c..afdf9f1 100644
--- a/assets/js/liczby.js
+++ b/assets/js/liczby.js
@@ -1,16 +1,48 @@
 let cel = 0;
+let czas = 0;
+let zaklad = 0;
+let wToku = false;
 
 document.addEventListener("DOMContentLoaded", () => {
+    /**
+     * @type {HTMLFormElement}
+     */
+    const konfiguracja = document.querySelector('#konfiguracja form');
+    konfiguracja.onsubmit = ev => {
+        ev.preventDefault();
+        new FormData(konfiguracja);
+    }
+    konfiguracja.onformdata = zacznijGre;
+
+    /**
+     * @type {HTMLFormElement}
+     */
+    const liczba = document.querySelector('#liczba form');
+    liczba.onsubmit = ev => {
+        ev.preventDefault();
+        new FormData(liczba);
+    }
+    liczba.onformdata = zamknijNumer;
+
+    for (let i = 1; i <= 100; i++) {
+        /**
+         * @type {HTMLButtonElement}
+         */
+        const przycisk = document.getElementById(i);
+        przycisk.onclick = klikLiczby;
+    }
 });
 
 function pokazKonfiguracje() {
+    if (wToku) {
+        return;
+    }
     /**
      * @type {HTMLFormElement}
      */
     const konfiguracja = document.getElementById('konfiguracja');
     konfiguracja.className = 'dialog dialog-pokaz';
 
-
     /**
      * @type {HTMLInputElement}
      */
@@ -29,11 +61,82 @@ function pokazKonfiguracje() {
  * @param {FormDataEvent} event 
  */
 function zacznijGre(event) {
-    document.getElementById('tytul').className = 'ukryj';
     event.preventDefault();
+    if (wToku) {
+        return;
+    }
+    wToku = true;
+
+    if (event.formData.get("losowosc") == "komputer") {
+        cel = Math.floor(Math.random() * 99 + 1);
+    }
+
+    zaklad = Number(event.formData.get("zaklad"))
+ 
+    /**
+     * @type {HTMLFormElement}
+     */
+    const konfiguracja = document.getElementById('konfiguracja');
+    konfiguracja.className = 'dialog dialog-ukryj';
+
+    /**
+     * @type {HTMLFormElement}
+     */
+    const tytul = document.getElementById('tytul');
+    tytul.className = 'ukryj';
+
+    /**
+     * @type {HTMLParagraphElement}
+     */
+    const pudla = document.getElementById('pudla');
+    pudla.innerText = '0';
+
+    /**
+     * @type {HTMLParagraphElement}
+     */
+    const kwota = document.getElementById('kwota');
+    kwota.innerText = zaklad + 'zł';
+}
+
+function koniecGry() {
+    if (!wToku) {
+        return;
+    }
+    wToku = false;
+
+    /**
+     * @type {HTMLFormElement}
+     */
+    const koniec = document.getElementById('koniec');
+    koniec.className = 'dialog dialog-pokaz';
+}
+
+/**
+ * 
+ * @param {Event} event 
+ */
+function klikLiczby(event) {
+    if (!wToku) {
+        return;
+    }
+    if (Number(event.target.id) == cel) {
+        event.target.className = 'poprawna';
+        koniecGry();
+    } else if (event.target.className != "bledna") {
+        /**
+         * @type {HTMLParagraphElement}
+         */
+        const pudla = document.getElementById('pudla');
+        pudla.innerText = Number(pudla.innerText) + 1;
+
+        event.target.className = 'bledna';
+    }
 }
 
 function pokazNumer() {
+    if (wToku) {
+        return;
+    }
     /**
      * @type {HTMLFormElement}
      */
@@ -51,7 +154,10 @@ function pokazNumer() {
  * 
  * @param {FormDataEvent} event 
  */
-function zamknijNumer(event) {    
+function zamknijNumer(event) {   
+    if (wToku) {
+        return;
+    } 
     /**
      * @type {HTMLFormElement}
      */
diff --git a/liczby.html b/liczby.html
index 0852ec7..6234dcb 100644
--- a/liczby.html
+++ b/liczby.html
@@ -13,6 +13,150 @@
         <a href="/index.html">Wróć na stronę główną</a>
     </header>
 
+    <div id="gra">
+        <table>
+            <tbody>
+                <tr>
+                    <td><button id="1">1</button></td>
+                    <td><button id="2">2</button></td>
+                    <td><button id="3">3</button></td>
+                    <td><button id="4">4</button></td>
+                    <td><button id="5">5</button></td>
+                    <td><button id="6">6</button></td>
+                    <td><button id="7">7</button></td>
+                    <td><button id="8">8</button></td>
+                    <td><button id="9">9</button></td>
+                    <td><button id="10">10</button></td>
+                </tr>
+                <tr>
+                    <td><button id="11">11</button></td>
+                    <td><button id="12">12</button></td>
+                    <td><button id="13">13</button></td>
+                    <td><button id="14">14</button></td>
+                    <td><button id="15">15</button></td>
+                    <td><button id="16">16</button></td>
+                    <td><button id="17">17</button></td>
+                    <td><button id="18">18</button></td>
+                    <td><button id="19">19</button></td>
+                    <td><button id="20">20</button></td>
+                </tr>
+                <tr>
+                    <td><button id="21">21</button></td>
+                    <td><button id="22">22</button></td>
+                    <td><button id="23">23</button></td>
+                    <td><button id="24">24</button></td>
+                    <td><button id="25">25</button></td>
+                    <td><button id="26">26</button></td>
+                    <td><button id="27">27</button></td>
+                    <td><button id="28">28</button></td>
+                    <td><button id="29">29</button></td>
+                    <td><button id="30">30</button></td>
+                </tr>
+                <tr>
+                    <td><button id="31">31</button></td>
+                    <td><button id="32">32</button></td>
+                    <td><button id="33">33</button></td>
+                    <td><button id="34">34</button></td>
+                    <td><button id="35">35</button></td>
+                    <td><button id="36">36</button></td>
+                    <td><button id="37">37</button></td>
+                    <td><button id="38">38</button></td>
+                    <td><button id="39">39</button></td>
+                    <td><button id="40">40</button></td>
+                </tr>
+                <tr>
+                    <td><button id="41">41</button></td>
+                    <td><button id="42">42</button></td>
+                    <td><button id="43">43</button></td>
+                    <td><button id="44">44</button></td>
+                    <td><button id="45">45</button></td>
+                    <td><button id="46">46</button></td>
+                    <td><button id="47">47</button></td>
+                    <td><button id="48">48</button></td>
+                    <td><button id="49">49</button></td>
+                    <td><button id="50">50</button></td>
+                </tr>
+                <tr>
+                    <td><button id="51">51</button></td>
+                    <td><button id="52">52</button></td>
+                    <td><button id="53">53</button></td>
+                    <td><button id="54">54</button></td>
+                    <td><button id="55">55</button></td>
+                    <td><button id="56">56</button></td>
+                    <td><button id="57">57</button></td>
+                    <td><button id="58">58</button></td>
+                    <td><button id="59">59</button></td>
+                    <td><button id="60">60</button></td>
+                </tr>
+                <tr>
+                    <td><button id="61">61</button></td>
+                    <td><button id="62">62</button></td>
+                    <td><button id="63">63</button></td>
+                    <td><button id="64">64</button></td>
+                    <td><button id="65">65</button></td>
+                    <td><button id="66">66</button></td>
+                    <td><button id="67">67</button></td>
+                    <td><button id="68">68</button></td>
+                    <td><button id="69">69</button></td>
+                    <td><button id="70">70</button></td>
+                </tr>
+                <tr>
+                    <td><button id="71">71</button></td>
+                    <td><button id="72">72</button></td>
+                    <td><button id="73">73</button></td>
+                    <td><button id="74">74</button></td>
+                    <td><button id="75">75</button></td>
+                    <td><button id="76">76</button></td>
+                    <td><button id="77">77</button></td>
+                    <td><button id="78">78</button></td>
+                    <td><button id="79">79</button></td>
+                    <td><button id="80">80</button></td>
+                </tr>
+                <tr>
+                    <td><button id="81">81</button></td>
+                    <td><button id="82">82</button></td>
+                    <td><button id="83">83</button></td>
+                    <td><button id="84">84</button></td>
+                    <td><button id="85">85</button></td>
+                    <td><button id="86">86</button></td>
+                    <td><button id="87">87</button></td>
+                    <td><button id="88">88</button></td>
+                    <td><button id="89">89</button></td>
+                    <td><button id="90">90</button></td>
+                </tr>
+                <tr>
+                    <td><button id="91">91</button></td>
+                    <td><button id="92">92</button></td>
+                    <td><button id="93">93</button></td>
+                    <td><button id="94">94</button></td>
+                    <td><button id="95">95</button></td>
+                    <td><button id="96">96</button></td>
+                    <td><button id="97">97</button></td>
+                    <td><button id="98">98</button></td>
+                    <td><button id="99">99</button></td>
+                    <td><button id="100">100</button></td>
+                </tr>
+            </tbody>
+        </table>
+        <aside>
+            <h2>Statystyki</h2>
+            <hr>
+            <div>
+                <h4>Czas:</h4>
+                <p id="czas"></p>
+            </div>
+            <div>
+                <h4>Pudła:</h4>
+                <p id="pudla"></p>
+            </div>
+            <br>
+            <div>
+                <h4>Wygrana:</h4>
+                <p id="kwota"></p>
+            </div>
+        </aside>
+    </div>
+    
     <div id="tytul" class="pokaz">
         <div>
             <h1>Liczby</h1>
@@ -24,7 +168,7 @@
     </div>
 
     <div id="konfiguracja" class="dialog ukryte">
-        <form onsubmit="zacznijGre()" class="okno">
+        <form class="okno">
             <h2>Nowa gra</h2>
             <hr>
 
@@ -38,7 +182,7 @@
 
             <h4>Zasady zakładu</h4>
             <fieldset>
-                <label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" min="500" step="500" max="100000">
+                <label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" name="zaklad" min="500" step="500" max="50000">
             </fieldset>
 
             <br>
@@ -51,13 +195,13 @@
         <form class="okno">
             <h2>Liczba</h2>
             <hr>
-            Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-1000:
+            Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-100:
             <br>
             <br>
 
             <fieldset>
                 <legend>Liczba:</legend>
-                <input type="number" name="liczba" min="1" max="1000" placeholder="Przykładowa liczba: 684" required>
+                <input type="number" id="numer" name="liczba" min="1" max="100" placeholder="Przykładowa liczba: 64" required>
             </fieldset>
 
             <br>
@@ -65,5 +209,13 @@
             <input type="submit" value="Zapisz liczbę">
         </form>
     </div>
+
+    <div id="koniec" class="dialog ukryte">
+        <div class="okno">
+            <h2>Koniec gry</h2>
+            <hr>
+            Udało Ci się wygrać <span id="final">000zł</span>!
+        </div>
+    </div>
 </body>
 </html>
\ No newline at end of file