diff --git a/src/main/resources/templates/pub/index.html b/src/main/resources/templates/pub/index.html
index 32ae877..caec8a0 100644
--- a/src/main/resources/templates/pub/index.html
+++ b/src/main/resources/templates/pub/index.html
@@ -4,12 +4,13 @@
     <meta charset="UTF-8">
     <title>Dice-Tower</title>
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
     <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-l4 { color:#fff !important; background-color:grey !important}
+        .w3-theme-l1 { color:#fff !important; background-color:#333333 !important}
         .collapsible {
-            background-color: grey;
+            background-color: #333333;
             color: black;
             cursor: pointer;
             margin-top: 10px;
@@ -26,6 +27,7 @@
             display: none;
             overflow: hidden;
             background-color: lightgrey;
+            color: black
         }
 
         button {
@@ -36,15 +38,15 @@
         }
     </style>
 </head>
-<body class="w3-theme-l4">
+<body class="w3-theme-l1">
 <div class="w3-container w3-content" style="height: 100vh">
     <h1>Dice-Tower</h1>
     <p>Welcome to Dice-Tower</p>
-    <div class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
+    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
         <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/>
     </div>
-    <div id="dice-tower" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px">
+    <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px">
         <button type="button" class="collapsible" style="color: white; font-weight: bold">Overlay URLs</button>
         <div class="content">
             <label for="overlayId">Dice-Overlay </label><input type="text" readonly id="overlayId" style="width: 75%"/><br/>
@@ -74,7 +76,7 @@
 
     <button id="start" onclick="start()">Start</button>
 
-    <div id="results" hidden class="w3-panel w3-white w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
+    <div id="results" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; overflow: hidden; height: 50vh;">
         <h2>Results</h2>
         <iframe id="resultFrame" title="results" style="width: 100%; height: 85%; overflow: hidden" onload="this.height=this.contentWindow.document.body.scrollHeight;"></iframe>
     </div>
