diff --git a/src/app/(modules)/ticket/[ticketId]/assign/page.tsx b/src/app/(modules)/ticket/[ticketId]/assign/page.tsx
index 6e44fdb..d17c753 100644
--- a/src/app/(modules)/ticket/[ticketId]/assign/page.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/assign/page.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { AlertTriangle, ArrowLeft, LockKeyhole } from 'lucide-react';
 
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -78,7 +79,7 @@ export default function TicketAssignmentPage() {
     );
   }
 
-  const ticketLabel = overview.ticket_name || overview.id;
+  const ticketName = overview.ticket_name || 'Unnamed ticket';
 
   return (
     <main className="relative z-10 space-y-5 xl:flex xl:h-[calc(100vh-6.5rem)] xl:min-h-0 xl:flex-col xl:gap-5 xl:space-y-0 xl:overflow-hidden">
@@ -93,13 +94,17 @@ export default function TicketAssignmentPage() {
         >
           <ArrowLeft />
         </Button>
-        <div className="min-w-0 space-y-1">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
           <h1 className="text-2xl font-semibold tracking-tight">
-            Assign ticket
+            Assign Ticket
           </h1>
-          <p className="truncate text-sm text-muted-foreground">
-            Ticket: {ticketLabel}
-          </p>
+          <Badge
+            variant="secondary"
+            className="max-w-full font-mono text-xs"
+            title={ticketName}
+          >
+            <span className="truncate">{ticketName}</span>
+          </Badge>
         </div>
       </header>