diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index 3ef8ba8c..1e1dfdbe 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -2,7 +2,7 @@
 import { Button } from '#components'
 import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps({
   data: {
@@ -102,12 +102,14 @@ onMounted(() => {
     <div
       ref="qrCodeEl"
       :data-text="data"
+      class="bg-white p-1 rounded-lg"
     />
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
       <div class="relative flex items-center">
         <div
-          class="w-8 h-8 rounded-full border cursor-pointer overflow-hidden"
+          class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-600 cursor-pointer overflow-hidden"
           :style="{ backgroundColor: color }"
+          title="Change QR code color"
         >
           <input
             v-model="color"