diff --git a/freechat-client/example-dev-config.json b/freechat-client/example-dev-config.json
index 604f253..d37fc40 100644
--- a/freechat-client/example-dev-config.json
+++ b/freechat-client/example-dev-config.json
@@ -8,6 +8,12 @@
 			"description": "really good",
 			"key": "given by server don't worry fow now",
 			"username": "this is optional per server"
+		},
+		{
+			"name": "another one"
+		},
+		{
+			"name": "shockrah's lair"
 		}
 	],
 
diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 033ff05..075ce2c 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -1,24 +1,69 @@
 <!-- Keep in mind basically all the major components of the app are held together here -->
-<!-- The reason for this is because I want to keep the electron app as simple as I can get it -->
+<!-- The reason for this is because ~~~~~ I'm actually just lazy -->
 <html>
 <head>
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+	<!-- required bs for bootstrap -->
 	<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"/>
+
 	<link rel="stylesheet" href="css/style.css"/>
 	<title>Freechat</title>
 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-	<a class="navbar-brand">
-		<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
-		Freechat
-	</a>
-	<ul class="navbar-nav mr-auto">
-		<li class="nav-item"><a class="btn btn-outline-secondary btn-nav-settings">Settings</a></li>
-	</ul>
+	<div class="container-fluid">
+		<a class="navbar-brand">
+			<img src="../assets/logo.png" width="30" height="30" class="d-inline-block align-top" loading="lazy">
+			Freechat
+		</a>
+		<ul class="navbar-nav mr-auto" style="display: inline-block;">
+			<button class="btn btn-outline-secondary btn-nav-settings me-2" type="button" id="settings-btn">Settings</button>
+			<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>
+		<div class="collapse navbar-collapse">
+			<ul class="navbav-nav mr-auto" style="display: inline-block;", id="server-list"></ul>
+		</div>
+		<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>
+			<div class="modal-body">
+				<form> <input type="text" class="form-text"> </form>
+			</div>
+		</div>
+	</div>
+</div>
+
 </body>
-	<script src="./js/loader.js"></script>
+<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>
+	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
+	if(config['servers']) {
+		let parent = document.getElementById('server-list')
+		for(const server of config['servers']) {
+			let node = document.createElement('button')
+			node.classList.add('btn', 'btn-outline-secondary', 'btn-nav-settings')
+			node.type = 'button'
+			node.textContent = server['name']
+			parent.appendChild(node)
+			console.log(node)
+		}
+	}
+</script>
 </html>
 
diff --git a/freechat-client/sass/style.scss b/freechat-client/sass/style.scss
index 86738cd..13441bb 100644
--- a/freechat-client/sass/style.scss
+++ b/freechat-client/sass/style.scss
@@ -32,5 +32,6 @@ input {
 
 .btn-nav-settings {
 	color: whitesmoke;
-	border-color: whitesmoke;
+    border-color: whitesmoke;
+    margin-right: 1em;
 }
diff --git a/freechat-client/src/config.js b/freechat-client/src/config.js
index 61f8baa..776be17 100644
--- a/freechat-client/src/config.js
+++ b/freechat-client/src/config.js
@@ -16,7 +16,7 @@ function get_config(parser) {
 
 	// now we'll just blindly construct the config object from here on out
 	let ret = { path: path }
-	for(const key in file_json.keys) {
+	for(const key of Object.keys(file_json)) {
 		if(key == 'path') { continue } // don't overwrite the old path
 		else {
 			ret[key] = file_json[key]
