diff --git a/components/Me/FriendsList.vue b/components/Me/FriendsList.vue
index 44c606f..6c9fded 100644
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@@ -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/composables/api.ts b/composables/api.ts
index 0b438a6..48633e5 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> {
diff --git a/utils/getDisplayName.ts b/utils/getDisplayName.ts
new file mode 100644
index 0000000..52474f3
--- /dev/null
+++ b/utils/getDisplayName.ts
@@ -0,0 +1,7 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export function getDisplayName(user: UserResponse, member: GuildMemberResponse | undefined = undefined): string {
+	if (member?.nickname) return member.nickname
+	if (user.display_name) return user.display_name
+	return user.username
+}
\ No newline at end of file