diff --git a/app/app.html b/app/app.html
index 3552652..a1350dd 100644
--- a/app/app.html
+++ b/app/app.html
@@ -55,14 +55,34 @@
 			<!--<input type="button" id="send" value="Send" onclick="sendMsg()">-->
 		</div>
 		<div id="member-region">
-			<div style="margin-left: 10px">
+			<div style="margin-left: 10px;position: relative; display:none">
 				<!--<a href="settings" target="_blank">Settings</a><br>-->
-				<b>CustomDiscord Dev</b><br>
+				<!-- <b>CustomDiscord Dev</b><br> -->
 				<!--<button onclick="setTheme('theme-dark')">🌙 Switch to Dark Theme</button><br>
 				<button onclick="setTheme('theme-default')">🌞 Switch to Light Theme</button><br>
 				<button onclick="setTheme('')">🚫 Remove Theme</button>
 				<button id="btnstatuschange">Change Status</button>-->
+				
+				
+				
+
 			</div>
+			<div id="memberlist-controls">
+				<div id="memberlist-controls-popout"></div>
+				<div id="memberlist-controls-minimize"></div>
+			</div>
+			<div id="memberlist">
+					<div class="role">
+						<span class="rolename">online</span>
+						<div class="rolemember">
+							<div class="message-author">
+								<img class="message-author-avatar role-avatar" src="https://cdn.discordapp.com/avatars/318394797822050315/2fa77b5d206a2fff02a98e039ec78cc0.webp">
+								<div class="message-author-name role-username">cfp#7174</div>
+								<div class="role-status">Coding</div>
+							</div>
+						</div>
+					</div>
+				</div>
 		</div>
 	</div>
 	<!--
diff --git a/app/main.js b/app/main.js
index cb7e4b6..ed64975 100644
--- a/app/main.js
+++ b/app/main.js
@@ -67,6 +67,7 @@ function setStatus() {
 		}
 		setTimeout(function() {
 			updateUserRegion();
+			reloadMemberList();
 		}, 100);
 	};
 }
@@ -165,6 +166,89 @@ function reloadChannelList() {
 	channelsDiv.appendChild(guild.channellist);
 }
 
+function reloadMemberList() {
+	var memberDiv = $("memberlist");
+	var guildId = cache.getGuild(cache.current).id;
+	var guild = client.guilds.cache.get(guildId);
+	while(memberDiv.firstChild) memberDiv.removeChild(memberDiv.lastChild);
+
+	var status = ["online", "idle", "dnd", "offline"];
+	console.log(status);
+
+	status.forEach(s => {
+		console.log(s);
+		var users = guild.members.cache.filter(m => m.presence.status === s);
+		if(users.size !== 0) {
+			var role = document.createElement("div");
+			role.classList.add("role");
+
+			var roleName = document.createElement("span");
+			roleName.classList.add("rolename");
+			roleName.innerText = s;
+			role.appendChild(roleName);
+			
+			for (let value of users) {
+				console.log("Adding " + value[1].user.tag);
+				console.log(value[1]);
+				var user = value[1].user;
+				
+				var rolemember = document.createElement("div");
+				rolemember.classList.add("rolemember");
+				if(s === "offline") {
+					rolemember.style.filter = "grayscale(100%)";
+				}
+				role.appendChild(rolemember);
+				var avatar = document.createElement("img");
+				avatar.classList.add("member-avatar");
+				avatar.src = user.displayAvatarURL();
+				rolemember.appendChild(avatar);
+
+				var memberInfo = document.createElement("div");
+				memberInfo.classList.add("member-info");
+				rolemember.appendChild(memberInfo);
+				
+				var username = document.createElement("div");
+				username.classList.add("member-username");
+				username.innerText = guild.member(user).displayName;
+				if(guild.owner.user.tag === user.tag) { // TODO: Add option for displaying discrim after username (requires settings)
+					username.innerHTML = escapeHTML(username.innerText) + "<img class='crown' src='../img/crown.svg'>";
+					if(user.bot) {
+						username.innerHTML = username.innerText + ' <span class="botBadge">BOT</span>';
+					}
+				} else {
+					if(user.bot) {
+						username.innerHTML = escapeHTML(username.innerText) + ' <span class="botBadge">BOT</span>';
+					}
+				}
+				
+				memberInfo.appendChild(username);
+				var rolestatus = document.createElement("div");
+				rolestatus.classList.add("member-status"); // user.presence.status for online status
+				if(user.presence.activities[0]) {
+					// rolestatus.innerText = user.presence.activities[0].name;
+
+					var status = user.presence.activities[0].name;
+					var prefix = "\u2753"; // question mark
+					if(user.presence.activities[0].type == "PLAYING") prefix = "\u{1F3AE}"; // game controller
+					if(user.presence.activities[0].type == "WATCHING") prefix = "\u{1F5A5}"; // monitor
+					if(user.presence.activities[0].type == "LISTENING") prefix = "\u{1F3A7}"; // headphones
+					if(user.presence.activities[0].type == "STREAMING") prefix = "\u{1F3A5}"; // video camera
+					rolestatus.innerText = prefix + " " + status;
+				} else {
+					rolestatus.innerText = "";
+				}
+				memberInfo.appendChild(rolestatus);
+				
+				// var user.displayAvatarURL());
+			}
+
+			memberDiv.appendChild(role);
+		} else {
+			console.log("Role empty " + s + ", skipping");
+		}
+	});
+}
+
 function updateUserRegion() {
 	$("user-region-name").innerText = client.user.tag;
 	$("user-region-avatar").style.backgroundImage = "url('" + client.user.displayAvatarURL() + "')";
@@ -331,6 +415,18 @@ function onLoaded() {
 	reloadChannelList();
 	loadMessageHistory();
 	updateUserRegion();
+	reloadMemberList();
+	
+	var b0 = $("memberlist-controls-popout");
+	var b1 = $("memberlist-controls-minimize");
+	if(b0 && b1) {
+		b0.addEventListener("click", () => alert("Coming soon™️"));
+		b1.addEventListener("click", () => {
+			var reg = $("member-region")
+			reg.classList.toggle("minimized");
+		});
+	}
+	
 	console.log("Loaded CustomDC!");
 }
 
diff --git a/background/dc_listeners.js b/background/dc_listeners.js
index 1e40078..7e8e70b 100644
--- a/background/dc_listeners.js
+++ b/background/dc_listeners.js
@@ -124,4 +124,8 @@ client.on('typingStart', (channel, user) => {
 		//console.log(user.username + " schreibt");
 		//$("typing").innerHTML = "<b>" + author + "</b> is typing...";
 	}*/
-});
\ No newline at end of file
+});
+
+client.on('presenceUpdate', (oldMember, newMember) => {
+	reloadMemberList(); // I KNOW THIS IS NOT A GOOD WAY TO RELOAD EVERYTHING PUT IT WILL COME IN NEXT PR
+});
diff --git a/background/main.js b/background/main.js
index d25a6c3..1485944 100644
--- a/background/main.js
+++ b/background/main.js
@@ -122,4 +122,7 @@ function loadMessageHistory() {
 }
 function reloadChannelList() {
 	if(isAppOpen()) clientWindow.reloadChannelList();
+}
+function reloadMemberList() {
+	if(isAppOpen()) clientWindow.reloadMemberList();
 }
\ No newline at end of file
diff --git a/img/crown.svg b/img/crown.svg
new file mode 100644
index 0000000..51d8b7f
--- /dev/null
+++ b/img/crown.svg
@@ -0,0 +1,9 @@
+<svg aria-label="Server Owner" class="crown" aria-hidden="false" width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.6572 5.42868C13.8879 5.29002 14.1806 5.30402 14.3973 5.46468C14.6133 5.62602 14.7119 5.90068 14.6473 6.16202L13.3139 11.4954C13.2393 11.7927 12.9726 12.0007 12.6666 12.0007H3.33325C3.02725 12.0007 2.76058 11.792 2.68592 11.4954L1.35258 6.16202C1.28792 5.90068 1.38658 5.62602 1.60258 5.46468C1.81992 5.30468 2.11192 5.29068 2.34325 5.42868L5.13192 7.10202L7.44592 3.63068C7.46173 3.60697 7.48377 3.5913 7.50588 3.57559C7.5192 3.56612 7.53255 3.55663 7.54458 3.54535L6.90258 2.90268C6.77325 2.77335 6.77325 2.56068 6.90258 2.43135L7.76458 1.56935C7.89392 1.44002 8.10658 1.44002 8.23592 1.56935L9.09792 2.43135C9.22725 2.56068 9.22725 2.77335 9.09792 2.90268L8.45592 3.54535C8.46794 3.55686 8.48154 3.56651 8.49516 3.57618C8.51703 3.5917 8.53897 3.60727 8.55458 3.63068L10.8686 7.10202L13.6572 5.42868ZM2.66667 12.6673H13.3333V14.0007H2.66667V12.6673Z"
+        fill="#EFA119"
+        aria-hidden="true"
+    ></path>
+</svg>
diff --git a/styles/style.css b/styles/style.css
index 5e0c4aa..7e52c97 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,306 +1,308 @@
 html, body, #client {
-	height: 100%;
+    height: 100%;
 }
 
 body {
-	margin: 0px;
-	background-color: var(--background-primary);
-	color: var(--text-normal);
-	font-size: 18px;
+    margin: 0px;
+    background-color: var(--background-primary);
+    color: var(--text-normal);
+    font-size: 18px;
 }
 
 * {
-	border-spacing: 0px;
+    border-spacing: 0px;
 }
 
 a, a:visited {
-	color: var(--text-link);
+    color: var(--text-link);
 }
 
 textarea {
-	resize: none;
-	outline: none;
-	overflow: hidden;
+    resize: none;
+    outline: none;
+    overflow: hidden;
 }
 
 #client {
-	display: flex;
-	overflow: hidden;
-	flex-direction: row;
-	background: var(--background-primary);
+    display: flex;
+    overflow: hidden;
+    flex-direction: row;
+    background: var(--background-primary);
 }
 
 #client > * {
-	flex: 0 0 auto;
+    flex: 0 0 auto;
 }
 
 #guild-region {
-	display: flex;
-	width: 70px;
-	background: var(--background-tertiary);
-	padding: 5px 0px 5px 0px;
+    display: flex;
+    width: 70px;
+    background: var(--background-tertiary);
+    padding: 5px 0px 5px 0px;
 }
 
 #channel-region {
-	display: flex;
-	flex-direction: column;
-	width: 250px;
-	overflow: hidden;
-	background: var(--background-secondary);
+    display: flex;
+    flex-direction: column;
+    width: 250px;
+    overflow: hidden;
+    background: var(--background-secondary);
 }
 
 #chat-region {
-	display: flex;
-	overflow: hidden;
-	flex-direction: column;
-	flex: 1 1 auto;
-	background: var(--background-primary);
-	padding-right: 3pt;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    flex: 1 1 auto;
+    background: var(--background-primary);
+    padding-right: 3pt;
 }
 
 #member-region {
-	display: flex;
-	width: 250px;
-	background: var(--background-secondary);
+    display: flex;
+    width: 250px;
+    background: var(--background-secondary);
+    overflow: hidden;
+    flex-direction: column;
 }
 
 #guild-list {
-	overflow: hidden scroll;
-	display: flex;
-	flex-direction: column;
+    overflow: hidden scroll;
+    display: flex;
+    flex-direction: column;
 }
 
 #channel-list {
-	flex: 1 1 auto;
-	overflow: hidden scroll;
-	padding-right: 3pt;
-	margin-right: 3pt;
+    flex: 1 1 auto;
+    overflow: hidden scroll;
+    padding-right: 3pt;
+    margin-right: 3pt;
 }
 
 #user-region {
-	display: flex;
-	background: var(--background-secondary-alt);
-	height: 60px;
+    display: flex;
+    background: var(--background-secondary-alt);
+    height: 60px;
 }
 
 #chat-history {
-	flex: 1 1 auto;
-	overflow: hidden scroll;
-	padding-right: 3pt;
-	padding-bottom: 24px;
+    flex: 1 1 auto;
+    overflow: hidden scroll;
+    padding-right: 3pt;
+    padding-bottom: 24px;
 }
 
 .guild {
-	border-radius: 25px;
-	display: flex;
-	margin: 5px 10px 5px 10px;
-	overflow: hidden;
-	transition: 0.3s;
-	cursor: pointer;
+    border-radius: 25px;
+    display: flex;
+    margin: 5px 10px 5px 10px;
+    overflow: hidden;
+    transition: 0.3s;
+    cursor: pointer;
 }
 
 .guild:hover, .guild.guild-active:hover {
-	background: rgba(255, 255, 255, 0.2);
-	border-radius: 15px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 15px;
 }
 
 .guild img {
-	width: 50px;
-	height: 50px;
+    width: 50px;
+    height: 50px;
 }
 
 .guild.guild-active {
-	background: var(--channel-active);
-	border-radius: 15px;
+    background: var(--channel-active);
+    border-radius: 15px;
 }
 
 .category {
-	padding: 10px 0px 10px 0px;
+    padding: 10px 0px 10px 0px;
 }
 
 .category-name {
-	cursor: pointer;
-	padding: 2px 10px 2px 10px;
+    cursor: pointer;
+    padding: 2px 10px 2px 10px;
 }
 
 .channel {
-	cursor: pointer;
-	vertical-align: top;
-	text-align: left;
-	padding: 2px 10px 2px 10px;
-	overflow-wrap: anywhere;
+    cursor: pointer;
+    vertical-align: top;
+    text-align: left;
+    padding: 2px 10px 2px 10px;
+    overflow-wrap: anywhere;
 }
 
 .category .channel {
-	display: none;
+    display: none;
 }
 
 .channel:hover {
-	background: var(--interactive-hover);
+    background: var(--interactive-hover);
 }
 
 .channel.channel-active {
-	background: var(--channel-active);
-	display: block;
+    background: var(--channel-active);
+    display: block;
 }
 
 .category-showchans .channel {
-	display: block;
+    display: block;
 }
 
 #user-region-avatar {
-	width: 40px;
-	height: 40px;
-	background-repeat: no-repeat;
-	background-size: contain;
-	display: flex;
-	align-self: center;
-	margin: 0px 10px 0px 10px;
-	overflow: hidden;
-	border-radius: 20px;
+    width: 40px;
+    height: 40px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: flex;
+    align-self: center;
+    margin: 0px 10px 0px 10px;
+    overflow: hidden;
+    border-radius: 20px;
 }
 
 #user-region-main {
-	align-self: center;
-	width: 145px;
-	overflow: hidden;
+    align-self: center;
+    width: 145px;
+    overflow: hidden;
 }
 
 #user-region-settings {
-	position: absolute;
-	margin: 15px 0px 0px 215px;
-	display: inline-block;
-	width: 30px;
-	height: 30px;
-	cursor: pointer;
-	border-radius: 3px;
+    position: absolute;
+    margin: 15px 0px 0px 215px;
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    border-radius: 3px;
 }
 
 #user-region-settings:hover {
-	background-color: var(--interactive-hover);
+    background-color: var(--interactive-hover);
 }
 
 #user-region-settings div {
-	background-image: url("../img/gear.png");
-	background-repeat: no-repeat;
-	background-size: contain;
-	width: 20px;
-	height: 20px;
-	margin: 5px;
+    background-image: url("../img/gear.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 20px;
+    height: 20px;
+    margin: 5px;
 }
 
 .message {
-	padding: 10px;
-	font-size: 18px;
+    padding: 10px;
+    font-size: 18px;
 }
 
 .message:hover {
-	background: var(--message-hover);
+    background: var(--message-hover);
 }
 
 .message-author {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .message-author-name {
-	font-weight: bold;
-	font-family: Consolas, monospace, Arial;
-	display: flex;
-	align-self: center;
-	padding-left: 10px;
+    font-weight: bold;
+    font-family: Consolas, monospace, Arial;
+    display: flex;
+    align-self: center;
+    padding-left: 10px;
 }
 
 .message-content {
-	overflow-wrap: anywhere;
-	padding: 2px;
+    overflow-wrap: anywhere;
+    padding: 2px;
 }
 
 .message-author-avatar {
-	border-radius: 32px;
-	overflow: hidden;
-	width: 64px;
-	height: 64px;
-	display: flex;
+    border-radius: 32px;
+    overflow: hidden;
+    width: 64px;
+    height: 64px;
+    display: flex;
 }
 
 #loading {
-  	position: absolute;
-  	top: 50%;
-  	left: 50%;
-	transform: translate(-50%, -50%);
-	color: #7289DA;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #7289DA;
 }
 
 #loading div {
-	text-align: center;
+    text-align: center;
 }
 
 #inputbox {
-	display: flex;
-	flex: 0 1 auto;
-	flex-direction: column;
-	color: var(--text-normal);
-	background: var(--background-primary);
-	/* min-height: 40px; */
-	/* height: -webkit-fill-available; */
-	/* max-height: 180px; */
-	padding: 0px 10px 0px 10px;
-	/* overflow: auto; */
+    display: flex;
+    flex: 0 1 auto;
+    flex-direction: column;
+    color: var(--text-normal);
+    background: var(--background-primary);
+    /* min-height: 40px; */
+    /* height: -webkit-fill-available; */
+    /* max-height: 180px; */
+    padding: 0px 10px 0px 10px;
+    /* overflow: auto; */
 }
 
 #inputbox-inner {
-	flex: 0 0 auto;
-	color: var(--text-normal);
-	background: var(--textarea-background);
-	border-radius: 8px;
-	padding: 10px;
-	border-color: transparent;
-	min-height: 14px;
-	max-height: 250px;
-	font: 400 13.3333px Consolas;
-	outline: none;
-	overflow-wrap: anywhere;
-	overflow: hidden scroll;
+    flex: 0 0 auto;
+    color: var(--text-normal);
+    background: var(--textarea-background);
+    border-radius: 8px;
+    padding: 10px;
+    border-color: transparent;
+    min-height: 14px;
+    max-height: 250px;
+    font: 400 13.3333px Consolas;
+    outline: none;
+    overflow-wrap: anywhere;
+    overflow: hidden scroll;
 }
 
 #inputbox-placeholder {
-	position: absolute;
-	color: var(--text-muted);
-	font: 400 13.3333px Consolas;
-	padding: 10px;
-	pointer-events: none; 
+    position: absolute;
+    color: var(--text-muted);
+    font: 400 13.3333px Consolas;
+    padding: 10px;
+    pointer-events: none;
 }
 
 #typing {
-	position: flex;
-	font-size: 14px;
-	color: #c0c0c0;
-	padding: 2px;
-	height: 20px;
+    position: flex;
+    font-size: 14px;
+    color: #c0c0c0;
+    padding: 2px;
+    height: 20px;
 }
 
 #previewbox {
-	display: flex;
-	flex: 0 1 auto;
-	color: var(--text-normal);
-	background: var(--background-primary);
-	padding: 0px 10px 10px 10px;
+    display: flex;
+    flex: 0 1 auto;
+    color: var(--text-normal);
+    background: var(--background-primary);
+    padding: 0px 10px 10px 10px;
 }
 
 #previewbox-inner {
-	flex: 0 0 auto;
-	color: var(--text-normal);
-	background: var(--textarea-background);
-	border-radius: 8px;
-	padding: 10px;
-	border-color: transparent;
-	min-height: 14px;
-	max-height: 250px;
-	font-size: 13.3333px;
-	overflow-wrap: anywhere;
-	overflow: hidden scroll;
+    flex: 0 0 auto;
+    color: var(--text-normal);
+    background: var(--textarea-background);
+    border-radius: 8px;
+    padding: 10px;
+    border-color: transparent;
+    min-height: 14px;
+    max-height: 250px;
+    font-size: 13.3333px;
+    overflow-wrap: anywhere;
+    overflow: hidden scroll;
 }
 
 /* width */
@@ -309,238 +311,342 @@ textarea {
 }
 
 #guild-list::-webkit-scrollbar {
-	width: 0px;
+    width: 0px;
+}
+
+#channel-list::-webkit-scrollbar, #memberlist::-webkit-scrollbar {
+    width: 6px;
 }
 
-#channel-list::-webkit-scrollbar {
-	width: 6px;
+#channel-list::-webkit-scrollbar-thumb, #memberlist::-webkit-scrollbar-thumb {
+    background: none;
+}
+
+#channel-list:hover::-webkit-scrollbar-thumb, #memberlist:hover::-webkit-scrollbar-thumb {
+    background: var(--blurple);
 }
 
 code {
-	background-color: #222222;
-	border: 1px solid transparent;
-	border-radius: 5px;
-	font-family: Consolas, monospace, Arial;
-	padding: 1px;
-	font-size: 16px;
+    background-color: #222222;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    font-family: Consolas, monospace, Arial;
+    padding: 1px;
+    font-size: 16px;
 }
 
 .cb {
-	background-color: #333336;
-	color: gray;
-	border: 1px solid #121212;
-	padding: 5px;
-	/*margin-top: 4px;*/
-	display: block;
+    background-color: #333336;
+    color: gray;
+    border: 1px solid #121212;
+    padding: 5px;
+    /*margin-top: 4px;*/
+    display: block;
 }
 
 .quote {
-	border-left: 3px solid #909090;
-	padding-left: 10px;
-	margin-left: 3px;
-	/*display: inline-block;*/
+    border-left: 3px solid #909090;
+    padding-left: 10px;
+    margin-left: 3px;
+    /*display: inline-block;*/
 }
 
 .mention {
-	background-color: #7289da40;
-	border: 1px solid transparent;
-	display: inline-block;
-	color: #7289DA;
-	border-radius: 3px;
+    background-color: #7289da40;
+    border: 1px solid transparent;
+    display: inline-block;
+    color: #7289DA;
+    border-radius: 3px;
 }
 
 .mention:hover {
-	background-color: #7289daff;
-	color: white;
+    background-color: #7289daff;
+    color: white;
 }
 
 #popups {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	position: fixed;
-	z-index: 1;
-	display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    z-index: 1;
+    display: none;
 }
 
 #popups.darken {
-	background: #000000c0;
+    background: #000000c0;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-	border-radius: 10px;
-	margin-bottom: 5px;
-	margin-top: 5px;
-	margin-right: 5px;
+    border-radius: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    margin-right: 5px;
 }
- 
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
-	background: #7289DA; 
-	border-radius: 10px;
-	/* border: 1px solid var(--background-primary); */
+    background: var(--blurple);
+    border-radius: 10px;
+    /* border: 1px solid var(--background-primary); */
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-	background: #5e77ba; 
+    background: #5e77ba;
 }
 
 ::-webkit-scrollbar-thumb:active {
-	background: #5a73b6;
+    background: #5a73b6;
 }
 
 .popup {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	border-radius: 5px;
-	background-color: var(--background-primary);
-	overflow: hidden;
-	transform: translate(-50%, -50%);
-	border: 1px solid var(--background-tertiary);
-	animation-name: popIn;
-	animation-duration: 0.25s;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    border-radius: 5px;
+    background-color: var(--background-primary);
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--background-tertiary);
+    animation-name: popIn;
+    animation-duration: 0.25s;
 }
 
 @keyframes popIn {
-	from {
-		filter: brightness(0);
-		transform: translate(-50%,-50%) scale(0);
-	}
-	to {
-		filter: brightness(1);
-		transform: translate(-50%,-50%) scale(1);
-	}
+    from {
+        filter: brightness(0);
+        transform: translate(-50%,-50%) scale(0);
+    }
+
+    to {
+        filter: brightness(1);
+        transform: translate(-50%,-50%) scale(1);
+    }
 }
 
 .popup-title {
-	color: var(--text-normal);
-	text-align: center;
-	padding: 20px;
-	font-weight: bold;
-	font-family: Consolas, monospace, Arial;
-	overflow: hidden;
-	background-color: var(--background-secondary);
+    color: var(--text-normal);
+    text-align: center;
+    padding: 20px;
+    font-weight: bold;
+    font-family: Consolas, monospace, Arial;
+    overflow: hidden;
+    background-color: var(--background-secondary);
 }
 
 .popup-content {
-	padding: 15px;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	overflow-wrap: anywhere;
-	background-color: var(--background-primary);
-	margin: 2px;
+    padding: 15px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    overflow-wrap: anywhere;
+    background-color: var(--background-primary);
+    margin: 2px;
 }
 
 .popup-json-field {
-	padding: 10px;
+    padding: 10px;
 }
 
 .popup-json-field-desc {
-	
 }
 
 .popup-json-item {
-	display: block;
+    display: block;
 }
 
 .popup-json-item[type=text] {
-	width: 200px;
+    width: 200px;
 }
 
 .popup-json-item[type=number] {
-	width: 100px;
+    width: 100px;
 }
 
 .popup-json-field text {
-	padding-right: 5px;
+    padding-right: 5px;
 }
 
 .popup-json-field select, .popup-json-field input {
-	outline: none;
+    outline: none;
 }
 
 .popup-json-addbutton {
-	display: block;
-	width: 20px;
-	height: 20px;
-	border-radius: 2px;
-	font-weight: bold;
-	padding: 0px;
-	text-align: center;
-	border-color: transparent;
-	margin-top: 2px;
-	font-size: 16px;
-	outline: none;
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    font-weight: bold;
+    padding: 0px;
+    text-align: center;
+    border-color: transparent;
+    margin-top: 2px;
+    font-size: 16px;
+    outline: none;
 }
 
 .popup-json-addbutton:active {
-	background-color: #b0b0b0;
+    background-color: #b0b0b0;
 }
 
 .popup-json-submit {
-	padding: 10px 15px 10px 15px;
-	min-width: 60px;
-	min-height: 30px;
-	margin: 10px;
-	background: #7289da;
-	border: none;
-	border-radius: 5px;
-	color: white;
-	outline: none;
-	cursor: pointer;
+    padding: 10px 15px 10px 15px;
+    min-width: 60px;
+    min-height: 30px;
+    margin: 10px;
+    background: #7289da;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    outline: none;
+    cursor: pointer;
 }
 
 .popup-json-submit:hover {
-	background: #677bc4;
+    background: #677bc4;
 }
 
 .popup-json-submit:active {
-	background: #5b6eae;
+    background: #5b6eae;
 }
 
 .popup-image {
-	max-width: 512px;
-	max-height: 768px;
+    max-width: 512px;
+    max-height: 768px;
 }
 
 .popup-image-button {
-	border: none;
-	outline: none;
-	background: transparent;
-	color: #808080;
-	padding: 10px;
-	cursor: pointer;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: #808080;
+    padding: 10px;
+    cursor: pointer;
 }
 
 .popup-image-button:hover, .popup-image-button:active {
-	color: #a0a0a0;
-	text-decoration: underline;
+    color: #a0a0a0;
+    text-decoration: underline;
 }
 
 .embed {
-	
 }
 
 .embed-img {
-	max-width: 300px;
-	max-height: 300px;
+    max-width: 300px;
+    max-height: 300px;
 }
 
 .embed-errtxt {
-	color: red;
-	font-family: Consolas, monospace, Arial;
-	font-size: 14px;
+    color: red;
+    font-family: Consolas, monospace, Arial;
+    font-size: 14px;
 }
 
 .attachment {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .badge .bot {
-	background-color: #7289DA;
-	border-radius: 10px;
-	
+    background-color: #7289DA;
+    border-radius: 10px;
+}
+
+#memberlist {
+    overflow: hidden scroll;
+    /* color: red; */
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-height: 100vh;
+    margin-right: 3pt;
+    margin-left: 10px;
+}
+
+.role {
+    padding: 0px 0px 10px 0px
+}
+
+.rolename {
+    margin: 5px;
+    color: #8E908A;
+    text-transform: uppercase;
+    font-size: 14px;
+    display: block;
+}
+
+.rolemember {
+    display: flex;
+    flex-direction: row;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.rolemember:hover {
+    background: var(--message-hover); /* change later */
+}
+
+.member-avatar {
+    width: 35px;
+    height: 35px;
+    border-radius: 50px;
+}
+
+.member-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    padding-left: 10px;
+    justify-content: center;
+}
+
+.member-status {
+    overflow: hidden;
+    font-size: 12px;
+    color: var(--text-muted)
+}
+
+.member-username {
+	overflow: hidden;
+	font-size: 14px;
+}
+
+#member-region.minimized {
+    width: 65px;
+}
+
+#member-region.minimized .member-info, #member-region.minimized .rolename {
+    display: none;
+}
+
+#memberlist-controls {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px;
+}
+
+#memberlist-controls div {
+    height: 20px;
+    width: 20px;
+    margin: 0px 1px 0px 1px;
+}
+
+#memberlist-controls div:hover {
+    background: var(--message-hover); /* change later */
+}
+
+.crown {
+	width: 15px;
+	margin-left: 5px;
+	vertical-align: middle; /* I have never heard of this property before */
+}
+
+.botBadge {
+    background-color: #7289DA;
+    color: white;
+    border-radius: 5px;
+    margin-left: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
diff --git a/styles/themes.css b/styles/themes.css
index 081f8ef..19b1d9e 100644
--- a/styles/themes.css
+++ b/styles/themes.css
@@ -14,6 +14,7 @@
 	--message-hover: #c0c0c0;
 	--textarea-background: #e0e4e8;
 	--other: #ff0000;
+	--blurple: #7289da;
 }
 
 .theme-dark {
@@ -32,4 +33,5 @@
 	--message-hover: #404040;
 	--textarea-background: #40444b;
 	--other: #ff0000;
+	--blurple: #7289da;
 }
\ No newline at end of file
diff --git a/util/div-creator.js b/util/div-creator.js
index d7a286e..2a47929 100644
--- a/util/div-creator.js
+++ b/util/div-creator.js
@@ -24,6 +24,7 @@ function createChannelDiv(channel) {
 		if(channel.type == "text") {
 			div1.innerText = "# " + channel.name;
 			div.addEventListener("click", () => {
+				console.log("EVENT LISTENER");
 				switchChannel(channel.id);
 			});
 		} else if(channel.type == "voice") {
diff --git a/util/util-classes.js b/util/util-classes.js
index 0c48edc..56f4307 100644
--- a/util/util-classes.js
+++ b/util/util-classes.js
@@ -162,6 +162,7 @@ class Guild {
 				this.#cache.current = this.#id;
 				reloadChannelList();
 				loadMessageHistory();
+				reloadMemberList();
 			});
 			this.#e.top.appendChild(this.#e.icon);
 		}
diff --git a/util/util-functions.js b/util/util-functions.js
index 377c437..bf65d95 100644
--- a/util/util-functions.js
+++ b/util/util-functions.js
@@ -116,3 +116,25 @@ function decrypt(salt, encoded) {
 	  .map((charCode) => String.fromCharCode(charCode))
 	  .join("");
 }
+
+
+// from https://dirask.com/posts/JavaScript-how-to-escape-html-special-characters-aDWdQp
+function escapeHTML(html) {
+	var rules = [
+		{ expression: /&/g, replacement: '&amp;'  }, // keep this rule at first position
+		{ expression: /</g, replacement: '&lt;'   },
+		{ expression: />/g, replacement: '&gt;'   },
+		{ expression: /"/g, replacement: '&quot;' },
+		{ expression: /'/g, replacement: '&#039;' }
+	];
+
+	var result = html;
+
+	for (var i = 0; i < rules.length; ++i) {
+		var rule = rules[i];
+
+		result = result.replace(rule.expression, rule.replacement);
+	}
+
+	return result;
+}
\ No newline at end of file