diff --git a/Modules/Helpdesk/Resources/assets/css/app.css b/Modules/Helpdesk/Resources/assets/css/app.css
index d9f96508..0760092e 100644
--- a/Modules/Helpdesk/Resources/assets/css/app.css
+++ b/Modules/Helpdesk/Resources/assets/css/app.css
@@ -1 +1,272 @@
-.helpdesk-module{}
+.hd-helpdesk-surface .hd-btn,
+.hd-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: .5rem;
+    border-radius: .85rem;
+    padding: .62rem 1.05rem;
+    font-size: .875rem;
+    line-height: 1.25rem;
+    font-weight: 800;
+    color: #fff !important;
+    text-decoration: none !important;
+    border: 1px solid rgba(255,255,255,.14);
+    box-shadow: 0 12px 28px rgba(0,0,0,.22);
+    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
+}
+
+.hd-helpdesk-surface .hd-btn:hover,
+.hd-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 16px 34px rgba(0,0,0,.30);
+}
+
+.hd-btn-sm {
+    border-radius: .65rem;
+    padding: .42rem .78rem;
+    font-size: .8125rem;
+}
+
+.hd-btn-blue { background: #2563eb !important; }
+.hd-btn-blue:hover { background: #1d4ed8 !important; }
+
+.hd-btn-green { background: #16a34a !important; }
+.hd-btn-green:hover { background: #15803d !important; }
+
+.hd-btn-amber { background: #f59e0b !important; }
+.hd-btn-amber:hover { background: #d97706 !important; }
+
+.hd-btn-red { background: #dc2626 !important; }
+.hd-btn-red:hover { background: #b91c1c !important; }
+
+.hd-btn-violet { background: #7c3aed !important; }
+.hd-btn-violet:hover { background: #6d28d9 !important; }
+
+.hd-helpdesk-surface button[type="submit"],
+.hd-helpdesk-surface button[data-flux-button][type="submit"] {
+    background: #16a34a !important;
+    color: #fff !important;
+    border-color: rgba(255,255,255,.14) !important;
+}
+
+.hd-helpdesk-surface button[wire\:click^="reset"],
+.hd-helpdesk-surface button[wire\:target^="reset"] {
+    background: #f59e0b !important;
+    color: #fff !important;
+    border-color: rgba(255,255,255,.14) !important;
+}
+
+.hd-helpdesk-surface button[wire\:click^="edit"],
+.hd-helpdesk-surface button[wire\:target^="edit"] {
+    background: #2563eb !important;
+    color: #fff !important;
+    border-color: rgba(255,255,255,.14) !important;
+}
+
+.hd-helpdesk-surface button[wire\:click^="delete"],
+.hd-helpdesk-surface button[wire\:target^="delete"] {
+    background: #dc2626 !important;
+    color: #fff !important;
+    border-color: rgba(255,255,255,.14) !important;
+}
+
+.hd-select {
+    width: 100%;
+    min-height: 3.35rem;
+    border-radius: 1rem;
+    border: 1px solid #3f3f46 !important;
+    background: #09090b !important;
+    color: #f4f4f5 !important;
+    padding: .78rem 3rem .78rem 1rem;
+    font-weight: 800;
+    outline: none;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
+}
+
+.hd-select:focus {
+    border-color: #60a5fa !important;
+    box-shadow:
+        0 0 0 3px rgba(96,165,250,.38),
+        inset 0 1px 0 rgba(255,255,255,.05);
+}
+
+.helpdesk-required-star {
+    color: #ef4444 !important;
+    font-weight: 800;
+}
+
+.helpdesk-ticket-form,
+.helpdesk-ticket-form * {
+    -webkit-tap-highlight-color: transparent;
+}
+
+.helpdesk-ticket-form input,
+.helpdesk-ticket-form textarea,
+.helpdesk-ticket-form select,
+.helpdesk-ticket-form .select2-container--default .select2-selection--single,
+.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
+.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
+.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
+    background: #09090b !important;
+    color: #f4f4f5 !important;
+    border-color: #3f3f46 !important;
+    caret-color: #f4f4f5 !important;
+    opacity: 1 !important;
+}
+
+.helpdesk-ticket-form input:disabled,
+.helpdesk-ticket-form textarea:disabled,
+.helpdesk-ticket-form select:disabled,
+.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
+.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
+    background: #09090b !important;
+    color: #a1a1aa !important;
+    opacity: 1 !important;
+}
+
+.helpdesk-ticket-form input:-webkit-autofill,
+.helpdesk-ticket-form input:-webkit-autofill:hover,
+.helpdesk-ticket-form input:-webkit-autofill:focus,
+.helpdesk-ticket-form textarea:-webkit-autofill,
+.helpdesk-ticket-form textarea:-webkit-autofill:hover,
+.helpdesk-ticket-form textarea:-webkit-autofill:focus,
+.helpdesk-ticket-form select:-webkit-autofill,
+.helpdesk-ticket-form select:-webkit-autofill:hover,
+.helpdesk-ticket-form select:-webkit-autofill:focus {
+    -webkit-text-fill-color: #f4f4f5 !important;
+    box-shadow: 0 0 0 1000px #09090b inset !important;
+    transition: background-color 9999s ease-in-out 0s;
+}
+
+.select2-container--default .select2-selection--single {
+    position: relative;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear {
+    position: absolute !important;
+    top: 50% !important;
+    right: 2.25rem !important;
+    transform: translateY(-50%);
+    color: #f87171 !important;
+    font-weight: 800 !important;
+    z-index: 5;
+}
+
+/* Select2 base */
+.helpdesk-ticket-form .select2-container {
+    width: 100% !important;
+}
+
+.helpdesk-ticket-form .select2-container--default .select2-selection--single,
+.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
+    min-height: 3.35rem;
+    border-radius: 1rem;
+    border: 1px solid #d4d4d8 !important;
+    background: #ffffff !important;
+    color: #18181b !important;
+    box-shadow: 0 10px 22px rgba(24, 24, 27, .08);
+}
+
+.helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #18181b !important;
+    line-height: 3.25rem;
+    padding-left: 1rem;
+    padding-right: 2.75rem;
+    font-weight: 700;
+}
+
+.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
+    align-items: center;
+    padding: .4rem .65rem;
+}
+
+.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    border: 1px solid #2563eb !important;
+    border-radius: 9999px !important;
+    background: #dbeafe !important;
+    color: #1e3a8a !important;
+    font-weight: 700;
+    padding: .2rem .55rem;
+}
+
+.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    color: #dc2626 !important;
+    margin-right: .35rem;
+}
+
+.select2-dropdown {
+    border: 1px solid #d4d4d8 !important;
+    border-radius: .9rem !important;
+    background: #ffffff !important;
+    color: #18181b !important;
+    overflow: hidden;
+    box-shadow: 0 18px 42px rgba(24, 24, 27, .18);
+}
+
+.select2-search__field {
+    border: 1px solid #d4d4d8 !important;
+    border-radius: .7rem !important;
+    background: #ffffff !important;
+    color: #18181b !important;
+}
+
+.select2-container--default .select2-results__option {
+    color: #18181b !important;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background: #2563eb !important;
+    color: #ffffff !important;
+}
+
+.select2-container--default .select2-results__option[aria-selected="true"] {
+    background: #e0f2fe !important;
+    color: #075985 !important;
+}
+
+/* Dark mode */
+.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single,
+.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
+    border-color: #3f3f46 !important;
+    background: #09090b !important;
+    color: #f4f4f5 !important;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
+}
+
+.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: #f4f4f5 !important;
+}
+
+.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    border-color: #60a5fa !important;
+    background: #1d4ed8 !important;
+    color: #ffffff !important;
+}
+
+.dark .select2-dropdown {
+    border-color: #3f3f46 !important;
+    background: #18181b !important;
+    color: #f4f4f5 !important;
+    box-shadow: 0 18px 42px rgba(0,0,0,.55);
+}
+
+.dark .select2-search__field {
+    border-color: #3f3f46 !important;
+    background: #09090b !important;
+    color: #f4f4f5 !important;
+}
+
+.dark .select2-container--default .select2-results__option {
+    color: #f4f4f5 !important;
+}
+
+.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background: #2563eb !important;
+    color: #ffffff !important;
+}
+
+.dark .select2-container--default .select2-results__option[aria-selected="true"] {
+    background: #27272a !important;
+    color: #ffffff !important;
+}
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 54a3bba4..41723f2a 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -1,161 +1,8 @@
 <div class="hd-helpdesk-surface space-y-6">
-    <style>
-        .hd-helpdesk-surface .hd-btn,
-        .hd-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: .5rem;
-            border-radius: .85rem;
-            padding: .62rem 1.05rem;
-            font-size: .875rem;
-            line-height: 1.25rem;
-            font-weight: 800;
-            color: #fff !important;
-            text-decoration: none !important;
-            border: 1px solid rgba(255,255,255,.14);
-            box-shadow: 0 12px 28px rgba(0,0,0,.22);
-            transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
-        }
-
-        .hd-helpdesk-surface .hd-btn:hover,
-        .hd-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 16px 34px rgba(0,0,0,.30);
-        }
-
-        .hd-btn-sm {
-            border-radius: .65rem;
-            padding: .42rem .78rem;
-            font-size: .8125rem;
-        }
-
-        .hd-btn-blue { background: #2563eb !important; }
-        .hd-btn-blue:hover { background: #1d4ed8 !important; }
-
-        .hd-btn-green { background: #16a34a !important; }
-        .hd-btn-green:hover { background: #15803d !important; }
-
-        .hd-btn-amber { background: #f59e0b !important; }
-        .hd-btn-amber:hover { background: #d97706 !important; }
-
-        .hd-btn-red { background: #dc2626 !important; }
-        .hd-btn-red:hover { background: #b91c1c !important; }
-
-        .hd-btn-violet { background: #7c3aed !important; }
-        .hd-btn-violet:hover { background: #6d28d9 !important; }
-
-        .hd-helpdesk-surface button[type="submit"],
-        .hd-helpdesk-surface button[data-flux-button][type="submit"] {
-            background: #16a34a !important;
-            color: #fff !important;
-            border-color: rgba(255,255,255,.14) !important;
-        }
-
-        .hd-helpdesk-surface button[wire\:click^="reset"],
-        .hd-helpdesk-surface button[wire\:target^="reset"] {
-            background: #f59e0b !important;
-            color: #fff !important;
-            border-color: rgba(255,255,255,.14) !important;
-        }
-
-        .hd-helpdesk-surface button[wire\:click^="edit"],
-        .hd-helpdesk-surface button[wire\:target^="edit"] {
-            background: #2563eb !important;
-            color: #fff !important;
-            border-color: rgba(255,255,255,.14) !important;
-        }
-
-        .hd-helpdesk-surface button[wire\:click^="delete"],
-        .hd-helpdesk-surface button[wire\:target^="delete"] {
-            background: #dc2626 !important;
-            color: #fff !important;
-            border-color: rgba(255,255,255,.14) !important;
-        }
-
-        .hd-select {
-            width: 100%;
-            min-height: 3.35rem;
-            border-radius: 1rem;
-            border: 1px solid #3f3f46 !important;
-            background: #09090b !important;
-            color: #f4f4f5 !important;
-            padding: .78rem 3rem .78rem 1rem;
-            font-weight: 800;
-            outline: none;
-            box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
-        }
-
-        .hd-select:focus {
-            border-color: #60a5fa !important;
-            box-shadow:
-                0 0 0 3px rgba(96,165,250,.38),
-                inset 0 1px 0 rgba(255,255,255,.05);
-        }
-
-        .helpdesk-required-star {
-            color: #ef4444 !important;
-            font-weight: 800;
-        }
-
-        .helpdesk-ticket-form,
-        .helpdesk-ticket-form * {
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        .helpdesk-ticket-form input,
-        .helpdesk-ticket-form textarea,
-        .helpdesk-ticket-form select,
-        .helpdesk-ticket-form .select2-container--default .select2-selection--single,
-        .helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
-        .helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
-        .helpdesk-ticket-form .select2-container--default .select2-selection__choice {
-            background: #09090b !important;
-            color: #f4f4f5 !important;
-            border-color: #3f3f46 !important;
-            caret-color: #f4f4f5 !important;
-            opacity: 1 !important;
-        }
-
-        .helpdesk-ticket-form input:disabled,
-        .helpdesk-ticket-form textarea:disabled,
-        .helpdesk-ticket-form select:disabled,
-        .helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
-        .helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
-            background: #09090b !important;
-            color: #a1a1aa !important;
-            opacity: 1 !important;
-        }
-
-        .helpdesk-ticket-form input:-webkit-autofill,
-        .helpdesk-ticket-form input:-webkit-autofill:hover,
-        .helpdesk-ticket-form input:-webkit-autofill:focus,
-        .helpdesk-ticket-form textarea:-webkit-autofill,
-        .helpdesk-ticket-form textarea:-webkit-autofill:hover,
-        .helpdesk-ticket-form textarea:-webkit-autofill:focus,
-        .helpdesk-ticket-form select:-webkit-autofill,
-        .helpdesk-ticket-form select:-webkit-autofill:hover,
-        .helpdesk-ticket-form select:-webkit-autofill:focus {
-            -webkit-text-fill-color: #f4f4f5 !important;
-            box-shadow: 0 0 0 1000px #09090b inset !important;
-            transition: background-color 9999s ease-in-out 0s;
-        }
-
-        .select2-container--default .select2-selection--single {
-            position: relative;
-        }
-
-        .select2-container--default .select2-selection--single .select2-selection__clear {
-            position: absolute !important;
-            top: 50% !important;
-            right: 2.25rem !important;
-            transform: translateY(-50%);
-            color: #f87171 !important;
-            font-weight: 800 !important;
-            z-index: 5;
-        }
-    </style>
-
+    @vite([
+        'resources/css/app.css',
+        'resources/js/app.js',
+    ])
     @include('helpdesk::partials.page-header', [
         'eyebrow' => 'Helpdesk',
         'title' => 'Create ticket',