diff --git a/components.d.ts b/components.d.ts
index cbe40ef..32eebef 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -35,4 +35,4 @@ declare module 'vue' {
   }
 }
 
-export {}
+export { }
diff --git a/src/App.vue b/src/App.vue
index c05d64f..65c4594 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,6 +38,7 @@ const { t } = useI18n()
 const error = ref()
 
 onErrorCaptured((e: unknown) => {
+  console.error(e)
   error.value = e
   return false
 })
diff --git a/src/composables/index.ts b/src/composables/index.ts
index a464bc3..f8db9c9 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -4,3 +4,4 @@ export * from './useModal'
 export * from './useAxios'
 export * from './useAuth'
 export * from './useEditMode'
+export * from './useFetch'
diff --git a/src/composables/useFetch.ts b/src/composables/useFetch.ts
new file mode 100644
index 0000000..32e2f33
--- /dev/null
+++ b/src/composables/useFetch.ts
@@ -0,0 +1,24 @@
+import { apiConfig } from '@/config'
+import { useAuth } from './useAuth'
+import { createFetch } from '@vueuse/core'
+
+const { token } = useAuth()
+
+export const useFetch = createFetch({
+  baseUrl: apiConfig.baseURL,
+  options: {
+    async beforeFetch({ options }) {
+      if (token.value) {
+        options.headers = {
+          ...options.headers,
+          Authorization: `API-Key ${token.value}`,
+        }
+      }
+
+      return { options }
+    },
+  },
+  fetchOptions: {
+    mode: 'cors',
+  },
+})
diff --git a/src/composables/useWishlistsStore.ts b/src/composables/useWishlistsStore.ts
index 5475f68..ef462d1 100644
--- a/src/composables/useWishlistsStore.ts
+++ b/src/composables/useWishlistsStore.ts
@@ -1,19 +1,13 @@
-import useAxios from '@/composables/useAxios'
 import { Wishlist } from '@/types'
-import { readonly, ref } from 'vue'
-const { client } = useAxios()
-const prefix = '/wishlist'
+import { Ref } from 'vue'
+import { useFetch } from './useFetch'
 
-const state = ref<Wishlist[]>([])
-
-export const fetch = async (): Promise<void> => {
-  const { data } = await client.get(prefix)
-  state.value = data
-}
+const { isFinished, error, data } = useFetch('/wishlist').json()
 
 export const useWishlistsStore = () => {
   return {
-    state: readonly(state),
-    fetch,
+    state: data as Ref<Wishlist[]>,
+    error,
+    isFinished,
   }
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 243d56b..2c4cfa1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,8 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { useWishlistsStore } from '@/composables'
 
 const { t } = useI18n()
-const { state: wishlists, fetch } = useWishlistsStore()
-await fetch()
+const { state, isFinished } = useWishlistsStore()
 </script>
 
 <template>
@@ -12,12 +11,19 @@ await fetch()
     {{ t('common.app-title.text') }}
   </h1>
   <div
-    v-if="wishlists.length > 0"
+    v-if="!isFinished"
+    class="m-20 flex flex-row content-center items-center justify-center space-x-2"
+  >
+    <IconSpinner class="h-4 w-4" />
+    <span> {{ t('common.loading.text') }} </span>
+  </div>
+  <div
+    v-else-if="state.length > 0"
     class="flex flex-row flex-wrap justify-around p-10"
   >
     <router-link
-      v-for="(item, index) in wishlists"
-      :key="index"
+      v-for="item in state"
+      :key="item.id"
       :to="'/' + item.slugUrlText"
     >
       <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />