diff --git a/src/components/StreamPreview.vue b/src/components/StreamPreview.vue
index f469e2f..2c0e2ed 100644
--- a/src/components/StreamPreview.vue
+++ b/src/components/StreamPreview.vue
@@ -6,6 +6,10 @@ export interface Stream {
   startedAt: number
   viewers: number
   preview: string
+  streamer: {
+    pfp: string
+    name: string
+  }
 }
 
 export default {
@@ -16,17 +20,18 @@ export default {
     }
   },
   async setup(props) {
-    let streamData: Stream
+
+    let streamData: Stream | null = null
     if (!props.stream && props.name) {
       const streamDataFetch = await fetch(
         `${import.meta.env.VITE_BACKEND_URL}/api/users/${props.name}`
       )
       const data = await streamDataFetch.json()
 
-      if (!data.stream) return
-
-      data.stream.streamer = { name: props.name, pfp: data.pfp }
-      streamData = data.stream
+      if(data.stream) {
+        data.stream.streamer = { name: props.name, pfp: data.pfp }
+        streamData = data.stream
+      }
     } else {
       streamData = props.stream as Stream
     }
@@ -51,7 +56,8 @@ export default {
 </script>
 
 <template>
-  <div class="bg-ctp-crust rounded-lg w-[27rem]">
+  <div v-if="streamData">
+    <div class="bg-ctp-crust rounded-lg w-[27rem]">
     <a :href="`${this.frontend_url}/${streamData.streamer.name}`">
       <img :src="streamData.preview" class="rounded-lg rounded-b-none" />
     </a>
@@ -73,4 +79,5 @@ export default {
       </div>
     </div>
   </div>
+  </div>
 </template>