diff --git a/app.vue b/app.vue
index 8158615..8f0571f 100644
--- a/app.vue
+++ b/app.vue
@@ -9,14 +9,13 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import type { ContextMenuInterface } from './types/interfaces';
-import loadPreferredTheme from '~/utils/loadPreferredTheme';
 
 const banner = useState("banner", () => false);
 
 const contextMenu = useState<ContextMenuInterface>("contextMenu");
 
 onMounted(() => {
-	loadPreferredTheme()
+	loadPreferredThemes()
 
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
diff --git a/classes/Message.ts b/classes/Message.ts
index de0d12b..a782d6a 100644
--- a/classes/Message.ts
+++ b/classes/Message.ts
@@ -12,8 +12,4 @@ export default class Message {
 		this.userUuid = user_uuid;
 		this.message = message;
 	}
-
-	getTimestamp() {
-		return uuidToTimestamp(this.uuid);
-	}
 }
\ No newline at end of file
diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue
index 17e6c79..6fc6891 100644
--- a/components/DefaultIcon.vue
+++ b/components/DefaultIcon.vue
@@ -1,9 +1,11 @@
 <template>
   <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
 	class="default-icon">
-		<span class="default-icon-text">
-			{{ previewName }}
-		</span>
+		<div class="default-icon-text-container">
+			<span class="default-icon-text">
+				{{ previewName }}
+			</span>
+		</div>
   </div>
 </template>
 
@@ -31,12 +33,17 @@ if (props.name.length > 3) {
 </script>
 
 <style scoped>
-.default-icon {
+.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;
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 cc82c2b..baf0e67 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
         <Avatar :profile="props.member" class="member-avatar"/>
-        <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
+        <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"/>
diff --git a/components/Message.vue b/components/Message.vue
index ca7e31e..c6207a1 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,64 +1,62 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
-			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
 				width="1.5em" height="1.5em"
 				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
 				<defs id="defs1" />
-				<g id="layer1"
-					transform="translate(40,-35)">
-					<g id="g3"
-						transform="translate(-35,-20)">
+				<g id="layer1" transform="translate(40,-35)">
+					<g id="g3" transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="m 120.02168,87.850978 100.76157,2.4e-5"
+						d="m 120,87.5 100,2.5e-5"
 						id="path3-5" />
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="M 69.899501,174.963 120.2803,87.700931"
+						d="M 70,150 120,87.5"
 						id="path3-5-2" />
 					</g>
 				</g>
 			</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 :profile="props.author" class="message-author-avatar"/>
+			<Avatar :profile="props.message.member" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ getDisplayName(props.author) }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
+					{{ getDisplayName(props.message.member) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 
-					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
-			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
+			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.message.uuid" :editing.sync="props.editing">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -71,33 +69,37 @@ import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
+const { getUser } = useAuth()
 
 const props = defineProps<MessageProps>();
 
+const me = await getUser()
+
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
-const date = new Date(props.timestamp);
+const date = uuidToDate(props.message.uuid);
+
 const currentDate: Date = new Date()
 
 console.log("[MSG] message to render:", props.message);
-console.log("author:", props.author);
+console.log("author:", props.message.member);
 console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
 const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks: string[] = [];
+const mediaLinks = ref<string[]>([]);
 console.log("link matches:", linkMatches);
 
-const hasEmbed = ref(false);
+const hideText = ref(false);
 
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parse(props.text, { gfm: true });
+	const parsed = await parse(props.message.message, { gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, {
 		ALLOWED_TAGS: [
 			"strong", "em", "br", "blockquote",
@@ -121,23 +123,35 @@ onMounted(async () => {
 		console.log("added listeners");
 	}
 
+	const links: string[] = [];
 	for (const link of linkMatches) {
-	console.log("link:", link);
-	try {
-		const res = await $fetch.raw(link);
-		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-			console.log("link is image");
-			mediaLinks.push(link);
+		console.log("link:", link);
+		try {
+			const res = await $fetch.raw(link);
+			if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+				console.log("link is image");
+				links.push(link);
+			}
+		} catch (error) {
+			console.error(error);
 		}
-		if (mediaLinks.length) {
-			hasEmbed.value = true
-		};
-	} catch (error) {
-		console.error(error);
-	}
-}
 
-console.log("media links:", mediaLinks);
+		mediaLinks.value = [...links];
+	}
+
+	if (mediaLinks.value.length) {
+		const nonLinks = props.message.message.split(linkRegex);
+		let invalidContent = false;
+		for (const nonLink of nonLinks) {
+			if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
+				invalidContent = true;
+				break;
+			}
+		}
+		hideText.value = !invalidContent;
+	};
+
+	console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {
@@ -148,13 +162,13 @@ const menuItems: ContextMenuItem[] = [
 	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
-console.log("me:", props.me);
-if (props.author?.uuid == props.me.uuid) {
+console.log("me:", me);
+if (props.message.member.user.uuid == me!.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
+if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@@ -174,14 +188,20 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style scoped>
 .message {
-	text-align: left;
-	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2rem 1fr;
+	grid-template-columns: 4rem 1fr;
 	align-items: center;
-	column-gap: 1dvw;
-	width: 100%;
+
+	text-align: left;
+	/* -4 dvw due to 2dvw of padding on both sides */
+	width: calc(100% - 4dvw);
 	overflow-wrap: anywhere;
+
+	padding-top: .2rem;
+	padding-bottom: .2rem;
+	padding-left: 2dvw;
+	padding-right: 1dvw;
+	border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
 }
 
 .message-reply-preview {
@@ -197,14 +217,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: 1dvh;
 }
 
-.grouped-message {
-	margin-top: .3em;
-}
-
-#last-message {
-	margin-bottom: 2dvh;
-}
-
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -213,10 +225,9 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-data {
 	/* border: 1px solid white; */
-	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	height: fit-content;
+	height: 100%;
 	width: 100%;
 	grid-row: 2;
 	grid-column: 2;
@@ -228,10 +239,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2em;
-	max-height: 2em;
-	min-width: 2em;
-	max-width: 2em;
+	min-height: 2.5em;
+	max-height: 2.5em;
+	min-width: 2.5em;
+	max-width: 2.5em;
 }
 
 .left-column {
@@ -242,8 +253,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	white-space: nowrap;
 	grid-row: 2;
 	grid-column: 1;
+	height: 100%;
+	align-items: start;
 }
 
+
 .author-username {
 	margin-right: .5dvw;
 	color: white;
@@ -257,9 +271,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .side-message-date {
 	font-size: .625em;
-	display: flex;
-	align-items: center;
-	align-content: center;
+	margin-top: .4em;
 }
 
 /*
@@ -269,12 +281,12 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 */
 
-.mentioned {
-	background-color: rgba(0, 255, 166, 0.123);
+.highlighted {
+	background-color: var(--chat-important-background-color);
 }
 
-.mentioned:hover {
-	background-color: rgba(90, 255, 200, 0.233);
+.highlighted:hover {
+	background-color: var(--chat-important-highlighted-background-color);
 }
 
 .message-reply-svg {
@@ -298,8 +310,9 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style>
 
+/* class used in utils/replyToMessage.ts */
 .replying-to {
-	background-color: var(--primary-highlighted-color);
+	background-color: var(--chat-featured-message-color);
 }
 
 </style>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 80fea70..e2788ae 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,14 +1,12 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
-				: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 v-for="(message, i) of messages" :key="message.uuid"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.user.uuid)}`"
-				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
+				:type="messagesType[message.uuid]"
+				:editing="false"
+				:is-mentioned="false" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -67,33 +65,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;
@@ -111,8 +109,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;
 	}
@@ -320,8 +318,6 @@ router.beforeEach((to, from, next) => {
 #message-area {
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	overflow: hidden;
 	flex-grow: 1;
 }
@@ -329,8 +325,8 @@ router.beforeEach((to, from, next) => {
 #message-box {
 	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
-	margin-left: 1dvw;
-	margin-right: 1dvw;
+	margin-left: 2dvw;
+	margin-right: 2dvw;
 
 	padding-left: 2%;
 	padding-right: 2%;
@@ -382,8 +378,7 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-bottom: 1em;
 }
 
 .message-box-button {
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index ab62387..11d436a 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+		<NuxtImg v-for="link of props.links"
+			class="media-item"
+			:src="link"
+			@click.prevent="createModal(link)" />
 	</div>
 </template>
 
@@ -8,7 +11,6 @@
 import { ModalBase } from '#components';
 import { render } from 'vue';
 
-
 const props = defineProps<{ links: string[] }>();
 
 function createModal(link: string) {
@@ -34,14 +36,14 @@ function createModal(link: string) {
 <style scoped>
 
 .media-container {
-	grid-column: 2;
-	grid-row: 3;
-	margin-left: .5dvw;
+	display: flex;
+	flex-wrap: wrap;
+	gap: .2rem;
+	max-width: 100%;
 }
 
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
 }
-
 </style>
\ No newline at end of file
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
index 8706263..b99a9ea 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -214,8 +214,21 @@ function buttonEditProfile() {
 	
 	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;
 }
 
 
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 579ccdd..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,39 +57,120 @@
 <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';
+import { settingSave, settingsLoad } from '#imports';
 
 const runtimeConfig = useRuntimeConfig()
-const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
+const styleFolder = `${baseURL}/themes/style`
+const layoutFolder = `${baseURL}/themes/layout`
+
 const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
 
-const themes: Array<Theme> = []
+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) {
-  settingSave("selectedThemeId", id)
-  loadPreferredTheme()
-}
+async function parseTheme(url: string): Promise<Theme | void> {
+  const styleData: any = await $fetch(url)
 
-async function fetchThemes() {
-  for (const theme of defaultThemes) {
-    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
-    themeConfig.id = theme
+  if (typeof styleData != "string") {
+    return
+  }
 
-    themes.push(themeConfig)
+  const metadataMatch = styleData.match(/\/\*([\s\S]*?)\*\//);
+  if (!metadataMatch) {
+    alert(`Failed to fetch metadata for a theme, panicking`)
+    return
+  }
+
+  const commentContent = metadataMatch[0].trim().split("\n");
+  const cssData = styleData.substring(metadataMatch[0].length).trim();
+
+  let displayName: string | undefined
+  let complementaryColor: string | undefined
+  let previewGradient: string | undefined
+  let previewImageUrl: string | undefined
+
+  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"
@@ -84,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 5e85095..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>
 
@@ -42,6 +45,7 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
+const aboutMeInput = ref<HTMLDivElement>()
 
 const { fetchUser } = useAuth();
 
@@ -125,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>
@@ -139,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;
@@ -149,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 52ff5bc..09bf1ff 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -2,7 +2,9 @@
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
         <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>
 
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 9c30824..0c89d51 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -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>
@@ -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/ContextMenu.vue b/components/UserInterface/ContextMenu.vue
index dac6efc..1767657 100644
--- a/components/UserInterface/ContextMenu.vue
+++ b/components/UserInterface/ContextMenu.vue
@@ -50,7 +50,7 @@ function runCallback(item: ContextMenuItem) {
 	height: 2rem;
 	width: 100%;
 	color: var(--text-color);
-	background-color: var(--sidebar-highlighted-background-color);
+	background-color: var(--popup-background-color);
 	border: none;
 	text-align: left;
 	padding-left: 1rem;
@@ -58,7 +58,7 @@ function runCallback(item: ContextMenuItem) {
 }
 
 .context-menu-item:hover {
-	background-color: rgb(50, 50, 50);
+	background-color: var(--popup-highlighted-background-color);
 }
 
 .context-menu-item-danger {
diff --git a/components/UserInterface/MessageReply.vue b/components/UserInterface/MessageReply.vue
index c3efd2b..f3214b5 100644
--- a/components/UserInterface/MessageReply.vue
+++ b/components/UserInterface/MessageReply.vue
@@ -58,7 +58,7 @@ function scrollToReply(e: MouseEvent) {
 		console.log("scrolling into view");
 		reply.scrollIntoView({ behavior: "smooth", block: "center" });
 		reply.style.transition = "background-color .3s";
-		reply.style.backgroundColor = "var(--primary-highlighted-color)";
+		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
index 27b0730..79e95bd 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -34,7 +34,7 @@ const storedWidth = ref<string>();
 const contextMenu = useState<ContextMenuInterface>("contextMenu");
 
 const menuItems: ContextMenuItem[] = [
-	{ name: "Reset", callback: () => {
+	{ name: "Reset", type: "normal", callback: () => {
 		const defaultWidth = props.width ?? props.minWidth;
 		resizableSidebar.value!.style.width = defaultWidth;
 		if (props.localStorageName) {
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/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b2e0782..f07dabd 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -24,8 +24,7 @@
 				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" />
-					<GuildMemberEntryPlaceholder v-for="n in totalMemberCount" />
+					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 				</div>
 			</div>
 		</ResizableSidebar>
@@ -50,7 +49,6 @@ const channels = ref<ChannelResponse[] | undefined>();
 const channel = ref<ChannelResponse | undefined>();
 
 const members = ref<GuildMemberResponse[]>();
-const totalMemberCount = ref(0);
 
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
@@ -67,16 +65,6 @@ onMounted(async () => {
 	console.log("fetched guild");
 	await setArrayVariables();
 	console.log("set array variables");
-	const membersList = document.getElementById("members-list");
-	if (membersList) {
-		membersList.addEventListener("scroll", (e) => {
-			if (e.target && e.target instanceof Element) {
-				if (isVisible(e.target)) {
-					
-				}
-			}
-		});
-	}
 });
 
 onActivated(async () => {
@@ -91,8 +79,6 @@ onActivated(async () => {
 async function setArrayVariables() {
 	const membersRes = await fetchMembers(route.params.serverId as string);
 	members.value = membersRes.objects;
-	totalMemberCount.value = (membersRes.amount * membersRes.pages) - membersRes.amount;
-	console.log("Placeholder count:", totalMemberCount.value);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
@@ -112,20 +98,6 @@ function toggleInvitePopup(e: Event) {
 
 function handleMemberClick(member: GuildMemberResponse) {
 }
-
-function isVisible(element: Element) {
-  const rect = element.getBoundingClientRect();
-  return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <= (
-          window.innerHeight ||
-          document.documentElement.clientHeight) &&
-      rect.right <= (
-          window.innerWidth ||
-          document.documentElement.clientWidth)
-  );
-}
 </script>
 
 <style>
diff --git a/public/themes/ash.css b/public/themes/ash.css
deleted file mode 100644
index d47b51e..0000000
--- a/public/themes/ash.css
+++ /dev/null
@@ -1,29 +0,0 @@
-: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;
-	--sidebar-background-color: #3e3a37;
-	--sidebar-highlighted-background-color: #46423b;
-	--topbar-background-color: #3a3733;
-	--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/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.css b/public/themes/dark.css
deleted file mode 100644
index efc2bfa..0000000
--- a/public/themes/dark.css
+++ /dev/null
@@ -1,32 +0,0 @@
-: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;
-	--sidebar-background-color: #2e2a27;
-	--sidebar-highlighted-background-color: #36322b;
-	--topbar-background-color: #2a2723;
-	--chatbox-background-color: #1a1713;
-
-    --padding-color: #484848;
-    
-	--primary-color: #f4741f;
-	--primary-highlighted-color: #f68a3f;
-	--secondary-color: #7c4018;
-	--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/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..1cee0b4
--- /dev/null
+++ b/public/themes/layout/gorb.css
@@ -0,0 +1,18 @@
+/*
+displayName = Gorb
+previewImageUrl = gorb.jpg
+complementaryColor = white
+*/
+
+:root {
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
+	--minor-radius: .35em;
+	--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/style/ash.css b/public/themes/style/ash.css
new file mode 100644
index 0000000..e33fbf6
--- /dev/null
+++ b/public/themes/style/ash.css
@@ -0,0 +1,34 @@
+/*
+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: #383432;
+    --chat-highlighted-background-color: #4c4a48;
+	--chat-important-background-color: #ffcf5f38;
+	--chat-important-highlighted-background-color: #ffa86f4f;
+	--chat-featured-message-color: #4f3f2f60;
+	--popup-background-color: #2f2828;
+	--popup-highlighted-background-color: #382f2f;
+
+	--sidebar-background-color: #322f2d;
+	--sidebar-highlighted-background-color: #46423b;
+	--topbar-background-color: #3a3733;
+	--chatbox-background-color: #3a3733;
+
+    --padding-color: #4f4f4f;
+
+	--primary-color: #f07028;
+	--primary-highlighted-color: #f28f4b;
+	--secondary-color: #683820;
+	--secondary-highlighted-color: #885830;
+	--accent-color: #a04b24;
+	--accent-highlighted-color: #b86038;
+}
\ No newline at end of file
diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css
new file mode 100644
index 0000000..420e8c9
--- /dev/null
+++ b/public/themes/style/dark.css
@@ -0,0 +1,34 @@
+/*
+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: #282624;
+    --chat-highlighted-background-color: #383430;
+	--chat-important-background-color: #ffc44f2f;
+	--chat-important-highlighted-background-color: #ffa45f4a;
+	--chat-featured-message-color: #4f2f1f58;
+	--popup-background-color: #2f1f1f;
+	--popup-highlighted-background-color: #3f2f2f;
+
+	--sidebar-background-color: #1f1e1d;
+	--sidebar-highlighted-background-color: #2f2b28;
+	--topbar-background-color: #2a2723;
+	--chatbox-background-color: #1a1713;
+
+    --padding-color: #484848;
+    
+	--primary-color: #f4741f;
+	--primary-highlighted-color: #f68a3f;
+	--secondary-color: #7c4018;
+	--secondary-highlighted-color: #8f5b2c;
+	--accent-color: #b35719;
+	--accent-highlighted-color: #c76a2e;
+}
\ 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 55%
rename from public/themes/light.css
rename to public/themes/style/light.css
index 68d6578..cd1f55b 100644
--- a/public/themes/light.css
+++ b/public/themes/style/light.css
@@ -1,11 +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-background-color: #f0edeb;
+    --chat-highlighted-background-color: #aba8a4;
+    --chat-important-background-color: #df5f0b26;
+    --chat-important-hightlighted-background-color: #df5f0b3d;
+    --chat-featured-message-color: #e8ac841f;
+    --popup-background-color: #b8b4b0;
+    --popup-highlighted-background-color: #a6a4a2;
+
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
@@ -19,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 71%
rename from public/themes/rainbow-capitalism.css
rename to public/themes/style/rainbow-capitalism.css
index a5ec390..8ca3ed7 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@@ -1,11 +1,23 @@
+/*
+displayName = Woke
+previewGradient = 45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e
+complementaryColor = white
+*/
+
 :root {
-	--text-color: #161518;
-	--secondary-text-color: #2b2930;
+	--text-color: #000000;
+	--secondary-text-color: #1f1f1f;
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-    --chat-background-color: #80808000;
+    --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;
@@ -20,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 508ca3d..d175d76 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -19,16 +19,17 @@ 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 {
@@ -52,7 +53,7 @@ export interface MessageResponse {
 	user_uuid: string,
 	message: string,
 	reply_to: string | null,
-	user: UserResponse,
+	member: GuildMemberResponse,
 }
 
 export interface InviteResponse {
diff --git a/types/props.ts b/types/props.ts
index 9a8e642..5796d83 100644
--- a/types/props.ts
+++ b/types/props.ts
@@ -1,21 +1,9 @@
 import type { MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
-	class?: string,
-	img?: string | null,
-	author: UserResponse
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	authorColor: string,
-	last: boolean,
-	messageId: string,
-	replyingTo?: boolean,
-	editing?: boolean,
-	me: UserResponse
 	message: MessageResponse,
-	replyMessage?: MessageResponse
+	replyMessage?: MessageResponse,
+	type: "normal" | "grouped",
+	editing?: boolean,
 	isMentioned?: boolean,
 }
\ No newline at end of file
diff --git a/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/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/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/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/replyToMessage.ts b/utils/replyToMessage.ts
index b2b31a8..1ff4df7 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -2,12 +2,14 @@ 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;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);