diff --git a/src/views/AddMerchView.vue b/src/views/AddMerchView.vue
index 18ac642..8d4c11e 100644
--- a/src/views/AddMerchView.vue
+++ b/src/views/AddMerchView.vue
@@ -1,22 +1,19 @@
 <script setup>
-
 import router from '@/router/index.js'
 import { computed, ref } from 'vue'
-
-const addMerch = async () => {
-  router.push({ name: 'collection' })
-}
+import { apiClient } from '@/services/apiClient.js'
 
 const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
 
 const name = ref('')
 
 // surugaya block
+const surugayaLink = ref('')
 const checkCookie = ref(true)
 const surugayaDefaultCookieValues = ref('safe_search_expired=2;safe_search_option=3')
 const surugayaCustomCookieValues = ref('')
 
-const cookieValue = computed({
+const surugayaCookieValue = computed({
   get() {
     return checkCookie.value ? surugayaDefaultCookieValues.value : surugayaCustomCookieValues.value
   },
@@ -24,7 +21,7 @@ const cookieValue = computed({
     if (!checkCookie.value) {
       surugayaCustomCookieValues.value = newValue
     }
-  }
+  },
 })
 
 // mandarake block
@@ -35,7 +32,7 @@ const mandarakeAutocomplete = computed(() => {
   return `${mandarakeLink}${name.value}`
 })
 
-const inputValue = computed({
+const mandarakeResultLink = computed({
   get() {
     return checkAutoComplete.value ? mandarakeAutocomplete.value : customLink.value
   },
@@ -43,8 +40,33 @@ const inputValue = computed({
     if (!checkAutoComplete.value) {
       customLink.value = newValue
     }
+  },
+})
+
+// payload
+
+const payload = computed(() => {
+  return {
+    merch_uuid: null,
+    name: name.value,
+    origin_mandarake: {
+      link: mandarakeResultLink.value,
+    },
+    origin_surugaya: {
+      cookie_values: surugayaCookieValue.value,
+      link: surugayaLink.value,
+    },
   }
 })
+
+const addMerch = async () => {
+  const response = await apiClient.post('/merch/', payload.value)
+  if (response.status === 200) {
+    router.push({ name: 'collection' })
+  } else {
+    console.log("Add merch error: ", response)
+  }
+}
 </script>
 
 <template>
@@ -59,23 +81,19 @@ const inputValue = computed({
       <n-divider title-placement="left">Origins</n-divider>
       <div>
         <h3>Surugaya</h3>
-        <n-input class="mt-10" clearable placeholder="Link" />
+        <n-input class="mt-10" clearable placeholder="Link" v-model:value="surugayaLink" />
         <n-input
           class="mt-10"
           clearable
           placeholder="Cookie values"
-          v-model:value="cookieValue"
+          v-model:value="surugayaCookieValue"
         />
         <n-checkbox v-model:checked="checkCookie">Default values</n-checkbox>
       </div>
 
       <div>
         <h3>Mandarake</h3>
-        <n-input
-          v-model:value="inputValue"
-          class="mt-10"
-          clearable
-          placeholder="Link" />
+        <n-input v-model:value="mandarakeResultLink" class="mt-10" clearable placeholder="Link" />
         <n-checkbox v-model:checked="checkAutoComplete">Auto-complete link</n-checkbox>
       </div>