diff --git a/src/components/events/PurchaseTicketDialog.vue b/src/components/events/PurchaseTicketDialog.vue
index 4005b38..c273c1d 100644
--- a/src/components/events/PurchaseTicketDialog.vue
+++ b/src/components/events/PurchaseTicketDialog.vue
@@ -229,9 +229,11 @@ onUnmounted(() => {
         <div class="bg-muted/50 rounded-lg p-4">
           <div class="flex flex-col items-center space-y-3">
             <img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
-            <div class="text-center">
-              <p class="text-xs text-muted-foreground">Ticket ID</p>
-              <p class="text-xs font-mono">{{ purchasedTicketId }}</p>
+            <div class="text-center w-full">
+              <p class="text-xs text-muted-foreground mb-1">Ticket ID</p>
+              <div class="bg-background border rounded px-2 py-1 max-w-full">
+                <p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/MyTickets.vue b/src/pages/MyTickets.vue
index 7accfd9..21f11f2 100644
--- a/src/pages/MyTickets.vue
+++ b/src/pages/MyTickets.vue
@@ -190,7 +190,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -262,7 +264,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -330,7 +334,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -402,7 +408,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>