diff --git a/components/UserInterface/Button.vue b/components/Button.vue
similarity index 100%
rename from components/UserInterface/Button.vue
rename to components/Button.vue
diff --git a/components/Guild/ChannelEntry.vue b/components/Channel.vue
similarity index 100%
rename from components/Guild/ChannelEntry.vue
rename to components/Channel.vue
diff --git a/components/Popups/CropPopup.vue b/components/CropPopup.vue
similarity index 100%
rename from components/Popups/CropPopup.vue
rename to components/CropPopup.vue
diff --git a/components/Popups/InvitePopup.vue b/components/InvitePopup.vue
similarity index 100%
rename from components/Popups/InvitePopup.vue
rename to components/InvitePopup.vue
diff --git a/components/Popups/Loading.vue b/components/Loading.vue
similarity index 100%
rename from components/Popups/Loading.vue
rename to components/Loading.vue
diff --git a/components/Me/AddFriend.vue b/components/Me/AddFriend.vue
deleted file mode 100644
index 49aa112..0000000
--- a/components/Me/AddFriend.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-	<div style="text-align: left;">
-		<h3>Add a Friend</h3>
-		Enter a friend's Gorb username to send them a friend request.
-	</div>
-	
-	<div id="add-friend-search-bar">
-		<input id="add-friend-search-input" ref="inputField"
-				placeholder="blahaj.enjoyer" maxlength="32" @keypress.enter="sendRequest"/> <!-- REMEMBER TO CHANGE THIS WHEN WE ADD FEDERATION--> 
-		<Button id="friend-request-button" :callback="sendRequest" text="Send Friend Request"></Button>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import Button from '../UserInterface/Button.vue';
-
-const inputField = ref<HTMLInputElement>();
-const { addFriend } = useApi();
-
-
-async function sendRequest() {
-	if (inputField.value) {
-		try {
-			await addFriend(inputField.value.value)
-			alert("Friend request sent!")
-		} catch {
-			alert("Request failed :(")
-		} 
-	}
-}
-</script>
-<style>
-
-#add-friend-search-bar {
-	display: flex;
-
-	text-align: left;
-	margin-top: .8em;
-	padding: .3em .3em;
-
-	border-radius: 1em;
-	border: 1px solid var(--accent-color);
-}
-
-#add-friend-search-input {
-	border: none;
-	box-sizing: border-box;
-
-	margin: 0 .2em;
-
-	flex-grow: 1;
-	
-	color: inherit;
-	background-color: unset;
-	font-weight: medium;
-	letter-spacing: .04em;
-}
-
-#add-friend-search-input:empty:before {
-	content: attr(placeholder);
-	color: gray;
-}
-</style>
\ No newline at end of file
diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
deleted file mode 100644
index cfe07fd..0000000
--- a/components/Me/DirectMessagesSidebar.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-	<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>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-
-const { fetchFriends } = useApi();
-
-const friends = await fetchFriends()
-</script>
-
-<style>
-#middle-left-column {
-	background: var(--optional-channel-list-background);
-	background-color: var(--sidebar-background-color);
-}
-
-#friend-sidebar {
-	padding-left: .5em;
-	padding-right: .5em;
-}
-</style>
\ No newline at end of file
diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
deleted file mode 100644
index 44c606f..0000000
--- a/components/Me/FriendsList.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-	<input id="search-friend-bar" placeholder="search"/>
-
-	<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
-
-	<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
-	<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
-	<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
-
-	<div id="friends-list">
-		<div v-if="props.variant === 'online'">
-			Not Implemented
-		</div>
-
-		<div v-else-if="props.variant === 'pending'">
-			Not Implemented
-		</div>
-
-		<div v-else>
-			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
-			:href="`/me/${user.uuid}`"/> 
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-const { fetchFriends } = useApi();
-
-const friends = await fetchFriends()
-
-const props = defineProps<{
-    variant: string
-}>();
-</script>
-
-<style>
-#search-friend-bar {
-	text-align: left;
-	margin-top: .8em;
-	padding: .3em .5em;
-	width: 100%;
-
-	border-radius: 1em;
-	border: 1px solid var(--accent-color);
-
-	box-sizing: border-box;
-	
-	color: inherit;
-	background-color: unset;
-	font-weight: medium;
-	letter-spacing: .04em;
-}
-
-#search-friend-bar:empty:before {
-	content: attr(placeholder);
-	color: gray;
-}
-</style>
\ No newline at end of file
diff --git a/components/Member/MemberEntry.vue b/components/MemberEntry.vue
similarity index 96%
rename from components/Member/MemberEntry.vue
rename to components/MemberEntry.vue
index 1ea4170..ed4cd48 100644
--- a/components/Member/MemberEntry.vue
+++ b/components/MemberEntry.vue
@@ -10,6 +10,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
+import UserPopup from './UserPopup.vue';
 
 const props = defineProps<{
     member: GuildMemberResponse
diff --git a/components/Message.vue b/components/Message.vue
index db08258..929092a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -2,36 +2,6 @@
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			: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 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"
-					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"
-						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"
-						id="path3-5-2" />
-					</g>
-				</g>
-			</svg>
-		</div>
 		<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">
@@ -46,8 +16,7 @@
 				<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, { timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>
@@ -242,11 +211,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	background-color: rgba(90, 255, 200, 0.233);
 }
 
-.message-reply-svg {
-	display: flex;
-	justify-content: center;
-}
-
 </style>
 
 <style module>
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index d59b862..b2338f5 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -49,7 +49,7 @@ const me = await fetchWithApi("/me") as UserResponse;
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
-const timeFormat = getPreferredTimeFormat()
+const timeFormat = settingLoad("timeFormat") ?? "24"
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
diff --git a/components/MessageReply.vue b/components/MessageReply.vue
index f60c0bc..8ba0902 100644
--- a/components/MessageReply.vue
+++ b/components/MessageReply.vue
@@ -1,7 +1,7 @@
 <template>
   <div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
   		:data-message-id="props.id" @click="scrollToReply">
-    <span id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></span>
+    <p id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></p>
 	<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
   </div>
 </template>
@@ -61,6 +61,7 @@ function scrollToReply(e: MouseEvent) {
 #message-reply, .message-reply-preview {
 	display: flex;
 	text-align: left;
+	border-bottom: 1px solid var(--padding-color);
 	margin-bottom: .5rem;
 	cursor: pointer;
 	overflow: hidden;
@@ -71,17 +72,16 @@ function scrollToReply(e: MouseEvent) {
 }
 
 .message-reply-preview {
+	width: 30%;
 	margin-left: .5dvw;
 }
 
 #reply-text {
-	color: var(--reply-text-color);
+	color: rgb(150, 150, 150);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-bottom: 0;
-	margin-top: .2rem;
-	border-bottom: 1px solid var(--padding-color);
 
 }
 
diff --git a/components/RadioButtons.vue b/components/RadioButtons.vue
new file mode 100644
index 0000000..9c3ce3b
--- /dev/null
+++ b/components/RadioButtons.vue
@@ -0,0 +1,70 @@
+<template>
+	<div class="radio-button-container" ref="radioButtonContainer">
+		<span v-for="index in incidies" :key="index"
+				class="radio-button" @click="onClick(index)">
+			{{ textStrings[index] }}
+		</span>
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const radioButtonContainer = ref<HTMLDivElement>()
+
+const props = defineProps<{
+	textStrings: string[],
+	buttonCount: number,
+	defaultButtonIndex: number,
+	callback: CallableFunction,
+}>();
+
+// makes an array from 0 to buttonCount - 1
+const incidies = Array.from({ length: props.buttonCount }, (_, i) => i) 
+
+function onClick(clickedIndex: number) {
+	// remove selected-radio-button class from all buttons except the clicked one	
+	if (radioButtonContainer.value) {
+		const children = radioButtonContainer.value.children
+		for (let i = 0; i < children.length; i++) {
+			children.item(i)?.classList.remove("selected-radio-button")
+		}
+
+		children.item(clickedIndex)?.classList.add("selected-radio-button")
+	}
+	
+	props.callback(clickedIndex)
+}
+</script>
+
+<style scoped>
+.radio-button-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.radio-button {
+	cursor: pointer;
+
+	border-radius: 1em;
+	background-color: unset;
+	color: var(--text-color);
+
+	padding: 0.4em 0.75em;
+	margin: 0.4em 0em;
+	font-size: 1.1em;
+	transition: background-color 0.2s;
+}
+
+.radio-button:hover {
+	background-color: var(--secondary-highlighted-color);
+}
+
+.selected-radio-button {
+	background-color: var(--primary-color);
+}
+
+.selected-radio-button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 30e15d1..39e7410 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -23,21 +23,18 @@
 
     <p class="subtitle">TIME FORMAT</p>
     <div class="icons">
-      <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
-          :default-button-index="settingLoad('timeFormat')?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
+      <RadioButtons :button-count="3" :text-strings="['Auto', '12-hour', '24-hour']"
+          default-button-index="0" :callback="onTimeFormatClicked"></RadioButtons>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 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> = []
@@ -78,8 +75,9 @@ async function fetchThemes() {
 
 await fetchThemes()
 
+
 async function onTimeFormatClicked(index: number) {
-  settingSave("timeFormat", {index, timeFormat: timeFormatTextStrings[index].toLowerCase()})
+    console.log(index)
 }
 </script>
 
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index f096f74..b2ac87a 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/UserInterface/Button.vue';
+import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
diff --git a/components/Settings/UserSettings/Privacy.vue b/components/Settings/UserSettings/Privacy.vue
index 854ac43..0f1387d 100644
--- a/components/Settings/UserSettings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
 </script>
 
 <style scoped>
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 99880fa..04d1e30 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,9 +33,6 @@
 </template>
 
 <script lang="ts" setup>
-import UserPopup from '~/components/User/UserPopup.vue';
-import Button from '~/components/UserInterface/Button.vue';
-
 import type { UserResponse } from '~/types/interfaces';
 
 let newPfpFile: File;
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
deleted file mode 100644
index b463759..0000000
--- a/components/User/UserEntry.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-    <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <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>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-    user: UserResponse
-}>();
-</script>
-
-<style>
-.user-item {
-    display: flex;
-	align-items: center;
-	text-align: left;
-
-	margin-top: .5em;
-	margin-bottom: .5em;
-	gap: .5em;
-    
-    text-decoration: none;
-    color: inherit;
-}
-
-.user-item:hover {
-    background-color: #00000020
-}
-
-.user-avatar {
-    width: 2.3em;
-    height: 2.3em;
-    border-radius: 50%;
-}
-</style>
diff --git a/components/UserArea.vue b/components/UserArea.vue
new file mode 100644
index 0000000..d922c3f
--- /dev/null
+++ b/components/UserArea.vue
@@ -0,0 +1,20 @@
+<template>
+	<div id="user-panel">
+		HELLO!!
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+	user: UserResponse,
+}>();
+
+</script>
+
+<style scoped>
+#user-panel {
+	width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/components/UserInterface/RadioButtons.vue b/components/UserInterface/RadioButtons.vue
deleted file mode 100644
index a43a80a..0000000
--- a/components/UserInterface/RadioButtons.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<div v-for="index in incidies" :key="index" class="radio-button" @click="onClick(index)">
-			<span class="radio-button-radio"></span>
-			<span class="radio-button-text">{{ textStrings[index] }}</span>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-
-const radioButtonsContainer = ref<HTMLDivElement>()
-
-const props = defineProps<{
-	textStrings: string[],
-	buttonCount: number,
-	defaultButtonIndex: number,
-	callback: CallableFunction,
-}>();
-
-// makes an array from 0 to buttonCount - 1
-const incidies = Array.from({ length: props.buttonCount }, (_, i) => i) 
-
-// select default selected button
-onMounted(async () => {
-	await nextTick()
-	
-	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
-		const children = radioButtonsContainer.value.children
-		const defaultButton = children.item(props.defaultButtonIndex)
-		defaultButton?.classList.add("selected-radio-button")
-		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
-	}
-})
-
-
-function onClick(clickedIndex: number) {
-	// remove selected-radio-button class from all buttons except the clicked one	
-	if (radioButtonsContainer.value) {
-		const children = radioButtonsContainer.value.children
-		for (let i = 0; i < children.length; i++) {
-			children.item(i)?.classList.remove("selected-radio-button")
-			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
-		}
-
-		children.item(clickedIndex)?.classList.add("selected-radio-button")
-		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
-	}
-	
-	props.callback(clickedIndex)
-}
-</script>
-
-<style scoped>
-.radio-buttons-container {
-	display: flex;
-	flex-direction: column;
-}
-
-.radio-button {
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-
-	border-radius: .66em;
-	background-color: unset;
-	color: var(--text-color);
-
-	padding: 0.4em 0.75em;
-	margin: 0.4em 0em;
-	font-size: 1.1em;
-	transition: background-color 0.2s;
-}
-
-.radio-button:hover {
-	background-color: var(--secondary-highlighted-color);
-}
-
-.selected-radio-button {
-	background-color: var(--accent-color);
-}
-
-.selected-radio-button:hover {
-	background-color: var(--accent-highlighted-color);
-}
-
-.radio-button-radio, .selected-radio-button-radio {
-	position: relative;
-	
-	display: inline-block;
-	border-radius: 1em;
-}
-
-.radio-button-radio {
-	height: 1em;
-	width: 1em;
-	border: .15em solid var(--primary-color);
-}
-
-.selected-radio-button-radio {
-    height: 1em;
-    width: 1em;
-	border: 0.15em solid var(--primary-color);
-	background-color: var(--primary-highlighted-color);
-}
-
-.radio-button-text {
-	margin-left: .5em;
-}
-</style>
\ No newline at end of file
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
deleted file mode 100644
index 8ac1bd6..0000000
--- a/components/UserInterface/VerticalSpacer.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <span class="spacer"></span>
-</template>
-
-<style scoped>
-.spacer {
-  height: 0.2dvh;
-  display: block;
-  margin: 0.8dvh 0.2dvw;
-  background-color: var(--padding-color);
-}
-</style>
diff --git a/components/User/UserPopup.vue b/components/UserPopup.vue
similarity index 100%
rename from components/User/UserPopup.vue
rename to components/UserPopup.vue
diff --git a/composables/api.ts b/composables/api.ts
index 11c2226..d2ca7a0 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
 
 export const useApi = () => {
 	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
@@ -24,26 +24,14 @@ export const useApi = () => {
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
 	}
-	
+
 	async function fetchUsers() {
 		return await fetchWithApi(`/users`);
 	}
-	
+
 	async function fetchUser(userId: string) {
 		return await fetchWithApi(`/users/${userId}`);
 	}
-	
-	async function fetchFriends(): Promise<UserResponse[] | undefined> {
-		return await fetchWithApi('/me/friends')
-	}
-
-	async function addFriend(username: string): Promise<void> {
-		return await fetchWithApi('/me/friends', { method: "POST", body: { username } });
-	}
-
-	async function removeFriend(userId: string): Promise<void> {
-		return await fetchWithApi(`/me/friends/${userId}`, { method: "DELETE" });
-	}
 
 	async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise<MessageResponse[] | undefined> {
 		return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
@@ -71,9 +59,6 @@ export const useApi = () => {
 		fetchMember,
 		fetchUsers,
 		fetchUser,
-		fetchFriends,
-		addFriend,
-		removeFriend,
 		fetchMessages,
 		fetchMessage,
 		fetchInstanceStats,
diff --git a/composables/auth.ts b/composables/auth.ts
index e3a2fa2..ebe27de 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -106,7 +106,7 @@ export const useAuth = () => {
   }
 
   return {
-	clearAuth,
+    accessToken,
     register,
     login,
     logout,
diff --git a/layouts/client.vue b/layouts/client.vue
index de1e029..966e60a 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -10,7 +10,7 @@
 		</div>
 		<div id = "page-content">
 			<div id="left-column">
-				<NuxtLink id="home-button" href="/me">
+				<NuxtLink id="home-button" href="/">
 					<img class="sidebar-icon" src="/public/icon.svg"/>
 				</NuxtLink>
 				<div id="servers-list">
diff --git a/pages/index.vue b/pages/index.vue
index cb5f57e..41deadf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,11 +1,23 @@
 <template>
   <NuxtLayout>
-
+    <div id="left-bar">
+    </div>
+	<div id="middle-bar">
+      <h1>
+        Welcome to gorb :3
+      </h1>
+	  <p>
+		Click on a guild to the left to view a guild.
+		<br>
+		Or click the button in the bottom left to join a guild.
+	  </p>
+    </div>
+	<div id="right-bar">
+    </div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
-await navigateTo("/me/", { replace: true })
 
 definePageMeta({
 	layout: "client"
diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
deleted file mode 100644
index 209ffab..0000000
--- a/pages/me/[userId].vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <NuxtLayout name="client">
-	<DirectMessagesSidebar />
-	<MessageArea channel-url="channels/01970e8c-a09c-76a0-9c98-80a43364bea7"/> <!-- currently just links to the default channel -->
-
-  </NuxtLayout>
-</template>
-
-<script lang="ts" setup>
-import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/pages/me/friends.vue b/pages/me/friends.vue
deleted file mode 100644
index a0d0384..0000000
--- a/pages/me/friends.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<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
deleted file mode 100644
index e875c56..0000000
--- a/pages/me/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <NuxtLayout name="client">
-	<DirectMessagesSidebar />
-  </NuxtLayout>
-</template>
-
-<script lang="ts" setup>
-import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-</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 e7ab32a..4873094 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -18,7 +18,7 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<ChannelEntry v-for="channel of channels" :name="channel.name"
+				<Channel 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>
@@ -33,7 +33,6 @@
 </template>
 
 <script lang="ts" setup>
-import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
 
 const route = useRoute();
 
@@ -47,6 +46,7 @@ const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
+import UserPopup from "~/components/UserPopup.vue";
 import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
@@ -91,8 +91,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 }
 
 #members-container {
-	min-width: 15rem;
-	max-width: 15rem;
+	width: 15rem;
 	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
diff --git a/pages/settings.vue b/pages/settings.vue
index 8b270bc..3aac506 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -8,7 +8,7 @@
               <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
             </span>
           </p>
-          <VerticalSpacer />
+          <span class="spacer"></span>
 
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
@@ -17,13 +17,13 @@
               :class="{ 'sidebar-focus': selectedPage === page.displayName }">
               {{ page.displayName }}
             </li>
-            <VerticalSpacer />
+            <span class="spacer"></span>
           </div>
           
           <p>
             <Button text="Log Out" :callback=logout variant="scary"></Button>
           </p>
-          <VerticalSpacer />
+          <span class="spacer"></span>
 
           <p id="links-and-socials">
             <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
@@ -46,9 +46,6 @@
 
 
 <script lang="ts" setup>
-import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
-import Button from '~/components/UserInterface/Button.vue';
-
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 
@@ -199,6 +196,13 @@ onMounted(() => {
   margin-right: 0.2em;
 }
 
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 1dvw;
+  background-color: var(--padding-color);
+}
+
 /* applies to child pages too */
 :deep(.subtitle) {
   display: block;
diff --git a/public/themes/ash.css b/public/themes/ash.css
index 63aaa53..66923af 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -1,7 +1,6 @@
 :root {
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
-	--reply-text-color: #969696;
 
 	--chat-background-color: #2f2e2d;
     --chat-highlighted-background-color: #3f3b38;
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 3673d4c..af94112 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -1,7 +1,6 @@
 :root {
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
-	--reply-text-color: #969696;
 
 	--chat-background-color: #1f1e1d;
     --chat-highlighted-background-color: #2f2b28;
diff --git a/public/themes/description.css b/public/themes/description.css
index 209fb36..4b07f11 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -2,7 +2,6 @@
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
-	--reply-text-color: #969696;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;
diff --git a/public/themes/light.css b/public/themes/light.css
index fdd4756..b9b7b86 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -1,7 +1,6 @@
 :root {
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
-	--reply-text-color: #969696;
 
     --chat-background-color: #f0ebe8;
     --chat-highlighted-background-color: #e8e4e0;
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 0e146d9..32f7449 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -1,7 +1,6 @@
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
-	--reply-text-color: #969696;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 72cda88..8921c72 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -62,8 +62,7 @@ export interface UserResponse {
 	pronouns: string | null,
 	about: string | null,
 	email?: string,
-	email_verified?: boolean,
-	friends_since: string | null,
+	email_verified?: boolean
 }
 
 export interface StatsResponse {
diff --git a/utils/fetchWithApi.ts b/utils/fetchWithApi.ts
index 664412c..4089db8 100644
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@@ -18,7 +18,7 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
     return;
   }
   console.log("path:", path)
-  const { clearAuth, refresh } = useAuth();
+  const { revoke, refresh } = useAuth();
   
   let headers: HeadersInit = {};
   
@@ -61,7 +61,8 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
             if (error?.response?.status === 401) {
               console.log("Refresh returned 401");
               reauthFailed = true;
-              await clearAuth()
+              console.log("Revoking");
+              await revoke();
               console.log("Redirecting to login");
               await navigateTo("/login");
               console.log("redirected");
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
deleted file mode 100644
index 4cf03e0..0000000
--- a/utils/getPreferredTimeFormat.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default (): "12" | "24" => {
-	const format = settingLoad("timeFormat").timeFormat ?? "auto"
-
-	if (format == "12-hour") {
-		return "12"
-	} else if (format == "24-hour") {
-		return "24"
-	}
-
-	return "24"
-}
\ No newline at end of file