Index: src/components/LanguageSwitcher.tsx
===================================================================
--- src/components/LanguageSwitcher.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/LanguageSwitcher.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -13,5 +13,5 @@
       <button
         onClick={() => changeLanguage('mk')}
-        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'mk' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
+        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'mk' ? 'border-primary text-primary bg-accent' : 'border-border text-muted-foreground bg-card hover:border-primary hover:text-primary'}`}
         aria-label="Macedonian"
       >
@@ -20,5 +20,5 @@
       <button
         onClick={() => changeLanguage('en')}
-        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'en' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
+        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'en' ? 'border-primary text-primary bg-accent' : 'border-border text-muted-foreground bg-card hover:border-primary hover:text-primary'}`}
         aria-label="English"
       >
Index: src/components/exams.tsx
===================================================================
--- src/components/exams.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/exams.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -116,8 +116,8 @@
 
   const getGradeColor = (grade: number) => {
-    if (grade >= 9) return "bg-green-100 text-green-800 border-green-200";
-    if (grade >= 8) return "bg-yellow-100 text-yellow-800 border-yellow-200";
-    if (grade >= 6) return "bg-orange-100 text-orange-800 border-orange-200";
-    return "bg-red-100 text-red-800 border-red-200";
+    if (grade >= 9) return "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20";
+    if (grade >= 8) return "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20";
+    if (grade >= 6) return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20";
+    return "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20";
   };
 
@@ -186,5 +186,5 @@
   if (isLoading) {
     return (
-      <div className="bg-white rounded-lg shadow-sm p-6">
+      <div className="bg-card rounded-lg shadow-sm p-6">
         {t('loading', 'Loading...')}
       </div>
@@ -194,6 +194,6 @@
   if (errorMessage) {
     return (
-      <div className="bg-white rounded-lg shadow-sm p-6">
-        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+      <div className="bg-card rounded-lg shadow-sm p-6">
+        <div className="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400">
           {t('failed_to_load_exams', errorMessage)}
         </div>
@@ -203,5 +203,5 @@
 
   return (
-    <div className="bg-white rounded-lg shadow-sm p-6 space-y-6">
+    <div className="bg-card rounded-lg shadow-sm p-6 space-y-6">
       {/* Statistics Section */}
       <div className="space-y-4">
@@ -209,34 +209,34 @@
           {/* Average Grade */}
           <div className="text-center">
-            <div className="text-3xl font-bold text-gray-900">{stats.average}</div>
-            <div className="text-sm text-gray-500 mt-1">{t('average', 'Просек')}</div>
+            <div className="text-3xl font-bold text-card-foreground">{stats.average}</div>
+            <div className="text-sm text-muted-foreground mt-1">{t('average', 'Просек')}</div>
           </div>
 
           {/* Credits */}
           <div className="text-center">
-            <div className="text-3xl font-bold text-gray-900">
+            <div className="text-3xl font-bold text-card-foreground">
               {stats.credits.current}
-              <span className="text-lg text-gray-400">/{stats.credits.total}</span>
+              <span className="text-lg text-muted-foreground">/{stats.credits.total}</span>
             </div>
-            <div className="text-sm text-gray-500 mt-1">{t('credits', 'Кредити')}</div>
+            <div className="text-sm text-muted-foreground mt-1">{t('credits', 'Кредити')}</div>
           </div>
 
           {/* Passed Exams */}
           <div className="text-center">
-            <div className="text-3xl font-bold text-gray-900">{stats.passed}</div>
-            <div className="text-sm text-gray-500 mt-1">{t('passed', 'Положени')}</div>
+            <div className="text-3xl font-bold text-card-foreground">{stats.passed}</div>
+            <div className="text-sm text-muted-foreground mt-1">{t('passed', 'Положени')}</div>
           </div>
 
           {/* Remaining Exams */}
           <div className="text-center">
-            <div className="text-3xl font-bold text-gray-900">{stats.remaining}</div>
-            <div className="text-sm text-gray-500 mt-1">{t('remaining', 'Останато')}</div>
+            <div className="text-3xl font-bold text-card-foreground">{stats.remaining}</div>
+            <div className="text-sm text-muted-foreground mt-1">{t('remaining', 'Останато')}</div>
           </div>
         </div>
 
         {/* Progress Bar spanning entire statistics section */}
-        <div className="w-full bg-gray-200 rounded-full h-2">
+        <div className="w-full bg-secondary rounded-full h-2">
           <div
-            className="bg-blue-500 h-2 rounded-full transition-all duration-300"
+            className="bg-primary h-2 rounded-full transition-all duration-300"
             style={{ width: `${creditsPercentage}%` }}
           ></div>
@@ -246,18 +246,18 @@
       {/* Exams Table */}
       <div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-4">{t('exams', 'Испити')}</h3>
+        <h3 className="text-xl font-semibold text-card-foreground mb-4">{t('exams', 'Испити')}</h3>
 
         <div className="overflow-x-auto">
           <table className="min-w-full">
             <thead>
-              <tr className="border-b border-gray-200">
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">#</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('subject', 'Предмет')}</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('semester', 'Семестар')}</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('credits', 'Кредити')}</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
+              <tr className="border-b border-border">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">#</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('subject', 'Предмет')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('semester', 'Семестар')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">{t('credits', 'Кредити')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   <button
                     onClick={handleSortByDate}
-                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
+                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-accent hover:text-accent-foreground transition-all duration-200 transform hover:scale-105"
                   >
                     {t('date', 'Датум')}
@@ -265,13 +265,13 @@
                       icon={getSortIcon('date')}
                       className={`text-xs transition-colors duration-200 ${
-                        sortField === 'date' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
+                        sortField === 'date' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                       }`}
                     />
                   </button>
                 </th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
                   <button
                     onClick={handleSortByGrade}
-                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
+                    className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-accent hover:text-accent-foreground transition-all duration-200 transform hover:scale-105"
                   >
                     {t('grade', 'Оценка')}
@@ -279,5 +279,5 @@
                       icon={getSortIcon('grade')}
                       className={`text-xs transition-colors duration-200 ${
-                        sortField === 'grade' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
+                        sortField === 'grade' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                       }`}
                     />
@@ -286,12 +286,12 @@
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {getSortedExams().map((exam) => (
-                <tr key={exam.id} className="hover:bg-gray-50 transition-colors duration-150">
-                  <td className="py-4 px-4 text-sm text-gray-900">{exam.id}</td>
-                  <td className="py-4 px-4 text-sm text-gray-900 font-medium">{exam.subject}</td>
-                  <td className="py-4 px-4 text-sm text-gray-500">{exam.semester}</td>
-                  <td className="py-4 px-4 text-sm text-gray-500">{exam.credits}</td>
-                  <td className="py-4 px-4 text-sm text-gray-500">{exam.date}</td>
+                <tr key={exam.id} className="hover:bg-accent/50 transition-colors duration-150">
+                  <td className="py-4 px-4 text-sm text-card-foreground">{exam.id}</td>
+                  <td className="py-4 px-4 text-sm text-card-foreground font-medium">{exam.subject}</td>
+                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.semester}</td>
+                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.credits}</td>
+                  <td className="py-4 px-4 text-sm text-muted-foreground">{exam.date}</td>
                   <td className="py-4 px-4">
                     <span className={`inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium border ${getGradeColor(exam.grade)}`}>
Index: src/components/header.tsx
===================================================================
--- src/components/header.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/header.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -45,5 +45,5 @@
 
   return (
-    <header className="bg-white shadow-sm border-b border-gray-200">
+    <header className="bg-card shadow-sm border-b border-border">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 gap-4 sm:gap-0">
@@ -72,8 +72,8 @@
             {/* University Text */}
             <div className="hidden sm:block">
-              <div className="text-gray-900 font-medium text-sm">
+              <div className="text-card-foreground font-medium text-sm">
                 {t('university')}
               </div>
-              <div className="text-gray-700 text-sm">
+              <div className="text-muted-foreground text-sm">
                 {t('faculty')}
               </div>
@@ -88,14 +88,14 @@
             <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-center sm:justify-end">
               {/* User Avatar */}
-              <div className="hidden sm:flex items-center justify-center w-10 h-10 bg-gray-800 text-white rounded-full">
+              <div className="hidden sm:flex items-center justify-center w-10 h-10 bg-primary text-primary-foreground rounded-full">
                 <FontAwesomeIcon icon={faUser} className="text-sm" />
               </div>
               {/* User Name */}
-              <div className="hidden sm:block text-gray-900 font-medium">
+              <div className="hidden sm:block text-card-foreground font-medium">
                 {userName || '...'}
               </div>
               {/* Logout Button - more stylish and full width on mobile */}
               <button
-                className="w-full sm:w-auto ml-0 sm:ml-2 px-4 py-2 border-2 border-primary text-primary bg-white rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-blue-50 transition-all duration-200 shadow-sm"
+                className="w-full sm:w-auto ml-0 sm:ml-2 px-4 py-2 border-2 border-primary text-primary bg-card rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-accent transition-all duration-200 shadow-sm"
                 onClick={handleLogout}
               >
Index: src/components/navbar.tsx
===================================================================
--- src/components/navbar.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/navbar.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -32,8 +32,8 @@
     <>
       {/* Desktop Navbar */}
-      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-white p-7 rounded-xl my-5 text-xl">
+      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-primary-foreground p-7 rounded-xl my-5 text-xl">
         {menuItems.map((item, index) => (
           <Link key={index} href={item.href}>
-            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:scale-105 hover:shadow-lg hover:text-primary">
+            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground hover:scale-105 hover:shadow-lg">
               <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
               <span>{item.label}</span>
@@ -44,5 +44,5 @@
 
       {/* Mobile Navbar */}
-      <nav className="md:hidden bg-primary text-white rounded-xl my-5">
+      <nav className="md:hidden bg-primary text-primary-foreground rounded-xl my-5">
         <div className="flex justify-between items-center p-4">
           {/* IKnow Logo/Text */}
@@ -55,5 +55,5 @@
           <button
             onClick={toggleMenu}
-            className="p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-colors duration-300"
+            className="p-2 rounded-lg hover:bg-card hover:text-card-foreground transition-colors duration-300"
           >
             <FontAwesomeIcon 
@@ -71,5 +71,5 @@
             {menuItems.map((item, index) => (
               <Link key={index} href={item.href}>
-                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:text-primary">
+                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground">
                   <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
                   <span className="text-lg">{item.label}</span>
Index: src/components/professor-navbar.tsx
===================================================================
--- src/components/professor-navbar.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/professor-navbar.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -23,8 +23,8 @@
     <>
       {/* Desktop Navbar */}
-      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-white p-7 rounded-xl my-5 text-xl">
+      <nav className="hidden md:flex flex-row gap-2 justify-evenly bg-primary text-primary-foreground p-7 rounded-xl my-5 text-xl">
         {menuItems.map((item) => (
           <Link key={item.href} href={item.href}>
-            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:scale-105 hover:shadow-lg hover:text-primary">
+            <div className="group flex flex-row items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground hover:scale-105 hover:shadow-lg">
               <FontAwesomeIcon icon={item.icon} className="transition-transform duration-300 group-hover:rotate-12" />
               <span>{item.label}</span>
@@ -35,5 +35,5 @@
 
       {/* Mobile Navbar */}
-      <nav className="md:hidden bg-primary text-white rounded-xl my-5">
+      <nav className="md:hidden bg-primary text-primary-foreground rounded-xl my-5">
         <div className="flex justify-between items-center p-4">
           <div className="flex items-center gap-2 text-xl font-bold">
@@ -44,5 +44,5 @@
           <button
             onClick={toggleMenu}
-            className="p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-colors duration-300"
+            className="p-2 rounded-lg hover:bg-card hover:text-card-foreground transition-colors duration-300"
             aria-label="Toggle menu"
           >
@@ -62,5 +62,5 @@
             {menuItems.map((item) => (
               <Link key={item.href} href={item.href}>
-                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-white hover:bg-opacity-20 hover:text-primary">
+                <div className="group flex flex-row items-center gap-3 px-3 py-3 rounded-lg cursor-pointer transition-all duration-300 hover:bg-card hover:text-card-foreground">
                   <FontAwesomeIcon
                     icon={item.icon}
Index: src/components/theme-provider.tsx
===================================================================
--- src/components/theme-provider.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/components/theme-provider.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
Index: src/components/theme-toggle.tsx
===================================================================
--- src/components/theme-toggle.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
+++ src/components/theme-toggle.tsx	(revision d7deae59461c29e9dd209dd391ce311c8eae7b63)
@@ -0,0 +1,37 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // Avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button className="p-2 rounded-md hover:bg-accent">
+        <Sun className="h-5 w-5" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="p-2 rounded-md hover:bg-accent transition-colors"
+      aria-label="Toggle theme"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+    </button>
+  );
+}