diff --git a/admin/src/components/ContributionLink/ContributionLinkList.vue b/admin/src/components/ContributionLink/ContributionLinkList.vue
index d22ef3af9..009746611 100644
--- a/admin/src/components/ContributionLink/ContributionLinkList.vue
+++ b/admin/src/components/ContributionLink/ContributionLinkList.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="contribution-link-list">
-    <BTable :items="items" :fields="fields" striped hover stacked="lg">
+    <BTable :items="props.items" :fields="fields" striped hover stacked="lg">
       <template #cell(delete)="data">
         <BButton
           variant="danger"
           size="md"
           class="mr-2 test-delete-link"
-          @click="deleteContributionLink(data.item.id, data.item.name)"
+          @click="handleDelete(data)"
         >
           <IBiTrash />
         </BButton>
@@ -28,7 +28,7 @@
       </template>
     </BTable>
 
-    <BModal ref="my-modal" ok-only hide-header-close>
+    <BModal id="qr-link-modal" v-model="qrLinkModal" ref="my-modal" ok-only hide-header-close>
       <BCard header-tag="header" footer-tag="footer">
         <template #header>
           <h6 class="mb-0">{{ modalData ? modalData.name : '' }}</h6>
@@ -42,90 +42,103 @@
         </template>
       </BCard>
     </BModal>
+    <BModal id="delete-link-modal" v-model="deleteLinkModal" @ok="executeDelete">
+      <template #default>
+        {{ t('contributionLink.deleteNow', { name: itemToBeDeleted.name }) }}
+      </template>
+    </BModal>
   </div>
 </template>
-<script>
+
+<script setup>
+import { ref } from 'vue'
+import { useMutation } from '@vue/apollo-composable'
 import { deleteContributionLink } from '@/graphql/deleteContributionLink.js'
 import FigureQrCode from '../FigureQrCode'
+import { useModal } from 'bootstrap-vue-next'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'ContributionLinkList',
-  components: {
-    FigureQrCode,
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
   },
-  props: {
-    items: { type: Array, required: true },
-  },
-  emits: [
-    'close-contribution-form',
-    'edit-contribution-link-data',
-    'get-contribution-links',
-    'get-contribution-link',
-  ],
-  data() {
-    return {
-      fields: [
-        'name',
-        'memo',
-        'amount',
-        { key: 'cycle', label: this.$t('contributionLink.cycle') },
-        { key: 'maxPerCycle', label: this.$t('contributionLink.maxPerCycle') },
-        {
-          key: 'validFrom',
-          label: this.$t('contributionLink.validFrom'),
-          formatter: (value, key, item) => {
-            if (value) {
-              return this.$d(new Date(value))
-            }
-          },
-        },
-        {
-          key: 'validTo',
-          label: this.$t('contributionLink.validTo'),
-          formatter: (value, key, item) => {
-            if (value) {
-              return this.$d(new Date(value))
-            }
-          },
-        },
-        'delete',
-        'edit',
-        'show',
-      ],
-      modalData: {},
-    }
-  },
-  methods: {
-    deleteContributionLink(id, name) {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('contributionLink.deleteNow', { name: name }))
-        .then(async (value) => {
-          if (value)
-            await this.$apollo
-              .mutate({
-                mutation: deleteContributionLink,
-                variables: {
-                  id: id,
-                },
-              })
-              .then(() => {
-                this.toastSuccess(this.$t('contributionLink.deleted'))
-                this.$emit('close-contribution-form')
-                this.$emit('get-contribution-links')
-              })
-              .catch((err) => {
-                this.toastError(err.message)
-              })
-        })
-    },
-    editContributionLink(row) {
-      this.$emit('edit-contribution-link-data', row)
-    },
+})
 
-    showContributionLink(row) {
-      this.modalData = row
-      this.$refs['my-modal'].show()
-    },
+const qrLinkModal = ref(false)
+const { show: showQrCodeModal } = useModal('qr-link-modal')
+
+const deleteLinkModal = ref(false)
+const { show: showDeleteLinkModal } = useModal('delete-link-modal')
+
+const emit = defineEmits([
+  'close-contribution-form',
+  'get-contribution-links',
+  'edit-contribution-link-data',
+])
+
+const { t, d } = useI18n()
+const { toastError, toastSuccess } = useAppToast()
+
+const modalData = ref({})
+
+const fields = ref([
+  'name',
+  'memo',
+  'amount',
+  { key: 'cycle', label: t('contributionLink.cycle') },
+  { key: 'maxPerCycle', label: t('contributionLink.maxPerCycle') },
+  {
+    key: 'validFrom',
+    label: t('contributionLink.validFrom'),
+    formatter: (value) => (value ? d(new Date(value)) : ''),
   },
+  {
+    key: 'validTo',
+    label: t('contributionLink.validTo'),
+    formatter: (value) => (value ? d(new Date(value)) : ''),
+  },
+  'delete',
+  'edit',
+  'show',
+])
+
+const { mutate: deleteContributionLinkMutation } = useMutation(deleteContributionLink)
+
+const itemToBeDeleted = ref({})
+
+const handleDelete = async (dataPayload) => {
+  itemToBeDeleted.value = { ...dataPayload.item }
+  showDeleteLinkModal()
 }
+
+const executeDelete = async () => {
+  try {
+    await deleteContributionLinkMutation({ id: parseInt(itemToBeDeleted.value.id) })
+    toastSuccess(t('contributionLink.deleted'))
+    emit('close-contribution-form')
+    emit('get-contribution-links')
+    itemToBeDeleted.value = {}
+  } catch (err) {
+    toastError(err.message)
+  }
+}
+
+const editContributionLink = (row) => {
+  emit('edit-contribution-link-data', row)
+}
+
+const showContributionLink = (row) => {
+  modalData.value = row
+  showQrCodeModal()
+}
+
+defineExpose({
+  fields,
+  modalData,
+  deleteContributionLink,
+  editContributionLink,
+  showContributionLink,
+})
 </script>
diff --git a/admin/src/components/FigureQrCode.vue b/admin/src/components/FigureQrCode.vue
index 353c0d87d..edea28ad8 100644
--- a/admin/src/components/FigureQrCode.vue
+++ b/admin/src/components/FigureQrCode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="figure-qr-code">
     <div class="qrbox">
-      <q-r-canvas :options="options" class="canvas" />
+      <q-r-canvas v-if="showQr" :options="qrOptions" class="canvas" />
     </div>
   </div>
 </template>
@@ -18,26 +18,26 @@ export default {
   },
   data() {
     return {
-      options: {
+      image: null,
+      showQr: false,
+    }
+  },
+  computed: {
+    qrOptions() {
+      return {
         cellSize: 8,
         correctLevel: 'H',
         data: this.link,
-        logo: {
-          image: null,
-        },
-      },
-    }
+        logo: { image: this.image },
+      }
+    },
   },
   created() {
     const image = new Image()
-    image.src = 'img/gdd-coin.png'
+    image.src = '/img/gdd-coin.png'
     image.onload = () => {
-      this.options = {
-        ...this.options,
-        logo: {
-          image,
-        },
-      }
+      this.image = image
+      this.showQr = true
     }
   },
 }
diff --git a/admin/yarn.lock b/admin/yarn.lock
index c64a17612..8f1707178 100644
--- a/admin/yarn.lock
+++ b/admin/yarn.lock
@@ -8279,7 +8279,7 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-qrcanvas-vue@3.0.0:
+qrcanvas-vue@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/qrcanvas-vue/-/qrcanvas-vue-3.0.0.tgz#4bdba09b8050bcc0880d8859b5835cc4b2919248"
   integrity sha512-B7LgAyOEJWf8Bz0y2J8M0OXE77uNWcH7PWr6q8ihyuQE5NP9zopY9wJGTZIT6Mu7oEOczPHMLDedZqFCT2Qxdw==