diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index e62bd74..98c7614 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -8,6 +8,7 @@ steps:
       - pnpm build
     when:
     - event: push
+    - event: pull_request
 
   - name: container-build-and-publish
     image: docker
@@ -22,17 +23,3 @@ steps:
     when:
     - branch: main
       event: push
-
-  - name: container-build-and-publish (staging)
-    image: docker
-    commands:
-      - docker login --username radical --password $PASSWORD git.gorb.app
-      - docker buildx build --platform linux/amd64,linux/arm64 --rm --push -t git.gorb.app/gorb/frontend:staging .
-    environment:
-      PASSWORD:
-        from_secret: docker_password
-    volumes:
-      - /var/run/podman/podman.sock:/var/run/docker.sock
-    when:
-    - branch: staging
-      event: push
diff --git a/app.vue b/app.vue
index 8ca7948..c6db309 100644
--- a/app.vue
+++ b/app.vue
@@ -1,21 +1,19 @@
 <template>
-	<div>
-		<Banner v-if="banner" />
-		<NuxtPage :keepalive="true" />
-	</div>
+  <div>
+    <Banner v-if="banner" />
+    <NuxtPage :keepalive="true" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import loadPreferredTheme from '~/utils/loadPreferredTheme';
+import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
+import { render } from 'vue';
 
 const banner = useState("banner", () => false);
 
 onMounted(() => {
-	loadPreferredTheme()
-
 	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) => {
@@ -52,15 +50,21 @@ 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 {
-	background-color: #1f1e1d;
-}
-
+html,
 body {
-  font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);
diff --git a/components/Avatar.vue b/components/Avatar.vue
deleted file mode 100644
index ddfe1dc..0000000
--- a/components/Avatar.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-	<NuxtImg v-if="displayAvatar" 
-		class="display-avatar"
-		:src="displayAvatar"
-		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
-		:alt="displayName" />
-</template>
-
-<script lang="ts" setup>
-import { NuxtImg } from '#components';
-import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user?: UserResponse,
-	member?: GuildMemberResponse,
-}>();
-
-
-let displayName: string
-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
-	}
-}
-
-</script>
-
-<style scoped>
-.display-avatar {
-	border-radius: var(--pfp-radius);
-}
-</style>
diff --git a/components/Guild/ChannelEntry.vue b/components/Guild/ChannelEntry.vue
index 9d785db..98f210e 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" :title="props.name">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
 	<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" :title="props.name">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
@@ -25,8 +25,6 @@ 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/GuildOptionsMenu.vue b/components/Guild/GuildOptionsMenu.vue
index 7954c71..86fdaf4 100644
--- a/components/Guild/GuildOptionsMenu.vue
+++ b/components/Guild/GuildOptionsMenu.vue
@@ -4,20 +4,23 @@
       <button class="guild-option-button" @click="setting.action" tabindex="0">{{ setting.name }}</button>
     </div>
   </div>
-  <ModalInvite v-if="showInviteModal" :guild-id="guildId" />
 </template>
 
 <script lang="ts" setup>
+import { render } from 'vue';
+import InviteModal from '../Modals/InviteModal.vue';
 
 const settings = [
   { name: "Invite", icon: "lucide:letter", action: openInviteModal }
 ]
 
-const guildId = useRoute().params.serverId as string;
-const showInviteModal = ref(false);
-
 function openInviteModal() {
-  showInviteModal.value = true;
+  const div = document.createElement("div");
+  const guildId = useRoute().params.serverId as string;
+  console.log("guild id:", guildId);
+  const inviteModal = h(InviteModal, { guildId });
+  document.body.appendChild(div);
+  render(inviteModal, div);
 }
 
 </script>
diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index b06890b..cfe07fd 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -1,30 +1,27 @@
 <template>
-	<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 id="middle-left-column">
+		<div id="friend-sidebar">
+			<div>
+				<h3>Direct Messages</h3>
+			</div>
+			<VerticalSpacer />
+
+			<NuxtLink class="user-item" :href="`/me/friends`" 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" :name="user.display_name || user.username"
+						:href="`/me/${user.uuid}`"/> 
 			</div>
 		</div>
-	</ResizableSidebar>
+	</div>
 </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 0a1481e..44c606f 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -17,7 +17,7 @@
 		</div>
 
 		<div v-else>
-			<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
+			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
 			:href="`/me/${user.uuid}`"/> 
 		</div>
 	</div>
@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = sortUsers(await fetchFriends())
+const friends = await fetchFriends()
 
 const props = defineProps<{
     variant: string
diff --git a/components/Guild/MemberEntry.vue b/components/Member/MemberEntry.vue
similarity index 68%
rename from components/Guild/MemberEntry.vue
rename to components/Member/MemberEntry.vue
index 12e36a0..1ea4170 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Member/MemberEntry.vue
@@ -1,7 +1,8 @@
 <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>
+        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
+        <Icon v-else class="member-avatar" name="lucide:user" />
+        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
diff --git a/components/Message.vue b/components/Message.vue
index ed32c50..2bcdcfc 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -4,14 +4,22 @@
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
-				width="1.5em" height="1.5em"
-				viewBox="0 0 150 87.5" version="1.1" id="svg1"
+				width="1.5em"
+				height="1.5em"
+				viewBox="0 0 151.14355 87.562065"
+				version="1.1"
+				id="svg1"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:svg="http://www.w3.org/2000/svg"
 				style="overflow: visible;">
-				<defs id="defs1" />
-				<g id="layer1"
+				<defs
+					id="defs1" />
+				<g
+					id="layer1"
 					transform="translate(40,-35)">
-					<g id="g3"
-						transform="translate(-35,-20)">
+					<g
+					id="g3"
+					transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
 						d="m 120.02168,87.850978 100.76157,2.4e-5"
@@ -24,17 +32,16 @@
 				</g>
 			</svg>
 		</div>
-		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
-			:author="getDisplayName(props.replyMessage.user)"
-			:text="props.replyMessage?.message"
-			:reply-id="props.replyMessage.uuid" max-width="reply" />
+		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
+			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :user="props.author" class="message-author-avatar"/>
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
+			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ getDisplayName(props.author) }}
+				<span class="message-author-username" tabindex="0">
+					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -43,9 +50,8 @@
 					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" tabindex="0"></div>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
@@ -56,9 +62,8 @@
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -66,8 +71,6 @@
 import DOMPurify from 'dompurify';
 import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
-import MessageMedia from './MessageMedia.vue';
-import MessageReply from './UserInterface/MessageReply.vue';
 
 const props = defineProps<MessageProps>();
 
@@ -82,13 +85,6 @@ console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
 console.log("[MSG] reply message:", props.replyMessage);
 
-const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
-const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks: string[] = [];
-console.log("link matches:", linkMatches);
-
-const hasEmbed = ref(false);
-
 const sanitized = ref<string>();
 
 onMounted(async () => {
@@ -101,7 +97,7 @@ onMounted(async () => {
 		],
 		ALLOW_DATA_ATTR: false,
 		ALLOW_SELF_CLOSE_IN_ATTR: false,
-		ALLOWED_ATTR: ["href"]
+		ALLOWED_ATTR: []
 	});
 	console.log("adding listeners")
 	await nextTick();
@@ -115,27 +111,6 @@ onMounted(async () => {
 		});
 		console.log("added listeners");
 	}
-
-	for (const link of linkMatches) {
-	console.log("link:", link);
-	try {
-		const res = await $fetch.raw(link);
-		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-			console.log("link is image");
-			mediaLinks.push(link);
-		}
-		if (mediaLinks.length) {
-			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
-		};
-	} catch (error) {
-		console.error(error);
-	}
-}
-
-console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {
@@ -221,6 +196,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
+	border-radius: 50%;
 }
 
 .left-column {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 17b4a3e..d59b862 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,13 +1,12 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
+			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.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"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.user.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@@ -42,7 +41,6 @@
 <script lang="ts" setup>
 import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
-import { generateIrcColor } from '#imports';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
@@ -253,8 +251,6 @@ onMounted(async () => {
 	if (import.meta.server) return;
 	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
-		await nextTick();
-		await nextTick();
 		scrollToBottom(messagesElement.value);
 		let fetched = false;
 		const amount = messages.value.length;
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
deleted file mode 100644
index ab62387..0000000
--- a/components/MessageMedia.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-	<div class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ModalBase } from '#components';
-import { render } from 'vue';
-
-
-const props = defineProps<{ links: string[] }>();
-
-function createModal(link: string) {
-	const div = document.createElement("div");
-	const modal = h(ModalBase, {
-		obscure: true,
-		onClose: () => unrender(div),
-		onCancel: () => unrender(div),
-	},
-	[
-		h("img", {
-			src: link,
-			class: "default-contextmenu"
-		})
-	]);
-	
-	document.body.appendChild(div);
-	render(modal, div);
-}
-
-</script>
-
-<style scoped>
-
-.media-container {
-	grid-column: 2;
-	grid-row: 3;
-	margin-left: .5dvw;
-}
-
-.media-item {
-	cursor: pointer;
-	max-width: 15dvw;
-}
-
-</style>
\ No newline at end of file
diff --git a/components/Modal/Invite.vue b/components/Modals/InviteModal.vue
similarity index 95%
rename from components/Modal/Invite.vue
rename to components/Modals/InviteModal.vue
index 232114c..9c26bc2 100644
--- a/components/Modal/Invite.vue
+++ b/components/Modals/InviteModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
+	<Modal v-bind="props" :title="props.title || 'Create an invite'">
 		<div v-if="invite" id="invite-body">
 			<div id="invite-label">{{ invite }}</div>
 			<div id="invite-buttons">
@@ -10,7 +10,7 @@
 		<div v-else>
 			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
 		</div>
-	</ModalBase>
+	</Modal>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/Modal/Base.vue b/components/Modals/Modal.vue
similarity index 100%
rename from components/Modal/Base.vue
rename to components/Modals/Modal.vue
diff --git a/components/Popups/CropPopup.vue b/components/Popups/CropPopup.vue
index 3a9586c..12c3a0b 100644
--- a/components/Popups/CropPopup.vue
+++ b/components/Popups/CropPopup.vue
@@ -10,7 +10,6 @@
 
 <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 579ccdd..b81929f 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -32,13 +32,13 @@
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
-import loadPreferredTheme from '~/utils/loadPreferredTheme';
 import settingSave from '~/utils/settingSave';
 
 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 themes: Array<Theme> = []
 
@@ -51,8 +51,20 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
+    return;
+  }
+
   settingSave("selectedThemeId", id)
-  loadPreferredTheme()
+
+  // 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);
+  }
+
+  themeLinkElement.href = `${baseURL}themes/${url}`;
 }
 
 async function fetchThemes() {
diff --git a/components/Settings/AppSettings/index.ts b/components/Settings/AppSettings/index.ts
deleted file mode 100644
index 27890a5..0000000
--- a/components/Settings/AppSettings/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Appearance from './Appearance.vue';
-import Notifications from './Notifications.vue';
-import Keybinds from './Keybinds.vue';
-import Language from './Language.vue';
-
-export {
-	Appearance,
-	Notifications,
-	Keybinds,
-	Language,
-}
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Devices.vue b/components/Settings/UserSettings/Devices.vue
index 7006a12..ee471ba 100644
--- a/components/Settings/UserSettings/Devices.vue
+++ b/components/Settings/UserSettings/Devices.vue
@@ -1,12 +1,73 @@
 <template>
   <div>
-    <h1>Devices (TBA)</h1>
+    <h1>Devices</h1>
+    <div id="devices-container">
+      <div class="device-entry" v-for="device in devices">
+			  <Icon name="lucide:smartphone" class="device-icon" />
+        <div class="device-text">
+          <span class="device-title">
+            {{ device.device_name }}
+          </span>
+          <span class="device-subtitle">
+            Generated at
+            {{ device.created_at_date.toLocaleDateString(undefined) }}
+            {{ device.created_at_date.toLocaleTimeString(undefined, {hour12: timeFormat == "12", timeStyle: "short" }) }}
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+interface Device {
+  device_name: string
+  created_at: number
+  created_at_date: Date
+}
+
+const devices: Device[] | undefined = await fetchWithApi("/auth/devices")
+const timeFormat = getPreferredTimeFormat()
+
+if (devices != undefined) {
+  for (let i = 0; i < devices.length; i++) {
+    devices[i].created_at_date = new Date(devices[i].created_at * 1000)
+  }
+}
 </script>
 
 <style scoped>
+#devices-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
 
+.device-entry {
+  display: flex;
+  align-items: center;
+  background-color: var(--chat-highlighted-background-color);
+  padding: .25em;
+  border-radius: .5em;
+}
+
+.device-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.device-icon {
+  width: 3em;
+  height: 3em;
+}
+
+.device-title {
+  font-weight: 600;
+  font-size: 1em;
+}
+
+.device-subtitle {
+  font-weight: 100;
+  font-size: .8em;
+}
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 5e85095..99880fa 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,7 +33,6 @@
 </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';
 
@@ -42,7 +41,7 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
-
+;
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()
diff --git a/components/Settings/UserSettings/index.ts b/components/Settings/UserSettings/index.ts
deleted file mode 100644
index b2129e0..0000000
--- a/components/Settings/UserSettings/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Profile from './Profile.vue';
-import Account from './Account.vue';
-import Privacy from './Privacy.vue';
-import Devices from './Devices.vue';
-import Connections from './Connections.vue';
-
-export {
-	Profile,
-	Account,
-	Privacy,
-	Devices,
-	Connections,
-}
\ No newline at end of file
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index 5abea85..b463759 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -1,8 +1,8 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <Avatar :user="props.user" class="user-avatar"/>
-
-        <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
+        <img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
+        <Icon v-else class="user-avatar" name="lucide:user" />
+        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
 	</NuxtLink>
 </template>
 
@@ -12,7 +12,6 @@ import type { UserResponse } from '~/types/interfaces';
 const props = defineProps<{
     user: UserResponse
 }>();
-
 </script>
 
 <style>
@@ -34,15 +33,8 @@ const props = defineProps<{
 }
 
 .user-avatar {
-    min-width: 2.3em;
-    max-width: 2.3em;
-    min-width: 2.3em;
-    max-height: 2.3em;
-}
-
-.user-display-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    width: 2.3em;
+    height: 2.3em;
+    border-radius: 50%;
 }
 </style>
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 6674c9e..a3a15cb 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -1,11 +1,12 @@
 <template>
   <div id="profile-popup">
-    <Avatar :user="props.user" id="avatar"/>
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <Icon v-else id="avatar" name="lucide:user" />
 
     <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
-        <strong>{{ getDisplayName(props.user) }}</strong>
+        <strong>{{ props.user.display_name }}</strong>
       </p>
       <p id="username-and-pronouns">
         {{ props.user.username }}
@@ -21,6 +22,8 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
+const { fetchMembers } = useApi();
+
 const props = defineProps<{
 	user: UserResponse
 }>();
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 467b65e..66706de 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,14 +1,14 @@
 <template>
-	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
+	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
 		{{ props.text }}
-	</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
 
 const props = defineProps<{
 	text: string,
-	callback?: CallableFunction,
+	callback: CallableFunction,
 	variant?: "normal" | "scary" | "neutral",
 }>();
 
@@ -28,8 +28,6 @@ const props = defineProps<{
 	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
-
-	border: none;
 }
 
 .button:hover {
diff --git a/components/UserInterface/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index 5342b8c..1388bbd 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -7,13 +7,13 @@
 <script lang="ts" setup>
 import type { ContextMenuItem } from '~/types/interfaces';
 
-const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
+const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
 
 onMounted(() => {
 	const contextMenu = document.getElementById("context-menu");
 	if (contextMenu) {
-		contextMenu.style.left = props.pointerX.toString() + "px";
-		contextMenu.style.top = props.pointerY.toString() + "px";
+		contextMenu.style.left = props.cursorX.toString() + "px";
+		contextMenu.style.top = props.cursorY.toString() + "px";
 	}
 });
 
diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
deleted file mode 100644
index 3017dbc..0000000
--- a/components/UserInterface/ResizableSidebar.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-	<div ref="resizableSidebar" class="resizable-sidebar"
-			:style="{
-				'width': storedWidth ? `${storedWidth}px` : 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 { 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<number>();
-
-const menuItems: ContextMenuItem[] = [
-	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
-]
-
-onMounted(() => {
-	loadStoredWidth();
-
-	if (resizableSidebar.value && widthResizer.value) {
-		widthResizer.value.addEventListener("pointerdown", (e) => {
-			e.preventDefault();
-			if (e.button == 2) {
-				createContextMenu(e, 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 = parseInt(storedWidthValue) || undefined;
-			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/composables/api.ts b/composables/api.ts
index 75a3811..0b438a6 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,36 +1,24 @@
 import type { ChannelResponse, GuildMemberResponse, 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[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds`));
+	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
+		return await fetchWithApi(`/guilds`);
 	}
 	
 	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}`);
 	}
 
-	async function fetchMyGuilds(): Promise<GuildResponse[]> {
-		return ensureIsArray(await fetchWithApi(`/me/guilds`));
-	}
-
-	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
+		return 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[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
+	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}/members`);
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
@@ -45,8 +33,8 @@ export const useApi = () => {
 		return await fetchWithApi(`/users/${userId}`);
 	}
 	
-	async function fetchFriends(): Promise<UserResponse[]> {
-		return ensureIsArray(await fetchWithApi('/me/friends'));
+	async function fetchFriends(): Promise<UserResponse[] | undefined> {
+		return await fetchWithApi('/me/friends')
 	}
 
 	async function addFriend(username: string): Promise<void> {
@@ -86,22 +74,9 @@ export const useApi = () => {
 		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
 	}
 
-	async function sendPasswordResetEmail(identifier: string): Promise<void> {
-		await fetchWithApi("/auth/reset-password", { method: "GET", query: { identifier } });
-	}
-
-	async function resetPassword(password: string, token: string) {
-		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,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
@@ -117,9 +92,6 @@ export const useApi = () => {
 		joinGuild,
 		createChannel,
 		fetchInstanceStats,
-		sendVerificationEmail,
-		sendPasswordResetEmail,
-		resetPassword,
-		fetchInvite
+		sendVerificationEmail
 	}
 }
diff --git a/composables/auth.ts b/composables/auth.ts
index 6cb3c41..bceecb3 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: "DELETE", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
     clearAuth();
 
 	  return await navigateTo("/login");
diff --git a/layouts/auth.vue b/layouts/auth.vue
index 7d21f00..95eca49 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -18,7 +18,6 @@
 			</div>
 			<div v-else id="auth-form-container">
 				<slot />
-				<div v-if="!['/recover', '/reset-password'].includes(route.path)">Forgot password? Recover <NuxtLink href="/recover">here</NuxtLink>!</div>
 			</div>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -37,11 +36,7 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
 const registrationEnabled = useState("registrationEnabled", () => true);
 
-const route = useRoute();
-
-const query = route.query as Record<string, string>;
-const searchParams = new URLSearchParams(query);
-searchParams.delete("token");
+const auth = useAuth();
 
 onMounted(async () => {
 	instanceUrl.value = useCookie("instance_url").value;
@@ -116,7 +111,6 @@ const form = reactive({
 #auth-form-container form {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
 	text-align: left;
 	margin-top: 10dvh;
 	gap: 1em;
diff --git a/layouts/client.vue b/layouts/client.vue
index 48a7f66..b609c2c 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -8,39 +8,27 @@
 				</marquee>
 			</div>
 		</div>
-		<div id="page-content">
+		<div id = "page-content">
 			<div id="left-column">
-				<div class="left-column-segment">
+				<div id="left-column-top">
 					<NuxtLink id="home-button" href="/me">
 						<img class="sidebar-icon" src="/public/icon.svg"/>
 					</NuxtLink>
+					<div id="servers-list">
+						<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+							<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+							<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+						</NuxtLink>
+					</div>
 				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<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"
-							: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" />
-					</NuxtLink>
-				</div>
-				<VerticalSpacer />
-				<div class="left-column-segment">
+				<div id="left-column-bottom">
 					<div ref="createButtonContainer">
-						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
-							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
+						<button id="create-button" @click.prevent="createDropdown">
+							<Icon id="create-icon" name="lucide:square-plus" />
 						</button>
 					</div>
-					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
-						<Icon name="lucide:settings" alt="Settings menu" />
+					<NuxtLink id="settings-menu" href="/settings">
+						<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
 					</NuxtLink>
 				</div>
 			</div>
@@ -50,11 +38,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ModalBase } from '#components';
 import { render } from 'vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import Modal from '~/components/Modals/Modal.vue';
 import Button from '~/components/UserInterface/Button.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
 const loading = useState("loading", () => false);
@@ -63,13 +50,11 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
-const blockedCanvas = isCanvasBlocked()
-
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
 			const div = document.createElement("div");
-			const guildJoinModal = h(ModalBase, {
+			const guildJoinModal = h(Modal, {
 				title: "Join Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -95,7 +80,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}`);
@@ -112,7 +97,7 @@ const options = [
 			console.log("create guild");
 			const user = await useAuth().getUser();
 			const div = document.createElement("div");
-			const guildCreateModal = h(ModalBase, {
+			const guildCreateModal = h(Modal, {
 				title: "Create a Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -127,7 +112,7 @@ const options = [
 				h("input", {
 					id: "guild-name-input",
 					type: "text",
-					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
+					placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`,
 					style: "width: 100%"
 				}),
 				h(Button, {
@@ -151,7 +136,48 @@ const options = [
 	}
 ];
 
-const guilds = await api.fetchMyGuilds();
+const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+
+//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
+//console.log("servers:", servers);
+const members = [
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
+];
 
 function createDropdown() {
 	const dropdown = h(GuildDropdown, { options });
@@ -217,59 +243,92 @@ function createDropdown() {
 #left-column {
 	display: flex;
 	flex-direction: column;
-
-	padding-left: var(--sidebar-margin);
-	padding-right: var(--sidebar-margin);
+	justify-content: space-between;
+	align-items: center;
+	gap: .75em;
+	padding-left: .25em;
+	padding-right: .25em;
 	padding-top: .5em;
-	
+	border-right: 1px solid var(--padding-color);
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
+}
 
+#left-column-top, #left-column-bottom {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 1.5dvh;
+	overflow-y: scroll;
+}
+
+#left-column-bottom {
+	padding-top: 1dvh;
+	border-top: 1px solid var(--padding-color);
+}
+
+#middle-left-column {
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
 }
 
-.left-column-segment {
+#home-button {
+	border-bottom: 1px solid var(--padding-color);
+	padding-bottom: 1dvh;
+}
+
+#servers-list {
 	display: flex;
 	flex-direction: column;
-
-	scrollbar-width: none;
+	gap: 1em;
+	width: 3.2rem;	
+	padding-top: .5em;
 }
 
-.left-column-segment::-webkit-scrollbar {
-	display: none;
-}
-
-#left-column-middle {
-	overflow-y: scroll;
-	flex-grow: 1;
-	gap: var(--sidebar-icon-gap);
-}
-
-#home-button {
-	height: var(--sidebar-icon-width);
-}
-
-.guild-icon {
-	border-radius: var(--guild-icon-radius);
-}
-
-.sidebar-icon {
-	width: var(--sidebar-icon-width);
-	height: var(--sidebar-icon-width);
-}
-
-.sidebar-bottom-buttons {
+#create-button {
 	color: var(--primary-color);
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
-	font-size: 2.4rem;
+	font-size: 2rem;
 	padding: 0;
 	display: inline-block;
 }
 
-.sidebar-bottom-buttons:hover {
-	color: var(--primary-highlighted-color);
+#create-icon {
+	float: left;
 }
 
-</style>
+#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;
+}
+
+.sidebar-icon {
+	width: 3rem;
+	height: 3rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+#home-button {
+	border-bottom: 1px solid var(--padding-color);
+	padding-bottom: .375em;
+}
+
+#settings-menu {
+	color: var(--primary-color)
+}
+
+#settings-menu:hover {
+	color: var(--primary-highlighted-color)
+}
+
+</style>
\ No newline at end of file
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index e6d5128..c0da664 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register", "/recover", "/reset-password"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);
diff --git a/middleware/server.ts b/middleware/server.ts
index 48bd6a2..9f575b0 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[] = await fetchChannels(guildId);
+	const channels: ChannelResponse[] | undefined = await fetchChannels(guildId);
 	console.log("channels:", channels);
 
-	if (channels.length > 0) {
+	if (channels && channels.length > 0) {
 		console.log("wah");
 		return await navigateTo(`/servers/${guildId}/channels/${channels[0].uuid}`, { replace: true });
 	}
diff --git a/package.json b/package.json
index 42347b1..5d7d19e 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,7 @@
     "pinia-plugin-persistedstate": "^4.2.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1",
-    "xxhash-wasm": "^1.1.0"
+    "vue-router": "^4.5.1"
   },
   "packageManager": "pnpm@10.11.0",
   "license": "MIT",
diff --git a/pages/invite/[inviteId].vue b/pages/invite/[inviteId].vue
deleted file mode 100644
index ff4166e..0000000
--- a/pages/invite/[inviteId].vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<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/login.vue b/pages/login.vue
index 8aba29b..03078c3 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -22,6 +22,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { StatsResponse } from '~/types/interfaces';
+
 
 definePageMeta({
 	layout: "auth"
@@ -36,7 +38,6 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
-searchParams.delete("token");
 
 const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
@@ -49,7 +50,7 @@ if (apiBase.value) {
 	}
 }
 
-const registerUrl = `/register?${searchParams}`;
+const registerUrl = `/register?${searchParams}`
 
 const { login } = useAuth();
 
diff --git a/pages/me/friends.vue b/pages/me/friends.vue
new file mode 100644
index 0000000..a0d0384
--- /dev/null
+++ b/pages/me/friends.vue
@@ -0,0 +1,56 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+	<div :id="$style['page-content']">
+		<div :id="$style['navigation-bar']">
+			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
+			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
+			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
+			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
+		</div>
+		
+		<div>
+			<AddFriend v-if="filter == 'add'"></AddFriend>
+			<FriendsList v-else :variant="filter"></FriendsList>
+		</div>
+
+	</div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import AddFriend from '~/components/Me/AddFriend.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
+
+const { fetchFriends } = useApi();
+
+let filter = ref("all");
+
+const friends = await fetchFriends()
+
+function updateFilter(newFilter: string) {
+	filter.value = newFilter;
+}
+</script>
+
+<style module>
+#page-content {
+	display: flex;
+	flex-direction: column;
+	
+	flex-grow: 1;
+
+	margin: .75em;
+}
+
+#navigation-bar {
+	display: flex;
+	align-items: left;
+	text-align: left;
+	flex-direction: row;
+
+	gap: .5em;
+}
+</style>
\ No newline at end of file
diff --git a/pages/me/index.vue b/pages/me/index.vue
index a0d0384..e875c56 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -1,56 +1,13 @@
 <template>
   <NuxtLayout name="client">
 	<DirectMessagesSidebar />
-	<div :id="$style['page-content']">
-		<div :id="$style['navigation-bar']">
-			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
-			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
-			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
-			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
-		</div>
-		
-		<div>
-			<AddFriend v-if="filter == 'add'"></AddFriend>
-			<FriendsList v-else :variant="filter"></FriendsList>
-		</div>
-
-	</div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-import Button from '~/components/UserInterface/Button.vue';
-import AddFriend from '~/components/Me/AddFriend.vue';
-import FriendsList from '~/components/Me/FriendsList.vue';
-
-const { fetchFriends } = useApi();
-
-let filter = ref("all");
-
-const friends = await fetchFriends()
-
-function updateFilter(newFilter: string) {
-	filter.value = newFilter;
-}
 </script>
 
-<style module>
-#page-content {
-	display: flex;
-	flex-direction: column;
-	
-	flex-grow: 1;
+<style>
 
-	margin: .75em;
-}
-
-#navigation-bar {
-	display: flex;
-	align-items: left;
-	text-align: left;
-	flex-direction: row;
-
-	gap: .5em;
-}
 </style>
\ No newline at end of file
diff --git a/pages/recover.vue b/pages/recover.vue
deleted file mode 100644
index 71ce217..0000000
--- a/pages/recover.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <NuxtLayout name="auth">
-    <div v-if="errorValue">{{ errorValue }}</div>
-      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
-        <div>
-          <label for="identifier">Email or username</label>
-            <br>
-          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
-        </div>
-        <div>
-          <Button type="submit" text="Send email" variant="normal" />
-        </div>
-      </form>
-      <div v-else>
-        If an account with that username or email exists, an email will be sent to it shortly.
-      </div>
-    <div v-if="registrationEnabled">
-      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
-    </div>
-    <div>
-      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
-    </div>
-  </NuxtLayout>
-</template>
-
-<script lang="ts" setup>
-import Button from '~/components/UserInterface/Button.vue';
-
-const emailForm = reactive({
-  identifier: ""
-});
-
-const emailFormSent = ref(false);
-
-const passwordForm = reactive({
-  password: ""
-});
-
-const errorValue = ref<string>();
-
-const registrationEnabled = ref<boolean>(true);
-const apiBase = useCookie("api_base");
-
-const query = useRoute().query as Record<string, string>;
-const searchParams = new URLSearchParams(query);
-
-const token = ref(searchParams.get("token"))
-searchParams.delete("token");
-const { resetPassword } = useApi();
-
-const registerUrl = `/register?${searchParams}`;
-const loginUrl = `/login?${searchParams}`;
-
-if (apiBase.value) {
-	console.log("apiBase:", apiBase.value);
-	const stats = await useApi().fetchInstanceStats(apiBase.value);
-	if (stats) {
-		registrationEnabled.value = stats.registration_enabled;
-	}
-}
-
-const { sendPasswordResetEmail } = useApi();
-
-async function sendEmail() {
-  try {
-    await sendPasswordResetEmail(emailForm.identifier);
-    emailFormSent.value = true;
-  } catch (error) {
-    errorValue.value = (error as any).toString();
-  }
-}
-
-async function sendPassword() {
-  try {
-    console.log("pass:", passwordForm.password);
-    const hashedPass = await hashPassword(passwordForm.password)
-    console.log("hashed pass:", hashedPass);
-    await resetPassword(hashedPass, token.value!);
-    return await navigateTo(`/login?${searchParams}`);
-  } catch (error) {
-    errorValue.value = (error as any).toString();
-  }
-}
-
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/pages/register.vue b/pages/register.vue
index 36bdb53..708fed0 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -86,7 +86,6 @@ const auth = useAuth();
 const loggedIn = ref(await auth.getUser());
 
 const query = new URLSearchParams(useRoute().query as Record<string, string>);
-query.delete("token");
 
 const user = await useAuth().getUser();
 
diff --git a/pages/reset-password.vue b/pages/reset-password.vue
deleted file mode 100644
index 8f869c4..0000000
--- a/pages/reset-password.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <NuxtLayout name="auth">
-    <div v-if="errorValue">{{ errorValue }}</div>
-    <form @submit.prevent="sendPassword">
-      <div>
-        <label for="password">Password</label>
-        <br>
-        <input type="password" name="password" id="password" v-model="passwordForm.password">
-      </div>
-      <div>
-        <Button type="submit" text="Submit" variant="normal" />
-      </div>
-    </form>
-	<div>
-	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
-    </div>
-  </NuxtLayout>
-</template>
-
-<script lang="ts" setup>
-import Button from '~/components/UserInterface/Button.vue';
-
-const query = useRoute().query as Record<string, string>;
-const searchParams = new URLSearchParams(query);
-
-const loginUrl = `/login?${searchParams}`;
-
-const token = ref(searchParams.get("token"))
-
-if (!token.value) await navigateTo("/login");
-
-const passwordForm = reactive({
-  password: ""
-});
-
-const errorValue = ref<string>();
-
-const { resetPassword } = useApi();
-
-async function sendPassword() {
-  try {
-    console.log("pass:", passwordForm.password);
-    const hashedPass = await hashPassword(passwordForm.password)
-    console.log("hashed pass:", hashedPass);
-    await resetPassword(hashedPass, token.value!);
-    return await navigateTo("/login?");
-  } catch (error) {
-    errorValue.value = (error as any).toString();
-  }
-}
-
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 00d4ebe..d9f6d97 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,42 +1,33 @@
 <template>
 	<NuxtLayout name="client">
-		<ResizableSidebar
-				width="14rem" min-width="8rem" max-width="30rem"
-				border-sides="right" local-storage-name="middleLeftColumn">
-			<div id="middle-left-column" class="main-grid-row">
-				<div id="server-name-container">
-					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
-					<button id="server-settings-button" @click="toggleGuildSettings">
-						<Icon id="server-settings-icon" name="lucide:chevron-down" />
-					</button>
-					<GuildOptionsMenu v-if="showGuildSettings" />
-				</div>
-				<div id="channels-list">
-					<ChannelEntry v-for="channel of channels" :name="channel.name"
-						:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-						:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
-				</div>
+		<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" />
 			</div>
-		</ResizableSidebar>
+			<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>
 		<MessageArea :channel-url="channelUrlPath" />
-		<ResizableSidebar
-				width="14rem" min-width="5.5rem" max-width="30rem"
-				border-sides="left" local-storage-name="membersListWidth">
-			<div id="members-container">
-				<div id="members-list">
-					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
-				</div>
+		<div id="members-container">
+			<div id="members-list">
+				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 			</div>
-		</ResizableSidebar>
+		</div>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
-import MemberEntry from "~/components/Guild/MemberEntry.vue";
-import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
+import MemberEntry from "~/components/Member/MemberEntry.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -62,22 +53,18 @@ 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 = sortMembers(await fetchMembers(route.params.serverId as string))
+	members.value = await fetchMembers(route.params.serverId as string);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
@@ -100,7 +87,18 @@ 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);
 }
 
@@ -130,14 +128,12 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	gap: .5em;
-	text-overflow: ellipsis;
 }
 
 .member-avatar {
-    min-width: 2.3em;
-    max-width: 2.3em;
-    min-width: 2.3em;
-    max-height: 2.3em;
+	height: 2.3em;
+	width: 2.3em;
+	border-radius: 50%;
 }
 
 .member-display-name {
@@ -155,8 +151,6 @@ function handleMemberClick(member: GuildMemberResponse) {
 
 #server-name {
 	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
 }
 
 #server-settings-button {
diff --git a/pages/settings.vue b/pages/settings.vue
index ae9745a..8b270bc 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -46,13 +46,9 @@
 
 
 <script lang="ts" setup>
-import { Profile, Account, Privacy, Devices, Connections } from '~/components/Settings/UserSettings';
-import { Appearance, Notifications, Keybinds, Language } from '~/components/Settings/AppSettings';
-
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
-
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 
@@ -66,6 +62,17 @@ interface Category {
   pages: Page[];
 }
 
+import Profile from '~/components/Settings/UserSettings/Profile.vue';
+import Account from '~/components/Settings/UserSettings/Account.vue';
+import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
+import Devices from '~/components/Settings/UserSettings/Devices.vue';
+import Connections from '~/components/Settings/UserSettings/Connections.vue';
+
+import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
+import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
+import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
+import Language from '~/components/Settings/AppSettings/Language.vue';
+
 const settingsCategories = {
   userSettings: {
     displayName: "User Settings",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b461e5..6a8cf2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,9 +47,6 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
-      xxhash-wasm:
-        specifier: ^1.1.0
-        version: 1.1.0
     devDependencies:
       '@iconify-json/lucide':
         specifier: ^1.2.44
@@ -4747,9 +4744,6 @@ packages:
     engines: {node: '>= 0.10.0'}
     hasBin: true
 
-  xxhash-wasm@1.1.0:
-    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
-
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -10152,8 +10146,6 @@ snapshots:
       cssfilter: 0.0.10
     optional: true
 
-  xxhash-wasm@1.1.0: {}
-
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
diff --git a/public/themes/ash.css b/public/themes/ash.css
index 94f5e85..63aaa53 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -11,18 +11,11 @@
 	--chatbox-background-color: #3a3733;
 
     --padding-color: #e0e0e0;
-
+    
 	--primary-color: #f07028;
 	--primary-highlighted-color: #f28f4b;
 	--secondary-color: #683820;
 	--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/dark.css
index a228889..3673d4c 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -18,14 +18,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/description.css
index e30025f..209fb36 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -20,12 +20,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/light.css
index 556b64d..fdd4756 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -18,10 +18,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/rainbow-capitalism.css
index ca73e1f..0e146d9 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -19,12 +19,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/types/hooks.ts b/types/hooks.ts
index a484bf4..73a7894 100644
--- a/types/hooks.ts
+++ b/types/hooks.ts
@@ -1,3 +1,5 @@
+import type { RuntimeNuxtHooks } from 'nuxt/schema';
+
 declare module "nuxt/schema" {
 	interface RuntimeNuxtHooks {
 		"app:message:right-clicked": (payload: { messageId: string }) => void
diff --git a/types/props.ts b/types/props.ts
index 9a8e642..aa6ff0c 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -3,13 +3,12 @@ import type { MessageResponse, UserResponse } from "./interfaces";
 export interface MessageProps {
 	class?: string,
 	img?: string | null,
-	author: UserResponse
+	author?: UserResponse
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
 	type: "normal" | "grouped",
 	marginBottom: boolean,
-	authorColor: string,
 	last: boolean,
 	messageId: string,
 	replyingTo?: boolean,
diff --git a/utils/createContextMenu.ts b/utils/createContextMenu.ts
index cf93a37..88fe6fb 100644
--- a/utils/createContextMenu.ts
+++ b/utils/createContextMenu.ts
@@ -2,19 +2,15 @@ import { render } from "vue";
 import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
 import type { ContextMenuItem } from "~/types/interfaces";
 
-export default (e: PointerEvent | MouseEvent, menuItems: ContextMenuItem[]) => {
+export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
   console.log("Rendering new context menu");
   const menuContainer = document.createElement("div");
-  console.log("hello");
   menuContainer.id = "context-menu";
   document.body.appendChild(menuContainer);
-  console.log("pointer x:", e.clientX);
-  console.log("pointer y:", e.clientY);
-  console.log("menu items:", menuItems);
   const contextMenu = h(ContextMenu, {
   	menuItems,
-  	pointerX: e.clientX,
-  	pointerY: e.clientY 
+  	cursorX: e.clientX,
+  	cursorY: e.clientY 
   });
   render(contextMenu, menuContainer);
   console.log("Rendered");
diff --git a/utils/fetchWithApi.ts b/utils/fetchWithApi.ts
index 1edcbac..664412c 100644
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@@ -1,4 +1,4 @@
-import type { NitroFetchOptions } from "nitropack";
+import type { NitroFetchRequest, NitroFetchOptions } from "nitropack";
 
 export default async <T>(path: string, options: NitroFetchOptions<string> = {}) => {
   console.log("path received:", path);
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/generateIrcColor.ts b/utils/generateIrcColor.ts
deleted file mode 100644
index 03a30e7..0000000
--- a/utils/generateIrcColor.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import xxhash from "xxhash-wasm"
-
-let h64: CallableFunction;
-(async () => {
-	h64 = (await xxhash()).h64;
-})();
-
-export default (seed: string, saturation: number = 100, lightness: number = 50): string => {
-	const idHash = useState(`h64Hash-${seed}`, () => h64(seed))
-	const hashValue: bigint = idHash.value
-
-	return `hsl(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
-}
\ No newline at end of file
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
deleted file mode 100644
index 015edbc..0000000
--- a/utils/getDisplayName.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
-
-export default (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/hashPassword.ts b/utils/hashing.ts
similarity index 84%
rename from utils/hashPassword.ts
rename to utils/hashing.ts
index d87af14..847a9dc 100644
--- a/utils/hashPassword.ts
+++ b/utils/hashing.ts
@@ -1,4 +1,4 @@
-export default async (password: string) => {
+export async function hashPassword(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/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
deleted file mode 100644
index 6eb8099..0000000
--- a/utils/loadPreferredTheme.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-let themeLinkElement: HTMLLinkElement | null;
-
-export default function loadPreferredTheme() {
-  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
-
-  if (themeLinkElement) {
-    themeLinkElement.href = getThemeUrl(currentTheme);
-  } else {
-    // create the theme link if one doesn't already exist
-    useHead({
-      link: [{
-        id: "main-theme",
-        rel: "stylesheet",
-        href: getThemeUrl(currentTheme)
-      }]
-    })
-
-    themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
-  }
-}
-
-function getThemeUrl(id: string): string {
-  const runtimeConfig = useRuntimeConfig()
-  const baseURL = runtimeConfig.app.baseURL;
-
-  // this should preferrably use version hash, but that's not implemented yet
-  return `${baseURL}themes/${id}.css?v=${runtimeConfig.public.buildTimeString}`
-}
\ No newline at end of file
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 8ee0c28..cab6152 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -7,7 +7,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 	}
diff --git a/utils/sortMembers.ts b/utils/sortMembers.ts
deleted file mode 100644
index 87a1a2a..0000000
--- a/utils/sortMembers.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { GuildMemberResponse } from "~/types/interfaces";
-
-export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
-	return members.sort((a, b) => {
-		return getDisplayName(a.user, a).localeCompare(getDisplayName(b.user, b))
-	})
-}
\ No newline at end of file
diff --git a/utils/sortUsers.ts b/utils/sortUsers.ts
deleted file mode 100644
index 8708366..0000000
--- a/utils/sortUsers.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { UserResponse } from "~/types/interfaces";
-
-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/validateUsername.ts b/utils/validateUsername.ts
deleted file mode 100644
index 9066df5..0000000
--- a/utils/validateUsername.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default (username: string) => {
-  return /^[\w.-]+$/.test(username);
-}
\ No newline at end of file
diff --git a/utils/validation.ts b/utils/validation.ts
new file mode 100644
index 0000000..48e13ef
--- /dev/null
+++ b/utils/validation.ts
@@ -0,0 +1,3 @@
+export function validateUsername(username: string) {
+  return /^[\w.-]+$/.test(username);
+}
\ No newline at end of file