diff --git a/resources/themes/backend/assets/css/app.css b/resources/themes/backend/assets/css/app.css
index ecbf55a..23f31c4 100644
--- a/resources/themes/backend/assets/css/app.css
+++ b/resources/themes/backend/assets/css/app.css
@@ -11,7 +11,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
     --color-zinc-50: #fafafa;
     --color-zinc-100: #f5f5f5;
@@ -25,16 +26,17 @@
     --color-zinc-900: #171717;
     --color-zinc-950: #0a0a0a;
 
-    --color-accent: var(--color-neutral-800);
-    --color-accent-content: var(--color-neutral-800);
-    --color-accent-foreground: var(--color-white);
+    /* Keep Flux controls on the same Helpdesk/Core blue accent. */
+    --color-accent: #2563eb;
+    --color-accent-content: #1d4ed8;
+    --color-accent-foreground: #ffffff;
 }
 
 @layer theme {
     .dark {
-        --color-accent: var(--color-white);
-        --color-accent-content: var(--color-white);
-        --color-accent-foreground: var(--color-neutral-800);
+        --color-accent: #60a5fa;
+        --color-accent-content: #93c5fd;
+        --color-accent-foreground: #172554;
     }
 }
 
diff --git a/resources/themes/backend/assets/css/helpdesk.css b/resources/themes/backend/assets/css/helpdesk.css
index 16f7afa..82d953f 100644
--- a/resources/themes/backend/assets/css/helpdesk.css
+++ b/resources/themes/backend/assets/css/helpdesk.css
@@ -1,974 +1,148 @@
-.hd-helpdesk-surface .hd-btn,
-.hd-btn {
+/*
+ * Helpdesk backend colour system.
+ * One palette is shared across dashboard, tickets, Kanban, support and settings.
+ */
+
+:root {
+    --hd-primary-50: #eff6ff;
+    --hd-primary-100: #dbeafe;
+    --hd-primary-200: #bfdbfe;
+    --hd-primary-300: #93c5fd;
+    --hd-primary-400: #60a5fa;
+    --hd-primary-500: #3b82f6;
+    --hd-primary-600: #2563eb;
+    --hd-primary-700: #1d4ed8;
+    --hd-primary-800: #1e40af;
+    --hd-primary-900: #1e3a8a;
+
+    --hd-surface: #ffffff;
+    --hd-surface-muted: #f8fafc;
+    --hd-border: #e2e8f0;
+    --hd-text: #0f172a;
+    --hd-text-muted: #64748b;
+}
+
+.dark {
+    --hd-surface: #18181b;
+    --hd-surface-muted: #27272a;
+    --hd-border: #3f3f46;
+    --hd-text: #f4f4f5;
+    --hd-text-muted: #a1a1aa;
+}
+
+.hd-helpdesk-surface {
+    color: var(--hd-text);
+}
+
+.hd-helpdesk-surface a:not([data-flux-button]) {
+    color: var(--hd-primary-600);
+}
+
+.dark .hd-helpdesk-surface a:not([data-flux-button]) {
+    color: var(--hd-primary-400);
+}
+
+/* Shared cards/panels */
+.hd-card,
+.hd-panel {
+    border: 1px solid var(--hd-border);
+    background: var(--hd-surface);
+    border-radius: 0.875rem;
+}
+
+.hd-card-header,
+.hd-panel-header {
+    border-bottom: 1px solid var(--hd-border);
+    background: var(--hd-surface-muted);
+}
+
+/* Shared Helpdesk buttons where plain HTML buttons are used. */
+.hd-button-primary {
     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: #ffffff !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-helpdesk-surface .hd-btn-sm,
-.hd-btn-sm {
-    border-radius: .65rem;
-    padding: .42rem .78rem;
-    font-size: .8125rem;
-}
-.hd-helpdesk-surface .hd-btn-blue,
-.hd-btn-blue { background: #2563eb !important; }
-.hd-helpdesk-surface .hd-btn-blue:hover,
-.hd-btn-blue:hover { background: #1d4ed8 !important; }
-.hd-helpdesk-surface .hd-btn-green,
-.hd-btn-green { background: #16a34a !important; }
-.hd-helpdesk-surface .hd-btn-green:hover,
-.hd-btn-green:hover { background: #15803d !important; }
-.hd-helpdesk-surface .hd-btn-amber,
-.hd-btn-amber { background: #f59e0b !important; }
-.hd-helpdesk-surface .hd-btn-amber:hover,
-.hd-btn-amber:hover { background: #d97706 !important; }
-.hd-helpdesk-surface .hd-btn-red,
-.hd-btn-red { background: #dc2626 !important; }
-.hd-helpdesk-surface .hd-btn-red:hover,
-.hd-btn-red:hover { background: #b91c1c !important; }
-.hd-helpdesk-surface .hd-btn-violet,
-.hd-btn-violet { background: #7c3aed !important; }
-.hd-helpdesk-surface .hd-btn-violet:hover,
-.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: #ffffff !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: #ffffff !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: #ffffff !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: #ffffff !important;
-    border-color: rgba(255,255,255,.14) !important;
+    gap: 0.5rem;
+    border-radius: 0.5rem;
+    background: var(--hd-primary-600);
+    color: #fff;
+    font-weight: 600;
+    padding: 0.55rem 0.9rem;
+    transition: background-color .15s ease, box-shadow .15s ease;
 }
 
-.hd-select {
+.hd-button-primary:hover {
+    background: var(--hd-primary-700);
+}
+
+.hd-button-primary:focus-visible {
+    outline: 2px solid var(--hd-primary-400);
+    outline-offset: 2px;
+}
+
+/* Fields */
+.hd-select,
+.hd-input,
+.hd-textarea {
     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);
+    border: 1px solid var(--hd-border);
+    background: var(--hd-surface);
+    color: var(--hd-text);
+    border-radius: 0.5rem;
 }
 
-.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;
-    background-color: #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,
-.helpdesk-ticket-form [disabled],
-.helpdesk-ticket-form [aria-disabled="true"] {
-    background: #09090b !important;
-    background-color: #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;
+.hd-select:focus,
+.hd-input:focus,
+.hd-textarea:focus {
+    border-color: var(--hd-primary-500);
+    outline: 2px solid color-mix(in srgb, var(--hd-primary-500) 25%, transparent);
+    outline-offset: 1px;
 }
 
-.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;
+/* Status/accent helpers */
+.hd-accent {
+    color: var(--hd-primary-600);
+}
+
+.dark .hd-accent {
+    color: var(--hd-primary-400);
+}
+
+.hd-accent-bg {
+    background: var(--hd-primary-600);
+    color: #fff;
+}
+
+.hd-accent-soft {
+    background: var(--hd-primary-50);
+    color: var(--hd-primary-800);
+    border-color: var(--hd-primary-200);
+}
+
+.dark .hd-accent-soft {
+    background: color-mix(in srgb, var(--hd-primary-900) 55%, transparent);
+    color: var(--hd-primary-200);
+    border-color: var(--hd-primary-800);
+}
+
+/*
+ * Flux sidebar active state.
+ * Flux currently exposes current state using aria-current on the rendered link.
+ */
+.hd-sidebar a[aria-current="page"] {
+    background: var(--hd-primary-600) !important;
     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;
+.hd-sidebar a[aria-current="page"] svg {
     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-sidebar a:not([aria-current="page"]):hover {
+    background: var(--hd-primary-50);
+    color: var(--hd-primary-800);
 }
 
-.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;
-}
-
-.select2-container--default .select2-results__option {
-    background: rgb(9 9 11);
-    color: rgb(244 244 245);
-}
-
-.select2-container--default .select2-results__option--highlighted[aria-selected],
-.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
-    background: rgb(37 99 235) !important;
-    color: rgb(255 255 255) !important;
-}
-
-.select2-container--default .select2-results__option[aria-selected="true"],
-.select2-container--default .select2-results__option--selected {
-    background: rgb(30 64 175) !important;
-    color: rgb(255 255 255) !important;
-}
-
-.select2-dropdown {
-    border-color: rgb(63 63 70) !important;
-    background: rgb(9 9 11) !important;
-}
-
-.select2-container--default .select2-selection--single {
-    border: 1px solid rgb(63 63 70) !important;
-    background: rgb(9 9 11) !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    color: rgb(244 244 245) !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__placeholder {
-    color: rgb(113 113 122) !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow b {
-    border-color: rgb(161 161 170) transparent transparent transparent !important;
-}
-
-.select2-container--default.select2-container--open .select2-selection--single {
-    border-color: rgb(59 130 246) !important;
-    box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
-}
-
-.select2-container--default .select2-selection--multiple {
-    border: 1px solid rgb(63 63 70) !important;
-    background: rgb(9 9 11) !important;
-}
-
-.select2-container--default .select2-selection--multiple .select2-selection__choice {
-    border: 1px solid rgb(59 130 246 / 0.45) !important;
-    background: rgb(30 64 175 / 0.35) !important;
-    color: rgb(219 234 254) !important;
-}
-
-.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-    color: rgb(191 219 254) !important;
-}
-
-.select2-container--default .select2-selection--single,
-.select2-container--default .select2-selection--multiple {
-    border-radius: 0.75rem !important;
-}
-
-.select2-dropdown {
-    overflow: hidden;
-    border-radius: 0.75rem !important;
-}
-
-.select2-container--open .select2-dropdown--below {
-    margin-top: 0.35rem;
-    border-radius: 0.75rem !important;
-}
-
-.select2-container--open .select2-dropdown--above {
-    margin-bottom: 0.35rem;
-    border-radius: 0.75rem !important;
-}
-
-.select2-container--default .select2-selection--single {
-    position: relative;
-    padding-right: 3.5rem;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    padding-right: 3.5rem;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear {
-    position: absolute;
-    right: 2rem;
-    top: 50%;
-    z-index: 3;
-    margin: 0;
-    transform: translateY(-50%);
-    color: rgb(161 161 170);
-    font-size: 1rem;
-    line-height: 1;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear:hover {
-    color: rgb(248 113 113);
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-    right: 0.75rem;
-}
-
-.select2-container--default .select2-selection--single {
-    position: relative !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    padding-left: 0.75rem !important;
-    padding-right: 4.25rem !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear {
-    position: absolute !important;
-    right: 2.35rem !important;
-    top: 50% !important;
-    float: none !important;
-    margin: 0 !important;
-    transform: translateY(-50%) !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear span {
-    color: rgb(161 161 170) !important;
-    font-size: 1.1rem !important;
-    line-height: 1 !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-    right: 0.75rem !important;
-}
-
-.select2-container--default .select2-selection--single {
-    display: flex !important;
-    align-items: center !important;
-    position: relative !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    flex: 1 1 auto !important;
-    width: 100% !important;
-    padding-right: 4.5rem !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear {
-    position: absolute !important;
-    right: 2.25rem !important;
-    top: 50% !important;
-    z-index: 20 !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 1.25rem !important;
-    height: 1.25rem !important;
-    float: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    transform: translateY(-50%) !important;
-    color: rgb(161 161 170) !important;
-    cursor: pointer !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__clear:hover {
-    color: rgb(248 113 113) !important;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-    position: absolute !important;
-    right: 0.75rem !important;
-    top: 50% !important;
-    transform: translateY(-50%) !important;
-}
-
-/* Helpdesk Flatpickr date picker */
-.flatpickr-calendar {
-    border: 1px solid rgb(63 63 70);
-    background: rgb(24 24 27);
-    color: rgb(244 244 245);
-    box-shadow: 0 20px 45px rgb(0 0 0 / 0.35);
-}
-
-.flatpickr-calendar.arrowTop::before,
-.flatpickr-calendar.arrowTop::after,
-.flatpickr-calendar.arrowBottom::before,
-.flatpickr-calendar.arrowBottom::after {
-    border-bottom-color: rgb(24 24 27);
-    border-top-color: rgb(24 24 27);
-}
-
-.flatpickr-months,
-.flatpickr-months .flatpickr-month,
-.flatpickr-current-month .flatpickr-monthDropdown-months,
-.flatpickr-current-month input.cur-year {
-    background: rgb(24 24 27);
-    color: rgb(244 244 245);
-}
-
-.flatpickr-weekday,
-span.flatpickr-weekday {
-    color: rgb(161 161 170);
-}
-
-.flatpickr-day {
-    color: rgb(228 228 231);
-}
-
-.flatpickr-day:hover,
-.flatpickr-day:focus {
-    border-color: rgb(59 130 246);
-    background: rgb(39 39 42);
-    color: rgb(255 255 255);
-}
-
-.flatpickr-day.selected,
-.flatpickr-day.startRange,
-.flatpickr-day.endRange {
-    border-color: rgb(37 99 235);
-    background: rgb(37 99 235);
-    color: rgb(255 255 255);
-}
-
-.flatpickr-day.today {
-    border-color: rgb(34 197 94);
-}
-
-.flatpickr-day.flatpickr-disabled,
-.flatpickr-day.prevMonthDay,
-.flatpickr-day.nextMonthDay {
-    color: rgb(113 113 122);
-}
-.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;
-    font-size: .95rem;
-    color: #ffffff !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-helpdesk-surface .hd-btn-sm,
-.hd-btn-sm {
-    border-radius: .65rem;
-    padding: .42rem .78rem;
-    font-size: .8125rem;
-}
-.hd-helpdesk-surface .hd-btn-blue,
-.hd-btn-blue { background: #2563eb !important; }
-.hd-helpdesk-surface .hd-btn-blue:hover,
-.hd-btn-blue:hover { background: #1d4ed8 !important; }
-.hd-helpdesk-surface .hd-btn-green,
-.hd-btn-green { background: #16a34a !important; }
-.hd-helpdesk-surface .hd-btn-green:hover,
-.hd-btn-green:hover { background: #15803d !important; }
-.hd-helpdesk-surface .hd-btn-amber,
-.hd-btn-amber { background: #f59e0b !important; }
-.hd-helpdesk-surface .hd-btn-amber:hover,
-.hd-btn-amber:hover { background: #d97706 !important; }
-.hd-helpdesk-surface .hd-btn-red,
-.hd-btn-red { background: #dc2626 !important; }
-.hd-helpdesk-surface .hd-btn-red:hover,
-.hd-btn-red:hover { background: #b91c1c !important; }
-.hd-helpdesk-surface .hd-btn-violet,
-.hd-btn-violet { background: #7c3aed !important; }
-.hd-helpdesk-surface .hd-btn-violet:hover,
-.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: #ffffff !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: #ffffff !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: #ffffff !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: #ffffff !important;
-    border-color: rgba(255,255,255,.14) !important;
-}
-
-.hd-select-wrap {
-    position: relative;
-    width: 100%;
-    max-width: 18rem;
-}
-.hd-select-wrap::after {
-    position: absolute;
-    top: 50%;
-    right: 1rem;
-    width: .55rem;
-    height: .55rem;
-    content: "";
-    pointer-events: none;
-    border-right: 2px solid #93c5fd;
-    border-bottom: 2px solid #93c5fd;
-    transform: translateY(-65%) rotate(45deg);
-}
-.hd-select {
-    width: 100%;
-    min-height: 2.75rem;
-    appearance: none;
-    -webkit-appearance: none;
-    border-radius: .9rem;
-    border: 1px solid rgba(96, 165, 250, .38) !important;
-    background: linear-gradient(135deg, #030712 0%, #111827 54%, #0f172a 100%) !important;
-    color: #f8fafc !important;
-    padding: .62rem 2.45rem .62rem .9rem;
-    font-weight: 800;
-    outline: none;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
-}
-.hd-select option {
-    background: #020617 !important;
-    color: #f8fafc !important;
-}
-.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,.08), 0 14px 30px rgba(2,6,23,.38);
-}
-.hd-ticket-board-select-wrap {
-    position: relative;
-    max-width: 12.5rem;
-}
-.hd-ticket-board-select-wrap::after {
-    position: absolute;
-    top: 50%;
-    right: .7rem;
-    width: .45rem;
-    height: .45rem;
-    content: "";
-    pointer-events: none;
-    border-right: 2px solid #86efac;
-    border-bottom: 2px solid #86efac;
-    transform: translateY(-65%) rotate(45deg);
-}
-.hd-ticket-board-select {
-    width: 100%;
-    min-height: 2.35rem;
-    appearance: none;
-    -webkit-appearance: none;
-    border-radius: .85rem;
-    border: 1px solid rgba(34,197,94,.35) !important;
-    background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important;
-    color: #ecfdf5 !important;
-    padding: .48rem 2rem .48rem .75rem;
-    font-size: .75rem;
-    font-weight: 800;
-    outline: none;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.26);
-}
-.hd-ticket-board-select option {
-    background: #052e16 !important;
-    color: #ecfdf5 !important;
-}
-.hd-ticket-board-select:focus {
-    border-color: #86efac !important;
-    box-shadow: 0 0 0 3px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.08);
-}
-
-.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;
-    background-color: #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,
-.helpdesk-ticket-form [disabled],
-.helpdesk-ticket-form [aria-disabled="true"] {
-    background: #09090b !important;
-    background-color: #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;
-}
-
-.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: #ffffff !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-helpdesk-surface .hd-btn-sm,
-.hd-btn-sm {
-    border-radius: .65rem;
-    padding: .42rem .78rem;
-    font-size: .8125rem;
-}
-.hd-helpdesk-surface .hd-btn-blue,
-.hd-btn-blue { background: #2563eb !important; }
-.hd-helpdesk-surface .hd-btn-blue:hover,
-.hd-btn-blue:hover { background: #1d4ed8 !important; }
-.hd-helpdesk-surface .hd-btn-green,
-.hd-btn-green { background: #16a34a !important; }
-.hd-helpdesk-surface .hd-btn-green:hover,
-.hd-btn-green:hover { background: #15803d !important; }
-.hd-helpdesk-surface .hd-btn-amber,
-.hd-btn-amber { background: #f59e0b !important; }
-.hd-helpdesk-surface .hd-btn-amber:hover,
-.hd-btn-amber:hover { background: #d97706 !important; }
-.hd-helpdesk-surface .hd-btn-red,
-.hd-btn-red { background: #dc2626 !important; }
-.hd-helpdesk-surface .hd-btn-red:hover,
-.hd-btn-red:hover { background: #b91c1c !important; }
-.hd-helpdesk-surface .hd-btn-violet,
-.hd-btn-violet { background: #7c3aed !important; }
-.hd-helpdesk-surface .hd-btn-violet:hover,
-.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: #ffffff !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: #ffffff !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: #ffffff !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: #ffffff !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-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;
-    background-color: #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,
-.helpdesk-ticket-form [disabled],
-.helpdesk-ticket-form [aria-disabled="true"] {
-    background: #09090b !important;
-    background-color: #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;
+.dark .hd-sidebar a:not([aria-current="page"]):hover {
+    background: color-mix(in srgb, var(--hd-primary-900) 30%, transparent);
+    color: var(--hd-primary-200);
 }
diff --git a/resources/themes/backend/views/layouts/app/sidebar.blade.php b/resources/themes/backend/views/layouts/app/sidebar.blade.php
index 3d44785..2d4e78a 100644
--- a/resources/themes/backend/views/layouts/app/sidebar.blade.php
+++ b/resources/themes/backend/views/layouts/app/sidebar.blade.php
@@ -8,7 +8,7 @@
 <flux:sidebar
     sticky
     collapsible="mobile"
-    class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900"
+    class="hd-sidebar border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900"
 >
     <flux:sidebar.header>
         <x-app-logo
@@ -31,35 +31,56 @@
                 {{ __('Dashboard') }}
             </flux:sidebar.item>
         </flux:sidebar.group>
+
+        <flux:sidebar.group :heading="__('Helpdesk')" class="grid">
+            <flux:sidebar.item
+                icon="inbox"
+                :href="route('helpdesk.tickets.index')"
+                :current="request()->routeIs('helpdesk.tickets.*')"
+                wire:navigate
+            >
+                {{ __('Tickets') }}
+            </flux:sidebar.item>
+
+            <flux:sidebar.item
+                icon="squares-2x2"
+                :href="route('helpdesk.kanban')"
+                :current="request()->routeIs('helpdesk.kanban')"
+                wire:navigate
+            >
+                {{ __('Kanban') }}
+            </flux:sidebar.item>
+
+            <flux:sidebar.item
+                icon="lifebuoy"
+                :href="route('helpdesk.index')"
+                :current="request()->routeIs('helpdesk.index')"
+                wire:navigate
+            >
+                {{ __('Support') }}
+            </flux:sidebar.item>
+
+            @if (auth()->user()->isHelpdeskAdmin())
+                <flux:sidebar.item
+                    icon="cog"
+                    :href="route('helpdesk.settings')"
+                    :current="request()->routeIs('helpdesk.settings')"
+                    wire:navigate
+                >
+                    {{ __('Settings') }}
+                </flux:sidebar.item>
+            @endif
+        </flux:sidebar.group>
     </flux:sidebar.nav>
 
     <flux:spacer />
 
-    <flux:sidebar.nav>
-        <flux:sidebar.item
-            icon="folder"
-            href="https://github.com/laravel/livewire-starter-kit"
-            target="_blank"
-        >
-            {{ __('Repository') }}
-        </flux:sidebar.item>
-
-        <flux:sidebar.item
-            icon="book-open"
-            href="https://laravel.com/docs/starter-kits#livewire"
-            target="_blank"
-        >
-            {{ __('Documentation') }}
-        </flux:sidebar.item>
-    </flux:sidebar.nav>
-
     <x-desktop-user-menu
         class="hidden lg:block"
         :name="auth()->user()->name"
     />
 </flux:sidebar>
 
-<!-- Mobile User Menu -->
 <flux:header class="lg:hidden">
     <flux:sidebar.toggle
         class="lg:hidden"
@@ -101,11 +122,29 @@
 
             <flux:menu.radio.group>
                 <flux:menu.item
-                    :href="route('profile.edit')"
-                    icon="cog"
+                    :href="route('helpdesk.index')"
+                    icon="lifebuoy"
                     wire:navigate
                 >
-                    {{ __('Settings') }}
+                    {{ __('Support') }}
+                </flux:menu.item>
+
+                @if (auth()->user()->isHelpdeskAdmin())
+                    <flux:menu.item
+                        :href="route('helpdesk.settings')"
+                        icon="cog"
+                        wire:navigate
+                    >
+                        {{ __('Helpdesk Settings') }}
+                    </flux:menu.item>
+                @endif
+
+                <flux:menu.item
+                    :href="route('profile.edit')"
+                    icon="user-circle"
+                    wire:navigate
+                >
+                    {{ __('Profile Settings') }}
                 </flux:menu.item>
             </flux:menu.radio.group>