diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 03fb520..b04008f 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -31,14 +31,14 @@
 
 <div class="wrapper" id="content-container">
 	<nav>
-		<div class="channels-list-header"><h3>server name here</h3></div>
+		<div class="channels-list-header"><h3 id="server-name">...</h3></div>
 		<ul class="list-unstyled components" id="channels-list">
 		</ul>
 	</nav>
 	<!-- Sample data so we know what things should look like -->
 	<div class="container scroller" id="messages-container" style="max-width: 100%;">
-		<div class="channel-list-header"><h4>#Channel name here</h4></div>
-		<div class="channel-list-header"><p>Channel description here</p></div>
+		<div class="channel-list-header"><h4 id="channel-name">...</h4></div>
+		<div class="channel-list-header"><p id="channel-description"></p></div>
 		<ul class="list-unstyled components" id="messages-list">
 			<li id="m-123"> <p class="message"> <a href="#" class="btn btn-link author-name">resident tweeker</a> some bs content </p> </li>
 		</ul>
@@ -61,8 +61,7 @@
 			<div class="modal-body">
 				<form> 
 					<input type="text" class="form-text join-form-label" id="invite-link-text">
-					<label for="submit-invite-link" class="form-label">Example: sample-domain.io/invite/42069</label>
-					<label for="submit-invite-link" class="form-label">Degen note: Freechat ONLY does HTTPS, so the prefix isn't needed. If anyone says otherwise they're full of shit</label>
+					<label for="submit-invite-link" class="form-label">Example: https://sample-domain.io:4536/invite/42069</label>
 					<button class="btn btn-outline-success" type="button" id="invite-link-button">Join</button>
 				 </form>
 			</div>
@@ -70,6 +69,20 @@
 	</div>
 </div>
 
+<!-- Warning Toast -->
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header">
+	  <!-- <img src="..." class="rounded mr-2" alt="..."> -->
+    <strong class="mr-auto">Warning</strong>
+    <small class="text-muted">just now</small>
+    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="toast-body" id="warning-toast"></div>
+</div>
+
+
 </body>
 <!-- JQuery doesn't load so our squishy boi of the the collapsable menu literally doesn't work-->
 <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
@@ -81,9 +94,49 @@
 <script>
 	const { ipcRenderer } = require('electron')
 	const config = ipcRenderer.sendSync('config-request')
-	const html = require('../src/html.js')
+	const auth = require('../src/auth.js')
+	const channels = require('../src/channels.js')
 
-	html.build_server_list(config, 'server-list')
+	// used for basic styling on server buttons
+	const classes = 'btn btn-outline-secondary btn-nav-settings'
+
+	// NOTE: this will probably take minute if your in a lot of servers
+	// even worse if server owners are running debug builds like tards
+	// get a new jwt from each server on startup
+	auth.init(config)
+		.then(updated_cfg => {
+			for(const server_cfg of updated_cfg['servers']) {
+				const remote = server_cfg['server']
+				const user = server_cfg['user']
+
+				// html generation
+				const id = remote['hostname']
+				const txt = remote['name']
+
+				$('#server-list').append(
+					$('<input>').attr({
+						type: 'button',
+						'class' : classes,
+						id: id,
+						value: txt
+					})
+				)
+				console.log(user)
+				$(`#${id}`).on('click', () =>  {
+					channels.list(remote, user)
+				})
+			}
+		})
+		.catch(err => {
+			console.log(err.options)
+			$('#server-list').append(
+				$('<input>').attr({
+					type: 'button',
+					'class': classes + ' disabled',
+					value: `${err.options.url.hostname}`
+				})
+			)
+		})
 </script>
 </html>