diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 234cc61d..efb152a8 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -80,7 +80,7 @@
                         </label>
 
                         <div class="mt-2" wire:ignore>
-                            <select id="company_id" dusk="ticket-company" data-helpdesk-select2
+                            <select id="company_id" dusk="ticket-company" data-helpdesk-select2 wire:model.defer="company_id" name="company_id"
                                 data-placeholder="Select option" data-wire-model="company_id"
                                 class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                 <option value="">Select company</option>
@@ -103,7 +103,7 @@
                     </label>
 
                     <div class="mt-2" wire:ignore>
-                        <select id="board_id" data-helpdesk-select2 data-placeholder="Select option"
+                        <select id="board_id" data-helpdesk-select2 wire:model.defer="board_id" name="board_id" data-placeholder="Select option"
                             data-wire-model="board_id"
                             class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             data-dusk="ticket-board" dusk="ticket-board">
@@ -126,7 +126,7 @@
                     </label>
 
                     <div class="mt-2" wire:ignore>
-                        <select id="priority_id" data-helpdesk-select2 data-placeholder="Select option"
+                        <select id="priority_id" data-helpdesk-select2 wire:model.defer="priority_id" name="priority_id" data-placeholder="Select option"
                             data-wire-model="priority_id"
                             class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             data-dusk="ticket-priority" dusk="ticket-priority">
@@ -149,7 +149,7 @@
                     </label>
 
                     <div class="mt-2" wire:ignore>
-                        <select id="category_id" data-helpdesk-select2 data-placeholder="Select option"
+                        <select id="category_id" data-helpdesk-select2 wire:model.defer="category_id" name="category_id" data-placeholder="Select option"
                             data-wire-model="category_id"
                             class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                             <option value="">Select category</option>
@@ -171,7 +171,7 @@
                     </label>
 
                     <div class="mt-2" wire:ignore>
-                        <select id="project_id" data-helpdesk-select2 data-placeholder="Select option"
+                        <select id="project_id" data-helpdesk-select2 wire:model.defer="project_id" name="project_id" data-placeholder="Select option"
                             data-wire-model="project_id"
                             class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                             <option value="">Select project</option>
@@ -193,7 +193,7 @@
                     </label>
 
                     <div class="mt-2" wire:ignore>
-                        <select id="team_id" data-helpdesk-select2 data-placeholder="Select option"
+                        <select id="team_id" data-helpdesk-select2 wire:model.defer="team_id" name="team_id" data-placeholder="Select option"
                             data-wire-model="team_id"
                             class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                             <option value="">Select team</option>
diff --git a/Modules/Helpdesk/Resources/views/partials/page-header.blade.php b/Modules/Helpdesk/Resources/views/partials/page-header.blade.php
index 2c9d35c3..b9a31634 100644
--- a/Modules/Helpdesk/Resources/views/partials/page-header.blade.php
+++ b/Modules/Helpdesk/Resources/views/partials/page-header.blade.php
@@ -1,24 +1,24 @@
-<div class="mb-8 overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-sm">
-    <div class="px-6 py-8 text-white">
+<div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+    <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
         <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
             <div>
-                <p class="text-sm font-semibold uppercase tracking-[0.3em] text-blue-300">
+                <p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">
                     {{ $eyebrow ?? 'Helpdesk' }}
                 </p>
 
-                <h1 class="mt-3 text-3xl font-bold tracking-tight">
+                <h1 class="mt-2 text-3xl font-semibold tracking-tight">
                     {{ $title ?? 'Helpdesk' }}
                 </h1>
 
                 @if (!empty($subtitle))
-                    <p class="mt-2 max-w-3xl text-sm text-slate-300">
+                    <p class="mt-2 max-w-3xl text-sm text-blue-100/90">
                         {{ $subtitle }}
                     </p>
                 @endif
             </div>
 
             @isset($actions)
-                <div class="flex flex-wrap items-center gap-3">
+                <div class="flex flex-wrap gap-2">
                     {{ $actions }}
                 </div>
             @endisset
diff --git a/resources/css/app.css b/resources/css/app.css
index 53bff57f..6b2790cf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -413,18 +413,29 @@ select:focus[data-flux-control] {
     }
 
     .wms-page-hero {
+        overflow: hidden;
+        margin-bottom: 1.5rem;
+        border-radius: 1.5rem;
+        border: 1px solid rgb(228 228 231);
+        background: rgb(255 255 255);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.08);
+    }
+
+    .dark .wms-page-hero {
+        border-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+    }
+
+    .wms-page-hero-inner {
+        padding: 1.75rem 1.5rem;
+        background: linear-gradient(135deg, rgb(2 6 23), rgb(15 23 42) 52%, rgb(23 37 84));
+        color: rgb(255 255 255);
+    }
+
+    .wms-page-hero-row {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1.25rem;
-        margin-bottom: 1.25rem;
-        border-radius: 1rem;
-        padding: 1.45rem 1.75rem;
-        background:
-            radial-gradient(circle at 95% 85%, rgb(8 145 178 / 0.62), transparent 36%),
-            linear-gradient(135deg, rgb(4 8 24), rgb(10 18 42) 54%, rgb(7 44 58));
-        color: white;
-        box-shadow: 0 24px 60px rgb(0 0 0 / 0.30);
+        flex-direction: column;
+        gap: 1rem;
     }
 
     .wms-page-hero-copy {
@@ -433,70 +444,96 @@ select:focus[data-flux-control] {
     }
 
     .wms-page-hero-kicker {
-        margin-bottom: 0.55rem;
-        color: rgb(103 232 249);
-        font-size: 0.72rem;
-        font-weight: 850;
-        letter-spacing: 0.32em;
+        margin: 0;
+        color: rgb(191 219 254);
+        font-size: 0.75rem;
+        font-weight: 650;
+        letter-spacing: 0.28em;
+        line-height: 1rem;
+        text-transform: uppercase;
     }
 
     .wms-page-hero-title {
-        margin: 0;
-        font-size: clamp(1.9rem, 3vw, 2.75rem);
-        font-weight: 850;
-        line-height: 1.05;
-        letter-spacing: -0.04em;
+        margin: 0.5rem 0 0;
+        color: rgb(255 255 255);
+        font-size: 1.875rem;
+        font-weight: 650;
+        line-height: 2.25rem;
+        letter-spacing: -0.025em;
     }
 
     .wms-page-hero-description {
-        max-width: 44rem;
-        margin-top: 0.65rem;
-        color: rgb(203 213 225);
-        font-size: clamp(0.9rem, 1.15vw, 1.05rem);
-        line-height: 1.45;
+        max-width: 48rem;
+        margin: 0.5rem 0 0;
+        color: rgb(219 234 254 / 0.90);
+        font-size: 0.875rem;
+        line-height: 1.35rem;
     }
 
     .wms-page-hero-actions {
         display: flex;
-        align-items: stretch;
-        gap: 0.75rem;
-        flex: 0 0 auto;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem;
     }
 
     .wms-page-hero-stat {
         display: grid;
-        min-width: 10.5rem;
-        gap: 0.6rem;
-        border-radius: 0.9rem;
-        background: rgb(51 65 85 / 0.72);
-        padding: 0.9rem 1rem;
-        color: rgb(203 213 225);
-        backdrop-filter: blur(10px);
+        min-width: 8.5rem;
+        gap: 0.25rem;
+        border-radius: 0.85rem;
+        border: 1px solid rgb(255 255 255 / 0.18);
+        background: rgb(255 255 255 / 0.10);
+        padding: 0.7rem 0.85rem;
+        color: rgb(219 234 254 / 0.90);
+        box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
+    }
+
+    .wms-page-hero-stat span {
+        font-size: 0.68rem;
+        font-weight: 800;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
     }
 
     .wms-page-hero-stat strong {
         display: flex;
         align-items: center;
-        gap: 0.75rem;
+        gap: 0.55rem;
         color: white;
-        font-size: 1.35rem;
-        font-weight: 850;
+        font-size: 1.25rem;
+        font-weight: 800;
         line-height: 1;
     }
 
     .wms-page-hero-stat strong i {
-        color: rgb(74 222 128);
+        color: rgb(134 239 172);
     }
 
     .wms-page-hero-icon-card {
-        min-width: 5.75rem;
+        min-width: 3.25rem;
+        width: 3.25rem;
+        height: 3.25rem;
         place-items: center;
+        padding: 0;
         text-align: center;
     }
 
     .wms-page-hero-icon-card strong {
         justify-content: center;
-        font-size: 1.85rem;
+        font-size: 1.25rem;
+    }
+
+    @media (min-width: 1024px) {
+        .wms-page-hero-row {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .wms-page-hero-actions {
+            justify-content: flex-end;
+        }
     }
 
     .wms-hero-mobile-menu {
@@ -737,12 +774,13 @@ select:focus[data-flux-control] {
         }
 
         .wms-page-hero {
-            align-items: flex-start;
-            flex-direction: column;
-            gap: 1rem;
-            margin-bottom: 0.85rem;
-            border-radius: 0.9rem;
-            padding: 1rem;
+            max-width: 100%;
+            margin-bottom: 1rem;
+            border-radius: 1rem;
+        }
+
+        .wms-page-hero-inner {
+            padding: 1.25rem;
         }
 
         .wms-page-hero-actions {
@@ -751,13 +789,8 @@ select:focus[data-flux-control] {
         }
 
         .wms-page-hero-stat {
-            min-width: min(12rem, 100%);
-            flex: 1 1 12rem;
-            padding: 0.8rem;
-        }
-
-        .wms-page-hero-stat strong {
-            font-size: 1.2rem;
+            min-width: min(10rem, 100%);
+            flex: 1 1 10rem;
         }
 
         .wms-hero-mobile-menu {
diff --git a/resources/js/app.js b/resources/js/app.js
index 2a77cd04..804a5b7b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -136,6 +136,27 @@ function renderWmsCharts() {
     });
 }
 
+
+function livewireComponentFor(element) {
+    const componentRoot = element.closest('[wire\:id]');
+
+    if (!componentRoot || !window.Livewire) {
+        return null;
+    }
+
+    return window.Livewire.find(componentRoot.getAttribute('wire:id'));
+}
+
+function setLivewireProperty(element, model, value) {
+    const component = livewireComponentFor(element);
+
+    if (!component || !model) {
+        return;
+    }
+
+    component.set(model, value === '' ? null : value);
+}
+
 /**
  * Initialise Select2 controls.
  *
@@ -168,6 +189,8 @@ function initialiseSelect2() {
         $select.off('change.select2-livewire');
 
         $select.on('change.select2-livewire', function () {
+            setLivewireProperty(this, this.dataset.wireModel, $select.val());
+
             this.dispatchEvent(
                 new Event('change', {
                     bubbles: true,
diff --git a/resources/views/components/wms/page-hero.blade.php b/resources/views/components/wms/page-hero.blade.php
index 1ff5daac..fd15c5fb 100644
--- a/resources/views/components/wms/page-hero.blade.php
+++ b/resources/views/components/wms/page-hero.blade.php
@@ -2,40 +2,52 @@
     'eyebrow' => 'MPBA WMS',
     'title',
     'description' => null,
+    'subtitle' => null,
     'icon' => null,
     'stats' => [],
 ])
 
+@php
+    $heroDescription = $description ?? $subtitle ?? null;
+@endphp
+
 <section {{ $attributes->merge(['class' => 'wms-page-hero']) }}>
-    <div class="wms-page-hero-copy">
-        <p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
-        <h1 class="wms-page-hero-title">{{ $title }}</h1>
-        @if ($description)
-            <p class="wms-page-hero-description">{{ $description }}</p>
-        @endif
-    </div>
+    <div class="wms-page-hero-inner">
+        <div class="wms-page-hero-row">
+            <div class="wms-page-hero-copy">
+                <p class="wms-page-hero-kicker">{{ $eyebrow }}</p>
+                <h1 class="wms-page-hero-title">{{ $title }}</h1>
 
-    <div class="wms-page-hero-actions">
-        @foreach ($stats as $stat)
-            <article class="wms-page-hero-stat">
-                <span>{{ $stat['label'] ?? '' }}</span>
-                <strong>
-                    @if (!empty($stat['icon']))
-                        <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
+                @if ($heroDescription)
+                    <p class="wms-page-hero-description">{{ $heroDescription }}</p>
+                @endif
+            </div>
+
+            @if (count($stats) > 0 || $icon || $slot->isNotEmpty())
+                <div class="wms-page-hero-actions">
+                    @foreach ($stats as $stat)
+                        <article class="wms-page-hero-stat">
+                            <span>{{ $stat['label'] ?? '' }}</span>
+                            <strong>
+                                @if (!empty($stat['icon']))
+                                    <i class="{{ $stat['icon'] }}" aria-hidden="true"></i>
+                                @endif
+                                {{ $stat['value'] ?? '' }}
+                            </strong>
+                        </article>
+                    @endforeach
+
+                    @if ($icon && count($stats) === 0 && $slot->isEmpty())
+                        <article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
+                            <strong><i class="{{ $icon }}"></i></strong>
+                        </article>
                     @endif
-                    {{ $stat['value'] ?? '' }}
-                </strong>
-            </article>
-        @endforeach
 
-        @if ($icon && count($stats) === 0)
-            <article class="wms-page-hero-stat wms-page-hero-icon-card" aria-hidden="true">
-                <strong><i class="{{ $icon }}"></i></strong>
-            </article>
-        @endif
-
-        @if ($slot->isNotEmpty())
-            {{ $slot }}
-        @endif
+                    @if ($slot->isNotEmpty())
+                        {{ $slot }}
+                    @endif
+                </div>
+            @endif
+        </div>
     </div>
 </section>