diff --git a/freechat-client/example-dev-config.json b/freechat-client/example-dev-config.json
index d37fc40..e9ab2b3 100644
--- a/freechat-client/example-dev-config.json
+++ b/freechat-client/example-dev-config.json
@@ -3,10 +3,10 @@
 	"servers": [
 		{
 			"name": "cool1",
-			"domain": "freechat.shockrah.io/",
+			"domain": "freechat.shockrah.io",
 			"ip": "0.0.0.0",
 			"description": "really good",
-			"key": "given by server don't worry fow now",
+			"key": "this right here is the secret for that user",
 			"username": "this is optional per server"
 		},
 		{
@@ -17,9 +17,7 @@
 		}
 	],
 
+	"ignore-me": "global's like this are mainly for default configuration things",
 	"global-username": "shockrah",
-	"bs-key": "ignore everthing past this point for now",
-	"proxy": "one day this will be a thing",
-	"private-key": "user key goes here",
-	"public-key": "user public key also goes here"
+	"proxy": "one day this will be a thing"
 }
diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 101d2ec..e058dd8 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -20,35 +20,46 @@
 		<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>
 		<!-- 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 class="collapse navbar-collapse", id="nav-collapse">
+			<ul class="navbav-nav mr-auto", 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">
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-collapse">
       		<span class="navbar-toggler-icon"></span>
     	</button>
 	</div>
 </nav>
 
+<div class="wrapper" id="content-container">
+	<nav id="channels-container">
+		<div class="channels-list-header"><h3>server name here</h3></div>
+		<ul class="list-unstyled components">
+			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+		</ul>
+	</nav>
+	<div class="container" id="messages-container" style="background-color: blue">more bs content</div>
+</div>
+
 <div id="joinform" class="modal fade" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content join-style">
-			<div class="modal-header"> 
-				<h5 class="modal-title">Paste an invite link below</h5>
-			</div>
+			<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">
-					<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>
+					<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>
+					<button class="btn btn-outline-success" type="button" id="invite-link-button">Join</button>
 				 </form>
 			</div>
 		</div>
@@ -56,7 +67,11 @@
 </div>
 
 </body>
-<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>
+<!-- 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> -->
+<script>window.jQuery = window.$ = require('jquery')</script>
+<script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper.js"></script>
+<script type="text/javascript" src="../node_modules/popper.js/dist/umd/popper-utils.js"></script>
 <script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
 <script>
 	const { ipcRenderer } = require('electron')
@@ -69,6 +84,7 @@
 			node.classList.add('btn', 'btn-outline-secondary', 'btn-nav-settings')
 			node.type = 'button'
 			node.textContent = server['name']
+			node.id = server['ip'] || server['url'] // perfer the ip to avoid dns
 			parent.appendChild(node)
 		}
 	}
diff --git a/freechat-client/sass/general.scss b/freechat-client/sass/general.scss
index 1e8acc2..4e228f4 100644
--- a/freechat-client/sass/general.scss
+++ b/freechat-client/sass/general.scss
@@ -7,6 +7,7 @@
 $top-grey: #424242;
 $back-grey: #303030;
 $bar-grey: #212121;
+$text: whitesmoke;
 
 body {
     background: $back-grey;
diff --git a/freechat-client/sass/style.scss b/freechat-client/sass/style.scss
index 13441bb..4ee0500 100644
--- a/freechat-client/sass/style.scss
+++ b/freechat-client/sass/style.scss
@@ -1,18 +1,16 @@
 @import 'general';
 
-$text-color: white;
-
 body {
-    color: $text-color;
+    color: $text;
 }
 
 
 label {
-    color: $text-color;
+    color: $text;
 }
 
 h1 {
-    color: $text-color;
+    color: $text;
     display: block;
 }
 .center {
@@ -31,7 +29,54 @@ input {
 // Menu bar stuff
 
 .btn-nav-settings {
-	color: whitesmoke;
-    border-color: whitesmoke;
+	color: $text;
+    border-color: $text;
     margin-right: 1em;
 }
+
+// Join modal meme
+.join-style {
+    color: $text;
+    background: $top-grey;
+}
+
+.join-form-label {
+    color: $text;
+}
+
+// mostly used to let the sidebar be of a correct height
+.wrapper {
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+}
+
+
+// CHANNEL SIDEBAR Things
+#channels-container {
+    min-width: 200px;
+    max-width: 200px;
+    min-height: 100vh;
+}
+
+.channels-list-header {
+    color: $text;
+    background-color: $back-grey;
+}
+
+ul ul a {
+    font-size: 0.9em !important;
+    padding-left: 30px !important;
+    background: #6d7fcc;
+}
+
+#channels-container ul li a {
+    padding: 10px;
+    display: block;
+    text-decoration: none;
+    color: $text;
+}
+
+#channels-container ul li a:hover {
+    background-color: $bar-grey;
+}
\ No newline at end of file