diff --git a/src/api/merch.js b/src/api/merch.js
index 8f9b30e..04835fd 100644
--- a/src/api/merch.js
+++ b/src/api/merch.js
@@ -1,13 +1,23 @@
 import { apiClient } from '@/services/apiClient.js'
-import router from '@/router/index.js'
 
 export const useMerchApi = () => {
   const addMerch = async (payload) => {
     const response = await apiClient.post('/merch/', payload.value)
     if (response.status === 200) {
-      router.push({ name: 'collection' })
+      return response
     } else {
-      console.log("Add merch error: ", response)
+      console.log('Add merch error: ', response)
+    }
+  }
+
+  const getMerchDetails = async (uuid) => {
+    try {
+      const response = await apiClient.get(`/merch/${uuid}`)
+      if (response.status === 200) {
+        return response
+      }
+    } catch (error) {
+      return error
     }
   }
 
@@ -22,6 +32,7 @@ export const useMerchApi = () => {
 
   return {
     addMerch,
+    getMerchDetails,
     deleteMerch,
   }
 }
diff --git a/src/views/DetailsView.vue b/src/views/DetailsView.vue
index 41e1fe6..20242d4 100644
--- a/src/views/DetailsView.vue
+++ b/src/views/DetailsView.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { apiClient } from '@/services/apiClient.js'
 import { useMerchApi } from '@/api/merch.js'
 import { onMounted, ref } from 'vue'
 import router from '@/router/index.js'
 
-const { deleteMerch } = useMerchApi()
+const { getMerchDetails, deleteMerch } = useMerchApi()
 
 const props = defineProps({
   merch_uuid: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
 const merchDetails = ref(null)
@@ -19,11 +18,12 @@ const error = ref(null)
 
 const fetchMerch = async () => {
   try {
-    const response = await apiClient.get(`/merch/${props.merch_uuid}`)
-    if (!response.status === 200) throw new Error('Network response was not ok')
+    const response = await getMerchDetails(props.merch_uuid)
     merchDetails.value = response.data
 
-    if (!response.status === 400) router.push({ name: "collection" })
+    if (!response.status === 400) {
+      router.push({ name: 'collection' })
+    }
   } catch (err) {
     error.value = err.message
   } finally {
@@ -44,14 +44,13 @@ const confirmDelete = async () => {
   try {
     const response = await deleteMerch(props.merch_uuid)
     if (!response.status === 200) throw new Error('Network response was not ok')
-    if (!response.status === 400) router.push({ name: "collection" })
-      } catch (error) {
+    if (!response.status === 400) router.push({ name: 'collection' })
+  } catch (error) {
     console.log(error)
   }
   showModal.value = false
-  router.push({ name: "collection" })
+  router.push({ name: 'collection' })
 }
-
 </script>
 
 <template>
@@ -84,9 +83,6 @@ const confirmDelete = async () => {
       <n-button @click="showModal = false">Cancel</n-button>
     </template>
   </n-modal>
-
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>