diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index db33fd9..31e7c93 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -21,7 +21,7 @@
   import MatchHistory from "./components/MatchHistory.svelte";
   import Friends, { addFriend } from "./components/Friends.svelte";
   import Chat from "./components/Chat.svelte";
-  import Channels from "./components/Channels.svelte";
+  import Channels, { formatChannelNames } from "./components/Channels.svelte";
   import Leaderboard from "./components/Leaderboard.svelte";
 
   import Pong from "./components/Pong/Pong.svelte";
@@ -34,18 +34,16 @@
   // Single Page Application config
   let appState: string = APPSTATE.HOME;
 
-  function updateChat() {
+  async function updateChat() {
     const urlSplit = appState.split("#", 2)
-    if (urlSplit && urlSplit.length > 1) {
-      console.log(urlSplit[1])
-    }
     if (appState.includes(APPSTATE.CHANNELS) && urlSplit.length > 1) {
       const currentChannelName = appState.split("#", 2)[1];
       fetch(API_URL + "/channels", {
         credentials: "include",
         mode: "cors",
       }).then((res) => {
-        res.json().then((channels) => {
+        res.json().then(async (channels) => {
+          await formatChannelNames(channels);
           const channel = channels.find((c: ChannelsType) => c.name === currentChannelName);
           if (channel) {
             chan.selectChat(channel.id);
@@ -63,7 +61,7 @@
   window.onpopstate = (e: PopStateEvent) => {
     if (e.state) {
       appState = e.state.appState;
-      updateChat();
+      void updateChat();
     }
   };
 
@@ -75,7 +73,7 @@
     if (newState === appState) return;
     appState = newState;
     history.pushState({ appState }, "", appState);
-    updateChat();
+    void updateChat();
   }
 
   onMount(() => {
@@ -105,7 +103,8 @@
 
   let chan: Channels;
   async function openDirectChat(event: CustomEvent<string>) {
-    const DMUsername = event.detail;
+    const DMUsername = "test";
+    // const DMUsername = event.detail;
     let DMChannel: Array<ChannelsType> = [];
     const res = await getDMs($store.username)
     if (res.ok) {
diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index ac05730..114e0b2 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -10,6 +10,47 @@
   import { API_URL, store } from "../Auth";
   import { socket } from "../socket";
   import type User from "./Profile.svelte";
+
+  export async function formatChannelNames(channel: Array<ChannelsType>): Promise<void> {
+    const res = await fetch(API_URL + "/users/all", {
+      credentials: "include",
+      mode: "cors",
+    })
+    if (res.ok) {
+      const users = await res.json()
+      if (users) {
+        channel.forEach((channel) => {
+          let channelName = channel.name;
+          if (channelName.startsWith("🚪 ")) return;
+
+          const split = channelName.split("&");
+          if (split.length > 1) {
+            const firstID = parseInt(split[0]);
+            const secondID = parseInt(split[1]);
+            let newChannelName = channelName;
+
+            users.forEach((user) => {
+              if (user.ftId === firstID) {
+                newChannelName = newChannelName.replace(
+                  split[0],
+                  user.username
+                );
+              }
+              if (user.ftId === secondID) {
+                newChannelName = newChannelName.replace(
+                  split[1],
+                  user.username
+                );
+              }
+            });
+            channel.name = newChannelName;
+          } else {
+            console.log("Could not format channel name")
+          }
+        });
+      }
+    }
+  }
 </script>
 
 <script lang="ts">
@@ -178,47 +219,6 @@
   };
 
   //--------------------------------------------------------------------------------/
-
-  async function formatChannelNames(channel: Array<ChannelsType>): Promise<void> {
-    const res = await fetch(API_URL + "/users/all", {
-      credentials: "include",
-      mode: "cors",
-    })
-    if (res.ok) {
-      const users = await res.json()
-      if (users) {
-        channel.forEach((channel) => {
-          let channelName = channel.name;
-          if (channelName.startsWith("🚪 ")) return;
-
-          const split = channelName.split("&");
-          if (split.length > 1) {
-            const firstID = parseInt(split[0]);
-            const secondID = parseInt(split[1]);
-            let newChannelName = channelName;
-
-            users.forEach((user) => {
-              if (user.ftId === firstID) {
-                newChannelName = newChannelName.replace(
-                  split[0],
-                  user.username
-                );
-              }
-              if (user.ftId === secondID) {
-                newChannelName = newChannelName.replace(
-                  split[1],
-                  user.username
-                );
-              }
-            });
-            channel.name = newChannelName;
-          } else {
-            console.log("Could not format channel name")
-          }
-        });
-      }
-    }
-  }
 </script>
 
 <div class="overlay">