diff --git a/.woodpecker/build-and-publish.yml b/.woodpecker/build-and-publish.yml
index 98c7614..6001a00 100644
--- a/.woodpecker/build-and-publish.yml
+++ b/.woodpecker/build-and-publish.yml
@@ -23,3 +23,17 @@ steps:
     when:
     - branch: main
       event: push
+
+  - name: container-build-and-publish (staging)
+    image: docker
+    commands:
+      - docker login --username radical --password $PASSWORD git.gorb.app
+      - docker buildx build --platform linux/amd64,linux/arm64 --rm --push -t git.gorb.app/gorb/frontend:staging .
+    environment:
+      PASSWORD:
+        from_secret: docker_password
+    volumes:
+      - /var/run/podman/podman.sock:/var/run/docker.sock
+    when:
+    - branch: staging
+      event: push
diff --git a/components/Avatar.vue b/components/Avatar.vue
index b2da51b..ddfe1dc 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -24,9 +24,7 @@ let displayAvatar: string | null
 const user = props.user || props.member?.user
 
 if (user) {
-	displayName = props.member?.nickname
-						|| user.display_name
-						|| user.username
+	displayName = getDisplayName(user, props.member)
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
diff --git a/components/Guild/MemberEntry.vue b/components/Guild/MemberEntry.vue
index bd4302a..12e36a0 100644
--- a/components/Guild/MemberEntry.vue
+++ b/components/Guild/MemberEntry.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
         <Avatar :member="props.member" class="member-avatar"/>
-        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
+        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
diff --git a/components/Me/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
index 7a92d39..4b5df7a 100644
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -6,7 +6,7 @@
 			</div>
 			<VerticalSpacer />
 
-			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
+			<NuxtLink class="user-item" :href="`/me`" tabindex="0">
 				<Icon class="user-avatar" name="lucide:user" />
 				<span class="user-display-name">Friends</span>
 			</NuxtLink>
diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
index 44c606f..654957d 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -17,7 +17,7 @@
 		</div>
 
 		<div v-else>
-			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			<UserEntry v-for="user of friends" :user="user" :name="getDisplayName(user)"
 			:href="`/me/${user.uuid}`"/> 
 		</div>
 	</div>
@@ -26,7 +26,9 @@
 <script lang="ts" setup>
 const { fetchFriends } = useApi();
 
-const friends = await fetchFriends()
+const friends = await fetchFriends().then((response) => {
+	return response.sort((a, b) => getDisplayName(a).localeCompare(getDisplayName(b)))
+})
 
 const props = defineProps<{
     variant: string
diff --git a/components/Message.vue b/components/Message.vue
index 9eb5f78..ed32c50 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -25,7 +25,7 @@
 			</svg>
 		</div>
 		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
-			:author="props.replyMessage.user.display_name || props.replyMessage.user.username"
+			:author="getDisplayName(props.replyMessage.user)"
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
@@ -34,7 +34,7 @@
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
-					{{ displayName }}
+					{{ getDisplayName(props.author) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
@@ -77,7 +77,6 @@ const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 const currentDate: Date = new Date()
-const displayName = props.author?.display_name || props.author?.username
 
 console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index aadc07c..17b4a3e 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
 				: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"
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index 1817816..b3ad40f 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -2,7 +2,7 @@
     <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
         <Avatar :user="props.user" class="user-avatar"/>
 
-        <span class="user-display-name">{{ displayName }}</span>
+        <span class="user-display-name">{{ getDisplayName(props.user) }}</span>
 	</NuxtLink>
 </template>
 
@@ -13,7 +13,6 @@ const props = defineProps<{
     user: UserResponse
 }>();
 
-const displayName = props.user.display_name || props.user.username
 </script>
 
 <style>
diff --git a/components/User/UserPopup.vue b/components/User/UserPopup.vue
index f43d6d1..86b5a48 100644
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@@ -5,7 +5,7 @@
     <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
-        <strong>{{ props.user.display_name }}</strong>
+        <strong>{{ getDisplayName(props.user) }}</strong>
       </p>
       <p id="username-and-pronouns">
         {{ props.user.username }}
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 66706de..467b65e 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,14 +1,14 @@
 <template>
-	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
 		{{ props.text }}
-	</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
 
 const props = defineProps<{
 	text: string,
-	callback: CallableFunction,
+	callback?: CallableFunction,
 	variant?: "normal" | "scary" | "neutral",
 }>();
 
@@ -28,6 +28,8 @@ const props = defineProps<{
 	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
+
+	border: none;
 }
 
 .button:hover {
diff --git a/composables/api.ts b/composables/api.ts
index 0b438a6..1a38476 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -33,8 +33,13 @@ export const useApi = () => {
 		return await fetchWithApi(`/users/${userId}`);
 	}
 	
-	async function fetchFriends(): Promise<UserResponse[] | undefined> {
-		return await fetchWithApi('/me/friends')
+	async function fetchFriends(): Promise<UserResponse[]> {
+		const response = await fetchWithApi('/me/friends')
+		if (Array.isArray(response)) {
+			return response
+		} else {
+			return []
+		}
 	}
 
 	async function addFriend(username: string): Promise<void> {
@@ -74,6 +79,14 @@ export const useApi = () => {
 		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
 	}
 
+	async function sendPasswordResetEmail(identifier: string): Promise<void> {
+		await fetchWithApi("/auth/reset-password", { method: "GET", query: { identifier } });
+	}
+
+	async function resetPassword(password: string, token: string) {
+		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -92,6 +105,8 @@ export const useApi = () => {
 		joinGuild,
 		createChannel,
 		fetchInstanceStats,
-		sendVerificationEmail
+		sendVerificationEmail,
+		sendPasswordResetEmail,
+		resetPassword
 	}
 }
diff --git a/layouts/auth.vue b/layouts/auth.vue
index 95eca49..7d21f00 100644
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@@ -18,6 +18,7 @@
 			</div>
 			<div v-else id="auth-form-container">
 				<slot />
+				<div v-if="!['/recover', '/reset-password'].includes(route.path)">Forgot password? Recover <NuxtLink href="/recover">here</NuxtLink>!</div>
 			</div>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -36,7 +37,11 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
 const registrationEnabled = useState("registrationEnabled", () => true);
 
-const auth = useAuth();
+const route = useRoute();
+
+const query = route.query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 onMounted(async () => {
 	instanceUrl.value = useCookie("instance_url").value;
@@ -111,6 +116,7 @@ const form = reactive({
 #auth-form-container form {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	text-align: left;
 	margin-top: 10dvh;
 	gap: 1em;
diff --git a/layouts/client.vue b/layouts/client.vue
index 887dd47..46bdf89 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -127,7 +127,7 @@ const options = [
 				h("input", {
 					id: "guild-name-input",
 					type: "text",
-					placeholder: `${user?.display_name || user?.username}'s Awesome Bouncy Castle'`,
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
 					style: "width: 100%"
 				}),
 				h(Button, {
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index c0da664..e6d5128 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register", "/recover", "/reset-password"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);
diff --git a/pages/login.vue b/pages/login.vue
index 6dd3c74..8aba29b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -36,6 +36,7 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
@@ -48,7 +49,7 @@ if (apiBase.value) {
 	}
 }
 
-const registerUrl = `/register?${searchParams}`
+const registerUrl = `/register?${searchParams}`;
 
 const { login } = useAuth();
 
diff --git a/pages/me/friends.vue b/pages/me/friends.vue
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
index e875c56..a0d0384 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -1,13 +1,56 @@
 <template>
   <NuxtLayout name="client">
 	<DirectMessagesSidebar />
+	<div :id="$style['page-content']">
+		<div :id="$style['navigation-bar']">
+			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
+			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
+			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
+			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
+		</div>
+		
+		<div>
+			<AddFriend v-if="filter == 'add'"></AddFriend>
+			<FriendsList v-else :variant="filter"></FriendsList>
+		</div>
+
+	</div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import AddFriend from '~/components/Me/AddFriend.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
+
+const { fetchFriends } = useApi();
+
+let filter = ref("all");
+
+const friends = await fetchFriends()
+
+function updateFilter(newFilter: string) {
+	filter.value = newFilter;
+}
 </script>
 
-<style>
+<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/recover.vue b/pages/recover.vue
new file mode 100644
index 0000000..71ce217
--- /dev/null
+++ b/pages/recover.vue
@@ -0,0 +1,89 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
+        <div>
+          <label for="identifier">Email or username</label>
+            <br>
+          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
+        </div>
+        <div>
+          <Button type="submit" text="Send email" variant="normal" />
+        </div>
+      </form>
+      <div v-else>
+        If an account with that username or email exists, an email will be sent to it shortly.
+      </div>
+    <div v-if="registrationEnabled">
+      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
+    </div>
+    <div>
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const emailForm = reactive({
+  identifier: ""
+});
+
+const emailFormSent = ref(false);
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const registrationEnabled = ref<boolean>(true);
+const apiBase = useCookie("api_base");
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const token = ref(searchParams.get("token"))
+searchParams.delete("token");
+const { resetPassword } = useApi();
+
+const registerUrl = `/register?${searchParams}`;
+const loginUrl = `/login?${searchParams}`;
+
+if (apiBase.value) {
+	console.log("apiBase:", apiBase.value);
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
+	}
+}
+
+const { sendPasswordResetEmail } = useApi();
+
+async function sendEmail() {
+  try {
+    await sendPasswordResetEmail(emailForm.identifier);
+    emailFormSent.value = true;
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo(`/login?${searchParams}`);
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/register.vue b/pages/register.vue
index 708fed0..36bdb53 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -86,6 +86,7 @@ const auth = useAuth();
 const loggedIn = ref(await auth.getUser());
 
 const query = new URLSearchParams(useRoute().query as Record<string, string>);
+query.delete("token");
 
 const user = await useAuth().getUser();
 
diff --git a/pages/reset-password.vue b/pages/reset-password.vue
new file mode 100644
index 0000000..8f869c4
--- /dev/null
+++ b/pages/reset-password.vue
@@ -0,0 +1,56 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+    <form @submit.prevent="sendPassword">
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="passwordForm.password">
+      </div>
+      <div>
+        <Button type="submit" text="Submit" variant="normal" />
+      </div>
+    </form>
+	<div>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const loginUrl = `/login?${searchParams}`;
+
+const token = ref(searchParams.get("token"))
+
+if (!token.value) await navigateTo("/login");
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const { resetPassword } = useApi();
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo("/login?");
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
new file mode 100644
index 0000000..e712555
--- /dev/null
+++ b/utils/getDisplayName.ts
@@ -0,0 +1,7 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export function getDisplayName(user: UserResponse, member?: GuildMemberResponse): string {
+	if (member?.nickname) return member.nickname
+	if (user.display_name) return user.display_name
+	return user.username
+}
\ No newline at end of file
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index cab6152..8ee0c28 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -7,7 +7,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 	}