diff --git a/src/main/resources/templates/overlay.html b/src/main/resources/templates/overlay.html
index bedb2a4..631eeff 100644
--- a/src/main/resources/templates/overlay.html
+++ b/src/main/resources/templates/overlay.html
@@ -61,7 +61,9 @@
     document.addEventListener("DOMContentLoaded", async() => {
         await diceBox.init()
 
+        let timeout = 0;
         evtSource.addEventListener("message", function (event) {
+            clearInterval(timeout);
             let data = JSON.parse(event.data);
             diceBox.onRollComplete = (rollResult) => {
                 let httpRequest = new XMLHttpRequest();
@@ -74,7 +76,7 @@
                     results: rollResult,
                 } ))
                 if ({clearAfter} > 0) {
-                    setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
+                    timeout = setTimeout(() => diceBox.clear(), {clearAfter} * 1000)
                 }
 
             }
diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index 71cd0ec..34f4b94 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -13,7 +13,6 @@
         .collapsible {
             background-color: #333333;
             color: black;
-            cursor: pointer;
             margin-top: 10px;
             padding: 18px;
             width: 100%;
@@ -39,6 +38,14 @@
             background: #333333;
             color: #fff
         }
+
+        button:hover {
+            background: #444444;
+        }
+        button:active {
+            background: #222222;
+        }
+
         input {
             margin: 10px;
         }
@@ -106,6 +113,11 @@
             color: #000
         }
 
+
+        .overlayButton:hover {
+            background: transparent;
+        }
+
         .tooltip {
             position: fixed;
             border-radius: 0.5rem;
@@ -133,10 +145,10 @@
 <body class="w3-theme-l1">
 <div class="w3-container w3-content" style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between;  padding: 25px">
     <h1 style="text-align: center">Dice-Tower</h1>
-    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto">
-        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 75%" required onkeyup="start(event)"/><br/>
-        <button id="start" onclick="start()" style="align-self: center">Start 🞂</button>
+    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center; margin-bottom: auto;">
+        <label for="name" id="nameLabel">Name </label><input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/><br/>
+        <label for="room" id="roomLabel">Room </label><input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/><br/>
+        <button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Start 🞂</button>
     </div>
     <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs  <a>🞃</a></button>
@@ -168,22 +180,40 @@
                 <option value="smooth">Smooth</option>
                 <option value="wooden">Wooden</option>
             </select>
-            <br/>
-            <color-picker id="themeColor"></color-picker><br/>
+            <color-picker id="themeColor"></color-picker>
             <div id="dice-box"></div>
 
-            <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save 💾</button>
+            <button style="margin: 10px" id="preview">Preview 🔎</button>
+            <button style="margin: 10px" onclick="saveDice()">Save 💾</button>
             <button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">🛈</button>
-        </div><br/>
-        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
-        <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
-        <button hidden id="roll" onclick="roll()">Roll 🞂</button><br/><br/>
-        <label for="resultSwitch">Show all results </label>
-        <label class="switch">
-            <input type="checkbox" id="resultSwitch">
-            <span class="slider"></span>
-        </label>
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px 25px;">
+            <label style="font-size: x-large; font-weight: bold;">Roll </label>
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="removeDice()">-</button>
+            <label style="font-size: x-large; font-weight: bold;" id="dice-amount">1</label>
+            <button style="border: transparent; border-radius: 100%; font-size: x-large; font-weight: bold; height: 50px; width: 50px" onclick="addDice()">+</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d8')">D8</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d10')">D10</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d12')">D12</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d20')">D20</button>
+            <button style="font-size: x-large; font-weight: bold;" onclick="rollEasy('d100')">D100</button>
+        </div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
+            <label for="command">Command </label>
+            <input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
+            <button hidden id="roll" onclick="roll()">Roll 🎲</button>
+            <button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
+        </div>
+
+        <div style="margin: 20px 25px">
+            <label for="resultSwitch">Show all results </label>
+            <label class="switch">
+                <input type="checkbox" id="resultSwitch">
+                <span class="slider"></span>
+            </label>
+        </div>
     </div>
     <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container" style="padding: 25px; flex-grow: 1; margin-bottom: auto">
         <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
@@ -193,8 +223,8 @@
         <p style="color: red; font-weight: bold">Only open Overlay once, unless you want multiple results</p>
         <p>Query Params you can Change:</p>
         <ul>
-            <li><strong>scale</strong> changes the size of the dice (any value over 1; remove param or set -1 to keep the dice)</li>
-            <li><strong>clearAfter</strong> time until dice are cleared (in seconds)</li>
+            <li><strong>scale</strong> changes the size of the dice (any value over 1)</li>
+            <li><strong>clearAfter</strong> time until dice are cleared (in seconds; remove param or set -1 to keep the dice)</li>
         </ul>
     </div>
     <div popover id="all-results-hint" class="tooltip">
@@ -206,8 +236,39 @@
     <div popover id="save-dice-hint" class="tooltip">
         This saves your current theme and theme color for current Name
     </div>
+    <div popover id="command-hint" class="tooltip">
+        Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"
+    </div>
+
+    <div style="margin-top: 20px; flex-grow: 1" id="how-to">
+        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
+            <h2 style="text-align: center">How-To</h2>
+            <ul>
+                <li>Join a room by entering your character name and the name of the room</li>
+                <li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
+                <ul>
+                    <li>Only open your Dice-Overlay once!</li>
+                    <li>You can configure your Overlay with query parameters (more information at the info element next to the link)</li>
+                </ul>
+                <li>Configure your dice</li>
+                <li>Save your dice configuration</li>
+                <li>Start rolling</li>
+            </ul>
+        </div>
+    </div>
 </div>
 <script>
+    function addDice() {
+        let amount = +document.getElementById('dice-amount').innerText
+        document.getElementById('dice-amount').innerText = amount + 1
+    }
+
+    function removeDice() {
+        let amount = +document.getElementById('dice-amount').innerText
+        if (amount > 1) {
+            document.getElementById('dice-amount').innerText = amount - 1
+        }
+    }
     function url() {
         return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
     }
@@ -222,6 +283,7 @@
             document.getElementById('dice-tower').hidden = false;
             document.getElementById('name').hidden = true;
             document.getElementById('room').hidden = true;
+            document.getElementById('how-to').hidden = true;
             document.getElementById('results').hidden = false;
             document.getElementById('nameLabel').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
             document.getElementById('roomLabel').innerHTML = '<strong style="font-size:medium;">' + document.getElementById('room').value + '</strong>';
@@ -236,6 +298,11 @@
         }
     }
 
+    function rollEasy(dice) {
+        document.getElementById('command').value = document.getElementById('dice-amount').innerText + dice;
+        roll();
+    }
+
     function roll(event) {
         if((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
             let httpRequest = new XMLHttpRequest();
diff --git a/src/main/resources/templates/results.html b/src/main/resources/templates/results.html
index 926dd1a..484aa3f 100644
--- a/src/main/resources/templates/results.html
+++ b/src/main/resources/templates/results.html
@@ -31,7 +31,7 @@
                     resultText += '<br/>&ensp; D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong style="font-size: x-large">' + result.value + '</strong> '
                 })
             }
-            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> &#127922;	' + resultText
+            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲	' + resultText
             name.appendChild(node)
             document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
         }
