diff --git a/src/app/academics/resources/page.tsx b/src/app/academics/resources/page.tsx
index bf4e197..981fef8 100644
--- a/src/app/academics/resources/page.tsx
+++ b/src/app/academics/resources/page.tsx
@@ -40,6 +40,7 @@ interface GroupedFile extends DriveFile {
   restricted: boolean;
   displayName: string;
   courseCode?: string | null;
+  academicYearTag?: string | null;
   fileType?: string;
   quizNumber?: number | null;
 }
@@ -172,6 +173,13 @@ export default function ResourcesPage() {
     return `${match[2]}-${match[3]}`;
   }
 
+  function formatAcademicYearTag(tag: string | null | undefined): string | null {
+    if (!tag) return null;
+    const match = tag.match(/^(\d{2})-(\d{2})$/);
+    if (!match) return tag;
+    return `A.Y. 20${match[1]} - 20${match[2]}`;
+  }
+
   function isCurrentAcademicYear(filename: string): boolean {
     return extractAcademicYearTag(filename) === CURRENT_ACADEMIC_YEAR_TAG;
   }
@@ -227,6 +235,7 @@ export default function ResourcesPage() {
         restricted: isRestricted(file.name),
         displayName: file.name.replace(/\[restricted\]/gi, '').replace(/\[members\]/gi, '').trim(),
         courseCode: extractCourseCode(file.name),
+        academicYearTag: extractAcademicYearTag(file.name),
         fileType: getFileTypeCategory(file.name),
         quizNumber: extractQuizNumber(file.name),
       }));
@@ -237,16 +246,16 @@ export default function ResourcesPage() {
     const grouped = new Map<string, CourseGroup>();
     
     files.forEach(file => {
-      const key = file.courseCode || 'Other';
+      const key = `${file.courseCode || 'Other'}::${file.academicYearTag || 'Unknown'}`;
       if (!grouped.has(key)) {
         grouped.set(key, {
-          academicYearTerm: extractAcademicYearTerm(file.name),
+          academicYearTerm: formatAcademicYearTag(file.academicYearTag) || extractAcademicYearTerm(file.name),
           files: []
         });
       }
       // Update academic year/term if we find one and don't have it yet
       if (!grouped.get(key)!.academicYearTerm) {
-        const ayTerm = extractAcademicYearTerm(file.name);
+        const ayTerm = formatAcademicYearTag(file.academicYearTag) || extractAcademicYearTerm(file.name);
         if (ayTerm) {
           grouped.get(key)!.academicYearTerm = ayTerm;
         }
@@ -326,88 +335,101 @@ export default function ResourcesPage() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {Array.from(groupedData.entries())
           .sort(([a], [b]) => a.localeCompare(b))
-          .map(([courseCode, courseData]) => (
-            <div key={courseCode} className="course-card p-6 h-fit">
-              {/* Course Header */}
-              <div className="mb-6">
-                <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-1" style={{ fontFamily: 'var(--font-poppins)' }}>
-                  {courseCode}
-                </h2>
-                {courseData.academicYearTerm && (
-                  <p className="text-sm text-zinc-700 dark:text-zinc-400" style={{ fontFamily: 'var(--font-manrope)' }}>
-                    {courseData.academicYearTerm}
-                  </p>
-                )}
-              </div>
+          .map(([courseKey, courseData]) => {
+            const [courseCode] = courseKey.split('::');
+
+            return (
+              <div key={courseKey} className="course-card p-6 h-fit">
+                <div className="mb-6">
+                  <h2
+                    className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-1"
+                    style={{ fontFamily: 'var(--font-poppins)' }}
+                  >
+                    {courseCode}
+                  </h2>
+                  {courseData.academicYearTerm && (
+                    <p
+                      className="text-sm text-zinc-700 dark:text-zinc-400"
+                      style={{ fontFamily: 'var(--font-manrope)' }}
+                    >
+                      {courseData.academicYearTerm}
+                    </p>
+                  )}
+                </div>
 
-              {/* Group by file type within course */}
-              {(() => {
-                const byType = new Map<string, GroupedFile[]>();
-                courseData.files.forEach(file => {
-                  const type = file.fileType || 'other';
-                  if (!byType.has(type)) byType.set(type, []);
-                  byType.get(type)!.push(file);
-                });
-
-                return Array.from(byType.entries()).map(([fileType, typeFiles]) => (
-                  <div key={fileType} className="mb-6 last:mb-0">
-                    {/* File Type Label */}
-                    <h3 className="text-sm font-semibold text-zinc-700 dark:text-zinc-400 mb-3 uppercase tracking-wide" style={{ fontFamily: 'var(--font-manrope)' }}>
-                      {fileType === 'quiz' ? 'Quizzes' : 
-                        fileType === 'exam' ? 'Exams' : 
-                        fileType === 'notes' ? 'Notes' :
-                        fileType === 'lab' ? 'Labs' :
-                        fileType === 'project' ? 'Projects' : 'Resources'}
-                    </h3>
-
-                    {/* Buttons for each file */}
-                    <div className="flex flex-wrap gap-2">
-                      {typeFiles.map((file) => {
-                        const isLocked = file.restricted && !session;
-                        return (
-                          <div key={file.id} className="relative group">
-                            <button
-                              onClick={() => {
-                                if (isLocked) {
-                                  showNotification('Sign in to access this file', 'error');
-                                } else {
-                                  initiateDownload(file.id, file.name);
-                                }
-                              }}
-                              disabled={isLocked}
-                              className={`resource-button ${isLocked ? 'resource-button-locked' : ''} flex items-center gap-2 px-4 py-2.5 font-medium text-sm text-white`}
-                              style={{ fontFamily: 'var(--font-manrope)' }}
-                            >
-                              {isLocked && <Lock className="w-3.5 h-3.5" />}
-                              {file.quizNumber ? (
-                                `${fileType === 'quiz' ? 'Quiz' : fileType === 'exam' ? 'Exam' : 'Test'} ${file.quizNumber}`
-                              ) : (
-                                <span className="max-w-[150px] truncate">{file.displayName}</span>
-                              )}
-                              <Download className="w-3.5 h-3.5" />
-                            </button>
-                            
-                            {/* File size tooltip - shows on hover */}
-                            {file.size && (
-                              <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-20">
-                                <div className="file-size-tooltip" style={{ fontFamily: 'var(--font-manrope)' }}>
-                                  {getFileSize(file.size)}
+                {(() => {
+                  const byType = new Map<string, GroupedFile[]>();
+                  courseData.files.forEach((file) => {
+                    const type = file.fileType || 'other';
+                    if (!byType.has(type)) byType.set(type, []);
+                    byType.get(type)!.push(file);
+                  });
+
+                  return Array.from(byType.entries()).map(([fileType, typeFiles]) => (
+                    <div key={fileType} className="mb-6 last:mb-0">
+                      <h3
+                        className="text-sm font-semibold text-zinc-700 dark:text-zinc-400 mb-3 uppercase tracking-wide"
+                        style={{ fontFamily: 'var(--font-manrope)' }}
+                      >
+                        {fileType === 'quiz'
+                          ? 'Quizzes'
+                          : fileType === 'exam'
+                            ? 'Exams'
+                            : fileType === 'notes'
+                              ? 'Notes'
+                              : fileType === 'lab'
+                                ? 'Labs'
+                                : fileType === 'project'
+                                  ? 'Projects'
+                                  : 'Resources'}
+                      </h3>
+
+                      <div className="flex flex-wrap gap-2">
+                        {typeFiles.map((file) => {
+                          const isLocked = file.restricted && !session;
+                          return (
+                            <div key={file.id} className="relative group">
+                              <button
+                                onClick={() => {
+                                  if (isLocked) {
+                                    showNotification('Sign in to access this file', 'error');
+                                  } else {
+                                    initiateDownload(file.id, file.name);
+                                  }
+                                }}
+                                disabled={isLocked}
+                                className={`resource-button ${isLocked ? 'resource-button-locked' : ''} flex items-center gap-2 px-4 py-2.5 font-medium text-sm text-white`}
+                                style={{ fontFamily: 'var(--font-manrope)' }}
+                              >
+                                {isLocked && <Lock className="w-3.5 h-3.5" />}
+                                {file.quizNumber ? (
+                                  `${fileType === 'quiz' ? 'Quiz' : fileType === 'exam' ? 'Exam' : 'Test'} ${file.quizNumber}`
+                                ) : (
+                                  <span className="max-w-[150px] truncate">{file.displayName}</span>
+                                )}
+                                <Download className="w-3.5 h-3.5" />
+                              </button>
+
+                              {file.size && (
+                                <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-20">
+                                  <div className="file-size-tooltip" style={{ fontFamily: 'var(--font-manrope)' }}>
+                                    {getFileSize(file.size)}
+                                  </div>
                                 </div>
-                              </div>
-                            )}
-                          </div>
-                        );
-                      })}
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
                     </div>
-                  </div>
-                ));
-              })()}
-            </div>
-          ))}
+                  ));
+                })()}
+              </div>
+            );
+          })}
       </div>
     );
   }
-
   return (
     <div className="min-h-screen">
       <div className="pt-32 pb-8 px-6 max-w-7xl mx-auto">
diff --git a/src/app/globals.css b/src/app/globals.css
index 28d43a6..fe975ee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,7 @@
 :root {
     --background: #ffffff;
     --foreground: #171717;
+    color-scheme: light;
 }
 
 @theme inline {
@@ -16,6 +17,7 @@
     :root {
         --background: #0a0a0a;
         --foreground: #ededed;
+        color-scheme: dark;
     }
 }
 
@@ -54,6 +56,12 @@ body {
     box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.6);
 }
 
+@media (prefers-color-scheme: light) {
+    body {
+        box-shadow: inset 0 0 140px rgba(148, 163, 184, 0.18);
+    }
+}
+
 /* Header visibility transitions */
 .header-element {
     transition:
@@ -934,6 +942,7 @@ body {
 
 /* File size tooltip - 3D glassmorphism */
 .file-size-tooltip {
+
     background: rgba(28, 28, 28, 0.95);
     border-radius: 0.5rem;
     -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.2);
@@ -954,30 +963,265 @@ body {
 
 /* Light mode overrides for resources glass UI */
 @media (prefers-color-scheme: light) {
-    .course-card {
+    body {
+        background:
+            radial-gradient(circle at top, rgba(94, 148, 50, 0.08), transparent 32%),
+            linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+        color: #0f172a;
+        box-shadow: inset 0 0 140px rgba(148, 163, 184, 0.18);
+    }
+
+    .navbar,
+    .logo-pill,
+    .login-pill,
+    .footer,
+    .login-expanded-content,
+    .modal-panel,
+    .auth-warning-container,
+    .input-3d,
+    .navbar-dropdown-menu {
         background: rgba(255, 255, 255, 0.72);
-        border: 1.5px solid rgba(255, 255, 255, 0.85);
+        border-color: rgba(203, 213, 225, 0.85);
         box-shadow:
-            0 10px 30px rgba(15, 23, 42, 0.18),
-            0 2px 6px rgba(15, 23, 42, 0.12),
-            inset 0 1px 0 rgba(255, 255, 255, 0.85),
-            inset 0 -1px 0 rgba(15, 23, 42, 0.08);
+            0 12px 32px rgba(15, 23, 42, 0.14),
+            0 2px 8px rgba(15, 23, 42, 0.08),
+            inset 0 1px 0 rgba(255, 255, 255, 0.82),
+            inset 0 -1px 0 rgba(148, 163, 184, 0.1);
+    }
+
+    .navbar,
+    .logo-pill,
+    .login-pill,
+    .footer,
+    .login-expanded-content,
+    .modal-panel,
+    .auth-warning-container,
+    .navbar-dropdown-menu,
+    .glass-card,
+    .glass-card-3d {
+        backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
+        -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
+    }
+
+    .navbar,
+    .logo-pill,
+    .login-pill,
+    .footer {
+        color: #0f172a;
     }
 
-    .course-card:hover {
+    .navbar::before,
+    .logo-pill::before,
+    .login-pill::before,
+    .footer::before,
+    .auth-warning-container::before,
+    .glass-card::before,
+    .glass-card-3d::before {
+        background: linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.55) 0%,
+            rgba(241, 245, 249, 0.24) 50%,
+            rgba(148, 163, 184, 0.12) 100%
+        );
+    }
+
+    .navbar,
+    .logo-pill,
+    .login-pill,
+    .search-bar,
+    .category-filter,
+    .resource-button,
+    .glass-card,
+    .glass-card,
+    .glass-card-3d,
+    .course-card,
+    .auth-warning-container,
+    .navbar-dropdown-menu,
+    .glass-card,
+    .glass-card-3d {
+    }
+
+    .navbar {
+        color: #1e293b;
+        text-shadow: none;
+    }
+
+    .navbar-links a,
+    .navbar-item,
+    .navbar-dropdown-trigger,
+    .navbar-label,
+    .login-description,
+    .footer-text,
+    .footer-links,
+    .footer-links a,
+    .navbar-dropdown-item,
+    .input-3d,
+    .auth-warning-container,
+    .modal-panel,
+    .login-header,
+    .login-expanded-content {
+        color: #0f172a;
+        text-shadow: none;
+    }
+
+    .navbar-links a:hover,
+    .navbar-item:hover,
+    .navbar-dropdown-trigger:hover {
+        color: #4e8d1f;
+    }
+
+    .navbar-dropdown-item:hover,
+    .navbar-dropdown-trigger:hover,
+    .footer-links a:hover {
+        background: rgba(94, 148, 50, 0.08);
+    }
+
+    .resource-button {
+        color: #ffffff;
+    }
+
+    .resource-button-locked {
+        background: rgba(148, 163, 184, 0.16);
+        border-color: rgba(148, 163, 184, 0.28);
+        color: #475569;
+    }
+
+    .search-bar,
+    .category-filter,
+    .input-3d,
+    .navbar-dropdown-menu,
+    .navbar-dropdown-item,
+    .modal-panel,
+    .login-expanded-content {
+        color: #0f172a;
+    }
+
+    .input-3d::placeholder,
+    .search-bar input::placeholder {
+        color: #64748b;
+    }
+
+    .modal-backdrop {
+        background: rgba(226, 232, 240, 0.55);
+        backdrop-filter: blur(18px) saturate(120%);
+    }
+
+    .glass-card,
+    .glass-card-3d,
+    .course-card,
+    .auth-warning-container {
+        background: linear-gradient(
+            135deg,
+            rgba(78, 141, 31, 0.96) 0%,
+            rgba(94, 148, 50, 0.92) 100%
+        );
+        border: 1.5px solid rgba(255, 255, 255, 0.18);
         box-shadow:
-            0 14px 34px rgba(15, 23, 42, 0.22),
-            0 4px 12px rgba(15, 23, 42, 0.16),
-            inset 0 1px 0 rgba(255, 255, 255, 0.9),
-            inset 0 -1px 0 rgba(15, 23, 42, 0.1);
+            0 12px 34px rgba(78, 141, 31, 0.22),
+            0 3px 10px rgba(15, 23, 42, 0.08),
+            inset 0 1px rgba(255, 255, 255, 0.18),
+            inset 0 -1px rgba(15, 23, 42, 0.12);
+    }
+
+    .glass-card:hover,
+    .glass-card-3d:hover,
+    .course-card:hover,
+    .auth-warning-container:hover {
+        background: linear-gradient(
+            135deg,
+            rgba(68, 127, 27, 0.98) 0%,
+            rgba(78, 141, 31, 0.96) 100%
+        );
+        border-color: rgba(255, 255, 255, 0.22);
+        box-shadow:
+            0 16px 42px rgba(78, 141, 31, 0.28),
+            0 6px 16px rgba(15, 23, 42, 0.1),
+            inset 0 1px rgba(255, 255, 255, 0.2),
+            inset 0 -1px rgba(15, 23, 42, 0.12);
+    }
+
+    .glass-card h1,
+    .glass-card h2,
+    .glass-card h3,
+    .glass-card h4,
+    .glass-card h5,
+    .glass-card h6,
+    .glass-card p,
+    .glass-card span,
+    .glass-card label,
+    .glass-card small,
+    .glass-card-3d h1,
+    .glass-card-3d h2,
+    .glass-card-3d h3,
+    .glass-card-3d h4,
+    .glass-card-3d h5,
+    .glass-card-3d h6,
+    .glass-card-3d p,
+    .glass-card-3d span,
+    .glass-card-3d label,
+    .glass-card-3d small,
+    .course-card h1,
+    .course-card h2,
+    .course-card h3,
+    .course-card h4,
+    .course-card h5,
+    .course-card h6,
+    .course-card p,
+    .course-card span,
+    .course-card label,
+    .course-card small,
+    .auth-warning-container h1,
+    .auth-warning-container h2,
+    .auth-warning-container h3,
+    .auth-warning-container h4,
+    .auth-warning-container h5,
+    .auth-warning-container h6,
+    .auth-warning-container p,
+    .auth-warning-container span,
+    .auth-warning-container label,
+    .auth-warning-container small {
+        color: #ffffff;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+    }
+
+    .glass-card svg,
+    .glass-card-3d svg,
+    .course-card svg,
+    .auth-warning-container svg {
+        color: #ffffff;
+    }
+
+    .hero-button-secondary {
+        background: rgba(255, 255, 255, 0.72);
+        border-color: rgba(203, 213, 225, 0.9);
+        color: #0f172a;
+        box-shadow:
+            0 4px 16px rgba(15, 23, 42, 0.12),
+            0 1px 4px rgba(15, 23, 42, 0.08),
+            inset 0 1px rgba(255, 255, 255, 0.8);
+    }
+
+    .hero-button-secondary:hover {
+        background: rgba(255, 255, 255, 0.88);
     }
 
     .course-card::before {
         background: linear-gradient(
             140deg,
-            rgba(255, 255, 255, 0.5) 0%,
-            rgba(241, 245, 249, 0.25) 50%,
-            rgba(148, 163, 184, 0.14) 100%
+            rgba(255, 255, 255, 0.12) 0%,
+            rgba(255, 255, 255, 0.05) 50%,
+            rgba(15, 23, 42, 0.08) 100%
+        );
+    }
+
+    .glass-card::before,
+    .glass-card-3d::before,
+    .auth-warning-container::before {
+        background: linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.12) 0%,
+            rgba(255, 255, 255, 0.04) 50%,
+            rgba(15, 23, 42, 0.08) 100%
         );
     }
 
@@ -991,6 +1235,69 @@ body {
             inset 0 1px 0 rgba(255, 255, 255, 0.85),
             inset 0 -1px 0 rgba(148, 163, 184, 0.18);
     }
+
+    .glass-card-3d {
+        background: linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.78) 0%,
+            rgba(248, 250, 252, 0.7) 100%
+        );
+        border: 1.5px solid rgba(255, 255, 255, 0.82);
+        box-shadow:
+            0 8px 32px rgba(15, 23, 42, 0.14),
+            inset 0 1px rgba(255, 255, 255, 0.85),
+            inset 0 -1px rgba(148, 163, 184, 0.1);
+    }
+
+    .glass-card-3d:hover {
+        background: linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.88) 0%,
+            rgba(241, 245, 249, 0.8) 100%
+        );
+        border-color: rgba(203, 213, 225, 0.9);
+        box-shadow:
+            0 12px 48px rgba(15, 23, 42, 0.18),
+            0 4px 16px rgba(15, 23, 42, 0.12),
+            inset 0 1px rgba(255, 255, 255, 0.95),
+            inset 0 -1px rgba(148, 163, 184, 0.12);
+    }
+
+    .search-bar,
+    .category-filter {
+        background: rgba(255, 255, 255, 0.72);
+        border-color: rgba(203, 213, 225, 0.8);
+        box-shadow:
+            0 8px 24px rgba(15, 23, 42, 0.12),
+            0 2px 8px rgba(15, 23, 42, 0.08),
+            inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    }
+
+    .search-bar:focus-within,
+    .category-filter:hover {
+        border-color: rgba(94, 148, 50, 0.45);
+        box-shadow:
+            0 10px 28px rgba(15, 23, 42, 0.14),
+            0 0 0 3px rgba(94, 148, 50, 0.12),
+            inset 0 1px 0 rgba(255, 255, 255, 0.85);
+    }
+
+    .resource-button {
+        box-shadow:
+            0 4px 16px rgba(94, 148, 50, 0.18),
+            0 1px 4px rgba(15, 23, 42, 0.08),
+            inset 0 1px 0 rgba(255, 255, 255, 0.22),
+            inset 0 -1px 0 rgba(15, 23, 42, 0.08);
+    }
+
+    .resource-button:hover:not(:disabled) {
+        box-shadow:
+            0 8px 24px rgba(94, 148, 50, 0.22),
+            0 2px 8px rgba(15, 23, 42, 0.12),
+            0 0 0 2px rgba(94, 148, 50, 0.12),
+            inset 0 1px 0 rgba(255, 255, 255, 0.28),
+            inset 0 -1px 0 rgba(15, 23, 42, 0.08);
+    }
 }
 
 /* Login container and expandable box */
@@ -2174,6 +2481,113 @@ body {
     transform: translateY(-4px) scale(1.02);
 }
 
+@media (prefers-color-scheme: light) {
+    .glass-card,
+    .glass-card-3d,
+    .course-card,
+    .auth-warning-container,
+    .modal-panel,
+    .login-expanded-content {
+        background: linear-gradient(
+            135deg,
+            rgba(78, 141, 31, 0.98) 0%,
+            rgba(94, 148, 50, 0.94) 100%
+        ) !important;
+        border-color: rgba(255, 255, 255, 0.2) !important;
+        box-shadow:
+            0 14px 36px rgba(78, 141, 31, 0.24),
+            0 4px 14px rgba(15, 23, 42, 0.1),
+            inset 0 1px rgba(255, 255, 255, 0.2),
+            inset 0 -1px rgba(15, 23, 42, 0.12) !important;
+    }
+
+    .glass-card:hover,
+    .glass-card-3d:hover,
+    .course-card:hover,
+    .auth-warning-container:hover,
+    .modal-panel:hover {
+        background: linear-gradient(
+            135deg,
+            rgba(68, 127, 27, 0.98) 0%,
+            rgba(78, 141, 31, 0.98) 100%
+        ) !important;
+        border-color: rgba(255, 255, 255, 0.24) !important;
+    }
+
+    .glass-card h1,
+    .glass-card h2,
+    .glass-card h3,
+    .glass-card h4,
+    .glass-card h5,
+    .glass-card h6,
+    .glass-card p,
+    .glass-card span,
+    .glass-card label,
+    .glass-card small,
+    .glass-card-3d h1,
+    .glass-card-3d h2,
+    .glass-card-3d h3,
+    .glass-card-3d h4,
+    .glass-card-3d h5,
+    .glass-card-3d h6,
+    .glass-card-3d p,
+    .glass-card-3d span,
+    .glass-card-3d label,
+    .glass-card-3d small,
+    .course-card h1,
+    .course-card h2,
+    .course-card h3,
+    .course-card h4,
+    .course-card h5,
+    .course-card h6,
+    .course-card p,
+    .course-card span,
+    .course-card label,
+    .course-card small,
+    .auth-warning-container h1,
+    .auth-warning-container h2,
+    .auth-warning-container h3,
+    .auth-warning-container h4,
+    .auth-warning-container h5,
+    .auth-warning-container h6,
+    .auth-warning-container p,
+    .auth-warning-container span,
+    .auth-warning-container label,
+    .auth-warning-container small,
+    .modal-panel h1,
+    .modal-panel h2,
+    .modal-panel h3,
+    .modal-panel h4,
+    .modal-panel h5,
+    .modal-panel h6,
+    .modal-panel p,
+    .modal-panel span,
+    .modal-panel label,
+    .modal-panel small,
+    .login-expanded-content h1,
+    .login-expanded-content h2,
+    .login-expanded-content h3,
+    .login-expanded-content h4,
+    .login-expanded-content h5,
+    .login-expanded-content h6,
+    .login-expanded-content p,
+    .login-expanded-content span,
+    .login-expanded-content label,
+    .login-expanded-content small {
+        color: #ffffff !important;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
+    }
+
+    .glass-card svg,
+    .glass-card-3d svg,
+    .course-card svg,
+    .auth-warning-container svg,
+    .modal-panel svg,
+    .login-expanded-content svg {
+        color: #ffffff !important;
+    }
+}
+
 /* Custom green color overrides for brand color #4e8d1f */
 .text-green-400 {
     color: #4e8d1f !important;
diff --git a/src/app/officers/link-shortener/LinkShortenerClient.tsx b/src/app/officers/link-shortener/LinkShortenerClient.tsx
index 9be0cbd..26e8cfe 100644
--- a/src/app/officers/link-shortener/LinkShortenerClient.tsx
+++ b/src/app/officers/link-shortener/LinkShortenerClient.tsx
@@ -84,42 +84,42 @@ export default function LinkShortenerClient() {
           <div className="modal-backdrop" onClick={() => setIsModalOpen(false)} aria-hidden />
           <div className="modal-panel glass-card-3d">
             <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-medium text-white">New Short Link</h3>
-              <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-white" aria-label="Close">×</button>
+              <h3 className="text-lg font-medium text-zinc-950 dark:text-white">New Short Link</h3>
+              <button onClick={() => setIsModalOpen(false)} className="text-zinc-500 hover:text-zinc-950 dark:text-gray-400 dark:hover:text-white" aria-label="Close">×</button>
             </div>
             <form onSubmit={async (e) => { await handleCreate(e); setIsModalOpen(false); }} className="space-y-4">
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-300 text-left">Destination URL</label>
+                <label className="text-sm font-medium text-zinc-700 dark:text-gray-300 text-left">Destination URL</label>
                 <input
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
                   type="url"
                   placeholder="https://example.com/very-long-url"
-                  className="input-3d w-full placeholder-gray-400"
+                  className="input-3d w-full placeholder:text-zinc-400 dark:placeholder:text-gray-400"
                 />
               </div>
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-300 text-left">Short Link</label>
+                <label className="text-sm font-medium text-zinc-700 dark:text-gray-300 text-left">Short Link</label>
                 <input
                   value={alias}
                   onChange={(e) => setAlias(e.target.value)}
                   type="text"
                   placeholder="my-link"
-                  className="input-3d w-full placeholder-gray-400"
+                  className="input-3d w-full placeholder:text-zinc-400 dark:placeholder:text-gray-400"
                 />
               </div>
               <div className="flex flex-col gap-2">
-                <label className="text-sm font-medium text-gray-300 text-left">Expires at (optional)</label>
+                <label className="text-sm font-medium text-zinc-700 dark:text-gray-300 text-left">Expires at (optional)</label>
                 <input
                   value={expiresAt ?? ''}
                   onChange={(e) => setExpiresAt(e.target.value || null)}
                   type="datetime-local"
-                  className="input-3d w-full placeholder-gray-400"
+                  className="input-3d w-full placeholder:text-zinc-400 dark:placeholder:text-gray-400"
                 />
               </div>
               <div className="modal-actions justify-end">
                 {error && <p className="text-red-400 text-sm mr-4">{error}</p>}
-                <button type="button" onClick={() => setIsModalOpen(false)} className="px-3 py-1.5 text-sm text-gray-300 bg-transparent rounded-md hover:bg-white/5">Cancel</button>
+                <button type="button" onClick={() => setIsModalOpen(false)} className="px-3 py-1.5 text-sm text-zinc-700 dark:text-gray-300 bg-transparent rounded-md hover:bg-zinc-950/5 dark:hover:bg-white/5">Cancel</button>
                 <button disabled={loading} className="resource-button px-4 py-2 text-white font-medium flex items-center gap-2 text-sm">
                   <Rocket className="w-4 h-4" aria-hidden />
                   {loading ? 'Confirming…' : 'Confirm'}
@@ -133,30 +133,30 @@ export default function LinkShortenerClient() {
       <div className="course-card p-12 rounded-2xl mt-6">
         <div className="text-left space-y-6">
           <div>
-            <h2 className="text-2xl font-semibold text-white mb-4">Create Short Link</h2>
+            <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white mb-4">Create Short Link</h2>
           </div>
 
           </div>
 
-        <div className="border-t border-gray-600 pt-6">
-          <h2 className="text-2xl font-semibold text-white mb-4">Recent Links</h2>
+        <div className="border-t border-zinc-200 dark:border-gray-600 pt-6">
+          <h2 className="text-2xl font-semibold text-zinc-950 dark:text-white mb-4">Recent Links</h2>
           <div className="space-y-3">
-            {links.length === 0 && <p className="text-gray-400">No links yet.</p>}
+            {links.length === 0 && <p className="text-zinc-600 dark:text-gray-400">No links yet.</p>}
             {links.map((l) => (
               <div key={l.id} className="course-card p-4 rounded-lg">
                 <div className="flex justify-between items-center">
                   <div>
-                    <p className="text-white font-medium">{typeof window !== 'undefined' ? `${window.location.host}/${l.slug}` : l.slug}</p>
-                    <p className="text-gray-400 text-sm">→ {l.target_url}</p>
-                    {l.expires_at && <p className="text-xs text-yellow-300">Expires: {new Date(l.expires_at).toLocaleString()}</p>}
+                    <p className="text-zinc-950 dark:text-white font-medium">{typeof window !== 'undefined' ? `${window.location.host}/${l.slug}` : l.slug}</p>
+                    <p className="text-zinc-600 dark:text-gray-400 text-sm">→ {l.target_url}</p>
+                    {l.expires_at && <p className="text-xs text-amber-700 dark:text-yellow-300">Expires: {new Date(l.expires_at).toLocaleString()}</p>}
                   </div>
                   <div className="text-right">
-                    <p className="text-gray-400 text-sm">Clicks: {l.clicks}</p>
+                    <p className="text-zinc-600 dark:text-gray-400 text-sm">Clicks: {l.clicks}</p>
                     <button onClick={async () => {
                       if (!confirm('Delete this link?')) return;
                       await fetch('/api/link-shortener', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: l.id }) });
                       fetchLinks();
-                    }} className="text-red-400 hover:text-red-300 text-sm">Delete</button>
+                    }} className="text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 text-sm">Delete</button>
                   </div>
                 </div>
               </div>
diff --git a/src/app/officers/link-shortener/page.tsx b/src/app/officers/link-shortener/page.tsx
index 99cb839..98ad6a1 100644
--- a/src/app/officers/link-shortener/page.tsx
+++ b/src/app/officers/link-shortener/page.tsx
@@ -24,16 +24,22 @@ export default async function LinkShortenerPage() {
 
   return (
     <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto">
-      <div className="text-center space-y-6">
-        <h1 className="text-5xl font-bold text-white" style={{ fontFamily: 'var(--font-poppins)' }}>
-          Link Shortener
-        </h1>
-        <p className="text-xl text-gray-300 max-w-3xl mx-auto" style={{ fontFamily: 'var(--font-manrope)' }}>
-          Create and manage shortened links for ACCESS resources and events.
-        </p>
+      <section className="course-card relative overflow-hidden p-10 md:p-14 mb-8">
+        <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-transparent to-emerald-500/10 pointer-events-none" />
+        <div className="relative text-center space-y-6">
+          <div className="inline-flex items-center rounded-full border border-green-500/20 bg-green-500/10 px-4 py-1 text-sm font-semibold text-green-700 dark:text-green-300" style={{ fontFamily: 'var(--font-manrope)' }}>
+            Officer Tools
+          </div>
+          <h1 className="text-5xl md:text-6xl font-bold text-zinc-950 dark:text-white" style={{ fontFamily: 'var(--font-poppins)' }}>
+            Link Shortener
+          </h1>
+          <p className="text-xl text-zinc-700 dark:text-gray-300 max-w-3xl mx-auto" style={{ fontFamily: 'var(--font-manrope)' }}>
+            Create and manage shortened links for ACCESS resources and events.
+          </p>
+        </div>
+      </section>
 
         <LinkShortenerClient />
-      </div>
     </main>
   );
 }
\ No newline at end of file
diff --git a/src/components/ui/auth-warning/index.tsx b/src/components/ui/auth-warning/index.tsx
index 8d6bbde..f07ea30 100644
--- a/src/components/ui/auth-warning/index.tsx
+++ b/src/components/ui/auth-warning/index.tsx
@@ -14,15 +14,15 @@ export function AuthWarning({
     <div
       className={`auth-warning-container ${isFading ? "auth-warning-fade-out" : ""} ${className}`}
     >
-      <Icon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+      <Icon className="w-12 h-12 text-zinc-500 dark:text-gray-400 mx-auto mb-4" />
       <h3
-        className="text-xl font-semibold text-white mb-2"
+        className="text-xl font-semibold text-zinc-950 dark:text-white mb-2"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {title}
       </h3>
       <p
-        className="text-gray-400"
+        className="text-zinc-600 dark:text-gray-400"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {message}
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 10c5c1b..51ecc1b 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -11,7 +11,7 @@ export function Button({
 }: ButtonProps) {
   const variantClasses = {
     primary: "hero-button-primary text-white",
-    secondary: "hero-button-secondary text-gray-300",
+    secondary: "hero-button-secondary text-zinc-200 dark:text-gray-300",
   };
 
   return (
diff --git a/src/components/ui/empty-state/index.tsx b/src/components/ui/empty-state/index.tsx
index 875a871..f42a2d3 100644
--- a/src/components/ui/empty-state/index.tsx
+++ b/src/components/ui/empty-state/index.tsx
@@ -6,7 +6,7 @@ export function EmptyState({ message, className = "" }: EmptyStateProps) {
   return (
     <div className={`text-center py-12 ${className}`}>
       <p
-        className="text-gray-400 text-lg"
+        className="text-zinc-600 dark:text-gray-400 text-lg"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {message}
diff --git a/src/components/ui/feature-card/index.tsx b/src/components/ui/feature-card/index.tsx
index 320a7fd..52872c7 100644
--- a/src/components/ui/feature-card/index.tsx
+++ b/src/components/ui/feature-card/index.tsx
@@ -22,13 +22,13 @@ export function FeatureCard({
         {title}
       </h3>
       <p
-        className="text-gray-300 mb-4"
+        className="text-white/90 mb-4"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {description}
       </p>
       <span
-        className="text-green-400 flex items-center gap-2 font-semibold"
+        className="text-white flex items-center gap-2 font-semibold"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {linkText} <ArrowRight className="w-4 h-4" />
diff --git a/src/components/ui/filter-button/index.tsx b/src/components/ui/filter-button/index.tsx
index 8c721a8..9f96879 100644
--- a/src/components/ui/filter-button/index.tsx
+++ b/src/components/ui/filter-button/index.tsx
@@ -12,7 +12,7 @@ export function FilterButton({
   return (
     <button
       onClick={onClick}
-      className={`category-filter ${isActive ? "category-filter-active" : ""} flex items-center gap-2 px-6 py-3 font-medium text-gray-300 ${className}`}
+      className={`category-filter ${isActive ? "category-filter-active" : ""} flex items-center gap-2 px-6 py-3 font-medium text-zinc-700 dark:text-gray-300 ${className}`}
       style={{ fontFamily: "var(--font-manrope)" }}
     >
       <Icon className="w-4 h-4" />
diff --git a/src/components/ui/hero/index.tsx b/src/components/ui/hero/index.tsx
index 44d52e0..88071cd 100644
--- a/src/components/ui/hero/index.tsx
+++ b/src/components/ui/hero/index.tsx
@@ -13,14 +13,14 @@ export function Hero({
     <section className={`min-h-screen flex items-center justify-center px-6 ${className}`}>
       <div className="max-w-5xl mx-auto text-center space-y-8">
         <h1
-          className="text-6xl md:text-7xl font-bold text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+          className="text-6xl md:text-7xl font-bold text-zinc-950 dark:text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
           style={{ fontFamily: "var(--font-poppins)" }}
         >
           {title}
         </h1>
         {subtitle && (
           <p
-            className="text-2xl md:text-3xl text-gray-200 max-w-3xl mx-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+            className="text-2xl md:text-3xl text-zinc-700 dark:text-gray-200 max-w-3xl mx-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
             style={{ fontFamily: "var(--font-manrope)" }}
           >
             {subtitle}
@@ -28,7 +28,7 @@ export function Hero({
         )}
         {description && (
           <p
-            className="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+            className="text-lg md:text-xl text-zinc-600 dark:text-gray-300 max-w-2xl mx-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
             style={{ fontFamily: "var(--font-manrope)" }}
           >
             {description}
diff --git a/src/components/ui/page-header/index.tsx b/src/components/ui/page-header/index.tsx
index 9299b9e..a949f98 100644
--- a/src/components/ui/page-header/index.tsx
+++ b/src/components/ui/page-header/index.tsx
@@ -14,14 +14,14 @@ export function PageHeader({
       className={`space-y-6 ${centered ? "text-center" : ""} ${className}`}
     >
       <h1
-        className="text-5xl font-bold text-white"
+        className="text-5xl font-bold text-zinc-950 dark:text-white"
         style={{ fontFamily: "var(--font-poppins)" }}
       >
         {title}
       </h1>
       {description && (
         <p
-          className={`text-xl text-gray-300 ${
+          className={`text-xl text-zinc-600 dark:text-gray-300 ${
             centered ? "max-w-3xl mx-auto" : ""
           }`}
           style={{ fontFamily: "var(--font-manrope)" }}
diff --git a/src/components/ui/placeholder/index.tsx b/src/components/ui/placeholder/index.tsx
index 48e5bbb..b460175 100644
--- a/src/components/ui/placeholder/index.tsx
+++ b/src/components/ui/placeholder/index.tsx
@@ -24,13 +24,13 @@ export function Placeholder({
         <Icon className="w-16 h-16 text-green-400" />
         <div className="space-y-4">
           <h2
-            className="text-2xl font-bold text-white text-center"
+            className="text-2xl font-bold text-zinc-950 dark:text-white text-center"
             style={{ fontFamily: "var(--font-poppins)" }}
           >
             {title}
           </h2>
           <p
-            className="text-gray-400 text-lg text-center"
+            className="text-zinc-600 dark:text-gray-400 text-lg text-center"
             style={{ fontFamily: "var(--font-manrope)" }}
           >
             {message}
diff --git a/src/components/ui/search-input/index.tsx b/src/components/ui/search-input/index.tsx
index db8ab04..ab9fbb3 100644
--- a/src/components/ui/search-input/index.tsx
+++ b/src/components/ui/search-input/index.tsx
@@ -13,13 +13,13 @@ export function SearchInput({
   return (
     <div className={`mb-8 ${className}`}>
       <div className="relative max-w-2xl mx-auto search-bar">
-        <Icon className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 z-10 pointer-events-none" />
+        <Icon className="absolute left-4 top-1/2 transform -translate-y-1/2 text-zinc-500 dark:text-gray-400 w-5 h-5 z-10 pointer-events-none" />
         <input
           type="text"
           placeholder={placeholder}
           value={value}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full pl-12 pr-4 py-3 bg-transparent text-white placeholder-gray-400 focus:outline-none relative"
+          className="w-full pl-12 pr-4 py-3 bg-transparent text-zinc-950 dark:text-white placeholder:text-zinc-500 dark:placeholder:text-gray-400 focus:outline-none relative"
           style={{ fontFamily: "var(--font-manrope)" }}
         />
       </div>
diff --git a/src/components/ui/section-header/index.tsx b/src/components/ui/section-header/index.tsx
index 6bb8544..3088a2c 100644
--- a/src/components/ui/section-header/index.tsx
+++ b/src/components/ui/section-header/index.tsx
@@ -5,7 +5,7 @@ import { SectionHeaderProps } from "./types";
 export function SectionHeader({ title, className = "" }: SectionHeaderProps) {
   return (
     <h2
-      className={`text-4xl md:text-5xl font-bold text-white text-center mb-16 ${className}`}
+      className={`text-4xl md:text-5xl font-bold text-zinc-950 dark:text-white text-center mb-16 ${className}`}
       style={{ fontFamily: "var(--font-poppins)" }}
     >
       {title}
diff --git a/src/components/ui/stat-card/index.tsx b/src/components/ui/stat-card/index.tsx
index 402faf9..406cc95 100644
--- a/src/components/ui/stat-card/index.tsx
+++ b/src/components/ui/stat-card/index.tsx
@@ -14,7 +14,7 @@ export function StatCard({
     <Card className={`p-8 text-center ${className}`}>
       <Icon className="w-12 h-12 text-green-400 mb-4 group-hover:scale-110 transition-transform mx-auto" />
       <div
-        className="text-5xl font-bold text-green-400 mb-3"
+        className="text-5xl font-bold text-white mb-3"
         style={{ fontFamily: "var(--font-poppins)" }}
       >
         {value}
@@ -26,7 +26,7 @@ export function StatCard({
         {title}
       </h3>
       <p
-        className="text-gray-300 mb-4"
+        className="text-white/90 mb-4"
         style={{ fontFamily: "var(--font-manrope)" }}
       >
         {description}
diff --git a/src/components/ui/text/index.tsx b/src/components/ui/text/index.tsx
index 09a48bd..a3bc9a2 100644
--- a/src/components/ui/text/index.tsx
+++ b/src/components/ui/text/index.tsx
@@ -4,15 +4,15 @@ import { ElementType } from "react";
 import { TextProps, TextVariant } from "./types";
 
 const variantStyles: Record<TextVariant, string> = {
-  h1: "text-5xl font-bold text-white",
-  h2: "text-3xl font-bold text-white",
-  h3: "text-xl font-semibold text-white",
-  h4: "text-lg font-semibold text-white",
-  body: "text-gray-300",
-  "body-relaxed": "text-gray-300 leading-relaxed",
-  description: "text-gray-300 text-xl",
-  caption: "text-sm font-semibold text-gray-400 uppercase tracking-wide",
-  label: "text-sm text-gray-400",
+  h1: "text-5xl font-bold text-zinc-950 dark:text-white",
+  h2: "text-3xl font-bold text-zinc-950 dark:text-white",
+  h3: "text-xl font-semibold text-zinc-950 dark:text-white",
+  h4: "text-lg font-semibold text-zinc-950 dark:text-white",
+  body: "text-zinc-600 dark:text-gray-300",
+  "body-relaxed": "text-zinc-600 dark:text-gray-300 leading-relaxed",
+  description: "text-zinc-600 dark:text-gray-300 text-xl",
+  caption: "text-sm font-semibold text-zinc-500 dark:text-gray-400 uppercase tracking-wide",
+  label: "text-sm text-zinc-500 dark:text-gray-400",
 };
 
 const variantFonts: Record<TextVariant, string> = {
diff --git a/wrangler.jsonc b/wrangler.jsonc
index c95f987..d515dd4 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -40,8 +40,4 @@
 			"database_id": "8edf3d43-ed8b-45a4-9a7a-b7d1538769e3"
 		}
 	]
-	,
-	"triggers": {
-		"crons": ["0 0 * * *"]
-	}
 }
\ No newline at end of file