diff --git a/app/Http/Controllers/Qms/KioskDeviceController.php b/app/Http/Controllers/Qms/KioskDeviceController.php
index 0449cbd..066377b 100644
--- a/app/Http/Controllers/Qms/KioskDeviceController.php
+++ b/app/Http/Controllers/Qms/KioskDeviceController.php
@@ -33,6 +33,7 @@ class KioskDeviceController extends Controller
 
         return view('qms.kiosk.device', [
             'device' => $device,
+            'organization' => $organization,
             'queues' => $queues,
             'settings' => $settings,
             'logoUrl' => $organization
@@ -41,7 +42,6 @@ class KioskDeviceController extends Controller
             'logoAlt' => $organization
                 ? OrganizationBranding::logoAlt($organization)
                 : 'Ladill Queue',
-            'poweredByLogoUrl' => OrganizationBranding::assetUrl(OrganizationBranding::POWERED_BY_LOGO),
         ]);
     }
 
diff --git a/resources/css/app.css b/resources/css/app.css
index 98cbbee..76807c0 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -428,104 +428,14 @@ html:has(.qms-display) body {
         rgb(255 255 255 / 0.97);
 }
 
-/* Self-service kiosk */
-html:has(.qms-kiosk),
-html:has(.qms-kiosk) body,
-html:has(.qms-kiosk) .qms-kiosk {
+/* Self-service kiosk — ticket number sizing (Frontdesk-style shell uses Tailwind) */
+html:has(.qms-kiosk__ticket-number),
+html:has(.qms-kiosk__ticket-number) body {
     font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
 }
 
-html:has(.qms-kiosk),
-html:has(.qms-kiosk) body {
-    height: 100%;
-    overflow: hidden;
-}
-
-.qms-kiosk {
-    display: flex;
-    flex-direction: column;
-    height: 100dvh;
-    max-height: 100dvh;
-    overflow: hidden;
-    background:
-        radial-gradient(ellipse 90% 60% at 50% -20%, rgb(238 242 255 / 0.9), transparent),
-        linear-gradient(180deg, rgb(248 250 252) 0%, rgb(255 255 255) 100%);
-    color: rgb(15 23 42);
-}
-
-.qms-kiosk__shell {
-    display: flex;
-    min-height: 0;
-    flex: 1;
-    flex-direction: column;
-}
-
-.qms-kiosk__main {
-    display: flex;
-    min-height: 0;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.qms-kiosk__queue-grid {
-    display: grid;
-    width: 100%;
-    gap: 0.75rem;
-}
-
-.qms-kiosk__queue-btn {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: 1rem;
-    border-radius: 1rem;
-    border: 1px solid rgb(226 232 240);
-    background: #fff;
-    padding: 1rem 1.25rem;
-    text-align: left;
-    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.qms-kiosk__queue-btn:hover {
-    border-color: rgb(165 180 252);
-    box-shadow: 0 8px 24px -12px rgb(79 70 229 / 0.25);
-}
-
-.qms-kiosk__queue-btn:disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
-.qms-kiosk__queue-mark {
-    display: flex;
-    height: 2.75rem;
-    width: 2.75rem;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: #fff;
-}
-
-.qms-kiosk__ticket-card {
-    width: 100%;
-    border-radius: 1.5rem;
-    border: 1px solid rgb(226 232 240);
-    background: #fff;
-    padding: clamp(1.5rem, 5vh, 3rem);
-    text-align: center;
-    box-shadow:
-        0 1px 2px rgb(15 23 42 / 0.04),
-        0 24px 48px -20px rgb(79 70 229 / 0.18);
-}
-
 .qms-kiosk__ticket-number {
-    font-size: clamp(3.5rem, 16vh, 7rem);
+    font-size: clamp(3.5rem, 16vh, 5.5rem);
     font-weight: 700;
     line-height: 1;
     letter-spacing: -0.04em;
diff --git a/resources/js/kiosk-flow.js b/resources/js/kiosk-flow.js
index 8e6c89e..59e7cc0 100644
--- a/resources/js/kiosk-flow.js
+++ b/resources/js/kiosk-flow.js
@@ -39,36 +39,98 @@ function pickVoice(voices, locale, preference) {
 
 export function registerKioskFlow(Alpine) {
     Alpine.data('kioskFlow', (config = {}) => ({
-        step: 'select',
+        step: 'welcome',
         queueId: null,
         customerName: '',
         customerPhone: '',
         ticket: null,
         error: null,
         loading: false,
+        idleTimer: null,
+        countdownInterval: null,
         resetCountdown: null,
-        resetTimer: null,
-        countdownTimer: null,
         issueUrl: config.issueUrl,
         csrf: config.csrf,
         queues: config.queues ?? [],
         collectName: config.collectName ?? false,
         collectPhone: config.collectPhone ?? false,
         resetSeconds: config.resetSeconds ?? 15,
-        welcomeMessage: config.welcomeMessage ?? 'Tap a service below to get your ticket',
+        welcomeMessage: config.welcomeMessage ?? null,
+
+        startTimer() {
+            this.resetIdleTimer();
+        },
+
+        resetIdleTimer() {
+            clearTimeout(this.idleTimer);
+            clearInterval(this.countdownInterval);
+            this.resetCountdown = this.resetSeconds;
+
+            this.countdownInterval = setInterval(() => {
+                this.resetCountdown -= 1;
+                if (this.resetCountdown <= 0) {
+                    clearInterval(this.countdownInterval);
+                    this.countdownInterval = null;
+                }
+            }, 1000);
+
+            this.idleTimer = setTimeout(() => this.reset(), this.resetSeconds * 1000);
+        },
+
+        clearIdleTimer() {
+            clearTimeout(this.idleTimer);
+            clearInterval(this.countdownInterval);
+            this.idleTimer = null;
+            this.countdownInterval = null;
+            this.resetCountdown = null;
+        },
+
+        beginKiosk() {
+            this.resetIdleTimer();
+
+            if (this.queues.length === 0) {
+                this.step = 'select';
+
+                return;
+            }
 
-        init() {
             if (this.queues.length === 1) {
                 this.queueId = this.queues[0].id;
+
+                if (! this.collectName && ! this.collectPhone) {
+                    this.issue();
+
+                    return;
+                }
+            }
+
+            this.step = 'select';
+        },
+
+        goBack() {
+            this.resetIdleTimer();
+            this.error = null;
+
+            if (this.step === 'details') {
+                this.step = 'select';
+
+                return;
+            }
+
+            if (this.step === 'select') {
+                this.step = 'welcome';
+                this.queueId = null;
             }
         },
 
         selectQueue(id) {
             this.queueId = id;
             this.error = null;
+            this.resetIdleTimer();
 
             if (! this.collectName && ! this.collectPhone) {
                 this.issue();
+
                 return;
             }
 
@@ -82,6 +144,7 @@ export function registerKioskFlow(Alpine) {
 
             this.loading = true;
             this.error = null;
+            this.resetIdleTimer();
 
             try {
                 const res = await fetch(this.issueUrl, {
@@ -105,7 +168,7 @@ export function registerKioskFlow(Alpine) {
 
                 this.ticket = data.data;
                 this.step = 'ticket';
-                this.scheduleReset();
+                this.resetIdleTimer();
             } catch (e) {
                 this.error = e.message || 'Something went wrong';
             } finally {
@@ -113,41 +176,16 @@ export function registerKioskFlow(Alpine) {
             }
         },
 
-        scheduleReset() {
-            this.clearResetTimers();
-            this.resetCountdown = this.resetSeconds;
-
-            this.countdownTimer = setInterval(() => {
-                this.resetCountdown -= 1;
-                if (this.resetCountdown <= 0) {
-                    this.clearResetTimers();
-                }
-            }, 1000);
-
-            this.resetTimer = setTimeout(() => this.reset(), this.resetSeconds * 1000);
-        },
-
-        clearResetTimers() {
-            if (this.resetTimer) {
-                clearTimeout(this.resetTimer);
-                this.resetTimer = null;
-            }
-            if (this.countdownTimer) {
-                clearInterval(this.countdownTimer);
-                this.countdownTimer = null;
-            }
-            this.resetCountdown = null;
-        },
-
         reset() {
-            this.clearResetTimers();
-            this.step = 'select';
-            this.queueId = this.queues.length === 1 ? this.queues[0].id : null;
+            this.clearIdleTimer();
+            this.step = 'welcome';
+            this.queueId = null;
             this.customerName = '';
             this.customerPhone = '';
             this.ticket = null;
             this.error = null;
             this.loading = false;
+            this.startTimer();
         },
 
         formatWait(seconds) {
diff --git a/resources/views/qms/kiosk/device.blade.php b/resources/views/qms/kiosk/device.blade.php
index 453c084..05ff8bd 100644
--- a/resources/views/qms/kiosk/device.blade.php
+++ b/resources/views/qms/kiosk/device.blade.php
@@ -1,17 +1,24 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full overflow-hidden bg-slate-50 font-sans">
+<html lang="en">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <meta name="theme-color" content="#f8fafc">
+    <meta name="theme-color" content="#f1f5f9">
     <title>{{ $device->name }} · Queue Kiosk</title>
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet">
     @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <style>
+        @keyframes kiosk-tap-pulse {
+            0%, 100% { transform: scale(1); box-shadow: 0 20px 40px -12px rgb(79 70 229 / 0.45); }
+            50% { transform: scale(1.02); box-shadow: 0 24px 48px -10px rgb(79 70 229 / 0.55); }
+        }
+        .kiosk-tap-btn { animation: kiosk-tap-pulse 2.4s ease-in-out infinite; }
+    </style>
 </head>
 <body
-    class="qms-kiosk font-sans text-slate-900"
+    class="min-h-screen bg-slate-100 font-sans text-slate-900 antialiased"
     x-data="kioskFlow(@js([
         'issueUrl' => route('qms.kiosk.device.issue', $device->device_token),
         'csrf' => csrf_token(),
@@ -24,152 +31,192 @@
         'collectName' => $settings['collect_name'],
         'collectPhone' => $settings['collect_phone'],
         'resetSeconds' => $settings['reset_seconds'],
-        'welcomeMessage' => $settings['welcome_message'] ?? 'Tap a service below to get your ticket',
+        'welcomeMessage' => $settings['welcome_message'] ?? null,
     ]))"
-    x-init="init()"
+    x-init="startTimer()"
 >
-    <div class="qms-kiosk__shell">
-        <header class="shrink-0 border-b border-slate-200/80 bg-white/90 px-5 py-4 backdrop-blur-md lg:px-8">
-            <div class="mx-auto flex max-w-3xl items-center justify-between gap-4">
-                <img
-                    src="{{ $logoUrl }}"
-                    alt="{{ $logoAlt }}"
-                    class="h-8 w-auto max-w-[min(100%,220px)] object-contain object-left lg:h-10"
+    <div class="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
+        <div class="absolute -left-24 top-0 h-72 w-72 rounded-full bg-indigo-200/40 blur-3xl"></div>
+        <div class="absolute -right-16 bottom-0 h-80 w-80 rounded-full bg-violet-200/40 blur-3xl"></div>
+    </div>
+
+    <div class="fixed inset-x-0 top-0 z-10 h-1.5 bg-gradient-to-r from-indigo-600 to-violet-600"></div>
+
+    @include('qms.partials.kiosk-brand', ['logoUrl' => $logoUrl, 'logoAlt' => $logoAlt])
+
+    <div class="relative mx-auto flex min-h-screen max-w-3xl flex-col pt-20">
+        {{-- Welcome --}}
+        <template x-if="step === 'welcome'">
+            <div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12 text-center">
+                <div class="max-w-xl">
+                    <p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Queue</p>
+                    <h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+                        Welcome to {{ $organization?->name ?? 'Queue' }}
+                    </h1>
+                    <p
+                        class="mt-4 text-lg text-slate-500"
+                        x-text="welcomeMessage || 'Tap below to get your ticket'"
+                    ></p>
+                </div>
+
+                <button
+                    type="button"
+                    @click="beginKiosk()"
+                    class="kiosk-tap-btn btn-primary btn-primary-lg mt-16 w-full max-w-lg py-8 text-xl font-bold"
+                    :disabled="loading"
                 >
-                <p class="text-right text-sm font-medium text-slate-500">{{ $device->name }}</p>
+                    <span x-show="!loading">Tap to begin</span>
+                    <span x-show="loading">Please wait…</span>
+                </button>
             </div>
-        </header>
+        </template>
 
-        <main class="qms-kiosk__main px-5 py-6 lg:px-8">
-            <div class="w-full max-w-2xl">
-                {{-- Queue selection --}}
-                <div x-show="step === 'select'" x-cloak>
-                    <div class="text-center">
-                        <h1 class="text-2xl font-semibold tracking-tight text-slate-900 lg:text-3xl">Welcome</h1>
-                        <p class="mt-2 text-base text-slate-500" x-text="welcomeMessage"></p>
-                    </div>
-
-                    <template x-if="queues.length === 1">
-                        <div class="mt-8">
-                            <button
-                                type="button"
-                                class="qms-kiosk__ticket-card w-full transition hover:ring-2 hover:ring-indigo-200"
-                                :disabled="loading"
-                                @click="selectQueue(queues[0].id)"
-                            >
-                                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Get ticket for</p>
-                                <p class="mt-3 text-2xl font-semibold text-slate-900" x-text="queues[0].name"></p>
-                                <p class="mt-6 text-sm font-semibold text-indigo-600" x-show="!loading">Tap here to continue</p>
-                                <p class="mt-6 text-sm font-semibold text-indigo-600" x-show="loading">Issuing your ticket…</p>
-                            </button>
-                        </div>
-                    </template>
-
-                    <template x-if="queues.length > 1">
-                        <div class="qms-kiosk__queue-grid mt-8">
-                            <template x-for="queue in queues" :key="queue.id">
-                                <button
-                                    type="button"
-                                    class="qms-kiosk__queue-btn"
-                                    :disabled="loading"
-                                    @click="selectQueue(queue.id)"
-                                >
-                                    <span
-                                        class="qms-kiosk__queue-mark"
-                                        :style="'background-color:' + (queue.color || '#4f46e5')"
-                                        x-text="queue.prefix"
-                                    ></span>
-                                    <span class="min-w-0">
-                                        <span class="block truncate text-lg font-semibold text-slate-900" x-text="queue.name"></span>
-                                        <span class="mt-0.5 block text-sm text-slate-500">Tap to get ticket</span>
-                                    </span>
-                                </button>
-                            </template>
-                        </div>
-                    </template>
-
-                    <template x-if="queues.length === 0">
-                        <div class="qms-kiosk__ticket-card mt-8">
-                            <p class="text-lg font-semibold text-slate-900">No services available</p>
-                            <p class="mt-2 text-sm text-slate-500">Ask a staff member for assistance.</p>
-                        </div>
-                    </template>
-
-                    <p x-show="error" class="mt-4 text-center text-sm text-rose-600" x-text="error"></p>
+        {{-- Service selection --}}
+        <template x-if="step === 'select'">
+            <div class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-12">
+                <div class="absolute left-6 top-8 z-10">
+                    @include('qms.partials.kiosk-back')
                 </div>
 
-                {{-- Optional details --}}
-                <div x-show="step === 'details'" x-cloak>
-                    <div class="qms-kiosk__ticket-card">
-                        <h2 class="text-xl font-semibold text-slate-900">Your details</h2>
-                        <p class="mt-1 text-sm text-slate-500">Optional information to help staff assist you.</p>
-
-                        <div class="mt-6 space-y-4 text-left">
-                            <div x-show="collectName">
-                                <label class="block text-sm font-medium text-slate-700">Name</label>
-                                <input
-                                    type="text"
-                                    x-model="customerName"
-                                    class="mt-1 w-full rounded-xl border-slate-300 text-base shadow-sm"
-                                    placeholder="Your name"
-                                    autocomplete="name"
-                                >
-                            </div>
-                            <div x-show="collectPhone">
-                                <label class="block text-sm font-medium text-slate-700">Phone</label>
-                                <input
-                                    type="tel"
-                                    x-model="customerPhone"
-                                    class="mt-1 w-full rounded-xl border-slate-300 text-base shadow-sm"
-                                    placeholder="Phone number"
-                                    autocomplete="tel"
-                                >
-                            </div>
-                        </div>
-
-                        <p x-show="error" class="mt-4 text-sm text-rose-600" x-text="error"></p>
-
-                        <div class="mt-6 flex gap-3">
-                            <button type="button" class="btn-secondary flex-1" @click="reset()" :disabled="loading">Back</button>
-                            <button type="button" class="btn-primary flex-1" @click="issue()" :disabled="loading">
-                                <span x-show="!loading">Get ticket</span>
-                                <span x-show="loading">Please wait…</span>
-                            </button>
-                        </div>
-                    </div>
+                <div class="max-w-xl text-center">
+                    <h2 class="text-2xl font-bold text-slate-900 sm:text-3xl">Choose a service</h2>
+                    <p class="mt-2 text-slate-500">Select an option to get your ticket</p>
                 </div>
 
-                {{-- Ticket issued --}}
-                <div x-show="step === 'ticket' && ticket" x-cloak>
-                    <div class="qms-kiosk__ticket-card">
-                        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Your ticket number</p>
-                        <p class="qms-kiosk__ticket-number mt-4" x-text="ticket?.ticket_number"></p>
-
-                        <div class="mt-6 space-y-2 text-sm text-slate-600">
-                            <p x-show="ticket?.position">
-                                <span class="font-medium text-slate-900" x-text="ticket?.position"></span>
-                                <span> ahead of you</span>
-                            </p>
-                            <p x-show="formatWait(ticket?.estimated_wait_seconds)" x-text="formatWait(ticket?.estimated_wait_seconds)"></p>
-                        </div>
-
-                        <p class="mt-8 text-base text-slate-600">Please take a seat. Your number will be called on the display.</p>
-
-                        <button type="button" class="btn-primary mt-8 w-full" @click="reset()">
-                            Done
-                            <span x-show="resetCountdown" x-text="'(' + resetCountdown + 's)'"></span>
+                <template x-if="queues.length === 1">
+                    <div class="mt-12 w-full max-w-lg">
+                        <button
+                            type="button"
+                            class="group flex w-full flex-col items-center rounded-3xl border-2 border-slate-200 bg-white px-6 py-10 text-center shadow-sm transition hover:border-indigo-300 hover:shadow-md active:scale-[0.98]"
+                            :disabled="loading"
+                            @click="selectQueue(queues[0].id)"
+                        >
+                            <span
+                                class="flex h-16 w-16 items-center justify-center rounded-2xl text-xl font-bold text-white transition group-hover:brightness-110"
+                                :style="'background-color:' + (queues[0].color || '#4f46e5')"
+                                x-text="queues[0].prefix"
+                            ></span>
+                            <span class="mt-5 text-xl font-bold text-slate-900" x-text="queues[0].name"></span>
+                            <span class="mt-1 text-sm text-slate-500">Tap to get ticket</span>
                         </button>
                     </div>
+                </template>
+
+                <template x-if="queues.length > 1">
+                    <div class="mt-12 grid w-full max-w-2xl gap-4 sm:grid-cols-2">
+                        <template x-for="queue in queues" :key="queue.id">
+                            <button
+                                type="button"
+                                class="group flex flex-col items-center rounded-3xl border-2 border-slate-200 bg-white px-6 py-10 text-center shadow-sm transition hover:border-indigo-300 hover:shadow-md active:scale-[0.98]"
+                                :disabled="loading"
+                                @click="selectQueue(queue.id)"
+                            >
+                                <span
+                                    class="flex h-16 w-16 items-center justify-center rounded-2xl text-xl font-bold text-white transition group-hover:brightness-110"
+                                    :style="'background-color:' + (queue.color || '#4f46e5')"
+                                    x-text="queue.prefix"
+                                ></span>
+                                <span class="mt-5 text-xl font-bold text-slate-900" x-text="queue.name"></span>
+                                <span class="mt-1 text-sm text-slate-500">Tap to get ticket</span>
+                            </button>
+                        </template>
+                    </div>
+                </template>
+
+                <template x-if="queues.length === 0">
+                    <div class="mt-12 w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm">
+                        <p class="text-lg font-semibold text-slate-900">No services available</p>
+                        <p class="mt-2 text-sm text-slate-500">Ask a staff member for assistance.</p>
+                    </div>
+                </template>
+
+                <p x-show="error" x-cloak class="mt-6 max-w-lg rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="error"></p>
+            </div>
+        </template>
+
+        {{-- Optional details --}}
+        <template x-if="step === 'details'">
+            <div class="relative flex min-h-[calc(100vh-5rem)] flex-col justify-center px-6 py-8">
+                <div class="absolute left-6 top-8 z-10">
+                    @include('qms.partials.kiosk-back')
+                </div>
+
+                <div class="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <div class="mb-6">
+                        <div class="flex items-center justify-between text-xs font-medium text-slate-500">
+                            <span>Your details</span>
+                            <span>Step 1 of 1</span>
+                        </div>
+                        <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
+                            <div class="h-full w-full rounded-full bg-gradient-to-r from-indigo-600 to-violet-600"></div>
+                        </div>
+                        <p class="mt-2 text-sm font-semibold text-slate-900">Tell us a little about yourself</p>
+                    </div>
+
+                    <p x-show="error" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="error"></p>
+
+                    <div class="space-y-4">
+                        <div x-show="collectName">
+                            <label class="block text-sm font-medium text-slate-600">Name</label>
+                            <input
+                                type="text"
+                                x-model="customerName"
+                                placeholder="Your name"
+                                autocomplete="name"
+                                class="mt-1 w-full rounded-xl border-slate-200 px-4 py-4 text-lg"
+                            >
+                        </div>
+                        <div x-show="collectPhone">
+                            <label class="block text-sm font-medium text-slate-600">Phone</label>
+                            <input
+                                type="tel"
+                                x-model="customerPhone"
+                                placeholder="Phone number"
+                                autocomplete="tel"
+                                class="mt-1 w-full rounded-xl border-slate-200 px-4 py-4 text-lg"
+                            >
+                        </div>
+                    </div>
+
+                    <button
+                        type="button"
+                        class="btn-primary mt-6 w-full py-3"
+                        @click="issue()"
+                        :disabled="loading"
+                    >
+                        <span x-show="!loading">Get ticket</span>
+                        <span x-show="loading">Please wait…</span>
+                    </button>
                 </div>
             </div>
-        </main>
+        </template>
 
-        <footer class="shrink-0 border-t border-slate-200 bg-white/80 px-5 py-3 lg:px-8">
-            <div class="mx-auto flex max-w-3xl items-center justify-center gap-2">
-                <span class="text-[10px] font-medium uppercase tracking-wider text-slate-400">Powered by</span>
-                <img src="{{ $poweredByLogoUrl }}" alt="Ladill Queue" class="h-3.5 w-auto opacity-80">
+        {{-- Ticket issued --}}
+        <template x-if="step === 'ticket' && ticket">
+            <div class="flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center px-6 py-8">
+                <div class="w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm">
+                    <div class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-indigo-100 text-4xl text-indigo-600">✓</div>
+                    <h2 class="text-2xl font-bold text-slate-900">You're in the queue!</h2>
+                    <p class="mt-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Your ticket number</p>
+                    <p class="qms-kiosk__ticket-number mt-2" x-text="ticket?.ticket_number"></p>
+
+                    <div class="mt-4 space-y-1 text-sm text-slate-600">
+                        <p x-show="ticket?.position">
+                            <span class="font-semibold text-slate-900" x-text="ticket?.position"></span>
+                            <span> ahead of you</span>
+                        </p>
+                        <p x-show="formatWait(ticket?.estimated_wait_seconds)" x-text="formatWait(ticket?.estimated_wait_seconds)"></p>
+                    </div>
+
+                    <p class="mt-6 text-sm text-slate-500">Please take a seat. Your number will be called on the display.</p>
+
+                    <button type="button" class="btn-primary btn-primary-lg mt-8 w-full" @click="reset()">
+                        Done
+                        <span x-show="resetCountdown" x-text="'(' + resetCountdown + 's)'"></span>
+                    </button>
+                </div>
             </div>
-        </footer>
+        </template>
     </div>
 </body>
 </html>
diff --git a/resources/views/qms/partials/kiosk-back.blade.php b/resources/views/qms/partials/kiosk-back.blade.php
new file mode 100644
index 0000000..e1cc3ca
--- /dev/null
+++ b/resources/views/qms/partials/kiosk-back.blade.php
@@ -0,0 +1,10 @@
+<button
+    type="button"
+    @click="goBack()"
+    class="flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-indigo-200 hover:bg-indigo-50 active:scale-95"
+    aria-label="Go back"
+>
+    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+    </svg>
+</button>
diff --git a/resources/views/qms/partials/kiosk-brand.blade.php b/resources/views/qms/partials/kiosk-brand.blade.php
new file mode 100644
index 0000000..b47d959
--- /dev/null
+++ b/resources/views/qms/partials/kiosk-brand.blade.php
@@ -0,0 +1,7 @@
+<div class="fixed left-0 top-0 z-20 p-6">
+    <img
+        src="{{ $logoUrl }}"
+        alt="{{ $logoAlt }}"
+        class="h-8 w-auto max-w-[220px] object-contain object-left"
+    >
+</div>
diff --git a/tests/Feature/KioskDeviceTest.php b/tests/Feature/KioskDeviceTest.php
index c6267cf..438f77b 100644
--- a/tests/Feature/KioskDeviceTest.php
+++ b/tests/Feature/KioskDeviceTest.php
@@ -73,9 +73,9 @@ class KioskDeviceTest extends TestCase
         $response = $this->get(route('qms.kiosk.device', $token));
 
         $response->assertOk();
-        $response->assertSee('Welcome', false);
-        $response->assertSee($queue->name, false);
-        $response->assertSee('Powered by', false);
+        $response->assertSee('Welcome to Test Org', false);
+        $response->assertSee('Tap to begin', false);
+        $response->assertSee('Queue', false);
     }
 
     public function test_kiosk_issues_ticket_for_allowed_queue(): void