diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index 9fef7d7..71cd0ec 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -7,9 +7,9 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="/vendor/color-picker.js"></script>
     <style>
-        .w3-theme-l6 { color:#000 !important; background-color:#999999 !important}
-        .w3-theme-l4 { color:#fff !important; background-color:#666666 !important}
-        .w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
+        .w3-theme-l6 { color:#000 !important; background-color:#999999 !important; border-radius: 10px;}
+        .w3-theme-l4 { color:#fff !important; background-color:#666666 !important; border-radius: 10px;}
+        .w3-theme-l1 { color:#fff !important; background-color:#333333 !important; border-radius: 10px;}
         .collapsible {
             background-color: #333333;
             color: black;
@@ -28,11 +28,16 @@
             display: none;
             overflow: hidden;
             background-color: #999999;
-            color: #000
+            color: #000;
+            border-radius: 10px;
         }
 
         button {
             padding: 10px;
+            border: #333333 3px solid;
+            border-radius: 10px;
+            background: #333333;
+            color: #fff
         }
         input {
             margin: 10px;
@@ -98,6 +103,7 @@
             width: 5px;
             height: 5px;
             font-size: large;
+            color: #000
         }
 
         .tooltip {
@@ -107,6 +113,21 @@
             color:#fff !important;
             background-color:#333333dd !important
         }
+
+        #dice-box {
+            position: relative;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            background-size: cover;
+        }
+
+        #dice-box canvas {
+            width: 100%;
+            height: 100%;
+            margin: 20px
+        }
     </style>
 </head>
 <body class="w3-theme-l1">
@@ -115,34 +136,22 @@
     <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>
+        <button id="start" onclick="start()" style="align-self: center">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>
 
         <div class="content">
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label><input type="text" readonly id="overlayId" style="flex-grow: 1"/><button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">?</button><br/>
-                <div popover id="overlay-hint" class="tooltip">
-                    <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>
-                    </ul>
-                </div>
+                <label for="overlayId">Dice-Overlay <a style="color: red"> (Only open once) </a> </label>
+                <input type="text" readonly id="overlayId" style="flex-grow: 1"/>
+                <button popovertarget="overlay-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
-                <div popover id="all-results-hint" class="tooltip">
-                    <p>Shows all Results in this room</p>
-                </div>
+                <label for="resultsId">All-Results-Overlay </label><input type="text" readonly id="resultsId" style="flex-grow: 1"/><button popovertarget="all-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
             <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
-                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">?</button><br/>
-                <div popover id="my-results-hint" class="tooltip">
-                    <p>Shows only my Results in this room</p>
-                </div>
+                <label for="myResultsId">My-Results-Overlay </label><input type="text" readonly id="myResultsId" style="flex-grow: 1"/><button popovertarget="my-results-hint" data-trigger="hover" class="overlayButton">🛈</button>
             </div>
         </div>
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Customize Dice  <a>🞃</a></button>
@@ -161,14 +170,15 @@
             </select>
             <br/>
             <color-picker id="themeColor"></color-picker><br/>
-            <button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
-            <div popover id="save-dice-hint" class="tooltip">
-                This saves your current theme and theme color for current Name
-            </div>
+            <div id="dice-box"></div>
+
+            <button style="margin-bottom: 20px" id="preview">Preview 🔎</button>
+            <button style="margin-bottom: 20px" 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/>
+        <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">
@@ -179,6 +189,23 @@
         <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden; border: 0" onload="this.height=this.contentWindow.document.body.scrollHeight;" ></iframe>
     </div>
 
+    <div popover id="overlay-hint" class="tooltip">
+        <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>
+        </ul>
+    </div>
+    <div popover id="all-results-hint" class="tooltip">
+        <p>Shows all Results in this room</p>
+    </div>
+    <div popover id="my-results-hint" class="tooltip">
+        <p>Shows only my Results in this room</p>
+    </div>
+    <div popover id="save-dice-hint" class="tooltip">
+        This saves your current theme and theme color for current Name
+    </div>
 </div>
 <script>
     function url() {
@@ -270,6 +297,23 @@
         }
     })
 </script>
+<script type="module">
+    import DiceBox from "/vendor/dice-box/dice-box.es.js";
+    document.addEventListener("DOMContentLoaded", async() => {
+        document.getElementById('preview').onclick = async () => {
+            document.getElementById('dice-box').replaceChildren(...[])
+            const diceBox = new DiceBox("#dice-box", {
+                assetPath: "/vendor/assets/",
+                theme: document.getElementById('theme').value,
+                themeColor: document.getElementById('themeColor').value,
+                scale: 14
+            });
+            await diceBox.init()
+            diceBox.roll(['1d2','1d4','1d6','1d8','1d10','1d12','1d20','1d100']);
+        }
+    })
+
+</script>
 </body>
 <footer class="w3-theme-l1 w3-center w3-padding-16">
     <a href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Dice-Tower on my GitTea</a>
