diff --git a/assets/web/index.html b/assets/web/index.html
index 79ff186..b6b844c 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -1,89 +1,101 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel="stylesheet" href="./style.css">
-        <script src="./tavern.js"></script>
-        <script src="./app.js"></script>
-    </head>
-    <body onload="init()">
-        <!-- LOGIN PAGE -->
-        <div id="login-screen" style="display: flex; justify-content: center; width: 100%; height: 100%;">
-            <div style="display: flex; justify-content: center; flex-direction: column;" >
-                <input type="text" id="login-username" placeholder="Username..." >
-                <input type="password" id="login-pass" placeholder="Password..." >
-                <button onclick="onLoginClick()">
-                    Login
-                </button> 
+
+<head>
+    <link rel="stylesheet" href="./style.css">
+    <script src="./tavern.js"></script>
+    <script src="./app.js"></script>
+</head>
+
+<body onload="init()">
+    <!-- LOGIN PAGE -->
+    <div id="login-screen" style="display: flex; justify-content: center; width: 100%; height: 100%;">
+        <div style="display: flex; justify-content: center; flex-direction: column; gap: 4px;">
+            <input type="text" id="login-username" placeholder="Username...">
+            <input type="password" id="login-pass" placeholder="Password...">
+            <div></div>
+            <button onclick="onLoginClick()">
+                Login
+            </button>
+        </div>
+    </div>
+    <!-- GAME VIEW PAGE -->
+    <div id="game" style="display: none; width: 100%; height: 100%;">
+        <div id="side-panel">
+            <div style="display: flex; flex-direction: column; width: calc(100% - 15px); height: 100%;">
+                <div id="chat-history">
+                </div>
+                <div id="chat-input" style="width: 100%; flex-grow: 1; margin: 10px 0; display:flex;">
+                    <textarea id="newmsg-content" placeholder="Message..." spellcheck="true"
+                        style="resize:none; height: auto; flex-grow: 1; min-width:0px;"></textarea>
+                    <!-- it looks better without the button :( -->
+                    <!-- <button style="height: fit-content; align-self: center; margin: 0 4px;" onclick="sendChatMessage()">Send</button> -->
+                </div>
+
             </div>
         </div>
-        <!-- GAME VIEW PAGE -->
-        <div id="game" style="display: none; width: 100%; height: 100%;" >
-            <div id="side-panel">
-                <div style="display: flex; flex-direction: column; width: calc(100% - 15px); height: 100%;" >
-                    <div id="chat-history">
-                    </div>
-                    <div id="chat-input" style="width: 100%; flex-grow: 1; margin: 10px 0; display:flex;">
-                        <textarea id="newmsg-content" placeholder="Message..." spellcheck="true" style="resize:none; height: auto; flex-grow: 1; min-width:0px;"></textarea>
-                        <!-- it looks better without the button :( -->
-                        <!-- <button style="height: fit-content; align-self: center; margin: 0 4px;" onclick="sendChatMessage()">Send</button> -->
-                    </div>
-
-                </div>
+        <div id="game-view"
+            style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;">
+            <div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;">
+                floating<br>stuff
             </div>
-            <div id="game-view" style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;" >
-                <div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;" >
-                    floating<br>stuff
-                </div>
-                <div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
-                    <div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
-                        <div style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
-                            <h3 id="dice-roll-title" style="align-self: center;">
-                                THIS IS THE ROLL DISPLAY
-                            </h3>
-                            <div id="dice-roll-holder" style="display: flex; flex-direction: column;">
+            <div id="dice-roll-popup"
+                style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
+                <div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
+                    <div
+                        style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
+                        <h3 id="dice-roll-title" style="align-self: center;">
+                            THIS IS THE ROLL DISPLAY
+                        </h3>
+                        <div id="dice-roll-holder" style="display: flex; flex-direction: column;">
 
-                            </div>
-                            <div style="display: flex;">
-                                <button style="flex-grow: 1; margin: 4px;" onclick="document.getElementById('dice-roll-popup').style.display = 'none';">Cancel</button>
-                                <button style="flex-grow: 1; margin: 4px;" onclick="rollPopup()">Roll</button>
-                            </div>
+                        </div>
+                        <div style="display: flex;">
+                            <button style="flex-grow: 1; margin: 4px;"
+                                onclick="document.getElementById('dice-roll-popup').style.display = 'none';">Cancel</button>
+                            <button style="flex-grow: 1; margin: 4px;" onclick="rollPopup()">Roll</button>
                         </div>
                     </div>
                 </div>
-                <div style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
-                    <button style="background-color: #ffffd6;"><b>s</b></button>
-                    <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
-                </div>
-                <div id="map" style="position:absolute; transform-origin: top left;">
-                    <img src="https://rustystriker.dev/molly.jpg" height="200%" >
-                </div>
+            </div>
+            <div
+                style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
+                <button style="background-color: #ffffd6;"><b>s</b></button>
+                <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
+            </div>
+            <div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
+                <img src="https://rustystriker.dev/molly.jpg" height="200%">
             </div>
         </div>
-        <!-- FLOATY (game view) WINDOWS -->
-        <div id="msg-context-menu" class="chat-message">
-			<ul>
-                <li>Delete (TODO)</li>
-			</ul>
+    </div>
+    <!-- FLOATY (game view) WINDOWS -->
+    <div id="msg-context-menu" class="chat-message">
+        <ul>
+            <li>Delete (TODO)</li>
+        </ul>
+    </div>
+    <div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none; 
+        flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
+        <div style="min-width: 150px; user-select: none; display: flex;"
+            onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker')">
+            <h3 style="flex-grow: 1; margin: 8px 0;">Initiative</h3>
+            <!-- it looks bad, for now just click the 'open initiative tracker' button again -->
+            <button onclick="document.getElementById('initiative-tracker').style.display = 'none';"
+                style="height: fit-content; align-self: center; background-color: transparent; font-size: 20px; border: 0;">
+                X
+            </button>
         </div>
-        <div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none; flex-direction: column; top: 40px; right: 8px">
-            <div style="background-color: black; color:#ffffd6; margin-top: 0px; margin-bottom: 8px; padding: 0 4px; min-width: 150px; user-select: none; display: flex;"
-                onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker')">
-                <h3 style="flex-grow: 1;">Initiative</h3>
-                <!-- it looks bad, for now just click the 'open initiative tracker' button again -->
-                <button onclick="document.getElementById('initiative-tracker').style.display = 'none';" 
-                    style="height: fit-content; align-self: center; background-color: transparent; color:#ffffd6; font-size: 20px; border: 0;">
-                    X
-                </button>
-            </div>
-            <div>
-                aaaa
-            </div>
-            <div>
-                bbbb
-            </div>
-            <div>
-                cccc
-            </div>
+        <hr style="width: 100%; margin: 0px; align-self: center;" />
+        <div>
+            aaaa
         </div>
-    </body>
-</html>
+        <div>
+            bbbb
+        </div>
+        <div>
+            cccc
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
