diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index 6001a00..e62bd74 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -8,7 +8,6 @@ steps:
       - pnpm build
     when:
     - event: push
-    - event: pull_request
 
   - name: container-build-and-publish
     image: docker
diff --git a/app.vue b/app.vue
index 3a1c491..8ca7948 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Banner v-if="banner" />
-		<NuxtPage />
+		<NuxtPage :keepalive="true" />
 	</div>
 </template>
 
@@ -55,7 +55,10 @@ function contextMenuHandler(e: MouseEvent) {
 </script>
 
 <style>
-html,
+html {
+	background-color: #1f1e1d;
+}
+
 body {
   font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
diff --git a/components/Avatar.vue b/components/Avatar.vue
index 23aae79..ddfe1dc 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -12,32 +12,26 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
-
 const props = defineProps<{
-	profile: UserResponse | GuildMemberResponse,
+	user?: UserResponse,
+	member?: GuildMemberResponse,
 }>();
 
-const displayName = getDisplayName(props.profile)
+
+let displayName: string
 let displayAvatar: string | null
 
+const user = props.user || props.member?.user
 
-if ("username" in props.profile) {
-	// assume it's a UserRespone
-	displayAvatar = props.profile.avatar
-	if (!displayAvatar) {
-		if (!isCanvasBlocked()) {
-			displayAvatar = generateDefaultIcon(displayName, props.profile.uuid)
-		}
-	}
-
-} else {
-	// assume it's a GuildMemberResponse
-	displayAvatar = props.profile.user.avatar
-	if (!displayAvatar) {
-		if (!isCanvasBlocked()) {
-			displayAvatar = generateDefaultIcon(displayName, props.profile.user_uuid)
-		}
+if (user) {
+	displayName = getDisplayName(user, props.member)
+	
+	if (user.avatar) {
+		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
 	}
 }
 
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index 6890ce1..12e36a0 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,35 +1,33 @@
 <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>
+    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
+        <Avatar :member="props.member" class="member-avatar"/>
+        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
-    <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
-        :onFinish="hideModalPopup" :keepalive="false"/>
 </template>
 
 <script lang="ts" setup>
-import { ModalProfilePopup } from '#components';
+import { ref } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
-
 const props = defineProps<{
     member: GuildMemberResponse
 }>();
 
-const modalPopupVisible = ref<boolean>(false);
+const isPopupVisible = ref(false);
 
-function showModalPopup() {
-    modalPopupVisible.value = true
-}
+const togglePopup = () => {
+    isPopupVisible.value = false;
+    // isPopupVisible.value = !isPopupVisible.value;
+};
 
-function hideModalPopup() {
-    modalPopupVisible.value = false
-}
+const hidePopup = () => {
+    isPopupVisible.value = false;
+};
 </script>
 
 <style>
 .member-item {
-    position: relative;
+    position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
 </style>
diff --git a/components/Me/AddFriend.vue b/components/Me/AddFriend.vue
index 43249fb..6d2d888 100644
--- a/components/Me/AddFriend.vue
+++ b/components/Me/AddFriend.vue
@@ -23,11 +23,9 @@ async function sendRequest() {
 		try {
 			await addFriend(inputField.value.value)
 			alert("Friend request sent!")
-		} catch (error: any) {
-			if (error?.response?.status !== 200) {
-				alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
-			}
-		}
+		} catch {
+			alert("Request failed :(")
+		} 
 	}
 }
 </script>
diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
index 25b9924..0a1481e 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -24,8 +24,6 @@
 </template>
 
 <script lang="ts" setup>
-
-const { getDisplayName } = useProfile()
 const { fetchFriends } = useApi();
 
 const friends = sortUsers(await fetchFriends())
diff --git a/components/Message.vue b/components/Message.vue
index 7f43049..ed32c50 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -29,7 +29,7 @@
 			: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 :user="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
@@ -69,8 +69,6 @@ import type { MessageProps } from '~/types/props';
 import MessageMedia from './MessageMedia.vue';
 import MessageReply from './UserInterface/MessageReply.vue';
 
-const { getDisplayName } = useProfile()
-
 const props = defineProps<MessageProps>();
 
 const messageElement = ref<HTMLDivElement>();
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 80606fb..17b4a3e 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -44,12 +44,9 @@ import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/inte
 import scrollToBottom from '~/utils/scrollToBottom';
 import { generateIrcColor } from '#imports';
 
-const { getDisplayName } = useProfile()
-const { fetchMe } = useApi()
-
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
-const me = await fetchMe() as UserResponse;
+const me = await fetchWithApi("/me") as UserResponse;
 
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index a5d8ebd..1f57901 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,7 +1,7 @@
 <template>
   <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
 	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
-		<Button text="✕" variant="stealth" :callback="onCloseButton" />
+		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -17,6 +17,8 @@ import Button from '~/components/UserInterface/Button.vue';
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
+console.log("props:", props);
+
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
@@ -29,15 +31,6 @@ onMounted(() => {
   }
 });
 
-function onCloseButton () {
-  if (dialog.value) {
-    if (props.onCloseButton) {
-      props.onCloseButton()
-    }
-    
-    dialog.value.remove
-  }
-}
 
 </script>
 
@@ -49,12 +42,9 @@ function onCloseButton () {
   flex-direction: column;
   gap: 1em;
   opacity: 100%;
-
-  padding: var(--standard-radius); 
-	border-radius: var(--standard-radius);
-	background-color: var(--chat-highlighted-background-color);
+  padding: 1%;
+  background-color: var(--sidebar-highlighted-background-color);
   color: var(--text-color);
-
   overflow: hidden;
 }
 
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
deleted file mode 100644
index 07181be..0000000
--- a/components/Modal/ProfilePopup.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<template>
-	<ModalBase :obscure="true" :onClose="props.onFinish" :onCloseButton="props.onFinish">
-		<div id="profile-container">
-			<div id="profile-header">
-				<div id="header-mask"></div>
-				<Avatar :profile="props.profile" id="avatar"/>
-			</div>
-
-			<div id="profile-sub-header">
-				<div id="display-name">{{ displayName }}</div>
-				<div id="username-and-pronouns">
-					{{ username }}
-					<span v-if="pronouns">
-						•
-						{{ pronouns }}
-					</span>
-				</div>
-				<!-- <div id="status">Status goes here lorem ipsum or something</div> -->
-
-				<div v-if="me.uuid != uuid" id="action-buttons-container">
-					<Button text="Message" variant="normal" :callback="buttonSendMessage"></Button>
-					<Button text="Friend" variant="neutral" :callback="buttonAddFriend"></Button>
-				</div>
-				<div v-else id="action-buttons-container">
-					<Button text="Edit Profile" variant="normal" :callback="buttonEditProfile"></Button>
-				</div>
-			</div>
-			<VerticalSpacer />
-
-			<div v-if="aboutMe" id="profile-body">
-				<div v-if="aboutMe" id="about-me-container">
-					<div><Icon name="lucide:info" size="1.1em"/></div>
-					<div id="about-me-text">
-						{{ " " + aboutMe }}
-					</div>
-				</div>
-			</div>
-			<VerticalSpacer v-if="aboutMe" />
-
-			<div id="profile-footer">
-				<div id="dates">
-					<div v-if="registrationDate" class="date-entry">
-						<span class="date-entry-title">Registered at</span><br>
-						<span class="date-entry-value" :title="registrationDate.toLocaleTimeString()">{{ toDateString(registrationDate) }}</span>
-					</div>
-					<div v-if="joinDate" class="date-entry">
-						<span class="date-entry-title">Joined at</span><br>
-						<span class="date-entry-value" :title="joinDate.toLocaleTimeString()">{{ toDateString(joinDate) }}</span>
-					</div>
-					<div v-if="friendsSince" class="date-entry">
-						<span class="date-entry-title">Friends Since</span><br>
-						<span class="date-entry-value" :title="friendsSince.toLocaleTimeString()">{{ toDateString(friendsSince) }}</span>
-					</div>
-				</div>
-			</div>
-		</div>
-	</ModalBase>
-</template>
-
-<script lang="ts" setup>
-import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/interfaces';
-import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
-import Button from '../UserInterface/Button.vue';
-
-const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
-const { addFriend, fetchMe } = useApi();
-
-const props = defineProps<ModalProps & {
-	profile: GuildMemberResponse,
-	onFinish: () => void
-}>();
-
-const me = await fetchMe() as UserResponse
-
-const displayName = getDisplayName(props.profile)
-const username = getUsername(props.profile)
-const pronouns = getPronouns(props.profile)
-const aboutMe = getAboutMe(props.profile)
-
-const registrationDate = getRegistrationDate(props.profile)
-const joinDate = getGuildJoinDate(props.profile)
-const friendsSince = await getFriendsSince(props.profile)
-
-const uuid = getUuid(props.profile)
-
-
-function toDateString(date: Date): string {
-	return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })
-}
-
-function buttonSendMessage() {
-	navigateTo(`/me/${uuid}`)
-}
-
-async function buttonAddFriend() {
-	try {
-		await addFriend(username)
-		alert("sent!")
-	} catch (error: any) {
-		if (error?.response?.status !== 200) {
-			alert(`error ${error?.response?.status} met whilst trying to add friend\n"${error?.response._data?.message}"`)
-		}
-	}
-}
-
-function buttonEditProfile() {
-	navigateTo(`/settings#profile`)
-}
-</script>
-
-<style scoped>
-
-#profile-container { 
-	text-align: left;
-
-	position: relative;
-	max-height: 60dvh;
-	max-width: 60dvw;
-	height: 30em;
-	width: 40em;
-
-	display: flex;
-	flex-direction: column;
-
-	background-color: var(--chat-background-color);
-	border-radius: var(--standard-radius);
-
-	overflow-y: scroll;
-}
-
-#profile-header {
-	flex-shrink: 0;
-	min-height: 9em;
-	width: 100%;
-}
-
-#header-mask {
-	display: relative;
-	width: 100%;
-	min-height: 7em;
-
-	z-index: 0;
-
-	background-color: var(--primary-color);
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
-}
-
-#avatar {
-	display: block;
-	position: absolute;
-	left: 2em;
-	top: 2.5em;
-
-	z-index: 1;
-
-	width: 6em;
-	height: 6em;
-
-	border: .15em solid var(--accent-color);
-}
-
-#profile-sub-header {
-	margin-left: 1em;
-	margin-right: 1em;
-}
-
-#display-name {
-	font-weight: 800;
-	font-size: 2em;
-}
-
-#username-and-pronouns {
-	font-size: .9em;
-	color: var(--secondary-text-color);
-}
-
-#status {
-	width: fit-content;
-	margin-top: .75em;
-
-	margin-left: -0.2em;
-	padding: .3em .5em;
-	
-	background-color: var(--chatbox-background-color);
-	border-radius: 1em;
-}
-
-#action-buttons-container {
-	display: flex;
-	gap: .6em;
-
-	margin-top: .4em;
-	margin-bottom: .3em;
-}
-
-
-#profile-body {
-	margin-left: 1em;
-	margin-right: 1em;
-}
-
-#about-me-container {
-	display: flex;
-	flex-direction: row;
-	gap: .5em;
-
-	margin-top: .75em;
-	margin-bottom: .75em;
-}
-
-#about-me-text {
-	display: inline;
-	margin-top: -0.5em;
-	
-	align-self: center;
-
-	font-size: .8em;
-	font-weight: lighter;
-}
-
-
-#profile-footer {
-	margin-left: 1em;
-	margin-right: 1em;
-	padding-bottom: 5em;
-}
-
-#dates {
-	display: flex
-}
-
-.date-entry {
-	flex-grow: 1;
-}
-
-.date-entry-title {
-	font-size: .8em;
-}
-
-.date-entry-value {
-	font-size: 1em;
-}
-</style>
\ No newline at end of file
diff --git a/components/Popups/CropPopup.vue b/components/Popups/CropPopup.vue
index 12c3a0b..3a9586c 100644
--- a/components/Popups/CropPopup.vue
+++ b/components/Popups/CropPopup.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import Cropper from 'cropperjs';
+import Button from '../UserInterface/Button.vue';
 
 const props = defineProps({
   imageSrc: String,
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 99880fa..5e85095 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import CropPopup from '~/components/Popups/CropPopup.vue';
 import UserPopup from '~/components/User/UserPopup.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
@@ -41,7 +42,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/User/UserEntry.vue b/components/User/UserEntry.vue
index 204ec73..5abea85 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -1,6 +1,6 @@
 <template>
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
-        <Avatar :profile="props.user" class="user-avatar"/>
+        <Avatar :user="props.user" class="user-avatar"/>
 
         <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
@@ -9,8 +9,6 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
-
 const props = defineProps<{
     user: UserResponse
 }>();
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index 9c30824..6674c9e 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="profile-popup">
-    <Avatar :profile="props.user" id="avatar"/>
+    <Avatar :user="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">
@@ -21,8 +21,6 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
-
 const props = defineProps<{
 	user: UserResponse
 }>();
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index ad4cdb5..467b65e 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,7 +1,6 @@
 <template>
-	<button class="button" :class="props.variant + '-button'"
-	@click="props.callback ? props.callback() : null">
-			{{ props.text }}
+	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
+		{{ props.text }}
 	</button>
 </template>
 
@@ -10,7 +9,7 @@
 const props = defineProps<{
 	text: string,
 	callback?: CallableFunction,
-	variant?: "normal" | "scary" | "neutral" | "stealth",
+	variant?: "normal" | "scary" | "neutral",
 }>();
 
 </script>
@@ -22,12 +21,11 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);
 
-	padding: 0.35em 0.65em;
-	font-size: 1em;
-	
+	padding: 0.4em 0.75em;
+	font-size: 1.1em;
 	transition: background-color 0.2s;
 
-	border-radius: var(--standard-radius);
+	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
 
@@ -52,11 +50,4 @@ const props = defineProps<{
 	background-color: var(--accent-highlighted-color);
 }
 
-.stealth-button {
-	background-color: unset;
-}
-.stealth-button:hover {
-	background-color: unset;
-}
-
 </style>
\ No newline at end of file
diff --git a/components/UserInterface/HorizontalSpacer.vue b/components/UserInterface/HorizontalSpacer.vue
deleted file mode 100644
index cc95c92..0000000
--- a/components/UserInterface/HorizontalSpacer.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <span class="horizontal-spacer"></span>
-</template>
-
-<style scoped>
-.spacer {
-  display: block;
-  min-width: 0.2dvh;
-  margin: 0.2dvh 0.8dvw;
-  background-color: var(--padding-color);
-}
-</style>
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
index 9f0e304..8ac1bd6 100644
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@@ -1,11 +1,11 @@
 <template>
-  <span class="vertical-spacer"></span>
+  <span class="spacer"></span>
 </template>
 
 <style scoped>
-.vertical-spacer {
+.spacer {
+  height: 0.2dvh;
   display: block;
-  min-height: 0.2dvh;
   margin: 0.8dvh 0.2dvw;
   background-color: var(--padding-color);
 }
diff --git a/composables/api.ts b/composables/api.ts
index 723fb6b..75a3811 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -21,10 +21,6 @@ export const useApi = () => {
 		return ensureIsArray(await fetchWithApi(`/me/guilds`));
 	}
 
-	async function fetchMe(): Promise<UserResponse | undefined> {
-		return await fetchWithApi("/me")
-	}
-
 	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
 		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
@@ -98,11 +94,14 @@ export const useApi = () => {
 		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
 	}
 
+	async function fetchInvite(id: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/invites/${id}`);
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
 		fetchMyGuilds,
-		fetchMe,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
@@ -120,6 +119,7 @@ export const useApi = () => {
 		fetchInstanceStats,
 		sendVerificationEmail,
 		sendPasswordResetEmail,
-		resetPassword
+		resetPassword,
+		fetchInvite
 	}
 }
diff --git a/composables/auth.ts b/composables/auth.ts
index bceecb3..6cb3c41 100644
--- a/composables/auth.ts
+++ b/composables/auth.ts
@@ -41,7 +41,7 @@ export const useAuth = () => {
   async function logout() {
     console.log("access:", accessToken.value);
 
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "DELETE", credentials: "include" });
     clearAuth();
 
 	  return await navigateTo("/login");
diff --git a/composables/profile.ts b/composables/profile.ts
deleted file mode 100644
index 1fc4f24..0000000
--- a/composables/profile.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
-
-const { fetchFriends } = useApi();
-
-export const useProfile = () => {
-	function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
-		if ("username" in profile) {
-			return profile.about
-		} else {
-			return profile.user.about
-		}
-	}
-
-	function getDisplayName (profile: UserResponse | GuildMemberResponse): string  {
-		if ("username" in profile) {
-			// assume it's a UserRespone
-			if (profile.display_name) return profile.display_name
-			return profile.username
-		} else {
-			// assume it's a GuildMemberResponse
-			if (profile.nickname) return profile.nickname
-			if (profile.user.display_name) return profile.user.display_name
-			return profile.user.username
-		}
-	}
-
-	async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
-		let user_uuid: string;
-
-		if ("username" in profile) {
-			user_uuid = profile.uuid
-		} else {
-			user_uuid = profile.user_uuid
-		}
-
-		const friends = await fetchFriends()
-		const friend = friends.find(friend => friend.uuid === user_uuid);
-		if (friend?.friends_since) {
-			return new Date(friend.friends_since);
-		}
-
-		return null
-	}
-
-	function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
-		if ("username" in profile) {
-			return null
-		} else {
-			return uuidToDate(profile.uuid)
-		}
-	}
-
-	function getPronouns (profile: UserResponse | GuildMemberResponse): string | null  {
-		if ("username" in profile) {
-			return profile.pronouns
-		} else {
-			return profile.user.pronouns
-		}
-	}
-
-	function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
-		if ("username" in profile) {
-			return uuidToDate(profile.uuid)
-		} else {
-			return uuidToDate(profile.user_uuid)
-		}
-	}
-
-	function getUsername (profile: UserResponse | GuildMemberResponse): string {
-		if ("username" in profile) {
-			return profile.username
-		} else {
-			return profile.user.username
-		}
-	}
-
-	function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
-		if ("username" in profile) {
-			return profile.uuid
-		} else {
-			return profile.user.uuid
-		}
-	}
-	
-	return {
-		getAboutMe,
-		getDisplayName,
-		getFriendsSince,
-		getGuildJoinDate,
-		getRegistrationDate,
-		getPronouns,
-		getUsername,
-		getUuid		
-	}
-}
diff --git a/layouts/client.vue b/layouts/client.vue
index 6c2fb5a..48a7f66 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -57,15 +57,10 @@ import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
-definePageMeta({
-	keepalive: true
-});
-
 const loading = useState("loading", () => false);
 
 const createButtonContainer = ref<HTMLButtonElement>();
 
-const { getDisplayName } = useProfile()
 const api = useApi();
 
 const blockedCanvas = isCanvasBlocked()
diff --git a/pages/invite/[inviteId].vue b/pages/invite/[inviteId].vue
new file mode 100644
index 0000000..ff4166e
--- /dev/null
+++ b/pages/invite/[inviteId].vue
@@ -0,0 +1,180 @@
+<template>
+  <div id="invite-root">
+	<div id="invite-container">
+		<div id="guild-container" v-if="guild">
+			<h1>You have been invited to {{ guild.name }}!</h1>
+			<div id="guild-card">
+				<div id="card-grid">
+					<div id="guild-details">
+						<div id="guild-name" title="Server name">
+							<span>{{ guild.name }}</span>
+						</div>
+						<div id="guild-member-count" :title="`${guild.member_count} members`">
+							<Icon name="lucide:users" />
+							<span>{{ guild.member_count }}</span>
+						</div>
+					</div>
+					<VerticalSpacer id="space" />
+					<div id="guild-description">
+						<span>{{ guild.description }}</span>
+					</div>
+					<div id="guild-icon">
+						<NuxtImg v-if="guild.icon" id="guild-icon-img" :src="guild.icon" :alt="`${guild.name} server icon`" />
+					</div>
+				</div>
+				<Button :text="isMember ? 'Joined' : 'Join'" variant="normal" :callback="acceptInvite" />
+			</div>
+		</div>
+		<div v-else-if="errorMessage">
+			<h1>{{ errorMessage }}</h1>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+
+const route = useRoute();
+const { fetchInvite, joinGuild, fetchMembers } = useApi();
+const { getUser } = useAuth();
+
+const inviteId = route.params.inviteId as string;
+
+const guild = ref<GuildResponse>();
+const errorMessage = ref<string>();
+const isMember = ref(false);
+
+const accessToken = useCookie("access_token");
+
+if (inviteId) {
+	try {
+		guild.value = await fetchInvite(inviteId);
+		console.log("invite guild:", guild.value);
+		if (accessToken.value && guild.value) {
+			const members = await fetchMembers(guild.value.uuid);
+			const me = await getUser();
+			if (me && members.find(member => member.user.uuid == me.uuid)) {
+				isMember.value = true;
+			}
+		} 
+	} catch (error: any) {
+		if (error.response) {
+			if (error.status == 404) {
+				errorMessage.value = "That invite doesn't exist or has expired.";
+			}
+		}
+		console.error(error);
+	}
+}
+
+async function acceptInvite() {
+	if (accessToken.value && guild.value) {		
+		await joinGuild(inviteId);
+		return await navigateTo(`/servers/${guild.value.uuid}`);
+	}
+
+	return await navigateTo(`/login?redirect_to=${route.fullPath}`);
+}
+
+</script>
+
+<style>
+
+#invite-root {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100dvh;
+}
+
+#invite-container {
+	border: .5rem solid var(--chat-highlighted-background-color);
+	border-radius: var(--standard-radius);
+	height: 50%;
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: var(--sidebar-highlighted-background-color);
+	border: .5rem solid black;
+	border-radius: var(--standard-radius);
+	padding: .5rem;
+}
+
+#card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 5rem auto 1fr;
+	height: 100%;
+	width: 100%;
+}
+
+#guild-details {
+	grid-row: 1;
+	grid-column: span 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-name {
+	font-size: 2rem;
+	flex-direction: column;
+}
+
+#guild-member-count {
+	gap: .3rem;
+}
+
+#space {
+	grid-row: 2;
+	grid-column: span 3;
+}
+
+#guild-description {
+	grid-row: 3;
+	grid-column: span 3;
+	word-break: break-all;
+	padding: .3rem;
+}
+
+#guild-name, #guild-member-count {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-icon-img {
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+}
+
+</style>
\ No newline at end of file
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 6fd9c96..2a05c38 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -96,8 +96,7 @@ export interface ModalProps {
 	title?: string,
 	obscure?: boolean,
 	onClose?: () => void,
-	onCancel?: () => void,
-	onCloseButton?: () => void,
+	onCancel?: () => void
 }
 
 export interface ContextMenuItem {
diff --git a/utils/editMessage.ts b/utils/editMessage.ts
index d8ad005..5cc3ce8 100644
--- a/utils/editMessage.ts
+++ b/utils/editMessage.ts
@@ -1,12 +1,9 @@
 import type { MessageProps } from "~/types/props";
 
-const { fetchMe } = useApi()
-
 export default async (element: HTMLDivElement, props: MessageProps) => {
 	console.log("message:", element);
-	const me = await fetchMe();
-
-	if (me && props.author?.uuid == me.uuid) {
+	const me = await fetchWithApi("/me") as any;
+	if (props.author?.uuid == me.uuid) {
 		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
 		text.contentEditable = "true";
 		text.focus();
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
new file mode 100644
index 0000000..015edbc
--- /dev/null
+++ b/utils/getDisplayName.ts
@@ -0,0 +1,7 @@
+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/sortMembers.ts b/utils/sortMembers.ts
index b232763..87a1a2a 100644
--- a/utils/sortMembers.ts
+++ b/utils/sortMembers.ts
@@ -1,8 +1,7 @@
 import type { GuildMemberResponse } from "~/types/interfaces";
-const { getDisplayName } = useProfile()
 
 export default (members: GuildMemberResponse[]): GuildMemberResponse[] => {
 	return members.sort((a, b) => {
-		return getDisplayName(a).localeCompare(getDisplayName(b))
+		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
index 83f5713..8708366 100644
--- a/utils/sortUsers.ts
+++ b/utils/sortUsers.ts
@@ -1,5 +1,4 @@
 import type { UserResponse } from "~/types/interfaces";
-const { getDisplayName } = useProfile()
 
 export default (users: UserResponse[]): UserResponse[] => {
 	return users.sort((a, b) => {
diff --git a/utils/uuidToDate.ts b/utils/uuidToDate.ts
deleted file mode 100644
index f0ab6f3..0000000
--- a/utils/uuidToDate.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default (uuid: string): Date => {
-  const timeHex = uuid.substring(0, 8) + uuid.substring(9, 13);
-  const timestamp = parseInt(timeHex, 16);
-
-  return new Date(timestamp);
-}
\ No newline at end of file