diff --git a/Controllers/SpjDriverController/SpjDriverController.cs b/Controllers/SpjDriverController/SpjDriverController.cs
index f6275b3..6e122aa 100644
--- a/Controllers/SpjDriverController/SpjDriverController.cs
+++ b/Controllers/SpjDriverController/SpjDriverController.cs
@@ -50,7 +50,7 @@ public class SpjDriverController : Controller
     }
 
 
-    [HttpGet("/submit/struk")]
+    [HttpGet("submit/struk")]
     public IActionResult Struk()
     {
         return View("~/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml");
diff --git a/Views/Admin/Transport/SpjAdmin/History/Details.cshtml b/Views/Admin/Transport/SpjAdmin/History/Details.cshtml
index afae3a4..6689305 100644
--- a/Views/Admin/Transport/SpjAdmin/History/Details.cshtml
+++ b/Views/Admin/Transport/SpjAdmin/History/Details.cshtml
@@ -5,7 +5,7 @@
 
 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
     <!-- Header -->
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -19,8 +19,8 @@
         <!-- SPJ Information Card -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Muhammad Yusuf</h2>
@@ -35,7 +35,7 @@
                 </div>
                 <div class="flex justify-between items-center py-2 border-b border-gray-50">
                     <span class="text-sm text-gray-600">Plat Nomor</span>
-                    <span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
+                    <span class="bg-cyan-50 text-cyan-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
                 </div>
                 <div class="flex justify-between items-center py-2 border-b border-gray-50">
                     <span class="text-sm text-gray-600">Nomer Pintu</span>
@@ -52,8 +52,8 @@
         <!-- Summary Card -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="bar-chart-3"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
@@ -84,8 +84,8 @@
         <!-- Pickup Locations -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>
diff --git a/Views/Admin/Transport/SpjAdmin/History/Index.cshtml b/Views/Admin/Transport/SpjAdmin/History/Index.cshtml
index 7e5bc52..0092624 100644
--- a/Views/Admin/Transport/SpjAdmin/History/Index.cshtml
+++ b/Views/Admin/Transport/SpjAdmin/History/Index.cshtml
@@ -4,7 +4,7 @@
 }
 
 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Admin")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -79,8 +79,8 @@
         @foreach (var spj in spjList)
         {
             <a href="@Url.Action("Details", "Admin", new { id = spj.Id })" class="block">
-                <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-orange-200 transition-all duration-300 relative overflow-hidden">
-                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-orange-400 to-orange-500"></div>
+                <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-cyan-200 transition-all duration-300 relative overflow-hidden">
+                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-cyan-500"></div>
                 
                 <div class="flex items-start justify-between mb-3">
                     <div class="flex-1 min-w-0">
@@ -111,8 +111,8 @@
                 <div class="bg-gray-50 rounded-xl p-3 mb-3">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
-                                <i class="w-5 h-5 text-orange-600" data-lucide="car"></i>
+                            <div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
+                                <i class="w-5 h-5 text-cyan-600" data-lucide="car"></i>
                             </div>
                             <div>
                                 <div class="font-bold text-gray-900 text-sm">@spj.Plat</div>
diff --git a/Views/Admin/Transport/SpjAdmin/Home/Index.cshtml b/Views/Admin/Transport/SpjAdmin/Home/Index.cshtml
index e0cf642..c5dbab6 100644
--- a/Views/Admin/Transport/SpjAdmin/Home/Index.cshtml
+++ b/Views/Admin/Transport/SpjAdmin/Home/Index.cshtml
@@ -5,7 +5,7 @@
 
 <div class="w-full lg:max-w-sm mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-hidden">
     <div class="relative z-10">
-        <div class="bg-gradient-to-br from-orange-500 via-orange-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6">
+        <div class="bg-gradient-to-br from-cyan-500 via-cyan-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6">
             
             
             <div class="relative z-10 pt-8 pb-4">
@@ -15,8 +15,8 @@
                         
                         <div class="flex items-center space-x-4">
                             <div class="relative">
-                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-orange-100 p-1 shadow-lg">
-                                    <div class="w-full h-full rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-inner">
+                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-cyan-100 p-1 shadow-lg">
+                                    <div class="w-full h-full rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center shadow-inner">
                                         <i class="w-8 h-8 text-white" data-lucide="user"></i>
                                     </div>
                                 </div>
@@ -29,7 +29,7 @@
                             <div class="flex flex-col">
                                 <h1 class="text-xl font-bold text-white leading-tight">Yusuf</h1>
                                 <div class="flex items-center space-x-2">
-                                    <span class="bg-orange-700/30 text-orange-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-orange-400/20">
+                                    <span class="bg-cyan-700/30 text-cyan-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-cyan-400/20">
                                         Administrator
                                     </span>
                                 </div>
@@ -63,7 +63,7 @@
                 
                 <div class="mt-4 text-center">
                     <h2 class="text-white/90 text-lg font-semibold">Selamat Datang!</h2>
-                    <p class="text-orange-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p>
+                    <p class="text-cyan-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p>
                 </div>
             </div>
         </div>
diff --git a/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml b/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml
index da52ca4..de8eb29 100644
--- a/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml
+++ b/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml
@@ -112,7 +112,7 @@
 
 
 <div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
-    <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
+    <div class="bg-cyan-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -164,7 +164,7 @@
         </div>
 
         <div class="space-y-3 mb-4">
-            <button id="start-scanner" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
+            <button id="start-scanner" class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
                 <i class="w-5 h-5 inline mr-2" data-lucide="camera"></i>
                 Mulai Scan
             </button>
@@ -262,7 +262,7 @@
             </div>
             <h3 id="modal-title" class="text-xl font-bold mb-3 text-gray-800"></h3>
             <p id="modal-message" class="text-gray-600 mb-6 leading-relaxed"></p>
-            <button id="modal-close" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-xl transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
+            <button id="modal-close" class="bg-cyan-500 hover:bg-cyan-600 text-white px-8 py-3 rounded-xl transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                 OK
             </button>
         </div>
@@ -381,7 +381,7 @@
                     '<div class="spj-code">' + spj.platNomor + '|' + spj.nomorPintu + '</div>' +
                     @* '<div class="spj-details">' +
                         '<span>' + spj.driverName + '</span>' +
-                        '<span class="bg-orange-300 rounded-full px-2 py-1 text-xs text-gray-500">' + spj.nomorPintu + '</span>' +
+                        '<span class="bg-cyan-300 rounded-full px-2 py-1 text-xs text-gray-500">' + spj.nomorPintu + '</span>' +
                     '</div>' + *@
                     '<div style="font-size: 11px; color: #9ca3af; font-family: monospace;">' + spj.text + '</div>' +
                 '</div>'
@@ -452,7 +452,7 @@
                 if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                     this.startBtn.disabled = true;
                     this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Browser Tidak Didukung';
-                    this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600');
+                    this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
                     this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
                     this.showError('Browser Anda tidak mendukung akses kamera. Gunakan browser modern seperti Chrome, Firefox, atau Safari.');
                     return;
@@ -461,7 +461,7 @@
                 if (typeof Html5Qrcode === 'undefined') {
                     this.startBtn.disabled = true;
                     this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Library Tidak Dimuat';
-                    this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600');
+                    this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
                     this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
                     this.showError('Library scanner tidak dapat dimuat. Periksa koneksi internet dan refresh halaman.');
                     return;
@@ -942,7 +942,7 @@
                 `;
                 
                 const warningContent = `
-                    <div class="bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 rounded-2xl p-6 border border-yellow-200 shadow-inner">
+                    <div class="bg-gradient-to-br from-yellow-50 via-amber-50 to-cyan-50 rounded-2xl p-6 border border-yellow-200 shadow-inner">
                         <div class="flex items-center justify-center mb-4">
                             <div class="bg-gradient-to-r from-yellow-500 to-amber-600 text-white rounded-xl px-4 py-2 shadow-lg">
                                 <span class="font-mono font-bold text-xl tracking-wider">${code}</span>
diff --git a/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml b/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml
index 5340fda..6a2281f 100644
--- a/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml
+++ b/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml
@@ -12,10 +12,10 @@
                     <!-- Home Button -->
                     <a href="@Url.Action("Index", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
                         <div class="relative">
-                            <i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="home"></i>
-                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div>
+                            <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="home"></i>
+                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
                         </div>
-                        <span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">Home</span>
+                        <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">Home</span>
                     </a>
                     
                     <div class="w-12"></div>
@@ -24,17 +24,17 @@
 
                     <a href="@Url.Action("History", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
                         <div class="relative">
-                            <i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
-                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div>
+                            <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
+                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
                         </div>
-                        <span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">History</span>
+                        <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">History</span>
                     </a>
                 </div>
             </div>
             
             <!-- Center Submit -->
             <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
-                <a href="@Url.Action("Scan", "SpjAdmin")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200">
+                <a href="@Url.Action("Scan", "SpjAdmin")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
                     <i class="w-6 h-6 text-white" data-lucide="camera"></i>
                 </a>
             </div>
diff --git a/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml b/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml
index 2b157b4..561004d 100644
--- a/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml
+++ b/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml
@@ -4,7 +4,7 @@
 }
 
 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -17,8 +17,8 @@
     <div class="px-4 pt-4">
         <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 mb-4">
             <div class="flex items-center gap-3 mb-3">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
                 </div>
                 <div>
                     <h3 class="font-bold text-gray-900">CV Tri Berkah Sejahtera</h3>
@@ -34,8 +34,8 @@
     <div class="px-4 pb-6">
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Form Pembatalan</h2>
@@ -63,7 +63,7 @@
                         Batal
                     </a>
                     <button type="submit"
-                            class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg">
+                            class="flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg">
                         Konfirmasi
                     </button>
                 </div>
diff --git a/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml b/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml
index 194780b..21f841c 100644
--- a/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml
+++ b/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml
@@ -4,9 +4,9 @@
 }
 
 <div class="w-full lg:max-w-sm mx-auto min-h-screen">
-        <div class="bg-orange-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
+        <div class="bg-cyan-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
             <div class="flex items-center justify-center relative">
-                <a href="@Url.Action("Index", "Home")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
+                <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
                 </a>
                 <h1 class="text-xl font-bold">Detail Lokasi</h1>
@@ -14,9 +14,9 @@
         </div>
 
         <div class="flex justify-center -mt-10 mb-6 relative">
-            <div class="bg-orange-100 border border-orange-400 px-4 py-2 rounded-xl shadow flex flex-col items-center">
+            <div class="bg-cyan-100 border border-cyan-400 px-4 py-2 rounded-xl shadow flex flex-col items-center">
                 <span class="text-green-700 font-bold text-lg">B 9632 TOR</span>
-                <span class="text-orange-500 text-xs mt-1">(JRC 005)</span>
+                <span class="text-cyan-500 text-xs mt-1">(JRC 005)</span>
             </div>
         </div>
 
@@ -39,14 +39,14 @@
                 </p>
             </div>
 
-            <div class="space-y-6">
+            @* <div class="space-y-6">
                 <form method="post" enctype="multipart/form-data">
                     <h3 class="font-bold text-gray-800 text-center text-lg tracking-wide mb-4">Masukkan Odometer</h3>
                     <div class="flex justify-center">
                         <div class="relative flex items-center justify-center">
                             <img src="@Url.Content("~/driver/odo_simple.svg")" class="overflow-visible drop-shadow-lg scale-110" alt="">
                             <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
-                                <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="7" name="Odometer" id="input-odometer" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-orange-400 transition" placeholder="000000" />
+                                <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="7" name="Odometer" id="input-odometer" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-cyan-400 transition" placeholder="000000" />
                             </div>
                         </div>
                     </div>
@@ -54,16 +54,83 @@
                     <input type="hidden" name="Longitude" id="input-longitude" />
                     <input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
                     <div class="pt-6 flex gap-3">
-                        <a href="@Url.Action("Batal", "DetailPenjemputan")" class="w-full bg-red-500 text-white py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-red-600 transition-all duration-200 flex items-center justify-center gap-2">
+                        <a href="@Url.Action("BatalJemput", "SpjDriver")" class="w-full bg-red-500 text-white py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-red-600 transition-all duration-200 flex items-center justify-center gap-2">
                             Batal Angkut
                         </a>
-                        <button type="submit" class="hover:cursor-pointer w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-orange-600 transition-all duration-200 flex items-center justify-center gap-2">
+                        <button type="submit" class="hover:cursor-pointer w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
                             Submit
                         </button>
                     </div>
                 </form>
+        </div> *@
+
+        <div class="mt-6 space-y-4">
+            <h3 class="font-bold text-gray-800 text-center text-lg tracking-wide">Data Pengangkutan</h3>
+            
+            <div class="bg-gray-50 rounded-xl p-4 shadow-sm">
+                <div class="mb-4">
+                    <label for="input-berat" class="block text-sm font-medium text-gray-700 mb-1">Berat Sampah (kg)</label>
+                    <div class="relative">
+                        <input type="number" step="0.01" min="0" name="BeratSampah" id="input-berat" 
+                               class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5 
+                                      focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all" 
+                               placeholder="0.00" required />
+                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                            <span class="text-gray-500">kg</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <label for="input-tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pengangkutan</label>
+                    <input type="datetime-local" name="TanggalPengangkutan" id="input-tanggal" 
+                           class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5 
+                                  focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all" 
+                           required />
+                </div>
+            </div>
         </div>
 
+        <div class="mt-6 mb-16">
+            <form method="post" action="@Url.Action("SubmitPenjemputan", "SpjDriver")" class="space-y-4">
+                <input type="hidden" name="BeratSampah" id="hidden-berat" />
+                <input type="hidden" name="TanggalPengangkutan" id="hidden-tanggal" />
+                
+                <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
+                    <i class="w-5 h-5" data-lucide="check-circle"></i>
+                    Simpan Data Pengangkutan
+                </button>
+                
+                <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="block text-center w-full bg-gray-200 text-gray-700 py-3 rounded-xl font-medium shadow hover:bg-gray-300 transition-all duration-200">
+                    Kembali
+                </a>
+            </form>
+        </div>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                const form = document.querySelector('form');
+                const inputBerat = document.getElementById('input-berat');
+                const inputTanggal = document.getElementById('input-tanggal');
+                const hiddenBerat = document.getElementById('hidden-berat');
+                const hiddenTanggal = document.getElementById('hidden-tanggal');
+                
+                form.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    
+                    if (!inputBerat.value || !inputTanggal.value) {
+                        alert('Mohon lengkapi semua data pengangkutan');
+                        return;
+                    }
+                    
+                    hiddenBerat.value = inputBerat.value;
+                    hiddenTanggal.value = inputTanggal.value;
+                    
+                    this.submit();
+                });
+            });
+        </script>
+
         <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
     </div>
 
diff --git a/Views/Admin/Transport/SpjDriver/History/Details.cshtml b/Views/Admin/Transport/SpjDriver/History/Details.cshtml
index 4e5b2bf..fe83e4d 100644
--- a/Views/Admin/Transport/SpjDriver/History/Details.cshtml
+++ b/Views/Admin/Transport/SpjDriver/History/Details.cshtml
@@ -5,9 +5,9 @@
 
 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
     <!-- Header -->
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
         <div class="flex items-center justify-between">
-            <a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
+            <a href="@Url.Action("HistoryDetails", "SpjDriver")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
             </a>
             <h1 class="text-lg font-bold">Detail Perjalanan</h1>
@@ -19,8 +19,8 @@
         <!-- SPJ Information Card -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Data SPJ</h2>
@@ -35,7 +35,7 @@
                 </div>
                 <div class="flex justify-between items-center py-2 border-b border-gray-50">
                     <span class="text-sm text-gray-600">Plat Nomor</span>
-                    <span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
+                    <span class="bg-cyan-50 text-cyan-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
                 </div>
                 <div class="flex justify-between items-center py-2 border-b border-gray-50">
                     <span class="text-sm text-gray-600">Nomer Pintu</span>
@@ -52,8 +52,8 @@
         <!-- Summary Card -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="bar-chart-3"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
@@ -84,8 +84,8 @@
         <!-- Pickup Locations -->
         <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
-                    <i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i>
+                <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
+                    <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>
diff --git a/Views/Admin/Transport/SpjDriver/History/Index.cshtml b/Views/Admin/Transport/SpjDriver/History/Index.cshtml
index 200f83f..fe73631 100644
--- a/Views/Admin/Transport/SpjDriver/History/Index.cshtml
+++ b/Views/Admin/Transport/SpjDriver/History/Index.cshtml
@@ -4,7 +4,7 @@
 }
 
 <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -73,14 +73,14 @@
     <div class="px-4 py-4 space-y-3">
         @foreach (var spj in spjList)
         {
-            <a href="@Url.Action("Details", "History", new { id = spj.Id })" class="block">
-                <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-orange-200 transition-all duration-300 relative overflow-hidden">
-                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-orange-400 to-orange-500"></div>
+            <a href="@Url.Action("HistoryDetails", "SpjDriver", new { id = spj.Id })" class="block">
+                <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-cyan-200 transition-all duration-300 relative overflow-hidden">
+                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-cyan-500"></div>
                 
                 <div class="flex items-start justify-between mb-3">
                     <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-2 mb-1">
-                            <div class="w-2 h-2 bg-orange-400 rounded-full"></div>
+                            <div class="w-2 h-2 bg-cyan-400 rounded-full"></div>
                             <span class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. SPJ</span>
                         </div>
                         <div class="font-bold text-gray-900 text-sm">@spj.NoSpj</div>
@@ -106,8 +106,8 @@
                 <div class="bg-gray-50 rounded-xl p-3 mb-3">
                     <div class="flex items-center justify-between">
                         <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
-                                <i class="w-5 h-5 text-orange-600" data-lucide="car"></i>
+                            <div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
+                                <i class="w-5 h-5 text-cyan-600" data-lucide="car"></i>
                             </div>
                             <div>
                                 <div class="font-bold text-gray-900 text-sm">@spj.Plat</div>
diff --git a/Views/Admin/Transport/SpjDriver/Home/Index.cshtml b/Views/Admin/Transport/SpjDriver/Home/Index.cshtml
index dcab756..4d7f8fb 100644
--- a/Views/Admin/Transport/SpjDriver/Home/Index.cshtml
+++ b/Views/Admin/Transport/SpjDriver/Home/Index.cshtml
@@ -3,72 +3,93 @@
     ViewData["Title"] = "Home Page";
 }
 
- <div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
+ <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
     
-        <!-- Header -->
-        <div class="absolute top-0 w-full lg:max-w-sm mx-auto bg-orange-500 text-white rounded-br-[125px] h-[250px] flex flex-row justify-between items-start px-6 py-6 shadow-lg z-20">
+        <div class="absolute top-0 w-full lg:max-w-sm mx-auto bg-gradient-to-r from-cyan-600 to-cyan-500 text-white rounded-b-3xl h-[250px] flex flex-col justify-between px-6 py-6 shadow-lg z-10">
+            <div class="flex justify-between items-center">
             <div class="flex flex-col">
-                <h1 class="text-md font-bold leading-tight text-white">Bonny Agung Putra</h1>
-                <p class="text-xs opacity-90 font-medium text-orange-100">Driver UPST</span></p>
-                <!-- Your Location -->
-                <div class="mt-5 flex items-center gap-2">
+                <h1 class="text-xl font-bold text-white mb-1">Bonny Agung Putra</h1>
+                <div class="flex items-center gap-2">
+                <div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
+                <p class="text-sm font-medium text-cyan-100">Driver</p>
+                </div>
+            </div>
+            <div class="relative">
+                <div class="w-12 h-12 rounded-full border-2 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer bg-white/20 hover:bg-white/30 transition-all duration-200" id="profileMenuButton">
+                <i class="w-6 h-6 text-white" data-lucide="user"></i>
+                </div>
+                <div id="profileMenuDropdown" class="absolute top-14 right-0 mt-2 w-36 bg-white rounded-lg shadow-xl py-1.5 z-50 hidden border border-gray-100">
+                <form method="post" asp-controller="Auth" asp-action="Logout">
+                    <button type="submit" class="flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition">
+                    <i class="w-4 h-4" data-lucide="log-out"></i>
+                    Logout
+                    </button>
+                </form>
+                </div>
+            </div>
+            </div>
+            
+            @* <div class="flex flex-col space-y-2">
+                <div class="flex items-center gap-2">
+                    <div class="p-1.5 bg-white/20 rounded-lg">
                     <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
-                    <span class="text-sm opacity-90">Lokasi Anda:</span>
+                    </div>
+                    <span class="text-sm font-medium text-white/90">Lokasi Anda:</span>
                 </div>
-                <p id="userLocation" class="font-semibold text-xs tracking-wide cursor-pointer underline text-white hover:text-orange-200 transition">
+                <div class="bg-white/10 rounded-lg p-3 border border-white/20">
+                    <p id="userLocation" class="font-medium text-sm cursor-pointer text-white hover:text-cyan-200 transition-colors">
                     Mendeteksi lokasi...
-                </p>
-            </div>
-            <div class="flex items-center justify-center">
-                <div class="relative flex flex-col items-center justify-center">
-                    <div class="w-12 h-12 rounded-full border-3 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer group" id="profileMenuButton">
-                        <i class="w-8 h-8 text-white" data-lucide="user"></i>
-                    </div>
-                    <!-- Dropdown Menu -->
-                    <div id="profileMenuDropdown" class="absolute top-12 right-0 mt-2 w-32 bg-white rounded shadow-lg py-2 z-50 hidden">
-                        <form method="post" asp-controller="Auth" asp-action="Logout">
-                            <button type="submit" class="hover:cursor-pointer flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition rounded-md">
-                                <i class="w-4 h-4" data-lucide="log-out"></i>
-                                Logout
-                            </button>
-                        </form>
-                    </div>
+                    </p>
                 </div>
-             
-            </div>
+            </div> *@
         </div>
 
-        <!-- SPJ Data Card -->
-        <div class="bg-green-500 text-white mx-4 px-6 py-6 mt-40 rounded-2xl relative overflow-hidden shadow-lg z-21">
-            <div class="absolute right-0 bottom-0 opacity-30 pointer-events-none select-none" style="width: 160px; height: 160px;">
-                <img src="@Url.Content("~/driver/tree.svg")" alt="tree" class="w-full h-full object-contain">
+        <div class="bg-gradient-to-br from-cyan-700 to-cyan-900 text-white mx-4 px-5 py-5 mt-25 rounded-2xl relative shadow-lg border border-cyan-700/50 z-20">
+            <div class="absolute inset-0 opacity-5">
+            <div class="absolute -top-5 -right-5 w-24 h-24 bg-white rounded-full"></div>
+            <div class="absolute top-20 -left-5 w-12 h-12 bg-white rounded-full"></div>
             </div>
+            
+            <div class="absolute right-3 bottom-3 opacity-15 pointer-events-none select-none" style="width: 120px; height: 120px;">
+            <img src="@Url.Content("~/driver/tree.svg")" alt="tree" class="w-full h-full object-contain">
+            </div>
+            
             <div class="relative z-10">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-bold">Data SPJ</h2>
-                    <div class="flex flex-col items-end">
-                        <div class="bg-white text-green-600 px-4 py-2 rounded-full text-base font-bold shadow-md flex items-center gap-2">
-                            <span>B 9632 TOR</span>
-                        </div>
-                        <div class="text-xs text-white mt-1 font-semibold tracking-wide opacity-80">(JRC 005)</div>
-                    </div>
+            <div class="flex justify-between items-start mb-4">
+                <div>
+                <h2 class="text-xl font-bold mb-1 text-white">Data SPJ</h2>
+                <div class="w-10 h-1 bg-cyan-300 rounded-full"></div>
                 </div>
-                <div class="space-y-1 mt-2">
-                    <p class="text-sm opacity-90">No. SPJ</p>
-                    <p class="font-bold text-lg tracking-wide">SPJ/07-2025/PKM/000476</p>
-                    <p class="text-sm opacity-90 mt-3">Tujuan Pembuangan</p>
-                    <p class="font-bold text-lg tracking-wide">Taman Barito</p>
+                <div class="flex flex-col items-end gap-2">
+                <div class="bg-white text-cyan-800 px-3 py-1.5 rounded-xl text-sm font-bold shadow flex items-center gap-1.5">
+                    <i class="w-4 h-4 text-green-600" data-lucide="truck"></i>
+                    <span>B 9632 TOR</span>
                 </div>
-                <!-- DLH logo -->
-                <div class="absolute bottom-2 right-4 opacity-80 cursor-pointer" style="width: 60px; height: 60px;" id="qrCodeTrigger">
-                    <div class="bg-white p-2 rounded-xl hover:shadow-lg transition-shadow">
-                      <img src="@Url.Content("~/driver/images/qr.png")" alt="DLH Logo" class="w-full h-full object-contain">
-                    </div>
+                <div class="bg-cyan-700/70 text-white px-2.5 py-1 rounded-full text-xs font-medium tracking-wide border border-cyan-600/50">
+                    JRC 005
                 </div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-2 gap-3 mb-3">
+                <div class="bg-white/10 rounded-xl p-3 border border-white/20 col-span-2">
+                <p class="text-xs text-cyan-100 mb-1">No. SPJ</p>
+                <p class="font-bold text-base text-white">SPJ/07-2025/PKM/000476</p>
+                </div>
+                <div class=" p-3 col-span-2">
+                <p class="text-xs text-cyan-100 mb-1">Tujuan Pembuangan</p>
+                <p class="font-bold text-base text-white">BANTAR GEBANG</p>
+                </div>
+            </div>
+            
+            <div class="absolute -bottom-3 right-1" id="qrCodeTrigger">
+                <div class="bg-white p-2.5 rounded-xl shadow-lg border-2 border-cyan-200 hover:shadow-xl transition-all duration-300 transform hover:scale-105">
+                <img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code" class="w-14 h-14 object-contain">
+                </div>
+            </div>
             </div>
         </div>
 
-        <!-- Lokasi Pengangkutan -->
         <div class="px-4 mt-8">
             <div class="flex justify-between items-center mb-4">
                 <h3 class="text-lg font-semibold text-gray-800">Lokasi Pengangkutan</h3>
@@ -80,8 +101,7 @@
                 </div>
             </div>
             <div class="flex flex-col gap-2">
-                    <!-- Location 1 - Berlangsung -->
-                    <a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
+                    <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="hover:cursor-pointer">
                        <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 relative">
                             <div class="flex justify-between items-start">
                                 <div class="flex-1">
@@ -100,7 +120,6 @@
                             </div>
                         </div>
                     </a>
-                    <!-- Location 2 - Selesai -->
                     <a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
                         <div class="bg-green-100 border border-green-200 rounded-lg p-4 mb-3 relative">
                             <div class="flex justify-between items-start">
@@ -121,7 +140,6 @@
                         </div>
                     </a>
 
-                    <!-- Location 3 - Batal -->
                     <a href="@Url.Action("Batal", "DetailPenjemputan")" class="hover:cursor-pointer">
                         <div class="bg-red-100 border border-red-200 rounded-lg p-4 mb-3 relative">
                             <div class="flex justify-between items-start">
@@ -145,31 +163,25 @@
                 </div>
          </div>
 
-        <!-- Bottom Navigation -->
         <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
       
     </div>
 
-    <!-- QR Code Popup Modal -->
     <div id="qrCodeModal" class="fixed inset-0 bg-black/75 items-center justify-center z-50 hidden">
         <div class="bg-white rounded-2xl p-6 mx-4 max-w-sm relative">
-            <!-- Close Button -->
             <button id="closeQrModal" class="absolute top-3 right-3 w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors">
                 <i class="w-4 h-4 text-gray-600" data-lucide="x"></i>
             </button>
             
-            <!-- Modal Header -->
             <div class="text-center mb-4">
                 <h3 class="text-lg font-bold text-gray-800">QR Code SPJ</h3>
                 <p class="text-sm text-gray-600">SPJ/07-2025/PKM/000476</p>
             </div>
             
-            <!-- QR Code Display -->
             <div class="bg-white p-4 rounded-xl border-2 border-gray-200 flex items-center justify-center">
                 <img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code SPJ" class="w-64 h-64 object-contain">
             </div>
             
-            <!-- Instructions -->
             <div class="mt-4 text-center">
                 <p class="text-xs text-gray-500">Arahkan QR Code ke scanner untuk verifikasi</p>
             </div>
diff --git a/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml b/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml
index a5e8097..270b374 100644
--- a/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml
+++ b/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml
@@ -12,10 +12,10 @@
                     <!-- Home Button -->
                     <a href="@Url.Action("Index", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
                         <div class="relative">
-                            <i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="home"></i>
-                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div>
+                            <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="home"></i>
+                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
                         </div>
-                        <span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">Home</span>
+                        <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">Home</span>
                     </a>
                     
                     <div class="w-12"></div>
@@ -24,22 +24,22 @@
 
                     <a href="@Url.Action("History", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
                         <div class="relative">
-                            <i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
-                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div>
+                            <i class="w-7 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
+                            <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
                         </div>
-                        <span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">History</span>
+                        <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">History</span>
                     </a>
                 </div>
             </div>
             
             <!-- Center Submit -->
             <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
-                <a href="@Url.Action("Submit", "SpjDriver")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200">
+                <a href="@Url.Action("Submit", "SpjDriver")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
                     <i class="w-6 h-6 text-white" data-lucide="truck"></i>
                 </a>
 
                 @* <!-- ini untuk yang struk -->   
-                <a href="@Url.Action("Struk", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200">
+                <a href="@Url.Action("Struk", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
                     <i class="w-6 h-6 text-white" data-lucide="file-text"></i>
                 </a> *@
             </div>
diff --git a/Views/Admin/Transport/SpjDriver/Submit/Index.cshtml b/Views/Admin/Transport/SpjDriver/Submit/Index.cshtml
index 5d5b6be..ea7de88 100644
--- a/Views/Admin/Transport/SpjDriver/Submit/Index.cshtml
+++ b/Views/Admin/Transport/SpjDriver/Submit/Index.cshtml
@@ -4,7 +4,7 @@
 }
 
 <div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
-    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-3 py-4 rounded-b-2xl relative pb-12">
+    <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-3 py-4 rounded-b-2xl relative pb-12">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -17,8 +17,8 @@
     <div class="px-4 py-6 -mt-6 relative z-10">
         <div class="bg-white rounded-2xl p-5 border border-gray-100">
             <div class="flex items-center gap-3 mb-4">
-                <div class="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center">
-                    <i class="w-6 h-6 text-orange-600" data-lucide="camera"></i>
+                <div class="w-12 h-12 bg-gradient-to-br from-cyan-100 to-cyan-200 rounded-2xl flex items-center justify-center">
+                    <i class="w-6 h-6 text-cyan-600" data-lucide="camera"></i>
                 </div>
                 <div>
                     <h2 class="text-lg font-bold text-gray-900">Foto Muatan Kendaraan</h2>
@@ -29,7 +29,7 @@
                 </div>
             </div>
             
-            <div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-orange-400 transition-colors cursor-pointer" id="upload-area">
+            <div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-cyan-400 transition-colors cursor-pointer" id="upload-area">
                 <input type="file" name="FotoKondisiKendaraan" accept="image/jpeg,image/png" class="hidden" id="foto-upload">
                 <label for="foto-upload" class="cursor-pointer w-full block">
                     <div class="relative w-full h-60 bg-center bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3 overflow-hidden preview-container" id="preview-container">
@@ -37,7 +37,7 @@
                             <div class="upload-icon-container">
                                 <img class="object-cover" src="~/driver/images/trukk.jpg" alt="contoh gambar">
                                 <p class="absolute inset-0 flex items-center justify-center text-white">Contoh Foto</p>
-                                @* <i class="w-8 h-8 text-orange-600" data-lucide="upload-cloud" id="preview-icon"></i> *@
+                                @* <i class="w-8 h-8 text-cyan-600" data-lucide="upload-cloud" id="preview-icon"></i> *@
                             </div>
                         </div>
                         <img id="preview-image" src="#" alt="Preview" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" />
@@ -83,7 +83,7 @@
                             <i class="w-4 h-4 text-gray-500" data-lucide="refresh-cw"></i>
                         </button>
                     </div>
-                    <p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-orange-600 hover:text-orange-800 transition mt-1 flex items-center gap-2">
+                    <p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-cyan-600 hover:text-cyan-800 transition mt-1 flex items-center gap-2">
                         <span>Mendeteksi lokasi...</span>
                     </p>
                     <p class="text-xs text-gray-400 mt-1">Klik lokasi di atas untuk update posisi Anda</p>
@@ -97,7 +97,7 @@
                     <input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
                     <div class="flex gap-3 pt-4">
                         <button type="submit" id="submit-btn"
-                                class="floating-button flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg flex items-center justify-center gap-2">
+                                class="floating-button flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg flex items-center justify-center gap-2">
                             <i class="w-5 h-5" data-lucide="upload"></i>
                             <span>Unggah</span>
                         </button>
@@ -246,8 +246,6 @@
     }
     
     .upload-icon-container {
-        width: 64px;
-        height: 64px;
         background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
         border-radius: 16px;
         display: flex;
diff --git a/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml b/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml
index 1b9e41c..c0f365b 100644
--- a/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml
+++ b/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml
@@ -8,7 +8,7 @@
 }
 
 <div class="max-w-sm mx-auto bg-white min-h-screen">
-    <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
+    <div class="bg-cyan-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
         <div class="flex items-center justify-between">
             <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                 <i class="w-5 h-5" data-lucide="chevron-left"></i>
@@ -21,10 +21,10 @@
     <div class="px-8 py-4">
         <div class="mb-6">
             <div class="flex flex-col items-center space-y-2 mb-4">
-                <div class="bg-orange-100 rounded-full p-3">
-                    <i data-lucide="camera" class="w-7 h-7 text-orange-500"></i>
+                <div class="bg-cyan-100 rounded-full p-3">
+                    <i data-lucide="camera" class="w-7 h-7 text-cyan-500"></i>
                 </div>
-                <h2 class="text-xl font-bold text-orange-500">Scan Struk Otomatis</h2>
+                <h2 class="text-xl font-bold text-cyan-500">Scan Struk Otomatis</h2>
                 <p class="text-sm text-gray-500 text-center">Arahkan kamera ke struk atau upload foto struk untuk membaca data secara otomatis.</p>
         </div>
 
@@ -58,7 +58,7 @@
             </div>
 
             <div class="space-y-3 mb-4">
-                @* <button id="start-scanner" type="button" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
+                @* <button id="start-scanner" type="button" class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
                     <i class="w-5 h-5 inline mr-2" data-lucide="camera"></i>
                     Mulai Scan Struk
                 </button> *@
@@ -130,12 +130,12 @@
         </div>
     </div>
 
-     <form action="@Url.Action("ProcessStruk", "Submit")" method="post" class="px-8 py-4 space-y-6 bg-white">
+     <form action="@Url.Action("Struk", "SpjDriver")" method="post" class="px-8 py-4 space-y-6 bg-white">
             <div class="flex flex-col items-center space-y-2">
-                <div class="bg-orange-100 rounded-full p-3">
-                    <i data-lucide="edit-3" class="w-7 h-7 text-orange-500"></i>
+                <div class="bg-cyan-100 rounded-full p-3">
+                    <i data-lucide="edit-3" class="w-7 h-7 text-cyan-500"></i>
                 </div>
-                <h2 class="text-xl font-bold text-orange-500">Data Struk</h2>
+                <h2 class="text-xl font-bold text-cyan-500">Data Struk</h2>
                 <p class="text-sm text-gray-500 text-center">Periksa dan lengkapi data struk sebelum submit.</p>
             </div>
             
@@ -147,7 +147,7 @@
                         type="text" 
                         id="NomorStruk" 
                         name="NomorStruk" 
-                        class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                        class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                         required 
                         placeholder="8001441" 
                     />
@@ -161,7 +161,7 @@
                         type="text" 
                         id="NomorPolisi" 
                         name="NomorPolisi" 
-                        class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                        class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                         placeholder="B 9125 PJA" 
                     />
                 </div>
@@ -173,7 +173,7 @@
                         type="text" 
                         id="Penugasan" 
                         name="Penugasan" 
-                        class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                        class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                         placeholder="JAKARTA BARAT" 
                     />
                 </div>
@@ -186,7 +186,7 @@
                             type="text" 
                             id="WaktuMasuk" 
                             name="WaktuMasuk" 
-                            class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                            class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                             placeholder="2025-08-04, 08:13:51" 
                         />
                     </div>
@@ -196,7 +196,7 @@
                             type="text" 
                             id="WaktuKeluar" 
                             name="WaktuKeluar" 
-                            class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                            class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                             placeholder="2025-08-04, 14:35:10" 
                         />
                     </div>
@@ -210,7 +210,7 @@
                             type="number" 
                             id="BeratMasuk" 
                             name="BeratMasuk" 
-                            class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                            class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                             placeholder="23280" 
                         />
                     </div>
@@ -220,7 +220,7 @@
                             type="number" 
                             id="BeratKeluar" 
                             name="BeratKeluar" 
-                            class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                            class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                             placeholder="13540" 
                         />
                     </div>
@@ -233,7 +233,7 @@
                         type="number" 
                         id="BeratNett" 
                         name="BeratNett" 
-                        class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" 
+                        class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2" 
                         required 
                         placeholder="9740" 
                     />
@@ -241,7 +241,7 @@
                 </div>
             </div>
             
-            <button type="submit" class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-lg font-semibold shadow hover:from-orange-600 hover:to-orange-500 transition-all duration-150 flex items-center justify-center gap-2">
+            <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-lg font-semibold shadow hover:from-cyan-600 hover:to-cyan-500 transition-all duration-150 flex items-center justify-center gap-2">
                 <i data-lucide="send" class="w-5 h-5"></i>
                 Submit Data Struk
             </button>
@@ -403,7 +403,7 @@
             disableScanner(message) {
                 this.startBtn.disabled = true;
                 this.startBtn.innerHTML = `<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>${message}`;
-                this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600');
+                this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
                 this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
             }
 
diff --git a/package.json b/package.json
index 808a53b..7f787c2 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "tailwindcss": "^4.1.10"
   },
   "scripts": {
-    "watch": "npx @tailwindcss/cli -i ./wwwroot/website/css/site.css -o ./wwwroot/website/css/watch.css --watch"
+    "watch": "npx @tailwindcss/cli -i ./wwwroot/website/css/site.css -o ./wwwroot/website/css/watch.css --watch",
+    "watch-driver": "npx @tailwindcss/cli -i ./wwwroot/driver/css/site.css -o ./wwwroot/driver/css/watch.css --watch"
   }
 }
diff --git a/wwwroot/driver/css/watch.css b/wwwroot/driver/css/watch.css
index c9e323a..56de810 100644
--- a/wwwroot/driver/css/watch.css
+++ b/wwwroot/driver/css/watch.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -10,6 +10,7 @@
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-100: oklch(93.6% 0.032 17.717);
     --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
@@ -24,8 +25,11 @@
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-orange-700: oklch(55.3% 0.195 38.402);
     --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
     --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-300: oklch(87.9% 0.169 91.605);
     --color-amber-400: oklch(82.8% 0.189 84.429);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-amber-600: oklch(66.6% 0.179 58.318);
@@ -33,6 +37,7 @@
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
@@ -41,29 +46,50 @@
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
     --color-emerald-50: oklch(97.9% 0.021 166.113);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
     --color-teal-50: oklch(98.4% 0.014 180.72);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-cyan-50: oklch(98.4% 0.019 200.873);
+    --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
+    --color-cyan-300: oklch(86.5% 0.127 207.078);
+    --color-cyan-400: oklch(78.9% 0.154 211.53);
+    --color-cyan-500: oklch(71.5% 0.143 215.221);
+    --color-cyan-600: oklch(60.9% 0.126 221.723);
+    --color-cyan-700: oklch(52% 0.105 223.128);
+    --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-indigo-50: oklch(96.2% 0.018 272.314);
     --color-indigo-100: oklch(93% 0.034 272.788);
     --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-200: oklch(90.2% 0.063 306.703);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
     --color-pink-50: oklch(97.1% 0.014 343.198);
     --color-rose-50: oklch(96.9% 0.015 12.422);
     --color-rose-500: oklch(64.5% 0.246 16.439);
@@ -89,8 +115,15 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -103,6 +136,13 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --font-weight-light: 300;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -117,6 +157,7 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
+    --radius-4xl: 2rem;
     --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -126,6 +167,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --blur-lg: 16px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -279,6 +321,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -291,6 +336,9 @@
   .visible {
     visibility: visible;
   }
+  .visible\! {
+    visibility: visible !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -309,6 +357,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -333,9 +384,24 @@
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
+  .-top-5 {
+    top: calc(var(--spacing) * -5);
+  }
+  .-top-15 {
+    top: calc(var(--spacing) * -15);
+  }
+  .-top-17 {
+    top: calc(var(--spacing) * -17);
+  }
+  .-top-23 {
+    top: calc(var(--spacing) * -23);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -354,6 +420,9 @@
   .top-14 {
     top: calc(var(--spacing) * 14);
   }
+  .top-20 {
+    top: calc(var(--spacing) * 20);
+  }
   .top-50 {
     top: calc(var(--spacing) * 50);
   }
@@ -363,6 +432,9 @@
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
+  .-right-5 {
+    right: calc(var(--spacing) * -5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -384,20 +456,26 @@
   .right-full {
     right: 100%;
   }
+  .-bottom-0 {
+    bottom: calc(var(--spacing) * -0);
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
   .-bottom-1 {
     bottom: calc(var(--spacing) * -1);
   }
+  .-bottom-3 {
+    bottom: calc(var(--spacing) * -3);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
-  .bottom-2 {
-    bottom: calc(var(--spacing) * 2);
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
   }
   .bottom-8 {
     bottom: calc(var(--spacing) * 8);
@@ -411,12 +489,21 @@
   .bottom-100 {
     bottom: calc(var(--spacing) * 100);
   }
+  .-left-5 {
+    left: calc(var(--spacing) * -5);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .left-1\/7 {
+    left: calc(1/7 * 100%);
+  }
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
@@ -456,6 +543,9 @@
   .z-99 {
     z-index: 99;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .order-0 {
     order: 0;
   }
@@ -519,6 +609,12 @@
   .col-auto {
     grid-column: auto;
   }
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .float-end {
     float: inline-end;
   }
@@ -696,6 +792,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-25 {
+    margin-top: calc(var(--spacing) * 25);
+  }
   .mt-40 {
     margin-top: calc(var(--spacing) * 40);
   }
@@ -729,9 +828,24 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-7 {
+    margin-bottom: calc(var(--spacing) * 7);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
   .mb-auto {
     margin-bottom: auto;
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
@@ -780,6 +894,9 @@
   .table-row {
     display: table-row;
   }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -849,6 +966,9 @@
   .h-75 {
     height: calc(var(--spacing) * 75);
   }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
@@ -861,6 +981,9 @@
   .h-full {
     height: 100%;
   }
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -879,6 +1002,9 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-4\/5 {
+    width: calc(4/5 * 100%);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -918,6 +1044,9 @@
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
+  .w-30 {
+    width: calc(var(--spacing) * 30);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -948,12 +1077,45 @@
   .w-max {
     width: max-content;
   }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -987,6 +1149,13 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .origin-top {
+    transform-origin: top;
+  }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -999,6 +1168,10 @@
     --tw-translate-x: calc(var(--spacing) * 16);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1011,12 +1184,27 @@
     --tw-translate-y: calc(var(--spacing) * 12);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .scale-110 {
     --tw-scale-x: 110%;
     --tw-scale-y: 110%;
     --tw-scale-z: 110%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -1101,6 +1289,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1113,6 +1304,12 @@
   .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1162,6 +1359,13 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1169,6 +1373,27 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-amber-100 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-amber-100);
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1231,6 +1456,10 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-t-2xl {
+    border-top-left-radius: var(--radius-2xl);
+    border-top-right-radius: var(--radius-2xl);
+  }
   .rounded-t-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-top-right-radius: var(--radius-3xl);
@@ -1239,6 +1468,13 @@
     border-top-right-radius: var(--radius-lg);
     border-bottom-right-radius: var(--radius-lg);
   }
+  .rounded-r-xl {
+    border-top-right-radius: var(--radius-xl);
+    border-bottom-right-radius: var(--radius-xl);
+  }
+  .rounded-tr-4xl {
+    border-top-right-radius: var(--radius-4xl);
+  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1251,12 +1487,18 @@
     border-bottom-right-radius: 2rem;
     border-bottom-left-radius: 2rem;
   }
+  .rounded-br-4xl {
+    border-bottom-right-radius: var(--radius-4xl);
+  }
   .rounded-br-\[125px\] {
     border-bottom-right-radius: 125px;
   }
   .rounded-br-full {
     border-bottom-right-radius: calc(infinity * 1px);
   }
+  .rounded-bl-4xl {
+    border-bottom-left-radius: var(--radius-4xl);
+  }
   .rounded-bl-full {
     border-bottom-left-radius: calc(infinity * 1px);
   }
@@ -1292,6 +1534,10 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-t-0 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1304,6 +1550,12 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-amber-50 {
+    border-color: var(--color-amber-50);
+  }
+  .border-amber-100 {
+    border-color: var(--color-amber-100);
+  }
   .border-amber-200 {
     border-color: var(--color-amber-200);
   }
@@ -1316,6 +1568,42 @@
   .border-blue-200 {
     border-color: var(--color-blue-200);
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
+  .border-cyan-200 {
+    border-color: var(--color-cyan-200);
+  }
+  .border-cyan-300 {
+    border-color: var(--color-cyan-300);
+  }
+  .border-cyan-400 {
+    border-color: var(--color-cyan-400);
+  }
+  .border-cyan-400\/20 {
+    border-color: color-mix(in srgb, oklch(78.9% 0.154 211.53) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-400) 20%, transparent);
+    }
+  }
+  .border-cyan-600 {
+    border-color: var(--color-cyan-600);
+  }
+  .border-cyan-600\/50 {
+    border-color: color-mix(in srgb, oklch(60.9% 0.126 221.723) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-600) 50%, transparent);
+    }
+  }
+  .border-cyan-700 {
+    border-color: var(--color-cyan-700);
+  }
+  .border-cyan-700\/50 {
+    border-color: color-mix(in srgb, oklch(52% 0.105 223.128) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-700) 50%, transparent);
+    }
+  }
   .border-emerald-400 {
     border-color: var(--color-emerald-400);
   }
@@ -1343,6 +1631,9 @@
   .border-green-200 {
     border-color: var(--color-green-200);
   }
+  .border-green-300 {
+    border-color: var(--color-green-300);
+  }
   .border-green-400 {
     border-color: var(--color-green-400);
   }
@@ -1361,12 +1652,18 @@
       border-color: color-mix(in oklab, var(--color-orange-400) 20%, transparent);
     }
   }
+  .border-purple-200 {
+    border-color: var(--color-purple-200);
+  }
   .border-red-100 {
     border-color: var(--color-red-100);
   }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
+  .border-red-300 {
+    border-color: var(--color-red-300);
+  }
   .border-red-400 {
     border-color: var(--color-red-400);
   }
@@ -1382,6 +1679,12 @@
   .border-white {
     border-color: var(--color-white);
   }
+  .border-white\/10 {
+    border-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .border-white\/20 {
     border-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1400,15 +1703,30 @@
   .border-yellow-200 {
     border-color: var(--color-yellow-200);
   }
+  .border-yellow-300 {
+    border-color: var(--color-yellow-300);
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .bg-\[\#20D3D3\] {
+    background-color: #20D3D3;
+  }
+  .bg-amber-300 {
+    background-color: var(--color-amber-300);
+  }
   .bg-amber-400 {
     background-color: var(--color-amber-400);
   }
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-black\/20 {
+    background-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1433,6 +1751,36 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-cyan-50 {
+    background-color: var(--color-cyan-50);
+  }
+  .bg-cyan-100 {
+    background-color: var(--color-cyan-100);
+  }
+  .bg-cyan-300 {
+    background-color: var(--color-cyan-300);
+  }
+  .bg-cyan-400 {
+    background-color: var(--color-cyan-400);
+  }
+  .bg-cyan-500 {
+    background-color: var(--color-cyan-500);
+  }
+  .bg-cyan-700 {
+    background-color: var(--color-cyan-700);
+  }
+  .bg-cyan-700\/30 {
+    background-color: color-mix(in srgb, oklch(52% 0.105 223.128) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-700) 30%, transparent);
+    }
+  }
+  .bg-cyan-700\/70 {
+    background-color: color-mix(in srgb, oklch(52% 0.105 223.128) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-700) 70%, transparent);
+    }
+  }
   .bg-emerald-400 {
     background-color: var(--color-emerald-400);
   }
@@ -1463,6 +1811,12 @@
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
+  .bg-green-200 {
+    background-color: var(--color-green-200);
+  }
+  .bg-green-300 {
+    background-color: var(--color-green-300);
+  }
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -1490,18 +1844,27 @@
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
+  .bg-orange-700 {
+    background-color: var(--color-orange-700);
+  }
   .bg-orange-700\/30 {
     background-color: color-mix(in srgb, oklch(55.3% 0.195 38.402) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-orange-700) 30%, transparent);
     }
   }
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-200 {
+    background-color: var(--color-red-200);
+  }
   .bg-red-400 {
     background-color: var(--color-red-400);
   }
@@ -1514,6 +1877,9 @@
   .bg-slate-400 {
     background-color: var(--color-slate-400);
   }
+  .bg-teal-400 {
+    background-color: var(--color-teal-400);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1544,12 +1910,21 @@
       background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
     }
   }
+  .bg-white\/95 {
+    background-color: color-mix(in srgb, #fff 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
+    }
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
+  .bg-yellow-200 {
+    background-color: var(--color-yellow-200);
+  }
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
@@ -1564,14 +1939,54 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .from-\[\#20D3D3\] {
+    --tw-gradient-from: #20D3D3;
+    --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-amber-50 {
     --tw-gradient-from: var(--color-amber-50);
     --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-blue-50 {
+    --tw-gradient-from: var(--color-blue-50);
+    --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-blue-100 {
     --tw-gradient-from: var(--color-blue-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));
   }
+  .from-blue-500 {
+    --tw-gradient-from: var(--color-blue-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-blue-600 {
+    --tw-gradient-from: var(--color-blue-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));
+  }
+  .from-cyan-100 {
+    --tw-gradient-from: var(--color-cyan-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));
+  }
+  .from-cyan-300 {
+    --tw-gradient-from: var(--color-cyan-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));
+  }
+  .from-cyan-400 {
+    --tw-gradient-from: var(--color-cyan-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-cyan-500 {
+    --tw-gradient-from: var(--color-cyan-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-cyan-600 {
+    --tw-gradient-from: 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));
+  }
+  .from-cyan-700 {
+    --tw-gradient-from: var(--color-cyan-700);
+    --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-50 {
     --tw-gradient-from: var(--color-emerald-50);
     --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));
@@ -1616,6 +2031,10 @@
     --tw-gradient-from: var(--color-orange-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-purple-50 {
+    --tw-gradient-from: var(--color-purple-50);
+    --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-50 {
     --tw-gradient-from: var(--color-red-50);
     --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));
@@ -1640,6 +2059,10 @@
     --tw-gradient-from: var(--color-slate-700);
     --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-teal-400 {
+    --tw-gradient-from: var(--color-teal-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-white {
     --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));
@@ -1670,6 +2093,16 @@
     --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-cyan-400 {
+    --tw-gradient-via: var(--color-cyan-400);
+    --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-cyan-600 {
+    --tw-gradient-via: var(--color-cyan-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-emerald-50 {
     --tw-gradient-via: var(--color-emerald-50);
     --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);
@@ -1695,6 +2128,10 @@
     --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-\[\#20D3D3\] {
+    --tw-gradient-to: #20D3D3;
+    --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-amber-500 {
     --tw-gradient-to: var(--color-amber-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));
@@ -1707,6 +2144,46 @@
     --tw-gradient-to: var(--color-blue-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));
   }
+  .to-blue-500 {
+    --tw-gradient-to: var(--color-blue-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-blue-600 {
+    --tw-gradient-to: var(--color-blue-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-cyan-50 {
+    --tw-gradient-to: var(--color-cyan-50);
+    --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-cyan-100 {
+    --tw-gradient-to: var(--color-cyan-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));
+  }
+  .to-cyan-200 {
+    --tw-gradient-to: var(--color-cyan-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));
+  }
+  .to-cyan-400 {
+    --tw-gradient-to: var(--color-cyan-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-cyan-500 {
+    --tw-gradient-to: var(--color-cyan-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-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-cyan-900 {
+    --tw-gradient-to: var(--color-cyan-900);
+    --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-emerald-50 {
+    --tw-gradient-to: var(--color-emerald-50);
+    --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-emerald-500 {
     --tw-gradient-to: 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));
@@ -1727,6 +2204,14 @@
     --tw-gradient-to: var(--color-green-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-green-600 {
+    --tw-gradient-to: var(--color-green-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-50 {
+    --tw-gradient-to: var(--color-indigo-50);
+    --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-100 {
     --tw-gradient-to: var(--color-indigo-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));
@@ -1739,10 +2224,6 @@
     --tw-gradient-to: var(--color-orange-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));
   }
-  .to-orange-200 {
-    --tw-gradient-to: var(--color-orange-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));
-  }
   .to-orange-400 {
     --tw-gradient-to: var(--color-orange-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));
@@ -1775,6 +2256,10 @@
     --tw-gradient-to: 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));
   }
+  .to-red-600 {
+    --tw-gradient-to: var(--color-red-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-rose-50 {
     --tw-gradient-to: var(--color-rose-50);
     --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));
@@ -1787,6 +2272,10 @@
     --tw-gradient-to: var(--color-rose-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-50 {
+    --tw-gradient-to: var(--color-slate-50);
+    --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-900 {
     --tw-gradient-to: var(--color-slate-900);
     --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));
@@ -1795,16 +2284,26 @@
     --tw-gradient-to: var(--color-teal-50);
     --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-white {
+    --tw-gradient-to: 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));
+  }
   .to-yellow-50 {
     --tw-gradient-to: var(--color-yellow-50);
     --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-cover {
+    background-size: cover;
+  }
   .bg-clip-text {
     background-clip: text;
   }
   .bg-center {
     background-position: center;
   }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -1817,9 +2316,15 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1844,6 +2349,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1865,9 +2373,15 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -1880,12 +2394,21 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .ps-0 {
     padding-inline-start: calc(var(--spacing) * 0);
   }
@@ -1946,6 +2469,18 @@
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
+  .pt-30 {
+    padding-top: calc(var(--spacing) * 30);
+  }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
@@ -1967,9 +2502,24 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
   .pb-12 {
     padding-bottom: calc(var(--spacing) * 12);
   }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
   .text-center {
     text-align: center;
   }
@@ -2006,10 +2556,21 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2046,6 +2607,10 @@
     --tw-font-weight: var(--font-weight-extrabold);
     font-weight: var(--font-weight-extrabold);
   }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -2075,6 +2640,9 @@
   .break-all {
     word-break: break-all;
   }
+  .text-amber-400 {
+    color: var(--color-amber-400);
+  }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
@@ -2084,6 +2652,15 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-blue-100 {
+    color: var(--color-blue-100);
+  }
+  .text-blue-200 {
+    color: var(--color-blue-200);
+  }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
   .text-blue-600 {
     color: var(--color-blue-600);
   }
@@ -2093,9 +2670,39 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
+  .text-blue-900 {
+    color: var(--color-blue-900);
+  }
+  .text-cyan-100 {
+    color: var(--color-cyan-100);
+  }
+  .text-cyan-100\/70 {
+    color: color-mix(in srgb, oklch(95.6% 0.045 203.388) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-cyan-100) 70%, transparent);
+    }
+  }
+  .text-cyan-500 {
+    color: var(--color-cyan-500);
+  }
+  .text-cyan-600 {
+    color: var(--color-cyan-600);
+  }
+  .text-cyan-700 {
+    color: var(--color-cyan-700);
+  }
+  .text-cyan-800 {
+    color: var(--color-cyan-800);
+  }
   .text-emerald-700 {
     color: var(--color-emerald-700);
   }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -2117,6 +2724,9 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
   .text-green-600 {
     color: var(--color-green-600);
   }
@@ -2126,6 +2736,9 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
+  .text-green-900 {
+    color: var(--color-green-900);
+  }
   .text-orange-100 {
     color: var(--color-orange-100);
   }
@@ -2144,6 +2757,18 @@
   .text-orange-700 {
     color: var(--color-orange-700);
   }
+  .text-orange-800 {
+    color: var(--color-orange-800);
+  }
+  .text-orange-900 {
+    color: var(--color-orange-900);
+  }
+  .text-purple-800 {
+    color: var(--color-purple-800);
+  }
+  .text-purple-900 {
+    color: var(--color-purple-900);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -2168,6 +2793,9 @@
   .text-slate-800 {
     color: var(--color-slate-800);
   }
+  .text-teal-400 {
+    color: var(--color-teal-400);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -2204,12 +2832,21 @@
   .line-through {
     text-decoration-line: line-through;
   }
+  .overline {
+    text-decoration-line: overline;
+  }
   .underline {
     text-decoration-line: underline;
   }
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-5 {
+    opacity: 5%;
+  }
+  .opacity-15 {
+    opacity: 15%;
+  }
   .opacity-25 {
     opacity: 25%;
   }
@@ -2269,10 +2906,17 @@
     --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);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-cyan-200 {
+    --tw-ring-color: var(--color-cyan-200);
+  }
   .ring-orange-200 {
     --tw-ring-color: var(--color-orange-200);
   }
@@ -2312,6 +2956,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -2383,6 +3032,13 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .group-hover\:pointer-events-auto {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        pointer-events: auto;
+      }
+    }
+  }
   .group-hover\:w-full {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2390,6 +3046,26 @@
       }
     }
   }
+  .group-hover\:scale-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 100%;
+        --tw-scale-y: 100%;
+        --tw-scale-z: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
+  .group-hover\:scale-110 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .group-hover\:rotate-180 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2397,6 +3073,13 @@
       }
     }
   }
+  .group-hover\:text-cyan-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-cyan-500);
+      }
+    }
+  }
   .group-hover\:text-orange-500 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2453,6 +3136,44 @@
       }
     }
   }
+  .hover\:border-amber-300\/50 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-amber-300) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:border-blue-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-blue-300);
+      }
+    }
+  }
+  .hover\:border-cyan-200 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-cyan-200);
+      }
+    }
+  }
+  .hover\:border-cyan-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-cyan-400);
+      }
+    }
+  }
+  .hover\:border-green-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-green-300);
+      }
+    }
+  }
   .hover\:border-orange-200 {
     &:hover {
       @media (hover: hover) {
@@ -2460,10 +3181,31 @@
       }
     }
   }
-  .hover\:border-orange-400 {
+  .hover\:border-orange-300 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-orange-400);
+        border-color: var(--color-orange-300);
+      }
+    }
+  }
+  .hover\:bg-amber-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-amber-50);
+      }
+    }
+  }
+  .hover\:bg-blue-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-50);
+      }
+    }
+  }
+  .hover\:bg-blue-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-100);
       }
     }
   }
@@ -2474,6 +3216,20 @@
       }
     }
   }
+  .hover\:bg-cyan-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-cyan-500);
+      }
+    }
+  }
+  .hover\:bg-cyan-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-cyan-600);
+      }
+    }
+  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {
@@ -2537,6 +3293,13 @@
       }
     }
   }
+  .hover\:bg-teal-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-teal-50);
+      }
+    }
+  }
   .hover\:bg-white\/10 {
     &:hover {
       @media (hover: hover) {
@@ -2567,6 +3330,14 @@
       }
     }
   }
+  .hover\:from-cyan-600 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: 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));
+      }
+    }
+  }
   .hover\:from-orange-600 {
     &:hover {
       @media (hover: hover) {
@@ -2575,6 +3346,38 @@
       }
     }
   }
+  .hover\:from-teal-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-teal-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));
+      }
+    }
+  }
+  .hover\:to-blue-600 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-blue-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));
+      }
+    }
+  }
+  .hover\:to-cyan-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-cyan-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));
+      }
+    }
+  }
+  .hover\:to-cyan-700 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-cyan-700);
+        --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));
+      }
+    }
+  }
   .hover\:to-orange-500 {
     &:hover {
       @media (hover: hover) {
@@ -2591,6 +3394,48 @@
       }
     }
   }
+  .hover\:text-amber-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-amber-300);
+      }
+    }
+  }
+  .hover\:text-amber-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-amber-600);
+      }
+    }
+  }
+  .hover\:text-cyan-200 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-cyan-200);
+      }
+    }
+  }
+  .hover\:text-cyan-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-cyan-600);
+      }
+    }
+  }
+  .hover\:text-cyan-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-cyan-700);
+      }
+    }
+  }
+  .hover\:text-cyan-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-cyan-800);
+      }
+    }
+  }
   .hover\:text-orange-200 {
     &:hover {
       @media (hover: hover) {
@@ -2605,10 +3450,24 @@
       }
     }
   }
-  .hover\:text-orange-800 {
+  .hover\:text-teal-600 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-orange-800);
+        color: var(--color-teal-600);
+      }
+    }
+  }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
       }
     }
   }
@@ -2636,6 +3495,16 @@
       }
     }
   }
+  .focus\:border-cyan-400 {
+    &:focus {
+      border-color: var(--color-cyan-400);
+    }
+  }
+  .focus\:border-cyan-500 {
+    &:focus {
+      border-color: var(--color-cyan-500);
+    }
+  }
   .focus\:border-orange-500 {
     &:focus {
       border-color: var(--color-orange-500);
@@ -2657,16 +3526,37 @@
       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-3 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      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-cyan-200 {
+    &:focus {
+      --tw-ring-color: var(--color-cyan-200);
+    }
+  }
+  .focus\:ring-cyan-300 {
+    &:focus {
+      --tw-ring-color: var(--color-cyan-300);
+    }
+  }
+  .focus\:ring-cyan-400 {
+    &:focus {
+      --tw-ring-color: var(--color-cyan-400);
+    }
+  }
+  .focus\:ring-cyan-500 {
+    &:focus {
+      --tw-ring-color: var(--color-cyan-500);
+    }
+  }
   .focus\:ring-orange-200 {
     &:focus {
       --tw-ring-color: var(--color-orange-200);
     }
   }
-  .focus\:ring-orange-400 {
-    &:focus {
-      --tw-ring-color: var(--color-orange-400);
-    }
-  }
   .focus\:ring-orange-500 {
     &:focus {
       --tw-ring-color: var(--color-orange-500);
@@ -2683,11 +3573,318 @@
       outline-style: none;
     }
   }
+  .sm\:mt-8 {
+    @media (width >= 40rem) {
+      margin-top: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:h-5 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:h-16 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 16);
+    }
+  }
+  .sm\:w-5 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:w-16 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 16);
+    }
+  }
+  .sm\:max-w-3xl {
+    @media (width >= 40rem) {
+      max-width: var(--container-3xl);
+    }
+  }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
+    }
+  }
+  .sm\:space-y-6 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-y-reverse: 0;
+        margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+        margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+      }
+    }
+  }
+  .sm\:rounded-3xl {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-3xl);
+    }
+  }
+  .sm\:p-6 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:py-3 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\:pr-12 {
+    @media (width >= 40rem) {
+      padding-right: calc(var(--spacing) * 12);
+    }
+  }
+  .sm\:pl-10 {
+    @media (width >= 40rem) {
+      padding-left: calc(var(--spacing) * 10);
+    }
+  }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .sm\:text-base {
+    @media (width >= 40rem) {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .sm\:text-sm {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:col-span-2 {
+    @media (width >= 48rem) {
+      grid-column: span 2 / span 2;
+    }
+  }
+  .md\:mx-0 {
+    @media (width >= 48rem) {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:mt-8 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 8);
+    }
+  }
+  .md\:mt-20 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 20);
+    }
+  }
+  .md\:mb-0 {
+    @media (width >= 48rem) {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
+  .md\:h-16 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 16);
+    }
+  }
+  .md\:w-1\/2 {
+    @media (width >= 48rem) {
+      width: calc(1/2 * 100%);
+    }
+  }
+  .md\:w-16 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 16);
+    }
+  }
+  .md\:max-w-3xl {
+    @media (width >= 48rem) {
+      max-width: var(--container-3xl);
+    }
+  }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-4 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:space-x-4 {
+    @media (width >= 48rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
+  .md\:rounded-tr-\[200px\] {
+    @media (width >= 48rem) {
+      border-top-right-radius: 200px;
+    }
+  }
+  .md\:px-0 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:px-4 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:py-12 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 12);
+    }
+  }
+  .md\:text-left {
+    @media (width >= 48rem) {
+      text-align: left;
+    }
+  }
+  .md\:text-3xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .md\:text-6xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+  .md\:text-lg {
+    @media (width >= 48rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:text-xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .lg\:order-1 {
+    @media (width >= 64rem) {
+      order: 1;
+    }
+  }
+  .lg\:order-2 {
+    @media (width >= 64rem) {
+      order: 2;
+    }
+  }
+  .lg\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
+  .lg\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
+  .lg\:min-h-\[500px\] {
+    @media (width >= 64rem) {
+      min-height: 500px;
+    }
+  }
+  .lg\:w-1\/2 {
+    @media (width >= 64rem) {
+      width: calc(1/2 * 100%);
+    }
+  }
+  .lg\:max-w-4xl {
+    @media (width >= 64rem) {
+      max-width: var(--container-4xl);
+    }
+  }
   .lg\:max-w-sm {
     @media (width >= 64rem) {
       max-width: var(--container-sm);
     }
   }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .lg\:flex-row {
+    @media (width >= 64rem) {
+      flex-direction: row;
+    }
+  }
+  .lg\:p-8 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .lg\:p-12 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
+  .lg\:px-6 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -2749,6 +3946,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3017,6 +4219,7 @@
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
diff --git a/wwwroot/website/css/watch.css b/wwwroot/website/css/watch.css
index a69e0e2..e59559d 100644
--- a/wwwroot/website/css/watch.css
+++ b/wwwroot/website/css/watch.css
@@ -16,7 +16,6 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-orange-50: oklch(98% 0.016 73.684);
     --color-orange-100: oklch(95.4% 0.038 75.164);
     --color-orange-200: oklch(90.1% 0.076 70.697);
@@ -60,20 +59,19 @@
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
     --color-teal-50: oklch(98.4% 0.014 180.72);
-    --color-teal-100: oklch(95.3% 0.051 180.801);
     --color-teal-400: oklch(77.7% 0.152 181.912);
     --color-teal-500: oklch(70.4% 0.14 182.503);
     --color-teal-600: oklch(60% 0.118 184.704);
-    --color-teal-700: oklch(51.1% 0.096 186.391);
-    --color-teal-800: oklch(43.7% 0.078 188.216);
     --color-cyan-50: oklch(98.4% 0.019 200.873);
     --color-cyan-100: oklch(95.6% 0.045 203.388);
+    --color-cyan-200: oklch(91.7% 0.08 205.041);
     --color-cyan-300: oklch(86.5% 0.127 207.078);
     --color-cyan-400: oklch(78.9% 0.154 211.53);
     --color-cyan-500: oklch(71.5% 0.143 215.221);
     --color-cyan-600: oklch(60.9% 0.126 221.723);
     --color-cyan-700: oklch(52% 0.105 223.128);
     --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-cyan-900: oklch(39.8% 0.07 227.392);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -87,14 +85,9 @@
     --color-indigo-50: oklch(96.2% 0.018 272.314);
     --color-indigo-100: oklch(93% 0.034 272.788);
     --color-indigo-300: oklch(78.5% 0.115 274.713);
-    --color-indigo-700: oklch(45.7% 0.24 277.023);
-    --color-indigo-800: oklch(39.8% 0.195 277.366);
     --color-purple-50: oklch(97.7% 0.014 308.299);
-    --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-purple-500: oklch(62.7% 0.265 303.9);
-    --color-purple-600: oklch(55.8% 0.288 302.321);
-    --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
     --color-pink-50: oklch(97.1% 0.014 343.198);
@@ -125,11 +118,11 @@
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
-    --container-5xl: 64rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -148,12 +141,8 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
-    --text-7xl: 4.5rem;
-    --text-7xl--line-height: 1;
     --font-weight-light: 300;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -181,8 +170,6 @@
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
-    --blur-2xl: 40px;
-    --blur-3xl: 64px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -398,42 +385,21 @@
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
-  .-top-14 {
-    top: calc(var(--spacing) * -14);
+  .-top-5 {
+    top: calc(var(--spacing) * -5);
   }
   .-top-15 {
     top: calc(var(--spacing) * -15);
   }
-  .-top-16 {
-    top: calc(var(--spacing) * -16);
-  }
   .-top-17 {
     top: calc(var(--spacing) * -17);
   }
-  .-top-18 {
-    top: calc(var(--spacing) * -18);
-  }
-  .-top-20 {
-    top: calc(var(--spacing) * -20);
-  }
-  .-top-22 {
-    top: calc(var(--spacing) * -22);
-  }
   .-top-23 {
     top: calc(var(--spacing) * -23);
   }
-  .-top-23\.5 {
-    top: calc(var(--spacing) * -23.5);
-  }
-  .-top-24 {
-    top: calc(var(--spacing) * -24);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -446,9 +412,6 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .top-10 {
-    top: calc(var(--spacing) * 10);
-  }
   .top-12 {
     top: calc(var(--spacing) * 12);
   }
@@ -467,6 +430,9 @@
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
+  .-right-5 {
+    right: calc(var(--spacing) * -5);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -482,69 +448,51 @@
   .right-8 {
     right: calc(var(--spacing) * 8);
   }
-  .right-10 {
-    right: calc(var(--spacing) * 10);
-  }
   .right-16 {
     right: calc(var(--spacing) * 16);
   }
-  .right-20 {
-    right: calc(var(--spacing) * 20);
-  }
   .right-full {
     right: 100%;
   }
-  .-bottom-0 {
-    bottom: calc(var(--spacing) * -0);
-  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
   .-bottom-1 {
     bottom: calc(var(--spacing) * -1);
   }
+  .-bottom-3 {
+    bottom: calc(var(--spacing) * -3);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
-  .bottom-2 {
-    bottom: calc(var(--spacing) * 2);
-  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
   }
   .bottom-8 {
     bottom: calc(var(--spacing) * 8);
   }
-  .bottom-10 {
-    bottom: calc(var(--spacing) * 10);
-  }
   .bottom-16 {
     bottom: calc(var(--spacing) * 16);
   }
-  .bottom-20 {
-    bottom: calc(var(--spacing) * 20);
-  }
   .bottom-50 {
     bottom: calc(var(--spacing) * 50);
   }
   .bottom-100 {
     bottom: calc(var(--spacing) * 100);
   }
+  .-left-5 {
+    left: calc(var(--spacing) * -5);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-1\/3 {
-    left: calc(1/3 * 100%);
-  }
   .left-1\/7 {
     left: calc(1/7 * 100%);
   }
@@ -554,9 +502,6 @@
   .left-8 {
     left: calc(var(--spacing) * 8);
   }
-  .left-10 {
-    left: calc(var(--spacing) * 10);
-  }
   .left-12 {
     left: calc(var(--spacing) * 12);
   }
@@ -659,6 +604,9 @@
   .col-span-1 {
     grid-column: span 1 / span 1;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .float-end {
     float: inline-end;
   }
@@ -749,12 +697,6 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
-  .my-8 {
-    margin-block: calc(var(--spacing) * 8);
-  }
-  .my-10 {
-    margin-block: calc(var(--spacing) * 10);
-  }
   .my-auto {
     margin-block: auto;
   }
@@ -812,9 +754,6 @@
   .-mt-12 {
     margin-top: calc(var(--spacing) * -12);
   }
-  .-mt-16 {
-    margin-top: calc(var(--spacing) * -16);
-  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -845,6 +784,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-25 {
+    margin-top: calc(var(--spacing) * 25);
+  }
   .mt-40 {
     margin-top: calc(var(--spacing) * 40);
   }
@@ -854,9 +796,6 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
@@ -890,21 +829,18 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
   .mb-auto {
     margin-bottom: auto;
   }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
-  .ml-6 {
-    margin-left: calc(var(--spacing) * 6);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -950,9 +886,6 @@
   .table-row {
     display: table-row;
   }
-  .h-0 {
-    height: calc(var(--spacing) * 0);
-  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -1010,15 +943,6 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
-  .h-35 {
-    height: calc(var(--spacing) * 35);
-  }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
-  .h-40 {
-    height: calc(var(--spacing) * 40);
-  }
   .h-50 {
     height: calc(var(--spacing) * 50);
   }
@@ -1058,18 +982,9 @@
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
-  .w-1\/2 {
-    width: calc(1/2 * 100%);
-  }
-  .w-1\/3 {
-    width: calc(1/3 * 100%);
-  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
-  .w-2\/3 {
-    width: calc(2/3 * 100%);
-  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -1124,24 +1039,15 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
-  .w-35 {
-    width: calc(var(--spacing) * 35);
-  }
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
-  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
   .w-50 {
     width: calc(var(--spacing) * 50);
   }
-  .w-52 {
-    width: calc(var(--spacing) * 52);
-  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1235,10 +1141,6 @@
   .origin-top {
     transform-origin: top;
   }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1251,10 +1153,6 @@
     --tw-translate-x: calc(var(--spacing) * 16);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1372,6 +1270,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1432,13 +1333,6 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-8 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1460,13 +1354,6 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-8 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1538,9 +1425,6 @@
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
-  .rounded-4xl {
-    border-radius: var(--radius-4xl);
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1569,27 +1453,9 @@
     border-top-right-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
   }
-  .rounded-tr-2xl {
-    border-top-right-radius: var(--radius-2xl);
-  }
   .rounded-tr-4xl {
     border-top-right-radius: var(--radius-4xl);
   }
-  .rounded-tr-\[100px\] {
-    border-top-right-radius: 100px;
-  }
-  .rounded-tr-\[200px\] {
-    border-top-right-radius: 200px;
-  }
-  .rounded-tr-full {
-    border-top-right-radius: calc(infinity * 1px);
-  }
-  .rounded-tr-lg {
-    border-top-right-radius: var(--radius-lg);
-  }
-  .rounded-tr-xl {
-    border-top-right-radius: var(--radius-xl);
-  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1686,8 +1552,23 @@
   .border-blue-500 {
     border-color: var(--color-blue-500);
   }
-  .border-blue-600 {
-    border-color: var(--color-blue-600);
+  .border-cyan-200 {
+    border-color: var(--color-cyan-200);
+  }
+  .border-cyan-300 {
+    border-color: var(--color-cyan-300);
+  }
+  .border-cyan-600\/50 {
+    border-color: color-mix(in srgb, oklch(60.9% 0.126 221.723) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-600) 50%, transparent);
+    }
+  }
+  .border-cyan-700\/50 {
+    border-color: color-mix(in srgb, oklch(52% 0.105 223.128) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-cyan-700) 50%, transparent);
+    }
   }
   .border-emerald-400 {
     border-color: var(--color-emerald-400);
@@ -1710,9 +1591,6 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-gray-700 {
-    border-color: var(--color-gray-700);
-  }
   .border-green-100 {
     border-color: var(--color-green-100);
   }
@@ -1755,9 +1633,6 @@
   .border-red-400 {
     border-color: var(--color-red-400);
   }
-  .border-red-500 {
-    border-color: var(--color-red-500);
-  }
   .border-slate-200 {
     border-color: var(--color-slate-200);
   }
@@ -1803,9 +1678,6 @@
   .bg-\[\#20D3D3\] {
     background-color: #20D3D3;
   }
-  .bg-\[\#20d3d3\] {
-    background-color: #20d3d3;
-  }
   .bg-amber-300 {
     background-color: var(--color-amber-300);
   }
@@ -1815,12 +1687,6 @@
   .bg-black {
     background-color: var(--color-black);
   }
-  .bg-black\/10 {
-    background-color: color-mix(in srgb, #000 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-    }
-  }
   .bg-black\/20 {
     background-color: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1839,44 +1705,35 @@
       background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
     }
   }
-  .bg-black\/100 {
-    background-color: var(--color-black);
-  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
-  .bg-blue-200 {
-    background-color: var(--color-blue-200);
-  }
-  .bg-blue-300 {
-    background-color: var(--color-blue-300);
-  }
   .bg-blue-400 {
     background-color: var(--color-blue-400);
   }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
-  .bg-blue-600 {
-    background-color: var(--color-blue-600);
-  }
-  .bg-cyan-300 {
-    background-color: var(--color-cyan-300);
+  .bg-cyan-100 {
+    background-color: var(--color-cyan-100);
   }
   .bg-cyan-400 {
     background-color: var(--color-cyan-400);
   }
-  .bg-cyan-600 {
-    background-color: var(--color-cyan-600);
+  .bg-cyan-500 {
+    background-color: var(--color-cyan-500);
   }
   .bg-cyan-700 {
     background-color: var(--color-cyan-700);
   }
-  .bg-cyan-800 {
-    background-color: var(--color-cyan-800);
+  .bg-cyan-700\/70 {
+    background-color: color-mix(in srgb, oklch(52% 0.105 223.128) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-cyan-700) 70%, transparent);
+    }
   }
   .bg-emerald-400 {
     background-color: var(--color-emerald-400);
@@ -1911,6 +1768,9 @@
   .bg-green-200 {
     background-color: var(--color-green-200);
   }
+  .bg-green-300 {
+    background-color: var(--color-green-300);
+  }
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -1920,9 +1780,6 @@
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
-  .bg-indigo-50 {
-    background-color: var(--color-indigo-50);
-  }
   .bg-indigo-300 {
     background-color: var(--color-indigo-300);
   }
@@ -1941,21 +1798,12 @@
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
-  .bg-orange-700 {
-    background-color: var(--color-orange-700);
-  }
   .bg-orange-700\/30 {
     background-color: color-mix(in srgb, oklch(55.3% 0.195 38.402) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-orange-700) 30%, transparent);
     }
   }
-  .bg-purple-50 {
-    background-color: var(--color-purple-50);
-  }
-  .bg-purple-100 {
-    background-color: var(--color-purple-100);
-  }
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
@@ -1980,9 +1828,6 @@
   .bg-slate-400 {
     background-color: var(--color-slate-400);
   }
-  .bg-teal-50 {
-    background-color: var(--color-teal-50);
-  }
   .bg-teal-400 {
     background-color: var(--color-teal-400);
   }
@@ -2061,10 +1906,6 @@
     --tw-gradient-from: var(--color-blue-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));
   }
-  .from-blue-400 {
-    --tw-gradient-from: var(--color-blue-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-blue-500 {
     --tw-gradient-from: var(--color-blue-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));
@@ -2081,10 +1922,22 @@
     --tw-gradient-from: var(--color-cyan-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));
   }
+  .from-cyan-400 {
+    --tw-gradient-from: var(--color-cyan-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-cyan-500 {
     --tw-gradient-from: var(--color-cyan-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-cyan-600 {
+    --tw-gradient-from: 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));
+  }
+  .from-cyan-700 {
+    --tw-gradient-from: var(--color-cyan-700);
+    --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-50 {
     --tw-gradient-from: var(--color-emerald-50);
     --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));
@@ -2093,10 +1946,6 @@
     --tw-gradient-from: var(--color-gray-50);
     --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-gray-900 {
-    --tw-gradient-from: var(--color-gray-900);
-    --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-green-50 {
     --tw-gradient-from: var(--color-green-50);
     --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));
@@ -2195,13 +2044,13 @@
     --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-emerald-50 {
-    --tw-gradient-via: var(--color-emerald-50);
+  .via-cyan-400 {
+    --tw-gradient-via: var(--color-cyan-400);
     --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-gray-800 {
-    --tw-gradient-via: var(--color-gray-800);
+  .via-emerald-50 {
+    --tw-gradient-via: var(--color-emerald-50);
     --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);
   }
@@ -2249,16 +2098,16 @@
     --tw-gradient-to: var(--color-blue-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-blue-700 {
-    --tw-gradient-to: var(--color-blue-700);
-    --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-cyan-50 {
     --tw-gradient-to: var(--color-cyan-50);
     --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-cyan-300 {
-    --tw-gradient-to: var(--color-cyan-300);
+  .to-cyan-200 {
+    --tw-gradient-to: var(--color-cyan-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));
+  }
+  .to-cyan-400 {
+    --tw-gradient-to: var(--color-cyan-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-cyan-500 {
@@ -2269,8 +2118,8 @@
     --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-cyan-700 {
-    --tw-gradient-to: var(--color-cyan-700);
+  .to-cyan-900 {
+    --tw-gradient-to: var(--color-cyan-900);
     --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-emerald-50 {
@@ -2289,10 +2138,6 @@
     --tw-gradient-to: var(--color-gray-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));
   }
-  .to-gray-900 {
-    --tw-gradient-to: var(--color-gray-900);
-    --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-green-50 {
     --tw-gradient-to: var(--color-green-50);
     --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));
@@ -2321,10 +2166,6 @@
     --tw-gradient-to: var(--color-orange-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));
   }
-  .to-orange-200 {
-    --tw-gradient-to: var(--color-orange-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));
-  }
   .to-orange-400 {
     --tw-gradient-to: var(--color-orange-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));
@@ -2345,10 +2186,6 @@
     --tw-gradient-to: var(--color-purple-50);
     --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-purple-600 {
-    --tw-gradient-to: var(--color-purple-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-red-50 {
     --tw-gradient-to: var(--color-red-50);
     --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));
@@ -2421,9 +2258,15 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -2448,6 +2291,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -2469,6 +2315,9 @@
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -2562,9 +2411,6 @@
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
-  .pt-20 {
-    padding-top: calc(var(--spacing) * 20);
-  }
   .pt-30 {
     padding-top: calc(var(--spacing) * 30);
   }
@@ -2598,9 +2444,6 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pb-8 {
-    padding-bottom: calc(var(--spacing) * 8);
-  }
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -2670,14 +2513,6 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
-  .text-5xl {
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-  }
-  .text-6xl {
-    font-size: var(--text-6xl);
-    line-height: var(--tw-leading, var(--text-6xl--line-height));
-  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2780,12 +2615,18 @@
   .text-blue-900 {
     color: var(--color-blue-900);
   }
+  .text-cyan-100 {
+    color: var(--color-cyan-100);
+  }
   .text-cyan-500 {
     color: var(--color-cyan-500);
   }
   .text-cyan-600 {
     color: var(--color-cyan-600);
   }
+  .text-cyan-800 {
+    color: var(--color-cyan-800);
+  }
   .text-emerald-700 {
     color: var(--color-emerald-700);
   }
@@ -2831,12 +2672,6 @@
   .text-green-900 {
     color: var(--color-green-900);
   }
-  .text-indigo-700 {
-    color: var(--color-indigo-700);
-  }
-  .text-indigo-800 {
-    color: var(--color-indigo-800);
-  }
   .text-orange-100 {
     color: var(--color-orange-100);
   }
@@ -2861,12 +2696,6 @@
   .text-orange-900 {
     color: var(--color-orange-900);
   }
-  .text-purple-600 {
-    color: var(--color-purple-600);
-  }
-  .text-purple-700 {
-    color: var(--color-purple-700);
-  }
   .text-purple-800 {
     color: var(--color-purple-800);
   }
@@ -2900,12 +2729,6 @@
   .text-teal-400 {
     color: var(--color-teal-400);
   }
-  .text-teal-700 {
-    color: var(--color-teal-700);
-  }
-  .text-teal-800 {
-    color: var(--color-teal-800);
-  }
   .text-transparent {
     color: transparent;
   }
@@ -2951,11 +2774,11 @@
   .opacity-0 {
     opacity: 0%;
   }
-  .opacity-10 {
-    opacity: 10%;
+  .opacity-5 {
+    opacity: 5%;
   }
-  .opacity-20 {
-    opacity: 20%;
+  .opacity-15 {
+    opacity: 15%;
   }
   .opacity-25 {
     opacity: 25%;
@@ -3024,6 +2847,9 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-cyan-200 {
+    --tw-ring-color: var(--color-cyan-200);
+  }
   .ring-orange-200 {
     --tw-ring-color: var(--color-orange-200);
   }
@@ -3038,14 +2864,6 @@
     --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,);
   }
-  .blur-2xl {
-    --tw-blur: blur(var(--blur-2xl));
-    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,);
-  }
-  .blur-3xl {
-    --tw-blur: blur(var(--blur-3xl));
-    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,);
-  }
   .drop-shadow {
     --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
     --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
@@ -3188,6 +3006,13 @@
       }
     }
   }
+  .group-hover\:text-cyan-500 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-cyan-500);
+      }
+    }
+  }
   .group-hover\:text-orange-500 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3261,10 +3086,17 @@
       }
     }
   }
-  .hover\:border-gray-200 {
+  .hover\:border-cyan-200 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-gray-200);
+        border-color: var(--color-cyan-200);
+      }
+    }
+  }
+  .hover\:border-cyan-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-cyan-400);
       }
     }
   }
@@ -3289,13 +3121,6 @@
       }
     }
   }
-  .hover\:border-orange-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-orange-400);
-      }
-    }
-  }
   .hover\:bg-amber-50 {
     &:hover {
       @media (hover: hover) {
@@ -3324,13 +3149,6 @@
       }
     }
   }
-  .hover\:bg-blue-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-700);
-      }
-    }
-  }
   .hover\:bg-cyan-500 {
     &:hover {
       @media (hover: hover) {
@@ -3338,10 +3156,10 @@
       }
     }
   }
-  .hover\:bg-cyan-700 {
+  .hover\:bg-cyan-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-cyan-700);
+        background-color: var(--color-cyan-600);
       }
     }
   }
@@ -3445,6 +3263,14 @@
       }
     }
   }
+  .hover\:from-cyan-600 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: 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));
+      }
+    }
+  }
   .hover\:from-orange-600 {
     &:hover {
       @media (hover: hover) {
@@ -3469,6 +3295,22 @@
       }
     }
   }
+  .hover\:to-cyan-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-cyan-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));
+      }
+    }
+  }
+  .hover\:to-cyan-700 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-cyan-700);
+        --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));
+      }
+    }
+  }
   .hover\:to-orange-500 {
     &:hover {
       @media (hover: hover) {
@@ -3499,13 +3341,6 @@
       }
     }
   }
-  .hover\:text-blue-400 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-blue-400);
-      }
-    }
-  }
   .hover\:text-cyan-600 {
     &:hover {
       @media (hover: hover) {
@@ -3520,10 +3355,10 @@
       }
     }
   }
-  .hover\:text-green-400 {
+  .hover\:text-cyan-800 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-green-400);
+        color: var(--color-cyan-800);
       }
     }
   }
@@ -3541,20 +3376,6 @@
       }
     }
   }
-  .hover\:text-orange-800 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-orange-800);
-      }
-    }
-  }
-  .hover\:text-red-400 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-red-400);
-      }
-    }
-  }
   .hover\:text-teal-600 {
     &:hover {
       @media (hover: hover) {
@@ -3600,16 +3421,16 @@
       }
     }
   }
-  .focus\:border-blue-500 {
-    &:focus {
-      border-color: var(--color-blue-500);
-    }
-  }
   .focus\:border-cyan-500 {
     &:focus {
       border-color: var(--color-cyan-500);
     }
   }
+  .focus\:border-orange-400 {
+    &:focus {
+      border-color: var(--color-orange-400);
+    }
+  }
   .focus\:border-orange-500 {
     &:focus {
       border-color: var(--color-orange-500);
@@ -3637,14 +3458,9 @@
       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-blue-300 {
+  .focus\:ring-cyan-200 {
     &:focus {
-      --tw-ring-color: var(--color-blue-300);
-    }
-  }
-  .focus\:ring-blue-500 {
-    &:focus {
-      --tw-ring-color: var(--color-blue-500);
+      --tw-ring-color: var(--color-cyan-200);
     }
   }
   .focus\:ring-cyan-300 {
@@ -3677,12 +3493,6 @@
       --tw-ring-color: var(--color-red-200);
     }
   }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -3694,11 +3504,6 @@
       margin-top: calc(var(--spacing) * 8);
     }
   }
-  .sm\:mb-2 {
-    @media (width >= 40rem) {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-  }
   .sm\:mb-8 {
     @media (width >= 40rem) {
       margin-bottom: calc(var(--spacing) * 8);
@@ -3709,11 +3514,6 @@
       height: calc(var(--spacing) * 5);
     }
   }
-  .sm\:h-10 {
-    @media (width >= 40rem) {
-      height: calc(var(--spacing) * 10);
-    }
-  }
   .sm\:h-16 {
     @media (width >= 40rem) {
       height: calc(var(--spacing) * 16);
@@ -3724,11 +3524,6 @@
       width: calc(var(--spacing) * 5);
     }
   }
-  .sm\:w-10 {
-    @media (width >= 40rem) {
-      width: calc(var(--spacing) * 10);
-    }
-  }
   .sm\:w-16 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 16);
@@ -3773,21 +3568,11 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
-  .sm\:px-8 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
   .sm\:py-3 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 3);
     }
   }
-  .sm\:py-4 {
-    @media (width >= 40rem) {
-      padding-block: calc(var(--spacing) * 4);
-    }
-  }
   .sm\:pr-12 {
     @media (width >= 40rem) {
       padding-right: calc(var(--spacing) * 12);
@@ -3798,24 +3583,12 @@
       padding-left: calc(var(--spacing) * 10);
     }
   }
-  .sm\:text-2xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
   .sm\:text-3xl {
     @media (width >= 40rem) {
       font-size: var(--text-3xl);
       line-height: var(--tw-leading, var(--text-3xl--line-height));
     }
   }
-  .sm\:text-4xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
   .sm\:text-base {
     @media (width >= 40rem) {
       font-size: var(--text-base);
@@ -3828,12 +3601,6 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .sm\:text-xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
   .md\:col-span-2 {
     @media (width >= 48rem) {
       grid-column: span 2 / span 2;
@@ -3849,11 +3616,6 @@
       margin-top: calc(var(--spacing) * 8);
     }
   }
-  .md\:mt-12 {
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 12);
-    }
-  }
   .md\:mt-20 {
     @media (width >= 48rem) {
       margin-top: calc(var(--spacing) * 20);
@@ -3879,11 +3641,6 @@
       width: calc(1/2 * 100%);
     }
   }
-  .md\:w-2\/3 {
-    @media (width >= 48rem) {
-      width: calc(2/3 * 100%);
-    }
-  }
   .md\:w-16 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 16);
@@ -3914,15 +3671,6 @@
       flex-direction: row;
     }
   }
-  .md\:space-y-0 {
-    @media (width >= 48rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-y-reverse: 0;
-        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
-        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
-      }
-    }
-  }
   .md\:space-x-4 {
     @media (width >= 48rem) {
       :where(& > :not(:last-child)) {
@@ -3932,15 +3680,6 @@
       }
     }
   }
-  .md\:space-x-8 {
-    @media (width >= 48rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
   .md\:rounded-tr-\[200px\] {
     @media (width >= 48rem) {
       border-top-right-radius: 200px;
@@ -3956,11 +3695,6 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
-  .md\:px-6 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
   .md\:py-12 {
     @media (width >= 48rem) {
       padding-block: calc(var(--spacing) * 12);
@@ -3971,12 +3705,6 @@
       text-align: left;
     }
   }
-  .md\:text-2xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
   .md\:text-3xl {
     @media (width >= 48rem) {
       font-size: var(--text-3xl);
@@ -3995,12 +3723,6 @@
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
-  .md\:text-7xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-7xl);
-      line-height: var(--tw-leading, var(--text-7xl--line-height));
-    }
-  }
   .md\:text-lg {
     @media (width >= 48rem) {
       font-size: var(--text-lg);
@@ -4089,12 +3811,6 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
-  .lg\:text-7xl {
-    @media (width >= 64rem) {
-      font-size: var(--text-7xl);
-      line-height: var(--tw-leading, var(--text-7xl--line-height));
-    }
-  }
 }
 @property --tw-translate-x {
   syntax: "*";
diff --git a/wwwroot/website/images/laksanakan_bagan.webp b/wwwroot/website/images/laksanakan_bagan.webp
index bd4127a..f40cd0f 100644
Binary files a/wwwroot/website/images/laksanakan_bagan.webp and b/wwwroot/website/images/laksanakan_bagan.webp differ
diff --git a/wwwroot/website/images/pengelolaan_bagan.webp b/wwwroot/website/images/pengelolaan_bagan.webp
index ad51034..84d3448 100644
Binary files a/wwwroot/website/images/pengelolaan_bagan.webp and b/wwwroot/website/images/pengelolaan_bagan.webp differ
diff --git a/wwwroot/website/images/peran_bagan.webp b/wwwroot/website/images/peran_bagan.webp
index 61b2d51..080b4ec 100644
Binary files a/wwwroot/website/images/peran_bagan.webp and b/wwwroot/website/images/peran_bagan.webp differ
diff --git a/wwwroot/website/images/wish.jpg b/wwwroot/website/images/wish.jpg
new file mode 100644
index 0000000..a163745
Binary files /dev/null and b/wwwroot/website/images/wish.jpg differ