diff --git a/17_minihra/game.js b/17_minihra/game.js
index 5fd1b46..08d3a96 100644
--- a/17_minihra/game.js
+++ b/17_minihra/game.js
@@ -34,18 +34,18 @@ function enemyAttack() {
         heroHp -= enemyDmg;
         document.getElementById("heroHp").innerText = heroHp;
         gameOver();
-        battlelog("Zaútočil na tebe nepřítel");
+        battlelog('<li class="list-group-item list-group-item-dark">Zaútočil na tebe nepřítel</li>');
     } else {
         heroDefense = false;
         document.getElementById("heroDefense").innerText = heroDefense;
-        battlelog("Vykryl jsi útok nepřítele")
+        battlelog('<li class="list-group-item list-group-item-light">Vykryl jsi útok nepřítele</li>')
     }
 }
 
 function heal() {
     heroHp += hodkoustkou(10);
     document.getElementById("heroHp").innerText = heroHp;
-    battlelog("Vyléčil ses");
+    battlelog('<li class="list-group-item list-group-item-danger">Vyléčil ses</li>');
     gameOver();
     enemyAttack();
 }
@@ -53,7 +53,7 @@ function heal() {
 function attack() {
     enemyHp -= hodkoustkou(10);
     document.getElementById("enemyHp").innerText = enemyHp;
-    battlelog("Zaútočil jsi");
+    battlelog('  <li class="list-group-item list-group-item-primary">Zaútočil jsi</li>');
     gameOver();
     enemyAttack();
 }
@@ -61,7 +61,7 @@ function attack() {
 function defense() {
     heroDefense = true;
     document.getElementById("heroDefense").innerText = heroDefense;
-    battlelog("Aktivoval si štít");
+    battlelog('<li class="list-group-item list-group-item-secondary">Aktivoval si štít</li>');
 }
 
 function luck(){
@@ -77,14 +77,14 @@ function luck(){
 function gameOver() {
     console.log("Zjistuji stav-> Enemy:"+enemyHp+" Hero:"+heroHp);
     if (enemyHp <= 0) {
-        document.getElementById("game").innerHTML = "<h1>VYHRÁL JSI</h1>";
+        document.getElementById("game").innerHTML = '<div class="display-1 h-100 my-auto">VYHRÁL JSI</div>';
     } else if ( heroHp <= 0) {
-        document.getElementById("game").innerHTML = "<h1>PROHRÁL JSI</h1>"
+        document.getElementById("game").innerHTML = '<div class="display-1 h-100 my-auto">PROHRÁL JSI</div>';
     }
 }
 
 function battlelog(text2log) {
-    document.getElementById("battlelog").innerHTML += text2log+ "<br>";
+    document.getElementById("battlelog").innerHTML += text2log;
 }
 
 
diff --git a/17_minihra/index.html b/17_minihra/index.html
index 79f8c6d..d8879bd 100644
--- a/17_minihra/index.html
+++ b/17_minihra/index.html
@@ -4,25 +4,55 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="css/bootstrap.css">
 </head>
-<body onload="initGame()" id="game">
-    <h1> Mini hra</h1>
+<body onload="initGame()" >
+    <div class="container text-center" id="game">
 
-    <ul id="enemy">
-        <li>Nepřítel: <span id="enemyName">enemyName</span></li>
-        <li>HP: <span id="enemyHp">enemyHp</span></li>
-        <li>Útočné číslo: <span id="enemyDmg">enemyDmg</span></li>
-    </ul>
-
-    <ul id="hero">
-        <li><button onclick="heal()">Vylečit</button> - máš <span id="heroHp">heroHp</span> HP</li>
-        <li><button onclick="attack()">Útočit</button> - Zaútoč se svou zbraní. tvoje ÚČ je <span id="heroDmg">heroDmg</span></li>
-        <li><button onclick="defense()">Bránit se</button> - Ubraň se. <span id="heroDefense">heroDefense</span></li>
-        <li><button onclick="luck()">Náhoda</button> - zkus své štěstí</li>
-    </ul>
-
-    <div id="battlelog">Historie boje: <br> </div>
+        <h1 class="m-1"> Simple Battle Page</h1>
+        
+        <ul id="enemy" class="list-group my-5">
+            <li class="list-group-item display-1 list-group-item-info">Nepřítel: <span id="enemyName">enemyName</span></li>
+            <li class="list-group-item display-3 list-group-item-danger">HP: <span id="enemyHp">enemyHp</span></li>
+            <li class="list-group-item display-5 list-group-item-primary">Útočné číslo: <span id="enemyDmg">enemyDmg</span></li>
+        </ul>
 
+        <div class="row ">
+            <div class="col-md-3">
+                <button onclick="heal()" class="btn btn-danger w-100 mb-2 btn-lg">Vylečit</button>
+                <br>
+                Máš <b class="bg-danger rounded text-white p-1"><span id="heroHp">heroHp</span> HP</b>
+            </div>
+            <div class="col-md-3">
+                <button onclick="attack()" class="btn btn-primary w-100 mb-2 btn-lg">Útočit</button>
+                <br>
+                Zaútoč se svou zbraní. Tvoje ÚČ je <span id="heroDmg" class="bg-primary rounded text-white p-1">heroDmg</span>
+            </div>
+            <div class="col-md-3">
+                <button onclick="defense()" class="btn btn-secondary w-100 mb-2 btn-lg">Bránit se</button>
+                <br>
+                Ubraň se. <span id="heroDefense" class="bg-secondary rounded text-white p-1">heroDefense</span>
+            </div>
+            <div class="col-md-3">
+                <button onclick="luck()" class="btn btn-success w-100 mb-2 btn-lg">Náhoda</button>
+                <span class="bg-dark text-white">zkus své štěstí</span>
+            </div>
+        </div>
+        
+        <!-- <ul id="hero">
+            <li><button onclick="heal()">Vylečit</button> - máš <span id="heroHp">heroHp</span> HP</li>
+            <li><button onclick="attack()">Útočit</button> - Zaútoč se svou zbraní. tvoje ÚČ je <span id="heroDmg">heroDmg</span></li>
+            <li><button onclick="defense()">Bránit se</button> - Ubraň se. <span id="heroDefense">heroDefense</span></li>
+            <li><button onclick="luck()">Náhoda</button> - zkus své štěstí</li>
+        </ul> -->
+        
+        <h3 class="mt-5">Historie boje:</h3>
+        <ul id="battlelog" class="list-group">
+             
+        </ul>
+    </div>
+    
     <script src="game.js"></script>
+    <script src="js/bootstrap.bundle.js"></script>
 </body>
 </html>
\ No newline at end of file
