diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
index 209ffab..2ec68a2 100644
--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@@ -8,6 +8,16 @@
 
 <script lang="ts" setup>
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+
+onMounted(async () => {
+	updateNavbar({isDirectMessages: true})
+
+})
+
+onActivated(async () => {
+	updateNavbar({isDirectMessages: true})
+
+})
 </script>
 
 <style>
diff --git a/pages/me/index.vue b/pages/me/index.vue
index a48fb72..5691b79 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -23,12 +23,10 @@ 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';
-import type { NavbarInterface } from '~/types/interfaces';
 
 const { fetchFriends } = useApi();
 
 let filter = ref("all");
-const navbar = useState<NavbarInterface>("navbar")
 
 const friends = await fetchFriends()
 
@@ -37,21 +35,12 @@ function updateFilter(newFilter: string) {
 }
 
 onMounted(async () => {
-	updateNavbar()
+	updateNavbar({isDirectMessages: true})
 })
 
 onActivated(async () => {
-	updateNavbar()
+	updateNavbar({isDirectMessages: true})
 })
-
-function updateNavbar() {
-	if (navbar.value) {
-		navbar.value.channelItems = []
-		navbar.value.contextName = "Direct Messages"
-		navbar.value.contextIcon = undefined
-		navbar.value.guildUuid = undefined
-	}
-}
 </script>
 
 <style module>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6e30d56..b8ea85f 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -67,12 +67,12 @@ onMounted(async () => {
 	await setArrayVariables();
 	console.log("set array variables");
 
-	updateNavbar()
+	updateNavbar({guild: server.value})
 });
 
 onActivated(async () => {
 	console.log("activating");
-	updateNavbar()
+	updateNavbar({guild: server.value})
 
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
@@ -105,13 +105,6 @@ function toggleInvitePopup(e: Event) {
 function handleMemberClick(member: GuildMemberResponse) {
 }
 
-function updateNavbar() {
-	if (server.value) {
-		navbar.value.contextName = server.value.name
-		navbar.value.contextIcon = server.value.icon ?? undefined
-		navbar.value.guildUuid = server.value.uuid
-	}
-}
 </script>
 
 <style>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index dc0c9f6..62a7c16 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -137,3 +137,9 @@ export interface NavbarInterface {
 	guildUuid?: string
 }
 
+export interface NavbarOptions {
+	guild?: GuildResponse
+	channel?: ChannelResponse
+	isDirectMessages?: boolean
+}
+
diff --git a/utils/updateNavbar.ts b/utils/updateNavbar.ts
new file mode 100644
index 0000000..1d99501
--- /dev/null
+++ b/utils/updateNavbar.ts
@@ -0,0 +1,22 @@
+import type { NavbarInterface, NavbarOptions } from "~/types/interfaces";
+
+const navbar = useState<NavbarInterface>("navbar")
+
+export default async (options: NavbarOptions) => {
+	await nextTick()
+	
+	if (navbar.value) {
+		if (options.guild) {
+			navbar.value.channelItems = []
+			navbar.value.contextName = options.guild?.name
+			navbar.value.contextIcon = options.guild?.icon ?? undefined
+			navbar.value.guildUuid = options.guild?.uuid
+		}
+		else if (options.isDirectMessages) {
+			navbar.value.channelItems = []
+			navbar.value.contextName = "Direct Messages"
+			navbar.value.contextIcon = undefined
+			navbar.value.guildUuid = undefined
+		}
+	}
+}
\ No newline at end of file