diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 075ce2c..101d2ec 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -22,23 +22,34 @@
 			<button class="btn btn-outline-secondary btn-nav-settings" type="button" id="join-btn" data-toggle="modal", data-target="#joinform">Join</button>
 			<!-- Now comes the list of serves that we're a part of -->
 		</ul>
+		<!-- Basically a container for the "hamburger-collapse-button-thing" to target when it does have to collapse -->
+		<!-- 
+			Alternatively we could simply make the list of items scrollable or something but like that would be kinda aids 
+			Though to be fair no one should be in 9999  instances cuz that's degeneracy(also this is what configs are literally made for)
+		-->
 		<div class="collapse navbar-collapse">
 			<ul class="navbav-nav mr-auto" style="display: inline-block;", id="server-list"></ul>
 		</div>
+		<!-- Button used for the collapsing thingy - the ((hamburger menu)) -->
 		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
       		<span class="navbar-toggler-icon"></span>
     	</button>
 	</div>
 </nav>
 
-<!--NOTE: for some reason this isn't popping up like it should/would on a browser -->
 <div id="joinform" class="modal fade" tabindex="-1">
 	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header"> <h5 class="modal-title">Paste an invite link below></h5>
+		<div class="modal-content join-style">
+			<div class="modal-header"> 
+				<h5 class="modal-title">Paste an invite link below</h5>
 			</div>
 			<div class="modal-body">
-				<form> <input type="text" class="form-text"> </form>
+				<form> 
+					<input type="text" class="form-text">
+					<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Example: sample-domain.io/invite/42069</label>
+					<label for="submit-invite-link" class="form-label" style="color:darkslategrey">Degen note: Freechat ONLY does HTTPS, so the prefix isn't needed. If anyone says otherwise they're full of shit</label>
+					<button class="btn btn-outline-success" type="button" id="submit-invite-link">Join</button>
+				 </form>
 			</div>
 		</div>
 	</div>
@@ -46,10 +57,8 @@
 
 </body>
 <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
-<script type="text/javascript" src="../libs/js/popper.min.js"></script>
-<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
+<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
 <script>
-	const dom = require('./js/dom-helpers.js')
 	const { ipcRenderer } = require('electron')
 	const config = ipcRenderer.sendSync('config-request', 'benis')
 	// only put things like the server list up if theres anythng to put in there
@@ -61,7 +70,6 @@
 			node.type = 'button'
 			node.textContent = server['name']
 			parent.appendChild(node)
-			console.log(node)
 		}
 	}
 </script>