diff --git a/src/views/SearchPageView.vue b/src/views/SearchPageView.vue
index 7c567c6..4ecb065 100644
--- a/src/views/SearchPageView.vue
+++ b/src/views/SearchPageView.vue
@@ -1,33 +1,37 @@
 <script lang="ts">
-import { type Ref, ref } from 'vue'
+import { ref } from 'vue'
+
 import CategoryPreview from '@/components/CategoryPreview.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ChannelPreview from '@/components/ChannelPreview.vue'
 
+import { getEndpoint } from '@/mixins'
+import type { ApiResponse, SearchResult, StreamerData } from '@/types'
+
 export default {
     inject: ['protocol'],
     setup() {
-        let data: Ref<any> = ref(null)
+        let data = ref<SearchResult>()
+        const status = ref<"ok" | "error">()
         return {
             data,
+            status,
         }
     },
     async mounted() {
-        try {
-            const res = await fetch(`${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/search/?query=${this.$route.query.query}`)
-            const rawData = await res.json()
-
-            this.data = rawData.data
-            this.data.query = this.$route.query.query
-        } catch (e) {
-            this.data = { status: 'error' }
-        }
 
+        await getEndpoint("api/search/?query=" + this.$route.query.query)
+        .catch(() => {
+            this.status = "error"
+        })
+        .then((data) => {
+            this.data = data as SearchResult
+        })
     },
     methods: {
-        getStream(channel: any) {
+        getStream(channel: StreamerData) {
             return {
                 ...channel.stream,
                 streamer: {
@@ -47,33 +51,33 @@ export default {
 }
 </script>
 <template>
-    <loading-screen v-if="!data"></loading-screen>
-    <error-message v-else-if="data.status === 'error' || !data"></error-message>
+    <loading-screen v-if="!data && status != 'error'"></loading-screen>
+    <error-message v-else-if="status == 'error'"></error-message>
 
 
-    <div v-else class="p-3 space-y-5">
+    <div v-else-if="data" class="p-3 space-y-5">
         <div v-if="data.channels.length > 0">
-            <h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ data.query }}"</h1>
+            <h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ $route.query.query }}"</h1>
             <ul class="flex overflow-x-scroll overflow-y-hidden">
-                <li v-for="channel in data.channels" :key="channel" class="m-2 hover:scale-105 transition-transform">
+                <li v-for="channel in data.channels" class="m-2 hover:scale-105 transition-transform">
                     <channel-preview :channel="channel"></channel-preview>
                 </li>
             </ul>
         </div>
 
         <div v-if="data.categories.length > 0">
-            <h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ data.query }}"</h1>
+            <h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ $route.query.query }}"</h1>
             <ul class="flex max-w-[100vw] max-h-[27rem] overflow-x-scroll overflow-y-hidden">
-                <li v-for="category in data.categories" :key="category" class="m-2 hover:scale-105 transition-transform">
+                <li v-for="category in data.categories" class="m-2 hover:scale-105 transition-transform">
                     <category-preview :category-data="category"></category-preview>
                 </li>
             </ul>
         </div>
 
         <div v-if="data.relatedChannels.length > 0">
-            <h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ data.query }}"</h1>
+            <h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ $route.query.query }}"</h1>
             <ul class="flex overflow-x-scroll space-x-5 ">
-                <li v-for="channel in data.relatedChannels" :key="channel">
+                <li v-for="channel in data.relatedChannels">
                     <stream-preview-vue :stream="getStream(channel)"></stream-preview-vue>
                 </li>
             </ul>
@@ -81,9 +85,9 @@ export default {
 
 
         <div v-if="data.channelsWithTag.length > 0">
-            <h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ data.query }}"</h1>
+            <h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ $route.query.query }}"</h1>
             <ul class="inline-flex overflow-y-hidden overflow-x-scroll max-w-[100vw] space-x-5">
-                <li v-for="channel in data.channelsWithTag" :key="channel">
+                <li v-for="channel in data.channelsWithTag">
                     <channel-preview :channel="channel"></channel-preview>
                 </li>
             </ul>
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index ce6adfb..a50940d 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -62,12 +62,11 @@ export default {
 </script>
 
 <template>
-  <loading-screen v-if="!data"></loading-screen>
-
-  <error-message v-else-if="status === 'error'"></error-message>
+    <loading-screen v-if="!data && status != 'error'"></loading-screen>
+    <error-message v-else-if="status == 'error'"></error-message>
 
   <div
-    v-else
+    v-else-if="data"
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
     <div