From 34aed3596b42ccb9c7d41f6ace27362c9a07e015 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Sun, 12 Jan 2025 18:46:27 +0200
Subject: [PATCH 01/15] Enhance UI and configuration for species settings and
 themes

- Updated Tailwind CSS configuration to include detailed theme definitions for light and dark modes, improving design consistency.
- Added tooltip styling in custom CSS for better user experience across various settings pages.
- Implemented selection functionality in the list detections view, allowing users to select multiple items for verification or deletion.
- Enhanced audio settings and filters with tooltips for better guidance on configuration options.
- Improved species settings management by adding sections for including and excluding species, along with custom action configurations.
- Streamlined the UI for species settings, ensuring clarity and ease of use with updated descriptions and tooltips.

This commit focuses on improving the user interface and experience in the species settings and related views, while also enhancing the underlying configuration for themes and tooltips.
---
 assets/custom.css                       |  26 +
 assets/tailwind.css                     | 839 ++++++++++++++----------
 tailwind.config.js                      |  74 ++-
 views/fragments/listDetections.html     |  61 +-
 views/settings/audioSettings.html       |  31 +-
 views/settings/filtersSettings.html     |  19 +-
 views/settings/integrationSettings.html |  35 +-
 views/settings/mainSettings.html        |  86 +--
 views/settings/speciesSettings.html     |  92 ++-
 views/settings/templates/checkbox.html  |   2 +-
 views/settings/templates/hostField.html |   2 +-
 11 files changed, 766 insertions(+), 501 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 33cfcc80..36c110ce 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -358,4 +358,30 @@ thead.sticky-header {
 [data-theme=dark] .heatmap-color-9 {
   background: linear-gradient(135deg, var(--heatmap-color-9) 66%, var(--heatmap-color-8) 110%);
   color: var(--heatmap-text-9, #fff);
+}
+
+/* Tooltip styling */
+.tooltip {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 50;
+  background-color: var(--surface-200);
+  border: 1px solid var(--border-100);
+  max-width: 36rem;
+  white-space: normal;
+}
+
+/* Add overflow handling for tooltip container */
+.form-control.relative {
+  overflow: visible;
+}
+
+.collapse-content {
+  overflow: visible !important;
 }
\ No newline at end of file
diff --git a/assets/tailwind.css b/assets/tailwind.css
index 6a5e6803..b475a3e3 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -550,7 +550,7 @@ video {
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
 
-[hidden]:where(:not([hidden="until-found"])) {
+[hidden] {
   display: none;
 }
 
@@ -625,335 +625,251 @@ html {
 }
 
 :root {
-  color-scheme: light;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 89.824% 0.06192 275.75;
-  --ac: 15.352% 0.0368 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
+  --p: 54.615% 0.215208 262.880917;
+  --bc: 20% 0 0;
+  --pc: 90.923% 0.043042 262.880917;
+  --sc: 88.9222% 0.005262 256.801751;
+  --ac: 11.7523% 0.027774 241.966052;
+  --nc: 85.5616% 0.005919 256.847952;
+  --inc: 13.6937% 0.029574 237.322518;
+  --suc: 14.4549% 0.038401 149.57933;
+  --wac: 15.3718% 0.032932 70.08039;
+  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
-  --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --p: 49.12% 0.3096 275.75;
-  --s: 69.71% 0.329 342.55;
-  --sc: 98.71% 0.0106 342.55;
-  --a: 76.76% 0.184 183.61;
-  --n: 32.1785% 0.02476 255.701624;
-  --nc: 89.4994% 0.011585 252.096176;
+  --s: 44.6112% 0.026312 256.801751;
+  --a: 58.7617% 0.138868 241.966052;
+  --n: 27.8078% 0.029596 256.847952;
   --b1: 100% 0 0;
-  --b2: 96.1151% 0 0;
-  --b3: 92.4169% 0.00108 197.137559;
-  --bc: 27.8078% 0.029596 256.847952;
+  --b2: 96.6956% 0.002874 264.541934;
+  --b3: 92.7582% 0.005814 264.531291;
+  --surface-100: #ffffff;
+  --surface-200: #f8fafc;
+  --surface-300: #f1f5f9;
+  --surface-400: #e2e8f0;
+  --border-100: #e2e8f0;
+  --border-200: #cbd5e1;
+  --hover-overlay: rgba(0,0,0,0.05);
+  --in: 68.4687% 0.147869 237.322518;
+  --su: 72.2746% 0.192007 149.57933;
+  --wa: 76.859% 0.164659 70.08039;
+  --er: 63.6834% 0.207849 25.331328;
+  --rounded-box: 0.5rem;
+  --rounded-btn: 0.3rem;
+  --rounded-badge: 0.25rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-text-case: normal;
+  --navbar-padding: 0.75rem;
+  --border-btn: 1px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    color-scheme: dark;
-    --in: 72.06% 0.191 231.6;
-    --su: 64.8% 0.150 160;
-    --wa: 84.71% 0.199 83.87;
-    --er: 71.76% 0.221 22.18;
-    --pc: 13.138% 0.0392 275.75;
-    --sc: 14.96% 0.052 342.55;
-    --ac: 14.902% 0.0334 183.61;
-    --inc: 0% 0 0;
-    --suc: 0% 0 0;
-    --wac: 0% 0 0;
-    --erc: 0% 0 0;
-    --rounded-box: 1rem;
-    --rounded-btn: 0.5rem;
-    --rounded-badge: 1.9rem;
-    --animation-btn: 0.25s;
-    --animation-input: .2s;
+    --p: 62.3083% 0.188015 259.814527;
+    --bc: 85.5616% 0.005919 256.847952;
+    --pc: 12.4617% 0.037603 259.814527;
+    --sc: 91.0204% 0.004672 264.363742;
+    --ac: 89.9996% 0.023858 242.74902;
+    --nc: 17.4336% 0.001868 258.338227;
+    --inc: 11.7523% 0.027774 241.966052;
+    --suc: 12.541% 0.033982 149.213788;
+    --wac: 13.3168% 0.031484 58.31834;
+    --erc: 91.542% 0.043031 27.325049;
     --btn-focus-scale: 0.95;
-    --border-btn: 1px;
     --tab-border: 1px;
     --tab-radius: 0.5rem;
-    --p: 65.69% 0.196 275.75;
-    --s: 74.8% 0.26 342.55;
-    --a: 74.51% 0.167 183.61;
-    --n: 31.3815% 0.021108 254.139175;
-    --nc: 74.6477% 0.0216 264.435964;
-    --b1: 25.3267% 0.015896 252.417568;
-    --b2: 23.2607% 0.013807 253.100675;
-    --b3: 21.1484% 0.01165 254.087939;
-    --bc: 74.6477% 0.0216 264.435964;
+    --s: 55.1019% 0.023361 264.363742;
+    --a: 49.9982% 0.11929 242.74902;
+    --n: 87.1681% 0.009339 258.338227;
+    --b1: 27.8078% 0.029596 256.847952;
+    --b2: 21.0084% 0.031763 264.664526;
+    --b3: 20.7682% 0.039824 265.754874;
+    --surface-100: #1f2937;
+    --surface-200: #262f3f;
+    --surface-300: #2d3748;
+    --surface-400: #374151;
+    --border-100: #334155;
+    --border-200: #475569;
+    --hover-overlay: rgba(255,255,255,0.05);
+    --in: 58.7617% 0.138868 241.966052;
+    --su: 62.7052% 0.169912 149.213788;
+    --wa: 66.584% 0.157422 58.31834;
+    --er: 57.7099% 0.215157 27.325049;
+    --rounded-box: 0.5rem;
+    --rounded-btn: 0.3rem;
+    --rounded-badge: 0.25rem;
+    --animation-btn: 0.25s;
+    --animation-input: 0.2s;
+    --btn-text-case: normal;
+    --navbar-padding: 0.75rem;
+    --border-btn: 1px;
   }
 }
 
 [data-theme=light] {
-  color-scheme: light;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 89.824% 0.06192 275.75;
-  --ac: 15.352% 0.0368 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
+  --p: 54.615% 0.215208 262.880917;
+  --bc: 20% 0 0;
+  --pc: 90.923% 0.043042 262.880917;
+  --sc: 88.9222% 0.005262 256.801751;
+  --ac: 11.7523% 0.027774 241.966052;
+  --nc: 85.5616% 0.005919 256.847952;
+  --inc: 13.6937% 0.029574 237.322518;
+  --suc: 14.4549% 0.038401 149.57933;
+  --wac: 15.3718% 0.032932 70.08039;
+  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
-  --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --p: 49.12% 0.3096 275.75;
-  --s: 69.71% 0.329 342.55;
-  --sc: 98.71% 0.0106 342.55;
-  --a: 76.76% 0.184 183.61;
-  --n: 32.1785% 0.02476 255.701624;
-  --nc: 89.4994% 0.011585 252.096176;
+  --s: 44.6112% 0.026312 256.801751;
+  --a: 58.7617% 0.138868 241.966052;
+  --n: 27.8078% 0.029596 256.847952;
   --b1: 100% 0 0;
-  --b2: 96.1151% 0 0;
-  --b3: 92.4169% 0.00108 197.137559;
-  --bc: 27.8078% 0.029596 256.847952;
+  --b2: 96.6956% 0.002874 264.541934;
+  --b3: 92.7582% 0.005814 264.531291;
+  --surface-100: #ffffff;
+  --surface-200: #f8fafc;
+  --surface-300: #f1f5f9;
+  --surface-400: #e2e8f0;
+  --border-100: #e2e8f0;
+  --border-200: #cbd5e1;
+  --hover-overlay: rgba(0,0,0,0.05);
+  --in: 68.4687% 0.147869 237.322518;
+  --su: 72.2746% 0.192007 149.57933;
+  --wa: 76.859% 0.164659 70.08039;
+  --er: 63.6834% 0.207849 25.331328;
+  --rounded-box: 0.5rem;
+  --rounded-btn: 0.3rem;
+  --rounded-badge: 0.25rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-text-case: normal;
+  --navbar-padding: 0.75rem;
+  --border-btn: 1px;
 }
 
 :root:has(input.theme-controller[value=light]:checked) {
-  color-scheme: light;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 89.824% 0.06192 275.75;
-  --ac: 15.352% 0.0368 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
+  --p: 54.615% 0.215208 262.880917;
+  --bc: 20% 0 0;
+  --pc: 90.923% 0.043042 262.880917;
+  --sc: 88.9222% 0.005262 256.801751;
+  --ac: 11.7523% 0.027774 241.966052;
+  --nc: 85.5616% 0.005919 256.847952;
+  --inc: 13.6937% 0.029574 237.322518;
+  --suc: 14.4549% 0.038401 149.57933;
+  --wac: 15.3718% 0.032932 70.08039;
+  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
-  --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --p: 49.12% 0.3096 275.75;
-  --s: 69.71% 0.329 342.55;
-  --sc: 98.71% 0.0106 342.55;
-  --a: 76.76% 0.184 183.61;
-  --n: 32.1785% 0.02476 255.701624;
-  --nc: 89.4994% 0.011585 252.096176;
+  --s: 44.6112% 0.026312 256.801751;
+  --a: 58.7617% 0.138868 241.966052;
+  --n: 27.8078% 0.029596 256.847952;
   --b1: 100% 0 0;
-  --b2: 96.1151% 0 0;
-  --b3: 92.4169% 0.00108 197.137559;
-  --bc: 27.8078% 0.029596 256.847952;
-}
-
-[data-theme=dark] {
-  color-scheme: dark;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 13.138% 0.0392 275.75;
-  --sc: 14.96% 0.052 342.55;
-  --ac: 14.902% 0.0334 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
+  --b2: 96.6956% 0.002874 264.541934;
+  --b3: 92.7582% 0.005814 264.531291;
+  --surface-100: #ffffff;
+  --surface-200: #f8fafc;
+  --surface-300: #f1f5f9;
+  --surface-400: #e2e8f0;
+  --border-100: #e2e8f0;
+  --border-200: #cbd5e1;
+  --hover-overlay: rgba(0,0,0,0.05);
+  --in: 68.4687% 0.147869 237.322518;
+  --su: 72.2746% 0.192007 149.57933;
+  --wa: 76.859% 0.164659 70.08039;
+  --er: 63.6834% 0.207849 25.331328;
+  --rounded-box: 0.5rem;
+  --rounded-btn: 0.3rem;
+  --rounded-badge: 0.25rem;
   --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
+  --animation-input: 0.2s;
+  --btn-text-case: normal;
+  --navbar-padding: 0.75rem;
   --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --p: 65.69% 0.196 275.75;
-  --s: 74.8% 0.26 342.55;
-  --a: 74.51% 0.167 183.61;
-  --n: 31.3815% 0.021108 254.139175;
-  --nc: 74.6477% 0.0216 264.435964;
-  --b1: 25.3267% 0.015896 252.417568;
-  --b2: 23.2607% 0.013807 253.100675;
-  --b3: 21.1484% 0.01165 254.087939;
-  --bc: 74.6477% 0.0216 264.435964;
 }
 
-:root:has(input.theme-controller[value=dark]:checked) {
-  color-scheme: dark;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 13.138% 0.0392 275.75;
-  --sc: 14.96% 0.052 342.55;
-  --ac: 14.902% 0.0334 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
+[data-theme=dark] {
+  --p: 62.3083% 0.188015 259.814527;
+  --bc: 85.5616% 0.005919 256.847952;
+  --pc: 12.4617% 0.037603 259.814527;
+  --sc: 91.0204% 0.004672 264.363742;
+  --ac: 89.9996% 0.023858 242.74902;
+  --nc: 17.4336% 0.001868 258.338227;
+  --inc: 11.7523% 0.027774 241.966052;
+  --suc: 12.541% 0.033982 149.213788;
+  --wac: 13.3168% 0.031484 58.31834;
+  --erc: 91.542% 0.043031 27.325049;
   --btn-focus-scale: 0.95;
-  --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --p: 65.69% 0.196 275.75;
-  --s: 74.8% 0.26 342.55;
-  --a: 74.51% 0.167 183.61;
-  --n: 31.3815% 0.021108 254.139175;
-  --nc: 74.6477% 0.0216 264.435964;
-  --b1: 25.3267% 0.015896 252.417568;
-  --b2: 23.2607% 0.013807 253.100675;
-  --b3: 21.1484% 0.01165 254.087939;
-  --bc: 74.6477% 0.0216 264.435964;
-}
-
-[data-theme=dim] {
-  color-scheme: dark;
-  --pc: 17.2267% 0.028331 139.549991;
-  --sc: 14.6752% 0.033181 35.353059;
-  --ac: 14.8459% 0.026728 311.37924;
-  --inc: 17.2157% 0.028409 206.182959;
-  --suc: 17.2343% 0.028437 166.534048;
-  --wac: 17.2327% 0.028447 94.818679;
-  --erc: 16.4838% 0.019914 33.756357;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
+  --s: 55.1019% 0.023361 264.363742;
+  --a: 49.9982% 0.11929 242.74902;
+  --n: 87.1681% 0.009339 258.338227;
+  --b1: 27.8078% 0.029596 256.847952;
+  --b2: 21.0084% 0.031763 264.664526;
+  --b3: 20.7682% 0.039824 265.754874;
+  --surface-100: #1f2937;
+  --surface-200: #262f3f;
+  --surface-300: #2d3748;
+  --surface-400: #374151;
+  --border-100: #334155;
+  --border-200: #475569;
+  --hover-overlay: rgba(255,255,255,0.05);
+  --in: 58.7617% 0.138868 241.966052;
+  --su: 62.7052% 0.169912 149.213788;
+  --wa: 66.584% 0.157422 58.31834;
+  --er: 57.7099% 0.215157 27.325049;
+  --rounded-box: 0.5rem;
+  --rounded-btn: 0.3rem;
+  --rounded-badge: 0.25rem;
   --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
+  --animation-input: 0.2s;
+  --btn-text-case: normal;
+  --navbar-padding: 0.75rem;
   --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --p: 86.1335% 0.141656 139.549991;
-  --s: 73.3759% 0.165904 35.353059;
-  --a: 74.2296% 0.133641 311.37924;
-  --n: 24.7311% 0.020483 264.094728;
-  --nc: 82.9011% 0.031335 222.959324;
-  --b1: 30.8577% 0.023243 264.149498;
-  --b2: 28.0368% 0.01983 264.182074;
-  --b3: 26.3469% 0.018403 262.177739;
-  --bc: 82.9011% 0.031335 222.959324;
-  --in: 86.0785% 0.142046 206.182959;
-  --su: 86.1717% 0.142187 166.534048;
-  --wa: 86.1634% 0.142236 94.818679;
-  --er: 82.4189% 0.09957 33.756357;
-}
-
-:root:has(input.theme-controller[value=dim]:checked) {
-  color-scheme: dark;
-  --pc: 17.2267% 0.028331 139.549991;
-  --sc: 14.6752% 0.033181 35.353059;
-  --ac: 14.8459% 0.026728 311.37924;
-  --inc: 17.2157% 0.028409 206.182959;
-  --suc: 17.2343% 0.028437 166.534048;
-  --wac: 17.2327% 0.028447 94.818679;
-  --erc: 16.4838% 0.019914 33.756357;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
+}
+
+:root:has(input.theme-controller[value=dark]:checked) {
+  --p: 62.3083% 0.188015 259.814527;
+  --bc: 85.5616% 0.005919 256.847952;
+  --pc: 12.4617% 0.037603 259.814527;
+  --sc: 91.0204% 0.004672 264.363742;
+  --ac: 89.9996% 0.023858 242.74902;
+  --nc: 17.4336% 0.001868 258.338227;
+  --inc: 11.7523% 0.027774 241.966052;
+  --suc: 12.541% 0.033982 149.213788;
+  --wac: 13.3168% 0.031484 58.31834;
+  --erc: 91.542% 0.043031 27.325049;
   --btn-focus-scale: 0.95;
-  --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --p: 86.1335% 0.141656 139.549991;
-  --s: 73.3759% 0.165904 35.353059;
-  --a: 74.2296% 0.133641 311.37924;
-  --n: 24.7311% 0.020483 264.094728;
-  --nc: 82.9011% 0.031335 222.959324;
-  --b1: 30.8577% 0.023243 264.149498;
-  --b2: 28.0368% 0.01983 264.182074;
-  --b3: 26.3469% 0.018403 262.177739;
-  --bc: 82.9011% 0.031335 222.959324;
-  --in: 86.0785% 0.142046 206.182959;
-  --su: 86.1717% 0.142187 166.534048;
-  --wa: 86.1634% 0.142236 94.818679;
-  --er: 82.4189% 0.09957 33.756357;
-}
-
-[data-theme=nord] {
-  color-scheme: light;
-  --pc: 11.8872% 0.015449 254.027774;
-  --sc: 13.9303% 0.011822 248.687186;
-  --ac: 15.4929% 0.01245 217.469017;
-  --inc: 13.8414% 0.012499 332.664922;
-  --suc: 15.3654% 0.01498 131.063061;
-  --wac: 17.0972% 0.017847 84.093335;
-  --erc: 12.122% 0.024119 15.341883;
+  --s: 55.1019% 0.023361 264.363742;
+  --a: 49.9982% 0.11929 242.74902;
+  --n: 87.1681% 0.009339 258.338227;
+  --b1: 27.8078% 0.029596 256.847952;
+  --b2: 21.0084% 0.031763 264.664526;
+  --b3: 20.7682% 0.039824 265.754874;
+  --surface-100: #1f2937;
+  --surface-200: #262f3f;
+  --surface-300: #2d3748;
+  --surface-400: #374151;
+  --border-100: #334155;
+  --border-200: #475569;
+  --hover-overlay: rgba(255,255,255,0.05);
+  --in: 58.7617% 0.138868 241.966052;
+  --su: 62.7052% 0.169912 149.213788;
+  --wa: 66.584% 0.157422 58.31834;
+  --er: 57.7099% 0.215157 27.325049;
+  --rounded-box: 0.5rem;
+  --rounded-btn: 0.3rem;
+  --rounded-badge: 0.25rem;
   --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --p: 59.4359% 0.077246 254.027774;
-  --s: 69.6516% 0.059108 248.687186;
-  --a: 77.4643% 0.062249 217.469017;
-  --n: 45.229% 0.035214 264.1312;
-  --nc: 89.9258% 0.016374 262.749256;
-  --b1: 95.1276% 0.007445 260.731539;
-  --b2: 93.2996% 0.010389 261.788485;
-  --b3: 89.9258% 0.016374 262.749256;
-  --bc: 32.4374% 0.022945 264.182036;
-  --in: 69.2072% 0.062496 332.664922;
-  --su: 76.827% 0.074899 131.063061;
-  --wa: 85.4862% 0.089234 84.093335;
-  --er: 60.61% 0.120594 15.341883;
-  --rounded-box: 0.4rem;
-  --rounded-btn: 0.2rem;
-  --rounded-badge: 0.4rem;
-  --tab-radius: 0.2rem;
-}
-
-:root:has(input.theme-controller[value=nord]:checked) {
-  color-scheme: light;
-  --pc: 11.8872% 0.015449 254.027774;
-  --sc: 13.9303% 0.011822 248.687186;
-  --ac: 15.4929% 0.01245 217.469017;
-  --inc: 13.8414% 0.012499 332.664922;
-  --suc: 15.3654% 0.01498 131.063061;
-  --wac: 17.0972% 0.017847 84.093335;
-  --erc: 12.122% 0.024119 15.341883;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
+  --animation-input: 0.2s;
+  --btn-text-case: normal;
+  --navbar-padding: 0.75rem;
   --border-btn: 1px;
-  --tab-border: 1px;
-  --p: 59.4359% 0.077246 254.027774;
-  --s: 69.6516% 0.059108 248.687186;
-  --a: 77.4643% 0.062249 217.469017;
-  --n: 45.229% 0.035214 264.1312;
-  --nc: 89.9258% 0.016374 262.749256;
-  --b1: 95.1276% 0.007445 260.731539;
-  --b2: 93.2996% 0.010389 261.788485;
-  --b3: 89.9258% 0.016374 262.749256;
-  --bc: 32.4374% 0.022945 264.182036;
-  --in: 69.2072% 0.062496 332.664922;
-  --su: 76.827% 0.074899 131.063061;
-  --wa: 85.4862% 0.089234 84.093335;
-  --er: 60.61% 0.120594 15.341883;
-  --rounded-box: 0.4rem;
-  --rounded-btn: 0.2rem;
-  --rounded-badge: 0.4rem;
-  --tab-radius: 0.2rem;
 }
 
 .container {
@@ -1411,24 +1327,24 @@ html {
   transform: translateX(0%);
 }
 
-.drawer-end > .drawer-toggle ~ .drawer-content {
+.drawer-end .drawer-toggle ~ .drawer-content {
   grid-column-start: 1;
 }
 
-.drawer-end > .drawer-toggle ~ .drawer-side {
+.drawer-end .drawer-toggle ~ .drawer-side {
   grid-column-start: 2;
   justify-items: end;
 }
 
-.drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
+.drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
   transform: translateX(100%);
 }
 
-[dir="rtl"] .drawer-end > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
+[dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
   transform: translateX(-100%);
 }
 
-.drawer-end > .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
+.drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
   transform: translateX(0%);
 }
 
@@ -1697,6 +1613,69 @@ html {
   margin-inline-end: -0px;
 }
 
+.join {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--rounded-btn, 0.5rem);
+}
+
+.join :where(.join-item) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join .join-item:not(:first-child):not(:last-child),
+  .join *:not(:first-child):not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join .join-item:first-child:not(:last-child),
+  .join *:first-child:not(:last-child) .join-item {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.join .dropdown .join-item:first-child:not(:last-child),
+  .join *:first-child:not(:last-child) .dropdown .join-item {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.join :where(.join-item:first-child:not(:last-child)),
+  .join :where(*:first-child:not(:last-child) .join-item) {
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+
+.join .join-item:last-child:not(:first-child),
+  .join *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+}
+
+.join :where(.join-item:last-child:not(:first-child)),
+  .join :where(*:last-child:not(:first-child) .join-item) {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+@supports not selector(:has(*)) {
+  :where(.join *) {
+    border-radius: inherit;
+  }
+}
+
+@supports selector(:has(*)) {
+  :where(.join *:has(.join-item)) {
+    border-radius: inherit;
+  }
+}
+
 .link {
   cursor: pointer;
   text-decoration-line: underline;
@@ -2129,6 +2108,10 @@ html {
     --btn-color: var(--fallback-p);
   }
 
+  .btn-warning {
+    --btn-color: var(--fallback-wa);
+  }
+
   .btn-error {
     --btn-color: var(--fallback-er);
   }
@@ -2188,11 +2171,21 @@ html {
     --btn-color: var(--p);
   }
 
+  .btn-warning {
+    --btn-color: var(--wa);
+  }
+
   .btn-error {
     --btn-color: var(--er);
   }
 }
 
+.btn-warning {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+  outline-color: var(--fallback-wa,oklch(var(--wa)/1));
+}
+
 .btn-error {
   --tw-text-opacity: 1;
   color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
@@ -2787,10 +2780,29 @@ details.collapse summary::-webkit-details-marker {
   text-align: inherit;
 }
 
+.join > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
+
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
 
+.link-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+}
+
+@supports (color:color-mix(in oklab,black,black)) {
+  @media (hover:hover) {
+    .link-primary:hover {
+      color: color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 80%,black);
+    }
+  }
+}
+
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3661,6 +3673,46 @@ html:has(.drawer-toggle:checked) {
   line-height: 2rem;
 }
 
+.join.join-vertical {
+  flex-direction: column;
+}
+
+.join.join-vertical .join-item:first-child:not(:last-child),
+  .join.join-vertical *:first-child:not(:last-child) .join-item {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.join.join-vertical .join-item:last-child:not(:first-child),
+  .join.join-vertical *:last-child:not(:first-child) .join-item {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.join.join-horizontal {
+  flex-direction: row;
+}
+
+.join.join-horizontal .join-item:first-child:not(:last-child),
+  .join.join-horizontal *:first-child:not(:last-child) .join-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-start-start-radius: inherit;
+}
+
+.join.join-horizontal .join-item:last-child:not(:first-child),
+  .join.join-horizontal *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  border-end-end-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
 .modal-bottom {
   place-items: end;
 }
@@ -3770,10 +3822,22 @@ html:has(.drawer-toggle:checked) {
   background-color: transparent;
 }
 
+.join.join-vertical > :where(*:not(:first-child)) {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: -1px;
+}
+
 .join.join-vertical > :where(*:not(:first-child)):is(.btn) {
   margin-top: calc(var(--border-btn) * -1);
 }
 
+.join.join-horizontal > :where(*:not(:first-child)) {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-start: -1px;
+}
+
 .join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
   margin-top: 0px;
@@ -3990,6 +4054,10 @@ html:has(.drawer-toggle:checked) {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -4138,6 +4206,10 @@ html:has(.drawer-toggle:checked) {
   margin-top: 0.125rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -4235,6 +4307,10 @@ html:has(.drawer-toggle:checked) {
   height: 100vh;
 }
 
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -4345,6 +4421,26 @@ html:has(.drawer-toggle:checked) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-2 {
+  --tw-translate-y: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-8 {
+  --tw-translate-x: 2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4494,103 +4590,113 @@ html:has(.drawer-toggle:checked) {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-b-md {
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
 
 .border-base-200 {
   --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity, 1)));
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+}
+
+.border-base-content\/30 {
+  border-color: var(--fallback-bc,oklch(var(--bc)/0.3));
 }
 
 .border-red-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
 .bg-base-100 {
   --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity, 1)));
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
 .bg-base-200 {
   --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity, 1)));
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
 
 .bg-base-300 {
   --tw-bg-opacity: 1;
-  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity, 1)));
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
 }
 
 .bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .bg-blue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
 .bg-blue-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
 .bg-gray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
 .bg-gray-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
 .bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
 .bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
 .bg-orange-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
 
 .bg-red-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
 .bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
-
-.bg-slate-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-25 {
@@ -4699,6 +4805,10 @@ html:has(.drawer-toggle:checked) {
   padding-bottom: 1.5rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -4807,6 +4917,10 @@ html:has(.drawer-toggle:checked) {
   text-transform: capitalize;
 }
 
+.normal-case {
+  text-transform: none;
+}
+
 .italic {
   font-style: italic;
 }
@@ -4817,77 +4931,90 @@ html:has(.drawer-toggle:checked) {
 
 .text-base-content {
   --tw-text-opacity: 1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity, 1)));
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
 }
 
 .text-base-content\/50 {
   color: var(--fallback-bc,oklch(var(--bc)/0.5));
 }
 
+.text-base-content\/70 {
+  color: var(--fallback-bc,oklch(var(--bc)/0.7));
+}
+
 .text-black {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-error-content {
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
 }
 
 .text-gray-100 {
   --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+  color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 .text-gray-50 {
   --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity, 1));
+  color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
 .text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
 .text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
 .text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
 .text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 
 .text-primary {
   --tw-text-opacity: 1;
-  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity, 1)));
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
 }
 
 .text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+  color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
 .text-white {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .opacity-0 {
   opacity: 0;
 }
 
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -4896,6 +5023,12 @@ html:has(.drawer-toggle:checked) {
   opacity: 0.5;
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -4925,16 +5058,38 @@ html:has(.drawer-toggle:checked) {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
 
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
 /* Remove when fixed in DaisyUI: https://github.com/saadeghi/daisyui/issues/3040 */
 
 html {
@@ -5119,17 +5274,17 @@ html {
 
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-green-600:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-opacity-20:hover {
@@ -5138,7 +5293,7 @@ html {
 
 .hover\:text-blue-200:hover {
   --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
+  color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
 .hover\:underline:hover {
@@ -5465,12 +5620,12 @@ html {
 @media (prefers-color-scheme: dark) {
   .dark\:bg-base-300 {
     --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity, 1)));
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
   }
 
   .dark\:bg-gray-400 {
     --tw-bg-opacity: 1;
-    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+    background-color: rgb(156 163 175 / var(--tw-bg-opacity));
   }
 
   .dark\:stroke-gray-200 {
@@ -5479,6 +5634,6 @@ html {
 
   .dark\:text-base-300 {
     --tw-text-opacity: 1;
-    color: var(--fallback-b3,oklch(var(--b3)/var(--tw-text-opacity, 1)));
+    color: var(--fallback-b3,oklch(var(--b3)/var(--tw-text-opacity)));
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 97cbe028..e3eac543 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,7 +26,75 @@ module.exports = {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["light", "dark", "dim", "nord"],
-  },
-}
+    themes: [
+      {
+        light: {
+          "primary": "#2563eb",          // Blue for primary actions
+          "secondary": "#4b5563",        // Gray for secondary elements
+          "accent": "#0284c7",           // Sky blue for accents
+          "neutral": "#1f2937",          // Dark gray for neutral text
+          "base-100": "#ffffff",         // White background
+          "base-200": "#f3f4f6",         // Light gray background
+          "base-300": "#e5e7eb",         // Slightly darker background
+          // Light theme surface colors
+          "--surface-100": "#ffffff",     // Top level background (lightest)
+          "--surface-200": "#f8fafc",     // Secondary surface level
+          "--surface-300": "#f1f5f9",     // Tertiary surface level
+          "--surface-400": "#e2e8f0",     // Quaternary surface level
+          "--border-100": "#e2e8f0",      // Primary border color
+          "--border-200": "#cbd5e1",      // Secondary border color
+          "--hover-overlay": "rgba(0,0,0,0.05)",  // Hover state overlay
 
+          "info": "#0ea5e9",             // Info blue
+          "success": "#22c55e",          // Success green
+          "warning": "#f59e0b",          // Warning yellow
+          "error": "#ef4444",            // Error red
+          
+          "--rounded-box": "0.5rem",     // Border radius for cards
+          "--rounded-btn": "0.3rem",     // Border radius for buttons
+          "--rounded-badge": "0.25rem",  // Border radius for badges
+          
+          "--animation-btn": "0.25s",    // Button click animation duration
+          "--animation-input": "0.2s",   // Input focus animation duration
+          
+          "--btn-text-case": "normal",   // Normal text case for buttons
+          "--navbar-padding": "0.75rem",  // Navbar padding
+          "--border-btn": "1px",         // Button border width
+        },
+        dark: {
+          "primary": "#3b82f6",          // Bright blue for primary actions
+          "secondary": "#6b7280",        // Medium gray for secondary elements
+          "accent": "#0369a1",           // Darker sky blue for accents
+          "neutral": "#d1d5db",          // Light gray for neutral text
+          "base-100": "#1f2937",         // Dark background
+          "base-200": "#111827",         // Darker background
+          "base-300": "#0f172a",         // Darkest background
+          // Dark theme surface colors
+          "--surface-100": "#1f2937",     // Top level background (darkest)
+          "--surface-200": "#262f3f",     // Secondary surface level
+          "--surface-300": "#2d3748",     // Tertiary surface level
+          "--surface-400": "#374151",     // Quaternary surface level
+          "--border-100": "#334155",      // Primary border color
+          "--border-200": "#475569",      // Secondary border color
+          "--hover-overlay": "rgba(255,255,255,0.05)",  // Hover state overlay
+          
+          "info": "#0284c7",             // Info blue
+          "success": "#16a34a",          // Success green
+          "warning": "#d97706",          // Warning yellow
+          "error": "#dc2626",            // Error red
+          
+          "--rounded-box": "0.5rem",     // Border radius for cards
+          "--rounded-btn": "0.3rem",     // Border radius for buttons
+          "--rounded-badge": "0.25rem",  // Border radius for badges
+          
+          "--animation-btn": "0.25s",    // Button click animation duration
+          "--animation-input": "0.2s",   // Input focus animation duration
+          
+          "--btn-text-case": "normal",   // Normal text case for buttons
+          "--navbar-padding": "0.75rem",  // Navbar padding
+          "--border-btn": "1px",         // Button border width
+        },
+      },
+    ],
+  },
+}
\ No newline at end of file
diff --git a/views/fragments/listDetections.html b/views/fragments/listDetections.html
index e881c3a2..ee70e445 100644
--- a/views/fragments/listDetections.html
+++ b/views/fragments/listDetections.html
@@ -1,6 +1,48 @@
 {{define "listDetections"}}
 
-<section class="card col-span-12 overflow-x-auto bg-base-100 shadow-sm">
+<section class="card col-span-12 overflow-x-auto bg-base-100 shadow-sm" 
+    x-data="{ 
+        selected: [],
+        get hasSelection() { return this.selected.length > 0 },
+        toggleAll() {
+            if (this.selected.length === this.availableIds.length) {
+                this.selected = [];
+            } else {
+                this.selected = [...this.availableIds];
+            }
+        },
+        availableIds: [{{range .Notes}}'{{.ID}}',{{end}}]
+    }">
+    <!-- Actions Menu - Shows when items are selected -->
+    <div class="sticky top-0 z-10 bg-base-100 shadow-sm transition-all"
+        x-show="hasSelection"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 transform -translate-y-2"
+        x-transition:enter-end="opacity-100 transform translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 transform translate-y-0"
+        x-transition:leave-end="opacity-0 transform -translate-y-2">
+        <div class="flex items-center justify-between px-4 py-2">
+            <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-base-content/70" x-text="`${selected.length} selected`"></span>
+            </div>
+            <div class="flex items-center gap-2">
+                <button class="btn btn-sm btn-primary normal-case" @click="$dispatch('verify-detections', { ids: selected })">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span class="ml-1">Verify</span>
+                </button>
+                <button class="btn btn-sm btn-error normal-case text-error-content" @click="$dispatch('delete-detections', { ids: selected })">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                    <span class="ml-1">Delete</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <div class="card-body grow-0 p-2 sm:p-4 sm:pt-3">
         <div class="flex justify-between">
             <!-- Title -->
@@ -25,6 +67,15 @@
         <table class="table w-full text-left">
             <thead class="text-xs">
                 <tr>
+                    <!-- Selection Column -->
+                    <th scope="col" class="py-0 px-2 w-6">
+                        <input type="checkbox" 
+                            class="checkbox checkbox-primary checkbox-xs rounded-sm border-2 border-base-content/30" 
+                            x-on:click="toggleAll()"
+                            x-bind:checked="selected.length === availableIds.length"
+                            x-bind:indeterminate="selected.length > 0 && selected.length < availableIds.length">
+                    </th>
+
                     <!-- Date/Time Column -->
                     <th scope="col" class="py-0 px-2 sm:px-4" style="width: auto">
                         <span class="hidden sm:inline">Date</span>
@@ -68,6 +119,14 @@
             <tbody>
                 {{range .Notes}}
                 <tr class="text-xs sm:text-sm">
+                    <!-- Selection Column -->
+                    <td class="py-1 px-2">
+                        <input type="checkbox" 
+                            class="checkbox checkbox-primary checkbox-xs rounded-sm border-2 border-base-content/30" 
+                            x-model="selected"
+                            value="{{.ID}}">
+                    </td>
+
                     <!-- Date/Time Column -->
                     <td class="py-0 px-2 sm:px-4 font-normal">
                         <div class="flex flex-col sm:flex-row sm:items-center">
diff --git a/views/settings/audioSettings.html b/views/settings/audioSettings.html
index a856ba57..af9f62f0 100644
--- a/views/settings/audioSettings.html
+++ b/views/settings/audioSettings.html
@@ -134,7 +134,7 @@
                             x-text="device.Name"></option>
                 </template>
             </select>
-            <div x-show="showTooltip === 'audioSource'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'audioSource'" x-cloak class="tooltip">
                 Audio source to use for analysis (e.g., 'sysdefault'). This setting is disabled if RTSP URLs are configured.
             </div>
         </div>
@@ -151,7 +151,7 @@
                 <option value="tcp">TCP</option>
                 <option value="udp">UDP</option>
             </select>
-            <div x-show="showTooltip === 'rtspTransport'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'rtspTransport'" x-cloak class="tooltip">
                 Choose the RTSP transport protocol.
             </div>
         </div>
@@ -170,7 +170,7 @@
                 </div>
             </template>
 
-            <div x-show="showTooltip === 'rtspUrls'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'rtspUrls'" x-cloak class="tooltip">
                 Add or remove RTSP stream URLs. (rtsp://user:password@example.com/stream1)
             </div>
 
@@ -195,18 +195,19 @@
                 <span class="label-text">Enable Audio Equalizer</span>
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioEqualizerEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'audioEqualizerEnabled'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'audioEqualizerEnabled'" x-cloak class="tooltip">
                 Enable or disable audio equalizer.
             </div>
             
             <div x-show="audioCapture.equalizer.enabled" x-cloak>
                 <!-- Existing filters -->
                 <template x-for="(filter, index) in audioCapture.equalizer.filters" :key="index">
-                    <div class="grid grid-cols-1 md:grid-cols-5 gap-6 items-end mt-2 bg-gray-50 rounded-md p-2" x-data="{ hasFilterChanges: false }">
+                    <div class="grid grid-cols-1 md:grid-cols-5 gap-6 items-end mt-2" style="background-color: var(--surface-200); border: 1px solid var(--border-100); border-radius: 0.5rem; padding: 1rem;">
 
                         <div class="relative flex items-end">
                             <input type="hidden" :name="'realtime.audio.equalizer.filters['+index+'].type'" :value="filter.type">
-                            <button type="button" class="btn btn-sm w-full bg-slate-300 pointer-events-none select-none">
+                            <button type="button" class="btn btn-sm w-full pointer-events-none select-none"
+                                style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
                                 <span class="font-medium" x-text="filter.type + ' Filter'"></span>
                             </button>
                         </div>
@@ -372,7 +373,7 @@
                 <span class="label-text">Enable Audio Export</span>
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'audioExportEnabled'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'audioExportEnabled'" x-cloak class="tooltip">
                 Enable or disable audio export for identified bird calls.
             </div>
         </div>
@@ -385,7 +386,7 @@
                     <span class="label-text">Enable Debug Mode</span>
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportDebug'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <div x-show="showTooltip === 'audioExportDebug'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'audioExportDebug'" x-cloak class="tooltip">
                     Enable debug mode for audio export.
                 </div>
             </div>
@@ -397,7 +398,7 @@
                         <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportPath'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="audioExportPath" name="realtime.audio.export.path" x-model="audioExport.path" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'audioExportPath'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'audioExportPath'" x-cloak class="tooltip">
                         Path to the audio clip export directory.
                     </div>
                 </div>
@@ -417,7 +418,7 @@
                         <option value="opus" x-show="ffmpegAvailable">opus</option>
                         <option value="mp3" x-show="ffmpegAvailable">mp3</option>
                     </select>
-                    <div x-show="showTooltip === 'audioExportType'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'audioExportType'" x-cloak class="tooltip">
                         Type of audio file to export. AAC is recommended for general use, it has good compression and is widely supported. MP3 only for legacy reasons. FFmpeg is required for formats other than WAV.
                     </div>
                 </div>
@@ -434,7 +435,7 @@
                            :disabled="!ffmpegAvailable || !['aac', 'opus', 'mp3'].includes(audioExport.type)"
                            :class="{'opacity-50 cursor-not-allowed': !ffmpegAvailable || !['aac', 'opus', 'mp3'].includes(audioExport.type)}"
                            @input="if (!$event.target.value.endsWith('k')) $event.target.value += 'k'">
-                    <div x-show="showTooltip === 'audioExportBitrate'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'audioExportBitrate'" x-cloak class="tooltip">
                         Bitrate for compressed audio export in kbps. Only applicable for AAC, Opus, and MP3 formats when FFmpeg is available.
                     </div>
                 </div>
@@ -490,7 +491,7 @@
                     <option value="age">Age</option>
                     <option value="usage">Usage</option>
                 </select>
-                <div x-show="showTooltip === 'audioRetentionPolicy'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'audioRetentionPolicy'" x-cloak class="tooltip">
                     Retention policy for audio clips.
                 </div>
             </div>
@@ -501,7 +502,7 @@
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionMaxAge'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="audioRetentionMaxAge" name="realtime.audio.export.retention.maxage" x-model="audioRetention.maxage" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'audioRetentionMaxAge'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'audioRetentionMaxAge'" x-cloak class="tooltip">
                     Maximum age of clips to keep before starting evictions.
                 </div>
             </div>
@@ -515,7 +516,7 @@
                 @input="if (!audioRetention.maxusage.endsWith('%') && !isNaN(audioRetention.maxusage)) audioRetention.maxusage += '%'"
                 class="input input-bordered input-sm w-full">
 
-                <div x-show="showTooltip === 'audioRetentionMaxUsage'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'audioRetentionMaxUsage'" x-cloak class="tooltip">
                     Maximum disk usage percentage or size to trigger evictions (e.g., '80%').
                 </div>
             </div>
@@ -526,7 +527,7 @@
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionMinClips'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="audioRetentionMinClips" name="realtime.audio.export.retention.minclips" x-model="audioRetention.minclips" min="1" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'audioRetentionMinClips'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'audioRetentionMinClips'" x-cloak class="tooltip">
                     Minimum number of clips per species to keep before starting evictions.
                 </div>
             </div>
diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
index 02627d95..e649eb2e 100644
--- a/views/settings/filtersSettings.html
+++ b/views/settings/filtersSettings.html
@@ -47,7 +47,7 @@
                 <span class="label-text">Enable Privacy Filtering</span>
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'privacyFilter'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'privacyFilter'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'privacyFilter'" x-cloak class="tooltip">
                 Enables detection of human voices, if detected discards bird detection to protect privacy
             </div>
         </div>
@@ -59,7 +59,7 @@
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'privacyConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="privacyFilterConfidence" name="realtime.privacyFilter.confidence" x-model="privacyFilter.confidence" step="0.01" min="0" max="1" class="input input-bordered input-sm w-full mb-4">
-                <div x-show="showTooltip === 'privacyConfidence'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'privacyConfidence'" x-cloak class="tooltip">
                     Set the confidence level for human voice detection, lower value makes filter more sensitive
                 </div>
             </div>
@@ -158,8 +158,7 @@
                       @mouseenter="showTooltip = 'dogBarkFilter'"
                       @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                 x-show="showTooltip === 'dogBarkFilter'" x-cloak>
+            <div x-show="showTooltip === 'dogBarkFilter'" x-cloak class="tooltip">
                 Filters out dog barks to reduce false positives in bird detection.
             </div>
         </div>
@@ -174,8 +173,7 @@
                 </label>
                 <input type="number" id="dogBarkFilterConfidence" name="realtime.dogbarkfilter.confidence"
                        x-model="dogBarkFilter.confidence" step="0.01" min="0" max="1" class="input input-bordered input-sm w-full">
-                <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                     x-show="showTooltip === 'dogBarkConfidence'" x-cloak>
+                <div x-show="showTooltip === 'dogBarkConfidence'" x-cloak class="tooltip">
                     Set the confidence level for dog bark detection, lower value makes filter more sensitive
                 </div>
             </div>
@@ -188,8 +186,7 @@
                           @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" x-model="dogBarkFilter.remember" min="0" class="input input-bordered input-sm w-full" />
-                <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                     x-show="showTooltip === 'dogBarkExpire'" x-cloak>
+                <div x-show="showTooltip === 'dogBarkExpire'" x-cloak class="tooltip">
                     Set how long to remember a detected dog bark
                 </div>
             </div>
@@ -202,14 +199,14 @@
                       @mouseenter="showTooltip = 'dogBarkSpecies'"
                       @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                 x-show="showTooltip === 'dogBarkSpecies'" x-cloak>
+            <div x-show="showTooltip === 'dogBarkSpecies'" x-cloak class="tooltip">
                 List of species to filter out as potential dog barks
             </div>
 
             <div class="space-y-2">
                 <template x-for="(species, index) in dogBarkFilter.species" :key="index">
-                    <div class="flex items-center bg-gray-50 space-x-2 p-2 rounded-md">
+                    <div class="flex items-center space-x-2 p-2 rounded-md" 
+                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
                         <div class="flex-grow">
                             <span x-show="editIndex !== index" 
                                   @click="startEdit(index)" 
diff --git a/views/settings/integrationSettings.html b/views/settings/integrationSettings.html
index 91323c9b..80b90bd2 100644
--- a/views/settings/integrationSettings.html
+++ b/views/settings/integrationSettings.html
@@ -59,8 +59,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'birdweatherEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'birdweatherEnabled'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'birdweatherEnabled'" x-cloak class="tooltip">
                 Enable or disable uploads to BirdWeather service.
             </div>
         </div>
@@ -76,8 +75,7 @@
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'birdweatherDebug'"
                         @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <div x-show="showTooltip === 'birdweatherDebug'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'birdweatherDebug'" x-cloak class="tooltip">
                     Enable debug mode for additional logging information.
                 </div>
             </div>
@@ -111,8 +109,7 @@
                     <input type="number" id="birdweatherThreshold" name="realtime.birdweather.threshold"
                         x-model="birdweather.threshold" step="0.01" min="0" max="1"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'birdweatherThreshold'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'birdweatherThreshold'" x-cloak class="tooltip">
                         Minimum confidence threshold for uploading predictions to BirdWeather.
                     </div>
                 </div>
@@ -175,8 +172,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'mqttEnabled'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'mqttEnabled'" x-cloak class="tooltip">
                 Enable or disable integration with MQTT service.
             </div>
         </div>
@@ -193,8 +189,7 @@
                     </label>
                     <input type="text" id="mqttBroker" name="realtime.mqtt.broker" x-model="mqtt.broker"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttBroker'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'mqttBroker'" x-cloak class="tooltip">
                         The MQTT broker URL (e.g., tcp://localhost:1883).
                     </div>
                 </div>
@@ -207,8 +202,7 @@
                     </label>
                     <input type="text" id="mqttTopic" name="realtime.mqtt.topic" x-model="mqtt.topic"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttTopic'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'mqttTopic'" x-cloak class="tooltip">
                         The MQTT topic to publish messages to.
                     </div>
                 </div>
@@ -221,8 +215,7 @@
                     </label>
                     <input type="text" id="mqttUsername" name="realtime.mqtt.username" x-model="mqtt.username"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttUsername'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'mqttUsername'" x-cloak class="tooltip">
                         The MQTT username.
                     </div>
                 </div>
@@ -304,8 +297,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'telemetryEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'telemetryEnabled'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'telemetryEnabled'" x-cloak class="tooltip">
                 Enable or disable integration with Telemetry service.
             </div>
         </div>
@@ -322,8 +314,7 @@
                     </label>
                     <input type="text" id="telemetryListen" name="realtime.telemetry.listen" x-model="telemetry.listen"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'telemetryListen'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'telemetryListen'" x-cloak class="tooltip">
                         The IP address and port to listen on (e.g., 0.0.0.0:8090).
                     </div>
                 </div>
@@ -386,7 +377,7 @@
                 <option value="yrno">Yr.no</option>
                 <option value="openweather">OpenWeather</option>
             </select>
-            <div x-show="showTooltip === 'weatherProvider'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'weatherProvider'" x-cloak class="tooltip">
                 Select the weather data provider or choose 'None' to disable weather data collection.
             </div>
         </div>
@@ -430,7 +421,7 @@
                         <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'openWeatherEndpoint'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="openWeatherEndpoint" name="realtime.weather.openweather.endpoint" x-model="weather.openWeather.endpoint" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'openWeatherEndpoint'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'openWeatherEndpoint'" x-cloak class="tooltip">
                         The OpenWeather API endpoint URL.
                     </div>
                 </div>
@@ -445,7 +436,7 @@
                         <option value="metric">Metric</option>
                         <option value="imperial">Imperial</option>
                     </select>
-                    <div x-show="showTooltip === 'openWeatherUnits'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'openWeatherUnits'" x-cloak class="tooltip">
                         Choose the units system for weather data.
                     </div>
                 </div>
@@ -456,7 +447,7 @@
                         <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'openWeatherLanguage'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="openWeatherLanguage" name="realtime.weather.openweather.language" x-model="weather.openWeather.language" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'openWeatherLanguage'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'openWeatherLanguage'" x-cloak class="tooltip">
                         Language code for the API response (e.g., 'en' for English).
                     </div>
                 </div>
diff --git a/views/settings/mainSettings.html b/views/settings/mainSettings.html
index 19cb63b7..dd63c03e 100644
--- a/views/settings/mainSettings.html
+++ b/views/settings/mainSettings.html
@@ -49,10 +49,9 @@
                 </label>
                 <input type="text" id="nodeName" name="main.name" x-model="main.name"
                     class="input input-sm input-bordered" placeholder="Enter node name">
-                <div x-show="showTooltip === 'nodeName'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md w-96">
-                    Node name is used to identify source system in multi node setup, also used as identifier for MQTT
-                    messages.
+                <!-- Node Name tooltip -->
+                <div x-show="showTooltip === 'nodeName'" x-cloak class="tooltip">
+                    Node name is used to identify source system in multi node setup, also used as identifier for MQTT messages.
                 </div>
             </div>
         </div>
@@ -199,8 +198,8 @@
                 </label>
                 <input type="number" id="birdnetSensitivity" name="birdnet.sensitivity" x-model="birdnet.sensitivity"
                     step="0.1" min="0.1" max="1.5" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'sensitivity'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <!-- BirdNET Settings tooltips -->
+                <div x-show="showTooltip === 'sensitivity'" x-cloak class="tooltip">
                     Detection sensitivity. Higher values result in higher sensitivity. Values in 0.5, 1.5.
                 </div>
             </div>
@@ -213,8 +212,7 @@
                 </label>
                 <input type="number" id="birdnetThreshold" name="birdnet.threshold" x-model="birdnet.threshold"
                     step="0.01" min="0" max="1" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'threshold'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'threshold'" x-cloak class="tooltip">
                     Minimum confidence threshold. Values in 0.01, 0.99.
                 </div>
             </div>
@@ -227,8 +225,7 @@
                 </label>
                 <input type="number" id="birdnetOverlap" name="birdnet.overlap" x-model="birdnet.overlap" step="0.1"
                     min="0" max="2.9" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'overlap'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'overlap'" x-cloak class="tooltip">
                     Overlap of prediction segments. Values in 0.0, 2.9.
                 </div>
             </div>
@@ -246,8 +243,7 @@
                     {{end}}
                     <!--<option value="{{.Code}}" {{if eq .Code $.Settings.BirdNET.Locale}}selected{{end}}>{{.Name}} ({{.Code}})</option>-->
                 </select>
-                <div x-show="showTooltip === 'locale'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'locale'" x-cloak class="tooltip">
                     Locale for translated species common names.
                 </div>
             </div>
@@ -260,8 +256,7 @@
                 </label>
                 <input type="number" id="birdnetThreads" name="birdnet.threads" x-model="birdnet.threads" step="1"
                     min="0" max="32" class="input input-bordered input-sm w-full" />
-                <div x-show="showTooltip === 'threads'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'threads'" x-cloak class="tooltip">
                     Number of CPU threads. Set to 0 to use all available threads.
                 </div>
             </div>
@@ -280,8 +275,7 @@
                 </label>
                 <input type="text" id="birdnetModelPath" name="birdnet.modelpath" x-model="birdnet.modelPath"
                     class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'modelPath'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'modelPath'" x-cloak class="tooltip">
                     Path to external BirdNET model file. Enter absolute or relative path to birdnet-go binary. Leave
                     empty to use the default embedded model.
                 </div>
@@ -295,8 +289,7 @@
                 </label>
                 <input type="text" id="birdnetLabelPath" name="birdnet.labelpath" x-model="birdnet.labelPath"
                     class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'labelPath'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'labelPath'" x-cloak class="tooltip">
                     Path to external model labels file, .zip or .txt file. Enter absolute or relative path to birdnet-go
                     binary. Leave empty to use the default embedded labels.
                 </div>
@@ -316,8 +309,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'dynamicThreshold'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'dynamicThreshold'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'dynamicThreshold'" x-cloak class="tooltip">
                 Enables dynamic confidence threshold feature for more adaptive bird call detection.
             </div>
         </div>
@@ -333,8 +325,7 @@
                 </label>
                 <input type="number" id="dynamicThresholdTrigger" name="realtime.dynamicthreshold.trigger"
                     x-model="dynamicThreshold.trigger" step="0.01" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'trigger'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'trigger'" x-cloak class="tooltip">
                     The confidence level at which the dynamic threshold is activated. If a bird call is detected with
                     confidence over this value, the threshold for positive matches of that species will be lowered for
                     subsequent calls.
@@ -350,8 +341,7 @@
                 </label>
                 <input type="number" id="dynamicThresholdMin" name="realtime.dynamicthreshold.min"
                     x-model="dynamicThreshold.min" step="0.01" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'min'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'min'" x-cloak class="tooltip">
                     The minimum value to which the dynamic threshold can be lowered. This ensures that the threshold
                     does not drop below an unwanted level.
                 </div>
@@ -366,8 +356,7 @@
                 </label>
                 <input type="number" id="dynamicThresholdValidHours" name="realtime.dynamicthreshold.validhours"
                     x-model="dynamicThreshold.validHours" class="input input-bordered input-sm w-full">
-                <div x-show="showTooltip === 'validHours'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'validHours'" x-cloak class="tooltip">
                     The number of hours during which the dynamic threshold adjustments remain valid. After this period,
                     the dynamic threshold is reset.
                 </div>
@@ -387,8 +376,7 @@
                     <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'locationMap'"
                         @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <div x-show="showTooltip === 'locationMap'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'locationMap'" x-cloak class="tooltip">
                     Station location, used to limit bird species to those propable in the region.
                 </div>
                 <div id="locationMap" style="height: 300px;"></div>
@@ -406,8 +394,7 @@
                     </label>
                     <input type="number" id="birdnetLatitude" name="birdnet.latitude" x-model="birdnet.latitude"
                         step="0.001" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'latitude'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'latitude'" x-cloak class="tooltip">
                         Station location latitude, used to limit bird species to those propable in the region.
                     </div>
                 </div>
@@ -421,8 +408,7 @@
                     </label>
                     <input type="number" id="birdnetLongitude" name="birdnet.longitude" x-model="birdnet.longitude"
                         step="0.001" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'longitude'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'longitude'" x-cloak class="tooltip">
                         Station location longitude, used to limit bird species to those propable in the region.
                     </div>
                 </div>
@@ -439,8 +425,7 @@
                         <option value="legacy">legacy</option>
                         <option value="latest">latest</option>
                     </select>
-                    <div x-show="showTooltip === 'rangeFilterModel'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'rangeFilterModel'" x-cloak class="tooltip">
                         BirdNET range filter model version: latest or legacy.
                     </div>
                 </div>
@@ -455,8 +440,7 @@
                     <input type="number" id="birdnetRangeFilterThreshold" name="birdnet.rangefilter.threshold"
                         x-model="rangeFilter.threshold" step="0.01" min="0" max="1"
                         class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'rangeFilterThreshold'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'rangeFilterThreshold'" x-cloak class="tooltip">
                         Confidence level determining which identifications are considered valid, e.g. a threshold of 0.7
                         means only detections with higher than 70% confidence score are accepted.
                     </div>
@@ -573,8 +557,7 @@
                     <option value="sqlite">SQLite</option>
                     <option value="mysql">MySQL</option>
                 </select>
-                <div x-show="showTooltip === 'databaseType'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'databaseType'" x-cloak class="tooltip">
                     Database type for storing detections: SQLite or MySQL
                 </div>
             </div>
@@ -591,8 +574,7 @@
                 <div class="flex">
                     <input type="text" id="sqlitePath" x-model="sqlite.path" name="output.sqlite.path"
                         class="input input-sm input-bordered flex-grow" placeholder="Enter SQLite database path">
-                    <div x-show="showTooltip === 'sqlitePath'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'sqlitePath'" x-cloak class="tooltip">
                         SQLite database file path relative to the application directory
                     </div>
                 </div>
@@ -611,8 +593,7 @@
                 </label>
                 <input type="text" id="mysqlHost" x-model="mysql.host" name="output.mysql.host"
                     class="input input-sm input-bordered" placeholder="Enter MySQL host">
-                <div x-show="showTooltip === 'mysqlHost'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'mysqlHost'" x-cloak class="tooltip">
                     MySQL database host (IP or hostname)
                 </div>
             </div>
@@ -626,8 +607,7 @@
                 </label>
                 <input type="text" id="mysqlPort" x-model="mysql.port" name="output.mysql.port"
                     class="input input-sm input-bordered" placeholder="Enter MySQL port">
-                <div x-show="showTooltip === 'mysqlPort'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'mysqlPort'" x-cloak class="tooltip">
                     MySQL database port (default 3306/TCP)
                 </div>
             </div>
@@ -641,8 +621,7 @@
                 </label>
                 <input type="text" id="mysqlUsername" x-model="mysql.username" name="output.mysql.username"
                     class="input input-sm input-bordered" placeholder="Enter MySQL username">
-                <div x-show="showTooltip === 'mysqlUsername'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'mysqlUsername'" x-cloak class="tooltip">
                     MySQL database username
                 </div>
             </div>
@@ -677,8 +656,7 @@
                         </svg>
                     </button>
                 </div>
-                <div x-show="showTooltip === 'mysqlPassword'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'mysqlPassword'" x-cloak class="tooltip">
                     MySQL database password
                 </div>
             </div>
@@ -693,8 +671,7 @@
                     </label>
                     <input type="text" id="mysqlDatabase" x-model="mysql.database" name="output.mysql.database"
                         class="input input-sm input-bordered w-full" placeholder="Enter MySQL database name">
-                    <div x-show="showTooltip === 'mysqlDatabase'" x-cloak
-                        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    <div x-show="showTooltip === 'mysqlDatabase'" x-cloak class="tooltip">
                         MySQL database name
                     </div>
                 </div>
@@ -754,8 +731,7 @@
                 <input type="number" id="dashboardSummaryLimit" name="realtime.dashboard.summarylimit"
                     x-model="dashboard.summarylimit" class="input input-sm input-bordered mb-2 w-full"
                     placeholder="Enter limit" min="10" max="1000">
-                <div x-show="showTooltip === 'dashboardSummaryLimit'" x-cloak
-                    class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                <div x-show="showTooltip === 'dashboardSummaryLimit'" x-cloak class="tooltip">
                     Max number of species shown in the daily summary table (Value between 10 and 1000)
                 </div>
             </div>
@@ -772,8 +748,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help"
                     @mouseenter="showTooltip = 'dashboardThumbnailsSummary'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'dashboardThumbnailsSummary'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'dashboardThumbnailsSummary'" x-cloak class="tooltip">
                 Enable to show thumbnails of detected species on the daily summary table
             </div>
         </div>
@@ -788,8 +763,7 @@
                 <span class="ml-2 text-sm text-gray-500 cursor-help"
                     @mouseenter="showTooltip = 'dashboardThumbnailsRecent'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'dashboardThumbnailsRecent'" x-cloak
-                class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+            <div x-show="showTooltip === 'dashboardThumbnailsRecent'" x-cloak class="tooltip">
                 Enable to show thumbnails of detected species on the recent detections list
             </div>
         </div>
diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 30c97d06..51bb80fa 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -52,37 +52,26 @@
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
-            <label for="speciesSettingsOpen" class="cursor-pointer">Species Settings</label>
+            <label for="speciesSettingsOpen" class="cursor-pointer">Always Include Species</label>
             <div class="ml-2" x-show="hasChanges" x-cloak>
                 <span class="badge badge-primary badge-sm changed-badge">
                     <span class="text-xs mb-0.5">changed</span>
                 </span>
             </div>
         </div>
-        <p class="text-sm text-gray-500">Configure species-specific settings</p>
+        <!-- short descripton of this section -->
+        <p class="text-sm text-gray-500">Species in this list will always be included in range of detected species</p>
     </div>
 
     <div class="collapse-content">
-        <!-- Always Include Species section -->
-        <div class="text-lg font-medium pb-2">Always Include Species</div>
         
         <div class="form-control relative">
-            <label class="label justify-start">
-                <span class="label-text">Species List</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
-                      @mouseenter="showTooltip = 'Include'"
-                      @mouseleave="showTooltip = null">ⓘ</span>
-            </label>
-
-            <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                 x-show="showTooltip === 'Include'" x-cloak>
-                Species in this list will always be included in detection, regardless of range filter settings.
-            </div>
 
             <!-- Include species list -->
             <div class="space-y-2">
                 <template x-for="(species, index) in speciesSettings.Include" :key="index">
-                    <div class="flex items-center bg-gray-50 space-x-2 p-2 rounded-md">
+                    <div class="flex items-center space-x-2 p-2 rounded-md" 
+                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
                         <div class="flex-grow">
                             <span x-text="species" class="text-sm"></span>
                         </div>
@@ -157,27 +146,30 @@
     },
 }" 
 x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+    <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
+    <div class="collapse-title text-xl font-medium">
+        <div class="flex items-center">
+            <label for="speciesSettingsOpen" class="cursor-pointer">Always Exclude Species</label>
+            <div class="ml-2" x-show="hasChanges" x-cloak>
+                <span class="badge badge-primary badge-sm changed-badge">
+                    <span class="text-xs mb-0.5">changed</span>
+                </span>
+            </div>
+        </div>
+        <!-- short descripton of this section -->
+        <p class="text-sm text-gray-500">Species in this list will be excuded from detection</p>
+    </div>
+
     <div class="collapse-content">
         <!-- Always Exclude Species section -->
-        <div class="text-lg font-medium pt-4 pb-2">Always Exclude Species</div>
         
         <div class="form-control relative">
-            <label class="label justify-start">
-                <span class="label-text">Species List</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
-                      @mouseenter="showTooltip = 'Exclude'"
-                      @mouseleave="showTooltip = null">ⓘ</span>
-            </label>
-
-            <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                 x-show="showTooltip === 'Exclude'" x-cloak>
-                Species in this list will always be excluded from detection, regardless of range filter settings.
-            </div>
 
             <!-- Exclude species list -->
             <div class="space-y-2">
                 <template x-for="(species, index) in speciesSettings.Exclude" :key="index">
-                    <div class="flex items-center bg-gray-50 space-x-2 p-2 rounded-md">
+                    <div class="flex items-center space-x-2 p-2 rounded-md" 
+                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
                         <div class="flex-grow">
                             <span x-text="species" class="text-sm"></span>
                         </div>
@@ -315,27 +307,28 @@
     },
 }" 
 x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+    <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
+    <div class="collapse-title text-xl font-medium">
+        <div class="flex items-center">
+            <label for="speciesSettingsOpen" class="cursor-pointer">Custom Species Configuration</label>
+            <div class="ml-2" x-show="hasChanges" x-cloak>
+                <span class="badge badge-primary badge-sm changed-badge">
+                    <span class="text-xs mb-0.5">changed</span>
+                </span>
+            </div>
+        </div>
+        <!-- short descripton of this section -->
+        <p class="text-sm text-gray-500">Species specific threshold values and actions</p>
+    </div>    
+
     <div class="collapse-content">
-        <!-- Custom Species Configuration section -->
-        <div class="text-lg font-medium pt-4 pb-2">Custom Species Configuration</div>
-        
+        <!-- Custom Species Configuration section -->                
         <div class="form-control relative">
-            <label class="label justify-start">
-                <span class="label-text">Species Configuration List</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
-                      @mouseenter="showTooltip = 'customConfig'"
-                      @mouseleave="showTooltip = null">ⓘ</span>
-            </label>
-
-            <div class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50"
-                 x-show="showTooltip === 'customConfig'" x-cloak>
-                Set custom confidence thresholds for specific species. These will override the global threshold for the specified species.
-            </div>
 
             <!-- Custom configuration list -->
             <div class="space-y-2">
                 <!-- Header -->
-                <div class="flex bg-gray-100 p-2 rounded-md">
+                <div class="flex bg-base-100 p-2 rounded-md">
                     <div class="flex-grow text-sm font-medium">Species</div>
                     <div class="w-24 text-sm font-medium">Threshold</div>
                     <div class="w-20 text-sm font-medium text-center">Actions</div>
@@ -344,7 +337,8 @@
                 
                 <!-- List items -->
                 <template x-for="(config, species) in speciesSettings.Config" :key="species">
-                    <div class="flex items-center bg-gray-50 p-2 rounded-md">
+                    <div class="flex items-center space-x-2 p-2 rounded-md" 
+                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
                         <div class="flex-grow text-sm pl-2" x-text="species"></div>
                         <div class="w-24 text-sm px-3" x-text="config.Threshold.toFixed(2)"></div>
                         <div class="w-20 text-center">
@@ -413,7 +407,7 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                            x-model="currentAction.command" 
                            class="input input-bordered w-full mt-1" 
                            placeholder="/path/to/your/command">
-                    <p class="text-sm text-gray-500 mt-1">Provide the full path to the command you want to execute</p>
+                    <p class="text-sm text-base-content mt-1">Provide the full path to the command you want to execute</p>
                 </div>
 
                 <div class="mb-4">
@@ -423,12 +417,12 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                            class="input input-bordered w-full mt-1" 
                            placeholder="Parameters will appear here"
                            readonly>
-                    <p class="text-sm text-gray-500 mt-1">Click parameters below to add them to your command</p>
+                    <p class="text-sm text-base-content mt-1">Click parameters below to add them to your command</p>
                 </div>
 
                 <div class="mb-4">
                     <label class="block text-sm font-medium">Available Parameters</label>
-                    <p class="text-sm text-gray-500 mb-2">Click to add parameters to your script:</p>
+                    <p class="text-sm text-base-content mb-2">Click to add parameters to your script:</p>
                     <div class="flex flex-wrap gap-2">
                         <button type="button" 
                                 @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
@@ -451,7 +445,7 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                                 @click.prevent="currentAction.parameters = ''" 
                                 class="btn btn-xs btn-warning">Clear Parameters</button>
                     </div>
-                    <p class="text-sm text-gray-500 mt-2">Parameters will be passed to your script in the order they are added</p>
+                    <p class="text-sm text-base-content mt-2">Parameters will be passed to your script in the order they are added</p>
                 </div>
                 
                 <div class="modal-action">
diff --git a/views/settings/templates/checkbox.html b/views/settings/templates/checkbox.html
index 5b54d1b7..84cafa6a 100644
--- a/views/settings/templates/checkbox.html
+++ b/views/settings/templates/checkbox.html
@@ -18,7 +18,7 @@
 
     <!-- Tooltip -->
     <div x-show="showTooltip === '{{.id}}'" x-cloak
-        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+        class="tooltip">
         {{.tooltip}}
     </div>
 </div>
diff --git a/views/settings/templates/hostField.html b/views/settings/templates/hostField.html
index 2549895d..44343d4c 100644
--- a/views/settings/templates/hostField.html
+++ b/views/settings/templates/hostField.html
@@ -67,7 +67,7 @@
         role="tooltip"
         aria-hidden="true"
         x-cloak
-        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md">
+        class="tooltip">
         {{.tooltip}}
     </div>
 </div>

From 79e36995b033c373031f9ccbc2632b718f985c77 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Sun, 12 Jan 2025 19:05:27 +0200
Subject: [PATCH 02/15] delete unused html templates

---
 views/settings/birdnetSettings.html |  85 ----------------------
 views/settings/outputSettings.html  | 106 ----------------------------
 2 files changed, 191 deletions(-)
 delete mode 100644 views/settings/birdnetSettings.html
 delete mode 100644 views/settings/outputSettings.html

diff --git a/views/settings/birdnetSettings.html b/views/settings/birdnetSettings.html
deleted file mode 100644
index 479e62bc..00000000
--- a/views/settings/birdnetSettings.html
+++ /dev/null
@@ -1,85 +0,0 @@
-{{define "birdnetSettings"}}
-<div class="card bg-base-100 shadow-sm col-span-3">
-    <div class="card-body p-6">
-        <h2 class="card-title">BirdNET Settings</h2>
-
-        <div class="form-control">
-            <label class="label" for="birdnetSensitivity">
-                <span class="label-text">Sensitivity</span>
-            </label>
-            <input type="number" id="birdnetSensitivity" name="birdnet.sensitivity" value="{{.Settings.BirdNET.Sensitivity}}" step="0.1" min="0.1" max="1.5" class="input input-bordered w-full">
-        </div>
-
-        <div class="form-control">
-            <label class="label" for="birdnetThreshold">
-                <span class="label-text">Threshold</span>
-                </label>
-            <input type="number" id="birdnetThreshold" name="birdnet.threshold" value="{{.Settings.BirdNET.Threshold}}" step="0.01" min="0" max="1" class="input input-bordered w-full">
-        </div>
-   
-        <div class="form-control">
-            <label class="label" for="birdnetOverlap">
-                <span class="label-text">Overlap</span>
-            </label>
-            <input type="number" id="birdnetOverlap" name="birdnet.overlap" value="{{.Settings.BirdNET.Overlap}}" step="0.1" min="0" max="2.9" class="input input-bordered w-full">
-        </div>
-
-    </div>
-</div>
-
-<div class="card bg-base-100 shadow-sm col-span-3">
-    <div class="card-body p-6">
-        <h2 class="card-title">Locale Settings</h2>
-
-        <div class="form-control">
-            <label class="label" for="birdnetLocale">
-                <span class="label-text">Locale</span>
-            </label>
-            <input type="text" id="birdnetLocale" name="birdnet.locale" value="{{.Settings.BirdNET.Locale}}" class="input input-bordered w-full">
-        </div>
-
-        <div class="form-control">
-            <label class="label" for="birdnetThreads">
-                <span class="label-text">Threads</span>
-            </label>
-            <input type="number" id="birdnetThreads" name="birdnet.threads" value="{{.Settings.BirdNET.Threads}}" min="0" class="input input-bordered w-full">
-        </div>
-    </div>
-</div>
-
-<div class="card bg-base-100 shadow-sm col-span-3">
-    <div class="card-body p-6">
-        <h2 class="card-title">Range Filter Settings</h2>
-
-        <div class="form-control">
-            <label class="label" for="birdnetLongitude">
-                <span class="label-text">Longitude</span>
-            </label>
-            <input type="number" id="birdnetLongitude" name="birdnet.longitude" value="{{.Settings.BirdNET.Longitude}}" step="0.000001" class="input input-bordered w-full">
-        </div>
-
-        <div class="form-control">
-            <label class="label" for="birdnetLatitude">
-                <span class="label-text">Latitude</span>
-            </label>
-            <input type="number" id="birdnetLatitude" name="birdnet.latitude" value="{{.Settings.BirdNET.Latitude}}" step="0.000001" class="input input-bordered w-full">
-        </div>
-
-
-        <div class="form-control">
-            <label class="label" for="birdnetRangeFilterModel">
-                <span class="label-text">Range Filter Model</span>
-            </label>
-            <input type="text" id="birdnetRangeFilterModel" name="birdnet.rangefilter.model" value="{{.Settings.BirdNET.RangeFilter.Model}}" class="input input-bordered w-full">
-        </div>
-
-        <div class="form-control">
-            <label class="label" for="birdnetRangeFilterThreshold">
-                <span class="label-text">Range Filter Threshold</span>
-            </label>
-            <input type="number" id="birdnetRangeFilterThreshold" name="birdnet.rangefilter.threshold" value="{{.Settings.BirdNET.RangeFilter.Threshold}}" step="0.01" min="0" max="1" class="input input-bordered w-full">
-        </div>
-    </div>
-</div>
-
-{{end}}
\ No newline at end of file
diff --git a/views/settings/outputSettings.html b/views/settings/outputSettings.html
deleted file mode 100644
index 03fca600..00000000
--- a/views/settings/outputSettings.html
+++ /dev/null
@@ -1,106 +0,0 @@
-{{define "outputSettings"}}
-<div x-data="{ 
-    outputType: '{{if .Settings.Output.SQLite.Enabled}}sqlite{{else}}mysql{{end}}',
-    showNotification: false,
-    notificationMessage: '',
-    saveSettings: function() {
-        const form = document.getElementById('settingsForm');
-        const formData = new FormData(form);
-
-        fetch('/settings/save', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            this.notificationMessage = data.message;
-            this.showNotification = true;
-            setTimeout(() => this.showNotification = false, 3000);
-        })
-        .catch(error => {
-            console.error('Error:', error);
-            this.notificationMessage = 'An error occurred while saving settings.';
-            this.showNotification = true;
-            setTimeout(() => this.showNotification = false, 3000);
-        });
-    }
-}" class="col-span-12">
-<div class="card bg-base-100 shadow-sm col-span-2">
-    <div class="card-body p-6">
-        <h2 class="card-title">Database Settings</h2>
-        
-        <form id="settingsForm" @submit.prevent="saveSettings">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
-
-                <div class="form-control">
-                    <label class="label" for="outputType">
-                        <span class="label-text">Select Output Type</span>
-                    </label>
-                    <select id="outputType" x-model="outputType" name="output.type" class="select select-bordered w-full">
-                        <option value="sqlite">SQLite</option>
-                        <option value="mysql">MySQL</option>
-                    </select>
-                </div>
-
-            </div>
-
-            <!-- SQLite Output Settings -->
-            <div x-show="outputType === 'sqlite'" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div class="form-control col-span-full">
-                    <label class="label" for="sqliteOutputPath">
-                        <span class="label-text">SQLite Database Path</span>
-                    </label>
-                    <div class="flex">
-                        <input type="text" id="sqliteOutputPath" name="output.sqlite.path" value="{{.Settings.Output.SQLite.Path}}" class="input input-bordered flex-grow" placeholder="Enter SQLite database path">
-                    </div>
-                </div>
-            </div>
-
-            <!-- MySQL Output Settings -->             
-            <div x-show="outputType === 'mysql'" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
-
-                <div class="form-control">
-                    <label class="label" for="mysqlOutputHost">
-                        <span class="label-text">MySQL Host</span>
-                    </label>
-                    <input type="text" id="mysqlOutputHost" name="output.mysql.host" value="{{.Settings.Output.MySQL.Host}}" class="input input-bordered" placeholder="Enter MySQL host">
-                </div>
-
-                <div class="form-control">
-                    <label class="label" for="mysqlOutputPort">
-                        <span class="label-text">MySQL Port</span>
-                    </label>
-                    <input type="text" id="mysqlOutputPort" name="output.mysql.port" value="{{.Settings.Output.MySQL.Port}}" class="input input-bordered" placeholder="Enter MySQL port">
-                </div>
-            
-
-                <div class="form-control">
-                    <label class="label" for="mysqlOutputUsername">
-                        <span class="label-text">MySQL Username</span>
-                    </label>
-                    <input type="text" id="mysqlOutputUsername" name="output.mysql.username" value="{{.Settings.Output.MySQL.Username}}" class="input input-bordered" placeholder="Enter MySQL username">
-                </div>
-
-                <div class="form-control">
-                    <label class="label" for="mysqlOutputPassword">
-                        <span class="label-text">MySQL Password</span>
-                    </label>
-                    <input type="password" id="mysqlOutputPassword" name="output.mysql.password" value="{{.Settings.Output.MySQL.Password}}" class="input input-bordered" placeholder="Enter MySQL password">
-                </div>
-
-                <div class="md:col-span-2 flex justify-start">
-                    <div class="form-control w-full md:w-[calc(50%-0.75rem)]">
-                        <label class="label" for="mysqlOutputDatabase">
-                            <span class="label-text">MySQL Database</span>
-                        </label>
-                        <input type="text" id="mysqlOutputDatabase" name="output.mysql.database" value="{{.Settings.Output.MySQL.Database}}" class="input input-bordered w-full" placeholder="Enter MySQL database name">
-                    </div>
-                </div>
-            
-            </div>
-            
-        </div>
-    </div>
-</div>
-
-{{end}}
\ No newline at end of file

From 78b8e1bf69eda11d4ec71402516bbda95c2f6657 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Sun, 12 Jan 2025 19:08:00 +0200
Subject: [PATCH 03/15] Enhance species settings UI with consistent styling

- Introduced a new CSS class for list items in species settings, improving visual consistency and user experience.
- Updated HTML templates in filtersSettings.html and speciesSettings.html to utilize the new styling class, replacing inline styles for better maintainability.
- Enhanced hover effects for list items to provide clearer feedback during user interactions.
---
 assets/custom.css                   | 15 +++++++++++++++
 views/settings/filtersSettings.html |  5 ++---
 views/settings/speciesSettings.html |  9 +++------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 36c110ce..a29fdb97 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -384,4 +384,19 @@ thead.sticky-header {
 
 .collapse-content {
   overflow: visible !important;
+}
+
+/* List item styling */
+.settings-list-item {
+  background-color: var(--surface-300);
+  border: 1px solid var(--border-100);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.settings-list-item:hover {
+  background-color: var(--surface-400);
 }
\ No newline at end of file
diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
index e649eb2e..36ad12c4 100644
--- a/views/settings/filtersSettings.html
+++ b/views/settings/filtersSettings.html
@@ -205,8 +205,7 @@
 
             <div class="space-y-2">
                 <template x-for="(species, index) in dogBarkFilter.species" :key="index">
-                    <div class="flex items-center space-x-2 p-2 rounded-md" 
-                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
+                    <div class="settings-list-item">
                         <div class="flex-grow">
                             <span x-show="editIndex !== index" 
                                   @click="startEdit(index)" 
@@ -228,7 +227,7 @@
                                         class="btn btn-xs">Cancel</button>
                                 <button type="button" @click="removeSpecies(index)" 
                                         class="btn btn-xs">Remove</button>
-                              </div>
+                            </div>
                         </div>
                     </div>
                 </template>
diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 51bb80fa..d093034a 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -70,8 +70,7 @@
             <!-- Include species list -->
             <div class="space-y-2">
                 <template x-for="(species, index) in speciesSettings.Include" :key="index">
-                    <div class="flex items-center space-x-2 p-2 rounded-md" 
-                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
+                    <div class="settings-list-item">
                         <div class="flex-grow">
                             <span x-text="species" class="text-sm"></span>
                         </div>
@@ -168,8 +167,7 @@
             <!-- Exclude species list -->
             <div class="space-y-2">
                 <template x-for="(species, index) in speciesSettings.Exclude" :key="index">
-                    <div class="flex items-center space-x-2 p-2 rounded-md" 
-                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
+                    <div class="settings-list-item">
                         <div class="flex-grow">
                             <span x-text="species" class="text-sm"></span>
                         </div>
@@ -337,8 +335,7 @@
                 
                 <!-- List items -->
                 <template x-for="(config, species) in speciesSettings.Config" :key="species">
-                    <div class="flex items-center space-x-2 p-2 rounded-md" 
-                        style="background-color: var(--surface-300); border: 1px solid var(--border-100);">
+                    <div class="settings-list-item">
                         <div class="flex-grow text-sm pl-2" x-text="species"></div>
                         <div class="w-24 text-sm px-3" x-text="config.Threshold.toFixed(2)"></div>
                         <div class="w-20 text-center">

From 9c4f14e2a1434eb4e7e5c95bdf079e58f58b4ae4 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 17:06:41 +0200
Subject: [PATCH 04/15] Refactor settings UI for improved consistency and
 usability

- Updated various settings pages to use a unified styling approach, enhancing visual consistency across the application.
- Replaced inline styles with new CSS classes for better maintainability and user experience.
- Improved tooltip handling by standardizing the help icon implementation across all settings templates.
- Enhanced descriptions and labels for clarity, ensuring users have better guidance on configuration options.
- Streamlined input handling and layout for species settings, including include/exclude functionality, to improve user interaction.
---
 views/settings/audioSettings.html           |  85 ++++-----
 views/settings/filtersSettings.html         |  42 +++--
 views/settings/integrationSettings.html     | 181 +++++++++-----------
 views/settings/mainSettings.html            | 155 +++++++----------
 views/settings/speciesSettings.html         |  64 +++----
 views/settings/templates/checkbox.html      |   2 +-
 views/settings/templates/hostField.html     |   2 +-
 views/settings/templates/passwordField.html |   4 +-
 views/settings/templates/textField.html     |   4 +-
 9 files changed, 242 insertions(+), 297 deletions(-)

diff --git a/views/settings/audioSettings.html b/views/settings/audioSettings.html
index af9f62f0..c7612db0 100644
--- a/views/settings/audioSettings.html
+++ b/views/settings/audioSettings.html
@@ -100,17 +100,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="audioCaptureSettingsOpen" x-on:change="audioCaptureSettingsOpen = !audioCaptureSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="audioCaptureSettingsOpen" class="cursor-pointer">Audio Capture</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Set audio capture source, sound card or RTSP stream</p>
+        <p class="settings-section-description">Set audio capture source, sound card or RTSP stream</p>
     </div>
 
     <div class="collapse-content">
@@ -120,13 +119,12 @@
         <div class="form-control relative">
             <label class="label justify-start" for="audioSource">
                 <span class="label-text">Audio Source</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioSource'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'audioSource'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <!--<input type="text" id="audioSource" name="realtime.audio.source" x-model="audioCapture.source" class="input input-bordered input-sm w-full" :disabled="audioCapture.rtsp.urls.length > 0">-->
             <select x-model="audioCapture.source"
-            name="realtime.audio.source"
-            class="select select-bordered select-sm w-full"
-            :disabled="audioCapture.rtsp.urls.length > 0">
+                    name="realtime.audio.source"
+                    class="select select-bordered select-sm w-full"
+                    :disabled="audioCapture.rtsp.urls.length > 0">
                 <option value="">Select an audio source</option>
                 <template x-for="device in audioDevices" :key="device.Index">
                     <option :value="device.Name" 
@@ -145,7 +143,7 @@
         <div class="form-control relative">
             <label class="label justify-start" for="rtspTransport">
                 <span class="label-text">RTSP Transport Protocol</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'rtspTransport'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'rtspTransport'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <select id="rtspTransport" name="realtime.rtsp.transport" x-model="audioCapture.rtsp.transport" class="select select-bordered select-sm w-full">
                 <option value="tcp">TCP</option>
@@ -160,7 +158,7 @@
         <div class="form-control relative">
             <label class="label justify-start" for="rtspUrls">
                 <span class="label-text mt-2">RTSP Stream URLs</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'rtspUrls'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'rtspUrls'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
         
             <template x-for="(url, index) in audioCapture.rtsp.urls" :key="index">
@@ -175,9 +173,9 @@
             </div>
 
             <!-- Add new RTSP URL button -->
-            <div class="flex items-center mt-2">
-                <input type="text" x-model="newUrl" class="input input-bordered input-sm w-full mr-2" placeholder="Enter RTSP URL (rtsp://user:password@example.com/stream1)">
-                <button type="button" class="btn btn-primary btn-sm" @click="addUrl">Add</button>
+            <div class="settings-input-group">
+                <input type="text" x-model="newUrl" placeholder="Enter RTSP URL (rtsp://user:password@example.com/stream1)">
+                <button type="button" @click="addUrl">Add</button>
             </div>
 
             <!-- Hidden input to always submit the RTSP URLs, even when empty -->
@@ -193,7 +191,7 @@
                 <input type="checkbox" id="audioFiltersEnabled" name="realtime.audio.equalizer.enabled" x-model="audioCapture.equalizer.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.audio.equalizer.enabled" value="false">
                 <span class="label-text">Enable Audio Equalizer</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioEqualizerEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'audioEqualizerEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'audioEqualizerEnabled'" x-cloak class="tooltip">
                 Enable or disable audio equalizer.
@@ -217,7 +215,7 @@
                             <div class="flex flex-col items-end">
                                 <label class="label pt-0">
                                     <span class="label-text-alt" x-text="param.Label + (param.Unit ? ' (' + param.Unit + ')' : '')"></span>
-                                    <span class="ml-2 text-sm text-gray-500 cursor-help"
+                                    <span class="help-icon"
                                           @mouseenter="showTooltip = param.Tooltip"
                                           @mouseleave="showTooltip = null">ⓘ</span>
                                 </label>
@@ -279,7 +277,7 @@
                             <div class="flex flex-col">
                                 <label class="label">
                                     <span class="label-text" x-text="param.Label + (param.Unit ? ' (' + param.Unit + ')' : '')"></span>
-                                    <span class="ml-2 text-sm text-gray-500 cursor-help"
+                                    <span class="help-icon"
                                           @mouseenter="showTooltip = param.Tooltip"
                                           @mouseleave="showTooltip = null">ⓘ</span>
                                 </label>
@@ -352,17 +350,16 @@
          }
      ">
     <input type="checkbox" id="audioExportSettingsOpen" x-on:change="audioExportSettingsOpen = !audioExportSettingsOpen" />
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="audioExportSettingsOpen" class="cursor-pointer">Audio Export</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Configure audio clip saving for identified bird calls</p>
+        <p class="settings-section-description">Configure audio clip saving for identified bird calls</p>
     </div>
 
     <div class="collapse-content">
@@ -371,7 +368,7 @@
                 <input type="checkbox" id="audioExportEnabled" name="realtime.audio.export.enabled" x-model="audioExport.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.audio.export.enabled" value="false">
                 <span class="label-text">Enable Audio Export</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'audioExportEnabled'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'audioExportEnabled'" x-cloak class="tooltip">
                 Enable or disable audio export for identified bird calls.
@@ -384,7 +381,7 @@
                     <input type="checkbox" id="audioExportDebug" name="realtime.audio.export.debug" x-model="audioExport.debug" class="checkbox checkbox-primary checkbox-xs mr-2">
                     <input type="hidden" name="realtime.audio.export.debug" value="false">
                     <span class="label-text">Enable Debug Mode</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportDebug'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'audioExportDebug'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <div x-show="showTooltip === 'audioExportDebug'" x-cloak class="tooltip">
                     Enable debug mode for audio export.
@@ -395,7 +392,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="audioExportPath">
                         <span class="label-text">Export Path</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportPath'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'audioExportPath'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="audioExportPath" name="realtime.audio.export.path" x-model="audioExport.path" class="input input-bordered input-sm w-full">
                     <div x-show="showTooltip === 'audioExportPath'" x-cloak class="tooltip">
@@ -403,10 +400,11 @@
                     </div>
                 </div>
 
+                <!-- Export Type -->
                 <div class="form-control relative">
                     <label class="label justify-start" for="audioExportType">
                         <span class="label-text">Export Type</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportType'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'audioExportType'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>                  
                     <select id="audioExportType" name="realtime.audio.export.type" 
                             x-model="audioExport.type" 
@@ -423,10 +421,11 @@
                     </div>
                 </div>
 
+                <!-- Bitrate -->
                 <div class="form-control relative">
                     <label class="label justify-start" for="audioExportBitrate">
                         <span class="label-text">Bitrate</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioExportBitrate'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'audioExportBitrate'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="audioExportBitrate" name="realtime.audio.export.bitrate" 
                            x-model="audioExport.bitrate.endsWith('k') ? audioExport.bitrate : audioExport.bitrate + 'k'" 
@@ -466,27 +465,28 @@
          $watch('audioRetention', (value) => { hasChanges = true }, { deep: true });
      ">
     <input type="checkbox" id="audioRetentionSettingsOpen" x-on:change="audioRetentionSettingsOpen = !audioRetentionSettingsOpen" />
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="audioRetentionSettingsOpen" class="cursor-pointer">Audio Clip Retention</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Configure audio clip cleanup</p>
+        <p class="settings-section-description">Configure audio clip cleanup</p>
     </div>
 
     <div class="collapse-content">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Retention Policy -->
             <div class="form-control relative">
                 <label class="label justify-start" for="audioRetentionPolicy">
                     <span class="label-text">Retention Policy</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionPolicy'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'audioRetentionPolicy'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <select id="audioRetentionPolicy" name="realtime.audio.export.retention.policy" x-model="audioRetention.policy" class="select select-bordered select-sm w-full">
+                <select id="audioRetentionPolicy" name="realtime.audio.export.retention.policy" 
+                        x-model="audioRetention.policy" class="select select-bordered select-sm w-full">
                     <option value="none">None</option>
                     <option value="age">Age</option>
                     <option value="usage">Usage</option>
@@ -496,10 +496,11 @@
                 </div>
             </div>
 
+            <!-- Max Age -->
             <div class="form-control relative" x-show="audioRetention.policy === 'age'">
                 <label class="label justify-start" for="audioRetentionMaxAge">
                     <span class="label-text">Max Age (h for hours, d for days, w for weeks, m for months, y for years)</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionMaxAge'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'audioRetentionMaxAge'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="audioRetentionMaxAge" name="realtime.audio.export.retention.maxage" x-model="audioRetention.maxage" class="input input-bordered input-sm w-full">
                 <div x-show="showTooltip === 'audioRetentionMaxAge'" x-cloak class="tooltip">
@@ -507,10 +508,11 @@
                 </div>
             </div>
 
+            <!-- Max Usage -->
             <div class="form-control relative" x-show="audioRetention.policy === 'usage'">
                 <label class="label justify-start" for="audioRetentionMaxUsage">
                     <span class="label-text">Max Usage (percentage)</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionMaxUsage'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'audioRetentionMaxUsage'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="audioRetentionMaxUsage" name="realtime.audio.export.retention.maxusage" x-model="audioRetention.maxusage"
                 @input="if (!audioRetention.maxusage.endsWith('%') && !isNaN(audioRetention.maxusage)) audioRetention.maxusage += '%'"
@@ -521,10 +523,11 @@
                 </div>
             </div>
 
+            <!-- Minimum Clips -->
             <div class="form-control relative" x-show="audioRetention.policy !== 'none'">
                 <label class="label justify-start" for="audioRetentionMinClips">
                     <span class="label-text">Minimum Clips</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'audioRetentionMinClips'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'audioRetentionMinClips'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="audioRetentionMinClips" name="realtime.audio.export.retention.minclips" x-model="audioRetention.minclips" min="1" class="input input-bordered input-sm w-full">
                 <div x-show="showTooltip === 'audioRetentionMinClips'" x-cloak class="tooltip">
diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
index 36ad12c4..0e081b30 100644
--- a/views/settings/filtersSettings.html
+++ b/views/settings/filtersSettings.html
@@ -45,7 +45,7 @@
                 <input type="checkbox" id="privacyFilterEnabled" name="realtime.privacyfilter.enabled" x-model="privacyFilter.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.privacyfilter.enabled" value="false">
                 <span class="label-text">Enable Privacy Filtering</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'privacyFilter'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-" @mouseenter="showTooltip = 'privacyFilter'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'privacyFilter'" x-cloak class="tooltip">
                 Enables detection of human voices, if detected discards bird detection to protect privacy
@@ -56,7 +56,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="privacyFilterConfidence">
                     <span class="label-text">Confidence Threshold for Human Detection</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'privacyConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-" @mouseenter="showTooltip = 'privacyConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="privacyFilterConfidence" name="realtime.privacyFilter.confidence" x-model="privacyFilter.confidence" step="0.01" min="0" max="1" class="input input-bordered input-sm w-full mb-4">
                 <div x-show="showTooltip === 'privacyConfidence'" x-cloak class="tooltip">
@@ -85,7 +85,7 @@
     showTooltip: null,
     hasChanges: false,
     predictions: [],
-    allowedSpecies: {{.PreparedSpecies | toJSON}},
+    allowedSpecies: {{getIncludedSpecies | toJSON}},
     resetChanges() {
         this.hasChanges = false;
     },
@@ -134,27 +134,27 @@
 }" x-init="
     $watch('dogBarkFilter', () => { hasChanges = true }, { deep: true });
 ">
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             False Positive Prevention
-            <div class="ml-2" x-show="hasChanges" x-cloak>
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Configure false detection filters</p>
+        <p class="settings-section-description">Configure false detection filters</p>
     </div>
 
     <div class="collapse-content">
         
+        <!-- Dog Bark Filter Settings -->
         <div class="form-control relative">
             <label class="label justify-start" for="dogBarkFilterEnabled">
                 <input type="checkbox" id="dogBarkFilterEnabled" name="realtime.dogbarkfilter.enabled" x-model="dogBarkFilter.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.dogbarkfilter.enabled" value="false">
                 <span class="label-text">Enable Dog Bark Filter</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
+                <span class="help-icon"
                       @mouseenter="showTooltip = 'dogBarkFilter'"
                       @mouseleave="showTooltip = null">ⓘ</span>
             </label>
@@ -163,11 +163,12 @@
             </div>
         </div>
 
+        <!-- Dog Bark Filter Settings -->
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6" x-show="dogBarkFilter.enabled">
             <div class="form-control relative">
                 <label class="label-text">
                     Confidence Threshold
-                    <span class="ml-2 text-sm text-gray-500 cursor-help"
+                    <span class="help-icon"
                           @mouseenter="showTooltip = 'dogBarkConfidence'"
                           @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
@@ -178,10 +179,11 @@
                 </div>
             </div>
 
+            <!-- Dog Bark Expire Time (Minutes) -->
             <div class="form-control relative">
                 <label class="label-text">
                     Dog Bark Expire Time (Minutes)
-                    <span class="ml-2 text-sm text-gray-500 cursor-help"
+                    <span class="help-"
                           @mouseenter="showTooltip = 'dogBarkExpire'"
                           @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
@@ -192,10 +194,11 @@
             </div>
         </div>
 
-        <div class="form-control relative mt-4" x-show="dogBarkFilter.enabled">
-            <label class="label-text">
+        <!-- Dog Bark Species List -->
+        <div class="settings-form-group" x-show="dogBarkFilter.enabled">
+            <label>
                 Dog Bark Species List
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
+                <span class="help-icon"
                       @mouseenter="showTooltip = 'dogBarkSpecies'"
                       @mouseleave="showTooltip = null">ⓘ</span>
             </label>
@@ -203,6 +206,7 @@
                 List of species to filter out as potential dog barks
             </div>
 
+            <!-- Dog Bark Species List -->
             <div class="space-y-2">
                 <template x-for="(species, index) in dogBarkFilter.species" :key="index">
                     <div class="settings-list-item">
@@ -233,19 +237,19 @@
                 </template>
             </div>
 
-            <div class="flex items-center mt-2">
+            <!-- Add New Species -->
+            <div class="settings-input-group">
                 <input type="text" 
                        x-model="newSpecies" 
                        @input="updatePredictions()" 
                        list="species-suggestions"
-                       placeholder="Add new species" 
-                       class="input input-bordered input-sm w-full" />
+                       placeholder="Add new species">
                 <datalist id="species-suggestions">
                     <template x-for="suggestion in predictions" :key="suggestion">
                         <option :value="suggestion"></option>
                     </template>
                 </datalist>
-                <button type="button" @click="addSpecies()" class="btn btn-sm btn-primary ml-2 mr-2 w-20">Add</button>
+                <button type="button" @click="addSpecies()">Add</button>
             </div>
             <input type="hidden" name="realtime.dogbarkfilter.species" :value="JSON.stringify(dogBarkFilter.species)" />
         </div>
diff --git a/views/settings/integrationSettings.html b/views/settings/integrationSettings.html
index 80b90bd2..13573525 100644
--- a/views/settings/integrationSettings.html
+++ b/views/settings/integrationSettings.html
@@ -29,17 +29,16 @@
     <input type="checkbox" id="birdweatherSettingsOpen"
         x-on:change="birdweatherSettingsOpen = !birdweatherSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="mainSettingsOpen" class="cursor-pointer">BirdWeather</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Upload detections to BirdWeather</p>
+        <p class="settings-section-description">Upload detections to BirdWeather</p>
     </div>
 
     <!-- disabled for now
@@ -56,7 +55,7 @@
                     x-model="birdweather.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.birdweather.enabled" value="false">
                 <span class="label-text">Enable BirdWeather Uploads</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'birdweatherEnabled'"
+                <span class="help-icon" @mouseenter="showTooltip = 'birdweatherEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'birdweatherEnabled'" x-cloak class="tooltip">
@@ -72,7 +71,7 @@
                         x-model="birdweather.debug" class="checkbox checkbox-primary checkbox-xs mr-2">
                     <input type="hidden" name="realtime.birdweather.debug" value="false">
                     <span class="label-text">Debug Mode</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'birdweatherDebug'"
+                    <span class="help-icon" @mouseenter="showTooltip = 'birdweatherDebug'"
                         @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <div x-show="showTooltip === 'birdweatherDebug'" x-cloak class="tooltip">
@@ -81,17 +80,6 @@
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <!-- div class="form-control relative">
-                    <label class="label justify-start" for="birdweatherId">
-                        <span class="label-text">BirdWeather token</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'birdweatherId'" @mouseleave="showTooltip = null">ⓘ</span>
-                    </label>
-                    <input type="password" id="birdweatherId" name="realtime.birdweather.id" x-model="birdweather.id" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'birdweatherId'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
-                        Your unique BirdWeather token.
-                    </div>
-                </div -->
-
                 {{template "passwordField" dict
                 "id" "birdweatherId"
                 "model" "birdweather.id"
@@ -103,7 +91,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="birdweatherThreshold">
                         <span class="label-text">Upload Threshold</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help"
+                        <span class="help-icon"
                             @mouseenter="showTooltip = 'birdweatherThreshold'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="number" id="birdweatherThreshold" name="realtime.birdweather.threshold"
@@ -142,17 +130,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="mqttSettingsOpen" x-on:change="mqttSettingsOpen = !mqttSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="mqttSettingsOpen" class="cursor-pointer">MQTT</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Push detections to a MQTT broker</p>
+        <p class="settings-section-description">Configure MQTT broker connection</p>
     </div>
 
     <!-- disabled for now
@@ -169,7 +156,7 @@
                     class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.mqtt.enabled" value="false">
                 <span class="label-text">Enable MQTT Integration</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttEnabled'"
+                <span class="help-icon" @mouseenter="showTooltip = 'mqttEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'mqttEnabled'" x-cloak class="tooltip">
@@ -179,69 +166,63 @@
 
         <div x-show="mqtt.enabled">
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-                <div class="form-control relative">
-                    <label class="label justify-start" for="mqttBroker">
-                        <span class="label-text">Broker</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttBroker'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
-                    </label>
-                    <input type="text" id="mqttBroker" name="realtime.mqtt.broker" x-model="mqtt.broker"
-                        class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttBroker'" x-cloak class="tooltip">
-                        The MQTT broker URL (e.g., tcp://localhost:1883).
-                    </div>
+            <div class="settings-form-group">
+                <label class="justify-start" for="mqttBroker">
+                    <span class="label-text">MQTT Broker</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mqttBroker'" @mouseleave="showTooltip = null">ⓘ</span>
+                </label>
+                <input type="text" id="mqttBroker" name="mqtt.broker" x-model="mqtt.broker" 
+                       class="input input-sm input-bordered w-full" placeholder="mqtt://localhost:1883">
+                <div x-show="showTooltip === 'mqttBroker'" x-cloak class="tooltip">
+                    MQTT broker URL (e.g., mqtt://localhost:1883)
                 </div>
+            </div>
 
-                <div class="form-control relative">
-                    <label class="label justify-start" for="mqttTopic">
-                        <span class="label-text">Topic</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttTopic'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
-                    </label>
-                    <input type="text" id="mqttTopic" name="realtime.mqtt.topic" x-model="mqtt.topic"
-                        class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttTopic'" x-cloak class="tooltip">
-                        The MQTT topic to publish messages to.
-                    </div>
+            <div class="settings-form-group">
+                <label class="justify-start" for="mqttTopic">
+                    <span class="label-text">MQTT Topic</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mqttTopic'" @mouseleave="showTooltip = null">ⓘ</span>
+                </label>
+                <input type="text" id="mqttTopic" name="mqtt.topic" x-model="mqtt.topic" 
+                       class="input input-sm input-bordered w-full" placeholder="birdnet/detections">
+                <div x-show="showTooltip === 'mqttTopic'" x-cloak class="tooltip">
+                    MQTT topic to publish detections to
                 </div>
+            </div>
 
-                <div class="form-control relative">
-                    <label class="label justify-start" for="mqttUsername">
-                        <span class="label-text">Username</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttUsername'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
-                    </label>
-                    <input type="text" id="mqttUsername" name="realtime.mqtt.username" x-model="mqtt.username"
-                        class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttUsername'" x-cloak class="tooltip">
-                        The MQTT username.
-                    </div>
+            <div class="form-control relative">
+                <label class="label justify-start" for="mqttUsername">
+                    <span class="label-text">Username</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mqttUsername'"
+                        @mouseleave="showTooltip = null">ⓘ</span>
+                </label>
+                <input type="text" id="mqttUsername" name="realtime.mqtt.username" x-model="mqtt.username"
+                    class="input input-bordered input-sm w-full">
+                <div x-show="showTooltip === 'mqttUsername'" x-cloak class="tooltip">
+                    The MQTT username.
                 </div>
-
-                <!--div class="form-control relative">
-                    <label class="label justify-start" for="mqttPassword">
-                        <span class="label-text">Password</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mqttPassword'" @mouseleave="showTooltip = null">ⓘ</span>
-                    </label>
-                    <input type="password" id="mqttPassword" name="realtime.mqtt.password" x-model="mqtt.password" class="input input-bordered input-sm w-full">
-                    <div x-show="showTooltip === 'mqttPassword'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
-                        The MQTT password.
-                    </div>
-                </div -->
-
-                {{template "passwordField" dict
-                    "id" "mqttPassword"
-                    "model" "mqtt.password"
-                    "name" "realtime.mqtt.password"
-                    "label" "Password"
-                    "placeholder" ""
-                    "tooltip" "The MQTT password."
-                    }}
-
             </div>
 
+            <!--div class="form-control relative">
+                <label class="label justify-start" for="mqttPassword">
+                    <span class="label-text">Password</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mqttPassword'" @mouseleave="showTooltip = null">ⓘ</span>
+                </label>
+                <input type="password" id="mqttPassword" name="realtime.mqtt.password" x-model="mqtt.password" class="input input-bordered input-sm w-full">
+                <div x-show="showTooltip === 'mqttPassword'" x-cloak class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md z-50">
+                    The MQTT password.
+                </div>
+            </div -->
+
+            {{template "passwordField" dict
+                "id" "mqttPassword"
+                "model" "mqtt.password"
+                "name" "realtime.mqtt.password"
+                "label" "Password"
+                "placeholder" ""
+                "tooltip" "The MQTT password."
+                }}
+
         </div>
     </div>
 </div>
@@ -266,17 +247,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="telemetrySettingsOpen" x-on:change="telemetrySettingsOpen = !telemetrySettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="telemetrySettingsOpen" class="cursor-pointer">Telemetry</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Monitor BirdNET-Go's performance and bird detection metrics through
+        <p class="settings-section-description">Monitor BirdNET-Go's performance and bird detection metrics through
             Prometheus-compatible endpoint</p>
     </div>
 
@@ -294,7 +274,7 @@
                     x-model="telemetry.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.telemetry.enabled" value="false">
                 <span class="label-text">Enable Telemetry Integration</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'telemetryEnabled'"
+                <span class="help-icon" @mouseenter="showTooltip = 'telemetryEnabled'"
                     @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'telemetryEnabled'" x-cloak class="tooltip">
@@ -309,7 +289,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="telemetryListen">
                         <span class="label-text">Listen Address</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help"
+                        <span class="help-icon"
                             @mouseenter="showTooltip = 'telemetryListen'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="telemetryListen" name="realtime.telemetry.listen" x-model="telemetry.listen"
@@ -352,17 +332,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="weatherSettingsOpen" x-on:change="weatherSettingsOpen = !weatherSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="weatherSettingsOpen" class="cursor-pointer">Weather</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short description of this section -->
-        <p class="text-sm text-gray-500">Configure weather data collection</p>
+        <p class="settings-section-description">Configure weather data collection</p>
     </div>
 
     <div class="collapse-content">
@@ -370,7 +349,7 @@
         <div class="form-control relative">
             <label class="label justify-start" for="weatherProvider">
                 <span class="label-text">Weather Provider</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'weatherProvider'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'weatherProvider'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <select id="weatherProvider" name="realtime.weather.provider" x-model="weather.provider" class="select select-bordered select-sm w-full">
                 <option value="none">None</option>
@@ -418,7 +397,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="openWeatherEndpoint">
                         <span class="label-text">API Endpoint</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'openWeatherEndpoint'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'openWeatherEndpoint'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="openWeatherEndpoint" name="realtime.weather.openweather.endpoint" x-model="weather.openWeather.endpoint" class="input input-bordered input-sm w-full">
                     <div x-show="showTooltip === 'openWeatherEndpoint'" x-cloak class="tooltip">
@@ -429,7 +408,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="openWeatherUnits">
                         <span class="label-text">Units of Measurement</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'openWeatherUnits'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'openWeatherUnits'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <select id="openWeatherUnits" name="realtime.weather.openweather.units" x-model="weather.openWeather.units" class="select select-bordered select-sm w-full">
                         <option value="standard">Standard</option>
@@ -444,7 +423,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="openWeatherLanguage">
                         <span class="label-text">Language</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'openWeatherLanguage'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'openWeatherLanguage'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="openWeatherLanguage" name="realtime.weather.openweather.language" x-model="weather.openWeather.language" class="input input-bordered input-sm w-full">
                     <div x-show="showTooltip === 'openWeatherLanguage'" x-cloak class="tooltip">
diff --git a/views/settings/mainSettings.html b/views/settings/mainSettings.html
index dd63c03e..d3eb1fa0 100644
--- a/views/settings/mainSettings.html
+++ b/views/settings/mainSettings.html
@@ -27,15 +27,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="mainSettingsOpen" x-on:change="mainSettingsOpen = ! mainSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="mainSettingsOpen" class="cursor-pointer">Node Settings</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
+        <p class="settings-section-description">Configure node specific settings</p>
     </div>
 
     <div class="collapse-content">
@@ -44,8 +45,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="nodeName">
                     <span class="label-text">Node Name</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'nodeName'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'nodeName'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="nodeName" name="main.name" x-model="main.name"
                     class="input input-sm input-bordered" placeholder="Enter node name">
@@ -173,17 +173,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="birdnetSettingsOpen" x-on:change="birdnetSettingsOpen = ! birdnetSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
-            <label for="mainSettingsOpen" class="cursor-pointer">BirdNET Settings</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <label for="birdnetSettingsOpen" class="cursor-pointer">BirdNET Settings</label>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Configure BirdNET AI model specific settings</p>
+        <p class="settings-section-description">Configure BirdNET AI model specific settings</p>
     </div>
 
     <div class="collapse-content">
@@ -193,8 +192,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetSensitivity">
                     <span class="label-text">Sensitivity</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'sensitivity'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'sensitivity'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="birdnetSensitivity" name="birdnet.sensitivity" x-model="birdnet.sensitivity"
                     step="0.1" min="0.1" max="1.5" class="input input-bordered input-sm w-full">
@@ -207,8 +205,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetThreshold">
                     <span class="label-text">Threshold</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'threshold'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'threshold'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="birdnetThreshold" name="birdnet.threshold" x-model="birdnet.threshold"
                     step="0.01" min="0" max="1" class="input input-bordered input-sm w-full">
@@ -220,8 +217,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetOverlap">
                     <span class="label-text">Overlap</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'overlap'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'overlap'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="birdnetOverlap" name="birdnet.overlap" x-model="birdnet.overlap" step="0.1"
                     min="0" max="2.9" class="input input-bordered input-sm w-full">
@@ -233,8 +229,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetLocale">
                     <span class="label-text">Locale</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'locale'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'locale'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <select id="birdnetLocale" name="birdnet.locale" x-model="birdnet.locale"
                     class="select select-bordered select-sm w-full">
@@ -251,8 +246,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetThreads">
                     <span class="label-text">TensorFlow CPU Threads</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'threads'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'threads'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="birdnetThreads" name="birdnet.threads" x-model="birdnet.threads" step="1"
                     min="0" max="32" class="input input-bordered input-sm w-full" />
@@ -270,8 +264,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetModelPath">
                     <span class="label-text">Model Path (Requires restart to apply)</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'modelPath'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'modelPath'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="birdnetModelPath" name="birdnet.modelpath" x-model="birdnet.modelPath"
                     class="input input-bordered input-sm w-full">
@@ -284,8 +277,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="birdnetLabelPath">
                     <span class="label-text">Label Path (Requires restart to apply)</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'labelPath'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'labelPath'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="birdnetLabelPath" name="birdnet.labelpath" x-model="birdnet.labelPath"
                     class="input input-bordered input-sm w-full">
@@ -306,8 +298,7 @@
                     x-model="dynamicThreshold.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.dynamicthreshold.enabled" value="false">
                 <span class="label-text">Enable Dynamic Threshold (BirdNET-Go specific feature)</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'dynamicThreshold'"
-                    @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'dynamicThreshold'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'dynamicThreshold'" x-cloak class="tooltip">
                 Enables dynamic confidence threshold feature for more adaptive bird call detection.
@@ -320,8 +311,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="dynamicThresholdTrigger">
                     <span class="label-text">Trigger Threshold</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'trigger'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'trigger'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="dynamicThresholdTrigger" name="realtime.dynamicthreshold.trigger"
                     x-model="dynamicThreshold.trigger" step="0.01" class="input input-bordered input-sm w-full">
@@ -336,8 +326,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="dynamicThresholdMin">
                     <span class="label-text">Minimum Dynamic Threshold</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'min'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'min'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="dynamicThresholdMin" name="realtime.dynamicthreshold.min"
                     x-model="dynamicThreshold.min" step="0.01" class="input input-bordered input-sm w-full">
@@ -351,8 +340,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="dynamicThresholdValidHours">
                     <span class="label-text">Dynamic Threshold Expire Time (Hours)</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'validHours'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'validHours'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="dynamicThresholdValidHours" name="realtime.dynamicthreshold.validhours"
                     x-model="dynamicThreshold.validHours" class="input input-bordered input-sm w-full">
@@ -373,8 +361,7 @@
             <div class="form-control relative col-span-1 md:col-span-2">
                 <label class="label justify-start" for="locationMap">
                     <span class="label-text">Station Location</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'locationMap'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'locationMap'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <div x-show="showTooltip === 'locationMap'" x-cloak class="tooltip">
                     Station location, used to limit bird species to those propable in the region.
@@ -389,8 +376,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="birdnetLatitude">
                         <span class="label-text">Latitude</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'latitude'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'latitude'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="number" id="birdnetLatitude" name="birdnet.latitude" x-model="birdnet.latitude"
                         step="0.001" class="input input-bordered input-sm w-full">
@@ -403,8 +389,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="birdnetLongitude">
                         <span class="label-text">Longitude</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'longitude'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'longitude'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="number" id="birdnetLongitude" name="birdnet.longitude" x-model="birdnet.longitude"
                         step="0.001" class="input input-bordered input-sm w-full">
@@ -417,8 +402,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="birdnetRangeFilterModel">
                         <span class="label-text">Range Filter Model</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help"
-                            @mouseenter="showTooltip = 'rangeFilterModel'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'rangeFilterModel'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <select id="birdnetRangeFilterModel" name="birdnet.rangefilter.model" x-model="rangeFilter.model"
                         class="select select-bordered select-sm w-full">
@@ -434,8 +418,7 @@
                 <div class="form-control relative">
                     <label class="label justify-start" for="birdnetRangeFilterThreshold">
                         <span class="label-text">Threshold</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help"
-                            @mouseenter="showTooltip = 'rangeFilterThreshold'" @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'rangeFilterThreshold'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="number" id="birdnetRangeFilterThreshold" name="birdnet.rangefilter.threshold"
                         x-model="rangeFilter.threshold" step="0.01" min="0" max="1"
@@ -529,37 +512,33 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="outputSettingsOpen" x-on:change="outputSettingsOpen = !outputSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="outputSettingsOpen" class="cursor-pointer">Database Settings</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Detections database settings</p>
+        <p class="settings-section-description">Detections database settings</p>
     </div>
 
     <div class="collapse-content">
 
         <!-- Database Type -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="form-control relative">
-                <label class="label justify-start" for="databaseType">
-                    <span class="label-text">Select Database Type</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'databaseType'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
-                </label>
-                <select id="databaseType" x-model="outputType" name="output.type"
-                    class="select select-sm select-bordered w-full">
-                    <option value="sqlite">SQLite</option>
-                    <option value="mysql">MySQL</option>
-                </select>
-                <div x-show="showTooltip === 'databaseType'" x-cloak class="tooltip">
-                    Database type for storing detections: SQLite or MySQL
-                </div>
+        <div class="settings-form-group">
+            <label class="justify-start" for="databaseType">
+                <span class="label-text">Select Database Type</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'databaseType'" @mouseleave="showTooltip = null">ⓘ</span>
+            </label>
+            <select id="databaseType" x-model="outputType" name="output.type"
+                class="select select-sm select-bordered w-full">
+                <option value="sqlite">SQLite</option>
+                <option value="mysql">MySQL</option>
+            </select>
+            <div x-show="showTooltip === 'databaseType'" x-cloak class="tooltip">
+                Database type for storing detections: SQLite or MySQL
             </div>
         </div>
 
@@ -568,8 +547,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="sqlitePath">
                     <span class="label-text">SQLite Database Path</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'sqlitePath'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'sqlitePath'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <div class="flex">
                     <input type="text" id="sqlitePath" x-model="sqlite.path" name="output.sqlite.path"
@@ -588,8 +566,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="mysqlHost">
                     <span class="label-text">MySQL Host</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mysqlHost'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mysqlHost'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="mysqlHost" x-model="mysql.host" name="output.mysql.host"
                     class="input input-sm input-bordered" placeholder="Enter MySQL host">
@@ -602,8 +579,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="mysqlPort">
                     <span class="label-text">MySQL Port</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mysqlPort'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mysqlPort'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="mysqlPort" x-model="mysql.port" name="output.mysql.port"
                     class="input input-sm input-bordered" placeholder="Enter MySQL port">
@@ -616,8 +592,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="mysqlUsername">
                     <span class="label-text">MySQL Username</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mysqlUsername'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mysqlUsername'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="mysqlUsername" x-model="mysql.username" name="output.mysql.username"
                     class="input input-sm input-bordered" placeholder="Enter MySQL username">
@@ -630,8 +605,7 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="mysqlPassword">
                     <span class="label-text">MySQL Password</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mysqlPassword'"
-                        @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'mysqlPassword'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <div class="relative">
                     <input :type="showPassword ? 'text' : 'password'" id="mysqlOutputPassword" x-model="mysql.password"
@@ -666,8 +640,7 @@
                 <div class="form-control relative w-full md:w-[calc(50%-0.75rem)]">
                     <label class="label justify-start" for="mysqlDatabase">
                         <span class="label-text">MySQL Database</span>
-                        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = 'mysqlDatabase'"
-                            @mouseleave="showTooltip = null">ⓘ</span>
+                        <span class="help-icon" @mouseenter="showTooltip = 'mysqlDatabase'" @mouseleave="showTooltip = null">ⓘ</span>
                     </label>
                     <input type="text" id="mysqlDatabase" x-model="mysql.database" name="output.mysql.database"
                         class="input input-sm input-bordered w-full" placeholder="Enter MySQL database name">
@@ -702,17 +675,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="uiSettingsOpen" x-on:change="uiSettingsOpen = !uiSettingsOpen" />
 
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="uiSettingsOpen" class="cursor-pointer">User Interface Settings</label>
-            <div x-show="hasChanges" x-cloak class="ml-2">
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Customize user interface</p>
+        <p class="settings-section-description">Customize user interface</p>
     </div>
 
     <div class="collapse-content">
@@ -722,14 +694,13 @@
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
             <!-- Daily Summary Species Limit -->
-            <div class="form-control relative">
-                <label class="label justify-start" for="dashboardSummaryLimit">
+            <div class="settings-form-group">
+                <label class="justify-start" for="dashboardSummaryLimit">
                     <span class="label-text">Max Number of Species on Daily Summary Table</span>
-                    <span class="ml-2 text-sm text-gray-500 cursor-help"
-                        @mouseenter="showTooltip = 'dashboardSummaryLimit'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'dashboardSummaryLimit'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="dashboardSummaryLimit" name="realtime.dashboard.summarylimit"
-                    x-model="dashboard.summarylimit" class="input input-sm input-bordered mb-2 w-full"
+                    x-model="dashboard.summarylimit" class="input input-sm input-bordered w-full"
                     placeholder="Enter limit" min="10" max="1000">
                 <div x-show="showTooltip === 'dashboardSummaryLimit'" x-cloak class="tooltip">
                     Max number of species shown in the daily summary table (Value between 10 and 1000)
@@ -745,8 +716,7 @@
                     x-model="dashboard.thumbnails.summary" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.dashboard.thumbnails.summary" value="false">
                 <span class="label-text">Show Thumbnails on Daily Summary table</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
-                    @mouseenter="showTooltip = 'dashboardThumbnailsSummary'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'dashboardThumbnailsSummary'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'dashboardThumbnailsSummary'" x-cloak class="tooltip">
                 Enable to show thumbnails of detected species on the daily summary table
@@ -760,8 +730,7 @@
                     x-model="dashboard.thumbnails.recent" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.dashboard.thumbnails.recent" value="false">
                 <span class="label-text">Show Thumbnails on Recent Detections list</span>
-                <span class="ml-2 text-sm text-gray-500 cursor-help"
-                    @mouseenter="showTooltip = 'dashboardThumbnailsRecent'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'dashboardThumbnailsRecent'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'dashboardThumbnailsRecent'" x-cloak class="tooltip">
                 Enable to show thumbnails of detected species on the recent detections list
diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index d093034a..75b86532 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -50,22 +50,21 @@
 }" 
 x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
-    <div class="collapse-title text-xl font-medium">
+    <div class="collapse-title settings-section-header">
         <div class="flex items-center">
             <label for="speciesSettingsOpen" class="cursor-pointer">Always Include Species</label>
-            <div class="ml-2" x-show="hasChanges" x-cloak>
-                <span class="badge badge-primary badge-sm changed-badge">
-                    <span class="text-xs mb-0.5">changed</span>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+                <span class="badge">
+                    <span>changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Species in this list will always be included in range of detected species</p>
+        <p class="settings-section-description">Species in this list will always be included in range of detected species</p>
     </div>
 
     <div class="collapse-content">
         
-        <div class="form-control relative">
+        <div class="settings-form-group">
 
             <!-- Include species list -->
             <div class="space-y-2">
@@ -83,19 +82,18 @@
             </div>
 
             <!-- Include species input -->
-            <div class="flex items-center mt-2">
+            <div class="settings-input-group">
                 <input type="text" 
                        x-model="newIncludeSpecies" 
                        @input="updatePredictions(newIncludeSpecies, 'Include')" 
                        list="include-species-suggestions"
-                       placeholder="Add species to include" 
-                       class="input input-bordered input-sm w-full" />
+                       placeholder="Add species to include">
                 <datalist id="include-species-suggestions">
                     <template x-for="species in predictions" :key="species">
                         <option :value="species"></option>
                     </template>
                 </datalist>
-                <button type="button" @click="addSpecies('Include')" class="btn btn-sm btn-primary ml-2 mr-2 w-20">Add</button>
+                <button type="button" @click="addSpecies('Include')">Add</button>
             </div>
         </div>
         <input type="hidden" name="realtime.species.include" :value="JSON.stringify(speciesSettings.Include)">
@@ -180,19 +178,18 @@
             </div>
 
             <!-- Exclude species input -->
-            <div class="flex items-center mt-2">
+            <div class="settings-input-group">
                 <input type="text" 
                        x-model="newExcludeSpecies" 
                        @input="updatePredictions(newExcludeSpecies, 'Exclude')" 
                        list="exclude-species-suggestions"
-                       placeholder="Add species to exclude" 
-                       class="input input-bordered input-sm w-full" />
+                       placeholder="Add species to exclude">
                 <datalist id="exclude-species-suggestions">
                     <template x-for="species in predictions" :key="species">
                         <option :value="species"></option>
                     </template>
                 </datalist>
-                <button type="button" @click="addSpecies('Exclude')" class="btn btn-sm btn-primary ml-2 mr-2 w-20">Add</button>
+                <button type="button" @click="addSpecies('Exclude')">Add</button>
             </div>
         </div>
         <input type="hidden" name="realtime.species.exclude" :value="JSON.stringify(speciesSettings.Exclude)">
@@ -325,13 +322,6 @@
 
             <!-- Custom configuration list -->
             <div class="space-y-2">
-                <!-- Header -->
-                <div class="flex bg-base-100 p-2 rounded-md">
-                    <div class="flex-grow text-sm font-medium">Species</div>
-                    <div class="w-24 text-sm font-medium">Threshold</div>
-                    <div class="w-20 text-sm font-medium text-center">Actions</div>
-                    <div class="w-20 text-sm font-medium text-center"></div>
-                </div>
                 
                 <!-- List items -->
                 <template x-for="(config, species) in speciesSettings.Config" :key="species">
@@ -389,37 +379,37 @@
             <div class="modal-box bg-base-100 max-h-[90vh] overflow-y-auto">
                 <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3>
                 
-                <div class="mb-4">
-                    <label class="block text-sm font-medium">Action Type</label>
+                <div class="settings-modal-section">
+                    <label>Action Type</label>
                     <select x-model="currentAction.type" 
-                            class="select select-bordered w-full mt-1" 
+                            class="select select-bordered" 
                             disabled>
                         <option value="ExecuteCommand">Execute Command</option>
                     </select>
                 </div>
                 
-                <div class="mb-4">
-                    <label class="block text-sm font-medium">Command</label>
+                <div class="settings-modal-section">
+                    <label>Command</label>
                     <input type="text" 
                            x-model="currentAction.command" 
-                           class="input input-bordered w-full mt-1" 
+                           class="input input-bordered" 
                            placeholder="/path/to/your/command">
-                    <p class="text-sm text-base-content mt-1">Provide the full path to the command you want to execute</p>
+                    <p class="help-text">Provide the full path to the command you want to execute</p>
                 </div>
 
-                <div class="mb-4">
-                    <label class="block text-sm font-medium">Parameters</label>
+                <div class="settings-modal-section">
+                    <label>Parameters</label>
                     <input type="text" 
                            x-model="currentAction.parameters" 
-                           class="input input-bordered w-full mt-1" 
+                           class="input input-bordered" 
                            placeholder="Parameters will appear here"
                            readonly>
-                    <p class="text-sm text-base-content mt-1">Click parameters below to add them to your command</p>
+                    <p class="help-text">Click parameters below to add them to your command</p>
                 </div>
 
-                <div class="mb-4">
-                    <label class="block text-sm font-medium">Available Parameters</label>
-                    <p class="text-sm text-base-content mb-2">Click to add parameters to your script:</p>
+                <div class="settings-modal-section">
+                    <label>Available Parameters</label>
+                    <p class="help-text mb-2">Click to add parameters to your script:</p>
                     <div class="flex flex-wrap gap-2">
                         <button type="button" 
                                 @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
@@ -442,7 +432,7 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                                 @click.prevent="currentAction.parameters = ''" 
                                 class="btn btn-xs btn-warning">Clear Parameters</button>
                     </div>
-                    <p class="text-sm text-base-content mt-2">Parameters will be passed to your script in the order they are added</p>
+                    <p class="help-text mt-2">Parameters will be passed to your script in the order they are added</p>
                 </div>
                 
                 <div class="modal-action">
diff --git a/views/settings/templates/checkbox.html b/views/settings/templates/checkbox.html
index 84cafa6a..e83ec399 100644
--- a/views/settings/templates/checkbox.html
+++ b/views/settings/templates/checkbox.html
@@ -12,7 +12,7 @@
         <input type="hidden" :name="name" value="false">
 
         <span class="label-text">{{.label}}</span>
-        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = '{{.id}}'"
+        <span class="help-icon" @mouseenter="showTooltip = '{{.id}}'"
             @mouseleave="showTooltip = null">ⓘ</span>
     </label>
 
diff --git a/views/settings/templates/hostField.html b/views/settings/templates/hostField.html
index 44343d4c..58ced518 100644
--- a/views/settings/templates/hostField.html
+++ b/views/settings/templates/hostField.html
@@ -20,7 +20,7 @@
     <!-- Label -->
     <label class="label justify-start" for="{{.id}}">
         <span class="label-text capitalize">{{.label}}</span>
-        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = '{{.id}}'"
+        <span class="help-icon" @mouseenter="showTooltip = '{{.id}}'"
             @mouseleave="showTooltip = null">ⓘ</span>
     </label>
     {{end}}
diff --git a/views/settings/templates/passwordField.html b/views/settings/templates/passwordField.html
index c3d0471d..95ac4a60 100644
--- a/views/settings/templates/passwordField.html
+++ b/views/settings/templates/passwordField.html
@@ -13,7 +13,7 @@
     <!-- Label -->
     <label class="label justify-start" for="{{.id}}">
         <span class="label-text capitalize">{{.label}}</span>
-        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = '{{.id}}'"
+        <span class="help-icon" @mouseenter="showTooltip = '{{.id}}'"
             @mouseleave="showTooltip = null">ⓘ</span>
     </label>
 
@@ -78,7 +78,7 @@
         role="tooltip"
         aria-hidden="true"
         x-cloak
-        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md w-96">
+        class="tooltip">
         {{.tooltip}}
     </div>
 </div>
diff --git a/views/settings/templates/textField.html b/views/settings/templates/textField.html
index e12c003c..e43ca8eb 100644
--- a/views/settings/templates/textField.html
+++ b/views/settings/templates/textField.html
@@ -14,7 +14,7 @@
     <!-- Label -->
     <label class="label justify-start" for="{{.id}}">
         <span class="label-text capitalize">{{.label}}</span>
-        <span class="ml-2 text-sm text-gray-500 cursor-help" @mouseenter="showTooltip = '{{.id}}'"
+        <span class="help-icon" @mouseenter="showTooltip = '{{.id}}'"
             @mouseleave="showTooltip = null">ⓘ</span>
     </label>
     {{end}}
@@ -47,7 +47,7 @@
 
     <!-- Tooltip -->
     <div x-show="showTooltip === '{{.id}}'" x-cloak
-        class="absolute left-0 bottom-full mb-2 p-2 bg-gray-100 text-sm rounded shadow-md">
+        class="tooltip">
         {{.tooltip}}
     </div>
 </div>

From 9e24c60fa6c73a0645285f48c86c0a824472beb0 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 17:06:50 +0200
Subject: [PATCH 05/15] Enhance UI and configuration for settings pages

- Added new color definitions for primary content in light and dark themes in tailwind.config.js, improving accessibility and visual clarity.
- Introduced comprehensive styling for the settings page in custom.css, including headers, descriptions, input groups, and buttons, to enhance user experience and consistency.
- Updated tailwind.css to refine color variables and remove unused styles, streamlining the CSS for better maintainability.

This commit focuses on improving the user interface and experience across settings pages, ensuring a cohesive design and better accessibility.
---
 assets/custom.css   | 114 +++++++++++++++++++++++++++++++++++++++++++-
 assets/tailwind.css |  32 +++----------
 tailwind.config.js  |   4 +-
 3 files changed, 122 insertions(+), 28 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index a29fdb97..64b46a2b 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -399,4 +399,116 @@ thead.sticky-header {
 
 .settings-list-item:hover {
   background-color: var(--surface-400);
-}
\ No newline at end of file
+}
+
+/* Settings Page Styling */
+.settings-section-header {
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+.settings-section-description {
+    font-size: 0.875rem;
+    color: rgb(107, 114, 128);
+}
+
+.settings-changed-badge {
+    margin-left: 0.5rem;
+}
+
+.settings-changed-badge span.badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.settings-changed-badge span.badge span {
+    font-size: 0.75rem;
+    margin-bottom: 0.125rem;
+}
+
+.settings-form-group {
+    position: relative;
+    margin-top: 1rem;
+}
+
+.settings-form-group label {
+    display: block;
+    font-size: 0.875rem;
+}
+
+.help-icon {
+    margin-left: 0.5rem;  /* ml-2 */
+    font-size: 0.875rem;  /* text-sm */
+    color: rgb(107, 114, 128);  /* text-gray-500 */
+    cursor: help;
+}
+
+.settings-input-group {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;  /* mt-2 */
+}
+
+.settings-input-group input[type="text"] {
+  flex: 1;  /* w-full */
+  min-width: 0;  /* prevents flex item from overflowing */
+  height: 2rem;  /* input-sm height */
+  padding-left: 0.75rem;  /* input-sm padding */
+  padding-right: 0.75rem;  /* input-sm padding */
+  font-size: 0.875rem;  /* input-sm font size */
+  line-height: 2rem;  /* input-sm line-height */
+  border-radius: var(--rounded-btn, 0.5rem);  /* DaisyUI input border-radius */
+  border: 1px solid var(--fallback-bc,oklch(var(--bc)/0.2));  /* input-bordered */
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));  /* DaisyUI input background */
+}
+
+.settings-input-group input[type="text"]:focus-visible {
+  outline: 1px solid transparent;
+  outline-offset: 0px;
+  box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
+}
+
+.settings-input-group button {
+  flex-shrink: 0;  /* prevent button from shrinking */
+  width: 5rem;  /* w-20 */
+  height: 2rem;  /* btn-sm height */
+  min-height: 2rem;  /* DaisyUI btn-sm min-height */
+  margin-left: 0.5rem;  /* ml-2 */
+  margin-right: 0.5rem;  /* mr-2 */
+  padding-left: 0.75rem;  /* btn-sm padding */
+  padding-right: 0.75rem;  /* btn-sm padding */
+  font-size: 0.875rem;  /* btn-sm font size */
+  line-height: 1.25rem;  /* btn-sm line-height */
+  font-weight: 600;  /* DaisyUI button default */
+  border-radius: var(--rounded-btn, 0.5rem);  /* DaisyUI button border-radius */
+  background-color: var(--fallback-p,oklch(var(--p)/1));  /* btn-primary */
+  color: var(--fallback-pc,oklch(var(--pc)/1));  /* btn-primary text color */
+  border: none;
+  cursor: pointer;
+}
+
+.settings-input-group button:hover {
+  background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);  /* DaisyUI primary button hover */
+}
+
+.settings-modal-section {
+    margin-bottom: 1rem;
+}
+
+.settings-modal-section label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.settings-modal-section input,
+.settings-modal-section select {
+    width: 100%;
+    margin-top: 0.25rem;
+}
+
+.settings-modal-section .help-text {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
diff --git a/assets/tailwind.css b/assets/tailwind.css
index b475a3e3..1e19eb78 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -627,7 +627,6 @@ html {
 :root {
   --p: 54.615% 0.215208 262.880917;
   --bc: 20% 0 0;
-  --pc: 90.923% 0.043042 262.880917;
   --sc: 88.9222% 0.005262 256.801751;
   --ac: 11.7523% 0.027774 241.966052;
   --nc: 85.5616% 0.005919 256.847952;
@@ -638,6 +637,7 @@ html {
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+  --pc: 100% 0 0;
   --s: 44.6112% 0.026312 256.801751;
   --a: 58.7617% 0.138868 241.966052;
   --n: 27.8078% 0.029596 256.847952;
@@ -669,7 +669,6 @@ html {
   :root {
     --p: 62.3083% 0.188015 259.814527;
     --bc: 85.5616% 0.005919 256.847952;
-    --pc: 12.4617% 0.037603 259.814527;
     --sc: 91.0204% 0.004672 264.363742;
     --ac: 89.9996% 0.023858 242.74902;
     --nc: 17.4336% 0.001868 258.338227;
@@ -680,6 +679,7 @@ html {
     --btn-focus-scale: 0.95;
     --tab-border: 1px;
     --tab-radius: 0.5rem;
+    --pc: 0% 0 0;
     --s: 55.1019% 0.023361 264.363742;
     --a: 49.9982% 0.11929 242.74902;
     --n: 87.1681% 0.009339 258.338227;
@@ -711,7 +711,6 @@ html {
 [data-theme=light] {
   --p: 54.615% 0.215208 262.880917;
   --bc: 20% 0 0;
-  --pc: 90.923% 0.043042 262.880917;
   --sc: 88.9222% 0.005262 256.801751;
   --ac: 11.7523% 0.027774 241.966052;
   --nc: 85.5616% 0.005919 256.847952;
@@ -722,6 +721,7 @@ html {
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+  --pc: 100% 0 0;
   --s: 44.6112% 0.026312 256.801751;
   --a: 58.7617% 0.138868 241.966052;
   --n: 27.8078% 0.029596 256.847952;
@@ -752,7 +752,6 @@ html {
 :root:has(input.theme-controller[value=light]:checked) {
   --p: 54.615% 0.215208 262.880917;
   --bc: 20% 0 0;
-  --pc: 90.923% 0.043042 262.880917;
   --sc: 88.9222% 0.005262 256.801751;
   --ac: 11.7523% 0.027774 241.966052;
   --nc: 85.5616% 0.005919 256.847952;
@@ -763,6 +762,7 @@ html {
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+  --pc: 100% 0 0;
   --s: 44.6112% 0.026312 256.801751;
   --a: 58.7617% 0.138868 241.966052;
   --n: 27.8078% 0.029596 256.847952;
@@ -793,7 +793,6 @@ html {
 [data-theme=dark] {
   --p: 62.3083% 0.188015 259.814527;
   --bc: 85.5616% 0.005919 256.847952;
-  --pc: 12.4617% 0.037603 259.814527;
   --sc: 91.0204% 0.004672 264.363742;
   --ac: 89.9996% 0.023858 242.74902;
   --nc: 17.4336% 0.001868 258.338227;
@@ -804,6 +803,7 @@ html {
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+  --pc: 0% 0 0;
   --s: 55.1019% 0.023361 264.363742;
   --a: 49.9982% 0.11929 242.74902;
   --n: 87.1681% 0.009339 258.338227;
@@ -834,7 +834,6 @@ html {
 :root:has(input.theme-controller[value=dark]:checked) {
   --p: 62.3083% 0.188015 259.814527;
   --bc: 85.5616% 0.005919 256.847952;
-  --pc: 12.4617% 0.037603 259.814527;
   --sc: 91.0204% 0.004672 264.363742;
   --ac: 89.9996% 0.023858 242.74902;
   --nc: 17.4336% 0.001868 258.338227;
@@ -845,6 +844,7 @@ html {
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+  --pc: 0% 0 0;
   --s: 55.1019% 0.023361 264.363742;
   --a: 49.9982% 0.11929 242.74902;
   --n: 87.1681% 0.009339 258.338227;
@@ -4135,18 +4135,10 @@ html:has(.drawer-toggle:checked) {
   grid-column: span 12 / span 12;
 }
 
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
 
-.col-span-full {
-  grid-column: 1 / -1;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -4206,10 +4198,6 @@ html:has(.drawer-toggle:checked) {
   margin-top: 0.125rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -4355,10 +4343,6 @@ html:has(.drawer-toggle:checked) {
   width: 16rem;
 }
 
-.w-96 {
-  width: 24rem;
-}
-
 .w-auto {
   width: auto;
 }
@@ -4445,10 +4429,6 @@ html:has(.drawer-toggle:checked) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-help {
-  cursor: help;
-}
-
 .cursor-not-allowed {
   cursor: not-allowed;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index e3eac543..aa08ab2f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
       {
         light: {
           "primary": "#2563eb",          // Blue for primary actions
+          "primary-content": "#ffffff",  // Pure white text for primary buttons
           "secondary": "#4b5563",        // Gray for secondary elements
           "accent": "#0284c7",           // Sky blue for accents
           "neutral": "#1f2937",          // Dark gray for neutral text
@@ -63,6 +64,7 @@ module.exports = {
         },
         dark: {
           "primary": "#3b82f6",          // Bright blue for primary actions
+          "primary-content": "#000000",  // Pure white text for primary buttons
           "secondary": "#6b7280",        // Medium gray for secondary elements
           "accent": "#0369a1",           // Darker sky blue for accents
           "neutral": "#d1d5db",          // Light gray for neutral text
@@ -77,7 +79,7 @@ module.exports = {
           "--border-100": "#334155",      // Primary border color
           "--border-200": "#475569",      // Secondary border color
           "--hover-overlay": "rgba(255,255,255,0.05)",  // Hover state overlay
-          
+
           "info": "#0284c7",             // Info blue
           "success": "#16a34a",          // Success green
           "warning": "#d97706",          // Warning yellow

From ccd12ddc5a45ffc28b96c6f71c3605492b7f0481 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 17:25:18 +0200
Subject: [PATCH 06/15] Update species settings UI for improved layout and
 spacing

- Adjusted padding in the species settings list items to enhance visual clarity and user experience.
- Increased the horizontal padding of the threshold display to provide a more balanced appearance in the settings interface.

This commit focuses on refining the user interface of the species settings page, ensuring a more consistent and user-friendly layout.
---
 views/settings/speciesSettings.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 75b86532..c6c62266 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -327,7 +327,7 @@
                 <template x-for="(config, species) in speciesSettings.Config" :key="species">
                     <div class="settings-list-item">
                         <div class="flex-grow text-sm pl-2" x-text="species"></div>
-                        <div class="w-24 text-sm px-3" x-text="config.Threshold.toFixed(2)"></div>
+                        <div class="w-24 text-sm px-6" x-text="config.Threshold.toFixed(2)"></div>
                         <div class="w-20 text-center">
                             <button type="button" 
                                     @click.prevent="openActionsModal(species)" 

From 872ce03234eab99d6557563e9fbe19552567d549 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 17:25:24 +0200
Subject: [PATCH 07/15] Enhance privacy and dog bark filter settings UI

- Added new sections for enabling privacy filtering and configuring confidence thresholds for human voice detection.
- Improved tooltip handling and labeling for clarity in privacy and dog bark filter settings.
- Updated HTML structure for better maintainability and consistency across the settings interface.
- Enhanced user experience with clearer descriptions and improved layout for filter settings.
---
 views/settings/filtersSettings.html | 30 ++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
index 0e081b30..702943a0 100644
--- a/views/settings/filtersSettings.html
+++ b/views/settings/filtersSettings.html
@@ -40,29 +40,34 @@
         <!-- Privacy Filter Settings -->
         <div class="text-lg font-medium pb-2">Privacy</div>
 
+        <!-- Privacy Filter Enabled -->
         <div class="form-control relative">
             <label class="label justify-start" for="privacyFilterEnabled">
                 <input type="checkbox" id="privacyFilterEnabled" name="realtime.privacyfilter.enabled" x-model="privacyFilter.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
                 <input type="hidden" name="realtime.privacyfilter.enabled" value="false">
                 <span class="label-text">Enable Privacy Filtering</span>
-                <span class="help-" @mouseenter="showTooltip = 'privacyFilter'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" @mouseenter="showTooltip = 'privacyFilter'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <div x-show="showTooltip === 'privacyFilter'" x-cloak class="tooltip">
                 Enables detection of human voices, if detected discards bird detection to protect privacy
             </div>
         </div>
 
+        <!-- Privacy Filter Settings -->
         <div x-show="privacyFilter.enabled" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            
+            <!-- Privacy Filter Confidence -->
             <div class="form-control relative">
                 <label class="label justify-start" for="privacyFilterConfidence">
                     <span class="label-text">Confidence Threshold for Human Detection</span>
-                    <span class="help-" @mouseenter="showTooltip = 'privacyConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'privacyConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="privacyFilterConfidence" name="realtime.privacyFilter.confidence" x-model="privacyFilter.confidence" step="0.01" min="0" max="1" class="input input-bordered input-sm w-full mb-4">
                 <div x-show="showTooltip === 'privacyConfidence'" x-cloak class="tooltip">
                     Set the confidence level for human voice detection, lower value makes filter more sensitive
                 </div>
             </div>
+
         </div>
 
     </div>
@@ -164,13 +169,13 @@
         </div>
 
         <!-- Dog Bark Filter Settings -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6" x-show="dogBarkFilter.enabled">
+        <div x-show="dogBarkFilter.enabled" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+            <!-- Dog Bark Filter Confidence Threshold -->
             <div class="form-control relative">
-                <label class="label-text">
-                    Confidence Threshold
-                    <span class="help-icon"
-                          @mouseenter="showTooltip = 'dogBarkConfidence'"
-                          @mouseleave="showTooltip = null">ⓘ</span>
+                <label class="label justify-start" for="dogBarkFilterConfidence">
+                    <span class="label-text">Confidence Threshold</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'dogBarkConfidence'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" id="dogBarkFilterConfidence" name="realtime.dogbarkfilter.confidence"
                        x-model="dogBarkFilter.confidence" step="0.01" min="0" max="1" class="input input-bordered input-sm w-full">
@@ -181,17 +186,16 @@
 
             <!-- Dog Bark Expire Time (Minutes) -->
             <div class="form-control relative">
-                <label class="label-text">
-                    Dog Bark Expire Time (Minutes)
-                    <span class="help-"
-                          @mouseenter="showTooltip = 'dogBarkExpire'"
-                          @mouseleave="showTooltip = null">ⓘ</span>
+                <label class="label justify-start" for="dogBarkFilterRemember">
+                    <span class="label-text">Dog Bark Expire Time (Minutes)</span>
+                    <span class="help-icon" @mouseenter="showTooltip = 'dogBarkExpire'" @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="number" x-model="dogBarkFilter.remember" min="0" class="input input-bordered input-sm w-full" />
                 <div x-show="showTooltip === 'dogBarkExpire'" x-cloak class="tooltip">
                     Set how long to remember a detected dog bark
                 </div>
             </div>
+            
         </div>
 
         <!-- Dog Bark Species List -->

From eb84b0583baabe388e099e89bb9676f36f0a9870 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 17:45:24 +0200
Subject: [PATCH 08/15] fix: improve theme selection code to avoid page flashes
 in dark mode

---
 assets/custom.css                   |  5 +++++
 views/elements/header.html          |  2 +-
 views/index.html                    | 23 ++++++++++++-----------
 views/settings/filtersSettings.html |  2 +-
 views/settings/speciesSettings.html | 11 +++++++----
 5 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 64b46a2b..2f94c122 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -512,3 +512,8 @@ thead.sticky-header {
     font-size: 0.875rem;
     margin-top: 0.25rem;
 }
+
+/* Theme toggle */
+.swap-rotate {
+    transition: transform 0.2s ease-in-out;
+}
diff --git a/views/elements/header.html b/views/elements/header.html
index 5ae65432..8f27281b 100644
--- a/views/elements/header.html
+++ b/views/elements/header.html
@@ -97,7 +97,7 @@
 		<!-- Theme toggle using daisyUI -->
 		<div class="relative group hidden md:block">
 			<label class="swap swap-rotate btn btn-ghost btn-sm p-1">
-				<input type="checkbox" class="theme-controller" value="dark" />
+				<input type="checkbox" class="theme-controller" value="dark" :checked="document.documentElement.getAttribute('data-theme-controller') === 'dark'" />
 				<svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
 				<svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
 			</label>
diff --git a/views/index.html b/views/index.html
index 3eb44ac7..4a7f7533 100644
--- a/views/index.html
+++ b/views/index.html
@@ -6,6 +6,17 @@
 <head>
 	<meta charset="utf-8" />
 	<title>BirdNET-Go {{ .Title }}</title>
+	<script>
+		// Immediately set the theme before any content loads
+		if (localStorage.getItem('theme') === 'dark') {
+			document.documentElement.setAttribute('data-theme', 'dark');
+			// Pre-set the checkbox state
+			document.documentElement.setAttribute('data-theme-controller', 'dark');
+		} else {
+			document.documentElement.setAttribute('data-theme', 'light');
+			document.documentElement.setAttribute('data-theme-controller', 'light');
+		}
+	</script>
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 	<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
@@ -76,6 +87,7 @@
 		function setTheme(themeName) {
 			localStorage.setItem('theme', themeName);
 			document.documentElement.setAttribute('data-theme', themeName);
+			document.documentElement.setAttribute('data-theme-controller', themeName);
 		}
 
 		// Function to toggle theme
@@ -87,17 +99,6 @@
 			}
 		}
 
-		// Immediately invoked function to set the theme on initial load
-		(function () {
-			if (localStorage.getItem('theme') === 'dark') {
-				setTheme('dark');
-				document.querySelector('.theme-controller').checked = true;
-			} else {
-				setTheme('light');
-				document.querySelector('.theme-controller').checked = false;
-			}
-		})();
-
 		// Event listener for theme toggle
 		document.querySelector('.theme-controller').addEventListener('change', function () {
 			toggleTheme();
diff --git a/views/settings/filtersSettings.html b/views/settings/filtersSettings.html
index 702943a0..79118a66 100644
--- a/views/settings/filtersSettings.html
+++ b/views/settings/filtersSettings.html
@@ -195,7 +195,7 @@
                     Set how long to remember a detected dog bark
                 </div>
             </div>
-            
+
         </div>
 
         <!-- Dog Bark Species List -->
diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index c6c62266..8d799060 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -5,7 +5,7 @@
 
 <!-- First div - Include Species -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
-x-data="{ 
+x-data="{
     speciesSettings: {
         Include: {{if .Settings.Realtime.Species.Include}}{{.Settings.Realtime.Species.Include | toJSON}}{{else}}[]{{end}},
     },
@@ -48,7 +48,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -142,7 +143,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
@@ -301,7 +303,8 @@
             .slice(0, 5);
     },
 }" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true });">
+x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+x-cloak>
     <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">

From 891641e6ab524f2a7b8a692f96b2839dbd533e22 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 18:05:10 +0200
Subject: [PATCH 09/15] Enhance Tailwind CSS configuration with new color
 definitions

- Added "error-content" color for improved accessibility in light and dark themes.
- Updated "primary-content" color in dark mode for better visual contrast.

This commit focuses on refining the color palette in the Tailwind CSS configuration to enhance user experience and accessibility across the application.
---
 tailwind.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index aa08ab2f..64abde1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,6 +50,7 @@ module.exports = {
           "success": "#22c55e",          // Success green
           "warning": "#f59e0b",          // Warning yellow
           "error": "#ef4444",            // Error red
+          "error-content": "#ffffff",    // White text for error buttons
           
           "--rounded-box": "0.5rem",     // Border radius for cards
           "--rounded-btn": "0.3rem",     // Border radius for buttons
@@ -64,7 +65,7 @@ module.exports = {
         },
         dark: {
           "primary": "#3b82f6",          // Bright blue for primary actions
-          "primary-content": "#000000",  // Pure white text for primary buttons
+          "primary-content": "#020617",  // Pure white text for primary buttons
           "secondary": "#6b7280",        // Medium gray for secondary elements
           "accent": "#0369a1",           // Darker sky blue for accents
           "neutral": "#d1d5db",          // Light gray for neutral text
@@ -84,6 +85,7 @@ module.exports = {
           "success": "#16a34a",          // Success green
           "warning": "#d97706",          // Warning yellow
           "error": "#dc2626",            // Error red
+          "error-content": "#020617",    // White text for error buttons
           
           "--rounded-box": "0.5rem",     // Border radius for cards
           "--rounded-btn": "0.3rem",     // Border radius for buttons

From f5a7b284964722513c4576634d42f29122142c08 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 18:26:43 +0200
Subject: [PATCH 10/15] Enhance accessibility and usability across UI
 components

- Added ARIA roles and labels to improve screen reader support in header, sidebar, and settings pages.
- Updated HTML structure for better semantic meaning and accessibility, including roles for navigation and regions.
- Enhanced tooltip handling with ARIA attributes for improved user guidance.
- Streamlined input elements with appropriate labels and descriptions for clarity.
- Improved layout and spacing in various settings pages to enhance user experience.

This commit focuses on refining the user interface and accessibility features across the application, ensuring a more inclusive experience for all users.
---
 views/elements/header.html              |  82 ++--
 views/elements/sidebar.html             | 107 ++---
 views/settings/audioSettings.html       |  51 ++-
 views/settings/integrationSettings.html |  43 +-
 views/settings/mainSettings.html        | 156 +++++--
 views/settings/settingsBase.html        |  37 +-
 views/settings/speciesSettings.html     | 583 +++++++++++++-----------
 7 files changed, 625 insertions(+), 434 deletions(-)

diff --git a/views/elements/header.html b/views/elements/header.html
index 8f27281b..b4d3a3da 100644
--- a/views/elements/header.html
+++ b/views/elements/header.html
@@ -1,21 +1,22 @@
 {{define "header"}}
-<header class="col-span-12 flex items-center justify-between gap-2 p-1 sm:gap-4 sm:p-2 lg:p-4">
+<header class="col-span-12 flex items-center justify-between gap-2 p-1 sm:gap-4 sm:p-2 lg:p-4" role="banner">
 
     <!-- Sidebar toggle button -->
-    <label for="my-drawer" class="btn btn-ghost btn-sm p-0 sm:p-1 drawer-button lg:hidden">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <label for="my-drawer" class="btn btn-ghost btn-sm p-0 sm:p-1 drawer-button lg:hidden" aria-label="Toggle sidebar menu">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
         </svg>
     </label>
 
-    <div class="text-base sm:text-xl lg:text-2xl font-bold">{{.Title}}</div>
+    <div class="text-base sm:text-xl lg:text-2xl font-bold" role="heading" aria-level="1">{{.Title}}</div>
     
     <div class="flex-grow flex justify-center relative">
         {{if eq .Title "Dashboard"}}
         <!-- Search input -->
-        <div class="relative w-full md:w-3/4 lg:w-4/5 xl:w-5/6 max-w-4xl mx-auto">
+        <div class="relative w-full md:w-3/4 lg:w-4/5 xl:w-5/6 max-w-4xl mx-auto" role="search">
             <input type="text" 
                 name="search"
+                aria-label="Search detections"
                 placeholder="Search detections"
                 hx-get="/detections?queryType=search"
                 hx-params="search"
@@ -24,7 +25,7 @@
                 hx-swap="innerHTML"
                 hx-push-url="true"
                 class="input input-sm sm:input-md rounded-full focus:outline-none w-full pl-3 sm:pl-4 pr-10 sm:pr-12 font-normal" />
-            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:pr-3 pointer-events-none">
+            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:pr-3 pointer-events-none" aria-hidden="true">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 sm:w-6 sm:h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                 </svg>
@@ -33,10 +34,11 @@
         {{end}}
     </div>
    
-	<div class="flex items-center gap-2">
-
+    <div class="flex items-center gap-2">
         <!-- Microphone input level indicator -->
         <div class="relative w-10 h-10" 
+            role="status"
+            aria-label="Microphone input level"
             x-data="{ 
                 volume: 0, 
                 smoothedVolume: 0,
@@ -54,7 +56,7 @@
                 smoothedVolume = smoothingFactor * volume + (1 - smoothingFactor) * smoothedVolume;
             }
             ">
-            <svg class="w-full h-full" viewBox="0 0 36 36">
+            <svg class="w-full h-full" viewBox="0 0 36 36" aria-hidden="true">
                 <!-- Background circle path -->
                 <path d="M18 2.0845
                             a 15.9155 15.9155 0 0 1 0 31.831
@@ -75,37 +77,47 @@
                     >
                 </path>
             </svg>
-            <div class="absolute inset-0 flex items-center justify-center">
+            <div class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path>
                 </svg>
             </div>
         </div>
 
-		<!-- GitHub repository link -->
-		<div class="relative group hidden md:block">
-			<a href="https://github.com/tphakala/birdnet-go" target="_blank" rel="noopener noreferrer" class="btn btn-ghost btn-sm p-1 flex items-center">
-				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-					<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-				</svg>
-			</a>
-			<div class="invisible group-hover:visible absolute left-1/2 transform -translate-x-1/2 mt-2 w-auto whitespace-nowrap bg-gray-900 text-gray-50 text-sm rounded px-2 py-1 z-50 shadow-md" role="tooltip">
-				GitHub repository
-			</div>
-		</div>
-	
-		<!-- Theme toggle using daisyUI -->
-		<div class="relative group hidden md:block">
-			<label class="swap swap-rotate btn btn-ghost btn-sm p-1">
-				<input type="checkbox" class="theme-controller" value="dark" :checked="document.documentElement.getAttribute('data-theme-controller') === 'dark'" />
-				<svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
-				<svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
-			</label>
-			<div class="invisible group-hover:visible absolute left-1/2 transform -translate-x-1/2 mt-2 w-auto whitespace-nowrap bg-gray-900 text-gray-50 text-sm rounded px-2 py-1 z-50 shadow-md" role="tooltip">
-				Switch theme
-			</div>
-		</div>
-	</div>
-	
+        <!-- GitHub repository link -->
+        <div class="relative group hidden md:block">
+            <a href="https://github.com/tphakala/birdnet-go" 
+               target="_blank" 
+               rel="noopener noreferrer" 
+               class="btn btn-ghost btn-sm p-1 flex items-center"
+               aria-label="View GitHub repository (opens in new tab)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+            </a>
+            <div class="invisible group-hover:visible absolute left-1/2 transform -translate-x-1/2 mt-2 w-auto whitespace-nowrap bg-gray-900 text-gray-50 text-sm rounded px-2 py-1 z-50 shadow-md" role="tooltip" id="github-tooltip">
+                GitHub repository
+            </div>
+        </div>
+    
+        <!-- Theme toggle using daisyUI -->
+        <div class="relative group hidden md:block">
+            <label class="swap swap-rotate btn btn-ghost btn-sm p-1">
+                <input type="checkbox" 
+                       class="theme-controller" 
+                       value="dark" 
+                       :checked="document.documentElement.getAttribute('data-theme-controller') === 'dark'"
+                       aria-label="Toggle dark mode" />
+                <svg class="swap-on fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
+                <svg class="swap-off fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
+            </label>
+            <div class="invisible group-hover:visible absolute left-1/2 transform -translate-x-1/2 mt-2 w-auto whitespace-nowrap bg-gray-900 text-gray-50 text-sm rounded px-2 py-1 z-50 shadow-md" role="tooltip" id="theme-tooltip">
+                Switch theme
+            </div>
+        </div>
+    </div>
+    
 </header>
 {{end}}
\ No newline at end of file
diff --git a/views/elements/sidebar.html b/views/elements/sidebar.html
index b159249c..25243709 100644
--- a/views/elements/sidebar.html
+++ b/views/elements/sidebar.html
@@ -1,5 +1,5 @@
 {{define "sidebar"}}
-<aside class="drawer-side z-10" x-data="{
+<aside class="drawer-side z-10" role="complementary" aria-label="Main navigation" x-data="{
     currentRoute: window.location.pathname,
     isRouteActive(route) {
         return this.currentRoute.startsWith(route);
@@ -12,13 +12,11 @@
         currentRoute = window.location.pathname;
     });
 ">
-    <label for="my-drawer" class="drawer-overlay"></label>
-    <!-- sidebar menu -->
-    <nav
-        class="flex flex-col h-[100dvh] w-64 bg-base-100 absolute inset-y-0 sm:static sm:h-full overflow-y-auto p-4">
+    <label for="my-drawer" class="drawer-overlay" aria-label="Close sidebar"></label>
+    <nav class="flex flex-col h-[100dvh] w-64 bg-base-100 absolute inset-y-0 sm:static sm:h-full overflow-y-auto p-4" role="navigation">
         {{/* Header */}}
         <div class="flex-none p-4">
-            <a href="/" class="flex items-center gap-2 font-black text-2xl">
+            <a href="/" class="flex items-center gap-2 font-black text-2xl" aria-label="BirdNET-Go Home">
                 BirdNET-Go
                 <img src="/assets/images/logo.png" alt="BirdNET-Go Logo" class="absolute h-10 w-10 right-5 mr-2">
             </a>
@@ -26,27 +24,22 @@
 
         {{/* Scrollable menu section */}}
         <div class="flex-1 overflow-y-auto px-4">
-            <ul class="menu menu-md">
-                <li>
-                    <a href="/" :class="['flex items-center gap-2', { 'active': isExactRouteActive('/') }]">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                            <path fill-rule="evenodd"
-                                d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
-                                clip-rule="evenodd" />
+            <ul class="menu menu-md" role="menubar">
+                <li role="none">
+                    <a href="/" :class="['flex items-center gap-2', { 'active': isExactRouteActive('/') }]" role="menuitem">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
                         </svg>
-                        Dashboard
+                        <span>Dashboard</span>
                     </a>
                 </li>
-                {{/* Other menu items */}}
-                <li>
-                    <a href="/stats" :class="{ 'active': isRouteActive('/stats') }">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                            <path
-                                d="M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7.004 7.004 0 0 1 5.933 5.933c.078.547-.378.997-.93.997h-5Z" />
-                            <path
-                                d="M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7.002 7.002 0 0 1 6.003-6.93Z" />
+                <li role="none">
+                    <a href="/stats" :class="{ 'active': isRouteActive('/stats') }" role="menuitem">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" aria-hidden="true">
+                            <path d="M12 9a1 1 0 0 1-1-1V3c0-.552.45-1.007.997-.93a7.004 7.004 0 0 1 5.933 5.933c.078.547-.378.997-.93.997h-5Z" />
+                            <path d="M8.003 4.07C8.55 3.994 9 4.449 9 5v5a1 1 0 0 0 1 1h5c.552 0 1.008.45.93.997A7.001 7.001 0 0 1 2 11a7.002 7.002 0 0 1 6.003-6.93Z" />
                         </svg>
-                        Stats
+                        <span>Stats</span>
                     </a>
                 </li>
 
@@ -60,35 +53,21 @@
             </li>-->
 
                 {{if or (not .Security.Enabled) .Security.AccessAllowed}}
-                <li>
-                    <details :open="isRouteActive('/settings')">
-                        <summary class="flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                                class="w-5 h-5">
-                                <path
-                                    d="M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
+                <li role="none">
+                    <details :open="isRouteActive('/settings')" role="group">
+                        <summary class="flex items-center gap-2" role="menuitem" aria-haspopup="true">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" aria-hidden="true">
+                                <path d="M17 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM17 15.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM3.75 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75ZM4.5 2.75a.75.75 0 0 0-1.5 0v5.5a.75.75 0 0 0 1.5 0v-5.5ZM10 11a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5A.75.75 0 0 1 10 11ZM10.75 2.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0v-1.5ZM10 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3.75 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM16.25 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
                             </svg>
-                            Settings
+                            <span>Settings</span>
                         </summary>
-                        <ul>
-                            <li><a href="/settings/main"
-                                    :class="{ 'active': isExactRouteActive('/settings/main') }">Main</a></li>
-                            <li><a href="/settings/audio"
-                                    :class="{ 'active': isExactRouteActive('/settings/audio') }">Audio
-                                    Capture</a></li>
-                            <li><a href="/settings/detectionfilters"
-                                    :class="{ 'active': isRouteActive('/settings/detectionfilters') }">Detection
-                                    Filters</a>
-                            </li>
-                            <li><a href="/settings/integrations"
-                                    :class="{ 'active': isExactRouteActive('/settings/integrations') }">Integrations</a>
-                            </li>
-                            <li><a href="/settings/security"
-                                    :class="{ 'active': isExactRouteActive('/settings/security') }">Security</a>
-                            </li>
-                            <li><a href="/settings/species"
-                                    :class="{ 'active': isExactRouteActive('/settings/species') }">Species</a>
-                            </li>
+                        <ul role="menu" aria-label="Settings submenu">
+                            <li role="none"><a href="/settings/main" :class="{ 'active': isExactRouteActive('/settings/main') }" role="menuitem">Main</a></li>
+                            <li role="none"><a href="/settings/audio" :class="{ 'active': isExactRouteActive('/settings/audio') }" role="menuitem">Audio Capture</a></li>
+                            <li role="none"><a href="/settings/detectionfilters" :class="{ 'active': isRouteActive('/settings/detectionfilters') }" role="menuitem">Detection Filters</a></li>
+                            <li role="none"><a href="/settings/integrations" :class="{ 'active': isExactRouteActive('/settings/integrations') }" role="menuitem">Integrations</a></li>
+                            <li role="none"><a href="/settings/security" :class="{ 'active': isExactRouteActive('/settings/security') }" role="menuitem">Security</a></li>
+                            <li role="none"><a href="/settings/species" :class="{ 'active': isExactRouteActive('/settings/species') }" role="menuitem">Species</a></li>
                         </ul>
                     </details>
                 </li>
@@ -103,28 +82,28 @@
                 {{if .Security.AccessAllowed}}
                 {{/* Logout section */}}
                 <div class="flex flex-col gap-2">
-                    <button onclick="logout()" class="btn btn-sm justify-center w-full">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="size-6">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                    <button onclick="logout()" class="btn btn-sm justify-center w-full" aria-label="Logout">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                         </svg>
-                        Logout
+                        <span>Logout</span>
                     </button>
                     {{if .Security.IsCloudflare}}
-                    <span class="text-sm italic text-gray-500 text-center">Signed in via Cloudflare</span>
+                    <span class="text-sm italic text-gray-500 text-center" role="status">Signed in via Cloudflare</span>
                     {{end}}
                 </div>
                 {{else}}
                 {{/* Login section */}}
-                <button class="btn btn-sm justify-center w-full" hx-trigger="click" hx-get="/login"
-                    hx-target="#loginModal" onclick="loginModal.showModal()">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" class="size-6">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                <button class="btn btn-sm justify-center w-full" 
+                        hx-trigger="click" 
+                        hx-get="/login" 
+                        hx-target="#loginModal" 
+                        onclick="loginModal.showModal()"
+                        aria-label="Open login modal">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                     </svg>
-                    Login
+                    <span>Login</span>
                 </button>
                 {{end}}
                 {{end}}
diff --git a/views/settings/audioSettings.html b/views/settings/audioSettings.html
index c7612db0..c9c6c8a7 100644
--- a/views/settings/audioSettings.html
+++ b/views/settings/audioSettings.html
@@ -1,11 +1,13 @@
 {{define "audioSettings"}}
 
 <!-- Hidden input to always submit the template name -->
-<input type="hidden" name="templateName" value="{{.TemplateName}}">
+<input type="hidden" name="templateName" value="{{.TemplateName}}" aria-hidden="true">
 
 <!-- Audio Capture Settings start -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3"
-x-data="{ 
+     role="region"
+     aria-labelledby="audioCaptureHeader"
+     x-data="{ 
     audioCapture: {
         source: '{{.Settings.Realtime.Audio.Source}}',
         rtsp: {
@@ -98,13 +100,16 @@
 ">
 
     <!-- control collapse element open state and label visibility -->
-    <input type="checkbox" id="audioCaptureSettingsOpen" x-on:change="audioCaptureSettingsOpen = !audioCaptureSettingsOpen" />
+    <input type="checkbox" 
+           id="audioCaptureSettingsOpen" 
+           aria-controls="audioCaptureContent"
+           x-on:change="audioCaptureSettingsOpen = !audioCaptureSettingsOpen" />
 
-    <div class="collapse-title settings-section-header">
+    <div class="collapse-title settings-section-header" id="audioCaptureHeader">
         <div class="flex items-center">
             <label for="audioCaptureSettingsOpen" class="cursor-pointer">Audio Capture</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
-                <span class="badge">
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge" aria-live="polite">
+                <span class="badge" role="status">
                     <span>changed</span>
                 </span>
             </div>
@@ -112,14 +117,18 @@
         <p class="settings-section-description">Set audio capture source, sound card or RTSP stream</p>
     </div>
 
-    <div class="collapse-content">
+    <div class="collapse-content" id="audioCaptureContent">
 
         <div class="text-lg font-medium pb-2">Sound Card Source</div>
 
         <div class="form-control relative">
             <label class="label justify-start" for="audioSource">
                 <span class="label-text">Audio Source</span>
-                <span class="help-icon" @mouseenter="showTooltip = 'audioSource'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" 
+                      role="button"
+                      aria-label="Show help for audio source"
+                      @mouseenter="showTooltip = 'audioSource'" 
+                      @mouseleave="showTooltip = null">ⓘ</span>
             </label>
             <select x-model="audioCapture.source"
                     name="realtime.audio.source"
@@ -132,7 +141,11 @@
                             x-text="device.Name"></option>
                 </template>
             </select>
-            <div x-show="showTooltip === 'audioSource'" x-cloak class="tooltip">
+            <div x-show="showTooltip === 'audioSource'" 
+                 x-cloak 
+                 class="tooltip" 
+                 role="tooltip"
+                 aria-live="polite">
                 Audio source to use for analysis (e.g., 'sysdefault'). This setting is disabled if RTSP URLs are configured.
             </div>
         </div>
@@ -164,7 +177,7 @@
             <template x-for="(url, index) in audioCapture.rtsp.urls" :key="index">
                 <div class="flex items-center mb-2">
                     <input type="text" :name="'realtime.rtsp.urls[' + index + ']'" x-model="audioCapture.rtsp.urls[index]" class="input input-bordered input-sm w-full mr-2">
-                    <button type="button" @click="removeUrl(index)" class="btn btn-error btn-xs">Remove</button>
+                    <button type="button" @click="removeUrl(index)" class="btn btn-error btn-xs" aria-label="Remove RTSP URL">Remove</button>
                 </div>
             </template>
 
@@ -174,7 +187,7 @@
 
             <!-- Add new RTSP URL button -->
             <div class="settings-input-group">
-                <input type="text" x-model="newUrl" placeholder="Enter RTSP URL (rtsp://user:password@example.com/stream1)">
+                <input type="text" x-model="newUrl" aria-label="New RTSP URL" placeholder="Enter RTSP URL (rtsp://user:password@example.com/stream1)">
                 <button type="button" @click="addUrl">Add</button>
             </div>
 
@@ -327,6 +340,8 @@
 
 <!-- Audio Export Settings start -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3"
+     role="region"
+     aria-labelledby="audioExportHeader"
      x-data="{ 
          audioExport: {
              enabled: {{.Settings.Realtime.Audio.Export.Enabled}},
@@ -350,11 +365,11 @@
          }
      ">
     <input type="checkbox" id="audioExportSettingsOpen" x-on:change="audioExportSettingsOpen = !audioExportSettingsOpen" />
-    <div class="collapse-title settings-section-header">
+    <div class="collapse-title settings-section-header" id="audioExportHeader">
         <div class="flex items-center">
             <label for="audioExportSettingsOpen" class="cursor-pointer">Audio Export</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
-                <span class="badge">
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge" aria-live="polite">
+                <span class="badge" role="status">
                     <span>changed</span>
                 </span>
             </div>
@@ -447,6 +462,8 @@
 
 <!-- Audio Retention Settings start -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3"
+     role="region"
+     aria-labelledby="audioRetentionHeader"
      x-data="{ 
          audioRetention: {
              policy: '{{.Settings.Realtime.Audio.Export.Retention.Policy}}',
@@ -465,11 +482,11 @@
          $watch('audioRetention', (value) => { hasChanges = true }, { deep: true });
      ">
     <input type="checkbox" id="audioRetentionSettingsOpen" x-on:change="audioRetentionSettingsOpen = !audioRetentionSettingsOpen" />
-    <div class="collapse-title settings-section-header">
+    <div class="collapse-title settings-section-header" id="audioRetentionHeader">
         <div class="flex items-center">
             <label for="audioRetentionSettingsOpen" class="cursor-pointer">Audio Clip Retention</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
-                <span class="badge">
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge" aria-live="polite">
+                <span class="badge" role="status">
                     <span>changed</span>
                 </span>
             </div>
diff --git a/views/settings/integrationSettings.html b/views/settings/integrationSettings.html
index 13573525..5823aeb7 100644
--- a/views/settings/integrationSettings.html
+++ b/views/settings/integrationSettings.html
@@ -4,7 +4,10 @@
 <input type="hidden" name="templateName" value="{{.TemplateName}}">
 
 <!-- BirdWeather Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{ 
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+     role="region" 
+     aria-labelledby="birdweatherHeader"
+     x-data="{ 
     birdweather: {
         enabled: {{.Settings.Realtime.Birdweather.Enabled}},
         debug: {{.Settings.Realtime.Birdweather.Debug}},
@@ -29,16 +32,16 @@
     <input type="checkbox" id="birdweatherSettingsOpen"
         x-on:change="birdweatherSettingsOpen = !birdweatherSettingsOpen" />
 
-    <div class="collapse-title settings-section-header">
+    <div class="collapse-title settings-section-header" id="birdweatherHeader">
         <div class="flex items-center">
-            <label for="mainSettingsOpen" class="cursor-pointer">BirdWeather</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+            <label for="birdweatherSettingsOpen" class="cursor-pointer" aria-label="BirdWeather Settings">BirdWeather</label>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge" role="status" aria-label="Settings changed">
                 <span class="badge">
                     <span>changed</span>
                 </span>
             </div>
         </div>
-        <p class="settings-section-description">Upload detections to BirdWeather</p>
+        <p class="settings-section-description" id="birdweatherDescription">Upload detections to BirdWeather</p>
     </div>
 
     <!-- disabled for now
@@ -48,17 +51,22 @@
         </label>
     </div>-->
 
-    <div class="collapse-content">
+    <div class="collapse-content" role="group" aria-labelledby="birdweatherDescription">
         <div class="form-control relative">
             <label class="label cursor-pointer justify-start" for="birdweatherEnabled">
                 <input type="checkbox" id="birdweatherEnabled" name="realtime.birdweather.enabled"
-                    x-model="birdweather.enabled" class="checkbox checkbox-primary checkbox-xs mr-2">
+                    x-model="birdweather.enabled" class="checkbox checkbox-primary checkbox-xs mr-2"
+                    aria-describedby="birdweatherEnabledTooltip">
                 <input type="hidden" name="realtime.birdweather.enabled" value="false">
                 <span class="label-text">Enable BirdWeather Uploads</span>
-                <span class="help-icon" @mouseenter="showTooltip = 'birdweatherEnabled'"
-                    @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" 
+                    @mouseenter="showTooltip = 'birdweatherEnabled'" 
+                    @mouseleave="showTooltip = null"
+                    role="button"
+                    aria-label="Show help"
+                    tabindex="0">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'birdweatherEnabled'" x-cloak class="tooltip">
+            <div x-show="showTooltip === 'birdweatherEnabled'" x-cloak class="tooltip" id="birdweatherEnabledTooltip" role="tooltip">
                 Enable or disable uploads to BirdWeather service.
             </div>
         </div>
@@ -109,7 +117,10 @@
 <!-- BirdWeather Settings end -->
 
 <!-- MQTT Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{ 
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+     role="region" 
+     aria-labelledby="mqttHeader"
+     x-data="{ 
     mqtt: {
         enabled: {{.Settings.Realtime.MQTT.Enabled}},
         broker: '{{.Settings.Realtime.MQTT.Broker}}',
@@ -130,16 +141,16 @@
     <!-- control collapse element open state and label visibility -->
     <input type="checkbox" id="mqttSettingsOpen" x-on:change="mqttSettingsOpen = !mqttSettingsOpen" />
 
-    <div class="collapse-title settings-section-header">
+    <div class="collapse-title settings-section-header" id="mqttHeader">
         <div class="flex items-center">
-            <label for="mqttSettingsOpen" class="cursor-pointer">MQTT</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+            <label for="mqttSettingsOpen" class="cursor-pointer" aria-label="MQTT Settings">MQTT</label>
+            <div x-show="hasChanges" x-cloak class="settings-changed-badge" role="status" aria-label="Settings changed">
                 <span class="badge">
                     <span>changed</span>
                 </span>
             </div>
         </div>
-        <p class="settings-section-description">Configure MQTT broker connection</p>
+        <p class="settings-section-description" id="mqttDescription">Configure MQTT broker connection</p>
     </div>
 
     <!-- disabled for now
@@ -149,7 +160,7 @@
         </label>
     </div>-->
 
-    <div class="collapse-content">
+    <div class="collapse-content" role="group" aria-labelledby="mqttDescription">
         <div class="form-control relative">
             <label class="label cursor-pointer justify-start" for="mqttEnabled">
                 <input type="checkbox" id="mqttEnabled" name="realtime.mqtt.enabled" x-model="mqtt.enabled"
diff --git a/views/settings/mainSettings.html b/views/settings/mainSettings.html
index d3eb1fa0..895d93d3 100644
--- a/views/settings/mainSettings.html
+++ b/views/settings/mainSettings.html
@@ -4,7 +4,10 @@
 <input type="hidden" name="templateName" value="{{.TemplateName}}">
 
 <!-- Node Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+    role="region" 
+    aria-label="Node Settings Section"
+    x-data="{
     debug: {{.Settings.Debug}},
     main: {
         name: '{{.Settings.Main.Name}}',
@@ -25,7 +28,9 @@
 ">
 
     <!-- control collapse element open state and label visibility -->
-    <input type="checkbox" id="mainSettingsOpen" x-on:change="mainSettingsOpen = ! mainSettingsOpen" />
+    <input type="checkbox" id="mainSettingsOpen" 
+        x-on:change="mainSettingsOpen = ! mainSettingsOpen"
+        aria-expanded="true" />
 
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -45,12 +50,20 @@
             <div class="form-control relative">
                 <label class="label justify-start" for="nodeName">
                     <span class="label-text">Node Name</span>
-                    <span class="help-icon" @mouseenter="showTooltip = 'nodeName'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" 
+                        role="button"
+                        aria-label="Show help text for node name"
+                        @mouseenter="showTooltip = 'nodeName'" 
+                        @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
                 <input type="text" id="nodeName" name="main.name" x-model="main.name"
                     class="input input-sm input-bordered" placeholder="Enter node name">
                 <!-- Node Name tooltip -->
-                <div x-show="showTooltip === 'nodeName'" x-cloak class="tooltip">
+                <div x-show="showTooltip === 'nodeName'" 
+                    x-cloak 
+                    class="tooltip"
+                    role="tooltip"
+                    aria-live="polite">
                     Node name is used to identify source system in multi node setup, also used as identifier for MQTT messages.
                 </div>
             </div>
@@ -138,7 +151,10 @@
 </div>
 
 <!-- BirdNET Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{ 
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+    role="region" 
+    aria-label="BirdNET Settings Section"
+    x-data="{ 
     birdnet: {
         sensitivity: {{.Settings.BirdNET.Sensitivity}},
         threshold: {{.Settings.BirdNET.Threshold}},
@@ -171,7 +187,9 @@
 ">
 
     <!-- control collapse element open state and label visibility -->
-    <input type="checkbox" id="birdnetSettingsOpen" x-on:change="birdnetSettingsOpen = ! birdnetSettingsOpen" />
+    <input type="checkbox" id="birdnetSettingsOpen" 
+        x-on:change="birdnetSettingsOpen = ! birdnetSettingsOpen"
+        aria-expanded="true" />
 
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -190,14 +208,27 @@
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
             <div class="form-control relative">
-                <label class="label justify-start" for="birdnetSensitivity">
+                <label class="label justify-start" for="birdnetSensitivity" id="sensitivityLabel">
                     <span class="label-text">Sensitivity</span>
-                    <span class="help-icon" @mouseenter="showTooltip = 'sensitivity'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" 
+                        role="button"
+                        aria-label="Show help text for sensitivity setting"
+                        @mouseenter="showTooltip = 'sensitivity'" 
+                        @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <input type="number" id="birdnetSensitivity" name="birdnet.sensitivity" x-model="birdnet.sensitivity"
-                    step="0.1" min="0.1" max="1.5" class="input input-bordered input-sm w-full">
-                <!-- BirdNET Settings tooltips -->
-                <div x-show="showTooltip === 'sensitivity'" x-cloak class="tooltip">
+                <input type="number" 
+                    id="birdnetSensitivity" 
+                    name="birdnet.sensitivity" 
+                    x-model="birdnet.sensitivity"
+                    aria-labelledby="sensitivityLabel"
+                    aria-describedby="sensitivityTooltip"
+                    class="input input-bordered input-sm w-full">
+                <div x-show="showTooltip === 'sensitivity'" 
+                    id="sensitivityTooltip"
+                    x-cloak 
+                    class="tooltip"
+                    role="tooltip"
+                    aria-live="polite">
                     Detection sensitivity. Higher values result in higher sensitivity. Values in 0.5, 1.5.
                 </div>
             </div>
@@ -366,7 +397,15 @@
                 <div x-show="showTooltip === 'locationMap'" x-cloak class="tooltip">
                     Station location, used to limit bird species to those propable in the region.
                 </div>
-                <div id="locationMap" style="height: 300px;"></div>
+                <div id="locationMap" 
+                    role="application"
+                    aria-label="Map for selecting station location"
+                    style="height: 300px;">
+                    <!-- Add screen reader instructions -->
+                    <span class="sr-only">
+                        Use arrow keys to navigate map. Press Enter to set location.
+                    </span>
+                </div>
             </div>
 
             <!-- Range Filter Settings -->
@@ -488,7 +527,10 @@
 </script>
 
 <!-- Database Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{ 
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+    role="region" 
+    aria-label="Database Settings Section"
+    x-data="{ 
     outputType: '{{if .Settings.Output.SQLite.Enabled}}sqlite{{else}}mysql{{end}}',
     sqlite: {
         path: '{{.Settings.Output.SQLite.Path}}'
@@ -510,7 +552,9 @@
     $watch('mysql', () => hasChanges = true, { deep: true });
 ">
     <!-- control collapse element open state and label visibility -->
-    <input type="checkbox" id="outputSettingsOpen" x-on:change="outputSettingsOpen = !outputSettingsOpen" />
+    <input type="checkbox" id="outputSettingsOpen" 
+        x-on:change="outputSettingsOpen = !outputSettingsOpen"
+        aria-expanded="true" />
 
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -528,16 +572,31 @@
 
         <!-- Database Type -->
         <div class="settings-form-group">
-            <label class="justify-start" for="databaseType">
+            <label class="justify-start" 
+                for="databaseType" 
+                id="databaseTypeLabel">
                 <span class="label-text">Select Database Type</span>
-                <span class="help-icon" @mouseenter="showTooltip = 'databaseType'" @mouseleave="showTooltip = null">ⓘ</span>
+                <span class="help-icon" 
+                    role="button"
+                    aria-label="Show help text for database type"
+                    @mouseenter="showTooltip = 'databaseType'" 
+                    @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <select id="databaseType" x-model="outputType" name="output.type"
+            <select id="databaseType" 
+                x-model="outputType" 
+                name="output.type"
+                aria-labelledby="databaseTypeLabel"
+                aria-describedby="databaseTypeTooltip"
                 class="select select-sm select-bordered w-full">
                 <option value="sqlite">SQLite</option>
                 <option value="mysql">MySQL</option>
             </select>
-            <div x-show="showTooltip === 'databaseType'" x-cloak class="tooltip">
+            <div x-show="showTooltip === 'databaseType'" 
+                id="databaseTypeTooltip"
+                x-cloak 
+                class="tooltip"
+                role="tooltip"
+                aria-live="polite">
                 Database type for storing detections: SQLite or MySQL
             </div>
         </div>
@@ -611,7 +670,9 @@
                     <input :type="showPassword ? 'text' : 'password'" id="mysqlOutputPassword" x-model="mysql.password"
                         name="output.mysql.password" class="input input-sm input-bordered w-full"
                         placeholder="Enter MySQL password">
-                    <button type="button" @click="showPassword = !showPassword"
+                    <button type="button" 
+                        @click="showPassword = !showPassword"
+                        aria-label="Toggle password visibility"
                         class="absolute inset-y-0 right-0 pr-3 flex items-center">
                         <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400"
                             viewBox="0 0 20 20" fill="currentColor" role="img" aria-label="Show password">
@@ -655,7 +716,10 @@
 </div>
 
 <!-- User Interface Settings start -->
-<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" x-data="{ 
+<div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
+    role="region" 
+    aria-label="User Interface Settings Section"
+    x-data="{ 
     dashboard: {
         thumbnails: {
             summary: {{.Settings.Realtime.Dashboard.Thumbnails.Summary}},
@@ -673,7 +737,9 @@
 ">
 
     <!-- control collapse element open state and label visibility -->
-    <input type="checkbox" id="uiSettingsOpen" x-on:change="uiSettingsOpen = !uiSettingsOpen" />
+    <input type="checkbox" id="uiSettingsOpen" 
+        x-on:change="uiSettingsOpen = !uiSettingsOpen"
+        aria-expanded="true" />
 
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
@@ -695,14 +761,31 @@
 
             <!-- Daily Summary Species Limit -->
             <div class="settings-form-group">
-                <label class="justify-start" for="dashboardSummaryLimit">
+                <label class="justify-start" 
+                    for="dashboardSummaryLimit" 
+                    id="summaryLimitLabel">
                     <span class="label-text">Max Number of Species on Daily Summary Table</span>
-                    <span class="help-icon" @mouseenter="showTooltip = 'dashboardSummaryLimit'" @mouseleave="showTooltip = null">ⓘ</span>
+                    <span class="help-icon" 
+                        role="button"
+                        aria-label="Show help text for summary limit"
+                        @mouseenter="showTooltip = 'dashboardSummaryLimit'" 
+                        @mouseleave="showTooltip = null">ⓘ</span>
                 </label>
-                <input type="number" id="dashboardSummaryLimit" name="realtime.dashboard.summarylimit"
-                    x-model="dashboard.summarylimit" class="input input-sm input-bordered w-full"
-                    placeholder="Enter limit" min="10" max="1000">
-                <div x-show="showTooltip === 'dashboardSummaryLimit'" x-cloak class="tooltip">
+                <input type="number" 
+                    id="dashboardSummaryLimit" 
+                    name="realtime.dashboard.summarylimit"
+                    x-model="dashboard.summarylimit" 
+                    aria-labelledby="summaryLimitLabel"
+                    aria-describedby="summaryLimitTooltip"
+                    class="input input-sm input-bordered w-full"
+                    min="10" 
+                    max="1000">
+                <div x-show="showTooltip === 'dashboardSummaryLimit'" 
+                    id="summaryLimitTooltip"
+                    x-cloak 
+                    class="tooltip"
+                    role="tooltip"
+                    aria-live="polite">
                     Max number of species shown in the daily summary table (Value between 10 and 1000)
                 </div>
             </div>
@@ -711,16 +794,17 @@
 
         <!-- Daily Summary Thumbnails -->
         <div class="form-control relative">
-            <label class="label cursor-pointer justify-start" for="dashboardThumbnailsSummary">
-                <input type="checkbox" id="dashboardThumbnailsSummary" name="realtime.dashboard.thumbnails.summary"
-                    x-model="dashboard.thumbnails.summary" class="checkbox checkbox-primary checkbox-xs mr-2">
-                <input type="hidden" name="realtime.dashboard.thumbnails.summary" value="false">
+            <label class="label cursor-pointer justify-start" 
+                for="dashboardThumbnailsSummary"
+                id="thumbnailsSummaryLabel">
+                <input type="checkbox" 
+                    id="dashboardThumbnailsSummary" 
+                    name="realtime.dashboard.thumbnails.summary"
+                    x-model="dashboard.thumbnails.summary" 
+                    aria-labelledby="thumbnailsSummaryLabel"
+                    class="checkbox checkbox-primary checkbox-xs mr-2">
                 <span class="label-text">Show Thumbnails on Daily Summary table</span>
-                <span class="help-icon" @mouseenter="showTooltip = 'dashboardThumbnailsSummary'" @mouseleave="showTooltip = null">ⓘ</span>
             </label>
-            <div x-show="showTooltip === 'dashboardThumbnailsSummary'" x-cloak class="tooltip">
-                Enable to show thumbnails of detected species on the daily summary table
-            </div>
         </div>
 
         <!-- Recent Detections Thumbnails -->
diff --git a/views/settings/settingsBase.html b/views/settings/settingsBase.html
index c836b8c3..ca68e667 100644
--- a/views/settings/settingsBase.html
+++ b/views/settings/settingsBase.html
@@ -204,17 +204,23 @@
         });
     }
 }" x-init="init()" x-bind:class="$store.pageLoaded.loaded ? 'page-loaded' : ''">
-    <form id="settingsForm" @submit.prevent="saveSettings()">
+    <form id="settingsForm" @submit.prevent="saveSettings()" aria-label="Settings Form">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
             <!-- Settings content rendered here -->
             {{renderSettingsContent .C}}
         </div>
-        <button @click.prevent="saveSettings()" class="btn btn-primary mt-6" :disabled="saving">
+        <button @click.prevent="saveSettings()" 
+                class="btn btn-primary mt-6" 
+                :disabled="saving"
+                aria-busy="saving"
+                :aria-label="saving ? 'Saving changes...' : 'Save Changes'">
             Save Changes
         </button>
     </form>
 
-    <div class="fixed bottom-5 right-5 z-50 flex flex-col space-y-2">
+    <div class="fixed bottom-5 right-5 z-50 flex flex-col space-y-2" 
+         role="alert" 
+         aria-live="polite">
         <template x-for="notification in notifications" :key="notification.id">
             <div x-show="!notification.removing" 
                  x-transition:enter="transition ease-out duration-300"
@@ -228,20 +234,37 @@
                     'alert-error': notification.type === 'error',
                     'alert-info': notification.type === 'info'
                  }" 
-                 class="alert shadow-lg">
+                 class="alert shadow-lg"
+                 :role="notification.type === 'error' ? 'alert' : 'status'"
+                 :aria-label="notification.type.charAt(0).toUpperCase() + notification.type.slice(1) + ' notification'">
                 <div class="flex items-start">
                     <template x-if="notification.type === 'success'">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24">
+                        <svg xmlns="http://www.w3.org/2000/svg" 
+                             class="stroke-current flex-shrink-0 h-6 w-6 mr-2" 
+                             fill="none" 
+                             viewBox="0 0 24 24"
+                             role="img"
+                             aria-label="Success icon">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                     </template>
                     <template x-if="notification.type === 'error'">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24">
+                        <svg xmlns="http://www.w3.org/2000/svg" 
+                             class="stroke-current flex-shrink-0 h-6 w-6 mr-2" 
+                             fill="none" 
+                             viewBox="0 0 24 24"
+                             role="img"
+                             aria-label="Error icon">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                     </template>
                     <template x-if="notification.type === 'info'">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24">
+                        <svg xmlns="http://www.w3.org/2000/svg" 
+                             class="stroke-current flex-shrink-0 h-6 w-6 mr-2" 
+                             fill="none" 
+                             viewBox="0 0 24 24"
+                             role="img"
+                             aria-label="Information icon">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                         </svg>
                     </template>
diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 8d799060..cc7b9d36 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -5,78 +5,91 @@
 
 <!-- First div - Include Species -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
-x-data="{
-    speciesSettings: {
-        Include: {{if .Settings.Realtime.Species.Include}}{{.Settings.Realtime.Species.Include | toJSON}}{{else}}[]{{end}},
-    },
-    newIncludeSpecies: '',
-    showTooltip: null,
-    hasChanges: false,
-    predictions: [],
-    allSpecies: {{getAllSpecies | toJSON}},
-    speciesSettingsOpen: false,
-    showActionsModal: false,
-    currentSpecies: '',
-    resetChanges() {
-        this.hasChanges = false;
-    },
-    addSpecies(list) {
-        const newSpecies = this['new' + list + 'Species'].trim();
-        if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
-            this.speciesSettings[list].push(newSpecies);
-            this['new' + list + 'Species'] = '';
+    role="region" 
+    aria-label="Include Species Settings"
+    x-data="{
+        speciesSettings: {
+            Include: {{if .Settings.Realtime.Species.Include}}{{.Settings.Realtime.Species.Include | toJSON}}{{else}}[]{{end}},
+        },
+        newIncludeSpecies: '',
+        showTooltip: null,
+        hasChanges: false,
+        predictions: [],
+        allSpecies: {{getAllSpecies | toJSON}},
+        speciesSettingsOpen: false,
+        showActionsModal: false,
+        currentSpecies: '',
+        resetChanges() {
+            this.hasChanges = false;
+        },
+        addSpecies(list) {
+            const newSpecies = this['new' + list + 'Species'].trim();
+            if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
+                this.speciesSettings[list].push(newSpecies);
+                this['new' + list + 'Species'] = '';
+                this.hasChanges = true;
+            }
+        },
+        removeSpecies(list, species) {
+            this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
             this.hasChanges = true;
-        }
-    },
-    removeSpecies(list, species) {
-        this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
-        this.hasChanges = true;
-    },
-    updatePredictions(input, listType) {
-        if (!input) {
-            this.predictions = [];
-            return;
-        }
+        },
+        updatePredictions(input, listType) {
+            if (!input) {
+                this.predictions = [];
+                return;
+            }
+            
+            // Use different species list based on whether we're including or excluding
+            const sourceList = this.allSpecies;
+            
+            this.predictions = sourceList
+                .filter(species => 
+                    species.toLowerCase().includes(input.toLowerCase())
+                )
+                .slice(0, 5);
+        },
+    }" 
+    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-cloak>
+    
+    <input type="checkbox" 
+        id="includeSpeciesSettingsOpen" 
+        x-on:change="speciesSettingsOpen = !speciesSettingsOpen"
+        aria-expanded="true" />
         
-        // Use different species list based on whether we're including or excluding
-        const sourceList = this.allSpecies;
-        
-        this.predictions = sourceList
-            .filter(species => 
-                species.toLowerCase().includes(input.toLowerCase())
-            )
-            .slice(0, 5);
-    },
-}" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
-x-cloak>
-    <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title settings-section-header">
         <div class="flex items-center">
-            <label for="speciesSettingsOpen" class="cursor-pointer">Always Include Species</label>
-            <div x-show="hasChanges" x-cloak class="settings-changed-badge">
+            <label for="includeSpeciesSettingsOpen" class="cursor-pointer">Always Include Species</label>
+            <div x-show="hasChanges" 
+                x-cloak 
+                class="settings-changed-badge"
+                role="status" 
+                aria-live="polite">
                 <span class="badge">
                     <span>changed</span>
                 </span>
             </div>
         </div>
-        <p class="settings-section-description">Species in this list will always be included in range of detected species</p>
+        <p class="settings-section-description" id="include-species-description">
+            Species in this list will always be included in range of detected species
+        </p>
     </div>
 
-    <div class="collapse-content">
-        
+    <div class="collapse-content" aria-describedby="include-species-description">
         <div class="settings-form-group">
-
             <!-- Include species list -->
-            <div class="space-y-2">
+            <div class="space-y-2" role="list" aria-label="Included species">
                 <template x-for="(species, index) in speciesSettings.Include" :key="index">
-                    <div class="settings-list-item">
+                    <div class="settings-list-item" role="listitem">
                         <div class="flex-grow">
                             <span x-text="species" class="text-sm"></span>
                         </div>
                         <div class="flex-shrink-0">
-                            <button type="button" @click="removeSpecies('Include', species)" 
-                                    class="btn btn-xs">Remove</button>
+                            <button type="button" 
+                                @click="removeSpecies('Include', species)" 
+                                class="btn btn-xs"
+                                aria-label="Remove species from include list">Remove</button>
                         </div>
                     </div>
                 </template>
@@ -84,17 +97,23 @@
 
             <!-- Include species input -->
             <div class="settings-input-group">
+                <label for="includeSpeciesInput" class="sr-only">Add species to include list</label>
                 <input type="text" 
-                       x-model="newIncludeSpecies" 
-                       @input="updatePredictions(newIncludeSpecies, 'Include')" 
-                       list="include-species-suggestions"
-                       placeholder="Add species to include">
+                    id="includeSpeciesInput"
+                    x-model="newIncludeSpecies" 
+                    @input="updatePredictions(newIncludeSpecies, 'Include')" 
+                    list="include-species-suggestions"
+                    placeholder="Add species to include"
+                    aria-label="Enter species name to include"
+                    aria-describedby="include-species-suggestions">
                 <datalist id="include-species-suggestions">
                     <template x-for="species in predictions" :key="species">
                         <option :value="species"></option>
                     </template>
                 </datalist>
-                <button type="button" @click="addSpecies('Include')">Add</button>
+                <button type="button" 
+                    @click="addSpecies('Include')"
+                    aria-label="Add species to include list">Add</button>
             </div>
         </div>
         <input type="hidden" name="realtime.species.include" :value="JSON.stringify(speciesSettings.Include)">
@@ -103,60 +122,70 @@
 
 <!-- Second div - Exclude Species -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
-x-data="{ 
-    speciesSettings: {
-        Exclude: {{if .Settings.Realtime.Species.Exclude}}{{.Settings.Realtime.Species.Exclude | toJSON}}{{else}}[]{{end}},
-    },
-    newExcludeSpecies: '',
-    showTooltip: null,
-    hasChanges: false,
-    predictions: [],
-    filteredSpecies: {{getIncludedSpecies | toJSON}},
-    resetChanges() {
-        this.hasChanges = false;
-    },
-    addSpecies(list) {
-        const newSpecies = this['new' + list + 'Species'].trim();
-        if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
-            this.speciesSettings[list].push(newSpecies);
-            this['new' + list + 'Species'] = '';
+    role="region" 
+    aria-label="Exclude Species Settings"
+    x-data="{ 
+        speciesSettings: {
+            Exclude: {{if .Settings.Realtime.Species.Exclude}}{{.Settings.Realtime.Species.Exclude | toJSON}}{{else}}[]{{end}},
+        },
+        newExcludeSpecies: '',
+        showTooltip: null,
+        hasChanges: false,
+        predictions: [],
+        filteredSpecies: {{getIncludedSpecies | toJSON}},
+        resetChanges() {
+            this.hasChanges = false;
+        },
+        addSpecies(list) {
+            const newSpecies = this['new' + list + 'Species'].trim();
+            if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
+                this.speciesSettings[list].push(newSpecies);
+                this['new' + list + 'Species'] = '';
+                this.hasChanges = true;
+            }
+        },
+        removeSpecies(list, species) {
+            this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
             this.hasChanges = true;
-        }
-    },
-    removeSpecies(list, species) {
-        this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
-        this.hasChanges = true;
-    },
-    updatePredictions(input, listType) {
-        if (!input) {
-            this.predictions = [];
-            return;
-        }
+        },
+        updatePredictions(input, listType) {
+            if (!input) {
+                this.predictions = [];
+                return;
+            }
+            
+            // For exclude list, always use filteredSpecies
+            const sourceList = this.filteredSpecies;
+            
+            this.predictions = sourceList
+                .filter(species => 
+                    species.toLowerCase().includes(input.toLowerCase())
+                )
+                .slice(0, 5);
+        },
+    }" 
+    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-cloak>
+    
+    <input type="checkbox" 
+        id="excludeSpeciesSettingsOpen" 
+        x-on:change="speciesSettingsOpen = !speciesSettingsOpen"
+        aria-expanded="true" />
         
-        // For exclude list, always use filteredSpecies
-        const sourceList = this.filteredSpecies;
-        
-        this.predictions = sourceList
-            .filter(species => 
-                species.toLowerCase().includes(input.toLowerCase())
-            )
-            .slice(0, 5);
-    },
-}" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
-x-cloak>
-    <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
-            <label for="speciesSettingsOpen" class="cursor-pointer">Always Exclude Species</label>
-            <div class="ml-2" x-show="hasChanges" x-cloak>
+            <label for="excludeSpeciesSettingsOpen" class="cursor-pointer">Always Exclude Species</label>
+            <div class="ml-2" 
+                x-show="hasChanges" 
+                x-cloak
+                role="status" 
+                aria-live="polite">
                 <span class="badge badge-primary badge-sm changed-badge">
                     <span class="text-xs mb-0.5">changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Species in this list will be excuded from detection</p>
+        <p class="text-sm text-gray-500" id="exclude-species-description">Species in this list will be excluded from detection</p>
     </div>
 
     <div class="collapse-content">
@@ -200,123 +229,133 @@
 
 <!-- Third div - Custom Configuration -->
 <div class="collapse collapse-open bg-base-100 shadow-xs col-span-3" 
-x-data="{ 
-    speciesSettings: {
-        Config: {{if .Settings.Realtime.Species.Config}}{{.Settings.Realtime.Species.Config | toJSON}}{{else}}{}{{end}},
-    },
-    newSpeciesConfig: '',
-    newThreshold: 0.5,
-    showTooltip: null,
-    hasChanges: false,
-    predictions: [],
-    allSpecies: {{getAllSpecies | toJSON}},
-    filteredSpecies: {{getIncludedSpecies | toJSON}},
-    speciesSettingsOpen: false,
-    showActionsModal: false,
-    currentSpecies: '',
-    currentActionIndex: null,
-    currentAction: { type: 'ExecuteCommand', command: '', parameters: '' },
-    resetChanges() {
-        this.hasChanges = false;
-    },
-    addSpecies(list) {
-        const newSpecies = this['new' + list + 'Species'].trim();
-        if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
-            this.speciesSettings[list].push(newSpecies);
-            this['new' + list + 'Species'] = '';
+    role="region" 
+    aria-label="Custom Species Configuration"
+    x-data="{ 
+        speciesSettings: {
+            Config: {{if .Settings.Realtime.Species.Config}}{{.Settings.Realtime.Species.Config | toJSON}}{{else}}{}{{end}},
+        },
+        newSpeciesConfig: '',
+        newThreshold: 0.5,
+        showTooltip: null,
+        hasChanges: false,
+        predictions: [],
+        allSpecies: {{getAllSpecies | toJSON}},
+        filteredSpecies: {{getIncludedSpecies | toJSON}},
+        speciesSettingsOpen: false,
+        showActionsModal: false,
+        currentSpecies: '',
+        currentActionIndex: null,
+        currentAction: { type: 'ExecuteCommand', command: '', parameters: '' },
+        resetChanges() {
+            this.hasChanges = false;
+        },
+        addSpecies(list) {
+            const newSpecies = this['new' + list + 'Species'].trim();
+            if (newSpecies && !this.speciesSettings[list].includes(newSpecies)) {
+                this.speciesSettings[list].push(newSpecies);
+                this['new' + list + 'Species'] = '';
+                this.hasChanges = true;
+            }
+        },
+        removeSpecies(list, species) {
+            this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
             this.hasChanges = true;
-        }
-    },
-    removeSpecies(list, species) {
-        this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
-        this.hasChanges = true;
-    },
-    addConfig() {
-        if (this.newSpeciesConfig && !this.speciesSettings.Config[this.newSpeciesConfig]) {
-            this.speciesSettings.Config[this.newSpeciesConfig] = {
-                Threshold: this.newThreshold,
-                Actions: []
-            };
-            this.newSpeciesConfig = '';
-            this.newThreshold = 0.5;
+        },
+        addConfig() {
+            if (this.newSpeciesConfig && !this.speciesSettings.Config[this.newSpeciesConfig]) {
+                this.speciesSettings.Config[this.newSpeciesConfig] = {
+                    Threshold: this.newThreshold,
+                    Actions: []
+                };
+                this.newSpeciesConfig = '';
+                this.newThreshold = 0.5;
+                this.hasChanges = true;
+            }
+        },
+        removeConfig(species) {
+            delete this.speciesSettings.Config[species];
             this.hasChanges = true;
-        }
-    },
-    removeConfig(species) {
-        delete this.speciesSettings.Config[species];
-        this.hasChanges = true;
-    },
-    openActionsModal(species) {
-        this.currentSpecies = species;
-        
-        // Get existing action if any
-        const existingAction = this.speciesSettings.Config[species]?.Actions?.[0];
-        
-        // Set default or existing action
-        const defaultAction = { Type: 'ExecuteCommand', Command: '', Parameters: [] };
-        const action = existingAction || defaultAction;
-        
-        this.currentAction = {
-            type: action.Type,
-            command: action.Command,
-            parameters: Array.isArray(action.Parameters) ? action.Parameters.join(',') : ''
-        };
-        
-        this.showActionsModal = true;
-    },
-    saveAction() {
-        if (!this.speciesSettings.Config[this.currentSpecies]) {
-            this.speciesSettings.Config[this.currentSpecies] = {
-                Threshold: 0.5,
-                Actions: []
+        },
+        openActionsModal(species) {
+            this.currentSpecies = species;
+            
+            // Get existing action if any
+            const existingAction = this.speciesSettings.Config[species]?.Actions?.[0];
+            
+            // Set default or existing action
+            const defaultAction = { Type: 'ExecuteCommand', Command: '', Parameters: [] };
+            const action = existingAction || defaultAction;
+            
+            this.currentAction = {
+                type: action.Type,
+                command: action.Command,
+                parameters: Array.isArray(action.Parameters) ? action.Parameters.join(',') : ''
             };
-        }
-        
-        const newAction = {
-            Type: this.currentAction.type,
-            Command: this.currentAction.command,
-            Parameters: this.currentAction.parameters.split(',').map(p => p.trim()).filter(p => p)
-        };
-        
-        // Always replace/set the single action
-        this.speciesSettings.Config[this.currentSpecies].Actions = [newAction];
-        
-        this.hasChanges = true;
-        this.closeActionsModal();
-    },
-    closeActionsModal() {
-        this.showActionsModal = false;
-    },
-    updatePredictions(input, listType) {
-        if (!input) {
-            this.predictions = [];
-            return;
-        }
-        
-        // Use different species list based on whether we're including or excluding
-        const sourceList = listType === 'Include' ? this.allSpecies : this.filteredSpecies;
+            
+            this.showActionsModal = true;
+        },
+        saveAction() {
+            if (!this.speciesSettings.Config[this.currentSpecies]) {
+                this.speciesSettings.Config[this.currentSpecies] = {
+                    Threshold: 0.5,
+                    Actions: []
+                };
+            }
+            
+            const newAction = {
+                Type: this.currentAction.type,
+                Command: this.currentAction.command,
+                Parameters: this.currentAction.parameters.split(',').map(p => p.trim()).filter(p => p)
+            };
+            
+            // Always replace/set the single action
+            this.speciesSettings.Config[this.currentSpecies].Actions = [newAction];
+            
+            this.hasChanges = true;
+            this.closeActionsModal();
+        },
+        closeActionsModal() {
+            this.showActionsModal = false;
+        },
+        updatePredictions(input, listType) {
+            if (!input) {
+                this.predictions = [];
+                return;
+            }
+            
+            // Use different species list based on whether we're including or excluding
+            const sourceList = listType === 'Include' ? this.allSpecies : this.filteredSpecies;
+            
+            this.predictions = sourceList
+                .filter(species => 
+                    species.toLowerCase().includes(input.toLowerCase())
+                )
+                .slice(0, 5);
+        },
+    }" 
+    x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
+    x-cloak>
+    
+    <input type="checkbox" 
+        id="speciesSettingsOpen" 
+        x-on:change="speciesSettingsOpen = !speciesSettingsOpen"
+        aria-expanded="true" />
         
-        this.predictions = sourceList
-            .filter(species => 
-                species.toLowerCase().includes(input.toLowerCase())
-            )
-            .slice(0, 5);
-    },
-}" 
-x-init="$watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
-x-cloak>
-    <input type="checkbox" id="speciesSettingsOpen" x-on:change="speciesSettingsOpen = !speciesSettingsOpen" />
     <div class="collapse-title text-xl font-medium">
         <div class="flex items-center">
             <label for="speciesSettingsOpen" class="cursor-pointer">Custom Species Configuration</label>
-            <div class="ml-2" x-show="hasChanges" x-cloak>
+            <div class="ml-2" 
+                x-show="hasChanges" 
+                x-cloak
+                role="status" 
+                aria-live="polite">
                 <span class="badge badge-primary badge-sm changed-badge">
                     <span class="text-xs mb-0.5">changed</span>
                 </span>
             </div>
         </div>
-        <!-- short descripton of this section -->
-        <p class="text-sm text-gray-500">Species specific threshold values and actions</p>
+        <p class="text-sm text-gray-500" id="species-configuration-description">Species specific threshold values and actions</p>
     </div>    
 
     <div class="collapse-content">
@@ -350,64 +389,86 @@
             <!-- Custom configuration input -->
             <div class="flex items-center mt-2">
                 <input type="text" 
-                       x-model="newSpeciesConfig" 
-                       @input="updatePredictions(newSpeciesConfig)" 
-                       list="species-suggestions"
-                       placeholder="Species" 
-                       class="input input-bordered input-sm flex-grow" />
+                    id="speciesConfigInput"
+                    x-model="newSpeciesConfig" 
+                    @input="updatePredictions(newSpeciesConfig)" 
+                    list="species-suggestions"
+                    placeholder="Species" 
+                    class="input input-bordered input-sm flex-grow" 
+                    aria-label="Enter species name"
+                    aria-describedby="species-suggestions" />
                 <datalist id="species-suggestions">
                     <template x-for="species in predictions" :key="species">
                         <option :value="species"></option>
                     </template>
                 </datalist>
                 <input type="number" 
-                       x-model.number="newThreshold" 
-                       class="input input-bordered input-sm w-24 ml-2" 
-                       min="0" 
-                       max="1" 
-                       step="0.01" 
-                       placeholder="Threshold" />
+                    id="thresholdInput"
+                    x-model.number="newThreshold" 
+                    class="input input-bordered input-sm w-24 ml-2" 
+                    min="0" 
+                    max="1" 
+                    step="0.01" 
+                    placeholder="Threshold"
+                    aria-label="Enter threshold value"
+                    aria-describedby="threshold-help" />
                 
-                <button type="button" @click="openActionsModal(newSpeciesConfig)" 
-                        class="btn btn-sm ml-2">Actions</button>
-                <button type="button" @click="addConfig()" class="btn btn-sm btn-primary ml-2 w-20">Add</button>
+                <button type="button" 
+                    @click="openActionsModal(newSpeciesConfig)" 
+                    class="btn btn-sm ml-2"
+                    aria-label="Add action for selected species">Actions</button>
+                <button type="button" 
+                    @click="addConfig()" 
+                    class="btn btn-sm btn-primary ml-2 w-20"
+                    aria-label="Add new species configuration">Add</button>
             </div>
         </div>
 
         <!-- Actions Modal -->
         <div x-show="showActionsModal" 
-             class="modal modal-open" 
-             x-cloak
-             @keydown.escape.window="closeActionsModal()">
+            class="modal modal-open" 
+            x-cloak
+            @keydown.escape.window="closeActionsModal()"
+            role="dialog"
+            aria-labelledby="modal-title"
+            aria-modal="true">
             <div class="modal-box bg-base-100 max-h-[90vh] overflow-y-auto">
-                <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3>
+                <h3 id="modal-title" class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3>
                 
                 <div class="settings-modal-section">
-                    <label>Action Type</label>
-                    <select x-model="currentAction.type" 
-                            class="select select-bordered" 
-                            disabled>
+                    <label for="actionType">Action Type</label>
+                    <select id="actionType"
+                        x-model="currentAction.type" 
+                        class="select select-bordered" 
+                        disabled
+                        aria-label="Select action type">
                         <option value="ExecuteCommand">Execute Command</option>
                     </select>
                 </div>
                 
                 <div class="settings-modal-section">
-                    <label>Command</label>
+                    <label for="commandInput">Command</label>
                     <input type="text" 
-                           x-model="currentAction.command" 
-                           class="input input-bordered" 
-                           placeholder="/path/to/your/command">
-                    <p class="help-text">Provide the full path to the command you want to execute</p>
+                        id="commandInput"
+                        x-model="currentAction.command" 
+                        class="input input-bordered" 
+                        placeholder="/path/to/your/command"
+                        aria-label="Enter command path"
+                        aria-describedby="command-help" />
+                    <p class="help-text" id="command-help">Provide the full path to the command you want to execute</p>
                 </div>
 
                 <div class="settings-modal-section">
-                    <label>Parameters</label>
+                    <label for="parametersInput">Parameters</label>
                     <input type="text" 
-                           x-model="currentAction.parameters" 
-                           class="input input-bordered" 
-                           placeholder="Parameters will appear here"
-                           readonly>
-                    <p class="help-text">Click parameters below to add them to your command</p>
+                        id="parametersInput"
+                        x-model="currentAction.parameters" 
+                        class="input input-bordered" 
+                        placeholder="Parameters will appear here"
+                        readonly
+                        aria-label="Selected parameters"
+                        aria-describedby="parameters-help" />
+                    <p class="help-text" id="parameters-help">Click parameters below to add them to your command</p>
                 </div>
 
                 <div class="settings-modal-section">
@@ -415,39 +476,43 @@ <h3 class="text-lg font-bold mb-4" x-text="'Actions for ' + currentSpecies"></h3
                     <p class="help-text mb-2">Click to add parameters to your script:</p>
                     <div class="flex flex-wrap gap-2">
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
-                                class="btn btn-xs">CommonName</button>
+                            @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',CommonName' : 'CommonName'" 
+                            class="btn btn-xs">CommonName</button>
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',ScientificName' : 'ScientificName'" 
-                                class="btn btn-xs">ScientificName</button>
+                            @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',ScientificName' : 'ScientificName'" 
+                            class="btn btn-xs">ScientificName</button>
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Confidence' : 'Confidence'" 
-                                class="btn btn-xs">Confidence</button>
+                            @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Confidence' : 'Confidence'" 
+                            class="btn btn-xs">Confidence</button>
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Time' : 'Time'" 
-                                class="btn btn-xs">Time</button>
+                            @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Time' : 'Time'" 
+                            class="btn btn-xs">Time</button>
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Source' : 'Source'" 
-                                class="btn btn-xs">Source</button>
+                            @click.prevent="currentAction.parameters = currentAction.parameters ? currentAction.parameters + ',Source' : 'Source'" 
+                            class="btn btn-xs">Source</button>
                     </div>
                     <div class="mt-2">
                         <button type="button" 
-                                @click.prevent="currentAction.parameters = ''" 
-                                class="btn btn-xs btn-warning">Clear Parameters</button>
+                            @click.prevent="currentAction.parameters = ''" 
+                            class="btn btn-xs btn-warning">Clear Parameters</button>
                     </div>
                     <p class="help-text mt-2">Parameters will be passed to your script in the order they are added</p>
                 </div>
                 
                 <div class="modal-action">
                     <button type="button" 
-                            @click.prevent="saveAction()" 
-                            class="btn btn-primary">Save</button>
+                        @click.prevent="saveAction()" 
+                        class="btn btn-primary"
+                        aria-label="Save action configuration">Save</button>
                     <button type="button" 
-                            @click.prevent="closeActionsModal()" 
-                            class="btn">Cancel</button>
+                        @click.prevent="closeActionsModal()" 
+                        class="btn"
+                        aria-label="Cancel and close modal">Cancel</button>
                 </div>
             </div>
-            <div class="modal-backdrop bg-black/50" @click="closeActionsModal()"></div>
+            <div class="modal-backdrop bg-black/50" 
+                @click="closeActionsModal()"
+                role="presentation"></div>
         </div>
 
         <!-- Hidden inputs -->

From b875a349ed9832dc5944f4035172e5884c7a247a Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 18:37:01 +0200
Subject: [PATCH 11/15] Enhance UI and accessibility for date input and tab
 components

- Added dark mode styles for date input calendar icons to improve visibility.
- Updated Tailwind CSS variables for better color management and consistency across themes.
- Introduced new tab component styles, including hover effects and disabled states, to enhance user interaction.
- Improved layout and spacing in the dashboard for better usability and clarity.

This commit focuses on refining the user interface and accessibility features, ensuring a more cohesive and user-friendly experience across the application.
---
 assets/custom.css    |  10 ++
 assets/tailwind.css  | 247 +++++++++++++++++++++++++++++++++++++++++--
 views/dashboard.html |   4 +-
 3 files changed, 250 insertions(+), 11 deletions(-)

diff --git a/assets/custom.css b/assets/custom.css
index 2f94c122..7315c9da 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -517,3 +517,13 @@ thead.sticky-header {
 .swap-rotate {
     transition: transform 0.2s ease-in-out;
 }
+
+/* Style date input calendar icon for dark mode */
+[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+/* For Firefox */
+[data-theme="dark"] input[type="date"] {
+  color-scheme: dark;
+}
\ No newline at end of file
diff --git a/assets/tailwind.css b/assets/tailwind.css
index 1e19eb78..e6e3fb5e 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -633,7 +633,6 @@ html {
   --inc: 13.6937% 0.029574 237.322518;
   --suc: 14.4549% 0.038401 149.57933;
   --wac: 15.3718% 0.032932 70.08039;
-  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
@@ -655,6 +654,7 @@ html {
   --su: 72.2746% 0.192007 149.57933;
   --wa: 76.859% 0.164659 70.08039;
   --er: 63.6834% 0.207849 25.331328;
+  --erc: 100% 0 0;
   --rounded-box: 0.5rem;
   --rounded-btn: 0.3rem;
   --rounded-badge: 0.25rem;
@@ -675,11 +675,10 @@ html {
     --inc: 11.7523% 0.027774 241.966052;
     --suc: 12.541% 0.033982 149.213788;
     --wac: 13.3168% 0.031484 58.31834;
-    --erc: 91.542% 0.043031 27.325049;
     --btn-focus-scale: 0.95;
     --tab-border: 1px;
     --tab-radius: 0.5rem;
-    --pc: 0% 0 0;
+    --pc: 12.8802% 0.040603 264.695154;
     --s: 55.1019% 0.023361 264.363742;
     --a: 49.9982% 0.11929 242.74902;
     --n: 87.1681% 0.009339 258.338227;
@@ -697,6 +696,7 @@ html {
     --su: 62.7052% 0.169912 149.213788;
     --wa: 66.584% 0.157422 58.31834;
     --er: 57.7099% 0.215157 27.325049;
+    --erc: 12.8802% 0.040603 264.695154;
     --rounded-box: 0.5rem;
     --rounded-btn: 0.3rem;
     --rounded-badge: 0.25rem;
@@ -717,7 +717,6 @@ html {
   --inc: 13.6937% 0.029574 237.322518;
   --suc: 14.4549% 0.038401 149.57933;
   --wac: 15.3718% 0.032932 70.08039;
-  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
@@ -739,6 +738,7 @@ html {
   --su: 72.2746% 0.192007 149.57933;
   --wa: 76.859% 0.164659 70.08039;
   --er: 63.6834% 0.207849 25.331328;
+  --erc: 100% 0 0;
   --rounded-box: 0.5rem;
   --rounded-btn: 0.3rem;
   --rounded-badge: 0.25rem;
@@ -758,7 +758,6 @@ html {
   --inc: 13.6937% 0.029574 237.322518;
   --suc: 14.4549% 0.038401 149.57933;
   --wac: 15.3718% 0.032932 70.08039;
-  --erc: 12.7367% 0.04157 25.331328;
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
@@ -780,6 +779,7 @@ html {
   --su: 72.2746% 0.192007 149.57933;
   --wa: 76.859% 0.164659 70.08039;
   --er: 63.6834% 0.207849 25.331328;
+  --erc: 100% 0 0;
   --rounded-box: 0.5rem;
   --rounded-btn: 0.3rem;
   --rounded-badge: 0.25rem;
@@ -799,11 +799,10 @@ html {
   --inc: 11.7523% 0.027774 241.966052;
   --suc: 12.541% 0.033982 149.213788;
   --wac: 13.3168% 0.031484 58.31834;
-  --erc: 91.542% 0.043031 27.325049;
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --pc: 0% 0 0;
+  --pc: 12.8802% 0.040603 264.695154;
   --s: 55.1019% 0.023361 264.363742;
   --a: 49.9982% 0.11929 242.74902;
   --n: 87.1681% 0.009339 258.338227;
@@ -821,6 +820,7 @@ html {
   --su: 62.7052% 0.169912 149.213788;
   --wa: 66.584% 0.157422 58.31834;
   --er: 57.7099% 0.215157 27.325049;
+  --erc: 12.8802% 0.040603 264.695154;
   --rounded-box: 0.5rem;
   --rounded-btn: 0.3rem;
   --rounded-badge: 0.25rem;
@@ -840,11 +840,10 @@ html {
   --inc: 11.7523% 0.027774 241.966052;
   --suc: 12.541% 0.033982 149.213788;
   --wac: 13.3168% 0.031484 58.31834;
-  --erc: 91.542% 0.043031 27.325049;
   --btn-focus-scale: 0.95;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
-  --pc: 0% 0 0;
+  --pc: 12.8802% 0.040603 264.695154;
   --s: 55.1019% 0.023361 264.363742;
   --a: 49.9982% 0.11929 242.74902;
   --n: 87.1681% 0.009339 258.338227;
@@ -862,6 +861,7 @@ html {
   --su: 62.7052% 0.169912 149.213788;
   --wa: 66.584% 0.157422 58.31834;
   --er: 57.7099% 0.215157 27.325049;
+  --erc: 12.8802% 0.040603 264.695154;
   --rounded-box: 0.5rem;
   --rounded-btn: 0.3rem;
   --rounded-badge: 0.25rem;
@@ -995,6 +995,10 @@ html {
     color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
   }
 
+  .tab:hover {
+    --tw-text-opacity: 1;
+  }
+
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
@@ -1524,6 +1528,13 @@ html {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
+
+  .tab[disabled],
+    .tab[disabled]:hover {
+    cursor: not-allowed;
+    color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+    --tw-text-opacity: 0.2;
+  }
 }
 
 .form-control {
@@ -1965,6 +1976,62 @@ html {
   opacity: 1;
 }
 
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+  border-bottom-color: transparent;
+}
+
+.tab {
+  position: relative;
+  grid-row-start: 1;
+  display: inline-flex;
+  height: 2rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 2;
+  --tab-padding: 1rem;
+  --tw-text-opacity: 0.5;
+  --tab-color: var(--fallback-bc,oklch(var(--bc)/1));
+  --tab-bg: var(--fallback-b1,oklch(var(--b1)/1));
+  --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));
+  color: var(--tab-color);
+  padding-inline-start: var(--tab-padding, 1rem);
+  padding-inline-end: var(--tab-padding, 1rem);
+}
+
+.tab:is(input[type="radio"]) {
+  width: auto;
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.tab:is(input[type="radio"]):after {
+  --tw-content: attr(aria-label);
+  content: var(--tw-content);
+}
+
+.tab:not(input):empty {
+  cursor: default;
+  grid-column-start: span 9999;
+}
+
+input.tab:checked + .tab-content,
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
+  display: block;
+}
+
 .table {
   position: relative;
   width: 100%;
@@ -3364,6 +3431,126 @@ details.collapse summary::-webkit-details-marker {
   transform: rotateY(0deg);
 }
 
+.tabs-lifted > .tab:focus-visible {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 1;
+  --tw-text-opacity: 1;
+}
+
+.tab:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.tab:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -5px;
+}
+
+.tab-disabled,
+  .tab[disabled] {
+  cursor: not-allowed;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --tw-text-opacity: 0.2;
+}
+
+.tabs-bordered > .tab {
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.2;
+  border-style: solid;
+  border-bottom-width: calc(var(--tab-border, 1px) + 1px);
+}
+
+.tabs-lifted > .tab {
+  border: var(--tab-border, 1px) solid transparent;
+  border-width: 0 0 var(--tab-border, 1px) 0;
+  border-start-start-radius: var(--tab-radius, 0.5rem);
+  border-start-end-radius: var(--tab-radius, 0.5rem);
+  border-bottom-color: var(--tab-border-color);
+  padding-inline-start: var(--tab-padding, 1rem);
+  padding-inline-end: var(--tab-padding, 1rem);
+  padding-top: var(--tab-border, 1px);
+}
+
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
+  background-color: var(--tab-bg);
+  border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
+  border-inline-start-color: var(--tab-border-color);
+  border-inline-end-color: var(--tab-border-color);
+  border-top-color: var(--tab-border-color);
+  padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
+  padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
+  padding-bottom: var(--tab-border, 1px);
+  padding-top: 0;
+}
+
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
+  z-index: 1;
+  content: "";
+  display: block;
+  position: absolute;
+  width: calc(100% + var(--tab-radius, 0.5rem) * 2);
+  height: var(--tab-radius, 0.5rem);
+  bottom: 0;
+  background-size: var(--tab-radius, 0.5rem);
+  background-position: top left,
+        top right;
+  background-repeat: no-repeat;
+  --tab-grad: calc(69% - var(--tab-border, 1px));
+  --radius-start: radial-gradient(
+        circle at top left,
+        transparent var(--tab-grad),
+        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
+      );
+  --radius-end: radial-gradient(
+        circle at top right,
+        transparent var(--tab-grad),
+        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
+      );
+  background-image: var(--radius-start), var(--radius-end);
+}
+
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
+  background-image: var(--radius-end);
+  background-position: top right;
+}
+
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
+  background-image: var(--radius-start);
+  background-position: top left;
+}
+
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
+  background-image: var(--radius-start);
+  background-position: top left;
+}
+
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
+  background-image: var(--radius-end);
+  background-position: top right;
+}
+
+.tabs-lifted
+  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
+  + .tabs-lifted
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
+  background-image: var(--radius-end);
+  background-position: top right;
+}
+
+.tabs-boxed .tab {
+  border-radius: var(--rounded-btn, 0.5rem);
+}
+
 .table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
@@ -3769,6 +3956,36 @@ html:has(.drawer-toggle:checked) {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
 
+.tabs-md :where(.tab) {
+  height: 2rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  line-height: 2;
+  --tab-padding: 1rem;
+}
+
+.tabs-lg :where(.tab) {
+  height: 3rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  line-height: 2;
+  --tab-padding: 1.25rem;
+}
+
+.tabs-sm :where(.tab) {
+  height: 1.5rem;
+  font-size: 0.875rem;
+  line-height: .75rem;
+  --tab-padding: 0.75rem;
+}
+
+.tabs-xs :where(.tab) {
+  height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: .75rem;
+  --tab-padding: 0.5rem;
+}
+
 [type="checkbox"].toggle-sm {
   --handleoffset: 0.75rem;
   height: 1.25rem;
@@ -4030,6 +4247,18 @@ html:has(.drawer-toggle:checked) {
   bottom: var(--tooltip-tail-offset);
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
diff --git a/views/dashboard.html b/views/dashboard.html
index 3e9acf4f..99ad16f1 100644
--- a/views/dashboard.html
+++ b/views/dashboard.html
@@ -6,7 +6,7 @@
 		<div class="flex justify-between gap-2">
 			<span class="card-title grow text-base sm:text-xl">Daily Summary</span>
 			<!-- Date picker -->
-			<button onclick="moveDatePicker(-1)">
+			<button onclick="moveDatePicker(-1)" class="text-base-content">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.96 123.96" fill="currentColor" class="w-5 h-5">
 					<g>
 						<g>
@@ -21,7 +21,7 @@
 				hx-include="*[name]" hx-params="date"
 				class="input input-sm sm:w-36 focus-visible:outline-none self-center whitespace-nowrap invisible" id="datePicker"
 				name="date" onchange="updateDate(this.value)">
-			<button onclick="moveDatePicker(1)">
+			<button onclick="moveDatePicker(1)" class="text-base-content">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.96 123.96" fill="currentColor" class="w-5 h-5">
 					<g>
 						<g transform="rotate(-180, 61.9775, 61.98)">

From b1db95fb579096afec7a521e1d5f7103e4d4c9fa Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 19:02:07 +0200
Subject: [PATCH 12/15] fix: Improve date picker functionality to fix daily
 summary table loading on Firefox

- Added a new function to initialize the date picker, setting its value based on the URL hash or the current date.
- Made the date picker visible and triggered a change event to load initial data.
- Integrated the date picker initialization into the dashboard's DOMContentLoaded event and htmx afterSettle event for improved user experience.

This commit enhances the dashboard functionality by ensuring the date picker is properly initialized and visible, improving usability for users interacting with date-related features.
---
 assets/util.js       | 27 +++++++++++++++++++++++++++
 views/dashboard.html |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/assets/util.js b/assets/util.js
index badf3938..5bb4a99d 100644
--- a/assets/util.js
+++ b/assets/util.js
@@ -28,6 +28,21 @@ function isLocationDashboard() {
 	return pathname === '/' || pathname.endsWith('/dashboard');
 }
 
+function initializeDatePicker() {
+	const picker = document.getElementById('datePicker');
+	if (!picker) return;
+
+	// Try to get date from URL hash first, then use current date
+	const hashDate = window.location.hash.substring(1);
+	const today = new Date().toLocaleDateString('sv'); // 'sv' locale gives YYYY-MM-DD format
+	
+	picker.value = hashDate || today;
+	picker.classList.remove('invisible'); // Make picker visible
+	
+	// Trigger the change event to load initial data
+	picker.dispatchEvent(new Event('change'));
+}
+
 htmx.on('htmx:afterSettle', function (event) {
 	if (event.detail.target.id.endsWith('-content')) {
 		// Find all chart containers in the newly loaded content and render them
@@ -35,4 +50,16 @@ htmx.on('htmx:afterSettle', function (event) {
 			renderChart(chartContainer.id, chartContainer.dataset.chartOptions);
 		});
 	}
+	
+	// Initialize date picker if we're on the dashboard
+	if (isLocationDashboard()) {
+		initializeDatePicker();
+	}
+});
+
+// Add document ready listener to handle initial page load
+document.addEventListener('DOMContentLoaded', function() {
+	if (isLocationDashboard()) {
+		initializeDatePicker();
+	}
 });
diff --git a/views/dashboard.html b/views/dashboard.html
index 99ad16f1..37d39018 100644
--- a/views/dashboard.html
+++ b/views/dashboard.html
@@ -19,7 +19,7 @@
 			</button>
 			<input type="date" hx-get="/top-birds" hx-target="#topBirdsChart" hx-trigger="change"
 				hx-include="*[name]" hx-params="date"
-				class="input input-sm sm:w-36 focus-visible:outline-none self-center whitespace-nowrap invisible" id="datePicker"
+				class="input input-sm sm:w-36 focus-visible:outline-none self-center whitespace-nowrap" id="datePicker"
 				name="date" onchange="updateDate(this.value)">
 			<button onclick="moveDatePicker(1)" class="text-base-content">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.96 123.96" fill="currentColor" class="w-5 h-5">

From 5f379f6eac3f6c2aef52fb5a298f70c8cdf92603 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 19:12:59 +0200
Subject: [PATCH 13/15] fix: remove duplicate initialization of date picker
 element

---
 assets/util.js   | 13 ++++++++-----
 views/index.html | 14 --------------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/assets/util.js b/assets/util.js
index 5bb4a99d..a022ae65 100644
--- a/assets/util.js
+++ b/assets/util.js
@@ -36,11 +36,14 @@ function initializeDatePicker() {
 	const hashDate = window.location.hash.substring(1);
 	const today = new Date().toLocaleDateString('sv'); // 'sv' locale gives YYYY-MM-DD format
 	
-	picker.value = hashDate || today;
-	picker.classList.remove('invisible'); // Make picker visible
-	
-	// Trigger the change event to load initial data
-	picker.dispatchEvent(new Event('change'));
+	// Only set value and trigger change if the value is actually different
+	if (picker.value !== (hashDate || today)) {
+		picker.value = hashDate || today;
+		picker.classList.remove('invisible'); // Make picker visible
+		picker.dispatchEvent(new Event('change'));
+	} else {
+		picker.classList.remove('invisible'); // Make picker visible
+	}
 }
 
 htmx.on('htmx:afterSettle', function (event) {
diff --git a/views/index.html b/views/index.html
index 4a7f7533..051a9b12 100644
--- a/views/index.html
+++ b/views/index.html
@@ -68,20 +68,6 @@
 	<!-- Login form in a DaisyUI modal -->
 	<dialog id="loginModal" class="modal modal-bottom sm:modal-middle"></dialog>
 	<script>
-		// Initialize date picker with either the date from URL hash or today's date
-		document.addEventListener('htmx:afterSettle', function () {
-			var datePicker = document.getElementById('datePicker');
-
-			if (datePicker && isLocationDashboard()) {
-				var dateInHash = window.location.hash.substring(1);
-				var date = dateInHash ? dateInHash : new Date().toLocaleDateString('sv');
-				if (datePicker.value !== date) {
-					datePicker.value = date;
-					datePicker.classList.remove('invisible');
-					htmx.trigger(datePicker, 'change');
-				}
-			}
-		}); // ensure the DOM is fully loaded
 
 		// Function to set theme
 		function setTheme(themeName) {

From a00b638c853824a1b1f931aa546a300fb0a3772d Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 19:32:29 +0200
Subject: [PATCH 14/15] fix: enhance date picker initialization for consistent
 date formatting

- Introduced a helper function to ensure the date is formatted as 'YYYY-MM-DD' consistently across browsers.
- Updated the date picker logic to set its value based on the URL hash or the current date, improving user experience.
- Ensured the date picker is only triggered to change when necessary, enhancing performance and usability.
---
 assets/util.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/assets/util.js b/assets/util.js
index a022ae65..d0b3a916 100644
--- a/assets/util.js
+++ b/assets/util.js
@@ -34,13 +34,26 @@ function initializeDatePicker() {
 
 	// Try to get date from URL hash first, then use current date
 	const hashDate = window.location.hash.substring(1);
-	const today = new Date().toLocaleDateString('sv'); // 'sv' locale gives YYYY-MM-DD format
+
+	// Helper to ensure a zero-padded YYYY-MM-DD date string consistently across browsers
+	function getIsoDateString(date) {
+		const year = date.getFullYear();
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const day = String(date.getDate()).padStart(2, '0');
+		return `${year}-${month}-${day}`;
+	}
+
+	const today = getIsoDateString(new Date()); // ensures consistent 'YYYY-MM-DD' format
+	
+	// Set the value first
+	const newValue = hashDate || today;
 	
-	// Only set value and trigger change if the value is actually different
-	if (picker.value !== (hashDate || today)) {
-		picker.value = hashDate || today;
+	// Only trigger change if the picker is invisible (first load)
+	// or if the value has actually changed
+	if (picker.classList.contains('invisible') || picker.value !== newValue) {
+		picker.value = newValue;
 		picker.classList.remove('invisible'); // Make picker visible
-		picker.dispatchEvent(new Event('change'));
+		htmx.trigger(picker, 'change');
 	} else {
 		picker.classList.remove('invisible'); // Make picker visible
 	}

From f573695516eb0af4e16218cadb2cea71ced43778 Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Mon, 13 Jan 2025 19:34:07 +0200
Subject: [PATCH 15/15] refactor: simplify listDetections component by removing
 selection functionality

- Removed the selection feature, including checkboxes and associated actions (verify and delete).
- Streamlined the HTML structure for better readability and maintainability.
- Enhanced the overall layout of the listDetections component while maintaining existing styles.
---
 views/fragments/listDetections.html | 61 +----------------------------
 1 file changed, 1 insertion(+), 60 deletions(-)

diff --git a/views/fragments/listDetections.html b/views/fragments/listDetections.html
index ee70e445..e881c3a2 100644
--- a/views/fragments/listDetections.html
+++ b/views/fragments/listDetections.html
@@ -1,48 +1,6 @@
 {{define "listDetections"}}
 
-<section class="card col-span-12 overflow-x-auto bg-base-100 shadow-sm" 
-    x-data="{ 
-        selected: [],
-        get hasSelection() { return this.selected.length > 0 },
-        toggleAll() {
-            if (this.selected.length === this.availableIds.length) {
-                this.selected = [];
-            } else {
-                this.selected = [...this.availableIds];
-            }
-        },
-        availableIds: [{{range .Notes}}'{{.ID}}',{{end}}]
-    }">
-    <!-- Actions Menu - Shows when items are selected -->
-    <div class="sticky top-0 z-10 bg-base-100 shadow-sm transition-all"
-        x-show="hasSelection"
-        x-transition:enter="transition ease-out duration-200"
-        x-transition:enter-start="opacity-0 transform -translate-y-2"
-        x-transition:enter-end="opacity-100 transform translate-y-0"
-        x-transition:leave="transition ease-in duration-150"
-        x-transition:leave-start="opacity-100 transform translate-y-0"
-        x-transition:leave-end="opacity-0 transform -translate-y-2">
-        <div class="flex items-center justify-between px-4 py-2">
-            <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-base-content/70" x-text="`${selected.length} selected`"></span>
-            </div>
-            <div class="flex items-center gap-2">
-                <button class="btn btn-sm btn-primary normal-case" @click="$dispatch('verify-detections', { ids: selected })">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                    </svg>
-                    <span class="ml-1">Verify</span>
-                </button>
-                <button class="btn btn-sm btn-error normal-case text-error-content" @click="$dispatch('delete-detections', { ids: selected })">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                    <span class="ml-1">Delete</span>
-                </button>
-            </div>
-        </div>
-    </div>
-
+<section class="card col-span-12 overflow-x-auto bg-base-100 shadow-sm">
     <div class="card-body grow-0 p-2 sm:p-4 sm:pt-3">
         <div class="flex justify-between">
             <!-- Title -->
@@ -67,15 +25,6 @@
         <table class="table w-full text-left">
             <thead class="text-xs">
                 <tr>
-                    <!-- Selection Column -->
-                    <th scope="col" class="py-0 px-2 w-6">
-                        <input type="checkbox" 
-                            class="checkbox checkbox-primary checkbox-xs rounded-sm border-2 border-base-content/30" 
-                            x-on:click="toggleAll()"
-                            x-bind:checked="selected.length === availableIds.length"
-                            x-bind:indeterminate="selected.length > 0 && selected.length < availableIds.length">
-                    </th>
-
                     <!-- Date/Time Column -->
                     <th scope="col" class="py-0 px-2 sm:px-4" style="width: auto">
                         <span class="hidden sm:inline">Date</span>
@@ -119,14 +68,6 @@
             <tbody>
                 {{range .Notes}}
                 <tr class="text-xs sm:text-sm">
-                    <!-- Selection Column -->
-                    <td class="py-1 px-2">
-                        <input type="checkbox" 
-                            class="checkbox checkbox-primary checkbox-xs rounded-sm border-2 border-base-content/30" 
-                            x-model="selected"
-                            value="{{.ID}}">
-                    </td>
-
                     <!-- Date/Time Column -->
                     <td class="py-0 px-2 sm:px-4 font-normal">
                         <div class="flex flex-col sm:flex-row sm:items-center">