diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index b21312c..3981f8a 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { renderTicketQr } from '../lib/ticketQr'
 import { RouterLink, onBeforeRouteLeave } from 'vue-router'
 import { useUserTickets } from '../composables/useUserTickets'
 import { useEvents } from '../composables/useEvents'
@@ -134,13 +135,7 @@ async function generateQRCode(ticketId: string) {
   if (qrCodes.value[ticketId]) return qrCodes.value[ticketId]
 
   try {
-    const qrcode = await import('qrcode')
-    const ticketUrl = `ticket://${ticketId}`
-    const dataUrl = await qrcode.toDataURL(ticketUrl, {
-      width: 200,
-      margin: 2,
-      color: { dark: '#000000', light: '#FFFFFF' }
-    })
+    const dataUrl = await renderTicketQr(ticketId, { width: 200 })
     qrCodes.value[ticketId] = dataUrl
     return dataUrl
   } catch (error) {