diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index 6001a00..e62bd74 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -8,7 +8,6 @@ steps:
       - pnpm build
     when:
     - event: push
-    - event: pull_request
 
   - name: container-build-and-publish
     image: docker
diff --git a/app.vue b/app.vue
index 6f6eae0..8f0571f 100644
--- a/app.vue
+++ b/app.vue
@@ -1,25 +1,33 @@
 <template>
-  <div>
-    <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
-  </div>
+  	<div>
+		<Banner v-if="banner" />
+		<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-items="contextMenu.items" />
+    	<NuxtPage :keepalive="true" />
+  	</div>
 </template>
 
 <script lang="ts" setup>
+import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
+import type { ContextMenuInterface } from './types/interfaces';
+
 const banner = useState("banner", () => false);
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
+
 onMounted(() => {
+	loadPreferredThemes()
+
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
 		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
-		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
+		if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		removeContextMenu();
+		removeContextMenu(contextMenu);
 		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
 			e.target.contentEditable = "false";
 		}
@@ -36,6 +44,10 @@ onMounted(() => {
 		if (e.key == "Escape" && messageReply) {
 			e.preventDefault();
 			messageReply.remove();
+			const replyToMessage = document.querySelector(`.message[data-message-id='${messageReply.dataset.messageId}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 	});
 });
@@ -48,19 +60,13 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingsLoad().selectedThemeId ?? "dark"
-const baseURL = useRuntimeConfig().app.baseURL;
-
-useHead({
-  link: [{
-		rel: "stylesheet",
-		href: `${baseURL}themes/${currentTheme}.css`
-	}]
-})
 </script>
 
 <style>
-html,
+html {
+	background-color: #1f1e1d;
+}
+
 body {
   font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
diff --git a/components/Avatar.vue b/components/Avatar.vue
index ddfe1dc..06d36ad 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -3,8 +3,10 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
+	<DefaultIcon v-else
+		class="display-avatar"
+		:name="displayName"
+		:seed="user.uuid"
 		:alt="displayName" />
 </template>
 
@@ -12,27 +14,24 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
-	user?: UserResponse,
-	member?: GuildMemberResponse,
+	profile: UserResponse | GuildMemberResponse,
 }>();
 
-
-let displayName: string
+const displayName = getDisplayName(props.profile)
+let user: UserResponse
 let displayAvatar: string | null
 
-const user = props.user || props.member?.user
-
-if (user) {
-	displayName = getDisplayName(user, props.member)
-	
-	if (user.avatar) {
-		displayAvatar = user.avatar
-	} else if (!isCanvasBlocked()){
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
-	} else {
-		displayAvatar = null
-	}
+if ("username" in props.profile) {
+	// assume it's a UserResponse
+	displayAvatar = props.profile.avatar
+	user = props.profile
+} else {
+	// assume it's a GuildMemberResponse
+	displayAvatar = props.profile.user.avatar
+	user = props.profile.user
 }
 
 </script>
diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue
new file mode 100644
index 0000000..6fc6891
--- /dev/null
+++ b/components/DefaultIcon.vue
@@ -0,0 +1,55 @@
+<template>
+  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
+	class="default-icon">
+		<div class="default-icon-text-container">
+			<span class="default-icon-text">
+				{{ previewName }}
+			</span>
+		</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	seed: string,
+	name: string	
+}>();
+
+let previewName = "";
+if (props.name.length > 3) {
+	let guildName: string[] = props.name.split(' ')
+	for (let i = 0; i < 3; i ++) {
+		if (guildName.length > i) {
+			previewName += guildName[i].charAt(0)
+		} else {
+			break
+		}
+	}
+} else {
+	previewName = props.name
+}
+
+</script>
+
+<style scoped>
+.default-icon, .default-icon-text-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.default-icon-text-container {
+	height: 100%;
+	width: 100%;
+}
+
+.default-icon-text {
+	/* helps centre the icon, yes, this is NOT perfect */
+	margin-top: -0.15em;
+
+	font-weight: bold;
+
+	color: var(--secondary-text-color)
+}
+</style>
diff --git a/components/Guild/ChannelEntry.vue b/components/Guild/ChannelEntry.vue
index 98f210e..9d785db 100644
--- a/components/Guild/ChannelEntry.vue
+++ b/components/Guild/ChannelEntry.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
@@ -25,6 +25,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 	color: inherit;
 	padding-left: .25em;
 	padding-right: .25em;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .channel-list-link-container {
diff --git a/components/Guild/GuildDropdown.vue b/components/Guild/GuildDropdown.vue
index 89be6d6..b08bfd9 100644
--- a/components/Guild/GuildDropdown.vue
+++ b/components/Guild/GuildDropdown.vue
@@ -27,7 +27,7 @@ const props = defineProps<{ options: DropdownOption[] }>();
 }
 
 .dropdown-option {
-  border: .09rem solid rgb(70, 70, 70);
+  border: .09rem solid var(--padding-color);
 }
 
 .dropdown-button {
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 12e36a0..baf0e67 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,33 +1,44 @@
 <template>
-    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <Avatar :member="props.member" class="member-avatar"/>
-        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+    <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
+        <Avatar :profile="props.member" class="member-avatar"/>
+        <span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
+            {{ getDisplayName(props.member) }}
+        </span>
     </div>
+    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
+        :onFinish="hideModalPopup" :keepalive="false"/>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ModalProfilePopup } from '#components';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const isPopupVisible = ref(false);
+const modalPopupVisible = ref<boolean>(false);
 
-const togglePopup = () => {
-    isPopupVisible.value = false;
-    // isPopupVisible.value = !isPopupVisible.value;
-};
+function showModalPopup() {
+    modalPopupVisible.value = true
+}
 
-const hidePopup = () => {
-    isPopupVisible.value = false;
-};
+function hideModalPopup() {
+    modalPopupVisible.value = false
+}
 </script>
 
 <style>
 .member-item {
-    position: relative; /* Set the position to relative for absolute positioning of the popup */
+    position: relative;
+}
+
+.member-avatar {
+    min-height: 2.3em;
+	max-height: 2.3em;
+	min-width: 2.3em;
+	max-width: 2.3em;
 }
 </style>
diff --git a/components/Me/AddFriend.vue b/components/Me/AddFriend.vue
index 6d2d888..43249fb 100644
--- a/components/Me/AddFriend.vue
+++ b/components/Me/AddFriend.vue
@@ -23,9 +23,11 @@ async function sendRequest() {
 		try {
 			await addFriend(inputField.value.value)
 			alert("Friend request sent!")
-		} catch {
-			alert("Request failed :(")
-		} 
+		} catch (error: any) {
+			if (error?.response?.status !== 200) {
+				alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
+			}
+		}
 	}
 }
 </script>
diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index 4b5df7a..b06890b 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -1,27 +1,30 @@
 <template>
-	<div id="middle-left-column">
-		<div id="friend-sidebar">
-			<div>
-				<h3>Direct Messages</h3>
-			</div>
-			<VerticalSpacer />
-
-			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
-				<Icon class="user-avatar" name="lucide:user" />
-				<span class="user-display-name">Friends</span>
-			</NuxtLink>
-			<VerticalSpacer />
-			
-			<div id="direct-message-list">
-				<UserEntry v-for="user of friends" :user="user"
-						:href="`/me/${user.uuid}`"/> 
+	<ResizableSidebar width="14rem" min-width="8rem" max-width="30rem" border-sides="right" local-storage-name="middleLeftColumn">
+		<div id="middle-left-column">
+			<div id="friend-sidebar">
+				<div>
+					<h3>Direct Messages</h3>
+				</div>
+				<VerticalSpacer />
+	
+				<NuxtLink class="user-item" :href="`/me`" tabindex="0">
+					<Icon class="user-avatar" name="lucide:user" />
+					<span class="user-display-name">Friends</span>
+				</NuxtLink>
+				<VerticalSpacer />
+				
+				<div id="direct-message-list">
+					<UserEntry v-for="user of friends" :user="user"
+							:href="`/me/${user.uuid}`"/> 
+				</div>
 			</div>
 		</div>
-	</div>
+	</ResizableSidebar>
 </template>
 
 <script lang="ts" setup>
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import ResizableSidebar from '../UserInterface/ResizableSidebar.vue';
 
 const { fetchFriends } = useApi();
 
diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
index 654957d..25b9924 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script lang="ts" setup>
+
+const { getDisplayName } = useProfile()
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends().then((response) => {
-	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
-})
+const friends = sortUsers(await fetchFriends())
 
 const props = defineProps<{
     variant: string
diff --git a/components/Message.vue b/components/Message.vue
index ed32c50..c926616 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+	<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.replyMessage" class="message-reply-svg">
 			<svg
@@ -25,11 +25,11 @@
 			</svg>
 		</div>
 		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
-			:author="getDisplayName(props.replyMessage.user)"
+			:author="getDisplayName(props.replyMessage.member)"
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :user="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
@@ -47,7 +47,7 @@
 		</div>
 		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<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 class="left-column">
@@ -68,9 +68,14 @@ import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+
+const { getDisplayName } = useProfile()
 
 const props = defineProps<MessageProps>();
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
+
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
@@ -126,9 +131,6 @@ onMounted(async () => {
 		}
 		if (mediaLinks.length) {
 			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
 		};
 	} catch (error) {
 		console.error(error);
@@ -142,13 +144,19 @@ console.log("media links:", mediaLinks);
 //	showHover.value = !showHover.value;
 //}
 
-const menuItems = [
-	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+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?.uuid == props.me.uuid) {
-	menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
+if (props.author?.user.uuid == props.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*/) {
+	// Inserts "edit" option at index 2 (below the "edit" option)
+	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
 
 function getDayDifference(date1: Date, date2: Date) {
@@ -220,7 +228,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	width: 100%;
+	min-height: 2em;
+	max-height: 2em;
+	min-width: 2em;
+	max-width: 2em;
 }
 
 .left-column {
@@ -259,11 +270,11 @@ function getDayDifference(date1: Date, date2: Date) {
 */
 
 .mentioned {
-	background-color: rgba(0, 255, 166, 0.123);
+	background-color: var(--chat-important-background-color);
 }
 
 .mentioned:hover {
-	background-color: rgba(90, 255, 200, 0.233);
+	background-color: var(--chat-important-highlighted-background-color);
 }
 
 .message-reply-svg {
@@ -284,3 +295,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-left: 1em;
 }
 </style>
+
+<style>
+
+.replying-to {
+	background-color: var(--chat-featured-message-color);
+}
+
+</style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 17b4a3e..26645cd 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,13 +1,13 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
-				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
+			<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.user" :me="me"
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.user.uuid)}`"
+				:author-color="`${generateIrcColor(message.member.user.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@@ -44,9 +44,12 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
 
+const { getDisplayName } = useProfile()
+const { fetchMe } = useApi()
+
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
-const me = await fetchWithApi("/me") as UserResponse;
+const me = await fetchMe() as UserResponse;
 
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
@@ -64,33 +67,33 @@ const previousMessage = ref<MessageResponse>();
 function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
 	messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
 	console.log("message:", message.message);
-	console.log("author:", message.user.username, `(${message.user.uuid})`);
+	console.log("author:", message.member.user.username, `(${message.member.uuid})`);
 
-	if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
+	if (!previousMessage.value || previousMessage.value && message.member.uuid != previousMessage.value.member.uuid) {
 		console.log("no previous message or author is different than last messsage's");
 		messagesType.value[message.uuid] = "normal";
 		previousMessage.value = message;
 		console.log("set previous message to:", previousMessage.value.message);
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.member.uuid] = message;
 		return;
 	}
 
 
-	const firstByUser = firstMessageByUsers.value[message.user.uuid];
+	const firstByUser = firstMessageByUsers.value[message.member.uuid];
 	if (firstByUser) {
 		console.log("first by user exists:", firstByUser);
-		if (message.user.uuid != firstByUser.user.uuid) {
+		if (message.member.uuid != firstByUser.member.uuid) {
 			console.log("message is by new user, setting their first message")
-			firstMessageByUsers.value[message.user.uuid] = message;
+			firstMessageByUsers.value[message.member.uuid] = message;
 			console.log("RETURNING FALSE");
 			messagesType.value[message.uuid] = "normal";
 			return;
 		}
 	} else {
 		console.log("first by user doesn't exist");
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.member.uuid] = message;
 		console.log("RETURNING FALSE");
 		messagesType.value[message.uuid] = "normal";
 		return;
@@ -108,8 +111,8 @@ function groupMessage(message: MessageResponse, options?: { prevMessage?: Messag
 	console.log("group?", lessThanMax);
 	if (!lessThanMax) {
 		console.log("diff exceeds max");
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
+		firstMessageByUsers.value[message.member.uuid] = message;
 		messagesType.value[message.uuid] = "normal";
 		return;
 	}
@@ -221,6 +224,10 @@ function sendMessage(e: Event) {
 		if (messageReply && messageReply.dataset.messageId) {
 			console.log("[MSG] message is a reply");
 			message.reply_to = messageReply.dataset.messageId;
+			const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 
 		console.log("[MSG] sent message:", message);
@@ -237,12 +244,8 @@ function sendMessage(e: Event) {
 }
 
 function getReplyMessage(id: string) {
-	console.log("[REPLYMSG] id:", id);
 	const messagesValues = Object.values(messages.value);
-	console.log("[REPLYMSG] messages values:", messagesValues);
 	for (const message of messagesValues) {
-		console.log("[REPLYMSG] message:", message);
-		console.log("[REPLYMSG] IDs match?", message.uuid == id);
 		if (message.uuid == id) return message;
 	}
 }
@@ -266,21 +269,14 @@ onMounted(async () => {
 					if (fetched) return;
 					fetched = true;
 					console.log("scroll height is at 10% or less");
-					//console.log("current oldest:", currentOldestMessage);
 					const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
-					if (olderMessages) {
+					if (olderMessages?.length) {
 						olderMessages.reverse();
-						console.log("older messages:", olderMessages);
-						if (olderMessages.length == 0) return;
-						olderMessages.reverse();
-						for (const [i, oldMessage] of olderMessages.entries()) {
-							console.log("old message:", oldMessage);
-							messages.value.unshift(oldMessage);
-							for (const message of messages.value) {
-								groupMessage(message);
-							}
+						messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
+						for (const message of messages.value) {
+							groupMessage(message);
 						}
-						offset += offset;
+						offset += amount;
 					}
 				} else {
 					fetched = false;
diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index 1f57901..a5d8ebd 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,7 +1,7 @@
 <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="X" variant="neutral" :callback="() => dialog?.remove()" />
+		<Button text="✕" variant="stealth" :callback="onCloseButton" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -17,8 +17,6 @@ import Button from '~/components/UserInterface/Button.vue';
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
-console.log("props:", props);
-
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
@@ -31,6 +29,15 @@ onMounted(() => {
   }
 });
 
+function onCloseButton () {
+  if (dialog.value) {
+    if (props.onCloseButton) {
+      props.onCloseButton()
+    }
+    
+    dialog.value.remove
+  }
+}
 
 </script>
 
@@ -42,9 +49,12 @@ onMounted(() => {
   flex-direction: column;
   gap: 1em;
   opacity: 100%;
-  padding: 1%;
-  background-color: var(--sidebar-highlighted-background-color);
+
+  padding: var(--standard-radius); 
+	border-radius: var(--standard-radius);
+	background-color: var(--chat-highlighted-background-color);
   color: var(--text-color);
+
   overflow: hidden;
 }
 
diff --git a/components/Modal/Invite.vue b/components/Modal/Invite.vue
index 232114c..de842a2 100644
--- a/components/Modal/Invite.vue
+++ b/components/Modal/Invite.vue
@@ -40,7 +40,8 @@ function copyInvite(type: "link" | "code") {
   if (!invite.value) return;
 
   if (type == "link") {
-    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
+	const runtimeConfig = useRuntimeConfig();
+    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}${runtimeConfig.app.baseURL}`);
     if (inviteUrl) {
       navigator.clipboard.writeText(inviteUrl.href);
     }
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
new file mode 100644
index 0000000..b99a9ea
--- /dev/null
+++ b/components/Modal/ProfilePopup.vue
@@ -0,0 +1,256 @@
+<template>
+	<ModalBase :obscure="true" :onClose="props.onFinish" :onCloseButton="props.onFinish">
+		<div id="profile-container">
+			<div id="profile-header">
+				<div id="header-mask"></div>
+				<Avatar :profile="props.profile" id="avatar"/>
+			</div>
+
+			<div id="profile-sub-header">
+				<div id="display-name">{{ displayName }}</div>
+				<div id="username-and-pronouns">
+					{{ username }}
+					<span v-if="pronouns">
+						•
+						{{ pronouns }}
+					</span>
+				</div>
+				<!-- <div id="status">Status goes here lorem ipsum or something</div> -->
+
+				<div v-if="me.uuid != uuid" id="action-buttons-container">
+					<Button text="Message" variant="normal" :callback="buttonSendMessage"></Button>
+					<Button text="Friend" variant="neutral" :callback="buttonAddFriend"></Button>
+				</div>
+				<div v-else id="action-buttons-container">
+					<Button text="Edit Profile" variant="normal" :callback="buttonEditProfile"></Button>
+				</div>
+			</div>
+			<VerticalSpacer />
+
+			<div v-if="aboutMe" id="profile-body">
+				<div v-if="aboutMe" id="about-me-container">
+					<div><Icon name="lucide:info" size="1.1em"/></div>
+					<div id="about-me-text">
+						{{ " " + aboutMe }}
+					</div>
+				</div>
+			</div>
+			<VerticalSpacer v-if="aboutMe" />
+
+			<div id="profile-footer">
+				<div id="dates">
+					<div v-if="registrationDate" class="date-entry">
+						<span class="date-entry-title">Registered at</span><br>
+						<span class="date-entry-value" :title="registrationDate.toLocaleTimeString()">{{ toDateString(registrationDate) }}</span>
+					</div>
+					<div v-if="joinDate" class="date-entry">
+						<span class="date-entry-title">Joined at</span><br>
+						<span class="date-entry-value" :title="joinDate.toLocaleTimeString()">{{ toDateString(joinDate) }}</span>
+					</div>
+					<div v-if="friendsSince" class="date-entry">
+						<span class="date-entry-title">Friends since</span><br>
+						<span class="date-entry-value" :title="friendsSince.toLocaleTimeString()">{{ toDateString(friendsSince) }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</ModalBase>
+</template>
+
+<script lang="ts" setup>
+import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/interfaces';
+import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
+import Button from '../UserInterface/Button.vue';
+
+const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
+const { addFriend, fetchMe } = useApi();
+
+const props = defineProps<ModalProps & {
+	profile: GuildMemberResponse,
+	onFinish: () => void
+}>();
+
+const me = await fetchMe() as UserResponse
+
+const displayName = getDisplayName(props.profile)
+const username = getUsername(props.profile)
+const pronouns = getPronouns(props.profile)
+const aboutMe = getAboutMe(props.profile)
+
+const registrationDate = getRegistrationDate(props.profile)
+const joinDate = getGuildJoinDate(props.profile)
+const friendsSince = await getFriendsSince(props.profile)
+
+const uuid = getUuid(props.profile)
+
+
+function toDateString(date: Date): string {
+	return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
+}
+
+function buttonSendMessage() {
+	navigateTo(`/me/${uuid}`)
+}
+
+async function buttonAddFriend() {
+	try {
+		await addFriend(username)
+		alert("sent!")
+	} catch (error: any) {
+		if (error?.response?.status !== 200) {
+			alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
+		}
+	}
+}
+
+function buttonEditProfile() {
+	navigateTo(`/settings#profile`)
+}
+</script>
+
+<style scoped>
+
+#profile-container { 
+	text-align: left;
+
+	position: relative;
+	max-height: 60dvh;
+	max-width: 60dvw;
+	height: 30em;
+	width: 40em;
+
+	display: flex;
+	flex-direction: column;
+
+	background-color: var(--chat-background-color);
+	border-radius: var(--standard-radius);
+
+	overflow-y: scroll;
+}
+
+#profile-header {
+	flex-shrink: 0;
+	min-height: 9em;
+	width: 100%;
+}
+
+#header-mask {
+	display: relative;
+	width: 100%;
+	min-height: 7em;
+
+	z-index: 0;
+
+	background-color: var(--primary-color);
+	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
+}
+
+#avatar {
+	display: block;
+	position: absolute;
+	left: 2em;
+	top: 2.5em;
+
+	z-index: 1;
+
+	width: 6em;
+	height: 6em;
+
+	border: .15em solid var(--accent-color);
+}
+
+#profile-sub-header {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#display-name {
+	font-weight: 800;
+	font-size: 2em;
+}
+
+#username-and-pronouns {
+	font-size: .9em;
+	color: var(--secondary-text-color);
+}
+
+#status {
+	width: fit-content;
+	margin-top: .75em;
+
+	margin-left: -0.2em;
+	padding: .3em .5em;
+	
+	background-color: var(--chatbox-background-color);
+	border-radius: 1em;
+}
+
+#action-buttons-container {
+	display: flex;
+	gap: .6em;
+
+	margin-top: .4em;
+	margin-bottom: .3em;
+}
+
+
+#profile-body {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+
+#about-me-container {
+	display: flex;
+	flex-direction: row;
+	gap: .5em;
+
+	margin-top: .75em;
+	margin-bottom: .75em;
+}
+
+#about-me-text {
+	display: inline;
+	margin-top: -0.5em;
+	
+	align-self: center;
+
+	width: 100%;
+	font-size: .8em;
+	font-weight: lighter;
+
+	white-space: pre-line;
+	line-height: 1;
+	max-height: 7em; /* 7 x 1 */
+
+	overflow-y: auto;
+	overflow-x: hidden;
+	scrollbar-width: none;
+}
+
+#about-me-text::-webkit-scrollbar {
+	display: none;
+}
+
+
+#profile-footer {
+	margin-left: 1em;
+	margin-right: 1em;
+	padding-bottom: 5em;
+}
+
+#dates {
+	display: flex
+}
+
+.date-entry {
+	flex-grow: 1;
+}
+
+.date-entry-title {
+	font-size: .8em;
+}
+
+.date-entry-value {
+	font-size: 1em;
+}
+</style>
\ No newline at end of file
diff --git a/components/Popups/CropPopup.vue b/components/Popups/CropPopup.vue
index 12c3a0b..3a9586c 100644
--- a/components/Popups/CropPopup.vue
+++ b/components/Popups/CropPopup.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import Cropper from 'cropperjs';
+import Button from '../UserInterface/Button.vue';
 
 const props = defineProps({
   imageSrc: String,
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index b81929f..f6f40f4 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -2,18 +2,43 @@
   <div>
     <h1>Appearance</h1>
     
-    <p class="subtitle">THEMES</p>
+    <h2>Themes</h2>
     <div class="themes">
-      <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview"
-          :title="theme.displayName"
-          :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.id, theme.themeUrl)"
-        >
-          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
-            {{ theme.displayName }}
+      <p class="subtitle">STYLES</p>
+      <div class="styles">
+        <div v-for="style of styles" class="theme-preview-container">
+          <span class="theme-instance"
+              :title="style.displayName"
+              @click="changeTheme(StyleLayout.Style, style)">
+            <div class="theme-content-container">
+              <span class="style-background"
+                :style="{background:`linear-gradient(${style.previewGradient})`}"
+              ></span>
+              <span class="theme-title" :style="{color:`${style.complementaryColor}`}">
+                {{ style.displayName }}
+              </span>
+            </div>
           </span>
-        </span>
+        </div>
+      </div>
+      <p class="subtitle">LAYOUTS</p>
+      <div class="layouts">
+        <div v-for="layout of layouts" class="theme-preview-container">
+          <div class="theme-instance"
+              :title="layout.displayName"
+              @click="changeTheme(StyleLayout.Layout, layout)">
+            <div class="theme-content-container">
+              <span class="layout-background"
+                :style="{backgroundImage:`url(${layout.previewImageUrl})`}"
+              ></span>
+              <span class="theme-title" :style="{color:`${layout.complementaryColor}`}">
+                {{ layout.displayName }}
+              </span>
+              <!-- this breaks if it's a nuxtimg, i don't know why -->
+              <img class="layout-preview" :src="layout.previewImageUrl"></img>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -32,51 +57,120 @@
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
-import settingSave from '~/utils/settingSave';
+import { settingSave, settingsLoad } from '#imports';
 
 const runtimeConfig = useRuntimeConfig()
-const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
-const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
-let themeLinkElement: HTMLLinkElement | null = null;
+const styleFolder = `${baseURL}/themes/style`
+const layoutFolder = `${baseURL}/themes/layout`
 
-const themes: Array<Theme> = []
+const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
+
+enum StyleLayout {
+  Style,
+  Layout
+}
 
 interface Theme {
-  id: string
   displayName: string
-  previewGradient: string
   complementaryColor: string
+  cssData: string
   themeUrl: string
+  previewGradient?: string
+  previewImageUrl?: string
 }
 
-function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
+async function parseTheme(url: string): Promise<Theme | void> {
+  const styleData: any = await $fetch(url)
+
+  if (typeof styleData != "string") {
+    return
   }
 
-  settingSave("selectedThemeId", id)
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
+  const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//);
+  if (!metadataMatch) {
+    alert(`Failed to fetch metadata for a theme, panicking`)
+    return
   }
 
-  themeLinkElement.href = `${baseURL}themes/${url}`;
-}
+  const commentContent = metadataMatch[0].trim().split("\n");
+  const cssData = styleData.substring(metadataMatch[0].length).trim();
 
-async function fetchThemes() {
-  for (const theme of defaultThemes) {
-    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
-    themeConfig.id = theme
+  let displayName: string | undefined
+  let complementaryColor: string | undefined
+  let previewGradient: string | undefined
+  let previewImageUrl: string | undefined
 
-    themes.push(themeConfig)
+  for (const line of commentContent) {
+    const lineArray = line.split("=")
+    if (lineArray.length === 2) {
+      switch (lineArray[0].trim()) {
+        case "displayName":
+          displayName = lineArray[1].trim()
+          break
+        case "complementaryColor":
+          complementaryColor = lineArray[1].trim()
+          break
+        case "previewGradient":
+          previewGradient = lineArray[1].trim()
+          break
+        case "previewImageUrl":
+          previewImageUrl = `${layoutFolder}/${lineArray[1].trim()}`
+          console.log(previewImageUrl)
+          break
+      }
+    }
+  }
+  
+  console.log(displayName, complementaryColor, previewGradient, previewImageUrl, cssData)
+  if (!(displayName && complementaryColor && cssData && (previewGradient || previewImageUrl))) {
+    return
+  }
+
+  return {
+    displayName,
+    complementaryColor,
+    cssData,
+    themeUrl: url,
+    previewGradient,
+    previewImageUrl,
   }
 }
 
-await fetchThemes()
+async function parseThemeLayout(
+  folder: string,
+  incomingThemeList: string[],
+  outputThemeList: Theme[]) {
+    for (const theme of incomingThemeList) {
+      const parsedThemeData = await parseTheme(`${folder}/${theme}`)
+      
+      if (parsedThemeData) {
+        outputThemeList.push(parsedThemeData)
+      }
+    }
+}
+
+const styles: Theme[] = [];
+const layouts: Theme[] = [];
+
+const styleList = await $fetch(`${styleFolder}/styles.json`)
+const layoutList = await $fetch(`${layoutFolder}/layouts.json`)
+
+if (Array.isArray(styleList)) {
+  await parseThemeLayout(styleFolder, styleList, styles)
+}
+if (Array.isArray(layoutList)) {
+  await parseThemeLayout(layoutFolder, layoutList, layouts)
+}
+
+function changeTheme(themeType: StyleLayout, theme: Theme) {
+  if (themeType == StyleLayout.Style) {
+    settingSave("selectedThemeStyle", theme.themeUrl)
+  } else {
+    settingSave("selectedThemeLayout", theme.themeUrl)
+  }
+  loadPreferredThemes()
+}
 
 async function onTimeFormatClicked(index: number) {
   let format: "auto" | "12" | "24" = "auto"
@@ -96,29 +190,89 @@ async function onTimeFormatClicked(index: number) {
 
 <style scoped>
 .themes {
+  --instance-size: 5em;
+}
+.styles, .layouts {
   display: flex;
 }
 
 .theme-preview-container {
   margin: .5em;
-  width: 5em;
-  height: 5em;
+  width: var(--instance-size);
+  height: var(--instance-size);
 }
 
-.theme-preview {
-  width: 5em;
-  height: 5em;
+.theme-instance {
+  width: var(--instance-size);
+  height: var(--instance-size);
   border-radius: 100%;
   border: .1em solid var(--primary-color);
 
   display: inline-block;
-  text-align: center;
-  align-content: center;
   cursor: pointer;
 }
 
+.theme-content-container {
+  position: relative;
+
+  text-align: center;
+  align-content: center;
+}
+
+.style-background, .layout-background {
+  position: absolute;
+
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  width: var(--instance-size);
+  height: var(--instance-size);
+
+  border-radius: 100%;
+}
+
+.layout-background {
+  background-size: cover;
+  background-repeat: no-repeat;
+  filter: brightness(35%);
+}
+
+.layout-preview {
+  position: absolute;
+  pointer-events: none;
+
+  border: 0 solid var(--primary-color);
+  transform: translate(0, calc(var(--instance-size) / 2));
+  transition: all 250ms;
+
+  height: 0;
+  width: calc((height / 9) * 16);
+  max-height: 40dvh;
+}
+
+.theme-instance:hover .layout-preview {
+  border: .1em solid var(--primary-color);
+  filter: drop-shadow(0 0 .2em var(--secondary-color));
+  transform: translate(3.5em, -4em);
+  
+  height: 40dvw;
+}
+
 .theme-title {
+  position: absolute;
+  
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  
+  width: 100%;
+  height: 100%;
+  
   font-size: .8em;
-  line-height: 5em; /* same height as the parent to centre it vertically */
+  /* i CANNOT explain this line height calculation, but it works for a font size of .8em no matter what size the instances are */
+  line-height: calc(var(--instance-size) * 1.25); 
 }
 </style>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 99880fa..64b522e 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -15,8 +15,11 @@
         <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
         <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
         <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
+        <div id="profile-about-me-input" class="profile-data-input profile-textarea-input"
+          placeholder="About Me" maxlength="240" wrap="soft" rows="8"
+          autocorrect="off" spellcheck="true" contenteditable="true"
+          @keyup="handleAboutMeKeyUp" ref="aboutMeInput">
+        </div>
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
@@ -33,6 +36,7 @@
 </template>
 
 <script lang="ts" setup>
+import CropPopup from '~/components/Popups/CropPopup.vue';
 import UserPopup from '~/components/User/UserPopup.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
@@ -41,7 +45,8 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
-;
+const aboutMeInput = ref<HTMLDivElement>()
+
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()
@@ -124,6 +129,12 @@ function handleCrop(blob: Blob, url: string) {
 function closeCropPopup() {
   isCropPopupVisible.value = false
 }
+
+function handleAboutMeKeyUp(event: KeyboardEvent) {
+  if (user && aboutMeInput.value) {
+    user.about = aboutMeInput.value.innerText
+  }
+}
 </script>
 
 <style scoped>
@@ -138,8 +149,9 @@ function closeCropPopup() {
 
 .profile-data-input {
   min-width: 30dvw;
+  max-width: 30dvw;
   margin: 0.07dvh;
-  padding: 0.1dvh 0.7dvw;
+  padding: .1em .7em;
   height: 2.5em;
   font-size: 1em;
   border-radius: 8px;
@@ -148,6 +160,12 @@ function closeCropPopup() {
   background-color: var(--accent-color);
 }
 
+.profile-textarea-input {
+  padding: .6em .7em;
+
+  height: fit-content;
+}
+
 #profile-popup {
   margin-left: 2dvw;
 }
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b3ad40f..09bf1ff 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -1,14 +1,18 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <Avatar :user="props.user" class="user-avatar"/>
+        <Avatar :profile="props.user" class="user-avatar"/>
 
-        <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
+        <span class="user-display-name" :style="`color: ${generateIrcColor(props.user.uuid)}`">
+            {{ getDisplayName(props.user) }}
+        </span>
 	</NuxtLink>
 </template>
 
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { getDisplayName } = useProfile()
+
 const props = defineProps<{
     user: UserResponse
 }>();
@@ -34,7 +38,15 @@ const props = defineProps<{
 }
 
 .user-avatar {
-    width: 2.3em;
-    height: 2.3em;
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-height: 2.3em;
+    max-height: 2.3em;
+}
+
+.user-display-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 </style>
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 86b5a48..0c89d51 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="profile-popup">
-    <Avatar :user="props.user" id="avatar"/>
+    <Avatar :profile="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">
@@ -12,7 +12,7 @@
         <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
       </p>
       <div id="about-me" v-if="props.user.about">
-        {{ props.user.about }}
+        {{ props.user.about.trim() }}
       </div>
     </div>
   </div>
@@ -21,7 +21,7 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { fetchMembers } = useApi();
+const { getDisplayName } = useProfile()
 
 const props = defineProps<{
 	user: UserResponse
@@ -80,9 +80,16 @@ const props = defineProps<{
 #about-me {
   background-color: var(--secondary-color);
   border-radius: 12px;
-
+  
   margin-top: 32px;
   padding: 16px;
   font-size: 16px;
+  
+  white-space: pre-line;
+  line-height: 1;
+  max-height: 7em; /* 7 x 1 */
+
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 467b65e..ad4cdb5 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,6 +1,7 @@
 <template>
-	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
-		{{ props.text }}
+	<button class="button" :class="props.variant + '-button'"
+	@click="props.callback ? props.callback() : null">
+			{{ props.text }}
 	</button>
 </template>
 
@@ -9,7 +10,7 @@
 const props = defineProps<{
 	text: string,
 	callback?: CallableFunction,
-	variant?: "normal" | "scary" | "neutral",
+	variant?: "normal" | "scary" | "neutral" | "stealth",
 }>();
 
 </script>
@@ -21,11 +22,12 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.4em 0.75em;
-	font-size: 1.1em;
+	padding: 0.35em 0.65em;
+	font-size: 1em;
+	
 	transition: background-color 0.2s;
 
-	border-radius: 0.7rem;
+	border-radius: var(--standard-radius);
 	text-decoration: none;
 	display: inline-block;
 
@@ -50,4 +52,11 @@ const props = defineProps<{
 	background-color: var(--accent-highlighted-color);
 }
 
+.stealth-button {
+	background-color: unset;
+}
+.stealth-button:hover {
+	background-color: unset;
+}
+
 </style>
\ No newline at end of file
diff --git a/components/UserInterface/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index 1388bbd..1767657 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -1,25 +1,30 @@
 <template>
-	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
-		{{ item.name }}
+	<div id="context-menu">
+		<button v-for="item of props.menuItems" class="context-menu-item"
+				:class="'context-menu-item-' + item.type"
+				@click="runCallback(item)">
+			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
-const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
+const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
 
 onMounted(() => {
 	const contextMenu = document.getElementById("context-menu");
 	if (contextMenu) {
-		contextMenu.style.left = props.cursorX.toString() + "px";
-		contextMenu.style.top = props.cursorY.toString() + "px";
+		contextMenu.style.left = props.pointerX.toString() + "px";
+		contextMenu.style.top = props.pointerY.toString() + "px";
 	}
 });
 
 
 function runCallback(item: ContextMenuItem) {
-	removeContextMenu();
+	const contextMenu = useState<ContextMenuInterface>("contextMenu");
+	removeContextMenu(contextMenu);
 	item.callback();
 }
 
@@ -31,14 +36,33 @@ function runCallback(item: ContextMenuItem) {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	width: 10dvw;
-	border: .15rem solid cyan;
-	background-color: var(--background-color);
-	text-align: center;
+	width: 10rem;
+	border: .1rem solid var(--reply-text-color);
+	background-color: var(--sidebar-highlighted-background-color);
+	text-align: left;
+	z-index: 100;
+}
+
+.context-menu-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 2rem;
+	width: 100%;
+	color: var(--text-color);
+	background-color: var(--popup-background-color);
+	border: none;
+	text-align: left;
+	padding-left: 1rem;
+	padding-right: 1rem;
 }
 
 .context-menu-item:hover {
-	background-color: rgb(50, 50, 50);
+	background-color: var(--popup-highlighted-background-color);
+}
+
+.context-menu-item-danger {
+	color: var(--danger-text-color);
 }
 
 </style>
\ No newline at end of file
diff --git a/components/UserInterface/HorizontalSpacer.vue b/components/UserInterface/HorizontalSpacer.vue
new file mode 100644
index 0000000..cc95c92
--- /dev/null
+++ b/components/UserInterface/HorizontalSpacer.vue
@@ -0,0 +1,12 @@
+<template>
+  <span class="horizontal-spacer"></span>
+</template>
+
+<style scoped>
+.spacer {
+  display: block;
+  min-width: 0.2dvh;
+  margin: 0.2dvh 0.8dvw;
+  background-color: var(--padding-color);
+}
+</style>
diff --git a/components/UserInterface/MessageReply.vue b/components/UserInterface/MessageReply.vue
index f60c0bc..f3214b5 100644
--- a/components/UserInterface/MessageReply.vue
+++ b/components/UserInterface/MessageReply.vue
@@ -46,11 +46,22 @@ onMounted(async () => {
 function scrollToReply(e: MouseEvent) {
 	e.preventDefault();
 	console.log("clicked on reply box");
-	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
-	if (reply) {
+	let replyId: string;
+	if (props.maxWidth == "reply") {
+		replyId = props.replyId;
+	} else {
+		replyId = props.id;
+	}
+	const reply = document.querySelector(`.message[data-message-id="${replyId}"]`);
+	if (reply instanceof HTMLDivElement) {
 		console.log("reply:", reply);
 		console.log("scrolling into view");
 		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+		reply.style.transition = "background-color .3s";
+		reply.style.backgroundColor = "var(--chat-featured-message-color)";
+		setTimeout(() => {
+			reply.style.backgroundColor = "";
+		}, 1000);
 	}
 }
 
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
new file mode 100644
index 0000000..79e95bd
--- /dev/null
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -0,0 +1,148 @@
+<template>
+	<div ref="resizableSidebar" class="resizable-sidebar"
+			:style="{
+				'width': storedWidth ? storedWidth : props.width,
+				'min-width': props.minWidth,
+				'max-width': props.maxWidth,
+				'border': props.borderSides == 'all' ? borderStyling : undefined,
+				'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
+				'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
+			}">
+		<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+		<div class="sidebar-content">
+			<slot />
+		</div>
+		<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
+
+const borderStyling = ".1rem solid var(--padding-color)";
+
+const resizableSidebar = ref<HTMLDivElement>();
+const widthResizer = ref<HTMLDivElement>();
+const storedWidth = ref<string>();
+
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
+
+const menuItems: ContextMenuItem[] = [
+	{ name: "Reset", type: "normal", callback: () => {
+		const defaultWidth = props.width ?? props.minWidth;
+		resizableSidebar.value!.style.width = defaultWidth;
+		if (props.localStorageName) {
+			localStorage.setItem(props.localStorageName, defaultWidth);
+		}
+	} }
+]
+
+onMounted(() => {
+	loadStoredWidth();
+
+	if (resizableSidebar.value && widthResizer.value) {
+		widthResizer.value.addEventListener("pointerdown", (e) => {
+			e.preventDefault();
+			if (e.button == 2) {
+				showContextMenu(e, contextMenu.value, menuItems);
+				return
+			};
+			document.body.style.cursor = "ew-resize";
+			function handleMove(pointer: PointerEvent) {
+				if (resizableSidebar.value) {
+					console.log("moving");
+					console.log("pointer:", pointer);
+					console.log("width:", resizableSidebar.value.style.width);
+					let delta = 0;
+					if (props.borderSides == 'right') {
+						delta = resizableSidebar.value.getBoundingClientRect().left;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${pointer.clientX - delta}px`;
+					} else {
+						delta = resizableSidebar.value.getBoundingClientRect().right;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${delta - pointer.clientX}px`;
+					}
+				}
+			}
+
+			document.addEventListener("pointermove", handleMove);
+
+			document.addEventListener("pointerup", () => {
+				console.log("pointer up");
+				document.removeEventListener("pointermove", handleMove);
+				console.log("removed pointermove event listener");
+				document.body.style.cursor = "";
+				if (resizableSidebar.value && props.localStorageName) {
+					localStorage.setItem(props.localStorageName, resizableSidebar.value.style.width);
+				}
+			}, { once: true });
+		});
+	}
+});
+
+onActivated(() => {
+	console.log("[res] activated");
+	loadStoredWidth();
+});
+
+function loadStoredWidth() {
+	if (props.localStorageName) {
+		const storedWidthValue = localStorage.getItem(props.localStorageName);
+		if (storedWidthValue) {
+			storedWidth.value = storedWidthValue;
+			console.log("[res] loaded stored width");
+		}
+	}
+}
+
+</script>
+
+<style>
+.resizable-sidebar > * {
+	box-sizing: border-box;
+}
+
+.resizable-sidebar {
+	display: flex;
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+	height: 100%;
+	flex: 0 0 auto;
+}
+
+.width-resizer {
+	width: .5rem;
+	cursor: col-resize;
+	position: absolute;
+	height: 100%;
+}
+
+.width-resizer-bar {
+	display: flex;
+	justify-content: center;
+	position: relative;
+	height: 100%;
+	width: 1px;
+	background-color: var(--padding-color);
+}
+
+.sidebar-content {
+	width: 100%;
+	padding-left: .25em;
+	padding-right: .25em;
+}
+
+.sidebar-content > :first-child {
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
index 8ac1bd6..9f0e304 100644
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@@ -1,11 +1,11 @@
 <template>
-  <span class="spacer"></span>
+  <span class="vertical-spacer"></span>
 </template>
 
 <style scoped>
-.spacer {
-  height: 0.2dvh;
+.vertical-spacer {
   display: block;
+  min-height: 0.2dvh;
   margin: 0.8dvh 0.2dvw;
   background-color: var(--padding-color);
 }
diff --git a/composables/api.ts b/composables/api.ts
index 1a38476..c949bc0 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,24 +1,47 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildMembersResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+
+function ensureIsArray(list: any) {
+	if (Array.isArray(list)) {
+		return list
+	} else {
+		return []
+	}
+}
 
 export const useApi = () => {
-	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
-		return await fetchWithApi(`/guilds`);
+	async function fetchGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds`));
 	}
 	
 	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}`);
 	}
 
-	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/channels`);
+	async function fetchMyGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/me/guilds`));
+	}
+
+	async function fetchMe(): Promise<UserResponse | undefined> {
+		return await fetchWithApi("/me")
+	}
+
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
 
 	async function fetchChannel(channelId: string): Promise<ChannelResponse | undefined> {
 		return await fetchWithApi(`/channels/${channelId}`)
 	}
 
-	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/members`);
+	async function fetchMembers(guildId: string, options?: { per_page?: number, page?: number }): Promise<GuildMembersResponse> {
+		const query = new URLSearchParams();
+		query.set("page", options?.page ? options.page.toString() : "1");
+		if (options?.per_page) {
+			query.set("per_page", options.per_page.toString());
+		}
+
+		console.log("members query:", query);
+		return await fetchWithApi(`/guilds/${guildId}/members?${query.toString()}`) as GuildMembersResponse;
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
@@ -34,12 +57,7 @@ export const useApi = () => {
 	}
 	
 	async function fetchFriends(): Promise<UserResponse[]> {
-		const response = await fetchWithApi('/me/friends')
-		if (Array.isArray(response)) {
-			return response
-		} else {
-			return []
-		}
+		return ensureIsArray(await fetchWithApi('/me/friends'));
 	}
 
 	async function addFriend(username: string): Promise<void> {
@@ -87,9 +105,15 @@ export const useApi = () => {
 		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
 	}
 
+	async function fetchInvite(id: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/invites/${id}`);
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
+		fetchMyGuilds,
+		fetchMe,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
@@ -107,6 +131,7 @@ export const useApi = () => {
 		fetchInstanceStats,
 		sendVerificationEmail,
 		sendPasswordResetEmail,
-		resetPassword
+		resetPassword,
+		fetchInvite
 	}
 }
diff --git a/composables/auth.ts b/composables/auth.ts
index bceecb3..6cb3c41 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -41,7 +41,7 @@ export const useAuth = () => {
   async function logout() {
     console.log("access:", accessToken.value);
 
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "DELETE", credentials: "include" });
     clearAuth();
 
 	  return await navigateTo("/login");
diff --git a/composables/profile.ts b/composables/profile.ts
new file mode 100644
index 0000000..f3515e6
--- /dev/null
+++ b/composables/profile.ts
@@ -0,0 +1,95 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
+
+const { fetchFriends } = useApi();
+
+export const useProfile = () => {
+	function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.about
+		} else {
+			return profile.user.about
+		}
+	}
+
+	function getDisplayName (profile: UserResponse | GuildMemberResponse): string  {
+		if ("username" in profile) {
+			// assume it's a UserResponse
+			if (profile.display_name) return profile.display_name
+			return profile.username
+		} else {
+			// assume it's a GuildMemberResponse
+			if (profile.nickname) return profile.nickname
+			if (profile.user.display_name) return profile.user.display_name
+			return profile.user.username
+		}
+	}
+
+	async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
+		let user_uuid: string;
+
+		if ("username" in profile) {
+			user_uuid = profile.uuid
+		} else {
+			user_uuid = profile.user.uuid
+		}
+
+		const friends = await fetchFriends()
+		const friend = friends.find(friend => friend.uuid === user_uuid);
+		if (friend?.friends_since) {
+			return new Date(friend.friends_since);
+		}
+
+		return null
+	}
+
+	function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
+		if ("username" in profile) {
+			return null
+		} else {
+			return uuidToDate(profile.uuid)
+		}
+	}
+
+	function getPronouns (profile: UserResponse | GuildMemberResponse): string | null  {
+		if ("username" in profile) {
+			return profile.pronouns
+		} else {
+			return profile.user.pronouns
+		}
+	}
+
+	function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
+		if ("username" in profile) {
+			return uuidToDate(profile.uuid)
+		} else {
+			return uuidToDate(profile.user.uuid)
+		}
+	}
+
+	function getUsername (profile: UserResponse | GuildMemberResponse): string {
+		if ("username" in profile) {
+			return profile.username
+		} else {
+			return profile.user.username
+		}
+	}
+
+	function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.uuid
+		} else {
+			return profile.user.uuid
+		}
+	}
+	
+	return {
+		getAboutMe,
+		getDisplayName,
+		getFriendsSince,
+		getGuildJoinDate,
+		getRegistrationDate,
+		getPronouns,
+		getUsername,
+		getUuid		
+	}
+}
diff --git a/layouts/client.vue b/layouts/client.vue
index 46bdf89..800a097 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -17,19 +17,15 @@
 				</div>
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+					<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" />
-						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon guild-icon"
+						<DefaultIcon v-else 
+							class="sidebar-icon guild-icon" 
 							:alt="guild.name"
-							:src="generateDefaultIcon(guild.name, guild.uuid)" />
-						<Icon v-else name="lucide:server"
-							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
-							class="sidebar-icon guild-icon"
-							:alt="guild.name" />
+							:name="guild.name" :seed="guild.uuid"/>
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -52,19 +48,24 @@
 <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';
 
+definePageMeta({
+	keepalive: true
+});
+
 const loading = useState("loading", () => false);
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
+const { getDisplayName } = useProfile()
 const api = useApi();
 
-const blockedCanvas = isCanvasBlocked()
-
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
@@ -95,7 +96,7 @@ const options = [
 						if (invite.length == 6) {
 							try {
 								const joinedGuild = await api.joinGuild(invite);
-								guilds?.push(joinedGuild);
+								guilds.push(joinedGuild);
 								return await navigateTo(`/servers/${joinedGuild.uuid}`);
 							} catch (error) {
 								alert(`Couldn't use invite: ${error}`);
@@ -151,7 +152,7 @@ const options = [
 	}
 ];
 
-const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const guilds = await api.fetchMyGuilds();
 
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });
@@ -224,6 +225,8 @@ function createDropdown() {
 	
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
 }
 
 .left-column-segment {
@@ -243,20 +246,14 @@ function createDropdown() {
 	gap: var(--sidebar-icon-gap);
 }
 
-#middle-left-column {
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	min-width: 13em;
-	max-width: 13em;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-
 #home-button {
 	height: var(--sidebar-icon-width);
 }
 
+#guild-icon-container {
+	text-decoration: none;
+}
+
 .guild-icon {
 	border-radius: var(--guild-icon-radius);
 }
diff --git a/middleware/server.ts b/middleware/server.ts
index 9f575b0..48bd6a2 100644
--- a/middleware/server.ts
+++ b/middleware/server.ts
@@ -5,10 +5,10 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
 	const guildId = to.params.serverId as string;
 
-	const channels: ChannelResponse[] | undefined = await fetchChannels(guildId);
+	const channels: ChannelResponse[] = await fetchChannels(guildId);
 	console.log("channels:", channels);
 
-	if (channels && channels.length > 0) {
+	if (channels.length > 0) {
 		console.log("wah");
 		return await navigateTo(`/servers/${guildId}/channels/${channels[0].uuid}`, { replace: true });
 	}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 46890d1..05a40fa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,9 +30,6 @@ export default defineNuxtConfig({
       messageGroupingMaxDifference: 300000,
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
-      defaultThemes: [
-        "light", "ash", "dark", "rainbow-capitalism"
-      ]
     }
   },
   /* nitro: {
diff --git a/pages/invite/[inviteId].vue b/pages/invite/[inviteId].vue
new file mode 100644
index 0000000..ff4166e
--- /dev/null
+++ b/pages/invite/[inviteId].vue
@@ -0,0 +1,180 @@
+<template>
+  <div id="invite-root">
+	<div id="invite-container">
+		<div id="guild-container" v-if="guild">
+			<h1>You have been invited to {{ guild.name }}!</h1>
+			<div id="guild-card">
+				<div id="card-grid">
+					<div id="guild-details">
+						<div id="guild-name" title="Server name">
+							<span>{{ guild.name }}</span>
+						</div>
+						<div id="guild-member-count" :title="`${guild.member_count} members`">
+							<Icon name="lucide:users" />
+							<span>{{ guild.member_count }}</span>
+						</div>
+					</div>
+					<VerticalSpacer id="space" />
+					<div id="guild-description">
+						<span>{{ guild.description }}</span>
+					</div>
+					<div id="guild-icon">
+						<NuxtImg v-if="guild.icon" id="guild-icon-img" :src="guild.icon" :alt="`${guild.name} server icon`" />
+					</div>
+				</div>
+				<Button :text="isMember ? 'Joined' : 'Join'" variant="normal" :callback="acceptInvite" />
+			</div>
+		</div>
+		<div v-else-if="errorMessage">
+			<h1>{{ errorMessage }}</h1>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+
+const route = useRoute();
+const { fetchInvite, joinGuild, fetchMembers } = useApi();
+const { getUser } = useAuth();
+
+const inviteId = route.params.inviteId as string;
+
+const guild = ref<GuildResponse>();
+const errorMessage = ref<string>();
+const isMember = ref(false);
+
+const accessToken = useCookie("access_token");
+
+if (inviteId) {
+	try {
+		guild.value = await fetchInvite(inviteId);
+		console.log("invite guild:", guild.value);
+		if (accessToken.value && guild.value) {
+			const members = await fetchMembers(guild.value.uuid);
+			const me = await getUser();
+			if (me && members.find(member => member.user.uuid == me.uuid)) {
+				isMember.value = true;
+			}
+		} 
+	} catch (error: any) {
+		if (error.response) {
+			if (error.status == 404) {
+				errorMessage.value = "That invite doesn't exist or has expired.";
+			}
+		}
+		console.error(error);
+	}
+}
+
+async function acceptInvite() {
+	if (accessToken.value && guild.value) {		
+		await joinGuild(inviteId);
+		return await navigateTo(`/servers/${guild.value.uuid}`);
+	}
+
+	return await navigateTo(`/login?redirect_to=${route.fullPath}`);
+}
+
+</script>
+
+<style>
+
+#invite-root {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100dvh;
+}
+
+#invite-container {
+	border: .5rem solid var(--chat-highlighted-background-color);
+	border-radius: var(--standard-radius);
+	height: 50%;
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: var(--sidebar-highlighted-background-color);
+	border: .5rem solid black;
+	border-radius: var(--standard-radius);
+	padding: .5rem;
+}
+
+#card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 5rem auto 1fr;
+	height: 100%;
+	width: 100%;
+}
+
+#guild-details {
+	grid-row: 1;
+	grid-column: span 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-name {
+	font-size: 2rem;
+	flex-direction: column;
+}
+
+#guild-member-count {
+	gap: .3rem;
+}
+
+#space {
+	grid-row: 2;
+	grid-column: span 3;
+}
+
+#guild-description {
+	grid-row: 3;
+	grid-column: span 3;
+	word-break: break-all;
+	padding: .3rem;
+}
+
+#guild-name, #guild-member-count {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-icon-img {
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 8915c72..f07dabd 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,25 +1,33 @@
 <template>
 	<NuxtLayout name="client">
-		<div id="middle-left-column" class="main-grid-row">
-			<div id="server-name-container">
-				<span id="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" />
+		<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>
 			</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>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-container">
-			<div id="members-list">
-				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+		<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>
-		</div>
+		</ResizableSidebar>
 	</NuxtLayout>
 </template>
 
@@ -27,7 +35,8 @@
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
 import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -53,18 +62,23 @@ 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() {
-	members.value = await fetchMembers(route.params.serverId as string);
+	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);
@@ -87,18 +101,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 </script>
 
 <style>
-#middle-left-column {
-	padding-left: .5em;
-	padding-right: .5em;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-channel-list-background);
-	background-color: var(--sidebar-background-color);
-}
-
 #members-container {
-	min-width: 15rem;
-	max-width: 15rem;
-	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
 
@@ -128,12 +131,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	gap: .5em;
-}
-
-.member-avatar {
-	height: 2.3em;
-	width: 2.3em;
-	border-radius: 50%;
+	text-overflow: ellipsis;
 }
 
 .member-display-name {
@@ -151,6 +149,8 @@ function handleMemberClick(member: GuildMemberResponse) {
 
 #server-name {
 	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 #server-settings-button {
diff --git a/public/themes/ash.json b/public/themes/ash.json
deleted file mode 100644
index d5d2a59..0000000
--- a/public/themes/ash.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Ash",
-	"previewGradient": "45deg, #2f2e2d, #46423b",
-	"complementaryColor": "white",
-	"themeUrl": "ash.css"
-}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
deleted file mode 100644
index 4731d43..0000000
--- a/public/themes/dark.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Dark",
-	"previewGradient": "45deg, #1f1e1d, #36322b",
-	"complementaryColor": "white",
-	"themeUrl": "dark.css"
-}
\ No newline at end of file
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
new file mode 100644
index 0000000..7b8e88b
--- /dev/null
+++ b/public/themes/layout/gorb.css
@@ -0,0 +1,17 @@
+/*
+displayName = Gorb
+previewImageUrl = gorb.jpg
+complementaryColor = white
+*/
+
+:root {
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+}
\ No newline at end of file
diff --git a/public/themes/layout/gorb.jpg b/public/themes/layout/gorb.jpg
new file mode 100644
index 0000000..301d459
Binary files /dev/null and b/public/themes/layout/gorb.jpg differ
diff --git a/public/themes/layout/layouts.json b/public/themes/layout/layouts.json
new file mode 100644
index 0000000..48c3932
--- /dev/null
+++ b/public/themes/layout/layouts.json
@@ -0,0 +1,3 @@
+[
+	"gorb.css"
+]
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
deleted file mode 100644
index b95c78b..0000000
--- a/public/themes/light.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Light",
-	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
-	"complementaryColor": "black",
-	"themeUrl": "light.css"
-}
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.json b/public/themes/rainbow-capitalism.json
deleted file mode 100644
index e110ea2..0000000
--- a/public/themes/rainbow-capitalism.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-	"displayName": "Woke",
-	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
-	"complementaryColor": "white",
-	"themeUrl": "rainbow-capitalism.css"
-}
\ No newline at end of file
diff --git a/public/themes/ash.css b/public/themes/style/ash.css
similarity index 58%
rename from public/themes/ash.css
rename to public/themes/style/ash.css
index 94f5e85..495fa15 100644
--- a/public/themes/ash.css
+++ b/public/themes/style/ash.css
@@ -1,16 +1,29 @@
+/*
+displayName = Ash
+previewGradient = 45deg, #2f2e2d, #46423b
+complementaryColor = white
+*/
+
 :root {
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #2f2e2d;
     --chat-highlighted-background-color: #3f3b38;
+	--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;
+
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;
 
-    --padding-color: #e0e0e0;
+    --padding-color: #4f4f4f;
 
 	--primary-color: #f07028;
 	--primary-highlighted-color: #f28f4b;
@@ -18,11 +31,4 @@
 	--secondary-highlighted-color: #885830;
 	--accent-color: #a04b24;
 	--accent-highlighted-color: #b86038;
-
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--guild-icon-radius: 20%;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/style/dark.css
similarity index 61%
rename from public/themes/dark.css
rename to public/themes/style/dark.css
index a228889..d23ed76 100644
--- a/public/themes/dark.css
+++ b/public/themes/style/dark.css
@@ -1,10 +1,23 @@
+/*
+displayName = Dark
+previewGradient = 45deg, #1f1e1d, #36322b
+complementaryColor = white
+*/
+
 :root {
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #1f1e1d;
     --chat-highlighted-background-color: #2f2b28;
+	--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;
+
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
@@ -18,14 +31,4 @@
 	--secondary-highlighted-color: #8f5b2c;
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
-
-	--sidebar-icon-width: 2.5em;
-	--sidebar-icon-gap: .25em;
-	--sidebar-margin: .5em;
-	
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--guild-icon-radius: 15%;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/style/description.css
similarity index 78%
rename from public/themes/description.css
rename to public/themes/style/description.css
index e30025f..972821c 100644
--- a/public/themes/description.css
+++ b/public/themes/style/description.css
@@ -1,4 +1,11 @@
+/*
+displayName = Description
+previewGradient = 45deg, #ff8f8f, #8f8fff
+complementaryColor = black
+*/
+
 /* this is not a real theme, but rather a template for themes */
+
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
@@ -6,6 +13,12 @@
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;
+	--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;
+
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
@@ -20,12 +33,6 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
-
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
 	--optional-topbar-background: ; /* background element for the topbar */
diff --git a/public/themes/light.css b/public/themes/style/light.css
similarity index 61%
rename from public/themes/light.css
rename to public/themes/style/light.css
index 556b64d..78bf2f9 100644
--- a/public/themes/light.css
+++ b/public/themes/style/light.css
@@ -1,10 +1,23 @@
+/*
+displayName = Light
+previewGradient = 45deg, #f0ebe8, #d4d0ca
+complementaryColor = black
+*/
+
 :root {
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
     --chat-background-color: #f0ebe8;
     --chat-highlighted-background-color: #e8e4e0;
+    --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;
+
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
@@ -18,10 +31,4 @@
     --secondary-highlighted-color: #f8b68a;
     --accent-color: #e68b4e;
     --accent-highlighted-color: #f69254;
-
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/style/rainbow-capitalism.css
similarity index 69%
rename from public/themes/rainbow-capitalism.css
rename to public/themes/style/rainbow-capitalism.css
index ca73e1f..8ca3ed7 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@@ -1,10 +1,23 @@
-:root {
-	--text-color: #161518;
-	--secondary-text-color: #2b2930;
-	--reply-text-color: #969696;
+/*
+displayName = Woke
+previewGradient = 45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e
+complementaryColor = white
+*/
 
-    --chat-background-color: #80808000;
+:root {
+	--text-color: #000000;
+	--secondary-text-color: #1f1f1f;
+	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
+
+    --chat-background-color: #b0b0b040;
     --chat-highlighted-background-color: #ffffff20;
+	--chat-important-background-color: #ff4f4f80;
+	--chat-important-highlighted-background-color: #ff6f6fa0;
+	--chat-featured-message-color: #4f8f4f80;
+	--popup-background-color: #80808080;
+	--popup-highlighted-background-color: #9f9f9f9f;
+
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
@@ -19,12 +32,6 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 50%;
-	--preferred-font: Arial;
-
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
diff --git a/public/themes/style/styles.json b/public/themes/style/styles.json
new file mode 100644
index 0000000..955102e
--- /dev/null
+++ b/public/themes/style/styles.json
@@ -0,0 +1,6 @@
+[
+	"ash.css",
+	"dark.css",
+	"light.css",
+	"rainbow-capitalism.css"
+]
\ No newline at end of file
diff --git a/types/enums.ts b/types/enums.ts
new file mode 100644
index 0000000..ac2daba
--- /dev/null
+++ b/types/enums.ts
@@ -0,0 +1,11 @@
+export const enum Permission {
+	SendMessage = 1,
+	ManageChannel = 2,
+	ManageRole = 4,
+	CreateInvite = 8,
+	ManageInvite = 16,
+	ManageGuild = 32,
+	ManageMember = 64,
+	BanMember = 128,
+	KickMember = 256
+}
\ No newline at end of file
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 2a05c38..d175d76 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -19,16 +19,24 @@ export interface GuildResponse {
     description: string | null,
     icon: string | null,
     owner_uuid: string,
-    roles: [],
+    roles: RoleResponse[],
     member_count: number
 }
 
 export interface GuildMemberResponse {
 	uuid: string,
 	nickname: string,
-	user_uuid: string,
 	guild_uuid: string,
-	user: UserResponse
+	is_owner: boolean,
+	user: UserResponse,
+	roles: RoleResponse[]
+}
+
+export interface GuildMembersResponse {
+	objects: GuildMemberResponse[],
+	amount: number,
+	pages: number,
+	page: number
 }
 
 export interface ChannelResponse {
@@ -45,7 +53,7 @@ export interface MessageResponse {
 	user_uuid: string,
 	message: string,
 	reply_to: string | null,
-	user: UserResponse,
+	member: GuildMemberResponse,
 }
 
 export interface InviteResponse {
@@ -96,10 +104,20 @@ export interface ModalProps {
 	title?: string,
 	obscure?: boolean,
 	onClose?: () => void,
-	onCancel?: () => void
+	onCancel?: () => void,
+	onCloseButton?: () => void,
 }
 
 export interface ContextMenuItem {
 	name: string,
+	icon?: string,
+	type: "normal" | "danger"
 	callback: (...args: any[]) => any;
 }
+
+export interface ContextMenuInterface {
+	show: boolean,
+	pointerX: number,
+	pointerY: number,
+	items: ContextMenuItem[]
+}
diff --git a/types/props.ts b/types/props.ts
index 9a8e642..f25ae8d 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -1,9 +1,9 @@
-import type { MessageResponse, UserResponse } from "./interfaces";
+import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
 	class?: string,
 	img?: string | null,
-	author: UserResponse
+	author: GuildMemberResponse
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
diff --git a/types/settings.ts b/types/settings.ts
index 28e3bfc..8d24904 100644
--- a/types/settings.ts
+++ b/types/settings.ts
@@ -1,6 +1,7 @@
 export interface ClientSettings {
-	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
 	timeFormat?: TimeFormat
+	selectedThemeStyle?: string // URL
+	selectedThemeLayout?: string // URL
 }
 
 export interface TimeFormat {
diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
deleted file mode 100644
index 88fe6fb..0000000
--- a/utils/createContextMenu.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { render } from "vue";
-import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
-import type { ContextMenuItem } from "~/types/interfaces";
-
-export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
-  console.log("Rendering new context menu");
-  const menuContainer = document.createElement("div");
-  menuContainer.id = "context-menu";
-  document.body.appendChild(menuContainer);
-  const contextMenu = h(ContextMenu, {
-  	menuItems,
-  	cursorX: e.clientX,
-  	cursorY: e.clientY 
-  });
-  render(contextMenu, menuContainer);
-  console.log("Rendered");
-}
diff --git a/utils/editMessage.ts b/utils/editMessage.ts
index 5cc3ce8..d8ad005 100644
--- a/utils/editMessage.ts
+++ b/utils/editMessage.ts
@@ -1,9 +1,12 @@
 import type { MessageProps } from "~/types/props";
 
+const { fetchMe } = useApi()
+
 export default async (element: HTMLDivElement, props: MessageProps) => {
 	console.log("message:", element);
-	const me = await fetchWithApi("/me") as any;
-	if (props.author?.uuid == me.uuid) {
+	const me = await fetchMe();
+
+	if (me && props.author?.uuid == me.uuid) {
 		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
 		text.contentEditable = "true";
 		text.focus();
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
deleted file mode 100644
index 1cc8d43..0000000
--- a/utils/generateDefaultIcon.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export default (name: string, seed: string): string => {
-	const canvas = document.createElement("canvas");
-	const ctx = canvas.getContext("2d");
-	if (canvas && ctx) {
-		canvas.width = 256;
-		canvas.height = 256;
-
-		// get the first char from every word in the guild name
-		let previewName = "";
-		if (name.length > 3) {
-			let guildName: string[] = name.split(' ')
-			for (let i = 0; i < 3; i ++) {
-				if (guildName.length > i) {
-					previewName += guildName[i].charAt(0)
-				} else {
-					break
-				}
-			}
-		} else {
-			previewName = name
-		}
-
-		// fill background using seeded colour
-		ctx.fillStyle = generateIrcColor(seed, 50)
-		ctx.fillRect(0, 0, 256, 256)
-
-		ctx.fillStyle = 'white'
-		ctx.textAlign = 'center'
-		ctx.textBaseline = 'middle'
-		ctx.font = `bold 96px Arial, Helvetica, sans-serif`
-		// 136 isn't actually centered, but it *looks* centered
-		ctx.fillText(previewName, 128, 136)
-
-		return canvas.toDataURL("image/png");
-	}
-
-	return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
-}
\ No newline at end of file
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
deleted file mode 100644
index e712555..0000000
--- a/utils/getDisplayName.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
-
-export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
-	if (member?.nickname) return member.nickname
-	if (user.display_name) return user.display_name
-	return user.username
-}
\ No newline at end of file
diff --git a/utils/hasPermission.ts b/utils/hasPermission.ts
new file mode 100644
index 0000000..750716e
--- /dev/null
+++ b/utils/hasPermission.ts
@@ -0,0 +1,11 @@
+import type { Permission } from "~/types/enums";
+import type { GuildMemberResponse } from "~/types/interfaces";
+
+export default (member: GuildMemberResponse, permission: Permission) => {
+	for (const role of member.roles) {
+		if (role.permissions & permission) {
+			return true;
+		}
+	}
+	return false;
+}
diff --git a/utils/hashing.ts b/utils/hashPassword.ts
similarity index 84%
rename from utils/hashing.ts
rename to utils/hashPassword.ts
index 847a9dc..d87af14 100644
--- a/utils/hashing.ts
+++ b/utils/hashPassword.ts
@@ -1,4 +1,4 @@
-export async function hashPassword(password: string) {
+export default async (password: string) => {
   const encodedPass = new TextEncoder().encode(password);
   const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
diff --git a/utils/isCanvasBlocked.ts b/utils/isCanvasBlocked.ts
deleted file mode 100644
index 3bd191e..0000000
--- a/utils/isCanvasBlocked.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-//
-// Canvas Blocker &								  
-// Firefox privacy.resistFingerprinting Detector. 
-// (c) 2018 // JOHN OZBAY // CRYPT.EE 			  
-// MIT License
-//
-export default () => {
-	// create a 1px image data
-	var blocked = false;
-	var canvas = document.createElement("canvas");
-	var ctx = canvas.getContext("2d");
-	
-	// some blockers just return an undefined ctx. So let's check that first. 
-	if (ctx) {
-		var imageData = ctx.createImageData(1,1);
-		var originalImageData  = imageData.data;
-
-		// set pixels to RGB 128
-		originalImageData[0]=128; 
-		originalImageData[1]=128; 
-		originalImageData[2]=128; 
-		originalImageData[3]=255;
-		
-		// set this to canvas
-		ctx.putImageData(imageData,1,1); 
-		
-		try {
-			// now get the data back from canvas.
-			var checkData = ctx.getImageData(1, 1, 1, 1).data;
-
-			// If this is firefox, and privacy.resistFingerprinting is enabled,
-			// OR a browser extension blocking the canvas, 
-			// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
-
-			// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
-			if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
-				blocked = true;
-				console.log("Canvas is blocked. Will display warning.");
-			}
-		} catch (error) {
-			// some extensions will return getImageData null. this is to account for that.
-			blocked = true;
-			console.log("Canvas is blocked. Will display warning.");
-		}
-	} else {
-		blocked = true;
-		console.log("Canvas is blocked. Will display warning.");
-	}
-	return blocked;
-}
\ No newline at end of file
diff --git a/utils/loadPreferredThemes.ts b/utils/loadPreferredThemes.ts
new file mode 100644
index 0000000..00a4d1b
--- /dev/null
+++ b/utils/loadPreferredThemes.ts
@@ -0,0 +1,52 @@
+let styleLinkElement: HTMLLinkElement | null;
+let layoutLinkElement: HTMLLinkElement | null;
+
+
+export default () => {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+  
+  let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
+  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
+
+  if (!currentStyle) {
+    if (prefersLight()) {
+      currentStyle = `${baseURL}themes/style/light.css`
+    } else {
+      currentStyle = `${baseURL}themes/style/dark.css`
+    }
+  }
+
+  if (styleLinkElement) {
+    styleLinkElement.href = currentStyle;
+  } else {
+    createStyleHead("style-theme", currentStyle)
+    styleLinkElement = document.getElementById('style-theme') as HTMLLinkElement;
+  }
+
+  if (layoutLinkElement) {
+    layoutLinkElement.href = currentLayout;
+  } else {
+    createStyleHead("style-layout", currentLayout)
+    layoutLinkElement = document.getElementById('style-layout') as HTMLLinkElement;
+  }
+}
+
+// create a new theme link if one doesn't already exist
+function createStyleHead(id: string, themeUrl: string) {
+  useHead({
+    link: [{
+      id: id,
+      rel: "stylesheet",
+      href: themeUrl
+    }]
+  })
+}
+
+function prefersLight(): boolean {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return true
+  }
+
+  return false
+}
\ No newline at end of file
diff --git a/utils/removeContextMenu.ts b/utils/removeContextMenu.ts
index 3b42c8b..7e10737 100644
--- a/utils/removeContextMenu.ts
+++ b/utils/removeContextMenu.ts
@@ -1,6 +1,12 @@
-export default () => {
-	const contextMenu = document.getElementById("context-menu");
-	if (contextMenu) {
-		contextMenu.remove();
+import type { ContextMenuInterface } from "~/types/interfaces";
+
+export default (contextMenu: Ref<ContextMenuInterface>) => {
+	console.log("resetting and hiding context menu");
+	contextMenu.value = {
+		show: false,
+		pointerX: 0,
+		pointerY: 0,
+		items: []
 	}
+	console.log("hidden context menu");
 }
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 8ee0c28..83f4eda 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -2,6 +2,8 @@ import { render } from "vue";
 import MessageReply from "~/components/UserInterface/MessageReply.vue";
 import type { MessageProps } from "~/types/props";
 
+const { getDisplayName } = useProfile()
+
 export default (element: HTMLDivElement, props: MessageProps) => {
 	console.log("element:", element);
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
@@ -10,5 +12,9 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", 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}']`);
+		if (message) {
+			message.classList.add("replying-to");
+		}
 	}
 }
diff --git a/utils/showContextMenu.ts b/utils/showContextMenu.ts
new file mode 100644
index 0000000..fdf5243
--- /dev/null
+++ b/utils/showContextMenu.ts
@@ -0,0 +1,12 @@
+import { render } from "vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
+  console.log("Showing context menu");
+  contextMenu.show = true;
+  contextMenu.pointerX = e.clientX;
+  contextMenu.pointerY = e.clientY;
+  contextMenu.items = menuItems;
+  console.log("Showed");
+}
diff --git a/utils/sortMembers.ts b/utils/sortMembers.ts
new file mode 100644
index 0000000..b232763
--- /dev/null
+++ b/utils/sortMembers.ts
@@ -0,0 +1,8 @@
+import type { GuildMemberResponse } from "~/types/interfaces";
+const { getDisplayName } = useProfile()
+
+export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
+	return members.sort((a, b) => {
+		return getDisplayName(a).localeCompare(getDisplayName(b))
+	})
+}
\ No newline at end of file
diff --git a/utils/sortUsers.ts b/utils/sortUsers.ts
new file mode 100644
index 0000000..83f5713
--- /dev/null
+++ b/utils/sortUsers.ts
@@ -0,0 +1,8 @@
+import type { UserResponse } from "~/types/interfaces";
+const { getDisplayName } = useProfile()
+
+export default (users: UserResponse[]): UserResponse[] => {
+	return users.sort((a, b) => {
+		return getDisplayName(a).localeCompare(getDisplayName(b))
+	})
+}
\ No newline at end of file
diff --git a/utils/uuidToDate.ts b/utils/uuidToDate.ts
new file mode 100644
index 0000000..f0ab6f3
--- /dev/null
+++ b/utils/uuidToDate.ts
@@ -0,0 +1,6 @@
+export default (uuid: string): Date => {
+  const timeHex = uuid.substring(0, 8) + uuid.substring(9, 13);
+  const timestamp = parseInt(timeHex, 16);
+
+  return new Date(timestamp);
+}
\ No newline at end of file
diff --git a/utils/validateUsername.ts b/utils/validateUsername.ts
new file mode 100644
index 0000000..9066df5
--- /dev/null
+++ b/utils/validateUsername.ts
@@ -0,0 +1,3 @@
+export default (username: string) => {
+  return /^[\w.-]+$/.test(username);
+}
\ No newline at end of file
diff --git a/utils/validation.ts b/utils/validation.ts
deleted file mode 100644
index 48e13ef..0000000
--- a/utils/validation.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function validateUsername(username: string) {
-  return /^[\w.-]+$/.test(username);
-}
\ No newline at end of file