diff --git a/src/components/TwitchChat.vue b/src/components/TwitchChat.vue
index 1b15141..b586557 100644
--- a/src/components/TwitchChat.vue
+++ b/src/components/TwitchChat.vue
@@ -4,6 +4,7 @@ import { ref, inject } from 'vue'
 import BadgeVue from './ChatBadge.vue'
 import { getBadges } from '@/assets/badges'
 import { parseMessage } from '@/assets/messageParser'
+import { getEndpoint } from '@/mixins'
 
 import type { Badge, ParsedMessage } from '@/assets/types'
 
@@ -22,9 +23,15 @@ export default {
   },
   async setup(props) {
     let messages = ref<ParsedMessage[]>([])
-    let badges = ref<Badge[]>([])
+    let badges: Badge[] = []
     let wsLink = inject('wsLink') as string
 
+    await getEndpoint(`api/badges?channelName=${props.channelName}`)
+    .then((data) => {
+      console.log(data)
+      badges = data
+    })
+
 
     return {
       ws: new WebSocket(wsLink),
@@ -32,7 +39,7 @@ export default {
       badges,
     }
   },
-  mounted() {
+  async mounted() {
     const chatList = this.$refs.chatList as Element
     const chatStatusMessage = this.$refs.initConnectingStatus as Element
     this.ws.onmessage = (message) => {
@@ -61,7 +68,7 @@ export default {
         this.messages.shift()
       }
     },
-    getBadges(message: ParsedMessage) {
+    getBadgesFromMessage(message: ParsedMessage) {
       let badgesString = message.data.tags.badges;
       if (!badgesString) return;
       let badges = badgesString.split(',');
@@ -103,7 +110,7 @@ export default {
           <p class="text-sm items-center">
 
             <ul class="inline-flex space-x-1 pr-1">
-              <li v-for="badge in getBadges(message)" :key="badge.id">
+              <li v-for="badge in getBadgesFromMessage(message)" :key="badge.id">
                 <badge-vue :badge-info="badge"></badge-vue>
               </li>
             </ul>