diff --git a/components/Message.vue b/components/Message.vue
index 94636c1..e6c978d 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,13 +1,13 @@
 <template>
 	<div @click="emitId" v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :data-message-id="props.messageId">
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="author?.display_name || author?.username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username" tabindex="0">
-					{{ username }}
+					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -52,7 +52,7 @@ const dateHidden = ref<boolean>(true);
 const date = new Date(props.timestamp);
 
 console.log("message:", props.text);
-console.log("author:", props.username);
+console.log("author:", props.author);
 
 const sanitized = ref<string>();
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 2b3e408..38db13c 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -5,7 +5,7 @@
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				format="12" :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" />
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -20,11 +20,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
+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