diff --git a/Modules/Helpdesk/Providers/HelpdeskServiceProvider.php b/Modules/Helpdesk/Providers/HelpdeskServiceProvider.php
index b441b10e..62225b12 100644
--- a/Modules/Helpdesk/Providers/HelpdeskServiceProvider.php
+++ b/Modules/Helpdesk/Providers/HelpdeskServiceProvider.php
@@ -16,6 +16,7 @@ use Modules\Helpdesk\Livewire\SettingsManager;
 use Modules\Helpdesk\Livewire\TicketCreate;
 use Modules\Helpdesk\Livewire\TicketIndex;
 use Modules\Helpdesk\Livewire\TicketShow;
+use Modules\Helpdesk\Livewire\TicketTimer;
 use Modules\Helpdesk\Models\Ticket;
 use Modules\Helpdesk\Policies\TicketPolicy;
 use Modules\Helpdesk\Support\ModuleInfo;
@@ -69,6 +70,7 @@ final class HelpdeskServiceProvider extends ServiceProvider
         Livewire::component('helpdesk.ticket-index', TicketIndex::class);
         Livewire::component('helpdesk.ticket-create', TicketCreate::class);
         Livewire::component('helpdesk.ticket-show', TicketShow::class);
+        Livewire::component('helpdesk.ticket-timer', TicketTimer::class);
         Livewire::component('helpdesk.dashboard-widget', HelpdeskDashboardWidget::class);
         Livewire::component('helpdesk.kanban-board', KanbanBoard::class);
         Livewire::component('helpdesk.settings-manager', SettingsManager::class);
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index b835fa53..248b3b30 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -7,7 +7,7 @@
             'Raise a new support request with priority, product/service, project, category, team and full details.',
     ])
 
-    <form wire:submit.prevent="save" enctype="multipart/form-data" class="helpdesk-ticket-form space-y-6" data-helpdesk-ticket-form>
+    <form wire:submit.prevent="save" enctype="multipart/form-data" class="helpdesk-ticket-form space-y-6">
         <div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
             <div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
                 <h2 class="text-lg font-semibold text-zinc-100">Ticket details</h2>
@@ -330,16 +330,13 @@
                     class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
                     Cancel
                 </a>
-                <button
-                    type="submit"
+
+                <button type="submit"
                     class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
-                    data-dusk="ticket-create-submit"
-                    dusk="ticket-create-submit"
-                    wire:loading.attr="disabled"
-                    wire:target="save">
+                    data-dusk="ticket-create-submit" dusk="ticket-create-submit" wire:loading.attr="disabled">
                     <i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>
-                    <span wire:loading.remove wire:target="save">Create Ticket</span>
-                    <span wire:loading wire:target="save">Creating...</span>
+                    <span wire:loading.remove>Create Ticket</span>
+                    <span wire:loading>Creating...</span>
                 </button>
             </div>
         </div>
@@ -363,50 +360,47 @@
             outline: none;
         }
     </style>
-    @script
     <script>
-        const initialiseHelpdeskTicketCreate = function () {
+        document.addEventListener('DOMContentLoaded', function() {
             const form = document.querySelector('.helpdesk-ticket-form');
             const editor = document.querySelector('[data-helpdesk-details-editor]');
             const bodyField = document.getElementById('body');
 
-            if (! form || ! editor || ! bodyField || form.dataset.editorReady === 'true') {
+            if (!form || !editor || !bodyField) {
                 return;
             }
 
-            form.dataset.editorReady = 'true';
-
-            const syncBody = function () {
-                const value = editor.innerHTML.trim();
-
-                bodyField.value = value;
-                bodyField.dispatchEvent(new Event('input', { bubbles: true }));
-                bodyField.dispatchEvent(new Event('change', { bubbles: true }));
-
-                @this.set('body', value, false);
+            const syncBody = function() {
+                bodyField.value = editor.innerHTML.trim();
+                bodyField.dispatchEvent(new Event('input', {
+                    bubbles: true
+                }));
+                bodyField.dispatchEvent(new Event('change', {
+                    bubbles: true
+                }));
             };
 
-            document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function (button) {
-                button.addEventListener('click', function () {
+            document.querySelectorAll('[data-helpdesk-editor-command]').forEach(function(button) {
+                button.addEventListener('click', function() {
                     editor.focus();
                     document.execCommand(button.dataset.helpdeskEditorCommand, false, null);
                     syncBody();
                 });
             });
 
-            document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function (button) {
-                button.addEventListener('click', function () {
+            document.querySelectorAll('[data-helpdesk-editor-format]').forEach(function(button) {
+                button.addEventListener('click', function() {
                     editor.focus();
                     document.execCommand('formatBlock', false, button.dataset.helpdeskEditorFormat);
                     syncBody();
                 });
             });
 
-            document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function (button) {
-                button.addEventListener('click', function () {
+            document.querySelectorAll('[data-helpdesk-editor-link]').forEach(function(button) {
+                button.addEventListener('click', function() {
                     const url = window.prompt('Enter link URL');
 
-                    if (! url) {
+                    if (!url) {
                         return;
                     }
 
@@ -416,15 +410,8 @@
                 });
             });
 
-            editor.addEventListener('input', syncBody);
-            editor.addEventListener('keyup', syncBody);
             editor.addEventListener('blur', syncBody);
-            form.addEventListener('submit', syncBody, true);
-        };
-
-        initialiseHelpdeskTicketCreate();
-
-        document.addEventListener('livewire:navigated', initialiseHelpdeskTicketCreate);
+            form.addEventListener('submit', syncBody);
+        });
     </script>
-    @endscript
 </div>
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-timer.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-timer.blade.php
index 71a7d8e0..6dd1bb8d 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-timer.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-timer.blade.php
@@ -1,133 +1,151 @@
 <div
-    class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 p-3 shadow-sm dark:border-emerald-900 dark:bg-emerald-950/40"
+    class="mb-4 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"
     data-helpdesk-ticket-timer
 >
     @php
         $hasRunningTimer = $activeTimer && $activeTimer->ended_at === null;
+        $startedAtIso = $hasRunningTimer ? $activeTimer->started_at?->toIso8601String() : null;
+        $startedAtDisplay = $hasRunningTimer ? $activeTimer->started_at?->format('d M Y H:i') : null;
     @endphp
 
-    <div class="flex items-start gap-3">
-        <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-600 text-white shadow-sm">
-            <i class="fa-solid fa-stopwatch text-sm" aria-hidden="true"></i>
-        </span>
+    <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div class="flex min-w-0 items-start gap-3">
+                <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm">
+                    <i class="fa-solid fa-stopwatch text-sm" aria-hidden="true"></i>
+                </span>
 
-        <div class="min-w-0 flex-1 space-y-3">
-            <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                 <div class="min-w-0">
-                    <h3 class="text-sm font-black text-emerald-950 dark:text-emerald-100">Work timer</h3>
-                    <p class="mt-1 text-xs font-semibold text-emerald-800 dark:text-emerald-200">
-                        Start a user-specific timer. It remains active if the browser is closed.
+                    <h3 class="text-sm font-black text-zinc-950 dark:text-zinc-100">
+                        Ticket timer
+                    </h3>
+
+                    <p class="mt-1 text-xs font-semibold text-zinc-600 dark:text-zinc-300">
+                        Record focused work against this ticket.
                     </p>
                 </div>
-
-                @if ($hasRunningTimer)
-                    <div
-                        x-data="{
-                            startedAt: Date.parse('{{ $activeTimer->started_at?->toIso8601String() }}'),
-                            elapsedSeconds: {{ max(0, (int) $elapsedSeconds) }},
-                            intervalId: null,
-                            formatted() {
-                                const total = Math.max(0, Number(this.elapsedSeconds || 0));
-                                const hours = String(Math.floor(total / 3600)).padStart(2, '0');
-                                const minutes = String(Math.floor((total % 3600) / 60)).padStart(2, '0');
-                                const seconds = String(total % 60).padStart(2, '0');
-
-                                return `${hours}:${minutes}:${seconds}`;
-                            },
-                            tick() {
-                                if (!Number.isFinite(this.startedAt)) {
-                                    this.elapsedSeconds = 0;
-                                    return;
-                                }
-
-                                this.elapsedSeconds = Math.floor((Date.now() - this.startedAt) / 1000);
-                            },
-                            start() {
-                                this.stop();
-                                this.tick();
-                                this.intervalId = window.setInterval(() => this.tick(), 1000);
-                            },
-                            stop() {
-                                if (this.intervalId) {
-                                    window.clearInterval(this.intervalId);
-                                    this.intervalId = null;
-                                }
-                            }
-                        }"
-                        x-init="start()"
-                        x-on:timer-started.window="start()"
-                        x-on:timer-ended.window="stop(); elapsedSeconds = 0"
-                        x-on:livewire:navigating.window="stop()"
-                        class="rounded-xl bg-emerald-700 px-3 py-2 text-right text-white shadow-sm"
-                        data-helpdesk-running-timer
-                    >
-                        <div class="text-[0.65rem] font-black uppercase tracking-[0.16em] text-emerald-100">Running</div>
-                        <div class="font-mono text-lg font-black leading-tight" x-text="formatted()" data-dusk="ticket-running-time">00:00:00</div>
-                    </div>
-                @else
-                    <div class="rounded-xl bg-white px-3 py-2 text-right text-emerald-900 shadow-sm ring-1 ring-emerald-200 dark:bg-zinc-950 dark:text-emerald-100 dark:ring-emerald-900">
-                        <div class="text-[0.65rem] font-black uppercase tracking-[0.16em] text-emerald-700 dark:text-emerald-300">Stopped</div>
-                        <div class="font-mono text-lg font-black leading-tight" data-dusk="ticket-running-time">00:00:00</div>
-                    </div>
-                @endif
             </div>
 
-            @if ($message)
-                <div class="rounded-lg border border-emerald-300 bg-white px-3 py-2 text-xs font-bold text-emerald-900 dark:border-emerald-800 dark:bg-zinc-950 dark:text-emerald-100">
-                    {{ $message }}
+            @if ($hasRunningTimer)
+                <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-right shadow-sm dark:border-emerald-900 dark:bg-emerald-950/40">
+                    <div class="flex items-center justify-end gap-2 text-[0.65rem] font-black uppercase tracking-[0.16em] text-emerald-700 dark:text-emerald-300">
+                        <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
+                        Running
+                    </div>
+
+                    <div
+                        class="mt-1 font-mono text-2xl font-black leading-none text-emerald-950 dark:text-emerald-100"
+                        data-helpdesk-live-elapsed
+                        data-helpdesk-started-at="{{ $startedAtIso }}"
+                        data-dusk="ticket-running-time"
+                    >
+                        {{ gmdate('H:i:s', max(0, (int) $elapsedSeconds)) }}
+                    </div>
+
+                    <p class="mt-1 text-[0.68rem] font-bold text-emerald-700 dark:text-emerald-300">
+                        Started {{ $startedAtDisplay }}
+                    </p>
                 </div>
             @endif
+        </div>
 
-            @error('timer')
-                <div class="rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-xs font-bold text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-100">
-                    {{ $message }}
-                </div>
-            @enderror
-
-            <div class="space-y-2">
-                <label class="block text-xs font-bold text-emerald-950 dark:text-emerald-100" for="ticket_timer_description">
-                    Timer note
-                </label>
-
-                <textarea
-                    id="ticket_timer_description"
-                    wire:model.defer="description"
-                    rows="2"
-                    placeholder="Optional work note"
-                    class="block w-full rounded-lg border border-emerald-300 bg-white p-2 text-xs font-semibold text-zinc-900 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-emerald-900 dark:bg-zinc-950 dark:text-zinc-100"
-                    data-dusk="ticket-timer-description"
-                ></textarea>
+        @if ($message)
+            <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100">
+                {{ $message }}
             </div>
+        @endif
 
-            <div class="flex flex-wrap gap-2">
-                @if ($hasRunningTimer)
-                    <button
-                        type="button"
-                        wire:click="endTimer"
-                        wire:loading.attr="disabled"
-                        wire:target="endTimer"
-                        class="inline-flex items-center justify-center rounded-lg bg-red-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60"
-                        data-dusk="end-ticket-timer"
-                    >
-                        <i class="fa-solid fa-stop mr-2" aria-hidden="true"></i>
-                        <span wire:loading.remove wire:target="endTimer">End timer</span>
-                        <span wire:loading wire:target="endTimer">Ending...</span>
-                    </button>
-                @else
-                    <button
-                        type="button"
-                        wire:click="startTimer"
-                        wire:loading.attr="disabled"
-                        wire:target="startTimer"
-                        class="inline-flex items-center justify-center rounded-lg bg-emerald-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
-                        data-dusk="start-ticket-timer"
-                    >
-                        <i class="fa-solid fa-play mr-2" aria-hidden="true"></i>
-                        <span wire:loading.remove wire:target="startTimer">Start timer</span>
-                        <span wire:loading wire:target="startTimer">Starting...</span>
-                    </button>
-                @endif
+        @error('timer')
+            <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-bold text-red-800 dark:border-red-900 dark:bg-red-950/40 dark:text-red-100">
+                {{ $message }}
             </div>
+        @enderror
+
+        <div class="space-y-2">
+            <label class="block text-xs font-bold text-zinc-800 dark:text-zinc-100" for="ticket_timer_description">
+                Timer note
+            </label>
+
+            <textarea
+                id="ticket_timer_description"
+                wire:model.defer="description"
+                rows="2"
+                placeholder="Optional work note"
+                class="block w-full rounded-lg border border-zinc-300 bg-white p-3 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                data-dusk="ticket-timer-description"
+            ></textarea>
+        </div>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
+                {{ $hasRunningTimer ? 'End the timer to add the elapsed time to the ticket.' : 'Start a timer when work begins. Only one active timer is allowed.' }}
+            </p>
+
+            @if ($hasRunningTimer)
+                <button
+                    type="button"
+                    wire:click="endTimer"
+                    wire:loading.attr="disabled"
+                    wire:target="endTimer"
+                    class="inline-flex items-center justify-center rounded-lg bg-red-600 px-4 py-2.5 text-sm font-black text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-zinc-950"
+                    data-dusk="end-ticket-timer"
+                >
+                    <i class="fa-solid fa-stop mr-2" aria-hidden="true"></i>
+                    <span wire:loading.remove wire:target="endTimer">End timer</span>
+                    <span wire:loading wire:target="endTimer">Ending...</span>
+                </button>
+            @else
+                <button
+                    type="button"
+                    wire:click="startTimer"
+                    wire:loading.attr="disabled"
+                    wire:target="startTimer"
+                    class="inline-flex min-w-[9.5rem] shrink-0 items-center justify-center whitespace-nowrap rounded-md bg-blue-600 px-4 py-2 text-sm font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-zinc-950"
+                    data-dusk="start-ticket-timer"
+                >
+                    <i class="fa-solid fa-play mr-2 text-xs" aria-hidden="true"></i>
+                    <span wire:loading.remove wire:target="startTimer">Start timer</span>
+                    <span wire:loading wire:target="startTimer">Starting...</span>
+                </button>
+            @endif
         </div>
     </div>
+
+    <script>
+        (() => {
+            if (window.helpdeskTicketTimerDisplayBooted === true) {
+                return;
+            }
+
+            window.helpdeskTicketTimerDisplayBooted = true;
+
+            const formatElapsed = (totalSeconds) => {
+                const seconds = Math.max(0, Number.parseInt(totalSeconds, 10) || 0);
+                const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
+                const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
+                const remainingSeconds = String(seconds % 60).padStart(2, '0');
+
+                return `${hours}:${minutes}:${remainingSeconds}`;
+            };
+
+            const updateTimers = () => {
+                document.querySelectorAll('[data-helpdesk-live-elapsed][data-helpdesk-started-at]').forEach((timer) => {
+                    const startedAt = Date.parse(timer.getAttribute('data-helpdesk-started-at') || '');
+
+                    if (!Number.isFinite(startedAt)) {
+                        timer.textContent = '00:00:00';
+                        return;
+                    }
+
+                    timer.textContent = formatElapsed(Math.floor((Date.now() - startedAt) / 1000));
+                });
+            };
+
+            updateTimers();
+            window.setInterval(updateTimers, 1000);
+            document.addEventListener('livewire:navigated', updateTimers);
+            document.addEventListener('livewire:update', updateTimers);
+            document.addEventListener('livewire:updated', updateTimers);
+        })();
+    </script>
 </div>
diff --git a/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php b/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
index 14d38b7e..b157108f 100644
--- a/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
+++ b/Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php
@@ -1,47 +1,3 @@
-@php
-    use Illuminate\Support\Facades\Schema;
-    use Modules\Helpdesk\Models\TicketTimeLog;
-
-    $ticketTimeLogTable = (new TicketTimeLog())->getTable();
-
-    $hasEndedAtColumn = Schema::hasColumn($ticketTimeLogTable, 'ended_at');
-    $hasStoppedAtColumn = Schema::hasColumn($ticketTimeLogTable, 'stopped_at');
-    $hasFinishedAtColumn = Schema::hasColumn($ticketTimeLogTable, 'finished_at');
-    $hasUserIdColumn = Schema::hasColumn($ticketTimeLogTable, 'user_id');
-
-    $runningTimerQuery = TicketTimeLog::query()
-        ->where('ticket_id', $ticket->getKey())
-        ->whereNotNull('started_at')
-        ->orderByDesc('started_at');
-
-    if ($hasUserIdColumn) {
-        $runningTimerQuery->where('user_id', auth()->id());
-    }
-
-    if ($hasEndedAtColumn) {
-        $runningTimerQuery->whereNull('ended_at');
-    }
-
-    if ($hasStoppedAtColumn) {
-        $runningTimerQuery->whereNull('stopped_at');
-    }
-
-    if ($hasFinishedAtColumn) {
-        $runningTimerQuery->whereNull('finished_at');
-    }
-
-    $runningTimer = ($hasEndedAtColumn || $hasStoppedAtColumn || $hasFinishedAtColumn)
-        ? $runningTimerQuery->first()
-        : null;
-
-    $runningTimerStartedAt = $runningTimer?->started_at;
-    $runningTimerElapsedSeconds = $runningTimerStartedAt
-        ? max(0, now()->diffInSeconds($runningTimerStartedAt))
-        : 0;
-    $runningTimerElapsedDisplay = gmdate('H:i:s', $runningTimerElapsedSeconds);
-    $hasRunningTimer = $runningTimerStartedAt !== null;
-@endphp
-
 @can('update', $ticket)
     <details
         class="group rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
@@ -60,23 +16,6 @@
                     <p class="text-xs font-semibold text-indigo-100">
                         Log time, assignment, status and priority
                     </p>
-
-                    <span
-                        class="{{ $hasRunningTimer ? 'inline-flex' : 'hidden' }} mt-2 w-fit items-center gap-2 rounded-xl bg-emerald-400/20 px-3 py-1.5 text-xs font-black text-emerald-50 ring-1 ring-emerald-200/40"
-                        data-helpdesk-running-summary-badge
-                        data-helpdesk-started-at="{{ $runningTimerStartedAt?->toIso8601String() }}"
-                        data-dusk="ticket-running-timer-summary">
-                        <span class="relative flex h-2.5 w-2.5">
-                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-200 opacity-75"></span>
-                            <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-300"></span>
-                        </span>
-
-                        <span>Running</span>
-
-                        <span class="font-mono" data-helpdesk-running-summary-elapsed data-dusk="ticket-running-elapsed-summary">
-                            {{ $runningTimerElapsedDisplay }}
-                        </span>
-                    </span>
                 </div>
             </div>
 
@@ -93,41 +32,9 @@
             </div>
         @endif
 
-        @if ($hasRunningTimer)
-            <div
-                class="mb-4 rounded-xl border border-emerald-300 bg-emerald-50 p-3 text-emerald-950 shadow-sm dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100"
-                data-helpdesk-running-timer>
-                <div class="flex items-center justify-between gap-3">
-                    <div class="min-w-0">
-                        <p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-300">
-                            Timer running
-                        </p>
-
-                        <p class="mt-1 text-xs font-semibold text-emerald-800 dark:text-emerald-200">
-                            Started {{ $runningTimerStartedAt->format('d M Y H:i:s') }}
-                        </p>
-                    </div>
-
-                    <div class="shrink-0 text-right">
-                        <p class="font-mono text-2xl font-black leading-none text-emerald-900 dark:text-emerald-100"
-                           data-helpdesk-panel-elapsed
-                           data-dusk="ticket-running-elapsed-time">
-                            {{ $runningTimerElapsedDisplay }}
-                        </p>
-
-                        <p class="mt-1 text-[0.65rem] font-bold uppercase tracking-wide text-emerald-700 dark:text-emerald-300">
-                            Elapsed
-                        </p>
-                    </div>
-                </div>
-            </div>
-        @endif
-
-        <div data-helpdesk-timer-source>
-            @include('helpdesk::partials.ticket-time-timer', [
-                'ticket' => $ticket,
-            ])
-        </div>
+        @include('helpdesk::partials.ticket-time-timer', [
+            'ticket' => $ticket,
+        ])
 
         <form method="POST" action="{{ route('helpdesk.tickets.time-logs.store', $ticket) }}"
               class="mb-4 space-y-2">
@@ -247,102 +154,4 @@
             </button>
         </form>
     </details>
-
-    <script>
-        (() => {
-            const root = document.querySelector('[data-helpdesk-ticket-controls]');
-
-            if (!root || root.dataset.helpdeskElapsedBadgeBound === 'true') {
-                return;
-            }
-
-            root.dataset.helpdeskElapsedBadgeBound = 'true';
-
-            const source = root.querySelector('[data-helpdesk-timer-source]');
-            const badge = root.querySelector('[data-helpdesk-running-summary-badge]');
-            const summaryElapsed = root.querySelector('[data-helpdesk-running-summary-elapsed]');
-            const panelElapsed = root.querySelector('[data-helpdesk-panel-elapsed]');
-
-            if (!source || !badge || !summaryElapsed) {
-                return;
-            }
-
-            let interval = null;
-            let startedAt = badge.dataset.helpdeskStartedAt
-                ? Date.parse(badge.dataset.helpdeskStartedAt)
-                : null;
-
-            const formatElapsed = (seconds) => {
-                const date = new Date(Math.max(0, seconds) * 1000);
-
-                return date.toISOString().substring(11, 19);
-            };
-
-            const updateElapsed = () => {
-                if (!startedAt) {
-                    startedAt = Date.now();
-                }
-
-                const display = formatElapsed(Math.floor((Date.now() - startedAt) / 1000));
-
-                summaryElapsed.textContent = display;
-
-                if (panelElapsed) {
-                    panelElapsed.textContent = display;
-                }
-            };
-
-            const showBadge = () => {
-                badge.classList.remove('hidden');
-                badge.classList.add('inline-flex');
-
-                if (!startedAt) {
-                    startedAt = Date.now();
-                }
-
-                updateElapsed();
-
-                if (interval) {
-                    return;
-                }
-
-                interval = window.setInterval(updateElapsed, 1000);
-            };
-
-            const hideBadge = () => {
-                badge.classList.add('hidden');
-                badge.classList.remove('inline-flex');
-                summaryElapsed.textContent = '00:00:00';
-                startedAt = null;
-
-                if (interval) {
-                    window.clearInterval(interval);
-                    interval = null;
-                }
-            };
-
-            const sourceShowsRunning = () => {
-                const text = source.textContent.trim().toLowerCase();
-
-                return text.includes('running') || text.includes('timer started');
-            };
-
-            const sync = () => {
-                if (sourceShowsRunning()) {
-                    showBadge();
-                    return;
-                }
-
-                hideBadge();
-            };
-
-            new MutationObserver(sync).observe(source, {
-                childList: true,
-                subtree: true,
-                characterData: true,
-            });
-
-            sync();
-        })();
-    </script>
 @endcan
diff --git a/Modules/Helpdesk/Resources/views/partials/ticket-time-timer.blade.php b/Modules/Helpdesk/Resources/views/partials/ticket-time-timer.blade.php
index 6fa54a66..715c0947 100644
--- a/Modules/Helpdesk/Resources/views/partials/ticket-time-timer.blade.php
+++ b/Modules/Helpdesk/Resources/views/partials/ticket-time-timer.blade.php
@@ -1,3 +1,3 @@
 @can('update', $ticket)
-    @livewire('Modules\\Helpdesk\\Livewire\\TicketTimer', ['ticket' => $ticket], key('helpdesk-ticket-timer-'.$ticket->getKey()))
+    @livewire('helpdesk.ticket-timer', ['ticket' => $ticket], key('helpdesk-ticket-timer-'.$ticket->getKey()))
 @endcan
diff --git a/Modules/Helpdesk/Tests/Feature/TicketTimerCleanUiFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketTimerCleanUiFilesTest.php
new file mode 100644
index 00000000..a7f2e501
--- /dev/null
+++ b/Modules/Helpdesk/Tests/Feature/TicketTimerCleanUiFilesTest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Modules\Helpdesk\Tests\Feature;
+
+use Tests\TestCase;
+
+class TicketTimerCleanUiFilesTest extends TestCase
+{
+    /**
+     * Timer markup should live in one loaded component without duplicated control-panel timer displays.
+     */
+    public function test_ticket_controls_do_not_duplicate_timer_display_logic(): void
+    {
+        $controls = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/partials/ticket-controls.blade.php'));
+        $timer = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/livewire/ticket-timer.blade.php'));
+        $provider = (string) file_get_contents(base_path('Modules/Helpdesk/Providers/HelpdeskServiceProvider.php'));
+
+        $this->assertStringContainsString("@include('helpdesk::partials.ticket-time-timer'", $controls);
+        $this->assertStringNotContainsString('data-helpdesk-running-summary-badge', $controls);
+        $this->assertStringNotContainsString('data-helpdesk-panel-elapsed', $controls);
+        $this->assertStringNotContainsString('MutationObserver', $controls);
+        $this->assertStringContainsString('data-helpdesk-live-elapsed', $timer);
+        $this->assertStringContainsString("Livewire::component('helpdesk.ticket-timer'", $provider);
+    }
+
+    /**
+     * The module must not contain accidental duplicate Blade folders or macOS artefacts.
+     */
+    public function test_helpdesk_module_does_not_contain_known_rubbish_files(): void
+    {
+        $this->assertDirectoryDoesNotExist(base_path('Modules/Helpdesk/resources/views/views'));
+        $this->assertFileDoesNotExist(base_path('Modules/Helpdesk/.DS_Store'));
+        $this->assertFileDoesNotExist(base_path('Modules/Helpdesk/resources/.DS_Store'));
+    }
+}
diff --git a/Modules/Helpdesk/Tests/Feature/TicketTimerLiveDisplayFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketTimerLiveDisplayFilesTest.php
index 14b656bf..21e5d17c 100644
--- a/Modules/Helpdesk/Tests/Feature/TicketTimerLiveDisplayFilesTest.php
+++ b/Modules/Helpdesk/Tests/Feature/TicketTimerLiveDisplayFilesTest.php
@@ -13,10 +13,10 @@ class TicketTimerLiveDisplayFilesTest extends TestCase
     {
         $view = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/livewire/ticket-timer.blade.php'));
 
-        $this->assertStringContainsString('x-data', $view);
+        $this->assertStringContainsString('data-helpdesk-live-elapsed', $view);
         $this->assertStringContainsString('Date.parse', $view);
         $this->assertStringContainsString('setInterval', $view);
-        $this->assertStringContainsString('started_at', $view);
+        $this->assertStringContainsString('data-helpdesk-started-at', $view);
         $this->assertStringContainsString('data-dusk="ticket-running-time"', $view);
         $this->assertStringNotContainsString('localStorage', $view);
         $this->assertStringNotContainsString('sessionStorage', $view);
diff --git a/Modules/Helpdesk/Tests/Feature/TicketTimerSecondsFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketTimerSecondsFilesTest.php
index 856d382c..dc27665a 100644
--- a/Modules/Helpdesk/Tests/Feature/TicketTimerSecondsFilesTest.php
+++ b/Modules/Helpdesk/Tests/Feature/TicketTimerSecondsFilesTest.php
@@ -18,9 +18,9 @@ class TicketTimerSecondsFilesTest extends TestCase
         $this->assertStringContainsString("'seconds'", $component);
         $this->assertStringContainsString("'seconds'", $model);
         $this->assertStringContainsString('diffInSeconds', $component);
-        $this->assertStringContainsString('sum(\'seconds\')', $component);
-        $this->assertStringContainsString('HH:MM:SS', 'HH:MM:SS');
-        $this->assertStringContainsString('formatted()', $view);
+        $this->assertStringContainsString('sum('seconds')', $component);
+        $this->assertStringContainsString('formatElapsed', $view);
+        $this->assertStringContainsString('data-helpdesk-live-elapsed', $view);
         $this->assertStringNotContainsString('localStorage', $component);
         $this->assertStringNotContainsString('localStorage', $view);
     }
@@ -33,7 +33,7 @@ class TicketTimerSecondsFilesTest extends TestCase
         $partial = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/partials/ticket-time-log-history-query.blade.php'));
 
         $this->assertStringContainsString('TicketTimeLog::query()', $partial);
-        $this->assertStringContainsString('whereNotNull(\'ended_at\')', $partial);
+        $this->assertStringContainsString('whereNotNull('ended_at')', $partial);
         $this->assertStringContainsString('seconds', $partial);
     }
 }
diff --git a/Modules/Helpdesk/Tests/Feature/TicketTimerStartDisplayFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketTimerStartDisplayFilesTest.php
index f48ee809..8a16bcfb 100644
--- a/Modules/Helpdesk/Tests/Feature/TicketTimerStartDisplayFilesTest.php
+++ b/Modules/Helpdesk/Tests/Feature/TicketTimerStartDisplayFilesTest.php
@@ -13,13 +13,14 @@ class TicketTimerStartDisplayFilesTest extends TestCase
     {
         $component = (string) file_get_contents(base_path('Modules/Helpdesk/Livewire/TicketTimer.php'));
         $view = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/livewire/ticket-timer.blade.php'));
+        $partial = (string) file_get_contents(base_path('Modules/Helpdesk/resources/views/partials/ticket-time-timer.blade.php'));
 
         $this->assertStringContainsString('$this->activeTimer = $timer->fresh();', $component);
         $this->assertStringContainsString('$this->elapsedSeconds = 0;', $component);
         $this->assertStringContainsString("dispatch('timer-started')", $component);
         $this->assertStringContainsString('$hasRunningTimer = $activeTimer && $activeTimer->ended_at === null;', $view);
-        $this->assertStringContainsString('data-helpdesk-running-timer', $view);
-        $this->assertStringContainsString('x-on:timer-started.window', $view);
+        $this->assertStringContainsString('data-helpdesk-live-elapsed', $view);
+        $this->assertStringContainsString("@livewire('helpdesk.ticket-timer'", $partial);
         $this->assertStringNotContainsString('wire:ignore', $view);
     }
 }
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index 721d4317..c93fe1f4 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -7,3 +7,29 @@
     - Added persistent started_at, ended_at, and duration_seconds fields to existing helpdesk time logs where available.
     - Added a reusable Blade include for placing the timer above the existing manual time log form.
     - Added regression tests for module path, Livewire view root safety, and non-session timer state.
+- version: 1.9.30
+  date: 2026-06-23
+  type: bugfix
+  summary: Clean up Helpdesk timer UI state and remove duplicate timer display code.
+  changes:
+    - Replaced the oversized timer display with a compact professional ticket timer panel.
+    - Hid the elapsed timer before start and after end so it only displays while a timer is active.
+    - Added an inline loaded browser timer updater in the Livewire view instead of an unused standalone JavaScript file.
+    - Removed duplicate running timer summary and MutationObserver logic from ticket controls.
+    - Registered the timer Livewire component with the helpdesk.ticket-timer alias.
+    - Removed duplicate Resources/views/views timer files and macOS artefacts from the clean module.
+    - Added file-level regression coverage for the timer UI cleanup.
+- version: 1.9.31
+  date: 2026-06-23
+  type: bugfix
+  summary: Reduce Helpdesk start timer button size.
+  changes:
+    - Made the inactive-state Start timer button more compact while preserving accessible focus and loading states.
+    - Kept the timer display hidden before start and after end, with no new standalone JavaScript files.
+- version: 1.9.32
+  date: 2026-06-23
+  type: bugfix
+  summary: Widen Helpdesk start timer button so the label fits on one line.
+  changes:
+    - Updated the inactive Start timer action with a minimum width and no-wrap text so the label does not split.
+    - Preserved the clean inline timer display behaviour with no unused standalone JavaScript file.
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index 31300457..eac8e81b 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.9.29"
+    "version": "1.9.32"
 }