diff --git a/src/audit/mod.rs b/src/audit/mod.rs
index ddf109e..59225e8 100644
--- a/src/audit/mod.rs
+++ b/src/audit/mod.rs
@@ -23,6 +23,7 @@ where
 }
 
 /// Lower-level helper function to write audit log entries directly to the database.
+#[allow(clippy::too_many_arguments)]
 pub async fn log_action(
     db: &mongodb::Database,
     user_opt: Option<&AuthenticatedUser>,
diff --git a/src/audit/repository.rs b/src/audit/repository.rs
index 4cc4954..558f952 100644
--- a/src/audit/repository.rs
+++ b/src/audit/repository.rs
@@ -57,10 +57,8 @@ impl MongoAuditRepository {
 
         if let Some(ent_id_str) = entity_id {
             let trimmed = ent_id_str.trim();
-            if !trimmed.is_empty() {
-                if let Ok(oid) = ObjectId::parse_str(trimmed) {
-                    filter.insert("entity_id", oid);
-                }
+            if let Ok(oid) = ObjectId::parse_str(trimmed) {
+                filter.insert("entity_id", oid);
             }
         }
 
@@ -69,25 +67,23 @@ impl MongoAuditRepository {
         
         if let Some(start) = start_date {
             let trimmed = start.trim();
-            if !trimmed.is_empty() {
-                if let Ok(naive_date) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d") {
-                    if let Some(naive_datetime) = naive_date.and_hms_opt(0, 0, 0) {
-                        let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
-                        date_query.insert("$gte", mongodb::bson::DateTime::from_chrono(dt));
-                    }
-                }
+            if let Some(naive_datetime) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d")
+                .ok()
+                .and_then(|d| d.and_hms_opt(0, 0, 0))
+            {
+                let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
+                date_query.insert("$gte", mongodb::bson::DateTime::from_chrono(dt));
             }
         }
 
         if let Some(end) = end_date {
             let trimmed = end.trim();
-            if !trimmed.is_empty() {
-                if let Ok(naive_date) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d") {
-                    if let Some(naive_datetime) = naive_date.and_hms_opt(23, 59, 59) {
-                        let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
-                        date_query.insert("$lte", mongodb::bson::DateTime::from_chrono(dt));
-                    }
-                }
+            if let Some(naive_datetime) = chrono::NaiveDate::parse_from_str(trimmed, "%Y-%m-%d")
+                .ok()
+                .and_then(|d| d.and_hms_opt(23, 59, 59))
+            {
+                let dt = chrono::DateTime::<chrono::Utc>::from_naive_utc_and_offset(naive_datetime, chrono::Utc);
+                date_query.insert("$lte", mongodb::bson::DateTime::from_chrono(dt));
             }
         }
 
diff --git a/src/docs/handlers.rs b/src/docs/handlers.rs
index 45fda96..d890fc6 100644
--- a/src/docs/handlers.rs
+++ b/src/docs/handlers.rs
@@ -121,6 +121,13 @@ pub struct LoggingTemplate {
     pub authenticated: bool,
 }
 
+#[derive(Template)]
+#[template(path = "docs/tables.html")]
+pub struct TablesTemplate {
+    pub username: String,
+    pub authenticated: bool,
+}
+
 // Define individual handlers
 pub async fn index_handler(
     user_opt: Option<AuthenticatedUser>,
@@ -221,3 +228,10 @@ pub async fn logging_handler(
     let (authenticated, username) = get_session_info(user_opt);
     Ok(HtmlTemplate(LoggingTemplate { username, authenticated }))
 }
+
+pub async fn tables_handler(
+    user_opt: Option<AuthenticatedUser>,
+) -> Result<impl IntoResponse, AppError> {
+    let (authenticated, username) = get_session_info(user_opt);
+    Ok(HtmlTemplate(TablesTemplate { username, authenticated }))
+}
diff --git a/src/docs/mod.rs b/src/docs/mod.rs
index 1ac463c..d05f21b 100644
--- a/src/docs/mod.rs
+++ b/src/docs/mod.rs
@@ -5,7 +5,7 @@ use self::handlers::{
     index_handler, buttons_handler, inputs_handler, date_time_handler,
     combobox_handler, toggles_handler, modals_handler, sheets_handler,
     tabs_accordion_handler, visuals_handler, scrollbars_handler, feedback_handler,
-    logging_handler,
+    logging_handler, tables_handler,
 };
 
 pub fn router<S>() -> Router<S>
@@ -29,4 +29,5 @@ where
         .route("/docs/scrollbars", get(scrollbars_handler))
         .route("/docs/feedback", get(feedback_handler))
         .route("/docs/logging", get(logging_handler))
+        .route("/docs/tables", get(tables_handler))
 }
diff --git a/src/input.css b/src/input.css
index c0b429e..aaa9201 100644
--- a/src/input.css
+++ b/src/input.css
@@ -76,12 +76,12 @@ html, body {
 /* Custom Scrollbars */
 * {
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
 }
 
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-button {
@@ -89,19 +89,19 @@ html, body {
 }
 
 ::-webkit-scrollbar-track {
-  background: transparent; 
+  background: rgba(15, 23, 42, 0.4); 
+  border-radius: 9999px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--border)); 
+  background: rgba(100, 116, 139, 0.5); 
   border-radius: 9999px;
   border: 1px solid transparent;
   background-clip: padding-box;
-  transition: background-color 0.2s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground)); 
+  background: rgba(148, 163, 184, 0.8); 
 }
 
 /* Custom Date/Time Inputs */
diff --git a/static/js/components.js b/static/js/components.js
index 906120b..5435dc0 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -5,6 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const modal = document.getElementById(modalId);
         if (!modal) return;
         modal.classList.remove('hidden');
+        modal.classList.add('flex');
         setTimeout(() => {
             const content = modal.querySelector('.modal-content');
             if (content) {
@@ -24,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         setTimeout(() => {
             modal.classList.add('hidden');
+            modal.classList.remove('flex');
         }, 300); // Wait for transition animation
     };
 
diff --git a/static/tailwind.css b/static/tailwind.css
index 4ea7df3..2d8ff9e 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -6,27 +6,23 @@
     --font-sans: 'Outfit', sans-serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
-    --color-teal-500: oklch(70.4% 0.14 182.503);
-    --color-teal-600: oklch(60% 0.118 184.704);
-    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-sky-300: oklch(82.8% 0.111 230.318);
     --color-sky-400: oklch(74.6% 0.16 232.661);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-900: oklch(39.1% 0.09 240.876);
     --color-sky-950: oklch(29.3% 0.066 243.157);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
-    --color-pink-600: oklch(59.2% 0.249 0.584);
     --color-rose-300: oklch(81% 0.117 11.638);
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
     --color-rose-900: oklch(41% 0.159 10.272);
     --color-rose-950: oklch(27.1% 0.105 12.094);
     --color-slate-100: oklch(96.8% 0.007 247.896);
@@ -356,6 +352,9 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -377,6 +376,12 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -413,6 +418,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .block {
     display: block;
   }
@@ -437,6 +445,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -461,6 +472,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -494,8 +508,8 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
-  .min-h-\[5rem\] {
-    min-height: 5rem;
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
   }
   .min-h-screen {
     min-height: 100vh;
@@ -533,6 +547,9 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -551,15 +568,15 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-57\.5 {
+    width: calc(var(--spacing) * 57.5);
+  }
+  .w-67\.5 {
+    width: calc(var(--spacing) * 67.5);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
-  .w-\[230px\] {
-    width: 230px;
-  }
-  .w-\[270px\] {
-    width: 270px;
-  }
   .w-full {
     width: 100%;
   }
@@ -596,6 +613,9 @@
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -611,6 +631,10 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-0 {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -659,15 +683,24 @@
   .scrollbar-none {
     scrollbar-width: none;
   }
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
   .list-disc {
     list-style-type: disc;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .appearance-none {
     appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -680,6 +713,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -689,6 +725,12 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -834,9 +876,22 @@
       }
     }
   }
+  .divide-slate-800 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-slate-800);
+    }
+  }
   .self-end {
     align-self: flex-end;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -855,6 +910,9 @@
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
+  .rounded-\[22px\] {
+    border-radius: 22px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -875,6 +933,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -906,18 +968,24 @@
       border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
     }
   }
+  .border-destructive\/20 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+    }
+  }
+  .border-emerald-500\/10 {
+    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+    }
+  }
   .border-emerald-500\/20 {
     border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
     }
   }
-  .border-emerald-500\/30 {
-    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
-    }
-  }
   .border-emerald-500\/50 {
     border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -942,6 +1010,12 @@
       border-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
     }
   }
+  .border-rose-900\/30 {
+    border-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);
+    }
+  }
   .border-rose-900\/50 {
     border-color: color-mix(in srgb, oklch(41% 0.159 10.272) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -951,6 +1025,12 @@
   .border-sky-500 {
     border-color: var(--color-sky-500);
   }
+  .border-sky-500\/10 {
+    border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+    }
+  }
   .border-sky-500\/20 {
     border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -984,6 +1064,12 @@
   .border-slate-900 {
     border-color: var(--color-slate-900);
   }
+  .border-slate-900\/50 {
+    border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
+    }
+  }
   .border-slate-950 {
     border-color: var(--color-slate-950);
   }
@@ -999,12 +1085,18 @@
   .bg-\[\#1e293b\] {
     background-color: #1e293b;
   }
+  .bg-\[\#1e293b\]\/20 {
+    background-color: color-mix(in oklab, #1e293b 20%, transparent);
+  }
   .bg-\[\#1e293b\]\/30 {
     background-color: color-mix(in oklab, #1e293b 30%, transparent);
   }
   .bg-\[\#1e293b\]\/40 {
     background-color: color-mix(in oklab, #1e293b 40%, transparent);
   }
+  .bg-\[\#151f30\]\/20 {
+    background-color: color-mix(in oklab, #151f30 20%, transparent);
+  }
   .bg-\[\#07090e\]\/80 {
     background-color: color-mix(in oklab, #07090e 80%, transparent);
   }
@@ -1014,6 +1106,9 @@
   .bg-\[\#030712\] {
     background-color: #030712;
   }
+  .bg-\[\#162031\] {
+    background-color: #162031;
+  }
   .bg-\[\#f8fafc\] {
     background-color: #f8fafc;
   }
@@ -1041,6 +1136,9 @@
       background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
     }
   }
+  .bg-border {
+    background-color: var(--color-border);
+  }
   .bg-card {
     background-color: var(--color-card);
   }
@@ -1065,6 +1163,21 @@
   .bg-destructive {
     background-color: var(--color-destructive);
   }
+  .bg-destructive\/10 {
+    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+    }
+  }
+  .bg-emerald-500 {
+    background-color: var(--color-emerald-500);
+  }
+  .bg-emerald-500\/5 {
+    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
+    }
+  }
   .bg-emerald-500\/10 {
     background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1077,6 +1190,9 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
     }
   }
+  .bg-emerald-600 {
+    background-color: var(--color-emerald-600);
+  }
   .bg-indigo-500\/5 {
     background-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1116,12 +1232,24 @@
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-rose-500 {
+    background-color: var(--color-rose-500);
+  }
   .bg-rose-500\/10 {
     background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
     }
   }
+  .bg-rose-600 {
+    background-color: var(--color-rose-600);
+  }
+  .bg-rose-950\/40 {
+    background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
+    }
+  }
   .bg-rose-950\/50 {
     background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1131,15 +1259,30 @@
   .bg-secondary {
     background-color: var(--color-secondary);
   }
+  .bg-secondary\/5 {
+    background-color: color-mix(in srgb, hsl(var(--secondary)) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-secondary) 5%, transparent);
+    }
+  }
   .bg-secondary\/10 {
     background-color: color-mix(in srgb, hsl(var(--secondary)) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
     }
   }
+  .bg-secondary\/20 {
+    background-color: color-mix(in srgb, hsl(var(--secondary)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
+    }
+  }
   .bg-sky-400 {
     background-color: var(--color-sky-400);
   }
+  .bg-sky-500 {
+    background-color: var(--color-sky-500);
+  }
   .bg-sky-500\/5 {
     background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1185,131 +1328,14 @@
       background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent);
     }
   }
+  .bg-slate-950 {
+    background-color: var(--color-slate-950);
+  }
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-linear-to-r {
-    --tw-gradient-position: to right;
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      --tw-gradient-position: to right in oklab;
-    }
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .bg-gradient-to-tr {
-    --tw-gradient-position: to top right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .from-emerald-400 {
-    --tw-gradient-from: var(--color-emerald-400);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-emerald-400\/20 {
-    --tw-gradient-from: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-emerald-500 {
-    --tw-gradient-from: var(--color-emerald-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-red-500 {
-    --tw-gradient-from: var(--color-red-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-sky-400 {
-    --tw-gradient-from: var(--color-sky-400);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-sky-400\/20 {
-    --tw-gradient-from: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-sky-500 {
-    --tw-gradient-from: var(--color-sky-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-slate-100 {
-    --tw-gradient-from: var(--color-slate-100);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .via-blue-500 {
-    --tw-gradient-via: var(--color-blue-500);
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .via-blue-600 {
-    --tw-gradient-via: var(--color-blue-600);
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .via-rose-500 {
-    --tw-gradient-via: var(--color-rose-500);
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .via-slate-200 {
-    --tw-gradient-via: var(--color-slate-200);
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .via-teal-500 {
-    --tw-gradient-via: var(--color-teal-500);
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-  .to-cyan-600 {
-    --tw-gradient-to: var(--color-cyan-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-indigo-500 {
-    --tw-gradient-to: var(--color-indigo-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-indigo-500\/20 {
-    --tw-gradient-to: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-500) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-indigo-600 {
-    --tw-gradient-to: var(--color-indigo-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-pink-600 {
-    --tw-gradient-to: var(--color-pink-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-slate-300 {
-    --tw-gradient-to: var(--color-slate-300);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-slate-400 {
-    --tw-gradient-to: var(--color-slate-400);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-teal-500\/20 {
-    --tw-gradient-to: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-teal-500) 20%, transparent);
-    }
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-teal-600 {
-    --tw-gradient-to: var(--color-teal-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .bg-clip-text {
-    background-clip: text;
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
   }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
@@ -1326,6 +1352,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1341,6 +1370,12 @@
   .p-12 {
     padding: calc(var(--spacing) * 12);
   }
+  .\!px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5) !important;
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1356,9 +1391,15 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .\!py-1 {
+    padding-block: calc(var(--spacing) * 1) !important;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1383,9 +1424,15 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-4\.5 {
+    padding-block: calc(var(--spacing) * 4.5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
@@ -1401,6 +1448,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1422,6 +1472,9 @@
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -1443,6 +1496,9 @@
   .text-right {
     text-align: right;
   }
+  .align-top {
+    vertical-align: top;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1484,6 +1540,9 @@
   .text-\[9px\] {
     font-size: 9px;
   }
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -1526,6 +1585,12 @@
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .text-accent-foreground {
     color: var(--color-accent-foreground);
   }
@@ -1541,12 +1606,24 @@
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
+  .text-emerald-400\/90 {
+    color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-emerald-400) 90%, transparent);
+    }
+  }
   .text-foreground {
     color: var(--color-foreground);
   }
   .text-indigo-400 {
     color: var(--color-indigo-400);
   }
+  .text-indigo-500 {
+    color: var(--color-indigo-500);
+  }
+  .text-indigo-600 {
+    color: var(--color-indigo-600);
+  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -1577,6 +1654,12 @@
   .text-sky-400 {
     color: var(--color-sky-400);
   }
+  .text-sky-400\/70 {
+    color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-sky-400) 70%, transparent);
+    }
+  }
   .text-sky-500 {
     color: var(--color-sky-500);
   }
@@ -1601,15 +1684,15 @@
   .text-slate-700 {
     color: var(--color-slate-700);
   }
-  .text-transparent {
-    color: transparent;
-  }
   .text-white {
     color: var(--color-white);
   }
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .line-through {
     text-decoration-line: line-through;
   }
@@ -1632,6 +1715,12 @@
   .opacity-25 {
     opacity: 25%;
   }
+  .opacity-30 {
+    opacity: 30%;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -1649,6 +1738,10 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_0_0_rgba\(255\,255\,255\,0\.05\)\] {
+    --tw-shadow: 0 1px 0 0 var(--tw-shadow-color, rgba(255,255,255,0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1657,6 +1750,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xl {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1675,18 +1772,36 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .shadow-indigo-500\/10 {
+    --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .shadow-indigo-600\/10 {
+    --tw-shadow-color: color-mix(in srgb, oklch(51.1% 0.262 276.966) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .shadow-rose-600\/10 {
+    --tw-shadow-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-600) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .shadow-rose-950\/10 {
+    --tw-shadow-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-950) 10%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .shadow-sky-500\/10 {
     --tw-shadow-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-sky-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-sky-500\/20 {
-    --tw-shadow-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-sky-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .shadow-slate-950\/20 {
     --tw-shadow-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1696,6 +1811,10 @@
   .ring-slate-400 {
     --tw-ring-color: var(--color-slate-400);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1764,6 +1883,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1772,6 +1895,11 @@
     -webkit-user-select: text;
     user-select: text;
   }
+  .group-open\:rotate-180 {
+    &:is(:where(.group):is([open], :popover-open, :open) *) {
+      rotate: 180deg;
+    }
+  }
   .group-hover\:scale-105 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1782,22 +1910,6 @@
       }
     }
   }
-  .group-hover\:from-white {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --tw-gradient-from: var(--color-white);
-        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-      }
-    }
-  }
-  .group-hover\:to-slate-200 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        --tw-gradient-to: var(--color-slate-200);
-        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-      }
-    }
-  }
   .group-hover\:text-accent-foreground {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1815,6 +1927,13 @@
       }
     }
   }
+  .group-hover\:text-white {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1859,28 +1978,28 @@
       position: absolute;
     }
   }
-  .after\:top-\[2px\] {
+  .after\:top-0\.5 {
     &::after {
       content: var(--tw-content);
-      top: 2px;
+      top: calc(var(--spacing) * 0.5);
     }
   }
-  .after\:left-\[2px\] {
+  .after\:left-0\.5 {
     &::after {
       content: var(--tw-content);
-      left: 2px;
+      left: calc(var(--spacing) * 0.5);
     }
   }
-  .after\:h-\[14px\] {
+  .after\:h-3\.5 {
     &::after {
       content: var(--tw-content);
-      height: 14px;
+      height: calc(var(--spacing) * 3.5);
     }
   }
-  .after\:w-\[14px\] {
+  .after\:w-3\.5 {
     &::after {
       content: var(--tw-content);
-      width: 14px;
+      width: calc(var(--spacing) * 3.5);
     }
   }
   .after\:rounded-full {
@@ -1933,6 +2052,16 @@
       }
     }
   }
+  .hover\:border-sky-500\/20 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
+        }
+      }
+    }
+  }
   .hover\:border-slate-700 {
     &:hover {
       @media (hover: hover) {
@@ -1947,6 +2076,20 @@
       }
     }
   }
+  .hover\:bg-\[\#1e293b\]\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, #1e293b 10%, transparent);
+      }
+    }
+  }
+  .hover\:bg-\[\#1e293b\]\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in oklab, #1e293b 20%, transparent);
+      }
+    }
+  }
   .hover\:bg-\[\#1e293b\]\/40 {
     &:hover {
       @media (hover: hover) {
@@ -1961,6 +2104,13 @@
       }
     }
   }
+  .hover\:bg-emerald-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-emerald-500);
+      }
+    }
+  }
   .hover\:bg-emerald-500\/20 {
     &:hover {
       @media (hover: hover) {
@@ -1985,6 +2135,13 @@
       }
     }
   }
+  .hover\:bg-rose-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-rose-500);
+      }
+    }
+  }
   .hover\:bg-rose-500\/20 {
     &:hover {
       @media (hover: hover) {
@@ -1995,6 +2152,13 @@
       }
     }
   }
+  .hover\:bg-rose-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-rose-600);
+      }
+    }
+  }
   .hover\:bg-rose-950\/20 {
     &:hover {
       @media (hover: hover) {
@@ -2005,6 +2169,16 @@
       }
     }
   }
+  .hover\:bg-rose-950\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(27.1% 0.105 12.094) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-rose-950) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-secondary {
     &:hover {
       @media (hover: hover) {
@@ -2012,6 +2186,16 @@
       }
     }
   }
+  .hover\:bg-secondary\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--secondary)) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-secondary) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-secondary\/50 {
     &:hover {
       @media (hover: hover) {
@@ -2042,6 +2226,13 @@
       }
     }
   }
+  .hover\:bg-slate-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-slate-800);
+      }
+    }
+  }
   .hover\:bg-slate-900 {
     &:hover {
       @media (hover: hover) {
@@ -2080,6 +2271,13 @@
       }
     }
   }
+  .hover\:text-sky-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-sky-300);
+      }
+    }
+  }
   .hover\:text-slate-200 {
     &:hover {
       @media (hover: hover) {
@@ -2108,28 +2306,16 @@
       }
     }
   }
-  .hover\:opacity-95 {
+  .hover\:shadow-indigo-600\/20 {
     &:hover {
       @media (hover: hover) {
-        opacity: 95%;
-      }
-    }
-  }
-  .hover\:shadow-sky-500\/20 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
+        --tw-shadow-color: color-mix(in srgb, oklch(51.1% 0.262 276.966) 20%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-sky-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
+          --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-600) 20%, transparent) var(--tw-shadow-alpha), transparent);
         }
       }
     }
   }
-  .focus\:border-emerald-500 {
-    &:focus {
-      border-color: var(--color-emerald-500);
-    }
-  }
   .focus\:border-sky-500 {
     &:focus {
       border-color: var(--color-sky-500);
@@ -2151,16 +2337,6 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:ring-emerald-500 {
-    &:focus {
-      --tw-ring-color: var(--color-emerald-500);
-    }
-  }
-  .focus\:ring-rose-500 {
-    &:focus {
-      --tw-ring-color: var(--color-rose-500);
-    }
-  }
   .focus\:ring-sky-500 {
     &:focus {
       --tw-ring-color: var(--color-sky-500);
@@ -2172,11 +2348,6 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
-  .focus\:ring-offset-\[\#0f172a\] {
-    &:focus {
-      --tw-ring-offset-color: #0f172a;
-    }
-  }
   .focus\:ring-offset-background {
     &:focus {
       --tw-ring-offset-color: var(--color-background);
@@ -2216,6 +2387,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .active\:scale-100 {
+    &:active {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .sm\:left-0 {
     @media (width >= 40rem) {
       left: calc(var(--spacing) * 0);
@@ -2247,6 +2426,21 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
+  .md\:col-span-3 {
+    @media (width >= 48rem) {
+      grid-column: span 3 / span 3;
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2287,6 +2481,21 @@
       grid-column: span 2 / span 2;
     }
   }
+  .lg\:col-span-6 {
+    @media (width >= 64rem) {
+      grid-column: span 6 / span 6;
+    }
+  }
+  .lg\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
+  .lg\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
   .lg\:w-64 {
     @media (width >= 64rem) {
       width: calc(var(--spacing) * 64);
@@ -2297,6 +2506,11 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  .lg\:grid-cols-6 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
   .lg\:flex-row {
     @media (width >= 64rem) {
       flex-direction: row;
@@ -2343,27 +2557,27 @@ html, body {
 }
 * {
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.4);
 }
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
 }
 ::-webkit-scrollbar-button {
   display: none;
 }
 ::-webkit-scrollbar-track {
-  background: transparent;
+  background: rgba(15, 23, 42, 0.4);
+  border-radius: 9999px;
 }
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--border));
+  background: rgba(100, 116, 139, 0.5);
   border-radius: 9999px;
   border: 1px solid transparent;
   background-clip: padding-box;
-  transition: background-color 0.2s ease;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground));
+  background: rgba(148, 163, 184, 0.8);
 }
 input[type="date"], input[type="time"], input[type="datetime-local"] {
   position: relative;
@@ -2494,48 +2708,6 @@ select {
   inherits: false;
   initial-value: solid;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -2613,6 +2785,11 @@ select {
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -2743,15 +2920,6 @@ select {
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
@@ -2769,6 +2937,7 @@ select {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
diff --git a/templates/audit/list.html b/templates/audit/list.html
index abf8b21..8924a6f 100644
--- a/templates/audit/list.html
+++ b/templates/audit/list.html
@@ -107,17 +107,16 @@
     </div>
 
     <!-- Logs Table -->
-    <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl overflow-hidden mb-8">
-        <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300">
-                <thead>
-                    <tr class="text-xs font-bold text-slate-400 uppercase tracking-wider bg-slate-900/30">
-                        <th class="px-6 py-4">Timestamp</th>
-                        <th class="px-6 py-4">User</th>
-                        <th class="px-6 py-4">Event</th>
-                        <th class="px-6 py-4">Target Entity</th>
-                        <th class="px-6 py-4">IP / Details</th>
-                        <th class="px-6 py-4 text-right">Replay Payload</th>
+    {{ ui::table_container_open(id="audit-table", has_top_scroll=true, max_height="68vh") }}
+            <table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative">
+                <thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
+                    <tr class="text-xs font-bold text-slate-400 uppercase tracking-wider">
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Timestamp</th>
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">User</th>
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Event</th>
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Target Entity</th>
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">IP / Details</th>
+                        <th class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right">Replay Payload</th>
                     </tr>
                 </thead>
                 <tbody class="divide-y divide-slate-800">
@@ -215,8 +214,7 @@
                     {% endif %}
                 </tbody>
             </table>
-        </div>
-    </div>
+    {{ ui::table_container_close(id="audit-table", has_top_scroll=true) }}
 
     <!-- Footer Navigation -->
     <div class="mt-6 text-center text-sm text-slate-400">
@@ -225,7 +223,7 @@
 </div>
 
 <!-- Purge Modal Dialog -->
-<div id="purge-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
+<div id="purge-modal" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
     <div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
     <div class="modal-content relative z-10 w-full max-w-md scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl">
         <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-400 mb-3">
diff --git a/templates/auth/edit_user.html b/templates/auth/edit_user.html
index 190f890..8ac8df5 100644
--- a/templates/auth/edit_user.html
+++ b/templates/auth/edit_user.html
@@ -15,7 +15,7 @@
 
         {% if let Some(err) = error %}
             <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 mt-0.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                 </svg>
                 <span>{{ err }}</span>
@@ -24,7 +24,7 @@
 
         {% if let Some(msg) = success %}
             <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2.5">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 mt-0.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
                 </svg>
                 <span>{{ msg }}</span>
diff --git a/templates/auth/users.html b/templates/auth/users.html
index a612154..b2a35cc 100644
--- a/templates/auth/users.html
+++ b/templates/auth/users.html
@@ -26,15 +26,14 @@
     </div>
 
     <!-- User List -->
-    <div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl overflow-hidden">
-        <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300">
-                <thead>
+    {{ ui::table_container_open(id="users-table", has_top_scroll=false, max_height="auto") }}
+            <table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative">
+                <thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
                     <tr class="text-xs font-bold text-slate-400 uppercase tracking-wider">
-                        <th scope="col" class="px-6 py-4">Username</th>
-                        <th scope="col" class="px-6 py-4">Role</th>
-                        <th scope="col" class="px-6 py-4">Created At</th>
-                        <th scope="col" class="px-6 py-4 text-right">Actions</th>
+                        <th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Username</th>
+                        <th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Role</th>
+                        <th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031]">Created At</th>
+                        <th scope="col" class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right">Actions</th>
                     </tr>
                 </thead>
                 <tbody class="divide-y divide-slate-800">
@@ -97,8 +96,7 @@
                     {% endif %}
                 </tbody>
             </table>
-        </div>
-    </div>
+    {{ ui::table_container_close(id="users-table", has_top_scroll=false) }}
 
     <div class="mt-6 text-center text-sm text-slate-400">
         <a href="/auth/password" class="font-medium text-sky-400 hover:underline">← Back to Account Settings</a>
diff --git a/templates/components/macros.html b/templates/components/macros.html
index b7ffd42..3a9d480 100644
--- a/templates/components/macros.html
+++ b/templates/components/macros.html
@@ -64,7 +64,7 @@
 {% endmacro %}
 
 {% macro modal(id, title, content, close_label="Close") %}
-<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
+<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
     <div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
     <div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
         <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
@@ -80,7 +80,7 @@
 {% endmacro %}
 
 {% macro modal_open(id, title) %}
-<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
+<div id="{{ id }}" class="modal-dialog fixed inset-0 z-50 items-center justify-center hidden" role="dialog" aria-modal="true">
     <div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
     <div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
         <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
@@ -234,7 +234,7 @@
     {% endif %}
     <label class="relative inline-flex items-center cursor-pointer">
         <input type="checkbox" name="{{ name }}" class="sr-only peer" {% if checked %}checked{% endif %}>
-        <div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
+        <div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-slate-400 after:rounded-full after:h-3.5 after:w-3.5 after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
     </label>
 </div>
 {% endmacro %}
@@ -279,7 +279,7 @@
             </span>
             <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </button>
-        <div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
+        <div class="datepicker-popover absolute left-0 z-20 mt-2 w-67.5 p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
             <div class="flex items-center justify-between mb-3.5">
                 <button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
@@ -315,7 +315,7 @@
             </span>
             <svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </button>
-        <div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
+        <div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-57.5 p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
             <div class="flex gap-2 justify-center items-center">
                 <div class="flex flex-col items-center">
                     <span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
@@ -360,7 +360,7 @@
 {% endmacro %}
 
 {% macro tabs_content_open() %}
-<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
+<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-20">
 {% endmacro %}
 
 {% macro tab_pane_open(group, id, is_active=true) %}
@@ -388,3 +388,54 @@
     </div>
 </div>
 {% endmacro %}
+
+{% macro table_container_open(id, has_top_scroll=true, max_height="68vh") %}
+{% if has_top_scroll %}
+<!-- Top Horizontal Scrollbar (Synced) -->
+<div id="{{ id }}-scrollbar-top" class="overflow-x-auto w-full scrollbar-thin mb-3 bg-[#1e293b]/20 border border-slate-900/50 rounded-xl py-1 px-2">
+    <div id="{{ id }}-scrollbar-top-inner" style="height: 1px;"></div>
+</div>
+{% endif %}
+
+<!-- Table Container -->
+<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden">
+    <div id="{{ id }}-container" class="overflow-auto scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }};">
+{% endmacro %}
+
+{% macro table_container_close(id, has_top_scroll=true) %}
+    </div>
+</div>
+
+{% if has_top_scroll %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const topScroll = document.getElementById('{{ id }}-scrollbar-top');
+    const tableContainer = document.getElementById('{{ id }}-container');
+    const topScrollInner = document.getElementById('{{ id }}-scrollbar-top-inner');
+    const table = tableContainer ? tableContainer.querySelector('table') : null;
+
+    if (topScroll && tableContainer && topScrollInner && table) {
+        const updateWidth = () => {
+            topScrollInner.style.width = table.scrollWidth + 'px';
+        };
+
+        // Initialize width mapping
+        updateWidth();
+
+        // Observe both resizing of the table and changes to table layout
+        const resizeObserver = new ResizeObserver(() => updateWidth());
+        resizeObserver.observe(table);
+
+        // Sync scroll positions
+        topScroll.addEventListener('scroll', () => {
+            tableContainer.scrollLeft = topScroll.scrollLeft;
+        });
+        tableContainer.addEventListener('scroll', () => {
+            topScroll.scrollLeft = tableContainer.scrollLeft;
+        });
+    }
+});
+</script>
+{% endif %}
+{% endmacro %}
+
diff --git a/templates/developers/list.html b/templates/developers/list.html
index 0512259..2d7af78 100644
--- a/templates/developers/list.html
+++ b/templates/developers/list.html
@@ -77,7 +77,7 @@
                         </div>
 
                         <!-- Action Buttons -->
-                        <div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                        <div class="flex items-center gap-2 shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                             <a href="/developers/{{ dev.id.unwrap().to_hex() }}/edit" class="p-2 rounded-lg bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 text-sky-400 transition" title="Edit Developer">
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 20.013a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
diff --git a/templates/docs/sidebar.html b/templates/docs/sidebar.html
index 2cb4645..f5d6b45 100644
--- a/templates/docs/sidebar.html
+++ b/templates/docs/sidebar.html
@@ -38,6 +38,7 @@
         <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
         <a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
         <a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
+        <a href="/docs/tables" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/tables">Tables & Scroll Sync</a>
 
         <span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
         <a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/docs/visuals">Avatars & Badges</a>
@@ -83,6 +84,7 @@
             <span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
             <a href="/docs/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/tabs-accordion">Tabs & Accordions</a>
             <a href="/docs/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/scrollbars">Custom Scrollbars</a>
+            <a href="/docs/tables" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/tables">Tables & Scroll Sync</a>
 
             <span class="px-3 text-[9px] font-bold text-slate-650 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
             <a href="/docs/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition sheet-close" data-wiki-path="/docs/visuals">Avatars & Badges</a>
diff --git a/templates/docs/tables.html b/templates/docs/tables.html
new file mode 100644
index 0000000..7fcf7ee
--- /dev/null
+++ b/templates/docs/tables.html
@@ -0,0 +1,161 @@
+{% extends "base.html" %}
+{% import "components/macros.html" as ui %}
+
+{% block title %}Tables & Scroll Sync - Design System Wiki{% endblock %}
+
+{% block content %}
+<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
+    
+    <!-- Left Navigation Sidebar -->
+    {% include "docs/sidebar.html" %}
+
+    <!-- Main Content -->
+    <div class="flex-1 space-y-8">
+        
+        <!-- Header -->
+        <div class="pb-6 border-b border-border">
+            <span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
+            <h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tables & Scroll Sync</h1>
+            <p class="text-muted-foreground text-sm mt-2 leading-relaxed">
+                A standardized container macro for horizontal scroll synchronization and scrollbar-fitting layout. It resolves the common usability issue of unreachable scrollbars on wide tables.
+            </p>
+        </div>
+
+        <!-- Section Usage -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">Container Showcase</h2>
+            <p class="text-xs text-muted-foreground">
+                The macro standardizes the background styling, shadows, rounded borders, vertical height bounds, sticky headers, and outputs a synced scrollbar clone that rests at the top of the table.
+            </p>
+            
+            <div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
+                <!-- Tab Headers -->
+                <div class="flex border-b border-border/60 pb-1.5">
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 cursor-pointer" onclick="toggleWikiTabs(this, 'table-sandbox')">Interactive Demo</button>
+                    <button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 cursor-pointer" onclick="toggleWikiTabs(this, 'table-code')">Askama Usage</button>
+                </div>
+                
+                <!-- Demo Viewport -->
+                <div id="table-sandbox" class="wiki-pane">
+                    {{ ui::table_container_open(id="docs-demo-table", has_top_scroll=true, max_height="250px") }}
+                        <table class="min-w-full divide-y divide-slate-800 text-left text-xs text-slate-300 relative">
+                            <thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
+                                <tr class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">ID Code</th>
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Full Name</th>
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Position Title</th>
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Base Office</th>
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] whitespace-nowrap">Current Shift Status</th>
+                                    <th class="sticky top-0 z-10 px-5 py-3 bg-[#162031] text-right whitespace-nowrap">Actions & Config</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-slate-800 bg-[#151f30]/20">
+                                <tr class="hover:bg-[#1e293b]/20 transition">
+                                    <td class="px-5 py-3 font-mono text-sky-400">#001_a9f</td>
+                                    <td class="px-5 py-3 font-semibold text-slate-200">Arthur Dent</td>
+                                    <td class="px-5 py-3">Sandwich Maker</td>
+                                    <td class="px-5 py-3">Space Station 4</td>
+                                    <td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[9px] font-bold">ACTIVE</span></td>
+                                    <td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
+                                </tr>
+                                <tr class="hover:bg-[#1e293b]/20 transition">
+                                    <td class="px-5 py-3 font-mono text-sky-400">#002_c3d</td>
+                                    <td class="px-5 py-3 font-semibold text-slate-200">Tricia McMillan</td>
+                                    <td class="px-5 py-3">Reporter / Anchor</td>
+                                    <td class="px-5 py-3">Sector 12 Office</td>
+                                    <td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 text-[9px] font-bold">ON DUTY</span></td>
+                                    <td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
+                                </tr>
+                                <tr class="hover:bg-[#1e293b]/20 transition">
+                                    <td class="px-5 py-3 font-mono text-sky-400">#003_e5f</td>
+                                    <td class="px-5 py-3 font-semibold text-slate-200">Ford Prefect</td>
+                                    <td class="px-5 py-3">Researcher</td>
+                                    <td class="px-5 py-3">Betelgeuse V</td>
+                                    <td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 border border-amber-500/20 text-[9px] font-bold">TRAVELING</span></td>
+                                    <td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
+                                </tr>
+                                <tr class="hover:bg-[#1e293b]/20 transition">
+                                    <td class="px-5 py-3 font-mono text-sky-400">#004_g7h</td>
+                                    <td class="px-5 py-3 font-semibold text-slate-200">Zaphod Beeblebrox</td>
+                                    <td class="px-5 py-3">Ex-President</td>
+                                    <td class="px-5 py-3">Heart of Gold</td>
+                                    <td class="px-5 py-3"><span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 border border-rose-500/20 text-[9px] font-bold">SUSPENDED</span></td>
+                                    <td class="px-5 py-3 text-right"><button class="text-sky-400 hover:underline font-semibold cursor-pointer">View Detail</button></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    {{ ui::table_container_close(id="docs-demo-table", has_top_scroll=true) }}
+                </div>
+                
+                <!-- Code Snippet Area -->
+                <div id="table-code" class="wiki-pane hidden space-y-4">
+                    <div class="relative group">
+                        <button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-400 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5 cursor-pointer" onclick="copyCodeSnippet(this)">
+                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
+                            Copy Markup
+                        </button>
+                        <pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
+
+{{ ui::table_container_open(id="my-custom-table", has_top_scroll=true, max_height="68vh") }}
+    &lt;table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative"&gt;
+        &lt;thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]"&gt;
+            &lt;tr class="text-xs font-bold text-slate-400 uppercase tracking-wider"&gt;
+                &lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]"&gt;Column 1&lt;/th&gt;
+                &lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031]"&gt;Column 2&lt;/th&gt;
+                &lt;th class="sticky top-0 z-10 px-6 py-4 bg-[#162031] text-right"&gt;Actions&lt;/th&gt;
+            &lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tbody class="divide-y divide-slate-800"&gt;
+            &lt;tr class="hover:bg-[#1e293b]/20 transition"&gt;
+                &lt;td class="px-6 py-4"&gt;Cell Data A1&lt;/td&gt;
+                &lt;td class="px-6 py-4"&gt;Cell Data A2&lt;/td&gt;
+                &lt;td class="px-6 py-4 text-right"&gt;Edit&lt;/td&gt;
+            &lt;/tr&gt;
+        &lt;/tbody&gt;
+    &lt;/table&gt;
+{{ ui::table_container_close(id="my-custom-table", has_top_scroll=true) }}</code></pre>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Technical Specification Section -->
+        <section class="space-y-4">
+            <h2 class="text-lg font-bold text-slate-200">How It Works</h2>
+            <div class="border border-border rounded-3xl p-6 bg-secondary/10 space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="space-y-2">
+                        <h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Top Scroll Sync Logic</h4>
+                        <p class="text-xs text-muted-foreground leading-relaxed">
+                            Since HTML natively positions horizontal scrollbars only at the bottom of overflow elements, the component generates a custom dummy scroll container at the top of the table. A Javascript listener observes layout resizing and syncs the horizontal offsets of both the top scroll track and the main table scroll track dynamically.
+                        </p>
+                    </div>
+                    <div class="space-y-2">
+                        <h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Rounded Corner Clipping Fix</h4>
+                        <p class="text-xs text-muted-foreground leading-relaxed">
+                            To prevent scrollbars from clipping at the corners of high-radius panels (like Shadcn's <code>rounded-3xl</code> panels), the border and shadow styling are kept on the outer wrapper, while the overflow scroll boundary is restricted to an inner container with slightly smaller radius adjustments (<code>rounded-[22px]</code>).
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </div>
+</div>
+
+<script>
+    function toggleWikiTabs(btn, paneId) {
+        const card = btn.closest('.border-border');
+        if (!card) return;
+        card.querySelectorAll('button').forEach(b => {
+            b.classList.remove('border-sky-500', 'text-sky-400');
+            b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-slate-250');
+        });
+        btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-slate-250');
+        btn.classList.add('border-sky-500', 'text-sky-400');
+        card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
+        const target = card.querySelector('#' + paneId);
+        if (target) target.classList.remove('hidden');
+    }
+</script>
+{% endblock %}
diff --git a/templates/tasks/dashboard.html b/templates/tasks/dashboard.html
index c24ac43..04a603d 100644
--- a/templates/tasks/dashboard.html
+++ b/templates/tasks/dashboard.html
@@ -63,7 +63,7 @@
                     <div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start gap-4 transition duration-300 {% if item.task.is_completed %} opacity-60 {% endif %} relative overflow-hidden group">
                         
                         <!-- Checkmark Indicator -->
-                        <div class="flex-shrink-0 mt-0.5">
+                        <div class="shrink-0 mt-0.5">
                             {% if item.task.is_completed %}
                                 <div class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/50 flex items-center justify-center text-emerald-400">
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
@@ -103,7 +103,7 @@
                         </div>
 
                         <!-- Action Buttons -->
-                        <div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                        <div class="flex items-center gap-2 shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                             {% if !item.task.is_completed %}
                                 <form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/complete" method="post" class="inline">
                                     <button type="submit" class="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 transition" title="Mark Completed">