From 4fa51ac52d50f3e1cffcbc798ad5f91de6306fb1 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 26 Apr 2025 15:22:55 -0700
Subject: [PATCH] change tailwindcss imports

---
 bun.lock                                      |   14 +-
 package.json                                  |    2 +-
 src/components/core/Navbar.astro              |    1 +
 src/components/dashboard/EventsSection.astro  |    2 +-
 .../dashboard/EventsSection/EventLoad.tsx     |    2 +-
 .../LeaderboardSection/LeaderboardTable.tsx   |    2 +-
 .../OfficerManagement/OfficerManagement.tsx   |    4 +-
 .../dashboard/Officer_EventManagement.astro   |    8 +-
 .../Officer_EventRequestManagement.astro      |    2 +-
 src/components/dashboard/ProfileSection.astro |    4 +-
 .../ProfileSection/ShowProfileLogs.tsx        |    2 +-
 .../dashboard/ResumeDatabase/ResumeDetail.tsx |    2 +-
 .../dashboard/ResumeDatabase/ResumeSearch.tsx |    2 +-
 .../dashboard/SettingsSection.astro           |    2 +-
 .../AccountSecuritySettings.tsx               |    6 +-
 .../ReimbursementManagementPortal.tsx         |   36 +-
 .../dashboard/universal/CustomAlert.tsx       |    2 +-
 .../universal/FirstTimeLoginPopup.tsx         |    4 +-
 src/components/dashboard/universal/Toast.tsx  |    2 +-
 src/pages/dashboard.astro                     | 1881 ++++++++---------
 src/pages/oauth2-redirect.astro               |    1 +
 src/styles/global.css                         |    3 +-
 tailwind.config.mjs                           |   57 +-
 23 files changed, 991 insertions(+), 1050 deletions(-)

diff --git a/bun.lock b/bun.lock
index 710cf35..8e89fc4 100644
--- a/bun.lock
+++ b/bun.lock
@@ -41,7 +41,7 @@
       "devDependencies": {
         "@types/prismjs": "^1.26.5",
         "autoprefixer": "^10.4.21",
-        "daisyui": "^4.12.24",
+        "daisyui": "^5.0.28",
         "prettier": "^3.5.3",
         "prettier-plugin-astro": "^0.14.1",
         "tailwindcss-animated": "^1.1.2",
@@ -806,8 +806,6 @@
 
     "camelcase": ["camelcase@8.0.0", "", {}, "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA=="],
 
-    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
-
     "caniuse-lite": ["caniuse-lite@1.0.30001712", "", {}, "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig=="],
 
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
@@ -882,8 +880,6 @@
 
     "css-selector-parser": ["css-selector-parser@3.0.5", "", {}, "sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g=="],
 
-    "css-selector-tokenizer": ["css-selector-tokenizer@0.8.0", "", { "dependencies": { "cssesc": "^3.0.0", "fastparse": "^1.1.2" } }, "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg=="],
-
     "css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="],
 
     "css-what": ["css-what@6.1.0", "", {}, "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="],
@@ -894,9 +890,7 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
-    "culori": ["culori@3.3.0", "", {}, "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ=="],
-
-    "daisyui": ["daisyui@4.12.24", "", { "dependencies": { "css-selector-tokenizer": "^0.8", "culori": "^3", "picocolors": "^1", "postcss-js": "^4" } }, "sha512-JYg9fhQHOfXyLadrBrEqCDM6D5dWCSSiM6eTNCRrBRzx/VlOCrLS8eDfIw9RVvs64v2mJdLooKXY8EwQzoszAA=="],
+    "daisyui": ["daisyui@5.0.28", "", {}, "sha512-H082p8Lg3c7Se9wTbjfSOOhfUbp3BnOM2+cdr3OeY5G1Ll7GYLXB9NWLHgitkTsB1pQKwHRYYchqN2YG0VVShg=="],
 
     "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
 
@@ -1004,8 +998,6 @@
 
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
-    "fastparse": ["fastparse@1.1.2", "", {}, "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="],
-
     "fd-slicer": ["fd-slicer@1.1.0", "", { "dependencies": { "pend": "~1.2.0" } }, "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g=="],
 
     "fdir": ["fdir@6.4.4", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg=="],
@@ -1378,8 +1370,6 @@
 
     "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
 
-    "postcss-js": ["postcss-js@4.0.1", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw=="],
-
     "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
 
     "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
diff --git a/package.json b/package.json
index 697cbe5..f40b36f 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@types/prismjs": "^1.26.5",
     "autoprefixer": "^10.4.21",
-    "daisyui": "^4.12.24",
+    "daisyui": "^5.0.28",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "tailwindcss-animated": "^1.1.2",
diff --git a/src/components/core/Navbar.astro b/src/components/core/Navbar.astro
index 6295a09..5cd9d95 100644
--- a/src/components/core/Navbar.astro
+++ b/src/components/core/Navbar.astro
@@ -167,6 +167,7 @@ import pages from "../../data/pages.json";
 </div>
 
 <style>
+  @import "../../styles/global.css";
   #mobile-menu.show {
     @apply translate-x-0;
   }
diff --git a/src/components/dashboard/EventsSection.astro b/src/components/dashboard/EventsSection.astro
index 3dd4f25..1d5ca9c 100644
--- a/src/components/dashboard/EventsSection.astro
+++ b/src/components/dashboard/EventsSection.astro
@@ -122,7 +122,7 @@ import EventLoad from "./EventsSection/EventLoad";
     <div class="relative" id="previewContainer">
       <div
         id="previewLoadingSpinner"
-        class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
+        class="absolute inset-0 flex items-center justify-center bg-base-200/50 hidden"
       >
         <span class="loading loading-spinner loading-md sm:loading-lg"></span>
       </div>
diff --git a/src/components/dashboard/EventsSection/EventLoad.tsx b/src/components/dashboard/EventsSection/EventLoad.tsx
index 8d3c143..57e0c2d 100644
--- a/src/components/dashboard/EventsSection/EventLoad.tsx
+++ b/src/components/dashboard/EventsSection/EventLoad.tsx
@@ -225,7 +225,7 @@ const EventLoad = () => {
                         {/* Event Header */}
                         <div className="flex justify-between items-start mb-2">
                             <h3 className="card-title text-base sm:text-lg font-semibold line-clamp-2">{event.event_name}</h3>
-                            <div className="badge badge-primary badge-sm flex-shrink-0">{event.points_to_reward} pts</div>
+                            <div className="badge badge-primary badge-sm shrink-0">{event.points_to_reward} pts</div>
                         </div>
 
                         {/* Event Description */}
diff --git a/src/components/dashboard/LeaderboardSection/LeaderboardTable.tsx b/src/components/dashboard/LeaderboardSection/LeaderboardTable.tsx
index 2fb71d1..4ea91b9 100644
--- a/src/components/dashboard/LeaderboardSection/LeaderboardTable.tsx
+++ b/src/components/dashboard/LeaderboardSection/LeaderboardTable.tsx
@@ -260,7 +260,7 @@ export default function LeaderboardTable() {
                                     </td>
                                     <td className="px-6 py-4 whitespace-nowrap">
                                         <div className="flex items-center">
-                                            <div className="flex-shrink-0 h-10 w-10">
+                                            <div className="shrink-0 h-10 w-10">
                                                 <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden relative">
                                                     {user.avatar ? (
                                                         <img className="h-10 w-10 rounded-full" src={user.avatar} alt={user.name} />
diff --git a/src/components/dashboard/OfficerManagement/OfficerManagement.tsx b/src/components/dashboard/OfficerManagement/OfficerManagement.tsx
index ea75b49..6a08db6 100644
--- a/src/components/dashboard/OfficerManagement/OfficerManagement.tsx
+++ b/src/components/dashboard/OfficerManagement/OfficerManagement.tsx
@@ -1483,7 +1483,7 @@ export default function OfficerManagement() {
                                                 </span>
                                             )}
                                         </h3>
-                                        <div className="w-[140px] flex-shrink-0">
+                                        <div className="w-[140px] shrink-0">
                                             <label className="flex items-center gap-2 cursor-pointer">
                                                 <input
                                                     type="checkbox"
@@ -1699,7 +1699,7 @@ export default function OfficerManagement() {
                         Current Officers
                     </h2>
                     <div className="flex flex-col md:flex-row gap-3 w-full md:w-auto">
-                        <div className="relative flex-grow">
+                        <div className="relative grow">
                             <input
                                 type="text"
                                 placeholder="Search officers..."
diff --git a/src/components/dashboard/Officer_EventManagement.astro b/src/components/dashboard/Officer_EventManagement.astro
index b178864..9b1b3b5 100644
--- a/src/components/dashboard/Officer_EventManagement.astro
+++ b/src/components/dashboard/Officer_EventManagement.astro
@@ -218,7 +218,7 @@ const currentPage = eventResponse.page;
                 </div>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4 flex-shrink-0 ml-2"
+                  class="h-4 w-4 shrink-0 ml-2"
                   viewBox="0 0 20 20"
                   fill="currentColor"
                 >
@@ -266,7 +266,7 @@ const currentPage = eventResponse.page;
                 </div>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4 flex-shrink-0 ml-2"
+                  class="h-4 w-4 shrink-0 ml-2"
                   viewBox="0 0 20 20"
                   fill="currentColor"
                 >
@@ -662,7 +662,7 @@ const currentPage = eventResponse.page;
     <div class="relative" id="previewContainer">
       <div
         id="previewLoadingSpinner"
-        class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
+        class="absolute inset-0 flex items-center justify-center bg-base-200/50 hidden"
       >
         <span class="loading loading-spinner loading-lg"></span>
       </div>
@@ -1745,7 +1745,7 @@ const currentPage = eventResponse.page;
                             <div class="flex items-center gap-2 flex-1 min-w-0">
                                 <span class="truncate">${filename}</span>
                             </div>
-                            <div class="flex gap-2 flex-shrink-0">
+                            <div class="flex gap-2 shrink-0">
                                 <button type="button" class="btn btn-ghost btn-xs" onclick='window.showFilePreviewOfficer(${previewData})'>
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                         <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
diff --git a/src/components/dashboard/Officer_EventRequestManagement.astro b/src/components/dashboard/Officer_EventRequestManagement.astro
index 714f9c7..5152963 100644
--- a/src/components/dashboard/Officer_EventRequestManagement.astro
+++ b/src/components/dashboard/Officer_EventRequestManagement.astro
@@ -194,7 +194,7 @@ try {
             <div class="flex items-start gap-3">
                 <Icon
                     name="mdi:lightbulb-on"
-                    class="w-5 h-5 text-primary mt-1 flex-shrink-0"
+                    class="w-5 h-5 text-primary mt-1 shrink-0"
                 />
                 <div>
                     <p class="font-medium mb-2 text-white">
diff --git a/src/components/dashboard/ProfileSection.astro b/src/components/dashboard/ProfileSection.astro
index 3ac068a..912ce04 100644
--- a/src/components/dashboard/ProfileSection.astro
+++ b/src/components/dashboard/ProfileSection.astro
@@ -17,7 +17,7 @@ import { Stats } from "./ProfileSection/Stats";
         >
             <div class="flex items-center justify-between">
                 <div class="flex items-start space-x-3">
-                    <div class="flex-shrink-0 mt-0.5">
+                    <div class="shrink-0 mt-0.5">
                         <div class="p-1.5 bg-error/20 rounded-full">
                             <Icon
                                 name="heroicons:document-text"
@@ -36,7 +36,7 @@ import { Stats } from "./ProfileSection/Stats";
                         </p>
                     </div>
                 </div>
-                <div class="ml-4 flex-shrink-0 self-center">
+                <div class="ml-4 shrink-0 self-center">
                     <a
                         href="#settings-section"
                         class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-error hover:bg-error-focus focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error transition-colors duration-200"
diff --git a/src/components/dashboard/ProfileSection/ShowProfileLogs.tsx b/src/components/dashboard/ProfileSection/ShowProfileLogs.tsx
index 8aed4e9..b6e2a3b 100644
--- a/src/components/dashboard/ProfileSection/ShowProfileLogs.tsx
+++ b/src/components/dashboard/ProfileSection/ShowProfileLogs.tsx
@@ -449,7 +449,7 @@ export default function ShowProfileLogs() {
             <div className="space-y-2">
                 {logs.map((log) => (
                     <div key={log.id} className="flex items-start gap-4 p-4 rounded-lg hover:bg-base-200 transition-colors duration-200">
-                        <div className="flex-shrink-0">
+                        <div className="shrink-0">
                             <div className={`w-10 h-10 rounded-full flex items-center justify-center ${getLogTypeColor(log.type)}`}>
                                 {getLogTypeIcon(log.type)}
                             </div>
diff --git a/src/components/dashboard/ResumeDatabase/ResumeDetail.tsx b/src/components/dashboard/ResumeDatabase/ResumeDetail.tsx
index c324c02..719f77b 100644
--- a/src/components/dashboard/ResumeDatabase/ResumeDetail.tsx
+++ b/src/components/dashboard/ResumeDatabase/ResumeDetail.tsx
@@ -109,7 +109,7 @@ export default function ResumeDetail() {
         <div className="space-y-6">
             {/* Student Information */}
             <div className="flex flex-col md:flex-row gap-6">
-                <div className="flex-shrink-0">
+                <div className="shrink-0">
                     <div className="avatar">
                         <div className="w-24 h-24 rounded-xl">
                             {user.avatar ? (
diff --git a/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx b/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
index 0f7fb8d..8448753 100644
--- a/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
+++ b/src/components/dashboard/ResumeDatabase/ResumeSearch.tsx
@@ -41,7 +41,7 @@ export default function ResumeSearch() {
     return (
         <div className="relative">
             <div className="flex items-center">
-                <div className="relative flex-grow">
+                <div className="relative grow">
                     <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                         <svg className="w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
diff --git a/src/components/dashboard/SettingsSection.astro b/src/components/dashboard/SettingsSection.astro
index 248f4d6..282934a 100644
--- a/src/components/dashboard/SettingsSection.astro
+++ b/src/components/dashboard/SettingsSection.astro
@@ -186,7 +186,7 @@ const safeLogtoApiEndpoint = logtoApiEndpoint || "";
     >
         <!-- Coming Soon Overlay -->
         <div
-            class="absolute inset-0 bg-muted bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
+            class="absolute inset-0 bg-muted/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
         >
             <div class="text-center">
                 <h4 class="text-xl font-bold">Coming Soon</h4>
diff --git a/src/components/dashboard/SettingsSection/AccountSecuritySettings.tsx b/src/components/dashboard/SettingsSection/AccountSecuritySettings.tsx
index 8f8b094..d7d0218 100644
--- a/src/components/dashboard/SettingsSection/AccountSecuritySettings.tsx
+++ b/src/components/dashboard/SettingsSection/AccountSecuritySettings.tsx
@@ -104,7 +104,7 @@ export default function AccountSecuritySettings({
 
     if (!isAuthenticated) {
         return (
-            <div className="p-4 text-error bg-error bg-opacity-10 rounded-lg">
+            <div className="p-4 text-error bg-error/10 rounded-lg">
                 <span>You must be logged in to access this page.</span>
             </div>
         );
@@ -170,11 +170,11 @@ export default function AccountSecuritySettings({
                     <h4 className="font-semibold text-lg mb-2">Account Actions</h4>
 
                     <div className="space-y-4">
-                        <p className="text-sm text-warning p-3 bg-warning bg-opacity-10 rounded-lg">
+                        <p className="text-sm text-warning p-3 bg-warning/10 rounded-lg">
                             If you need to delete your account or have other account-related issues,
                             please contact an IEEE UCSD administrator.
                         </p>
-                        <p className="text-sm text-info p-3 bg-info bg-opacity-10 rounded-lg">
+                        <p className="text-sm text-info p-3 bg-info/10 rounded-lg">
                             To log out of your account, use the Logout option in the dashboard menu.
                         </p>
                     </div>
diff --git a/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx b/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx
index c0888e1..c8c5710 100644
--- a/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx
+++ b/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx
@@ -893,16 +893,16 @@ export default function ReimbursementManagementPortal() {
                                                 </h3>
                                                 <div className="flex flex-wrap gap-3 text-sm">
                                                     <div className="flex items-center gap-1.5 text-base-content/70">
-                                                        <Icon icon="heroicons:calendar" className="h-4 w-4 flex-shrink-0" />
+                                                        <Icon icon="heroicons:calendar" className="h-4 w-4 shrink-0" />
                                                         <span>{new Date(reimbursement.date_of_purchase).toLocaleDateString()}</span>
                                                     </div>
                                                     <div className="flex items-center gap-1.5 text-base-content/70">
-                                                        <Icon icon="heroicons:building-office" className="h-4 w-4 flex-shrink-0" />
+                                                        <Icon icon="heroicons:building-office" className="h-4 w-4 shrink-0" />
                                                         <span className="truncate">{reimbursement.department}</span>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div className="flex flex-col items-end gap-2 flex-shrink-0">
+                                            <div className="flex flex-col items-end gap-2 shrink-0">
                                                 <span className="font-mono font-bold text-lg text-primary whitespace-nowrap">
                                                     ${reimbursement.total_amount.toFixed(2)}
                                                 </span>
@@ -920,7 +920,7 @@ export default function ReimbursementManagementPortal() {
                                                                     reimbursement.status === 'in_progress' ? 'heroicons:currency-dollar' :
                                                                         reimbursement.status === 'paid' ? 'heroicons:banknotes' :
                                                                             'heroicons:clock'
-                                                    } className="h-4 w-4 flex-shrink-0" />
+                                                    } className="h-4 w-4 shrink-0" />
                                                     {reimbursement.status.replace('_', ' ')}
                                                 </span>
                                             </div>
@@ -958,11 +958,11 @@ export default function ReimbursementManagementPortal() {
                                                     <img
                                                         src={getUserAvatarUrl(selectedReimbursement.submitter)}
                                                         alt=""
-                                                        className="w-6 h-6 rounded-full flex-shrink-0"
+                                                        className="w-6 h-6 rounded-full shrink-0"
                                                     />
                                                 )}
                                                 <span className="font-medium text-base-content truncate">{selectedReimbursement.submitter?.name || 'Unknown User'}</span>
-                                                <Icon icon="heroicons:chevron-down" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:chevron-down" className="h-4 w-4 shrink-0" />
                                             </button>
                                             {showUserProfile === selectedReimbursement.submitted_by && (
                                                 <motion.div
@@ -988,7 +988,7 @@ export default function ReimbursementManagementPortal() {
                                                             <div className="pt-2 border-t border-base-300">
                                                                 <h4 className="text-sm font-medium text-base-content/70 mb-1">Zelle Information</h4>
                                                                 <p className="text-sm flex items-center gap-2">
-                                                                    <Icon icon="heroicons:banknotes" className="h-4 w-4 text-primary flex-shrink-0" />
+                                                                    <Icon icon="heroicons:banknotes" className="h-4 w-4 text-primary shrink-0" />
                                                                     {selectedReimbursement.submitter.zelle_information}
                                                                 </p>
                                                             </div>
@@ -1009,7 +1009,7 @@ export default function ReimbursementManagementPortal() {
                                             {loadingStatus ? (
                                                 <span className="loading loading-spinner loading-sm" />
                                             ) : (
-                                                <Icon icon="heroicons:eye" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:eye" className="h-4 w-4 shrink-0" />
                                             )}
                                             <span className="font-medium">Review</span>
                                         </button>
@@ -1024,7 +1024,7 @@ export default function ReimbursementManagementPortal() {
                                             {loadingStatus ? (
                                                 <span className="loading loading-spinner loading-sm" />
                                             ) : (
-                                                <Icon icon="heroicons:check" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:check" className="h-4 w-4 shrink-0" />
                                             )}
                                             <span className="font-medium">Approve</span>
                                         </button>
@@ -1038,7 +1038,7 @@ export default function ReimbursementManagementPortal() {
                                             {loadingStatus ? (
                                                 <span className="loading loading-spinner loading-sm" />
                                             ) : (
-                                                <Icon icon="heroicons:currency-dollar" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:currency-dollar" className="h-4 w-4 shrink-0" />
                                             )}
                                             <span className="font-medium">Mark as in progress</span>
                                         </button>
@@ -1052,7 +1052,7 @@ export default function ReimbursementManagementPortal() {
                                             {loadingStatus ? (
                                                 <span className="loading loading-spinner loading-sm" />
                                             ) : (
-                                                <Icon icon="heroicons:check-circle" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:check-circle" className="h-4 w-4 shrink-0" />
                                             )}
                                             <span className="font-medium">Mark as Paid</span>
                                         </button>
@@ -1066,7 +1066,7 @@ export default function ReimbursementManagementPortal() {
                                             {loadingStatus ? (
                                                 <span className="loading loading-spinner loading-sm" />
                                             ) : (
-                                                <Icon icon="heroicons:x-mark" className="h-4 w-4 flex-shrink-0" />
+                                                <Icon icon="heroicons:x-mark" className="h-4 w-4 shrink-0" />
                                             )}
                                             <span className="font-medium">Reject</span>
                                         </button>
@@ -1085,7 +1085,7 @@ export default function ReimbursementManagementPortal() {
                                     <div className="card-body !p-3">
                                         <h3 className="text-sm font-medium text-base-content/70">Date of Purchase</h3>
                                         <p className="flex items-center gap-2 font-medium mt-1">
-                                            <Icon icon="heroicons:calendar" className="h-4 w-4 text-primary flex-shrink-0" />
+                                            <Icon icon="heroicons:calendar" className="h-4 w-4 text-primary shrink-0" />
                                             {new Date(selectedReimbursement.date_of_purchase).toLocaleDateString()}
                                         </p>
                                     </div>
@@ -1094,7 +1094,7 @@ export default function ReimbursementManagementPortal() {
                                     <div className="card-body !p-3">
                                         <h3 className="text-sm font-medium text-base-content/70">Payment Method</h3>
                                         <p className="flex items-center gap-2 font-medium mt-1">
-                                            <Icon icon="heroicons:credit-card" className="h-4 w-4 text-primary flex-shrink-0" />
+                                            <Icon icon="heroicons:credit-card" className="h-4 w-4 text-primary shrink-0" />
                                             {selectedReimbursement.payment_method}
                                         </p>
                                     </div>
@@ -1103,7 +1103,7 @@ export default function ReimbursementManagementPortal() {
                                     <div className="card-body !p-3">
                                         <h3 className="text-sm font-medium text-base-content/70">Department</h3>
                                         <p className="flex items-center gap-2 font-medium mt-1">
-                                            <Icon icon="heroicons:building-office" className="h-4 w-4 text-primary flex-shrink-0" />
+                                            <Icon icon="heroicons:building-office" className="h-4 w-4 text-primary shrink-0" />
                                             <span className="capitalize">{selectedReimbursement.department.replace('_', ' ')}</span>
                                         </p>
                                     </div>
@@ -1121,7 +1121,7 @@ export default function ReimbursementManagementPortal() {
                                         <div className="card-body !p-3">
                                             <h3 className="text-sm font-medium text-base-content/70">Zelle Information</h3>
                                             <p className="flex items-center gap-2 font-medium mt-1">
-                                                <Icon icon="heroicons:banknotes" className="h-4 w-4 text-primary flex-shrink-0" />
+                                                <Icon icon="heroicons:banknotes" className="h-4 w-4 text-primary shrink-0" />
                                                 {selectedReimbursement.submitter.zelle_information}
                                             </p>
                                         </div>
@@ -1161,11 +1161,11 @@ export default function ReimbursementManagementPortal() {
                                                             </h3>
                                                             <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-base-content/70">
                                                                 <div className="flex items-center gap-1.5">
-                                                                    <Icon icon="heroicons:map-pin" className="h-4 w-4 flex-shrink-0" />
+                                                                    <Icon icon="heroicons:map-pin" className="h-4 w-4 shrink-0" />
                                                                     <span className="truncate">{receipt.location_address}</span>
                                                                 </div>
                                                                 <div className="flex items-center gap-1.5">
-                                                                    <Icon icon="heroicons:calendar" className="h-4 w-4 flex-shrink-0" />
+                                                                    <Icon icon="heroicons:calendar" className="h-4 w-4 shrink-0" />
                                                                     <span>{new Date(receipt.date).toLocaleDateString()}</span>
                                                                 </div>
                                                             </div>
diff --git a/src/components/dashboard/universal/CustomAlert.tsx b/src/components/dashboard/universal/CustomAlert.tsx
index b8302e4..add4680 100644
--- a/src/components/dashboard/universal/CustomAlert.tsx
+++ b/src/components/dashboard/universal/CustomAlert.tsx
@@ -79,7 +79,7 @@ const CustomAlert: React.FC<CustomAlertProps> = ({
         <div className={`${color.bg} border-l-4 ${color.border} p-4 rounded-lg shadow-md ${className}`}>
             <div className="flex items-center justify-between">
                 <div className="flex items-start space-x-3">
-                    <div className="flex-shrink-0 mt-0.5">
+                    <div className="shrink-0 mt-0.5">
                         <div className={`p-1.5 ${color.iconBg} rounded-full`}>
                             <Icon
                                 icon={selectedIcon}
diff --git a/src/components/dashboard/universal/FirstTimeLoginPopup.tsx b/src/components/dashboard/universal/FirstTimeLoginPopup.tsx
index 5e42feb..83ec0a5 100644
--- a/src/components/dashboard/universal/FirstTimeLoginPopup.tsx
+++ b/src/components/dashboard/universal/FirstTimeLoginPopup.tsx
@@ -403,7 +403,7 @@ const FirstTimeLoginPopup = ({ logtoApiEndpoint, onComplete }: FirstTimeLoginPop
     return (
         <AnimatePresence>
             <motion.div
-                className="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 flex items-center justify-center p-4"
+                className="fixed inset-0 z-50 overflow-y-auto bg-black/50 flex items-center justify-center p-4"
                 initial="hidden"
                 animate="visible"
                 exit="hidden"
@@ -548,7 +548,7 @@ const FirstTimeLoginPopup = ({ logtoApiEndpoint, onComplete }: FirstTimeLoginPop
                                         animate="visible"
                                     >
                                         <label className="label">
-                                            <span className="label-text font-medium">IEEE Member ID <span className="text-opacity-50">(optional)</span></span>
+                                            <span className="label-text font-medium">IEEE Member ID <span className="text-current/50">(optional)</span></span>
                                         </label>
                                         <input
                                             type="text"
diff --git a/src/components/dashboard/universal/Toast.tsx b/src/components/dashboard/universal/Toast.tsx
index 06adc8a..19e5dca 100644
--- a/src/components/dashboard/universal/Toast.tsx
+++ b/src/components/dashboard/universal/Toast.tsx
@@ -61,7 +61,7 @@ export const Toast: React.FC<ToastProps> = ({
     return (
         <div className="fixed top-4 right-4 z-50 animate-fade-in">
             <div className={`flex items-center p-4 mb-4 border-l-4 rounded-md shadow-md ${typeStyles[type]}`} role="alert">
-                <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 mr-3">
+                <div className="inline-flex items-center justify-center shrink-0 w-8 h-8 mr-3">
                     {icons[type]}
                 </div>
                 <div className="ml-3 text-sm font-medium">{message}</div>
diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index ba6c091..93e0ea3 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -39,704 +39,891 @@ const components = Object.fromEntries(
 
 // console.log("Available components:", Object.keys(components)); // Debug log
 ---
+    <!-- First Time Login Manager - This handles the onboarding popup for new users -->
+    <FirstTimeLoginManager
+        client:load
+        logtoApiEndpoint={logtoApiEndpoint}
+    />
 
-<!doctype html>
-<html lang="en" data-theme="dark">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{title} | IEEE UCSD</title>
-        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-        <script
-            src="https://code.iconify.design/iconify-icon/2.3.0/iconify-icon.min.js"
-        ></script>
-    </head>
-    <body class="bg-base-200">
-        <!-- First Time Login Manager - This handles the onboarding popup for new users -->
-        <FirstTimeLoginManager
-            client:load
-            logtoApiEndpoint={logtoApiEndpoint}
-        />
-
-        <div class="flex h-screen">
-            <!-- Sidebar -->
-            <aside
-                class="bg-base-100 w-80 flex flex-col shadow-xl border-r border-base-200 transition-all duration-300 fixed xl:relative h-full z-50 -translate-x-full xl:translate-x-0"
-            >
-                <!-- Logo -->
-                <div class="p-6 border-b border-base-200">
-                    <div class="flex items-center justify-center">
-                        <span
-                            class="text-4xl font-bold text-[#06659d] select-none tracking-wide"
-                            >IEEEUCSD</span
-                        >
-                    </div>
+    <div class="flex h-screen">
+        <!-- Sidebar -->
+        <aside
+            class="bg-base-100 w-80 flex flex-col shadow-xl border-r border-base-200 transition-all duration-300 fixed xl:relative h-full z-50 -translate-x-full xl:translate-x-0"
+        >
+            <!-- Logo -->
+            <div class="p-6 border-b border-base-200">
+                <div class="flex items-center justify-center">
+                    <span
+                        class="text-4xl font-bold text-[#06659d] select-none tracking-wide"
+                        >IEEEUCSD</span
+                    >
                 </div>
+            </div>
 
-                <!-- User Profile -->
-                <div class="p-6 border-b border-base-200">
-                    <!-- Loading State -->
-                    <div
-                        id="userProfileSkeleton"
-                        class="flex items-center gap-4"
-                    >
-                        <div class="avatar flex items-center justify-center">
-                            <div
-                                class="w-12 h-12 rounded-xl bg-base-300 animate-pulse"
-                            >
-                            </div>
-                        </div>
-                        <div class="flex-1">
-                            <div
-                                class="h-6 w-32 bg-base-300 animate-pulse rounded mb-2"
-                            >
-                            </div>
-                            <div
-                                class="h-5 w-20 bg-base-300 animate-pulse rounded"
-                            >
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Signed Out State -->
-                    <div
-                        id="userProfileSignedOut"
-                        class="flex items-center gap-4 hidden"
-                    >
-                        <div class="avatar flex items-center justify-center">
-                            <div
-                                class="w-12 h-12 rounded-xl bg-base-300 text-base-content/30 flex items-center justify-center"
-                            >
-                                <Icon name="heroicons:user" class="h-6 w-6" />
-                            </div>
-                        </div>
-                        <div>
-                            <h3
-                                class="font-medium text-lg text-base-content/70"
-                            >
-                                Signed Out
-                            </h3>
-                            <div class="badge badge-outline mt-1 opacity-50">
-                                Guest
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Actual Profile -->
-                    <div
-                        id="userProfileSummary"
-                        class="flex items-center gap-4 hidden"
-                    >
-                        <div class="avatar flex items-center justify-center">
-                            <div
-                                class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center"
-                            >
-                                <span
-                                    class="text-xl font-semibold select-none inline-flex items-center justify-center w-full h-full"
-                                    id="userInitials">?</span
-                                >
-                            </div>
-                        </div>
-                        <div>
-                            <h3 class="font-medium text-lg" id="userName">
-                                Loading...
-                            </h3>
-                            <div
-                                class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]"
-                                id="userRole"
-                            >
-                                Member
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Navigation -->
-                <nav
-                    class="flex-1 overflow-y-auto scrollbar-hide py-6 flex flex-col"
+            <!-- User Profile -->
+            <div class="p-6 border-b border-base-200">
+                <!-- Loading State -->
+                <div
+                    id="userProfileSkeleton"
+                    class="flex items-center gap-4"
                 >
-                    <ul
-                        class="menu gap-2 px-4 text-base-content/80 flex-1 flex flex-col"
-                    >
-                        <!-- Loading Skeleton -->
-                        <div id="menuLoadingSkeleton">
-                            {
-                                [1, 2, 3].map((group) => (
-                                    <>
-                                        <li class="menu-title font-medium opacity-70">
-                                            <div class="h-4 w-24 bg-base-300 animate-pulse rounded" />
-                                        </li>
-                                        {[1, 2, 3].map((item) => (
-                                            <li>
-                                                <div class="flex items-center gap-4 py-2">
-                                                    <div class="h-5 w-5 bg-base-300 animate-pulse rounded" />
-                                                    <div class="h-4 w-32 bg-base-300 animate-pulse rounded" />
-                                                </div>
-                                            </li>
-                                        ))}
-                                    </>
-                                ))
-                            }
-                        </div>
-
-                        <!-- Actual Menu -->
-                        <div id="actualMenu" class="hidden">
-                            {
-                                Object.entries(dashboardConfig.categories).map(
-                                    ([categoryKey, category]: [
-                                        string,
-                                        any,
-                                    ]) => (
-                                        <>
-                                            <li
-                                                class={`menu-title font-medium opacity-70 ${
-                                                    category.role &&
-                                                    category.role !== "none"
-                                                        ? "hidden"
-                                                        : ""
-                                                }`}
-                                                data-role-required={
-                                                    category.role || "none"
-                                                }
-                                            >
-                                                <span>{category.title}</span>
-                                            </li>
-                                            {category.sections.map(
-                                                (sectionKey: string) => {
-                                                    const section =
-                                                        dashboardConfig
-                                                            .sections[
-                                                            sectionKey
-                                                        ];
-                                                    return (
-                                                        <li
-                                                            class={
-                                                                section.role &&
-                                                                section.role !==
-                                                                    "none"
-                                                                    ? "hidden"
-                                                                    : ""
-                                                            }
-                                                            data-role-required={
-                                                                section.role
-                                                            }
-                                                        >
-                                                            <button
-                                                                class={`dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 ${section.class || ""}`}
-                                                                data-section={
-                                                                    sectionKey
-                                                                }
-                                                            >
-                                                                <Icon
-                                                                    name={
-                                                                        section.icon
-                                                                    }
-                                                                    class="h-5 w-5"
-                                                                />
-                                                                {section.title}
-                                                            </button>
-                                                        </li>
-                                                    );
-                                                }
-                                            )}
-                                        </>
-                                    )
-                                )
-                            }
-
-                            {/* Add Logout Button to the bottom of the menu */}
-                            <li class="mt-auto">
-                                <button
-                                    class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 text-error"
-                                    data-section="logout"
-                                >
-                                    <Icon
-                                        name="heroicons:arrow-left-on-rectangle"
-                                        class="h-5 w-5"
-                                    />
-                                    Logout
-                                </button>
-                            </li>
-                        </div>
-                    </ul>
-                </nav>
-            </aside>
-
-            <!-- Main Content -->
-            <main
-                class="flex-1 overflow-x-hidden overflow-y-auto bg-base-200 w-full xl:w-[calc(100%-20rem)]"
-            >
-                <!-- Mobile Header -->
-                <header
-                    class="bg-base-100 p-4 shadow-md xl:hidden sticky top-0 z-40"
-                >
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center gap-2">
-                            <button
-                                id="mobileSidebarToggle"
-                                class="btn btn-square btn-ghost"
-                            >
-                                <Icon name="heroicons:bars-3" class="h-6 w-6" />
-                            </button>
-                            <h1 class="text-xl font-bold">IEEE UCSD</h1>
-                        </div>
-                    </div>
-                </header>
-
-                <!-- Page Content -->
-                <div class="p-4 md:p-6 max-w-[1600px] mx-auto">
-                    <!-- Loading State -->
-                    <div id="pageLoadingState" class="w-full">
+                    <div class="avatar flex items-center justify-center">
                         <div
-                            class="flex flex-col items-center justify-center p-4 sm:p-8"
+                            class="w-12 h-12 rounded-xl bg-base-300 animate-pulse"
                         >
-                            <div class="loading loading-spinner loading-lg">
-                            </div>
-                            <p class="mt-4 opacity-70">Loading dashboard...</p>
                         </div>
                     </div>
+                    <div class="flex-1">
+                        <div
+                            class="h-6 w-32 bg-base-300 animate-pulse rounded mb-2"
+                        >
+                        </div>
+                        <div
+                            class="h-5 w-20 bg-base-300 animate-pulse rounded"
+                        >
+                        </div>
+                    </div>
+                </div>
 
-                    <!-- Error State -->
-                    <div id="pageErrorState" class="hidden w-full">
-                        <div class="alert alert-error mx-2 sm:mx-0">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-6 w-6"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
+                <!-- Signed Out State -->
+                <div
+                    id="userProfileSignedOut"
+                    class="flex items-center gap-4 hidden"
+                >
+                    <div class="avatar flex items-center justify-center">
+                        <div
+                            class="w-12 h-12 rounded-xl bg-base-300 text-base-content/30 flex items-center justify-center"
+                        >
+                            <Icon name="heroicons:user" class="h-6 w-6" />
+                        </div>
+                    </div>
+                    <div>
+                        <h3
+                            class="font-medium text-lg text-base-content/70"
+                        >
+                            Signed Out
+                        </h3>
+                        <div class="badge badge-outline mt-1 opacity-50">
+                            Guest
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Actual Profile -->
+                <div
+                    id="userProfileSummary"
+                    class="flex items-center gap-4 hidden"
+                >
+                    <div class="avatar flex items-center justify-center">
+                        <div
+                            class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center"
+                        >
+                            <span
+                                class="text-xl font-semibold select-none inline-flex items-center justify-center w-full h-full"
+                                id="userInitials">?</span
                             >
-                                <path
-                                    fill-rule="evenodd"
-                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                                    clip-rule="evenodd"></path>
-                            </svg>
-                            <span>Failed to load dashboard content</span>
                         </div>
                     </div>
-
-                    <!-- Not Authenticated State -->
-                    <div id="notAuthenticatedState" class="hidden w-full">
-                        <div class="card bg-base-100 shadow-xl mx-2 sm:mx-0">
-                            <div
-                                class="card-body items-center text-center p-4 sm:p-8"
-                            >
-                                <div class="mb-4 sm:mb-6">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-12 w-12 sm:h-16 sm:w-16 opacity-30"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                                            clip-rule="evenodd"></path>
-                                    </svg>
-                                </div>
-                                <h2 class="card-title text-xl sm:text-2xl mb-2">
-                                    Sign in to Access Dashboard
-                                </h2>
-                                <p
-                                    class="opacity-70 mb-4 sm:mb-6 text-sm sm:text-base"
-                                >
-                                    Please sign in with your IEEE UCSD account
-                                    to access the dashboard.
-                                </p>
-                                <button
-                                    class="login-button btn btn-primary btn-lg gap-2 w-full sm:w-auto"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-5 w-5"
-                                        viewBox="0 0 20 20"
-                                        fill="currentColor"
-                                    >
-                                        <path
-                                            fill-rule="evenodd"
-                                            d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
-                                            clip-rule="evenodd"></path>
-                                    </svg>
-                                    <span class="whitespace-nowrap"
-                                        >Sign in with IEEEUCSD SSO</span
-                                    >
-                                </button>
-                            </div>
+                    <div>
+                        <h3 class="font-medium text-lg" id="userName">
+                            Loading...
+                        </h3>
+                        <div
+                            class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]"
+                            id="userRole"
+                        >
+                            Member
                         </div>
                     </div>
+                </div>
+            </div>
 
-                    <!-- Main Content -->
-                    <div id="mainContent" class="space-y-4 sm:space-y-6">
+            <!-- Navigation -->
+            <nav
+                class="flex-1 overflow-y-auto scrollbar-hide py-6 flex flex-col"
+            >
+                <ul
+                    class="menu gap-2 px-4 text-base-content/80 flex-1 flex flex-col"
+                >
+                    <!-- Loading Skeleton -->
+                    <div id="menuLoadingSkeleton">
                         {
-                            Object.entries(dashboardConfig.sections).map(
-                                ([sectionKey, section]: [string, any]) => {
-                                    // Skip if no component is defined
-                                    if (!section.component) return null;
-
-                                    const Component =
-                                        components[section.component];
-                                    return (
-                                        <div
-                                            id={`${sectionKey}Section`}
-                                            class={`dashboard-section hidden ${
-                                                section.role &&
-                                                section.role !== "none"
-                                                    ? "role-restricted"
-                                                    : ""
-                                            }`}
-                                            data-role-required={section.role}
-                                        >
-                                            <Component />
-                                        </div>
-                                    );
-                                }
-                            )
+                            [1, 2, 3].map((group) => (
+                                <>
+                                    <li class="menu-title font-medium opacity-70">
+                                        <div class="h-4 w-24 bg-base-300 animate-pulse rounded" />
+                                    </li>
+                                    {[1, 2, 3].map((item) => (
+                                        <li>
+                                            <div class="flex items-center gap-4 py-2">
+                                                <div class="h-5 w-5 bg-base-300 animate-pulse rounded" />
+                                                <div class="h-4 w-32 bg-base-300 animate-pulse rounded" />
+                                            </div>
+                                        </li>
+                                    ))}
+                                </>
+                            ))
                         }
                     </div>
+
+                    <!-- Actual Menu -->
+                    <div id="actualMenu" class="hidden">
+                        {
+                            Object.entries(dashboardConfig.categories).map(
+                                ([categoryKey, category]: [
+                                    string,
+                                    any,
+                                ]) => (
+                                    <>
+                                        <li
+                                            class={`menu-title font-medium opacity-70 ${
+                                                category.role &&
+                                                category.role !== "none"
+                                                    ? "hidden"
+                                                    : ""
+                                            }`}
+                                            data-role-required={
+                                                category.role || "none"
+                                            }
+                                        >
+                                            <span>{category.title}</span>
+                                        </li>
+                                        {category.sections.map(
+                                            (sectionKey: string) => {
+                                                const section =
+                                                    dashboardConfig
+                                                        .sections[
+                                                        sectionKey
+                                                    ];
+                                                return (
+                                                    <li
+                                                        class={
+                                                            section.role &&
+                                                            section.role !==
+                                                                "none"
+                                                                ? "hidden"
+                                                                : ""
+                                                        }
+                                                        data-role-required={
+                                                            section.role
+                                                        }
+                                                    >
+                                                        <button
+                                                            class={`dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 ${section.class || ""}`}
+                                                            data-section={
+                                                                sectionKey
+                                                            }
+                                                        >
+                                                            <Icon
+                                                                name={
+                                                                    section.icon
+                                                                }
+                                                                class="h-5 w-5"
+                                                            ></Icon>
+                                                            {section.title}
+                                                        </button>
+                                                    </li>
+                                                );
+                                            }
+                                        )}
+                                    </>
+                                )
+                            )
+                        }
+
+                        {/* Add Logout Button to the bottom of the menu */}
+                        <li class="mt-auto">
+                            <button
+                                class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5 text-error"
+                                data-section="logout"
+                            >
+                                <Icon
+                                    name="heroicons:arrow-left-on-rectangle"
+                                    class="h-5 w-5"
+                                />
+                                Logout
+                            </button>
+                        </li>
+                    </div>
+                </ul>
+            </nav>
+        </aside>
+
+        <!-- Main Content -->
+        <main
+            class="flex-1 overflow-x-hidden overflow-y-auto bg-base-200 w-full xl:w-[calc(100%-20rem)]"
+        >
+            <!-- Mobile Header -->
+            <header
+                class="bg-base-100 p-4 shadow-md xl:hidden sticky top-0 z-40"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                        <button
+                            id="mobileSidebarToggle"
+                            class="btn btn-square btn-ghost"
+                        >
+                            <Icon name="heroicons:bars-3" class="h-6 w-6" />
+                        </button>
+                        <h1 class="text-xl font-bold">IEEE UCSD</h1>
+                    </div>
                 </div>
-            </main>
-        </div>
+            </header>
 
-        <!-- Centralized Toast Provider -->
-        <ToastProvider client:load />
+            <!-- Page Content -->
+            <div class="p-4 md:p-6 max-w-[1600px] mx-auto">
+                <!-- Loading State -->
+                <div id="pageLoadingState" class="w-full">
+                    <div
+                        class="flex flex-col items-center justify-center p-4 sm:p-8"
+                    >
+                        <div class="loading loading-spinner loading-lg">
+                        </div>
+                        <p class="mt-4 opacity-70">Loading dashboard...</p>
+                    </div>
+                </div>
 
-        <script>
-            import { Authentication } from "../scripts/pocketbase/Authentication";
-            import { Get } from "../scripts/pocketbase/Get";
-            import { SendLog } from "../scripts/pocketbase/SendLog";
-            import { hasAccess, type OfficerStatus } from "../utils/roleAccess";
-            import { OfficerTypes } from "../schemas/pocketbase/schema";
-            import { initAuthSync } from "../scripts/database/initAuthSync";
+                <!-- Error State -->
+                <div id="pageErrorState" class="hidden w-full">
+                    <div class="alert alert-error mx-2 sm:mx-0">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        <span>Failed to load dashboard content</span>
+                    </div>
+                </div>
 
-            const auth = Authentication.getInstance();
-            const get = Get.getInstance();
-            const logger = SendLog.getInstance();
+                <!-- Not Authenticated State -->
+                <div id="notAuthenticatedState" class="hidden w-full">
+                    <div class="card bg-base-100 shadow-xl mx-2 sm:mx-0">
+                        <div
+                            class="card-body items-center text-center p-4 sm:p-8"
+                        >
+                            <div class="mb-4 sm:mb-6">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-12 w-12 sm:h-16 sm:w-16 opacity-30"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                                        clip-rule="evenodd"></path>
+                                </svg>
+                            </div>
+                            <h2 class="card-title text-xl sm:text-2xl mb-2">
+                                Sign in to Access Dashboard
+                            </h2>
+                            <p
+                                class="opacity-70 mb-4 sm:mb-6 text-sm sm:text-base"
+                            >
+                                Please sign in with your IEEE UCSD account
+                                to access the dashboard.
+                            </p>
+                            <button
+                                class="login-button btn btn-primary btn-lg gap-2 w-full sm:w-auto"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-5 w-5"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
+                                        clip-rule="evenodd"></path>
+                                </svg>
+                                <span class="whitespace-nowrap"
+                                    >Sign in with IEEEUCSD SSO</span
+                                >
+                            </button>
+                        </div>
+                    </div>
+                </div>
 
-            // Ensure toast function is defined
-            if (typeof window !== "undefined" && !window.toast) {
-                window.toast = () => {};
-            }
+                <!-- Main Content -->
+                <div id="mainContent" class="space-y-4 sm:space-y-6">
+                    {
+                        Object.entries(dashboardConfig.sections).map(
+                            ([sectionKey, section]: [string, any]) => {
+                                // Skip if no component is defined
+                                if (!section.component) return null;
 
-            // Initialize page state
-            const pageLoadingState =
-                document.getElementById("pageLoadingState");
-            const pageErrorState = document.getElementById("pageErrorState");
-            const notAuthenticatedState = document.getElementById(
-                "notAuthenticatedState"
-            );
-            const mainContent = document.getElementById("mainContent");
-            const sidebar = document.querySelector("aside");
+                                const Component =
+                                    components[section.component];
+                                return (
+                                    <div
+                                        id={`${sectionKey}Section`}
+                                        class={`dashboard-section hidden ${
+                                            section.role &&
+                                            section.role !== "none"
+                                                ? "role-restricted"
+                                                : ""
+                                        }`}
+                                        data-role-required={section.role}
+                                    >
+                                        <Component />
+                                    </div>
+                                );
+                            }
+                        )
+                    }
+                </div>
+            </div>
+        </main>
+    </div>
 
-            // User profile elements
-            const userInitials = document.getElementById("userInitials");
-            const userName = document.getElementById("userName");
-            const userRole = document.getElementById("userRole");
+    <!-- Centralized Toast Provider -->
+    <ToastProvider client:load />
 
-            // Function to update section visibility based on role
-            const updateSectionVisibility = (officerStatus: OfficerStatus) => {
-                // Special handling for sponsor role
-                if (officerStatus === "sponsor") {
-                    // Hide all sections first
-                    document
-                        .querySelectorAll("[data-role-required]")
-                        .forEach((element) => {
-                            element.classList.add("hidden");
-                        });
+    <script>
+        import { Authentication } from "../scripts/pocketbase/Authentication";
+        import { Get } from "../scripts/pocketbase/Get";
+        import { SendLog } from "../scripts/pocketbase/SendLog";
+        import { hasAccess, type OfficerStatus } from "../utils/roleAccess";
+        import { OfficerTypes } from "../schemas/pocketbase/schema";
+        import { initAuthSync } from "../scripts/database/initAuthSync";
 
-                    // Only show sponsor sections
-                    document
-                        .querySelectorAll('[data-role-required="sponsor"]')
-                        .forEach((element) => {
-                            element.classList.remove("hidden");
-                        });
-                    return;
-                }
+        const auth = Authentication.getInstance();
+        const get = Get.getInstance();
+        const logger = SendLog.getInstance();
 
-                // For non-sponsor roles, handle normally
+        // Ensure toast function is defined
+        if (typeof window !== "undefined" && !window.toast) {
+            window.toast = () => {};
+        }
+
+        // Initialize page state
+        const pageLoadingState =
+            document.getElementById("pageLoadingState");
+        const pageErrorState = document.getElementById("pageErrorState");
+        const notAuthenticatedState = document.getElementById(
+            "notAuthenticatedState"
+        );
+        const mainContent = document.getElementById("mainContent");
+        const sidebar = document.querySelector("aside");
+
+        // User profile elements
+        const userInitials = document.getElementById("userInitials");
+        const userName = document.getElementById("userName");
+        const userRole = document.getElementById("userRole");
+
+        // Function to update section visibility based on role
+        const updateSectionVisibility = (officerStatus: OfficerStatus) => {
+            // Special handling for sponsor role
+            if (officerStatus === "sponsor") {
+                // Hide all sections first
                 document
                     .querySelectorAll("[data-role-required]")
                     .forEach((element) => {
-                        const requiredRole = element.getAttribute(
-                            "data-role-required"
-                        ) as OfficerStatus;
-
-                        // Skip elements that don't have a role requirement
-                        if (!requiredRole || requiredRole === "none") {
-                            element.classList.remove("hidden");
-                            return;
-                        }
-
-                        // Check if user has permission for this role
-                        const hasPermission = hasAccess(
-                            officerStatus,
-                            requiredRole
-                        );
-
-                        // Only show elements if user has permission
-                        element.classList.toggle("hidden", !hasPermission);
+                        element.classList.add("hidden");
                     });
-            };
 
-            // Function to delete all cookies (to handle Logto logout)
-            const deleteAllCookies = () => {
-                // Get all cookies
-                const cookies = document.cookie.split(";");
-
-                // Common paths that might have cookies
-                const paths = ["/", "/dashboard", "/auth", "/api"];
-
-                // Domains to target
-                const domains = [
-                    "", // current domain
-                    "auth.ieeeucsd.org",
-                    ".auth.ieeeucsd.org",
-                    "ieeeucsd.org",
-                    ".ieeeucsd.org",
-                    "dev.ieeeucsd.org",
-                    ".dev.ieeeucsd.org",
-                ];
-
-                // Delete each cookie with all combinations of paths and domains
-                for (let i = 0; i < cookies.length; i++) {
-                    const cookie = cookies[i];
-                    const eqPos = cookie.indexOf("=");
-                    const name =
-                        eqPos > -1
-                            ? cookie.substring(0, eqPos).trim()
-                            : cookie.trim();
-
-                    if (!name) continue; // Skip empty cookie names
-
-                    // Try all combinations of paths and domains
-                    for (const path of paths) {
-                        // Delete from current domain (no domain specified)
-                        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path}`;
-
-                        // Try with specific domains
-                        for (const domain of domains) {
-                            if (domain) {
-                                document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path};domain=${domain}`;
-                            }
-                        }
-                    }
-                }
-
-                // Specifically target known Logto cookies
-                const logtoSpecificCookies = [
-                    "logto",
-                    "logto.signin",
-                    "logto.session",
-                    "logto.callback",
-                ];
-
-                for (const cookieName of logtoSpecificCookies) {
-                    for (const path of paths) {
-                        document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path}`;
-
-                        for (const domain of domains) {
-                            if (domain) {
-                                document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path};domain=${domain}`;
-                            }
-                        }
-                    }
-                }
-            };
-
-            // Function to create and show a logout confirmation modal
-            const showLogoutConfirmation = () => {
-                // Create modal if it doesn't exist
-                let modal = document.getElementById("logoutConfirmModal");
-                if (!modal) {
-                    modal = document.createElement("dialog");
-                    modal.id = "logoutConfirmModal";
-                    modal.className = "modal modal-bottom sm:modal-middle";
-
-                    modal.innerHTML = `
-                        <div class="modal-box">
-                            <h3 class="font-bold text-lg">Confirm Logout</h3>
-                            <p class="py-4">Are you sure you want to log out of your account?</p>
-                            <div class="modal-action">
-                                <button id="cancelLogout" class="btn btn-outline">Cancel</button>
-                                <button id="confirmLogout" class="btn btn-error">
-                                    <span id="logoutSpinner" class="loading loading-spinner loading-sm hidden"></span>
-                                    <span id="logoutText">Log Out</span>
-                                </button>
-                            </div>
-                        </div>
-                        <form method="dialog" class="modal-backdrop">
-                            <button>Close</button>
-                        </form>
-                    `;
-
-                    document.body.appendChild(modal);
-
-                    // Add event listeners
-                    document
-                        .getElementById("cancelLogout")
-                        ?.addEventListener("click", () => {
-                            (modal as HTMLDialogElement).close();
-                        });
-
-                    document
-                        .getElementById("confirmLogout")
-                        ?.addEventListener("click", async () => {
-                            // Show loading state
-                            const spinner =
-                                document.getElementById("logoutSpinner");
-                            const text = document.getElementById("logoutText");
-                            const confirmBtn =
-                                document.getElementById("confirmLogout");
-                            const cancelBtn =
-                                document.getElementById("cancelLogout");
-
-                            if (spinner) spinner.classList.remove("hidden");
-                            if (text) text.textContent = "Logging out...";
-                            if (confirmBtn)
-                                confirmBtn.setAttribute("disabled", "true");
-                            if (cancelBtn)
-                                cancelBtn.setAttribute("disabled", "true");
-
-                            try {
-                                // Log the logout action
-                                await logger.send(
-                                    "logout",
-                                    "auth",
-                                    "User logged out from dashboard menu"
-                                );
-
-                                // Log out from PocketBase using the Authentication class
-                                await auth.logout();
-
-                                // For extra safety, also directly clear the PocketBase auth store
-                                const pb = auth.getPocketBase();
-                                pb.authStore.clear();
-
-                                // Delete all cookies to ensure Logto is logged out
-                                deleteAllCookies();
-
-                                // Redirect to our API logout endpoint which will properly sign out from Logto
-                                window.location.href = "/api/logout";
-                                return; // Stop execution here as we're redirecting
-                            } catch (error) {
-                                console.error("Error during logout:", error);
-
-                                // Show error message if toast is available
-                                if (
-                                    window.toast &&
-                                    typeof window.toast === "function"
-                                ) {
-                                    window.toast(
-                                        "Failed to log out. Please try again.",
-                                        {
-                                            type: "error",
-                                        }
-                                    );
-                                }
-
-                                // Reset button state
-                                if (spinner) spinner.classList.add("hidden");
-                                if (text) text.textContent = "Log Out";
-                                if (confirmBtn)
-                                    confirmBtn.removeAttribute("disabled");
-                                if (cancelBtn)
-                                    cancelBtn.removeAttribute("disabled");
-
-                                // Close the modal
-                                if (modal) (modal as HTMLDialogElement).close();
-                            }
-                        });
-                }
-
-                // Show the modal
-                if (modal) (modal as HTMLDialogElement).showModal();
-            };
-
-            // Handle navigation
-            const handleNavigation = () => {
-                const navButtons =
-                    document.querySelectorAll(".dashboard-nav-btn");
-                const sections =
-                    document.querySelectorAll(".dashboard-section");
-                const mainContentDiv = document.getElementById("mainContent");
-
-                // Ensure mainContent is visible
-                if (mainContentDiv) {
-                    mainContentDiv.classList.remove("hidden");
-                }
-
-                navButtons.forEach((button) => {
-                    button.addEventListener("click", () => {
-                        const sectionKey = button.getAttribute("data-section");
-
-                        // Handle logout button
-                        if (sectionKey === "logout") {
-                            showLogoutConfirmation();
-                            return;
-                        }
-
-                        // Remove active class from all buttons
-                        navButtons.forEach((btn) => {
-                            btn.classList.remove("active", "bg-base-200");
-                        });
-
-                        // Add active class to clicked button
-                        button.classList.add("active", "bg-base-200");
-
-                        // Hide all sections
-                        sections.forEach((section) => {
-                            section.classList.add("hidden");
-                        });
-
-                        // Show selected section
-                        const sectionId = `${sectionKey}Section`;
-                        const targetSection =
-                            document.getElementById(sectionId);
-                        if (targetSection) {
-                            targetSection.classList.remove("hidden");
-                            // console.log(`Showing section: ${sectionId}`); // Debug log
-                        }
-
-                        // Close mobile sidebar if needed
-                        if (window.innerWidth < 1024 && sidebar) {
-                            sidebar.classList.add("-translate-x-full");
-                            document.body.classList.remove("overflow-hidden");
-                            const overlay =
-                                document.getElementById("sidebarOverlay");
-                            overlay?.remove();
-                        }
+                // Only show sponsor sections
+                document
+                    .querySelectorAll('[data-role-required="sponsor"]')
+                    .forEach((element) => {
+                        element.classList.remove("hidden");
                     });
+                return;
+            }
+
+            // For non-sponsor roles, handle normally
+            document
+                .querySelectorAll("[data-role-required]")
+                .forEach((element) => {
+                    const requiredRole = element.getAttribute(
+                        "data-role-required"
+                    ) as OfficerStatus;
+
+                    // Skip elements that don't have a role requirement
+                    if (!requiredRole || requiredRole === "none") {
+                        element.classList.remove("hidden");
+                        return;
+                    }
+
+                    // Check if user has permission for this role
+                    const hasPermission = hasAccess(
+                        officerStatus,
+                        requiredRole
+                    );
+
+                    // Only show elements if user has permission
+                    element.classList.toggle("hidden", !hasPermission);
                 });
+        };
+
+        // Function to delete all cookies (to handle Logto logout)
+        const deleteAllCookies = () => {
+            // Get all cookies
+            const cookies = document.cookie.split(";");
+
+            // Common paths that might have cookies
+            const paths = ["/", "/dashboard", "/auth", "/api"];
+
+            // Domains to target
+            const domains = [
+                "", // current domain
+                "auth.ieeeucsd.org",
+                ".auth.ieeeucsd.org",
+                "ieeeucsd.org",
+                ".ieeeucsd.org",
+                "dev.ieeeucsd.org",
+                ".dev.ieeeucsd.org",
+            ];
+
+            // Delete each cookie with all combinations of paths and domains
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i];
+                const eqPos = cookie.indexOf("=");
+                const name =
+                    eqPos > -1
+                        ? cookie.substring(0, eqPos).trim()
+                        : cookie.trim();
+
+                if (!name) continue; // Skip empty cookie names
+
+                // Try all combinations of paths and domains
+                for (const path of paths) {
+                    // Delete from current domain (no domain specified)
+                    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path}`;
+
+                    // Try with specific domains
+                    for (const domain of domains) {
+                        if (domain) {
+                            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path};domain=${domain}`;
+                        }
+                    }
+                }
+            }
+
+            // Specifically target known Logto cookies
+            const logtoSpecificCookies = [
+                "logto",
+                "logto.signin",
+                "logto.session",
+                "logto.callback",
+            ];
+
+            for (const cookieName of logtoSpecificCookies) {
+                for (const path of paths) {
+                    document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path}`;
+
+                    for (const domain of domains) {
+                        if (domain) {
+                            document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=${path};domain=${domain}`;
+                        }
+                    }
+                }
+            }
+        };
+
+        // Function to create and show a logout confirmation modal
+        const showLogoutConfirmation = () => {
+            // Create modal if it doesn't exist
+            let modal = document.getElementById("logoutConfirmModal");
+            if (!modal) {
+                modal = document.createElement("dialog");
+                modal.id = "logoutConfirmModal";
+                modal.className = "modal modal-bottom sm:modal-middle";
+
+                modal.innerHTML = `
+                    <div class="modal-box">
+                        <h3 class="font-bold text-lg">Confirm Logout</h3>
+                        <p class="py-4">Are you sure you want to log out of your account?</p>
+                        <div class="modal-action">
+                            <button id="cancelLogout" class="btn btn-outline">Cancel</button>
+                            <button id="confirmLogout" class="btn btn-error">
+                                <span id="logoutSpinner" class="loading loading-spinner loading-sm hidden"></span>
+                                <span id="logoutText">Log Out</span>
+                            </button>
+                        </div>
+                    </div>
+                    <form method="dialog" class="modal-backdrop">
+                        <button>Close</button>
+                    </form>
+                `;
+
+                document.body.appendChild(modal);
+
+                // Add event listeners
+                document
+                    .getElementById("cancelLogout")
+                    ?.addEventListener("click", () => {
+                        (modal as HTMLDialogElement).close();
+                    });
+
+                document
+                    .getElementById("confirmLogout")
+                    ?.addEventListener("click", async () => {
+                        // Show loading state
+                        const spinner =
+                            document.getElementById("logoutSpinner");
+                        const text = document.getElementById("logoutText");
+                        const confirmBtn =
+                            document.getElementById("confirmLogout");
+                        const cancelBtn =
+                            document.getElementById("cancelLogout");
+
+                        if (spinner) spinner.classList.remove("hidden");
+                        if (text) text.textContent = "Logging out...";
+                        if (confirmBtn)
+                            confirmBtn.setAttribute("disabled", "true");
+                        if (cancelBtn)
+                            cancelBtn.setAttribute("disabled", "true");
+
+                        try {
+                            // Log the logout action
+                            await logger.send(
+                                "logout",
+                                "auth",
+                                "User logged out from dashboard menu"
+                            );
+
+                            // Log out from PocketBase using the Authentication class
+                            await auth.logout();
+
+                            // For extra safety, also directly clear the PocketBase auth store
+                            const pb = auth.getPocketBase();
+                            pb.authStore.clear();
+
+                            // Delete all cookies to ensure Logto is logged out
+                            deleteAllCookies();
+
+                            // Redirect to our API logout endpoint which will properly sign out from Logto
+                            window.location.href = "/api/logout";
+                            return; // Stop execution here as we're redirecting
+                        } catch (error) {
+                            console.error("Error during logout:", error);
+
+                            // Show error message if toast is available
+                            if (
+                                window.toast &&
+                                typeof window.toast === "function"
+                            ) {
+                                window.toast(
+                                    "Failed to log out. Please try again.",
+                                    {
+                                        type: "error",
+                                    }
+                                );
+                            }
+
+                            // Reset button state
+                            if (spinner) spinner.classList.add("hidden");
+                            if (text) text.textContent = "Log Out";
+                            if (confirmBtn)
+                                confirmBtn.removeAttribute("disabled");
+                            if (cancelBtn)
+                                cancelBtn.removeAttribute("disabled");
+
+                            // Close the modal
+                            if (modal) (modal as HTMLDialogElement).close();
+                        }
+                    });
+            }
+
+            // Show the modal
+            if (modal) (modal as HTMLDialogElement).showModal();
+        };
+
+        // Handle navigation
+        const handleNavigation = () => {
+            const navButtons =
+                document.querySelectorAll(".dashboard-nav-btn");
+            const sections =
+                document.querySelectorAll(".dashboard-section");
+            const mainContentDiv = document.getElementById("mainContent");
+
+            // Ensure mainContent is visible
+            if (mainContentDiv) {
+                mainContentDiv.classList.remove("hidden");
+            }
+
+            navButtons.forEach((button) => {
+                button.addEventListener("click", () => {
+                    const sectionKey = button.getAttribute("data-section");
+
+                    // Handle logout button
+                    if (sectionKey === "logout") {
+                        showLogoutConfirmation();
+                        return;
+                    }
+
+                    // Remove active class from all buttons
+                    navButtons.forEach((btn) => {
+                        btn.classList.remove("active", "bg-base-200");
+                    });
+
+                    // Add active class to clicked button
+                    button.classList.add("active", "bg-base-200");
+
+                    // Hide all sections
+                    sections.forEach((section) => {
+                        section.classList.add("hidden");
+                    });
+
+                    // Show selected section
+                    const sectionId = `${sectionKey}Section`;
+                    const targetSection =
+                        document.getElementById(sectionId);
+                    if (targetSection) {
+                        targetSection.classList.remove("hidden");
+                        // console.log(`Showing section: ${sectionId}`); // Debug log
+                    }
+
+                    // Close mobile sidebar if needed
+                    if (window.innerWidth < 1024 && sidebar) {
+                        sidebar.classList.add("-translate-x-full");
+                        document.body.classList.remove("overflow-hidden");
+                        const overlay =
+                            document.getElementById("sidebarOverlay");
+                        overlay?.remove();
+                    }
+                });
+            });
+        };
+
+        // Display user profile information and handle role-based access
+        const updateUserProfile = async (user: { id: string }) => {
+            if (!user) return;
+
+            try {
+                // Use fields from the User interface in the schema
+                const extendedUser = await get.getOne("users", user.id, {
+                    fields: [
+                        "id",
+                        "name",
+                        "email",
+                        "verified",
+                        "avatar",
+                        "pid",
+                        "member_id",
+                        "graduation_year",
+                        "major",
+                        "signed_up",
+                    ],
+                });
+
+                const displayName = extendedUser.name || "Unknown User";
+                // Default role is Member
+                let displayRole = "Member";
+
+                // Map the officer type from the database to our OfficerStatus type
+                let officerStatus: OfficerStatus = "";
+
+                // Get the officer record for this user if it exists
+                // Use fields from the Officer interface in the schema
+                const officerRecords = await get.getList(
+                    "officers",
+                    1,
+                    50,
+                    `user="${user.id}"`,
+                    "",
+                    {
+                        fields: ["id", "type", "role"],
+                    }
+                );
+
+                if (officerRecords && officerRecords.items.length > 0) {
+                    const officerType = officerRecords.items[0].type;
+                    const officerRole = officerRecords.items[0].role;
+
+                    // Use the role field from the officer's collection
+                    if (officerRole) {
+                        displayRole = officerRole;
+                    }
+
+                    // Map the officer type to our OfficerStatus
+                    switch (officerType) {
+                        case OfficerTypes.ADMINISTRATOR:
+                            officerStatus = "administrator";
+                            break;
+                        case OfficerTypes.EXECUTIVE:
+                            officerStatus = "executive";
+                            break;
+                        case OfficerTypes.GENERAL:
+                            officerStatus = "general";
+                            break;
+                        case OfficerTypes.HONORARY:
+                            officerStatus = "honorary";
+                            break;
+                        case OfficerTypes.PAST:
+                            officerStatus = "past";
+                            break;
+                        default:
+                            officerStatus = "none";
+                    }
+                } else {
+                    // Check if user is a sponsor by querying the sponsors collection
+                    const sponsorRecords = await get.getList(
+                        "sponsors",
+                        1,
+                        1,
+                        `user="${user.id}"`,
+                        "",
+                        {
+                            fields: ["id", "company"],
+                        }
+                    );
+
+                    if (sponsorRecords && sponsorRecords.items.length > 0) {
+                        officerStatus = "sponsor";
+                        displayRole = "Sponsor";
+                    } else {
+                        officerStatus = "none";
+                    }
+                }
+
+                const initials = (extendedUser.name || "U")
+                    .split(" ")
+                    .map((n: string) => n[0])
+                    .join("")
+                    .toUpperCase();
+
+                // Update profile display
+                if (userName) userName.textContent = displayName;
+                if (userRole) userRole.textContent = displayRole;
+                if (userInitials) userInitials.textContent = initials;
+
+                // Update section visibility based on role
+                updateSectionVisibility(officerStatus);
+            } catch (error) {
+                console.error("Error fetching user profile:", error);
+                const fallbackValues = {
+                    name: "Unknown User",
+                    role: "Member",
+                    initials: "?",
+                };
+
+                if (userName) userName.textContent = fallbackValues.name;
+                if (userRole) userRole.textContent = fallbackValues.role;
+                if (userInitials)
+                    userInitials.textContent = fallbackValues.initials;
+
+                updateSectionVisibility("" as OfficerStatus);
+            }
+        };
+
+        // Mobile sidebar toggle
+        const mobileSidebarToggle = document.getElementById(
+            "mobileSidebarToggle"
+        );
+        if (mobileSidebarToggle && sidebar) {
+            const toggleSidebar = () => {
+                const isOpen =
+                    !sidebar.classList.contains("-translate-x-full");
+
+                if (isOpen) {
+                    sidebar.classList.add("-translate-x-full");
+                    document.body.classList.remove("overflow-hidden");
+                    const overlay =
+                        document.getElementById("sidebarOverlay");
+                    overlay?.remove();
+                } else {
+                    sidebar.classList.remove("-translate-x-full");
+                    document.body.classList.add("overflow-hidden");
+                    const overlay = document.createElement("div");
+                    overlay.id = "sidebarOverlay";
+                    overlay.className =
+                        "fixed inset-0 bg-black/50 z-40 xl:hidden";
+                    overlay.addEventListener("click", toggleSidebar);
+                    document.body.appendChild(overlay);
+                }
             };
 
-            // Display user profile information and handle role-based access
-            const updateUserProfile = async (user: { id: string }) => {
-                if (!user) return;
+            mobileSidebarToggle.addEventListener("click", toggleSidebar);
+        }
+
+        // Function to initialize the page
+        const initializePage = async () => {
+            try {
+                // Define a temporary toast function that does nothing for unauthenticated users
+                const originalToast = window.toast;
+
+                // Check if user is authenticated
+                if (!auth.isAuthenticated()) {
+                    // Temporarily override toast function to prevent notifications for unauthenticated users
+                    window.toast = () => {};
+
+                    // Initialize auth sync for IndexedDB (but toast notifications will be suppressed)
+                    await initAuthSync();
+
+                    // Restore original toast function
+                    window.toast = originalToast;
+
+                    // console.log("User not authenticated");
+                    if (pageLoadingState)
+                        pageLoadingState.classList.add("hidden");
+                    if (notAuthenticatedState)
+                        notAuthenticatedState.classList.remove("hidden");
+                    return;
+                }
+
+                // Initialize auth sync for IndexedDB (for authenticated users)
+                await initAuthSync();
+
+                if (pageLoadingState)
+                    pageLoadingState.classList.remove("hidden");
+                if (pageErrorState) pageErrorState.classList.add("hidden");
+                if (notAuthenticatedState)
+                    notAuthenticatedState.classList.add("hidden");
+
+                // Show loading states
+                const userProfileSkeleton = document.getElementById(
+                    "userProfileSkeleton"
+                );
+                const userProfileSignedOut = document.getElementById(
+                    "userProfileSignedOut"
+                );
+                const userProfileSummary =
+                    document.getElementById("userProfileSummary");
+                const menuLoadingSkeleton = document.getElementById(
+                    "menuLoadingSkeleton"
+                );
+                const actualMenu = document.getElementById("actualMenu");
+
+                if (userProfileSkeleton)
+                    userProfileSkeleton.classList.remove("hidden");
+                if (userProfileSummary)
+                    userProfileSummary.classList.add("hidden");
+                if (userProfileSignedOut)
+                    userProfileSignedOut.classList.add("hidden");
+                if (menuLoadingSkeleton)
+                    menuLoadingSkeleton.classList.remove("hidden");
+                if (actualMenu) actualMenu.classList.add("hidden");
+
+                const user = auth.getCurrentUser();
+                await updateUserProfile(user);
+
+                // Show actual profile and hide skeleton
+                if (userProfileSkeleton)
+                    userProfileSkeleton.classList.add("hidden");
+                if (userProfileSummary)
+                    userProfileSummary.classList.remove("hidden");
+
+                // Hide all sections first
+                document
+                    .querySelectorAll(".dashboard-section")
+                    .forEach((section) => {
+                        section.classList.add("hidden");
+                    });
+
+                // Show appropriate default section based on role
+                // Get the officer record for this user if it exists
+                let officerStatus: OfficerStatus = "none";
 
                 try {
-                    // Use fields from the User interface in the schema
-                    const extendedUser = await get.getOne("users", user.id, {
-                        fields: [
-                            "id",
-                            "name",
-                            "email",
-                            "verified",
-                            "avatar",
-                            "pid",
-                            "member_id",
-                            "graduation_year",
-                            "major",
-                            "signed_up",
-                        ],
-                    });
-
-                    const displayName = extendedUser.name || "Unknown User";
-                    // Default role is Member
-                    let displayRole = "Member";
-
-                    // Map the officer type from the database to our OfficerStatus type
-                    let officerStatus: OfficerStatus = "";
-
-                    // Get the officer record for this user if it exists
-                    // Use fields from the Officer interface in the schema
                     const officerRecords = await get.getList(
                         "officers",
                         1,
@@ -750,13 +937,9 @@ const components = Object.fromEntries(
 
                     if (officerRecords && officerRecords.items.length > 0) {
                         const officerType = officerRecords.items[0].type;
+                        // We can also get the role here if needed for display elsewhere
                         const officerRole = officerRecords.items[0].role;
 
-                        // Use the role field from the officer's collection
-                        if (officerRole) {
-                            displayRole = officerRole;
-                        }
-
                         // Map the officer type to our OfficerStatus
                         switch (officerType) {
                             case OfficerTypes.ADMINISTRATOR:
@@ -790,312 +973,114 @@ const components = Object.fromEntries(
                             }
                         );
 
-                        if (sponsorRecords && sponsorRecords.items.length > 0) {
+                        if (
+                            sponsorRecords &&
+                            sponsorRecords.items.length > 0
+                        ) {
                             officerStatus = "sponsor";
-                            displayRole = "Sponsor";
                         } else {
                             officerStatus = "none";
                         }
                     }
-
-                    const initials = (extendedUser.name || "U")
-                        .split(" ")
-                        .map((n: string) => n[0])
-                        .join("")
-                        .toUpperCase();
-
-                    // Update profile display
-                    if (userName) userName.textContent = displayName;
-                    if (userRole) userRole.textContent = displayRole;
-                    if (userInitials) userInitials.textContent = initials;
-
-                    // Update section visibility based on role
-                    updateSectionVisibility(officerStatus);
                 } catch (error) {
-                    console.error("Error fetching user profile:", error);
-                    const fallbackValues = {
-                        name: "Unknown User",
-                        role: "Member",
-                        initials: "?",
-                    };
-
-                    if (userName) userName.textContent = fallbackValues.name;
-                    if (userRole) userRole.textContent = fallbackValues.role;
-                    if (userInitials)
-                        userInitials.textContent = fallbackValues.initials;
-
-                    updateSectionVisibility("" as OfficerStatus);
+                    console.error(
+                        "Error determining officer status:",
+                        error
+                    );
+                    officerStatus = "none";
                 }
-            };
 
-            // Mobile sidebar toggle
-            const mobileSidebarToggle = document.getElementById(
-                "mobileSidebarToggle"
-            );
-            if (mobileSidebarToggle && sidebar) {
-                const toggleSidebar = () => {
-                    const isOpen =
-                        !sidebar.classList.contains("-translate-x-full");
+                let defaultSection;
+                let defaultButton;
 
-                    if (isOpen) {
-                        sidebar.classList.add("-translate-x-full");
-                        document.body.classList.remove("overflow-hidden");
-                        const overlay =
-                            document.getElementById("sidebarOverlay");
-                        overlay?.remove();
-                    } else {
-                        sidebar.classList.remove("-translate-x-full");
-                        document.body.classList.add("overflow-hidden");
-                        const overlay = document.createElement("div");
-                        overlay.id = "sidebarOverlay";
-                        overlay.className =
-                            "fixed inset-0 bg-black bg-opacity-50 z-40 xl:hidden";
-                        overlay.addEventListener("click", toggleSidebar);
-                        document.body.appendChild(overlay);
-                    }
-                };
+                // Set default section based on role
+                // Only sponsors get a different default view
+                if (officerStatus === "sponsor") {
+                    // For sponsors, show the sponsor dashboard
+                    defaultSection = document.getElementById(
+                        "sponsorDashboardSection"
+                    );
+                    defaultButton = document.querySelector(
+                        '[data-section="sponsorDashboard"]'
+                    );
+                } else {
+                    // For all other users (including administrators), show the profile section
+                    defaultSection =
+                        document.getElementById("profileSection");
+                    defaultButton = document.querySelector(
+                        '[data-section="profile"]'
+                    );
 
-                mobileSidebarToggle.addEventListener("click", toggleSidebar);
+                    // Log the default section for debugging
+                    // console.log(`Setting default section to profile for user with role: ${officerStatus}`);
+                }
+
+                if (defaultSection) {
+                    defaultSection.classList.remove("hidden");
+                }
+                if (defaultButton) {
+                    defaultButton.classList.add("active", "bg-base-200");
+                }
+
+                // Initialize navigation
+                handleNavigation();
+
+                // Show actual menu and hide skeleton
+                if (menuLoadingSkeleton)
+                    menuLoadingSkeleton.classList.add("hidden");
+                if (actualMenu) actualMenu.classList.remove("hidden");
+
+                // Show main content and hide loading
+                if (mainContent) mainContent.classList.remove("hidden");
+                if (pageLoadingState)
+                    pageLoadingState.classList.add("hidden");
+            } catch (error) {
+                console.error("Error initializing dashboard:", error);
+                if (pageLoadingState)
+                    pageLoadingState.classList.add("hidden");
+                if (pageErrorState)
+                    pageErrorState.classList.remove("hidden");
             }
+        };
 
-            // Function to initialize the page
-            const initializePage = async () => {
+        // Initialize when DOM is loaded
+        document.addEventListener("DOMContentLoaded", initializePage);
+
+        // Handle login button click
+        document
+            .querySelector(".login-button")
+            ?.addEventListener("click", async () => {
                 try {
-                    // Define a temporary toast function that does nothing for unauthenticated users
-                    const originalToast = window.toast;
-
-                    // Check if user is authenticated
-                    if (!auth.isAuthenticated()) {
-                        // Temporarily override toast function to prevent notifications for unauthenticated users
-                        window.toast = () => {};
-
-                        // Initialize auth sync for IndexedDB (but toast notifications will be suppressed)
-                        await initAuthSync();
-
-                        // Restore original toast function
-                        window.toast = originalToast;
-
-                        // console.log("User not authenticated");
-                        if (pageLoadingState)
-                            pageLoadingState.classList.add("hidden");
-                        if (notAuthenticatedState)
-                            notAuthenticatedState.classList.remove("hidden");
-                        return;
-                    }
-
-                    // Initialize auth sync for IndexedDB (for authenticated users)
-                    await initAuthSync();
-
                     if (pageLoadingState)
                         pageLoadingState.classList.remove("hidden");
-                    if (pageErrorState) pageErrorState.classList.add("hidden");
                     if (notAuthenticatedState)
                         notAuthenticatedState.classList.add("hidden");
-
-                    // Show loading states
-                    const userProfileSkeleton = document.getElementById(
-                        "userProfileSkeleton"
-                    );
-                    const userProfileSignedOut = document.getElementById(
-                        "userProfileSignedOut"
-                    );
-                    const userProfileSummary =
-                        document.getElementById("userProfileSummary");
-                    const menuLoadingSkeleton = document.getElementById(
-                        "menuLoadingSkeleton"
-                    );
-                    const actualMenu = document.getElementById("actualMenu");
-
-                    if (userProfileSkeleton)
-                        userProfileSkeleton.classList.remove("hidden");
-                    if (userProfileSummary)
-                        userProfileSummary.classList.add("hidden");
-                    if (userProfileSignedOut)
-                        userProfileSignedOut.classList.add("hidden");
-                    if (menuLoadingSkeleton)
-                        menuLoadingSkeleton.classList.remove("hidden");
-                    if (actualMenu) actualMenu.classList.add("hidden");
-
-                    const user = auth.getCurrentUser();
-                    await updateUserProfile(user);
-
-                    // Show actual profile and hide skeleton
-                    if (userProfileSkeleton)
-                        userProfileSkeleton.classList.add("hidden");
-                    if (userProfileSummary)
-                        userProfileSummary.classList.remove("hidden");
-
-                    // Hide all sections first
-                    document
-                        .querySelectorAll(".dashboard-section")
-                        .forEach((section) => {
-                            section.classList.add("hidden");
-                        });
-
-                    // Show appropriate default section based on role
-                    // Get the officer record for this user if it exists
-                    let officerStatus: OfficerStatus = "none";
-
-                    try {
-                        const officerRecords = await get.getList(
-                            "officers",
-                            1,
-                            50,
-                            `user="${user.id}"`,
-                            "",
-                            {
-                                fields: ["id", "type", "role"],
-                            }
-                        );
-
-                        if (officerRecords && officerRecords.items.length > 0) {
-                            const officerType = officerRecords.items[0].type;
-                            // We can also get the role here if needed for display elsewhere
-                            const officerRole = officerRecords.items[0].role;
-
-                            // Map the officer type to our OfficerStatus
-                            switch (officerType) {
-                                case OfficerTypes.ADMINISTRATOR:
-                                    officerStatus = "administrator";
-                                    break;
-                                case OfficerTypes.EXECUTIVE:
-                                    officerStatus = "executive";
-                                    break;
-                                case OfficerTypes.GENERAL:
-                                    officerStatus = "general";
-                                    break;
-                                case OfficerTypes.HONORARY:
-                                    officerStatus = "honorary";
-                                    break;
-                                case OfficerTypes.PAST:
-                                    officerStatus = "past";
-                                    break;
-                                default:
-                                    officerStatus = "none";
-                            }
-                        } else {
-                            // Check if user is a sponsor by querying the sponsors collection
-                            const sponsorRecords = await get.getList(
-                                "sponsors",
-                                1,
-                                1,
-                                `user="${user.id}"`,
-                                "",
-                                {
-                                    fields: ["id", "company"],
-                                }
-                            );
-
-                            if (
-                                sponsorRecords &&
-                                sponsorRecords.items.length > 0
-                            ) {
-                                officerStatus = "sponsor";
-                            } else {
-                                officerStatus = "none";
-                            }
-                        }
-                    } catch (error) {
-                        console.error(
-                            "Error determining officer status:",
-                            error
-                        );
-                        officerStatus = "none";
-                    }
-
-                    let defaultSection;
-                    let defaultButton;
-
-                    // Set default section based on role
-                    // Only sponsors get a different default view
-                    if (officerStatus === "sponsor") {
-                        // For sponsors, show the sponsor dashboard
-                        defaultSection = document.getElementById(
-                            "sponsorDashboardSection"
-                        );
-                        defaultButton = document.querySelector(
-                            '[data-section="sponsorDashboard"]'
-                        );
-                    } else {
-                        // For all other users (including administrators), show the profile section
-                        defaultSection =
-                            document.getElementById("profileSection");
-                        defaultButton = document.querySelector(
-                            '[data-section="profile"]'
-                        );
-
-                        // Log the default section for debugging
-                        // console.log(`Setting default section to profile for user with role: ${officerStatus}`);
-                    }
-
-                    if (defaultSection) {
-                        defaultSection.classList.remove("hidden");
-                    }
-                    if (defaultButton) {
-                        defaultButton.classList.add("active", "bg-base-200");
-                    }
-
-                    // Initialize navigation
-                    handleNavigation();
-
-                    // Show actual menu and hide skeleton
-                    if (menuLoadingSkeleton)
-                        menuLoadingSkeleton.classList.add("hidden");
-                    if (actualMenu) actualMenu.classList.remove("hidden");
-
-                    // Show main content and hide loading
-                    if (mainContent) mainContent.classList.remove("hidden");
-                    if (pageLoadingState)
-                        pageLoadingState.classList.add("hidden");
+                    await auth.login();
                 } catch (error) {
-                    console.error("Error initializing dashboard:", error);
+                    console.error("Login error:", error);
                     if (pageLoadingState)
                         pageLoadingState.classList.add("hidden");
                     if (pageErrorState)
                         pageErrorState.classList.remove("hidden");
                 }
-            };
+            });
 
-            // Initialize when DOM is loaded
-            document.addEventListener("DOMContentLoaded", initializePage);
-
-            // Handle login button click
-            document
-                .querySelector(".login-button")
-                ?.addEventListener("click", async () => {
-                    try {
-                        if (pageLoadingState)
-                            pageLoadingState.classList.remove("hidden");
-                        if (notAuthenticatedState)
-                            notAuthenticatedState.classList.add("hidden");
-                        await auth.login();
-                    } catch (error) {
-                        console.error("Login error:", error);
-                        if (pageLoadingState)
-                            pageLoadingState.classList.add("hidden");
-                        if (pageErrorState)
-                            pageErrorState.classList.remove("hidden");
-                    }
-                });
-
-            // Handle responsive sidebar
-            if (sidebar) {
-                if (window.innerWidth < 1024) {
-                    sidebar.classList.add("-translate-x-full");
-                }
-
-                window.addEventListener("resize", () => {
-                    if (window.innerWidth >= 1024) {
-                        const overlay =
-                            document.getElementById("sidebarOverlay");
-                        if (overlay) {
-                            overlay.remove();
-                            document.body.classList.remove("overflow-hidden");
-                        }
-                        sidebar.classList.remove("-translate-x-full");
-                    }
-                });
+        // Handle responsive sidebar
+        if (sidebar) {
+            if (window.innerWidth < 1024) {
+                sidebar.classList.add("-translate-x-full");
             }
-        </script>
-    </body>
-</html>
+
+            window.addEventListener("resize", () => {
+                if (window.innerWidth >= 1024) {
+                    const overlay =
+                        document.getElementById("sidebarOverlay");
+                    if (overlay) {
+                        overlay.remove();
+                        document.body.classList.remove("overflow-hidden");
+                    }
+                    sidebar.classList.remove("-translate-x-full");
+                }
+            });
+        }
+    </script>
diff --git a/src/pages/oauth2-redirect.astro b/src/pages/oauth2-redirect.astro
index f2ba918..5fb9e58 100644
--- a/src/pages/oauth2-redirect.astro
+++ b/src/pages/oauth2-redirect.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 const title = "Authenticating...";
+import "../styles/global.css";
 ---
 
 <html lang="en" data-theme="dark">
diff --git a/src/styles/global.css b/src/styles/global.css
index a461c50..74d8662 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1 +1,2 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+@plugin "daisyui";
\ No newline at end of file
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 1695dc4..328a230 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -16,59 +16,22 @@ export default {
     "animate-delay-500",
     "animate-delay-700",
   ],
-  theme: {
+theme: {
     extend: {
-      boxShadow: {
-        glow: "0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)",
-      },
       colors: {
-        ieee: {
-          yellow: "#F3C135",
-          black: "#0A0E1A",
-          "blue-100": "#88BFEC",
-          "blue-300": "#233363",
-        },
-
-        // Project Page Card colors
-        project_card_bg: "#0d1324",
+        'ieee-yellow': '#F3C135',
+        'ieee-black': '#0A0E1A',
+        'ieee-blue-100': '#88BFEC',
+        'ieee-blue-300': '#233363',
+        'project-card-bg': '#0d1324',
+      },
+      boxShadow: {
+        glow: '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
       },
       backgroundImage: {
-        "gradient-radial":
-          "radial-gradient(circle at 0% 0%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(circle at 0% 0%, var(--tw-gradient-stops))',
       },
     },
-    daisyui: {
-      themes: [
-        {
-          light: {
-            primary: "#06659d",
-            secondary: "#4b92db",
-            accent: "#F3C135",
-            neutral: "#2a323c",
-            "base-100": "#ffffff",
-            "base-200": "#f8f9fa",
-            "base-300": "#e9ecef",
-            info: "#3abff8",
-            success: "#36d399",
-            warning: "#fbbd23",
-            error: "#f87272",
-          },
-          dark: {
-            primary: "#88BFEC",
-            secondary: "#4b92db",
-            accent: "#F3C135",
-            neutral: "#191D24",
-            "base-100": "#0A0E1A",
-            "base-200": "#0d1324",
-            "base-300": "#1a2035",
-            info: "#3abff8",
-            success: "#36d399",
-            warning: "#fbbd23",
-            error: "#f87272",
-          },
-        },
-      ],
-    },
   },
   plugins: [
     require("tailwindcss-motion"),