diff --git a/src/app/(modules)/ticket/[ticketId]/page.tsx b/src/app/(modules)/ticket/[ticketId]/page.tsx
index 156129b..97abea1 100644
--- a/src/app/(modules)/ticket/[ticketId]/page.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/page.tsx
@@ -58,15 +58,17 @@ export default function TicketDetailPage() {
   }
 
   return (
-    <main className="relative z-10 space-y-5">
-      {overview ? (
-        <TicketDetailHeader ticket={overview} />
-      ) : (
-        <TicketOverviewHeaderSkeleton />
-      )}
+    <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">
+      <div className="xl:shrink-0">
+        {overview ? (
+          <TicketDetailHeader ticket={overview} />
+        ) : (
+          <TicketOverviewHeaderSkeleton />
+        )}
+      </div>
 
-      <div className="grid gap-5 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">
-        <div className="space-y-5">
+      <div className="grid items-start gap-5 xl:min-h-0 xl:flex-1 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)] xl:items-stretch xl:overflow-hidden">
+        <div className="space-y-5 xl:min-h-0 xl:overflow-y-auto xl:overscroll-contain xl:pr-2">
           {overview ? (
             <TicketOverviewCard ticket={overview} />
           ) : (
@@ -79,7 +81,7 @@ export default function TicketDetailPage() {
           ) : null}
         </div>
 
-        <div className="space-y-3 self-start">
+        <div className="space-y-3 self-start xl:min-h-0 xl:self-stretch xl:overflow-y-auto xl:overscroll-contain xl:pr-2">
           {isClassDetailLoading ? <TicketClassActionsSkeleton /> : null}
           {!isClassDetailLoading && classDetail ? (
             <TicketStatusActions ticket={classDetail} />