diff --git a/resources/css/app.css b/resources/css/app.css
index f2f0954..f115da1 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -330,23 +330,94 @@ html:has(.qms-display) body {
     min-height: 0;
     flex: 1;
     flex-direction: column;
-    justify-content: center;
     overflow: hidden;
-    background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
+    background: #fff;
     border: 1px solid rgb(226 232 240);
     box-shadow:
         0 1px 2px rgb(15 23 42 / 0.04),
-        0 20px 40px -16px rgb(79 70 229 / 0.15);
+        0 24px 48px -20px rgb(79 70 229 / 0.18);
+}
+
+.qms-display__ticket-accent {
+    height: 4px;
+    flex-shrink: 0;
+    background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
+}
+
+.qms-display__ticket-split {
+    display: grid;
+    min-height: 0;
+    flex: 1;
+    grid-template-columns: 1fr 1fr;
+}
+
+.qms-display__ticket-panel {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    justify-content: center;
+    padding: clamp(1rem, 3vh, 2.5rem) clamp(1.25rem, 4vw, 3rem);
+}
+
+.qms-display__ticket-panel--number {
+    align-items: center;
+    text-align: center;
+    border-right: 1px solid rgb(241 245 249);
+}
+
+.qms-display__ticket-panel--counter {
+    align-items: flex-start;
+    justify-content: center;
+    background: linear-gradient(135deg, rgb(238 242 255) 0%, rgb(224 231 255 / 0.5) 100%);
+}
+
+.qms-display__label {
+    font-size: clamp(0.65rem, 1.6vh, 0.8rem);
+    font-weight: 600;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: rgb(100 116 139);
 }
 
 .qms-display__ticket-number {
-    font-size: clamp(2.75rem, 11vh, 6rem);
+    margin-top: clamp(0.5rem, 1.5vh, 1rem);
+    font-size: clamp(3rem, 14vh, 7rem);
+    font-weight: 700;
     font-variant-numeric: tabular-nums;
     letter-spacing: -0.04em;
     line-height: 1;
     color: rgb(67 56 202);
 }
 
+.qms-display__counter-name {
+    margin-top: clamp(0.5rem, 1.5vh, 1rem);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: clamp(1.75rem, 8vh, 4.5rem);
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    color: rgb(15 23 42);
+}
+
+.qms-display__counter-arrow {
+    display: flex;
+    margin-top: clamp(0.75rem, 2vh, 1.25rem);
+    align-items: center;
+    gap: 0.5rem;
+    font-size: clamp(0.7rem, 1.5vh, 0.875rem);
+    font-weight: 600;
+    color: rgb(79 70 229);
+}
+
+.qms-display__ticket--empty {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
+}
+
 .qms-display__live-dot {
     animation: qms-display-pulse 2s ease-in-out infinite;
 }
diff --git a/resources/views/qms/display/public.blade.php b/resources/views/qms/display/public.blade.php
index ad14f7c..9ab1f3b 100644
--- a/resources/views/qms/display/public.blade.php
+++ b/resources/views/qms/display/public.blade.php
@@ -71,28 +71,36 @@
             </div>
         </header>
 
-        <main class="qms-display__main mx-auto w-full max-w-6xl px-5 py-4 lg:px-8 lg:py-6">
+        <main class="qms-display__main mx-auto w-full max-w-6xl px-5 py-4 lg:px-8 lg:py-5">
             <section class="flex min-h-0 flex-1 flex-col">
-                <div class="mb-3 shrink-0 text-center">
-                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600">Now serving</p>
-                    <p class="mt-1 text-sm text-slate-500">Please proceed to your counter when your number appears</p>
-                </div>
+                <p class="mb-3 shrink-0 text-center text-xs font-semibold uppercase tracking-[0.25em] text-indigo-600">Now serving</p>
 
                 <div class="qms-display__tickets" x-show="(payload?.now_serving ?? []).length">
                     <template x-for="item in (payload?.now_serving ?? []).slice(0, 3)" :key="item.ticket_number + (item.counter ?? '')">
-                        <article class="qms-display__ticket rounded-2xl px-6 py-4 text-center lg:rounded-3xl lg:px-8">
-                            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Ticket number</p>
-                            <p class="qms-display__ticket-number mt-2 font-bold" x-text="item.ticket_number"></p>
-                            <div class="mt-4 inline-flex max-w-full items-center gap-2 rounded-full border border-indigo-100 bg-indigo-50 px-4 py-2">
-                                <span class="text-xs font-semibold uppercase tracking-widest text-indigo-600">Proceed to</span>
-                                <span class="truncate text-lg font-semibold text-indigo-900 lg:text-xl" x-text="item.counter ?? '—'"></span>
+                        <article class="qms-display__ticket rounded-2xl lg:rounded-3xl">
+                            <div class="qms-display__ticket-accent" aria-hidden="true"></div>
+                            <div class="qms-display__ticket-split">
+                                <div class="qms-display__ticket-panel qms-display__ticket-panel--number">
+                                    <span class="qms-display__label">Ticket</span>
+                                    <p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
+                                </div>
+                                <div class="qms-display__ticket-panel qms-display__ticket-panel--counter">
+                                    <span class="qms-display__label">Please proceed to</span>
+                                    <p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
+                                    <div class="qms-display__counter-arrow">
+                                        <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+                                        </svg>
+                                        <span>Your counter is ready</span>
+                                    </div>
+                                </div>
                             </div>
                         </article>
                     </template>
                 </div>
 
                 <div
-                    class="qms-display__ticket flex min-h-0 flex-1 flex-col items-center justify-center rounded-2xl px-6 py-8 text-center lg:rounded-3xl"
+                    class="qms-display__ticket qms-display__ticket--empty flex min-h-0 flex-1 flex-col rounded-2xl px-6 py-8 lg:rounded-3xl"
                     x-show="!(payload?.now_serving ?? []).length"
                 >
                     <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 ring-1 ring-slate-200 lg:h-14 lg:w-14">