From 4daa2bfca465c79c91504a1cb4e4389d0a600109 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@litecharms.co.za>
Date: Thu, 9 Jul 2026 18:46:23 +0200
Subject: [PATCH] Stable site design and layout

---
 .../Components/Layout/MainLayout.razor        |  165 ++-
 .../Components/Layout/NavMenu.razor           |  167 ++-
 Tmt.SaqaTravel/Components/Pages/Booking.razor |    7 +
 .../Components/Pages/Compliance.razor         |    7 +
 Tmt.SaqaTravel/Components/Pages/Contact.razor |    7 +
 .../Components/Pages/Financial.razor          |    7 +
 Tmt.SaqaTravel/Components/Pages/Forex.razor   |    7 +
 Tmt.SaqaTravel/Components/Pages/GdsSync.razor |    7 +
 Tmt.SaqaTravel/Components/Pages/Home.razor    |  500 +++++++-
 Tmt.SaqaTravel/Components/Pages/Mobile.razor  |    7 +
 Tmt.SaqaTravel/Components/Pages/Profile.razor |    7 +
 .../Components/Pages/Settings.razor           |    7 +
 .../Components/Pages/TripReports.razor        |    7 +
 Tmt.SaqaTravel/Components/Pages/Vas.razor     |    7 +
 Tmt.SaqaTravel/Components/Pages/Visa.razor    |    7 +
 Tmt.SaqaTravel/wwwroot/app.min.css            | 1132 +++++++++++------
 16 files changed, 1556 insertions(+), 492 deletions(-)
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Booking.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Compliance.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Contact.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Financial.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Forex.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/GdsSync.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Mobile.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Profile.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Settings.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/TripReports.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Vas.razor
 create mode 100644 Tmt.SaqaTravel/Components/Pages/Visa.razor

diff --git a/Tmt.SaqaTravel/Components/Layout/MainLayout.razor b/Tmt.SaqaTravel/Components/Layout/MainLayout.razor
index 45d5cc5..fc39fe6 100644
--- a/Tmt.SaqaTravel/Components/Layout/MainLayout.razor
+++ b/Tmt.SaqaTravel/Components/Layout/MainLayout.razor
@@ -1,85 +1,138 @@
 @inherits LayoutComponentBase
 
-<div class="flex flex-col sm:flex-row relative min-h-screen bg-gray-50/50">
+<div class="flex flex-col md:flex-row relative min-h-screen bg-[#f4f7fb]">
     <!-- Sidebar -->
-    <div class="bg-gradient-to-b from-[#052767] to-[#020f26] sm:w-[250px] sm:h-screen sm:sticky sm:top-0 shadow-xl z-20">
+    <div class="bg-[#003b71] md:w-[260px] md:h-screen md:sticky md:top-0 shadow-xl z-20 flex flex-col">
         <NavMenu />
     </div>
 
     <!-- Main Content -->
-    <main class="flex-1 flex flex-col">
+    <main class="flex-1 flex flex-col min-w-0">
         <!-- Top Bar -->
-        <header class="bg-white border-b border-gray-200 flex items-center justify-between h-16 sm:sticky sm:top-0 z-10 px-4 sm:px-6 shadow-sm">
+        <header class="bg-white border-b border-[#e4eaf2] flex flex-col md:flex-row md:items-center justify-between min-h-[72px] md:sticky md:top-0 z-10 px-4 md:px-7 shadow-sm py-4 md:py-0 gap-4 md:gap-0">
 
-            <!-- Left: Forex Rates -->
-            <div class="hidden lg:flex items-center gap-6 text-xs font-semibold tracking-wide bg-gray-50 px-4 py-2 rounded-full border border-gray-100">
-                <div class="flex items-center gap-2">
-                    <span class="text-gray-400">USD/ZAR</span>
-                    <span class="text-green-600 flex items-center gap-0.5">R16.37</span>
-                </div>
-                <div class="w-px h-3 bg-gray-300"></div>
-                <div class="flex items-center gap-2">
-                    <span class="text-gray-400">EUR/ZAR</span>
-                    <span class="text-green-600 flex items-center gap-0.5">R18.72</span>
-                </div>
-                <div class="w-px h-3 bg-gray-300"></div>
-                <div class="flex items-center gap-2">
-                    <span class="text-gray-400">GBP/ZAR</span>
-                    <span class="text-green-600 flex items-center gap-0.5">R21.97</span>
-                </div>
+            <!-- Left: Page Title -->
+            <div class="flex flex-col">
+                <h1 class="text-[18px] font-bold text-[#003b71] tracking-tight outline-none focus:outline-none select-none" tabindex="-1">South African Qualifications Authority | Travel Management</h1>
+                <p class="text-[12px] text-[#5a6577] mt-0.5">Capability dashboard prepared for SAQA bid submission</p>
             </div>
 
-            <!-- Right: Action Menu & Profile -->
-            <div class="flex items-center gap-2 sm:gap-4 ml-auto">
-                <!-- Trip Reports -->
-                <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors group relative" title="Trip Reports">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            <!-- Right: Search, Actions & Profile -->
+            <div class="flex items-center gap-3">
+                <!-- Search Box -->
+                <div class="hidden lg:flex items-center gap-2 bg-[#f4f7fb] border border-[#e4eaf2] rounded-full px-3.5 py-2 w-64 focus-within:border-[#0066b3] transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4 text-[#8a96a8]">
+                        <circle cx="11" cy="11" r="7" />
+                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
                     </svg>
+                    <input type="text" placeholder="Search bookings, travellers..." class="bg-transparent border-none outline-none text-[13px] text-[#1f2a3a] w-full" />
+                </div>
+
+                <!-- Notifications -->
+                <button class="relative w-[38px] h-[38px] rounded-full flex items-center justify-center bg-[#f4f7fb] text-[#003b71] hover:bg-[#e8eef7] transition-colors outline-none focus:outline-none" title="Notifications">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-[18px] h-[18px]">
+                        <path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
+                        <path d="M13.7 21a2 2 0 01-3.4 0" />
+                    </svg>
+                    <span class="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#c8102e] border-2 border-white"></span>
                 </button>
 
-                <!-- GDS Sync -->
-                <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors group relative" title="GDS Sync">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                <!-- Settings (Updated to navigate to /settings) -->
+                <a href="/settings" class="w-[38px] h-[38px] rounded-full flex items-center justify-center bg-[#f4f7fb] text-[#003b71] hover:bg-[#e8eef7] transition-colors outline-none focus:outline-none" title="Settings">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-[18px] h-[18px]">
+                        <circle cx="12" cy="12" r="3" />
+                        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h0a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h0a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" />
                     </svg>
-                </button>
+                </a>
 
-                <!-- Mobile -->
-                <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors group relative" title="Mobile">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
-                    </svg>
-                </button>
-
-                <!-- Settings -->
-                <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors group relative" title="Settings">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                </button>
-
-                <div class="h-6 w-px bg-gray-300 mx-1 sm:mx-2"></div>
-
-                <!-- Profile -->
-                <button class="flex items-center gap-3 pl-2 pr-1 py-1 rounded-full hover:bg-gray-100 transition-colors">
-                    <span class="hidden sm:block text-sm font-medium text-gray-700">J. Mokoena</span>
-                    <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-sm shadow-inner">
-                        A
+                <!-- Profile Chip (Updated to navigate to /profile) -->
+                <a href="/profile" class="flex items-center gap-2.5 pl-1 pr-3.5 py-1 rounded-full bg-[#f4f7fb] hover:bg-[#e8eef7] transition-colors outline-none focus:outline-none">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[12px] font-semibold shadow-inner">
+                        JD
                     </div>
-                </button>
+                    <div class="flex flex-col text-left leading-tight hidden sm:flex">
+                        <span class="text-[12px] font-semibold text-[#1f2a3a]">Jane Doe</span>
+                        <span class="text-[11px] text-[#8a96a8]">Travel Bookings Admin</span>
+                    </div>
+                </a>
             </div>
         </header>
 
-        <article class="px-4 sm:px-8 py-6">
+        <!-- Main Content Area -->
+        <article class="p-6 md:p-7">
             @Body
         </article>
+
+        <!-- Footer -->
+        <footer class="bg-[#003b71] text-white px-7 pt-9 pb-6 mt-auto">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 pb-6 border-b border-white/10">
+                <!-- Brand Column -->
+                <div class="flex flex-col lg:col-span-1 lg:pr-4">
+                    <div class="flex items-center gap-3.5">
+                        <img src="data:image/png;base64,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" alt="TMT Projects Logo" class="h-[54px] w-auto max-w-[180px] object-contain block shrink-0" />
+                        <div class="leading-snug">
+                            <strong class="text-[16px] font-bold block mb-1 text-white">Powered by TMT Projects</strong>
+                            <span class="text-[12px] text-[#aac1de] block">Travel and Expense Management Solution, built for SAQA</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Solution Column -->
+                <div class="flex flex-col">
+                    <h5 class="text-[11px] uppercase tracking-[0.12em] text-[#00d4d1] font-bold mb-3">Solution</h5>
+                    <ul class="space-y-2 text-[12px] text-[#c1d2e7]">
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Online booking tool</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Trip approval workflow</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Virtual credit cards</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Foreign exchange</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Visa applications</a></li>
+                        <li><a href="#" class="hover:text-white transition-colors outline-none focus:outline-none select-none">Mobile app</a></li>
+                    </ul>
+                </div>
+
+                <!-- Compliance Column -->
+                <div class="flex flex-col">
+                    <h5 class="text-[11px] uppercase tracking-[0.12em] text-[#00d4d1] font-bold mb-3">Compliance</h5>
+                    <ul class="space-y-2 text-[12px] text-[#c1d2e7]">
+                        <li>POPIA compliant</li>
+                        <li>ISO 27001 certified</li>
+                        <li>NT Cost Containment</li>
+                        <li>SAQA Travel Policy</li>
+                        <li>BBBEE Level 1</li>
+                        <li>SARS tax compliant</li>
+                    </ul>
+                </div>
+
+                <!-- Contact Column -->
+                <div class="flex flex-col">
+                    <h5 class="text-[11px] uppercase tracking-[0.12em] text-[#00d4d1] font-bold mb-3">Contact</h5>
+                    <ul class="space-y-2 text-[12px] text-[#c1d2e7]">
+                        <li>Account manager: <span class="text-white font-medium">011 555 0100</span></li>
+                        <li>24/7 travel desk: <span class="text-[#00d4d1] font-bold">0800 TMT HELP</span></li>
+                        <li>After hours: <span class="text-white font-medium">082 555 4400</span></li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Footer Bottom -->
+            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center pt-5 gap-4 text-[11px] text-[#8aa4c4]">
+                <div>
+                    &copy; @DateTime.Now.Year TMT Projects (Pty) Ltd. Prepared for the South African Qualifications Authority bid submission.
+                </div>
+                <div class="flex flex-wrap gap-2">
+                    <span class="bg-white/10 px-3 py-1 rounded-full text-[10px] text-[#c1d2e7] font-semibold tracking-wide">POPIA</span>
+                    <span class="bg-white/10 px-3 py-1 rounded-full text-[10px] text-[#c1d2e7] font-semibold tracking-wide">ISO 27001</span>
+                    <span class="bg-white/10 px-3 py-1 rounded-full text-[10px] text-[#c1d2e7] font-semibold tracking-wide">BBBEE Level 1</span>
+                    <span class="bg-white/10 px-3 py-1 rounded-full text-[10px] text-[#c1d2e7] font-semibold tracking-wide">ASATA Member</span>
+                    <span class="bg-white/10 px-3 py-1 rounded-full text-[10px] text-[#c1d2e7] font-semibold tracking-wide">IATA Accredited</span>
+                </div>
+            </div>
+        </footer>
     </main>
 </div>
 
 <div id="blazor-error-ui" class="hidden fixed bottom-0 left-0 w-full bg-[#ffffe0] p-3 shadow-[0_-1px_2px_rgba(0,0,0,0.2)] z-[1000]" data-nosnippet>
     An unhandled error has occurred.
-    <a href="." class="underline text-blue-600">Reload</a>
+    <a href="." class="underline text-[#0066b3]">Reload</a>
     <span class="dismiss cursor-pointer absolute right-3 top-2 text-gray-700">🗙</span>
 </div>
\ No newline at end of file
diff --git a/Tmt.SaqaTravel/Components/Layout/NavMenu.razor b/Tmt.SaqaTravel/Components/Layout/NavMenu.razor
index 20249c7..9a958a4 100644
--- a/Tmt.SaqaTravel/Components/Layout/NavMenu.razor
+++ b/Tmt.SaqaTravel/Components/Layout/NavMenu.razor
@@ -1,5 +1,6 @@
-<style>
-    /* Premium slim scrollbar for the navigation */
+@inject NavigationManager Navigation
+
+<style>
     .nav-scrollbar::-webkit-scrollbar {
         width: 5px;
     }
@@ -18,93 +19,131 @@
         }
 </style>
 
-<div class="min-h-[4.5rem] bg-black/20 flex items-center px-5 relative border-b border-white/10 backdrop-blur-sm">
-    <div class="container-fluid w-full">
-        <a class="group flex items-center gap-3 no-underline" href="">
-            <!-- SAQA-inspired 'Q' Swish & Travel Icon -->
-            <div class="relative flex-shrink-0">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="w-8 h-8 text-blue-300 group-hover:text-white transition-colors duration-300 drop-shadow-lg">
-                    <!-- The Swirl / 'Q' body (representing the globe & SAQA watermark) -->
-                    <circle cx="10.5" cy="10.5" r="7.5" stroke-linecap="round" />
-                    <!-- The infinity/swish tail of the 'Q' mimicking a flight path -->
-                    <path stroke-linecap="round" d="M15.5 15.5c3 3 5.5 5 7 3s.5-3-2-5" />
-                    <!-- Minimalist airplane taking off -->
-                    <path fill="currentColor" stroke="none" d="M14.5 4.5l3-3h1.5l-2.5 3.5 1 3-2-1v-2z" />
-                </svg>
-            </div>
-
-            <div class="flex flex-col">
-                <span class="text-xl font-extrabold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-blue-100 to-white drop-shadow-sm group-hover:scale-[1.02] transition-transform origin-left">
-                    TMT <span class="text-blue-400 font-light">SAQA</span>
-                </span>
-                <span class="text-[0.65rem] text-blue-300/80 uppercase tracking-[0.2em] font-semibold -mt-1 group-hover:text-blue-200 transition-colors">
-                    Travel & Logistics
-                </span>
-            </div>
-        </a>
-    </div>
+<div class="flex items-center justify-between px-4 pt-4 pb-3 gap-2.5 bg-[#003b71]">
+    <!-- SAQA Logo -->
+    <img src="data:image/png;base64,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" alt="SAQA Logo" class="h-[52px] w-auto max-w-[170px] object-contain flex-1 min-w-0 bg-transparent p-0" />
+    <input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-[38px] h-[38px] text-white border border-white/10 rounded-lg bg-[#ffffff14] hover:bg-[#ffffff2e] bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_24_24%27_fill=%27none%27_stroke=%27currentColor%27_stroke-width=%272%27%3e%3cline_x1=%273%27_y1=%276%27_x2=%2721%27_y2=%276%27/%3e%3cline_x1=%273%27_y1=%2712%27_x2=%2721%27_y2=%2712%27/%3e%3cline_x1=%273%27_y1=%2718%27_x2=%2721%27_y2=%2718%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:20px] md:hidden transition-colors z-20 flex-shrink-0" />
 </div>
 
-<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-4 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/20 sm:hidden transition-colors z-20" />
+<!-- Header Brand Text Area -->
+<div class="px-[18px] pb-3.5 mb-1 border-b border-white/10 flex flex-col bg-[#003b71] leading-[1.2]">
+    <strong class="text-white text-[14px] font-bold tracking-[0.02em] block">SAQA TMC</strong>
+    <span class="text-[11px] text-[#8aa4c4]">Travel and Expense Portal</span>
+</div>
 
-<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-4.5rem)] sm:overflow-y-auto nav-scrollbar" onclick="document.querySelector('.peer').click()">
-    <nav class="flex flex-col space-y-1 px-3 py-5">
+<div class="hidden peer-checked:flex md:flex flex-col flex-1 h-[calc(100vh-130px)] md:overflow-y-auto nav-scrollbar bg-[#003b71]" onclick="document.querySelector('.peer').click()">
+    <nav class="flex flex-col px-3 py-3 w-full">
+
+        <div class="text-[10px] uppercase text-[#647892] tracking-[0.12em] px-3 pt-2 pb-2 font-semibold">Main</div>
 
         <!-- Overview -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="" Match="NavLinkMatch.All">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="" Match="NavLinkMatch.All">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <path d="M3 12l9-9 9 9" />
+                <path d="M5 10v10a1 1 0 001 1h3v-7h6v7h3a1 1 0 001-1V10" />
             </svg>
             Overview
         </NavLink>
 
         <!-- Booking -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="booking">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-            </svg>
-            Booking
+        <NavLink class="group flex items-center justify-between w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="booking">
+            <div class="flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                    <path d="M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2 3.4 7.6l5.6 3-4 4-3-1L1 14l4 2 2 4 1.4-1.4-1-3 4-4 3 5.6 1.4-1.4z" />
+                </svg>
+                Booking
+            </div>
+            <span class="bg-[#00a3a1] text-white px-[7px] py-[1px] rounded-full text-[10px] font-bold">3</span>
         </NavLink>
 
-        <!-- Financial -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="financial">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        <!-- Financial Management -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="financial">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <line x1="12" y1="1" x2="12" y2="23" />
+                <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
             </svg>
-            Financial
+            Financial Management
         </NavLink>
 
-        <!-- Forex -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="forex">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+        <!-- Forex and Expenses -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="forex">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <path d="M7 17l10-10M7 7h.01M17 17h.01" />
+                <circle cx="12" cy="12" r="10" />
             </svg>
-            Forex
+            Forex and Expenses
         </NavLink>
 
-        <!-- Visa -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="visa">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" />
-            </svg>
-            Visa
+        <!-- Visa Services -->
+        <NavLink class="group flex items-center justify-between w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="visa">
+            <div class="flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                    <path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z" />
+                    <path d="M14 3v6h6" />
+                    <circle cx="12" cy="14" r="2" />
+                </svg>
+                Visa Services
+            </div>
+            <span class="bg-[#00a3a1] text-white px-[7px] py-[1px] rounded-full text-[10px] font-bold">2</span>
         </NavLink>
 
-        <!-- Compliance -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="compliance">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+        <!-- Mobile App -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="mobile">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <rect x="7" y="2" width="10" height="20" rx="2" />
+                <line x1="12" y1="18" x2="12.01" y2="18" />
             </svg>
-            Compliance
+            Mobile App
         </NavLink>
 
-        <!-- VAS -->
-        <NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="vas">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+        <!-- Compliance and Policy -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="compliance">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <path d="M12 2l9 4v6c0 5-3.5 9.5-9 10-5.5-.5-9-5-9-10V6l9-4z" />
+                <path d="M9 12l2 2 4-4" />
             </svg>
-            VAS
+            Compliance and Policy
+        </NavLink>
+
+        <!-- Value-Added Services -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="vas">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <circle cx="12" cy="12" r="10" />
+                <path d="M2 12h20" />
+                <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
+            </svg>
+            Value-Added Services
+        </NavLink>
+
+        <div class="text-[10px] uppercase text-[#647892] tracking-[0.12em] px-3 pt-4 pb-2 font-semibold">Integrations</div>
+
+        <!-- SLA and Monthly Reports -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="trip-reports">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                <path d="M14 2v6h6" />
+                <path d="M16 13H8M16 17H8M10 9H8" />
+            </svg>
+            SLA and Monthly Reports
+        </NavLink>
+
+        <!-- GDS Amadeus Sync -->
+        <NavLink class="group flex items-center w-full px-3 py-2.5 text-[13px] font-medium rounded-lg text-[#b8c8df] hover:text-white hover:bg-white/5 transition-all duration-150 border-l-[3px] border-transparent [&.active]:bg-gradient-to-r [&.active]:from-[#00a3a12e] [&.active]:to-transparent [&.active]:text-white [&.active]:border-[#00a3a1] mb-0.5" href="gds-sync">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-[18px] h-[18px] mr-3 flex-shrink-0">
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <path d="M3 9h18M9 21V9" />
+            </svg>
+            GDS Amadeus Sync
         </NavLink>
 
     </nav>
+
+    <!-- 24/7 Support CTA -->
+    <div class="m-3 mt-auto p-4 bg-gradient-to-br from-[#00a3a1] to-[#0066b3] rounded-xl text-white">
+        <h4 class="text-[13px] font-bold mb-1">24/7 Travel Desk</h4>
+        <p class="text-[11px] text-[#d9f1f0] mb-2.5 leading-snug">VIP & after-hours consultant support, lounge access, emergencies.</p>
+        <a href="/contact" class="bg-white text-[#003b71] px-3 py-1.5 rounded-md text-[11px] font-semibold hover:bg-gray-100 transition-colors inline-block text-center">
+            Contact Now
+        </a>
+    </div>
 </div>
\ No newline at end of file
diff --git a/Tmt.SaqaTravel/Components/Pages/Booking.razor b/Tmt.SaqaTravel/Components/Pages/Booking.razor
new file mode 100644
index 0000000..4962a30
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Booking.razor
@@ -0,0 +1,7 @@
+@page "/booking"
+
+<h3>Booking</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Compliance.razor b/Tmt.SaqaTravel/Components/Pages/Compliance.razor
new file mode 100644
index 0000000..9e4d770
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Compliance.razor
@@ -0,0 +1,7 @@
+@page "/compliance"
+
+<h3>Compliance</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Contact.razor b/Tmt.SaqaTravel/Components/Pages/Contact.razor
new file mode 100644
index 0000000..046cd58
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Contact.razor
@@ -0,0 +1,7 @@
+@page "/contact"
+
+<h3>Contact</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Financial.razor b/Tmt.SaqaTravel/Components/Pages/Financial.razor
new file mode 100644
index 0000000..5360d76
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Financial.razor
@@ -0,0 +1,7 @@
+@page "/financial"
+
+<h3>Financial</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Forex.razor b/Tmt.SaqaTravel/Components/Pages/Forex.razor
new file mode 100644
index 0000000..cde24f1
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Forex.razor
@@ -0,0 +1,7 @@
+@page "/forex"
+
+<h3>Forex</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/GdsSync.razor b/Tmt.SaqaTravel/Components/Pages/GdsSync.razor
new file mode 100644
index 0000000..3fa2fd5
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/GdsSync.razor
@@ -0,0 +1,7 @@
+@page "/gds-sync"
+
+<h3>GdsSync</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Home.razor b/Tmt.SaqaTravel/Components/Pages/Home.razor
index 6b68c28..25fb7c9 100644
--- a/Tmt.SaqaTravel/Components/Pages/Home.razor
+++ b/Tmt.SaqaTravel/Components/Pages/Home.razor
@@ -1,7 +1,501 @@
 @page "/"
+@rendermode InteractiveServer
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Overview Dashboard</PageTitle>
 
-<h1 class="text-3xl font-bold mb-4">Hello, world!</h1>
+<div class="max-w-[1600px] mx-auto pb-8">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-[22px] gap-3">
+        <div>
+            <h2 class="text-[22px] font-bold text-[#1f2a3a] tracking-tight outline-none focus:outline-none select-none" tabindex="-1">Travel Overview</h2>
+            <p class="text-[13px] text-[#5a6577] mt-1">Consolidated single source of truth, May 2026 reporting period</p>
+        </div>
+        <div class="flex gap-2">
+            <button class="flex items-center gap-1.5 px-[14px] py-2 bg-white border border-[#e4eaf2] text-[#1f2a3a] rounded-lg text-[13px] font-semibold hover:bg-[#f4f7fb] transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                    <polyline points="7 10 12 15 17 10" />
+                    <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+                Export
+            </button>
+            <button class="flex items-center gap-1.5 px-[14px] py-2 bg-[#0066b3] text-white rounded-lg text-[13px] font-semibold hover:bg-[#003b71] transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+                New Booking
+            </button>
+        </div>
+    </div>
 
-<p>Welcome to your new app.</p>
\ No newline at end of file
+    <!-- KPI Cards -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <!-- Spend Card -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] overflow-hidden relative group p-[18px]">
+            <div class="absolute left-0 top-0 bottom-0 w-1 bg-[#0066b3] transition-all duration-500 group-hover:w-1.5"></div>
+            <div class="transition-all duration-700 ease-out" style="opacity: @(_isLoaded ? "1" : "0"); transform: translateY(@(_isLoaded ? "0" : "10px"));">
+                <p class="text-[11px] font-semibold text-[#5a6577] tracking-[0.08em] uppercase mb-2.5">Total Travel Spend</p>
+                <div class="text-[26px] font-bold text-[#1f2a3a] tracking-tight leading-none">R @(_kpiSpend.ToString("N0"))</div>
+                <div class="flex items-center gap-1.5 mt-2 text-[12px]">
+                    <span class="text-[#22a06b] font-semibold">▲ 4.8%</span>
+                    <span class="text-[#8a96a8]">vs. April 2026</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Savings Card -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] overflow-hidden relative group p-[18px]">
+            <div class="absolute left-0 top-0 bottom-0 w-1 bg-[#00a3a1] transition-all duration-500 group-hover:w-1.5"></div>
+            <div class="transition-all duration-700 ease-out delay-100" style="opacity: @(_isLoaded ? "1" : "0"); transform: translateY(@(_isLoaded ? "0" : "10px"));">
+                <p class="text-[11px] font-semibold text-[#5a6577] tracking-[0.08em] uppercase mb-2.5">Negotiated Savings</p>
+                <div class="text-[26px] font-bold text-[#1f2a3a] tracking-tight leading-none">R @(_kpiSavings.ToString("N0"))</div>
+                <div class="flex items-center gap-1.5 mt-2 text-[12px]">
+                    <span class="text-[#22a06b] font-semibold">▲ 14.5%</span>
+                    <span class="text-[#8a96a8]">discounted fares</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Travellers Card -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] overflow-hidden relative group p-[18px]">
+            <div class="absolute left-0 top-0 bottom-0 w-1 bg-[#22a06b] transition-all duration-500 group-hover:w-1.5"></div>
+            <div class="transition-all duration-700 ease-out delay-200" style="opacity: @(_isLoaded ? "1" : "0"); transform: translateY(@(_isLoaded ? "0" : "10px"));">
+                <p class="text-[11px] font-semibold text-[#5a6577] tracking-[0.08em] uppercase mb-2.5">Active Travellers</p>
+                <div class="text-[26px] font-bold text-[#1f2a3a] tracking-tight leading-none">@(_kpiTravellers)</div>
+                <div class="flex items-center gap-1.5 mt-2 text-[12px]">
+                    <span class="text-[#22a06b] font-semibold">▲ 12</span>
+                    <span class="text-[#8a96a8]">this month</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Out of Policy Card -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] overflow-hidden relative group p-[18px]">
+            <div class="absolute left-0 top-0 bottom-0 w-1 bg-[#f4a300] transition-all duration-500 group-hover:w-1.5"></div>
+            <div class="transition-all duration-700 ease-out delay-300" style="opacity: @(_isLoaded ? "1" : "0"); transform: translateY(@(_isLoaded ? "0" : "10px"));">
+                <p class="text-[11px] font-semibold text-[#5a6577] tracking-[0.08em] uppercase mb-2.5">Bookings Outside Policy</p>
+                <div class="text-[26px] font-bold text-[#1f2a3a] tracking-tight leading-none">@(_kpiPolicy)</div>
+                <div class="flex items-center gap-1.5 mt-2 text-[12px]">
+                    <span class="text-[#dc2626] font-semibold">▼ 3</span>
+                    <span class="text-[#8a96a8]">vs. last month</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Grid Row 1 (Charts) -->
+    <div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4 mb-[22px]">
+
+        <!-- DYNAMIC SPEND TREND CHART -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] p-5 flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <div>
+                    <h3 class="text-[15px] font-bold text-[#1f2a3a]">Monthly Spend Trend</h3>
+                    <p class="text-[12px] text-[#8a96a8] mt-0.5">Air, accommodation and ground transport over 6 months</p>
+                </div>
+                <span class="bg-[#e2eefb] text-[#0066b3] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Live from GDS</span>
+            </div>
+
+            <div class="relative flex-1 w-full min-h-[260px] flex items-end pt-4">
+
+                <!-- Y-Axis Labels -->
+                <div class="absolute left-0 top-0 bottom-8 flex flex-col justify-between text-[11px] text-[#8a96a8] pr-2 pb-2 z-10 transition-opacity duration-700" style="opacity: @(_isLoaded ? "1" : "0")">
+                    <span>R @((MaxValue).ToString("N0"))k</span>
+                    <span>R @((MaxValue * 0.75).ToString("N0"))k</span>
+                    <span>R @((MaxValue * 0.5).ToString("N0"))k</span>
+                    <span>R @((MaxValue * 0.25).ToString("N0"))k</span>
+                    <span>R 0k</span>
+                </div>
+
+                <!-- Grid Lines -->
+                <div class="absolute inset-0 ml-12 flex flex-col justify-between pb-8">
+                    <div class="border-b border-[#eef2f8] w-full h-0"></div>
+                    <div class="border-b border-[#eef2f8] w-full h-0"></div>
+                    <div class="border-b border-[#eef2f8] w-full h-0"></div>
+                    <div class="border-b border-[#eef2f8] w-full h-0"></div>
+                    <div class="border-b border-[#eef2f8] w-full h-0"></div>
+                </div>
+
+                <!-- Dynamic SVG Chart -->
+                <div class="absolute inset-0 ml-12 pb-8">
+                    <svg class="h-full w-full overflow-visible" preserveAspectRatio="none" viewBox="0 0 @ChartWidth @ChartHeight">
+                        <defs>
+                            <linearGradient id="airGradient" x1="0" x2="0" y1="0" y2="1">
+                                <stop offset="0%" stop-color="#0066b3" stop-opacity="0.15" />
+                                <stop offset="100%" stop-color="#0066b3" stop-opacity="0" />
+                            </linearGradient>
+                            <linearGradient id="accGradient" x1="0" x2="0" y1="0" y2="1">
+                                <stop offset="0%" stop-color="#00a3a1" stop-opacity="0.15" />
+                                <stop offset="100%" stop-color="#00a3a1" stop-opacity="0" />
+                            </linearGradient>
+                            <linearGradient id="groundGradient" x1="0" x2="0" y1="0" y2="1">
+                                <stop offset="0%" stop-color="#f4a300" stop-opacity="0.15" />
+                                <stop offset="100%" stop-color="#f4a300" stop-opacity="0" />
+                            </linearGradient>
+                        </defs>
+
+                        <!-- Animating Group (Draws from left to right) -->
+                        <g class="transition-all duration-[1500ms] ease-in-out" style="clip-path: inset(0 @(_isLoaded ? "0%" : "100%") 0 0);">
+                            <!-- Area Fills -->
+                            <polygon fill="url(#airGradient)" points="@GetPolygonPoints(AirData)" />
+                            <polygon fill="url(#accGradient)" points="@GetPolygonPoints(AccData)" />
+                            <polygon fill="url(#groundGradient)" points="@GetPolygonPoints(GroundData)" />
+
+                            <!-- Data Lines -->
+                            <polyline fill="none" stroke="#f4a300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="@GetPolylinePoints(GroundData)" />
+                            <polyline fill="none" stroke="#00a3a1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="@GetPolylinePoints(AccData)" />
+                            <polyline fill="none" stroke="#0066b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="@GetPolylinePoints(AirData)" />
+                        </g>
+
+                        <!-- Interactive Data Points (Popping in synced with the line drawing) -->
+                        @for (int i = 0; i < Months.Length; i++)
+                        {
+                            var groundCoord = GetCoordinate(i, GroundData[i]);
+                            var accCoord = GetCoordinate(i, AccData[i]);
+                            var airCoord = GetCoordinate(i, AirData[i]);
+
+                            double delaySeconds = 1.5 * ((double)i / (Months.Length - 1));
+                            string delayStyle = $"transition-delay: {delaySeconds.ToString(System.Globalization.CultureInfo.InvariantCulture)}s;";
+
+                            <g class="group cursor-pointer transition-all duration-500 ease-out" style="opacity: @(_isLoaded ? "1" : "0"); transform: scale(@(_isLoaded ? "1" : "0")); transform-origin: @(groundCoord.X)px @(groundCoord.Y)px; @delayStyle">
+                                <circle cx="@groundCoord.X" cy="@groundCoord.Y" r="4" fill="white" stroke="#f4a300" stroke-width="2" class="transition-all duration-200 group-hover:r-5" />
+                                <text x="@groundCoord.X" y="@(groundCoord.Y - 10)" text-anchor="middle" fill="#1f2a3a" font-size="11" font-family="Inter" font-weight="600" class="opacity-0 group-hover:opacity-100 transition-opacity">R @GroundData[i]k</text>
+                            </g>
+
+                            <g class="group cursor-pointer transition-all duration-500 ease-out" style="opacity: @(_isLoaded ? "1" : "0"); transform: scale(@(_isLoaded ? "1" : "0")); transform-origin: @(accCoord.X)px @(accCoord.Y)px; @delayStyle">
+                                <circle cx="@accCoord.X" cy="@accCoord.Y" r="4" fill="white" stroke="#00a3a1" stroke-width="2" class="transition-all duration-200 group-hover:r-5" />
+                                <text x="@accCoord.X" y="@(accCoord.Y - 10)" text-anchor="middle" fill="#1f2a3a" font-size="11" font-family="Inter" font-weight="600" class="opacity-0 group-hover:opacity-100 transition-opacity">R @AccData[i]k</text>
+                            </g>
+
+                            <g class="group cursor-pointer transition-all duration-500 ease-out" style="opacity: @(_isLoaded ? "1" : "0"); transform: scale(@(_isLoaded ? "1" : "0")); transform-origin: @(airCoord.X)px @(airCoord.Y)px; @delayStyle">
+                                <circle cx="@airCoord.X" cy="@airCoord.Y" r="4" fill="white" stroke="#0066b3" stroke-width="2" class="transition-all duration-200 group-hover:r-5" />
+                                <text x="@airCoord.X" y="@(airCoord.Y - 10)" text-anchor="middle" fill="#1f2a3a" font-size="11" font-family="Inter" font-weight="600" class="opacity-0 group-hover:opacity-100 transition-opacity">R @AirData[i]k</text>
+                            </g>
+                        }
+                    </svg>
+                </div>
+
+                <!-- X-Axis Labels -->
+                <div class="absolute bottom-0 left-12 right-0 flex justify-between text-[11px] text-[#8a96a8] transition-opacity duration-1000 delay-300" style="opacity: @(_isLoaded ? "1" : "0")">
+                    @foreach (var month in Months)
+                    {
+                        <span class="w-8 text-center -ml-4">@month</span>
+                    }
+                </div>
+            </div>
+
+            <!-- Legend -->
+            <div class="flex justify-center gap-6 mt-4 transition-opacity duration-1000 delay-500" style="opacity: @(_isLoaded ? "1" : "0")">
+                <div class="flex items-center gap-2">
+                    <span class="w-2.5 h-2.5 bg-[#0066b3]"></span>
+                    <span class="text-[11px] text-[#5a6577]">Air</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="w-2.5 h-2.5 bg-[#00a3a1]"></span>
+                    <span class="text-[11px] text-[#5a6577]">Accommodation</span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="w-2.5 h-2.5 bg-[#f4a300]"></span>
+                    <span class="text-[11px] text-[#5a6577]">Ground</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Spend by Category -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] p-5">
+            <div class="mb-5">
+                <h3 class="text-[15px] font-bold text-[#1f2a3a]">Spend by Category</h3>
+                <p class="text-[12px] text-[#8a96a8] mt-0.5">May 2026</p>
+            </div>
+
+            <div class="space-y-4 pt-2">
+                <div>
+                    <div class="flex justify-between text-[12px] mb-1">
+                        <span class="text-[#1f2a3a]">Air Travel</span>
+                        <span class="text-[#5a6577] font-semibold transition-opacity duration-500 delay-[500ms]" style="opacity: @(_isLoaded ? "1" : "0")">R 1.24M</span>
+                    </div>
+                    <div class="w-full bg-[#f4f7fb] rounded-full h-1.5">
+                        <div class="bg-[#0066b3] h-1.5 rounded-full transition-all duration-[1500ms] ease-out" style="width: @(_isLoaded ? "50%" : "0%")"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="flex justify-between text-[12px] mb-1">
+                        <span class="text-[#1f2a3a]">Accommodation</span>
+                        <span class="text-[#5a6577] font-semibold transition-opacity duration-500 delay-[600ms]" style="opacity: @(_isLoaded ? "1" : "0")">R 720k</span>
+                    </div>
+                    <div class="w-full bg-[#f4f7fb] rounded-full h-1.5">
+                        <div class="bg-[#00a3a1] h-1.5 rounded-full transition-all duration-[1500ms] ease-out delay-[100ms]" style="width: @(_isLoaded ? "30%" : "0%")"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="flex justify-between text-[12px] mb-1">
+                        <span class="text-[#1f2a3a]">Car Rental</span>
+                        <span class="text-[#5a6577] font-semibold transition-opacity duration-500 delay-[700ms]" style="opacity: @(_isLoaded ? "1" : "0")">R 290k</span>
+                    </div>
+                    <div class="w-full bg-[#f4f7fb] rounded-full h-1.5">
+                        <div class="bg-[#f4a300] h-1.5 rounded-full transition-all duration-[1500ms] ease-out delay-[200ms]" style="width: @(_isLoaded ? "12%" : "0%")"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="flex justify-between text-[12px] mb-1">
+                        <span class="text-[#1f2a3a]">Shuttle</span>
+                        <span class="text-[#5a6577] font-semibold transition-opacity duration-500 delay-[800ms]" style="opacity: @(_isLoaded ? "1" : "0")">R 110k</span>
+                    </div>
+                    <div class="w-full bg-[#f4f7fb] rounded-full h-1.5">
+                        <div class="bg-[#003b71] h-1.5 rounded-full transition-all duration-[1500ms] ease-out delay-[300ms]" style="width: @(_isLoaded ? "5%" : "0%")"></div>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="flex justify-between text-[12px] mb-1">
+                        <span class="text-[#1f2a3a]">Other</span>
+                        <span class="text-[#5a6577] font-semibold transition-opacity duration-500 delay-[900ms]" style="opacity: @(_isLoaded ? "1" : "0")">R 80k</span>
+                    </div>
+                    <div class="w-full bg-[#f4f7fb] rounded-full h-1.5">
+                        <div class="bg-[#c0d4e6] h-1.5 rounded-full transition-all duration-[1500ms] ease-out delay-[400ms]" style="width: @(_isLoaded ? "3%" : "0%")"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Grid Row 2 (Tables) -->
+    <div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4">
+
+        <!-- Recent Bookings Table -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] p-5 flex flex-col transition-opacity duration-700 delay-300" style="opacity: @(_isLoaded ? "1" : "0")">
+            <div class="flex justify-between items-center mb-4">
+                <div>
+                    <h3 class="text-[15px] font-bold text-[#1f2a3a]">Recent Bookings</h3>
+                    <p class="text-[12px] text-[#8a96a8] mt-0.5">Last 5 confirmed trips</p>
+                </div>
+                <button class="px-[14px] py-2 bg-white border border-[#e4eaf2] text-[#1f2a3a] rounded-lg text-[13px] font-semibold hover:bg-[#f4f7fb] transition-colors">View all</button>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-collapse min-w-[600px]">
+                    <thead>
+                        <tr>
+                            <th class="text-[11px] text-[#8a96a8] uppercase tracking-[0.06em] font-semibold p-3 border-b border-[#e4eaf2] whitespace-nowrap">Traveller</th>
+                            <th class="text-[11px] text-[#8a96a8] uppercase tracking-[0.06em] font-semibold p-3 border-b border-[#e4eaf2] whitespace-nowrap">Route / Stay</th>
+                            <th class="text-[11px] text-[#8a96a8] uppercase tracking-[0.06em] font-semibold p-3 border-b border-[#e4eaf2] whitespace-nowrap">Type</th>
+                            <th class="text-[11px] text-[#8a96a8] uppercase tracking-[0.06em] font-semibold p-3 border-b border-[#e4eaf2] whitespace-nowrap">Status</th>
+                            <th class="text-[11px] text-[#8a96a8] uppercase tracking-[0.06em] font-semibold p-3 border-b border-[#e4eaf2] whitespace-nowrap">Cost</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="hover:bg-[#fafcfe] transition-colors">
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">
+                                <div class="flex items-center gap-2.5">
+                                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[10px] font-semibold">JM</div>
+                                    <div><strong class="font-bold">J. Mokoena</strong><span class="block text-[#8a96a8] text-[11px]">Executive</span></div>
+                                </div>
+                            </td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">JNB → CPT, 02 Jun</td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e2eefb] text-[#0066b3] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Flight</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e3f6ed] text-[#22a06b] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Confirmed</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">R 3,240</td>
+                        </tr>
+                        <tr class="hover:bg-[#fafcfe] transition-colors">
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">
+                                <div class="flex items-center gap-2.5">
+                                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[10px] font-semibold">NN</div>
+                                    <div><strong class="font-bold">N. Ndlovu</strong><span class="block text-[#8a96a8] text-[11px]">Manager</span></div>
+                                </div>
+                            </td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">Premier Hotel OR Tambo</td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e8f4f4] text-[#00a3a1] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Hotel</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e3f6ed] text-[#22a06b] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Confirmed</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">R 1,895</td>
+                        </tr>
+                        <tr class="hover:bg-[#fafcfe] transition-colors">
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">
+                                <div class="flex items-center gap-2.5">
+                                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[10px] font-semibold">SP</div>
+                                    <div><strong class="font-bold">S. Pillay</strong><span class="block text-[#8a96a8] text-[11px]">Coordinator</span></div>
+                                </div>
+                            </td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">Avis Group B, 3 days</td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#fff4dd] text-[#b06b00] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Car</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#fff4dd] text-[#b06b00] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Pending</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">R 1,420</td>
+                        </tr>
+                        <tr class="hover:bg-[#fafcfe] transition-colors">
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">
+                                <div class="flex items-center gap-2.5">
+                                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[10px] font-semibold">TM</div>
+                                    <div><strong class="font-bold">T. Maluleke</strong><span class="block text-[#8a96a8] text-[11px]">Director</span></div>
+                                </div>
+                            </td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">JNB → LHR, 14 Jun</td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e2eefb] text-[#0066b3] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Flight</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px]"><span class="bg-[#e3f6ed] text-[#22a06b] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Confirmed</span></td>
+                            <td class="p-3 border-b border-[#e4eaf2] text-[13px] text-[#1f2a3a]">R 18,940</td>
+                        </tr>
+                        <tr class="hover:bg-[#fafcfe] transition-colors">
+                            <td class="p-3 text-[13px] text-[#1f2a3a]">
+                                <div class="flex items-center gap-2.5">
+                                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#0066b3] to-[#00a3a1] text-white flex items-center justify-center text-[10px] font-semibold">LK</div>
+                                    <div><strong class="font-bold">L. Khumalo</strong><span class="block text-[#8a96a8] text-[11px]">Officer</span></div>
+                                </div>
+                            </td>
+                            <td class="p-3 text-[13px] text-[#1f2a3a]">Shuttle: Sandton ⇄ OR Tambo</td>
+                            <td class="p-3 text-[13px]"><span class="bg-[#e8f4f4] text-[#00a3a1] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Shuttle</span></td>
+                            <td class="p-3 text-[13px]"><span class="bg-[#fde5e8] text-[#c8102e] px-2.5 py-[3px] rounded-full text-[11px] font-semibold">Cancelled</span></td>
+                            <td class="p-3 text-[13px] text-[#1f2a3a]">R 380</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Top Destinations -->
+        <div class="bg-white rounded-[10px] shadow-[0_1px_2px_rgba(15,23,42,.06)] border border-[#e4eaf2] p-5 flex flex-col transition-opacity duration-700 delay-300" style="opacity: @(_isLoaded ? "1" : "0")">
+            <div class="mb-4">
+                <h3 class="text-[15px] font-bold text-[#1f2a3a]">Top Destinations</h3>
+                <p class="text-[12px] text-[#8a96a8] mt-0.5">By spend, this month</p>
+            </div>
+
+            <div class="flex flex-col">
+                <div class="flex items-center justify-between py-2.5 border-b border-dashed border-[#e4eaf2]">
+                    <div class="flex items-center gap-3">
+                        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00a3a1] to-[#0066b3] text-white flex items-center justify-center text-[12px] font-bold">CT</div>
+                        <div><strong class="block text-[13px] text-[#1f2a3a]">Cape Town</strong><span class="text-[11px] text-[#8a96a8]">42 trips · ZA</span></div>
+                    </div>
+                    <div class="font-bold text-[#003b71] text-[13px]">R 612,400</div>
+                </div>
+                <div class="flex items-center justify-between py-2.5 border-b border-dashed border-[#e4eaf2]">
+                    <div class="flex items-center gap-3">
+                        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00a3a1] to-[#0066b3] text-white flex items-center justify-center text-[12px] font-bold">DBN</div>
+                        <div><strong class="block text-[13px] text-[#1f2a3a]">Durban</strong><span class="text-[11px] text-[#8a96a8]">28 trips · ZA</span></div>
+                    </div>
+                    <div class="font-bold text-[#003b71] text-[13px]">R 318,750</div>
+                </div>
+                <div class="flex items-center justify-between py-2.5 border-b border-dashed border-[#e4eaf2]">
+                    <div class="flex items-center gap-3">
+                        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00a3a1] to-[#0066b3] text-white flex items-center justify-center text-[12px] font-bold">PE</div>
+                        <div><strong class="block text-[13px] text-[#1f2a3a]">Gqeberha</strong><span class="text-[11px] text-[#8a96a8]">19 trips · ZA</span></div>
+                    </div>
+                    <div class="font-bold text-[#003b71] text-[13px]">R 214,300</div>
+                </div>
+                <div class="flex items-center justify-between py-2.5 border-b border-dashed border-[#e4eaf2]">
+                    <div class="flex items-center gap-3">
+                        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00a3a1] to-[#0066b3] text-white flex items-center justify-center text-[12px] font-bold">LDN</div>
+                        <div><strong class="block text-[13px] text-[#1f2a3a]">London</strong><span class="text-[11px] text-[#8a96a8]">4 trips · UK</span></div>
+                    </div>
+                    <div class="font-bold text-[#003b71] text-[13px]">R 188,900</div>
+                </div>
+                <div class="flex items-center justify-between py-2.5">
+                    <div class="flex items-center gap-3">
+                        <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-[#00a3a1] to-[#0066b3] text-white flex items-center justify-center text-[12px] font-bold">NBO</div>
+                        <div><strong class="block text-[13px] text-[#1f2a3a]">Nairobi</strong><span class="text-[11px] text-[#8a96a8]">6 trips · KE</span></div>
+                    </div>
+                    <div class="font-bold text-[#003b71] text-[13px]">R 142,100</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+@code {
+    private bool _isLoaded = false;
+
+    // KPI Data variables to manage count-up animation
+    private double _kpiSpend = 0;
+    private double _kpiSavings = 0;
+    private int _kpiTravellers = 0;
+    private int _kpiPolicy = 0;
+
+    // Dynamic Chart Data configuration
+    private readonly string[] Months = { "Dec", "Jan", "Feb", "Mar", "Apr", "May" };
+
+    // HTML Data
+    private readonly double[] AirData = { 820, 905, 870, 1020, 1150, 1240 };
+    private readonly double[] AccData = { 510, 560, 590, 640, 680, 720 };
+    private readonly double[] GroundData = { 180, 195, 210, 240, 260, 290 };
+
+    // Calculate maximums for scaling (approx 1400 based on data)
+    private double MaxValue => 1400;
+
+    // Chart dimensions mapped to SVG viewBox
+    private double ChartWidth = 800;
+    private double ChartHeight = 220;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await Task.Delay(50);
+            _isLoaded = true;
+            StateHasChanged();
+
+            // Run the KPI Count-up animation logic
+            int steps = 40;
+            double targetSpend = 2847310;
+            double targetSavings = 412580;
+            double targetTravellers = 238;
+            double targetPolicy = 7;
+
+            for (int i = 1; i <= steps; i++)
+            {
+                _kpiSpend = (targetSpend / steps) * i;
+                _kpiSavings = (targetSavings / steps) * i;
+                _kpiTravellers = (int)((targetTravellers / steps) * i);
+                _kpiPolicy = (int)((targetPolicy / steps) * i);
+
+                StateHasChanged();
+                await Task.Delay(22); // Replicates the Javascript animation timing
+            }
+
+            // Ensure exact final values
+            _kpiSpend = targetSpend;
+            _kpiSavings = targetSavings;
+            _kpiTravellers = (int)targetTravellers;
+            _kpiPolicy = (int)targetPolicy;
+            StateHasChanged();
+        }
+    }
+
+    private string GetPolylinePoints(double[] data)
+    {
+        var points = new List<string>();
+        for (int i = 0; i < data.Length; i++)
+        {
+            var coord = GetCoordinate(i, data[i]);
+            points.Add($"{coord.X.ToString(System.Globalization.CultureInfo.InvariantCulture)},{coord.Y.ToString(System.Globalization.CultureInfo.InvariantCulture)}");
+        }
+        return string.Join(" ", points);
+    }
+
+    private string GetPolygonPoints(double[] data)
+    {
+        var points = new List<string>();
+        points.Add($"0,{ChartHeight.ToString(System.Globalization.CultureInfo.InvariantCulture)}");
+
+        for (int i = 0; i < data.Length; i++)
+        {
+            var coord = GetCoordinate(i, data[i]);
+            points.Add($"{coord.X.ToString(System.Globalization.CultureInfo.InvariantCulture)},{coord.Y.ToString(System.Globalization.CultureInfo.InvariantCulture)}");
+        }
+
+        points.Add($"{ChartWidth.ToString(System.Globalization.CultureInfo.InvariantCulture)},{ChartHeight.ToString(System.Globalization.CultureInfo.InvariantCulture)}");
+        return string.Join(" ", points);
+    }
+
+    private (double X, double Y) GetCoordinate(int index, double value)
+    {
+        double xStep = ChartWidth / (Months.Length - 1);
+        double x = index * xStep;
+        double y = ChartHeight - ((value / MaxValue) * ChartHeight);
+
+        // 10% padding so max values don't clip the top of the SVG box
+        y = y * 0.90 + (ChartHeight * 0.10);
+
+        return (x, y);
+    }
+}
\ No newline at end of file
diff --git a/Tmt.SaqaTravel/Components/Pages/Mobile.razor b/Tmt.SaqaTravel/Components/Pages/Mobile.razor
new file mode 100644
index 0000000..2bd285c
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Mobile.razor
@@ -0,0 +1,7 @@
+@page "/mobile"
+
+<h3>Mobile</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Profile.razor b/Tmt.SaqaTravel/Components/Pages/Profile.razor
new file mode 100644
index 0000000..2da812a
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Profile.razor
@@ -0,0 +1,7 @@
+@page "/profile"
+
+<h3>Profile</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Settings.razor b/Tmt.SaqaTravel/Components/Pages/Settings.razor
new file mode 100644
index 0000000..49bf067
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Settings.razor
@@ -0,0 +1,7 @@
+@page "/settings"
+
+<h3>Settings</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/TripReports.razor b/Tmt.SaqaTravel/Components/Pages/TripReports.razor
new file mode 100644
index 0000000..9583292
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/TripReports.razor
@@ -0,0 +1,7 @@
+@page "/trip-reports"
+
+<h3>TripReports</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Vas.razor b/Tmt.SaqaTravel/Components/Pages/Vas.razor
new file mode 100644
index 0000000..4e0ced4
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Vas.razor
@@ -0,0 +1,7 @@
+@page "/vas"
+
+<h3>Vas</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/Components/Pages/Visa.razor b/Tmt.SaqaTravel/Components/Pages/Visa.razor
new file mode 100644
index 0000000..0e1340a
--- /dev/null
+++ b/Tmt.SaqaTravel/Components/Pages/Visa.razor
@@ -0,0 +1,7 @@
+@page "/visa"
+
+<h3>Visa</h3>
+
+@code {
+
+}
diff --git a/Tmt.SaqaTravel/wwwroot/app.min.css b/Tmt.SaqaTravel/wwwroot/app.min.css
index e23d7f4..40ca835 100644
--- a/Tmt.SaqaTravel/wwwroot/app.min.css
+++ b/Tmt.SaqaTravel/wwwroot/app.min.css
@@ -8,28 +8,18 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --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-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -38,17 +28,18 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
-    --font-weight-light: 300;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
-    --font-weight-extrabold: 800;
+    --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
-    --tracking-wider: 0.05em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
-    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
-    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
-    --blur-sm: 8px;
+    --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -219,24 +210,36 @@
   .static {
     position: static;
   }
+  .inset-0 {
+    inset: 0;
+  }
+  .top-0 {
+    top: 0;
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
-  .top-4 {
-    top: calc(var(--spacing) * 4);
+  .right-0 {
+    right: 0;
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
   }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
   .bottom-0 {
     bottom: 0;
   }
+  .bottom-8 {
+    bottom: calc(var(--spacing) * 8);
+  }
   .left-0 {
     left: 0;
   }
+  .left-12 {
+    left: calc(var(--spacing) * 12);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -249,8 +252,8 @@
   .m-0 {
     margin: 0;
   }
-  .mx-1 {
-    margin-inline: var(--spacing);
+  .m-3 {
+    margin: calc(var(--spacing) * 3);
   }
   .mx-auto {
     margin-inline: auto;
@@ -258,80 +261,197 @@
   .my-\[20vh\] {
     margin-block: 20vh;
   }
-  .-mt-1 {
-    margin-top: calc(var(--spacing) * -1);
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
+  .mt-1 {
+    margin-top: var(--spacing);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
   }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
+  .mb-1 {
+    margin-bottom: var(--spacing);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-2\.5 {
+    margin-bottom: calc(var(--spacing) * 2.5);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
-  .ml-auto {
-    margin-left: auto;
+  .mb-\[22px\] {
+    margin-bottom: 22px;
+  }
+  .-ml-4 {
+    margin-left: calc(var(--spacing) * -4);
+  }
+  .ml-12 {
+    margin-left: calc(var(--spacing) * 12);
+  }
+  .block {
+    display: block;
   }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
-  .h-3 {
-    height: calc(var(--spacing) * 3);
+  .inline-block {
+    display: inline-block;
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
+  .h-0 {
+    height: 0;
   }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
   }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
+  .h-9 {
+    height: calc(var(--spacing) * 9);
   }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .min-h-\[4\.5rem\] {
-    min-height: 4.5rem;
+  .h-\[18px\] {
+    height: 18px;
+  }
+  .h-\[38px\] {
+    height: 38px;
+  }
+  .h-\[52px\] {
+    height: 52px;
+  }
+  .h-\[54px\] {
+    height: 54px;
+  }
+  .h-\[56px\] {
+    height: 56px;
+  }
+  .h-\[160px\] {
+    height: 160px;
+  }
+  .h-\[180px\] {
+    height: 180px;
+  }
+  .h-\[calc\(100vh-130px\)\] {
+    height: calc(100vh - 130px);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-\[72px\] {
+    min-height: 72px;
+  }
+  .min-h-\[260px\] {
+    min-height: 260px;
   }
   .min-h-screen {
     min-height: 100vh;
   }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
+  .w-1 {
+    width: var(--spacing);
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
   }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
-  .w-14 {
-    width: calc(var(--spacing) * 14);
+  .w-9 {
+    width: calc(var(--spacing) * 9);
   }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
+  .w-\[38px\] {
+    width: 38px;
+  }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
-  .w-px {
-    width: 1px;
+  .max-w-\[170px\] {
+    max-width: 170px;
+  }
+  .max-w-\[180px\] {
+    max-width: 180px;
+  }
+  .max-w-\[1600px\] {
+    max-width: 1600px;
+  }
+  .min-w-0 {
+    min-width: 0;
+  }
+  .min-w-\[600px\] {
+    min-width: 600px;
   }
   .min-w-full {
     min-width: 100%;
@@ -342,11 +462,14 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
-  .origin-left {
-    transform-origin: 0;
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
   .animate-\[ping_1\.5s_cubic-bezier\(0\,0\.2\,0\.8\,1\)_infinite\] {
     animation: ping 1.5s cubic-bezier(0,0.2,0.8,1) infinite;
@@ -357,38 +480,66 @@
   .appearance-none {
     appearance: none;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .space-y-1 {
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .divide-y {
@@ -405,18 +556,33 @@
       border-color: var(--color-gray-200);
     }
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -425,6 +591,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-\[3px\] {
     border-style: var(--tw-border-style);
     border-width: 3px;
@@ -433,18 +603,26 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-l-2 {
+  .border-l-\[3px\] {
     border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
+    border-left-width: 3px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
   }
   .border-\[\#0087ff\] {
     border-color: #0087ff;
   }
-  .border-gray-100 {
-    border-color: var(--color-gray-100);
+  .border-\[\#e4eaf2\] {
+    border-color: #e4eaf2;
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
+  .border-\[\#eef2f8\] {
+    border-color: #eef2f8;
   }
   .border-gray-300 {
     border-color: var(--color-gray-300);
@@ -452,23 +630,62 @@
   .border-transparent {
     border-color: transparent;
   }
+  .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);
     }
   }
+  .bg-\[\#00a3a1\] {
+    background-color: #00a3a1;
+  }
+  .bg-\[\#003b71\] {
+    background-color: #003b71;
+  }
   .bg-\[\#6b9ed2\] {
     background-color: #6b9ed2;
   }
+  .bg-\[\#22a06b\] {
+    background-color: #22a06b;
+  }
+  .bg-\[\#0066b3\] {
+    background-color: #0066b3;
+  }
+  .bg-\[\#c0d4e6\] {
+    background-color: #c0d4e6;
+  }
+  .bg-\[\#c8102e\] {
+    background-color: #c8102e;
+  }
+  .bg-\[\#e2eefb\] {
+    background-color: #e2eefb;
+  }
+  .bg-\[\#e3f6ed\] {
+    background-color: #e3f6ed;
+  }
+  .bg-\[\#e8f4f4\] {
+    background-color: #e8f4f4;
+  }
+  .bg-\[\#f4a300\] {
+    background-color: #f4a300;
+  }
+  .bg-\[\#f4f7fb\] {
+    background-color: #f4f7fb;
+  }
+  .bg-\[\#fde5e8\] {
+    background-color: #fde5e8;
+  }
+  .bg-\[\#fff4dd\] {
+    background-color: #fff4dd;
+  }
   .bg-\[\#ffffe0\] {
     background-color: #ffffe0;
   }
-  .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-\[\#ffffff14\] {
+    background-color: #ffffff14;
   }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
@@ -476,53 +693,46 @@
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
-  .bg-gray-50\/50 {
-    background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
-    }
-  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
-  .bg-gray-300 {
-    background-color: var(--color-gray-300);
+  .bg-transparent {
+    background-color: transparent;
   }
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-gradient-to-b {
-    --tw-gradient-position: to bottom in oklab;
+  .bg-white\/10 {
+    background-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
+  .bg-\[url\(\'data\:image\/svg\+xml\,\%3csvg_xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27_viewBox\=\%270_0_24_24\%27_fill\=\%27none\%27_stroke\=\%27currentColor\%27_stroke-width\=\%272\%27\%3e\%3cline_x1\=\%273\%27_y1\=\%276\%27_x2\=\%2721\%27_y2\=\%276\%27\/\%3e\%3cline_x1\=\%273\%27_y1\=\%2712\%27_x2\=\%2721\%27_y2\=\%2712\%27\/\%3e\%3cline_x1\=\%273\%27_y1\=\%2718\%27_x2\=\%2721\%27_y2\=\%2718\%27\/\%3e\%3c\/svg\%3e\'\)\] {
+    background-image: url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_24_24%27_fill=%27none%27_stroke=%27currentColor%27_stroke-width=%272%27%3e%3cline_x1=%273%27_y1=%276%27_x2=%2721%27_y2=%276%27/%3e%3cline_x1=%273%27_y1=%2712%27_x2=%2721%27_y2=%2712%27/%3e%3cline_x1=%273%27_y1=%2718%27_x2=%2721%27_y2=%2718%27/%3e%3c/svg%3e');
   }
-  .bg-\[url\(\'data\:image\/svg\+xml\,\%3csvg_xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27_viewBox\=\%270_0_30_30\%27\%3e\%3cpath_stroke\=\%27rgba\(255\,255\,255\,0\.55\)\%27_stroke-linecap\=\%27round\%27_stroke-miterlimit\=\%2710\%27_stroke-width\=\%272\%27_d\=\%27M4_7h22M4_15h22M4_23h22\%27\/\%3e\%3c\/svg\%3e\'\)\] {
-    background-image: url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e');
-  }
-  .from-\[\#052767\] {
-    --tw-gradient-from: #052767;
+  .from-\[\#00a3a1\] {
+    --tw-gradient-from: #00a3a1;
     --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);
+  .from-\[\#0066b3\] {
+    --tw-gradient-from: #0066b3;
     --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-\[\#020f26\] {
-    --tw-gradient-to: #020f26;
+  .to-\[\#00a3a1\] {
+    --tw-gradient-to: #00a3a1;
     --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);
+  .to-\[\#0066b3\] {
+    --tw-gradient-to: #0066b3;
     --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-\[length\:1\.75rem\] {
-    background-size: 1.75rem;
-  }
-  .bg-clip-text {
-    background-clip: text;
+  .bg-\[length\:20px\] {
+    background-size: 20px;
   }
   .bg-center {
     background-position: center;
@@ -530,33 +740,66 @@
   .bg-no-repeat {
     background-repeat: no-repeat;
   }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
+  .object-contain {
+    object-fit: contain;
+  }
+  .p-0 {
+    padding: 0;
   }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[18px\] {
+    padding: 18px;
+  }
   .px-1 {
     padding-inline: var(--spacing);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
+  }
+  .px-\[7px\] {
+    padding-inline: 7px;
+  }
+  .px-\[14px\] {
+    padding-inline: 14px;
+  }
+  .px-\[18px\] {
+    padding-inline: 18px;
+  }
   .py-1 {
     padding-block: var(--spacing);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -569,17 +812,47 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
+  .py-\[1px\] {
+    padding-block: 1px;
   }
-  .py-6 {
-    padding-block: calc(var(--spacing) * 6);
+  .py-\[3px\] {
+    padding-block: 3px;
   }
-  .pr-1 {
-    padding-right: var(--spacing);
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+  .pt-9 {
+    padding-top: calc(var(--spacing) * 9);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .pr-3\.5 {
+    padding-right: calc(var(--spacing) * 3.5);
+  }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .pb-3\.5 {
+    padding-bottom: calc(var(--spacing) * 3.5);
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pl-1 {
+    padding-left: var(--spacing);
   }
   .text-center {
     text-align: center;
@@ -603,25 +876,56 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
+  .text-\[10px\] {
+    font-size: 10px;
   }
-  .text-\[0\.65rem\] {
-    font-size: 0.65rem;
+  .text-\[11px\] {
+    font-size: 11px;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
+  .text-\[16px\] {
+    font-size: 16px;
+  }
+  .text-\[18px\] {
+    font-size: 18px;
+  }
+  .text-\[22px\] {
+    font-size: 22px;
+  }
+  .text-\[26px\] {
+    font-size: 26px;
+  }
+  .leading-\[1\.2\] {
+    --tw-leading: 1.2;
+    line-height: 1.2;
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
   }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .font-extrabold {
-    --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);
@@ -630,41 +934,83 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[0\.2em\] {
-    --tw-tracking: 0.2em;
-    letter-spacing: 0.2em;
+  .tracking-\[0\.02em\] {
+    --tw-tracking: 0.02em;
+    letter-spacing: 0.02em;
+  }
+  .tracking-\[0\.06em\] {
+    --tw-tracking: 0.06em;
+    letter-spacing: 0.06em;
+  }
+  .tracking-\[0\.08em\] {
+    --tw-tracking: 0.08em;
+    letter-spacing: 0.08em;
+  }
+  .tracking-\[0\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
   }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-blue-300 {
-    color: var(--color-blue-300);
+  .text-\[\#00a3a1\] {
+    color: #00a3a1;
   }
-  .text-blue-300\/80 {
-    color: color-mix(in srgb, oklch(80.9% 0.105 251.813) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-blue-300) 80%, transparent);
-    }
+  .text-\[\#00d4d1\] {
+    color: #00d4d1;
   }
-  .text-blue-400 {
-    color: var(--color-blue-400);
+  .text-\[\#1f2a3a\] {
+    color: #1f2a3a;
   }
-  .text-blue-600 {
-    color: var(--color-blue-600);
+  .text-\[\#003b71\] {
+    color: #003b71;
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
+  .text-\[\#5a6577\] {
+    color: #5a6577;
   }
-  .text-gray-400 {
-    color: var(--color-gray-400);
+  .text-\[\#8a96a8\] {
+    color: #8a96a8;
+  }
+  .text-\[\#8aa4c4\] {
+    color: #8aa4c4;
+  }
+  .text-\[\#22a06b\] {
+    color: #22a06b;
+  }
+  .text-\[\#0066b3\] {
+    color: #0066b3;
+  }
+  .text-\[\#647892\] {
+    color: #647892;
+  }
+  .text-\[\#aac1de\] {
+    color: #aac1de;
+  }
+  .text-\[\#b06b00\] {
+    color: #b06b00;
+  }
+  .text-\[\#b8c8df\] {
+    color: #b8c8df;
+  }
+  .text-\[\#c1d2e7\] {
+    color: #c1d2e7;
+  }
+  .text-\[\#c8102e\] {
+    color: #c8102e;
+  }
+  .text-\[\#d9f1f0\] {
+    color: #d9f1f0;
+  }
+  .text-\[\#dc2626\] {
+    color: #dc2626;
   }
   .text-gray-500 {
     color: var(--color-gray-500);
@@ -675,15 +1021,9 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
-  .text-green-600 {
-    color: var(--color-green-600);
-  }
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-transparent {
-    color: transparent;
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -693,9 +1033,6 @@
   .italic {
     font-style: italic;
   }
-  .no-underline {
-    text-decoration-line: none;
-  }
   .underline {
     text-decoration-line: underline;
   }
@@ -706,6 +1043,10 @@
     --tw-shadow: 0 -1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_2px_rgba\(15\,23\,42\,\.06\)\] {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,.06));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-inner {
     --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -729,21 +1070,6 @@
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
-  .drop-shadow-lg {
-    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
-    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-sm {
-    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
-    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
-    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,);
-  }
-  .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,);
-    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,);
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -754,52 +1080,107 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
+  .transition-opacity {
+    transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .delay-100 {
+    transition-delay: 100ms;
+  }
+  .delay-200 {
+    transition-delay: 200ms;
+  }
+  .delay-300 {
+    transition-delay: 300ms;
+  }
+  .delay-500 {
+    transition-delay: 500ms;
+  }
+  .delay-\[100ms\] {
+    transition-delay: 100ms;
+  }
+  .delay-\[200ms\] {
+    transition-delay: 200ms;
+  }
+  .delay-\[300ms\] {
+    transition-delay: 300ms;
+  }
+  .delay-\[400ms\] {
+    transition-delay: 400ms;
+  }
+  .delay-\[500ms\] {
+    transition-delay: 500ms;
+  }
+  .delay-\[600ms\] {
+    transition-delay: 600ms;
+  }
+  .delay-\[700ms\] {
+    transition-delay: 700ms;
+  }
+  .delay-\[800ms\] {
+    transition-delay: 800ms;
+  }
+  .delay-\[900ms\] {
+    transition-delay: 900ms;
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
   .duration-500 {
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
-  .group-hover\:scale-\[1\.02\] {
+  .duration-700 {
+    --tw-duration: 700ms;
+    transition-duration: 700ms;
+  }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
+  .duration-\[1500ms\] {
+    --tw-duration: 1500ms;
+    transition-duration: 1500ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .group-hover\:w-1\.5 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        scale: 1.02;
+        width: calc(var(--spacing) * 1.5);
       }
     }
   }
-  .group-hover\:text-blue-200 {
+  .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        color: var(--color-blue-200);
+        opacity: 100%;
       }
     }
   }
-  .group-hover\:text-white {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-  }
-  .group-\[\.active\]\:text-blue-400 {
-    &:is(:where(.group):is(.active) *) {
-      color: var(--color-blue-400);
-    }
-  }
-  .peer-checked\:block {
+  .peer-checked\:flex {
     &:is(:where(.peer):checked ~ *) {
-      display: block;
+      display: flex;
     }
   }
   .backdrop\:animate-\[fadeIn_0\.5s_ease-in-out\] {
@@ -820,11 +1201,15 @@
       animation: slideUp 1.5s cubic-bezier(0.05,0.89,0.25,1.02) 0.3s,fadeIn 0.5s ease-in-out 0.3s;
     }
   }
-  .checked\:bg-white\/20 {
-    &:checked {
-      background-color: color-mix(in srgb, #fff 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+  .focus-within\:border-\[\#0066b3\] {
+    &:focus-within {
+      border-color: #0066b3;
+    }
+  }
+  .hover\:bg-\[\#003b71\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #003b71;
       }
     }
   }
@@ -835,10 +1220,31 @@
       }
     }
   }
-  .hover\:bg-blue-50 {
+  .hover\:bg-\[\#e8eef7\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-50);
+        background-color: #e8eef7;
+      }
+    }
+  }
+  .hover\:bg-\[\#f4f7fb\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #f4f7fb;
+      }
+    }
+  }
+  .hover\:bg-\[\#fafcfe\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #fafcfe;
+      }
+    }
+  }
+  .hover\:bg-\[\#ffffff2e\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #ffffff2e;
       }
     }
   }
@@ -863,23 +1269,16 @@
       }
     }
   }
-  .hover\:bg-white\/10 {
+  .hover\:bg-white\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 10%, transparent);
+        background-color: color-mix(in srgb, #fff 5%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
         }
       }
     }
   }
-  .hover\:text-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-blue-600);
-      }
-    }
-  }
   .hover\:text-white {
     &:hover {
       @media (hover: hover) {
@@ -887,49 +1286,25 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .active\:bg-\[\#6b9ed2\] {
     &:active {
       background-color: #6b9ed2;
     }
   }
-  .sm\:sticky {
+  .sm\:flex {
     @media (width >= 40rem) {
-      position: sticky;
+      display: flex;
     }
   }
-  .sm\:top-0 {
+  .sm\:grid-cols-2 {
     @media (width >= 40rem) {
-      top: 0;
-    }
-  }
-  .sm\:mx-2 {
-    @media (width >= 40rem) {
-      margin-inline: calc(var(--spacing) * 2);
-    }
-  }
-  .sm\:block {
-    @media (width >= 40rem) {
-      display: block;
-    }
-  }
-  .sm\:hidden {
-    @media (width >= 40rem) {
-      display: none;
-    }
-  }
-  .sm\:h-\[calc\(100vh-4\.5rem\)\] {
-    @media (width >= 40rem) {
-      height: calc(100vh - 4.5rem);
-    }
-  }
-  .sm\:h-screen {
-    @media (width >= 40rem) {
-      height: 100vh;
-    }
-  }
-  .sm\:w-\[250px\] {
-    @media (width >= 40rem) {
-      width: 250px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
   .sm\:flex-row {
@@ -937,24 +1312,84 @@
       flex-direction: row;
     }
   }
-  .sm\:gap-4 {
+  .sm\:items-end {
     @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 4);
+      align-items: flex-end;
     }
   }
-  .sm\:overflow-y-auto {
-    @media (width >= 40rem) {
+  .md\:sticky {
+    @media (width >= 48rem) {
+      position: sticky;
+    }
+  }
+  .md\:top-0 {
+    @media (width >= 48rem) {
+      top: 0;
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:h-screen {
+    @media (width >= 48rem) {
+      height: 100vh;
+    }
+  }
+  .md\:w-\[260px\] {
+    @media (width >= 48rem) {
+      width: 260px;
+    }
+  }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
+  .md\:gap-0 {
+    @media (width >= 48rem) {
+      gap: 0;
+    }
+  }
+  .md\:overflow-y-auto {
+    @media (width >= 48rem) {
       overflow-y: auto;
     }
   }
-  .sm\:px-6 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
+  .md\:p-7 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 7);
     }
   }
-  .sm\:px-8 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 8);
+  .md\:px-7 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 7);
+    }
+  }
+  .md\:py-0 {
+    @media (width >= 48rem) {
+      padding-block: 0;
+    }
+  }
+  .lg\:col-span-1 {
+    @media (width >= 64rem) {
+      grid-column: span 1 / span 1;
     }
   }
   .lg\:flex {
@@ -962,17 +1397,52 @@
       display: flex;
     }
   }
-  .\[\&\.active\]\:border-blue-400 {
-    &.active {
-      border-color: var(--color-blue-400);
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .\[\&\.active\]\:bg-blue-500\/20 {
+  .lg\:grid-cols-\[2fr_1fr\] {
+    @media (width >= 64rem) {
+      grid-template-columns: 2fr 1fr;
+    }
+  }
+  .lg\:flex-row {
+    @media (width >= 64rem) {
+      flex-direction: row;
+    }
+  }
+  .lg\:items-center {
+    @media (width >= 64rem) {
+      align-items: center;
+    }
+  }
+  .lg\:pr-4 {
+    @media (width >= 64rem) {
+      padding-right: calc(var(--spacing) * 4);
+    }
+  }
+  .\[\&\.active\]\:border-\[\#00a3a1\] {
     &.active {
-      background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
-      }
+      border-color: #00a3a1;
+    }
+  }
+  .\[\&\.active\]\:bg-gradient-to-r {
+    &.active {
+      --tw-gradient-position: to right in oklab;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+  }
+  .\[\&\.active\]\:from-\[\#00a3a12e\] {
+    &.active {
+      --tw-gradient-from: #00a3a12e;
+      --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));
+    }
+  }
+  .\[\&\.active\]\:to-transparent {
+    &.active {
+      --tw-gradient-to: transparent;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
   .\[\&\.active\]\:text-white {
@@ -981,6 +1451,26 @@
     }
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -1038,6 +1528,10 @@
   inherits: false;
   initial-value: 100%;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1111,99 +1605,14 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -1213,6 +1622,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
@@ -1225,6 +1639,7 @@
       --tw-gradient-from-position: 0%;
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
@@ -1241,29 +1656,8 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }