diff --git a/classes/Message.ts b/classes/Message.ts
index de0d12b..a782d6a 100644
--- a/classes/Message.ts
+++ b/classes/Message.ts
@@ -12,8 +12,4 @@ export default class Message {
 		this.userUuid = user_uuid;
 		this.message = message;
 	}
-
-	getTimestamp() {
-		return uuidToTimestamp(this.uuid);
-	}
 }
\ No newline at end of file
diff --git a/components/Guild/ChannelNavbar.vue b/components/Guild/ChannelNavbar.vue
new file mode 100644
index 0000000..c490d73
--- /dev/null
+++ b/components/Guild/ChannelNavbar.vue
@@ -0,0 +1,85 @@
+<template>
+	<div id="navbar" class="navbar-row">
+		<div id="channel-info" class="navbar-row">
+			<!-- h1 to help screen readers -->
+			<h1 id="channel-name">
+				# {{ channel.name }}
+			</h1>
+			<span id="channel-description">
+				{{ channel.description }}
+			</span>
+		</div>
+
+		<div id="buttons" class="navbar-row">
+			<a class="button" href="https://git.gorb.app/gorb/frontend">
+				<Icon name="lucide:code-xml" title="Source"/>
+			</a>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { INavbar } from '~/types/interfaces';
+
+const props = defineProps<INavbar>();
+
+</script>
+
+<style scoped>
+.navbar-row {
+	display: flex;
+	flex-direction: row;
+}
+
+#navbar {
+	--font-size: calc(var(--navbar-height) * 0.45);
+	--side-margins: calc(var(--font-size) * 0.5);
+	
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+	width: 100%;
+
+	background: var(--optional-topbar-background);
+	background-color: var(--topbar-background-color);
+	border-bottom: 1px solid var(--padding-color);
+}
+
+#channel-info {
+	margin-left: var(--side-margins);
+	gap: calc(var(--font-size) * 0.75);
+
+	align-items: center;
+}
+
+#channel-name {
+	font-size: var(--font-size);
+	font-weight: 500;
+}
+
+#channel-description {
+	font-size: calc(var(--font-size) * 0.8);
+	text-overflow: ellipsis;
+
+	/* TODO make new theme colour? unsure of it's name, this is good enough for now */
+	color: var(--reply-text-color);
+}
+
+#buttons {
+	margin-right: var(--side-margins);
+
+	flex-grow: 1;
+	align-items: center;
+	justify-content: end;
+}
+
+.button {
+	color: var(--secondary-text-color);
+	transition: color 300ms;
+
+	right: 0;
+}
+
+.button:hover {
+	color: var(--primary-highlighted-color);
+}
+</style>
\ No newline at end of file
diff --git a/components/Guild/GuildSidebar.vue b/components/Guild/GuildSidebar.vue
new file mode 100644
index 0000000..99487b7
--- /dev/null
+++ b/components/Guild/GuildSidebar.vue
@@ -0,0 +1,92 @@
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="8rem" max-width="30rem"
+			border-sides="right" local-storage-name="middleLeftColumn">
+
+		<div id="guild-sidebar">
+			<div id="guild-top-container">
+				<span id="guild-name" :title="props.guild?.name">{{ props.guild?.name }}</span>
+				<button id="guild-settings-button" @click="toggleGuildSettings">
+					<Icon name="lucide:chevron-down" />
+				</button>
+
+				<GuildOptionsMenu v-if="showGuildSettings" />
+			</div>
+			<div id="channels-list">
+				<ChannelEntry v-for="channel of channels"
+					:name="channel.name"
+					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildResponse, INavbar } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const route = useRoute();
+const { fetchChannels } = useApi();
+
+const showGuildSettings = ref(false);
+
+const channels: ChannelResponse[] = await fetchChannels(props.guild.uuid);
+
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
+
+</script>
+
+<style scoped>
+#guild-top-container {
+	min-height: var(--navbar-height);
+	max-height: var(--navbar-height);
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	position: relative;
+
+	border-bottom: 1px solid var(--padding-color);
+	background-color: var(--topbar-background-color);
+}
+
+#guild-name {
+	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#guild-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
+
+#channels-list {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+
+	display: flex;
+	flex-direction: column;
+	gap: .5em;
+	text-overflow: ellipsis;
+	
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+
+	padding-left: .5em;
+	padding-right: .5em;
+}
+</style>
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index baf0e67..1c7b843 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -32,7 +32,13 @@ function hideModalPopup() {
 
 <style>
 .member-item {
-    position: relative;
+	display: flex;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+	align-items: center;
+	text-align: left;
+	cursor: pointer;
 }
 
 .member-avatar {
@@ -41,4 +47,9 @@ function hideModalPopup() {
 	min-width: 2.3em;
 	max-width: 2.3em;
 }
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>
diff --git a/components/Guild/MemberList.vue b/components/Guild/MemberList.vue
new file mode 100644
index 0000000..323f53e
--- /dev/null
+++ b/components/Guild/MemberList.vue
@@ -0,0 +1,47 @@
+<template>
+	<ResizableSidebar
+			width="14rem" min-width="5.5rem" max-width="30rem"
+			border-sides="left" local-storage-name="membersListWidth">
+		<div id="members-container">
+			<div id="members-list">
+				<MemberEntry v-for="member of members.objects" :member="member" tabindex="0"/>
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import ResizableSidebar from "../UserInterface/ResizableSidebar.vue";
+import MemberEntry from "./MemberEntry.vue";
+import type { GuildResponse } from "~/types/interfaces";
+
+const props = defineProps<{
+    guild: GuildResponse
+}>();
+
+const { fetchMembers } = useApi();
+
+// TODO implement paging
+const members = await fetchMembers(props.guild.uuid)
+
+</script>
+
+<style scoped>
+#members-container {
+	background-color: var(--chat-background-color);
+
+	padding-top: .5em;
+	padding-bottom: .5em;
+	max-height: calc(100% - 1em); /* 100% - top and bottom padding */
+}
+
+#members-list {
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: scroll;
+
+	padding-left: .5em;
+	padding-right: .5em;
+}
+</style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
index c926616..c6207a1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,24 +1,22 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
-			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
 				width="1.5em" height="1.5em"
 				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
 				<defs id="defs1" />
-				<g id="layer1"
-					transform="translate(40,-35)">
-					<g id="g3"
-						transform="translate(-35,-20)">
+				<g id="layer1" transform="translate(40,-35)">
+					<g id="g3" transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="m 120.02168,87.850978 100.76157,2.4e-5"
+						d="m 120,87.5 100,2.5e-5"
 						id="path3-5" />
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="M 69.899501,174.963 120.2803,87.700931"
+						d="M 70,150 120,87.5"
 						id="path3-5-2" />
 					</g>
 				</g>
@@ -29,36 +27,36 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :profile="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.message.member" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ getDisplayName(props.author) }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
+					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 
-					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
-			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -71,33 +69,37 @@ import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
+const { getUser } = useAuth()
 
 const props = defineProps<MessageProps>();
 
+const me = await getUser()
+
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
-const date = new Date(props.timestamp);
+const date = uuidToDate(props.message.uuid);
+
 const currentDate: Date = new Date()
 
 console.log("[MSG] message to render:", props.message);
-console.log("author:", props.author);
+console.log("author:", props.message.member);
 console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
 const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks: string[] = [];
+const mediaLinks = ref<string[]>([]);
 console.log("link matches:", linkMatches);
 
-const hasEmbed = ref(false);
+const hideText = ref(false);
 
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parse(props.text, { gfm: true });
+	const parsed = await parse(props.message.message, { gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, {
 		ALLOWED_TAGS: [
 			"strong", "em", "br", "blockquote",
@@ -121,23 +123,35 @@ onMounted(async () => {
 		console.log("added listeners");
 	}
 
+	const links: string[] = [];
 	for (const link of linkMatches) {
-	console.log("link:", link);
-	try {
-		const res = await $fetch.raw(link);
-		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-			console.log("link is image");
-			mediaLinks.push(link);
+		console.log("link:", link);
+		try {
+			const res = await $fetch.raw(link);
+			if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+				console.log("link is image");
+				links.push(link);
+			}
+		} catch (error) {
+			console.error(error);
 		}
-		if (mediaLinks.length) {
-			hasEmbed.value = true
-		};
-	} catch (error) {
-		console.error(error);
-	}
-}
 
-console.log("media links:", mediaLinks);
+		mediaLinks.value = [...links];
+	}
+
+	if (mediaLinks.value.length) {
+		const nonLinks = props.message.message.split(linkRegex);
+		let invalidContent = false;
+		for (const nonLink of nonLinks) {
+			if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
+				invalidContent = true;
+				break;
+			}
+		}
+		hideText.value = !invalidContent;
+	};
+
+	console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {
@@ -148,13 +162,13 @@ const menuItems: ContextMenuItem[] = [
 	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
-console.log("me:", props.me);
-if (props.author?.user.uuid == props.me.uuid) {
+console.log("me:", me);
+if (props.message.member.user.uuid == me!.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) {
+if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@@ -174,14 +188,20 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style scoped>
 .message {
-	text-align: left;
-	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2rem 1fr;
+	grid-template-columns: 4rem 1fr;
 	align-items: center;
-	column-gap: 1dvw;
-	width: 100%;
+
+	text-align: left;
+	/* -4 dvw due to 2dvw of padding on both sides */
+	width: calc(100% - 4dvw);
 	overflow-wrap: anywhere;
+
+	padding-top: .2rem;
+	padding-bottom: .2rem;
+	padding-left: 2dvw;
+	padding-right: 1dvw;
+	border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
 }
 
 .message-reply-preview {
@@ -197,14 +217,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: 1dvh;
 }
 
-.grouped-message {
-	margin-top: .3em;
-}
-
-#last-message {
-	margin-bottom: 2dvh;
-}
-
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -213,10 +225,9 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-data {
 	/* border: 1px solid white; */
-	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	height: fit-content;
+	height: 100%;
 	width: 100%;
 	grid-row: 2;
 	grid-column: 2;
@@ -228,10 +239,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2em;
-	max-height: 2em;
-	min-width: 2em;
-	max-width: 2em;
+	min-height: 2.5em;
+	max-height: 2.5em;
+	min-width: 2.5em;
+	max-width: 2.5em;
 }
 
 .left-column {
@@ -242,8 +253,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	white-space: nowrap;
 	grid-row: 2;
 	grid-column: 1;
+	height: 100%;
+	align-items: start;
 }
 
+
 .author-username {
 	margin-right: .5dvw;
 	color: white;
@@ -257,9 +271,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .side-message-date {
 	font-size: .625em;
-	display: flex;
-	align-items: center;
-	align-content: center;
+	margin-top: .4em;
 }
 
 /*
@@ -269,11 +281,11 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 */
 
-.mentioned {
+.highlighted {
 	background-color: var(--chat-important-background-color);
 }
 
-.mentioned:hover {
+.highlighted:hover {
 	background-color: var(--chat-important-highlighted-background-color);
 }
 
@@ -298,6 +310,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style>
 
+/* class used in utils/replyToMessage.ts */
 .replying-to {
 	background-color: var(--chat-featured-message-color);
 }
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 26645cd..0cf05e6 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,14 +1,12 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
-				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
-				:format="timeFormat" :type="messagesType[message.uuid]"
-				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
+			<Message v-for="(message, i) of messages" :key="message.uuid"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.member.user.uuid)}`"
-				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
+				:type="messagesType[message.uuid]"
+				:editing="false"
+				:is-mentioned="false" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -47,6 +45,8 @@ import { generateIrcColor } from '#imports';
 const { getDisplayName } = useProfile()
 const { fetchMe } = useApi()
 
+// TODO this file is a mess, and we need to stop using fetchWithApi
+
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const me = await fetchMe() as UserResponse;
@@ -320,17 +320,17 @@ router.beforeEach((to, from, next) => {
 #message-area {
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	overflow: hidden;
 	flex-grow: 1;
+
+	background-color: var(--chat-background-color);
 }
 
 #message-box {
 	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
-	margin-left: 1dvw;
-	margin-right: 1dvw;
+	margin-left: 2dvw;
+	margin-right: 2dvw;
 
 	padding-left: 2%;
 	padding-right: 2%;
@@ -382,8 +382,7 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-bottom: 1em;
 }
 
 .message-box-button {
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index ab62387..624d94b 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+		<NuxtImg v-for="link of props.links"
+			class="media-item"
+			:src="link"
+			@click.prevent="createModal(link)" />
 	</div>
 </template>
 
@@ -8,7 +11,6 @@
 import { ModalBase } from '#components';
 import { render } from 'vue';
 
-
 const props = defineProps<{ links: string[] }>();
 
 function createModal(link: string) {
@@ -34,14 +36,15 @@ function createModal(link: string) {
 <style scoped>
 
 .media-container {
-	grid-column: 2;
-	grid-row: 3;
-	margin-left: .5dvw;
+	display: flex;
+	flex-wrap: wrap;
+	gap: .2rem;
+	max-width: 100%;
 }
 
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
+	border-radius: var(--embed-radius);
 }
-
 </style>
\ No newline at end of file
diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index a5d8ebd..3fd7079 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,18 +1,11 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
-	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="✕" variant="stealth" :callback="onCloseButton" />
-	</span>
-	<div class="modal-content">
-		<h1 class="modal-title">{{ title }}</h1>
-		<slot />
-	</div>
+    <slot />
   </dialog>
 </template>
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
@@ -20,75 +13,46 @@ const dialog = ref<HTMLDialogElement>();
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
-    if (props.onClose) {
-      dialog.value.addEventListener("close", props.onClose);
-    }
-    if (props.onCancel) {
-      dialog.value.addEventListener("cancel", props.onCancel);
-    }
+
+    // close the modal if you click outside of it
+    dialog.value.addEventListener('click', (event) => {
+      if (event.target === dialog.value) {
+        dialog.value.close();
+      }
+    });
+
+    if (props.onClose) dialog.value.addEventListener("close", props.onClose);
+    if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
   }
 });
-
-function onCloseButton () {
-  if (dialog.value) {
-    if (props.onCloseButton) {
-      props.onCloseButton()
-    }
-    
-    dialog.value.remove
-  }
-}
-
 </script>
 
-<style>
+<style scoped>
 .modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1em;
-  opacity: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
 
-  padding: var(--standard-radius); 
-	border-radius: var(--standard-radius);
-	background-color: var(--chat-highlighted-background-color);
-  color: var(--text-color);
+  /* preferably set these to 70dvh and 70dvw in your components, this is a failsafe if you forget */
+  max-height: 90dvh;
+	max-width: 90dvw;
 
-  overflow: hidden;
+  border-radius: var(--standard-radius);
+  border-width: 0;
+  padding: 0;
+
+  /* completely transparent colour, fixes weird border radius stuff */
+  background-color: #b00b1e00; 
 }
 
 .modal-regular::backdrop {
 	background-color: var(--chat-background-color);
-	opacity: 0%;
+	opacity: 10%;
 }
 
 .modal-obscure::backdrop {
 	background-color: var(--chat-background-color);
 	opacity: 80%;
 }
-
-.modal-top-container {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-.modal-title {
-  font-size: 1.5rem;
-  padding: 0;
-}
-
-.modal-content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1em;
-	margin: 1em;
-	width: 100%;
-}
-
 </style>
\ No newline at end of file
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index 3c769cc..c7407c3 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -116,16 +116,16 @@ function buttonEditProfile() {
 	text-align: left;
 
 	position: relative;
-	max-height: 60dvh;
-	max-width: 60dvw;
+	max-height: 70dvh;
+	max-width: 70dvw;
 	height: 30em;
 	width: 40em;
 
 	display: flex;
 	flex-direction: column;
 
-	background-color: var(--chat-background-color);
-	border-radius: var(--standard-radius);
+	color: var(--text-color);
+	background-color: var(--modal-background-color);
 
 	overflow-y: scroll;
 }
@@ -144,7 +144,6 @@ function buttonEditProfile() {
 	z-index: 0;
 
 	background-color: var(--primary-color);
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
 }
 
 #avatar {
@@ -152,12 +151,13 @@ function buttonEditProfile() {
 	position: absolute;
 	left: 2em;
 	top: 2.5em;
-
+	
 	z-index: 1;
-
+	
 	width: 6em;
 	height: 6em;
-
+	
+	background-color: var(--accent-color);
 	border: .15em solid var(--accent-color);
 }
 
@@ -226,14 +226,8 @@ function buttonEditProfile() {
 
 	overflow-y: auto;
 	overflow-x: hidden;
-	scrollbar-width: none;
 }
 
-#about-me-text::-webkit-scrollbar {
-	display: none;
-}
-
-
 #profile-footer {
 	margin-left: 1em;
 	margin-right: 1em;
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 79e95bd..2ea411b 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -135,8 +135,7 @@ function loadStoredWidth() {
 
 .sidebar-content {
 	width: 100%;
-	padding-left: .25em;
-	padding-right: .25em;
+	height: 100%;
 }
 
 .sidebar-content > :first-child {
diff --git a/components/UserInterface/SidebarColumn.vue b/components/UserInterface/SidebarColumn.vue
new file mode 100644
index 0000000..f09cee3
--- /dev/null
+++ b/components/UserInterface/SidebarColumn.vue
@@ -0,0 +1,218 @@
+<template>
+	<div id="sidebar-column">
+		<div class="side-column-segment">
+			<NuxtLink id="home-button" href="/me">
+				<img class="sidebar-icon" src="/public/icon.svg"/>
+			</NuxtLink>
+		</div>
+
+		<VerticalSpacer />
+		<div class="sidebar-column-segment" id="guild-column">
+			<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
+				<NuxtImg v-if="guild.icon"
+					class="sidebar-icon guild-icon"
+					:alt="guild.name"
+					:src="guild.icon" />
+				<DefaultIcon v-else 
+					class="sidebar-icon guild-icon" 
+					:alt="guild.name"
+					:name="guild.name" :seed="guild.uuid"/>
+			</NuxtLink>
+		</div>
+		<VerticalSpacer />
+
+		<div class="sidebar-column-segment">
+			<div ref="createButtonContainer">
+				<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
+					<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
+				</button>
+			</div>
+			<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
+				<Icon name="lucide:settings" alt="Settings menu" />
+			</NuxtLink>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import DefaultIcon from '~/components/DefaultIcon.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+const { getDisplayName } = useProfile()
+const { fetchMyGuilds, joinGuild, createGuild, createChannel } = useApi();
+
+const createButtonContainer = ref<HTMLButtonElement>();
+
+const guilds = await fetchMyGuilds();
+
+// TODO we need to turn this into an actual modal
+const options = [
+	{ name: "Join", value: "join", callback: async () => {
+		console.log("join guild!");
+		const div = document.createElement("div");
+		const guildJoinModal = h(ModalBase, {
+			title: "Join Guild",
+			id: "guild-join-modal",
+			onClose: () => {
+				unrender(div);
+			},
+			onCancel: () => {
+				unrender(div);
+			},
+			style: "height: 20dvh; width: 15dvw"
+		},
+		[
+			h("input", {
+				id: "guild-invite-input",
+				type: "text",
+				placeholder: "oyqICZ",
+			}),
+			h(Button, {
+				text: "Join",
+				variant: "normal",
+				callback: async () => {
+					const input = document.getElementById("guild-invite-input") as HTMLInputElement;
+					const invite = input.value;
+					if (invite.length == 6) {
+						try {
+							const joinedGuild = await joinGuild(invite);
+							guilds.push(joinedGuild);
+							return await navigateTo(`/servers/${joinedGuild.uuid}`);
+						} catch (error) {
+							alert(`Couldn't use invite: ${error}`);
+						}
+					}
+				}
+			})
+		]);
+		document.body.appendChild(div);
+		render(guildJoinModal, div);
+	}
+},
+{ name: "Create", value: "create", callback: async () => {
+	console.log("create guild");
+	const user = await useAuth().getUser();
+	const div = document.createElement("div");
+	const guildCreateModal = h(ModalBase, {
+		title: "Create a Guild",
+		id: "guild-join-modal",
+		onClose: () => {
+			unrender(div);
+		},
+		onCancel: () => {
+			unrender(div);
+		},
+				style: "height: 20dvh; width: 15dvw;"
+			},
+			[
+				h("input", {
+					id: "guild-name-input",
+					type: "text",
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
+					style: "width: 100%"
+				}),
+				h(Button, {
+					text: "Create!",
+					variant: "normal",
+					callback: async () => {
+						const input = document.getElementById("guild-name-input") as HTMLInputElement;
+						const name = input.value;
+						try {
+							const guild = (await createGuild(name)) as GuildResponse;
+							await createChannel(guild.uuid, "general");
+						} catch (error) {
+							alert(`Couldn't create guild: ${error}`);
+						}
+					}
+				})
+			]);
+			document.body.appendChild(div);
+			render(guildCreateModal, div);
+		}
+	}
+];
+
+function createDropdown() {
+	const dropdown = h(GuildDropdown, { options });
+	const div = document.createElement("div");
+	div.classList.add("dropdown", "destroy-on-click");
+	if (createButtonContainer.value) {
+		createButtonContainer.value.appendChild(div);
+	} else {
+		document.body.appendChild(div);
+	}
+	render(dropdown, div);
+	div.addEventListener("keyup", (e) => {
+		if (e.key == "Escape") {
+			unrender(div);
+		}
+	});
+	div.focus();
+}
+</script>
+
+<style scoped>
+#sidebar-column {
+	display: flex;
+	flex-direction: column;
+
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
+	padding-top: .5em;
+	
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
+	text-align: center;
+}
+
+#guild-column {
+	overflow-y: scroll;
+	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
+}
+#guild-icon-container {
+	text-decoration: none;
+}
+
+.sidebar-column-segment {
+	display: flex;
+	flex-direction: column;
+
+	scrollbar-width: none;
+}
+.guild-column-segment::-webkit-scrollbar {
+	display: none;
+}
+
+#home-button {
+	height: var(--sidebar-icon-width);
+}
+
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
+}
+.sidebar-icon {
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
+}
+
+.sidebar-bottom-buttons {
+	color: var(--primary-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2.4rem;
+	padding: 0;
+	display: inline-block;
+}
+.sidebar-bottom-buttons:hover {
+	color: var(--primary-highlighted-color);
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
index 800a097..eb1c524 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,59 +1,17 @@
 <template>
 	<Loading v-show="loading" />
+
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
-		<div id="homebar">
-			<div class="homebar-item">
-				<marquee>
-					gorb!!!!!
-				</marquee>
-			</div>
-		</div>
-		<div id="page-content">
-			<div id="left-column">
-				<div class="left-column-segment">
-					<NuxtLink id="home-button" href="/me">
-						<img class="sidebar-icon" src="/public/icon.svg"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
-						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon guild-icon"
-							:alt="guild.name"
-							:src="guild.icon" />
-						<DefaultIcon v-else 
-							class="sidebar-icon guild-icon" 
-							:alt="guild.name"
-							:name="guild.name" :seed="guild.uuid"/>
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment">
-					<div ref="createButtonContainer">
-						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
-							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
-						</button>
-					</div>
-					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
-						<Icon name="lucide:settings" alt="Settings menu" />
-					</NuxtLink>
-				</div>
-			</div>
+		<div class="flex-container-row">
+			<SidebarColumn />
 			<slot />
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-import DefaultIcon from '~/components/DefaultIcon.vue';
-import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Loading from '~/components/Popups/Loading.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import type { GuildResponse } from '~/types/interfaces';
+import SidebarColumn from '~/components/UserInterface/SidebarColumn.vue';
 
 definePageMeta({
 	keepalive: true
@@ -61,117 +19,6 @@ definePageMeta({
 
 const loading = useState("loading", () => false);
 
-const createButtonContainer = ref<HTMLButtonElement>();
-
-const { getDisplayName } = useProfile()
-const api = useApi();
-
-const options = [
-	{ name: "Join", value: "join", callback: async () => {
-			console.log("join guild!");
-			const div = document.createElement("div");
-			const guildJoinModal = h(ModalBase, {
-				title: "Join Guild",
-				id: "guild-join-modal",
-				onClose: () => {
-					unrender(div);
-				},
-				onCancel: () => {
-					unrender(div);
-				},
-				style: "height: 20dvh; width: 15dvw"
-			},
-			[
-				h("input", {
-					id: "guild-invite-input",
-					type: "text",
-					placeholder: "oyqICZ",
-				}),
-				h(Button, {
-					text: "Join",
-					variant: "normal",
-					callback: async () => {
-						const input = document.getElementById("guild-invite-input") as HTMLInputElement;
-						const invite = input.value;
-						if (invite.length == 6) {
-							try {
-								const joinedGuild = await api.joinGuild(invite);
-								guilds.push(joinedGuild);
-								return await navigateTo(`/servers/${joinedGuild.uuid}`);
-							} catch (error) {
-								alert(`Couldn't use invite: ${error}`);
-							}
-						}
-					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildJoinModal, div);
-		}
-	},
-	{ name: "Create", value: "create", callback: async () => {
-			console.log("create guild");
-			const user = await useAuth().getUser();
-			const div = document.createElement("div");
-			const guildCreateModal = h(ModalBase, {
-				title: "Create a Guild",
-				id: "guild-join-modal",
-				onClose: () => {
-					unrender(div);
-				},
-				onCancel: () => {
-					unrender(div);
-				},
-				style: "height: 20dvh; width: 15dvw;"
-			},
-			[
-				h("input", {
-					id: "guild-name-input",
-					type: "text",
-					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
-					style: "width: 100%"
-				}),
-				h(Button, {
-					text: "Create!",
-					variant: "normal",
-					callback: async () => {
-						const input = document.getElementById("guild-name-input") as HTMLInputElement;
-						const name = input.value;
-						try {
-							const guild = (await api.createGuild(name)) as GuildResponse;
-							await api.createChannel(guild.uuid, "general");
-						} catch (error) {
-							alert(`Couldn't create guild: ${error}`);
-						}
-					}
-				})
-			]);
-			document.body.appendChild(div);
-			render(guildCreateModal, div);
-		}
-	}
-];
-
-const guilds = await api.fetchMyGuilds();
-
-function createDropdown() {
-	const dropdown = h(GuildDropdown, { options });
-	const div = document.createElement("div");
-	div.classList.add("dropdown", "destroy-on-click");
-	if (createButtonContainer.value) {
-		createButtonContainer.value.appendChild(div);
-	} else {
-		document.body.appendChild(div);
-	}
-	render(dropdown, div);
-	div.addEventListener("keyup", (e) => {
-		if (e.key == "Escape") {
-			unrender(div);
-		}
-	});
-	div.focus();
-}
-
 </script>
 
 <style>
@@ -179,8 +26,6 @@ function createDropdown() {
 	height: 100dvh;
 	width: 100dvw;
 	display: flex;
-	flex-direction: column;
-	text-align: center;
 }
 
 .hidden {
@@ -192,89 +37,20 @@ function createDropdown() {
 	transition: opacity 500ms;
 }
 
-#homebar {
-	min-height: 4dvh;
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-	background: var(--optional-topbar-background);
-	background-color: var(--topbar-background-color);
-	border-bottom: 1px solid var(--padding-color);
-	padding-left: 5dvw;
-	padding-right: 5dvw;
-}
 
-.homebar-item {
-	width: 100dvw;
-}
-
-#page-content {
+.flex-container-row,
+.flex-container-column {
 	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
     overflow: auto;
-}
-
-#left-column {
-	display: flex;
-	flex-direction: column;
-
-	padding-left: var(--sidebar-margin);
-	padding-right: var(--sidebar-margin);
-	padding-top: .5em;
-	
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-
-	border-right: 1px solid var(--padding-color);
-}
-
-.left-column-segment {
-	display: flex;
-	flex-direction: column;
-
-	scrollbar-width: none;
-}
-
-.left-column-segment::-webkit-scrollbar {
-	display: none;
-}
-
-#left-column-middle {
-	overflow-y: scroll;
 	flex-grow: 1;
-	gap: var(--sidebar-icon-gap);
 }
 
-#home-button {
-	height: var(--sidebar-icon-width);
+.flex-container-row {
+	flex-direction: row;
 }
 
-#guild-icon-container {
-	text-decoration: none;
-}
-
-.guild-icon {
-	border-radius: var(--guild-icon-radius);
-}
-
-.sidebar-icon {
-	width: var(--sidebar-icon-width);
-	height: var(--sidebar-icon-width);
-}
-
-.sidebar-bottom-buttons {
-	color: var(--primary-color);
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 2.4rem;
-	padding: 0;
-	display: inline-block;
-}
-
-.sidebar-bottom-buttons:hover {
-	color: var(--primary-highlighted-color);
+.flex-container-column {
+	flex-direction: column;
 }
 
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index cb5f57e..30e0793 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,4 @@
-<template>
-  <NuxtLayout>
-
-  </NuxtLayout>
-</template>
-
 <script lang="ts" setup>
 await navigateTo("/me/", { replace: true })
 
-definePageMeta({
-	layout: "client"
-});
-
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
index 209ffab..cf3eb4f 100644
--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@@ -8,6 +8,7 @@
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+
 </script>
 
 <style>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f07dabd..e82a317 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,163 +1,43 @@
 <template>
 	<NuxtLayout name="client">
-		<ResizableSidebar
-				width="14rem" min-width="8rem" max-width="30rem"
-				border-sides="right" local-storage-name="middleLeftColumn">
-			<div id="middle-left-column" class="main-grid-row">
-				<div id="server-name-container">
-					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
-					<button id="server-settings-button" @click="toggleGuildSettings">
-						<Icon id="server-settings-icon" name="lucide:chevron-down" />
-					</button>
-					<GuildOptionsMenu v-if="showGuildSettings" />
-				</div>
-				<div id="channels-list">
-					<ChannelEntry v-for="channel of channels" :name="channel.name"
-						:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-						:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
-				</div>
+		<GuildSidebar v-if="guild" :guild="guild" />
+		<div class="flex-container-column">
+			<GuildChannelNavbar id="navbar" 
+				v-if="guild && channel"
+				:guild="guild"
+				:channel="channel"/>
+
+			<div class="flex-container-row">
+				<MessageArea :channel-url="channelUrlPath" />
+				<GuildMemberList v-if="guild" :guild="guild" />
 			</div>
-		</ResizableSidebar>
-		<MessageArea :channel-url="channelUrlPath" />
-		<ResizableSidebar
-				width="14rem" min-width="5.5rem" max-width="30rem"
-				border-sides="left" local-storage-name="membersListWidth">
-			<div id="members-container">
-				<div id="members-list">
-					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-				</div>
-			</div>
-		</ResizableSidebar>
+		</div>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
-import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
 
 const route = useRoute();
+const { fetchGuild, fetchChannel } = useApi()
 
-const loading = useState("loading");
+const channelId = route.params.channelId as string
+const guildId = route.params.serverId as string
 
-const channelUrlPath = `channels/${route.params.channelId}`;
+const channelUrlPath = `channels/${channelId}`;
 
-const server = ref<GuildResponse | undefined>();
-const channels = ref<ChannelResponse[] | undefined>();
-const channel = ref<ChannelResponse | undefined>();
+const guild = await fetchGuild(guildId)
+const channel = await fetchChannel(channelId)
 
-const members = ref<GuildMemberResponse[]>();
+// function toggleInvitePopup(e: Event) {
+// 	e.preventDefault();
+// 	showInvitePopup.value = !showInvitePopup.value;
+// }
 
-const showInvitePopup = ref(false);
-const showGuildSettings = ref(false);
+// function handleMemberClick(member: GuildMemberResponse) {
+// }
 
-//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("channelid: servers:", servers);
-
-const { fetchMembers } = useApi();
-
-onMounted(async () => {
-	console.log("mounting");
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	await setArrayVariables();
-	console.log("set array variables");
-});
-
-onActivated(async () => {
-	console.log("activating");
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
-	console.log("fetched guild");
-	await setArrayVariables();
-	console.log("set array variables");
-});
-
-async function setArrayVariables() {
-	const membersRes = await fetchMembers(route.params.serverId as string);
-	members.value = membersRes.objects;
-	const guildUrl = `guilds/${route.params.serverId}`;
-	channels.value = await fetchWithApi(`${guildUrl}/channels`);
-	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
-	console.log("channel:", channel.value);
-}
-
-function toggleGuildSettings(e: Event) {
-	e.preventDefault();
-	showGuildSettings.value = !showGuildSettings.value;
-}
-
-function toggleInvitePopup(e: Event) {
-	e.preventDefault();
-	showInvitePopup.value = !showInvitePopup.value;
-}
-
-function handleMemberClick(member: GuildMemberResponse) {
-}
 </script>
 
-<style>
-#members-container {
-	background: var(--optional-member-list-background);
-}
+<style scoped>
 
-#members-list {
-	display: flex;
-	flex-direction: column;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	padding-left: 1.25em;
-	padding-right: 1.25em;
-	padding-top: 0.75em;
-	padding-bottom: 0.75em;
-	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
-}
-
-.member-item {
-	display: flex;
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-	align-items: center;
-	text-align: left;
-	cursor: pointer;
-}
-
-#channels-list {
-	display: flex;
-	flex-direction: column;
-	gap: .5em;
-	text-overflow: ellipsis;
-}
-
-.member-display-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-name-container {
-	padding-top: 3dvh;
-	padding-bottom: 3dvh;
-	display: flex;
-	justify-content: center;
-	position: relative;
-}
-
-#server-name {
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#server-settings-button {
-	background-color: transparent;
-	font-size: 1em;
-	color: white;
-	border: none;
-	padding: 0%;
-}
 </style>
\ No newline at end of file
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 7b8e88b..7fb5049 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -8,8 +8,14 @@ complementaryColor = white
 	--sidebar-icon-width: 2.5em;
 	--sidebar-icon-gap: .25em;
 	--sidebar-margin: .5em;
+
+	--navbar-height: 5dvh;
+	--navbar-icon-size: 3dvh;
+	--navbar-gap: calc(3dvh * .2);
 	
+	--minor-radius: .35em;
 	--standard-radius: .5em;
+	--embed-radius: .3em;
 	--button-radius: .6em;
 	--guild-icon-radius: 15%;
 	--pfp-radius: 50%;
diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css
index 495fa15..1437777 100644
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@@ -10,15 +10,16 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #2f2e2d;
-    --chat-highlighted-background-color: #3f3b38;
+	--chat-background-color: #383432;
+    --chat-highlighted-background-color: #4c4a48;
 	--chat-important-background-color: #ffcf5f38;
 	--chat-important-highlighted-background-color: #ffa86f4f;
 	--chat-featured-message-color: #4f3f2f60;
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
+	--modal-background-color: #3a352f;
 
-	--sidebar-background-color: #3e3a37;
+	--sidebar-background-color: #322f2d;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;
diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css
index d23ed76..53c0659 100644
--- a/public/themes/style/dark.css
+++ b/public/themes/style/dark.css
@@ -10,17 +10,18 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #1f1e1d;
-    --chat-highlighted-background-color: #2f2b28;
+	--chat-background-color: #282624;
+    --chat-highlighted-background-color: #383430;
 	--chat-important-background-color: #ffc44f2f;
 	--chat-important-highlighted-background-color: #ffa45f4a;
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #28241f;
 
-	--sidebar-background-color: #2e2a27;
-	--sidebar-highlighted-background-color: #36322b;
-	--topbar-background-color: #2a2723;
+	--sidebar-background-color: #1f1e1d;
+	--sidebar-highlighted-background-color: #2f2b28;
+	--topbar-background-color: #1f1e1e;
 	--chatbox-background-color: #1a1713;
 
     --padding-color: #484848;
diff --git a/public/themes/style/description.css b/public/themes/style/description.css
index 972821c..45829e0 100644
--- a/public/themes/style/description.css
+++ b/public/themes/style/description.css
@@ -18,6 +18,7 @@ complementaryColor = black
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #181f1f;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
diff --git a/public/themes/style/light.css b/public/themes/style/light.css
index 78bf2f9..8d7a0c8 100644
--- a/public/themes/style/light.css
+++ b/public/themes/style/light.css
@@ -10,13 +10,14 @@ complementaryColor = black
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-    --chat-background-color: #f0ebe8;
-    --chat-highlighted-background-color: #e8e4e0;
+    --chat-background-color: #f0edeb;
+    --chat-highlighted-background-color: #aba8a4;
     --chat-important-background-color: #df5f0b26;
     --chat-important-hightlighted-background-color: #df5f0b3d;
     --chat-featured-message-color: #e8ac841f;
-    --popup-background-color: #e8e4e0;
-    --popup-highlighted-background-color: #dfdbd6;
+    --popup-background-color: #b8b4b0;
+    --popup-highlighted-background-color: #a6a4a2;
+	--modal-background-color: #e8e4e0;
 
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
diff --git a/public/themes/style/rainbow-capitalism.css b/public/themes/style/rainbow-capitalism.css
index 8ca3ed7..df01d39 100644
--- a/public/themes/style/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f8f4f80;
 	--popup-background-color: #80808080;
 	--popup-highlighted-background-color: #9f9f9f9f;
+	--modal-background-color: #7fa87fff;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index d175d76..bb6489b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -121,3 +121,22 @@ export interface ContextMenuInterface {
 	pointerY: number,
 	items: ContextMenuItem[]
 }
+
+export interface NavbarItem {
+	title: string,
+	icon: string,
+	hasPing?: boolean, // whether to draw a "ping" icon or not
+	callback: (...args: any[]) => any;
+}
+
+export interface INavbar {
+	guild: GuildResponse
+	channel: ChannelResponse
+}
+
+export interface NavbarOptions {
+	guild?: GuildResponse
+	channel?: ChannelResponse
+	isDirectMessages?: boolean
+}
+
diff --git a/types/props.ts b/types/props.ts
index f25ae8d..5796d83 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -1,21 +1,9 @@
-import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
+import type { MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
-	class?: string,
-	img?: string | null,
-	author: GuildMemberResponse
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	authorColor: string,
-	last: boolean,
-	messageId: string,
-	replyingTo?: boolean,
-	editing?: boolean,
-	me: UserResponse
 	message: MessageResponse,
-	replyMessage?: MessageResponse
+	replyMessage?: MessageResponse,
+	type: "normal" | "grouped",
+	editing?: boolean,
 	isMentioned?: boolean,
 }
\ No newline at end of file
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 83f4eda..1ff4df7 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -9,7 +9,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);