Index: src/app/globals.css
===================================================================
--- src/app/globals.css	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/globals.css	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -80,35 +80,35 @@
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: oklch(0.15 0.01 240);
+  --foreground: oklch(0.95 0.01 240);
+  --card: oklch(0.18 0.01 240);
+  --card-foreground: oklch(0.95 0.01 240);
+  --popover: oklch(0.18 0.01 240);
+  --popover-foreground: oklch(0.95 0.01 240);
+  --primary: #3b82f6;
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.25 0.01 240);
+  --secondary-foreground: oklch(0.95 0.01 240);
+  --muted: oklch(0.25 0.01 240);
+  --muted-foreground: oklch(0.65 0.01 240);
+  --accent: oklch(0.25 0.01 240);
+  --accent-foreground: oklch(0.95 0.01 240);
+  --destructive: oklch(0.6 0.22 25);
+  --border: oklch(0.3 0.01 240);
+  --input: oklch(0.25 0.01 240);
+  --ring: oklch(0.5 0.15 240);
+  --chart-1: oklch(0.6 0.2 270);
+  --chart-2: oklch(0.65 0.18 180);
+  --chart-3: oklch(0.7 0.19 90);
+  --chart-4: oklch(0.6 0.24 310);
+  --chart-5: oklch(0.65 0.22 30);
+  --sidebar: oklch(0.18 0.01 240);
+  --sidebar-foreground: oklch(0.95 0.01 240);
+  --sidebar-primary: oklch(0.5 0.2 260);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.25 0.01 240);
+  --sidebar-accent-foreground: oklch(0.95 0.01 240);
+  --sidebar-border: oklch(0.3 0.01 240);
+  --sidebar-ring: oklch(0.5 0.15 240);
 }
 
@@ -118,6 +118,5 @@
   }
   body {
-    @apply text-foreground;
-    background-color: #F4FAFF;
+    @apply text-foreground bg-background;
   }
 }
Index: src/app/layout.tsx
===================================================================
--- src/app/layout.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/layout.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -6,4 +6,6 @@
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n';
+import { ThemeProvider } from '../components/theme-provider';
+import { ThemeToggle } from '../components/theme-toggle';
 
 config.autoAddCss = false;
@@ -25,9 +27,14 @@
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <I18nextProvider i18n={i18n}>
-          <div className="mx-auto max-w-6xl px-4">{children}</div>
-        </I18nextProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <I18nextProvider i18n={i18n}>
+            <div className="fixed top-4 right-4 z-50">
+              <ThemeToggle />
+            </div>
+            <div className="mx-auto max-w-6xl px-4">{children}</div>
+          </I18nextProvider>
+        </ThemeProvider>
       </body>
     </html>
Index: src/app/page.tsx
===================================================================
--- src/app/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -56,17 +56,17 @@
               {/* Sticky Notes */}
               <div className="w-full flex flex-col gap-4">
-                <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
-                  <div className="text-sm font-bold text-gray-900 mb-2">{t('login_student_title')}</div>
-                  <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
+                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
+                  <div className="text-sm font-bold text-card-foreground mb-2">{t('login_student_title')}</div>
+                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
                     {t('login_student_example')}
                   </div>
-                  <div className="mt-3 text-xs text-gray-700">
+                  <div className="mt-3 text-xs text-muted-foreground">
                     {t('login_note_slow')}
                   </div>
                 </div>
 
-                <div className="bg-yellow-100 border border-yellow-200 rounded-xl shadow-sm p-5">
-                  <div className="text-sm font-bold text-gray-900 mb-2">{t('login_professor_title')}</div>
-                  <div className="text-xs text-gray-800 whitespace-pre-wrap font-mono">
+                <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-xl shadow-sm p-5">
+                  <div className="text-sm font-bold text-card-foreground mb-2">{t('login_professor_title')}</div>
+                  <div className="text-xs text-card-foreground whitespace-pre-wrap font-mono">
                     {t('login_professor_example')}
                   </div>
@@ -77,10 +77,10 @@
               <div className="w-full max-w-md lg:max-w-none lg:w-[28rem] mx-auto">
                 {/* Login Card */}
-                <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+                <div className="bg-card rounded-2xl shadow-xl border border-border overflow-hidden">
                 {/* Header */}
                 <div className="bg-primary text-white px-8 py-6 text-center">
               <div className="mb-4">
-                <div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full">
-                  <FontAwesomeIcon icon={faUser} className="text-2xl text-primary" />
+                <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-full shadow-lg">
+                  <FontAwesomeIcon icon={faUser} className="text-2xl text-[#0272D1]" />
                 </div>
               </div>
@@ -100,10 +100,10 @@
                 {/* Email Field */}
                 <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                  <label htmlFor="email" className="block text-sm font-medium text-muted-foreground mb-2">
                     {t('login_email_label')}
                   </label>
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-gray-400" />
+                      <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
                     </div>
                     <input
@@ -114,5 +114,5 @@
                       value={formData.email}
                       onChange={handleInputChange}
-                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
+                      className="w-full pl-10 pr-4 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                       placeholder={t('login_email_placeholder')}
                     />
@@ -122,10 +122,10 @@
                 {/* Password Field */}
                 <div>
-                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                  <label htmlFor="password" className="block text-sm font-medium text-muted-foreground mb-2">
                     {t('login_password_label')}
                   </label>
                   <div className="relative">
                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                      <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-gray-400" />
+                      <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-muted-foreground" />
                     </div>
                     <input
@@ -136,5 +136,5 @@
                       value={formData.password}
                       onChange={handleInputChange}
-                      className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
+                      className="w-full pl-10 pr-12 py-3 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                       placeholder={t('login_password_placeholder')}
                     />
@@ -142,5 +142,5 @@
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors"
                     >
                       <FontAwesomeIcon 
@@ -159,7 +159,7 @@
                       name="remember"
                       type="checkbox"
-                      className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
+                      className="h-4 w-4 text-primary focus:ring-primary border-input rounded"
                     />
-                    <label htmlFor="remember" className="ml-2 block text-sm text-gray-700">
+                    <label htmlFor="remember" className="ml-2 block text-sm text-muted-foreground">
                       {t('login_remember_me')}
                     </label>
@@ -174,5 +174,5 @@
 
                 {errorMessage && (
-                  <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                     {t(errorMessage) || errorMessage}
                   </div>
@@ -192,6 +192,6 @@
 
             {/* Footer */}
-            <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
-              <p className="text-center text-sm text-gray-600">
+            <div className="bg-accent px-8 py-4 border-t border-border">
+              <p className="text-center text-sm text-muted-foreground">
                 {t('login_no_account')}{' '}
                 <button className="text-primary hover:text-blue-700 font-medium transition-colors">
@@ -204,7 +204,7 @@
                 {/* Additional Info */}
                 <div className="mt-6 text-center">
-                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-white bg-opacity-80 rounded-lg shadow-sm">
+                  <div className="inline-flex items-center gap-2 px-4 py-2 bg-card bg-opacity-80 rounded-lg shadow-sm">
                     <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
-                    <span className="text-sm text-gray-600">
+                    <span className="text-sm text-muted-foreground">
                       {t('login_footer')}
                     </span>
Index: src/app/professor/profile/page.tsx
===================================================================
--- src/app/professor/profile/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/professor/profile/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -98,10 +98,10 @@
   const { t } = useTranslation();
   return (
-    <div className="flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0">
-      <div className="flex items-center gap-2 text-gray-600 font-medium">
+    <div className="flex justify-between items-center py-3 border-b border-border last:border-b-0">
+      <div className="flex items-center gap-2 text-muted-foreground font-medium">
         {icon && <FontAwesomeIcon icon={icon} className="w-4 h-4" />}
         <span>{t(label)}:</span>
       </div>
-      <div className="text-gray-900 font-semibold text-right max-w-xs break-words">
+      <div className="text-card-foreground font-semibold text-right max-w-xs break-words">
         {value || t('n_a')}
       </div>
@@ -119,5 +119,5 @@
   const { t } = useTranslation();
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+    <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
       <div className="bg-primary text-white px-6 py-4">
         <div className="flex items-center gap-3">
@@ -185,5 +185,5 @@
     return (
       <div className="min-h-screen pb-8">
-        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">{t('loading')}</div>
+        <div className="bg-card rounded-xl shadow-sm border border-border p-6">{t('loading')}</div>
       </div>
     );
@@ -208,6 +208,6 @@
         <div className="flex items-center gap-6">
           <div className="relative">
-            <div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center border-2 border-white border-opacity-30">
-              <FontAwesomeIcon icon={faUser} className="text-3xl text-primary" />
+            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-white shadow-lg">
+              <FontAwesomeIcon icon={faUser} className="text-3xl text-[#0272D1]" />
             </div>
             <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
Index: src/app/professor/students/page.tsx
===================================================================
--- src/app/professor/students/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/professor/students/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -129,10 +129,10 @@
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+    <div className="bg-card rounded-xl shadow-sm border border-border p-6">
       <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
 
         <div>
-          <h1 className="text-2xl font-semibold text-gray-900">{t('prof_students_title')}</h1>
-          <p className="text-gray-700 mt-1">
+          <h1 className="text-2xl font-semibold text-card-foreground">{t('prof_students_title')}</h1>
+          <p className="text-muted-foreground mt-1">
             {t('prof_students_data_note')} <span className="font-mono">/api/prof/students</span> (demo store).
           </p>
@@ -141,7 +141,7 @@
         <div className="flex flex-col sm:flex-row gap-3">
           <div className="flex flex-col">
-            <label className="text-sm text-gray-700">{t('filter_by_subject')}</label>
+            <label className="text-sm text-muted-foreground">{t('filter_by_subject')}</label>
             <select
-              className="border border-gray-300 rounded-lg px-3 py-2"
+              className="border border-border rounded-lg px-3 py-2"
               value={subjectFilter}
               onChange={(e) => setSubjectFilter(e.target.value)}
@@ -159,7 +159,7 @@
 
           <div className="flex flex-col">
-            <label className="text-sm text-gray-700">{t('find_student_by_id')}</label>
+            <label className="text-sm text-muted-foreground">{t('find_student_by_id')}</label>
             <input
-              className="border border-gray-300 rounded-lg px-3 py-2"
+              className="border border-border rounded-lg px-3 py-2"
               placeholder={t('student_id_placeholder')}
               value={studentIdQuery}
@@ -177,12 +177,12 @@
 
       <div className="mt-6 overflow-x-auto">
-        <table className="min-w-full border border-gray-200 rounded-lg overflow-hidden">
-          <thead className="bg-gray-50">
+        <table className="min-w-full border border-border rounded-lg overflow-hidden">
+          <thead className="bg-accent">
             <tr>
-              <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('student')}</th>
-              <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('id')}</th>
-              <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('subject')}</th>
-              <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('grade')}</th>
-              <th className="text-left text-sm font-semibold text-gray-700 px-4 py-3 border-b">{t('actions')}</th>
+              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('student')}</th>
+              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('id')}</th>
+              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('subject')}</th>
+              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('grade')}</th>
+              <th className="text-left text-sm font-semibold text-muted-foreground px-4 py-3 border-b">{t('actions')}</th>
             </tr>
           </thead>
@@ -190,5 +190,5 @@
             {loading ? (
               <tr>
-                <td className="px-4 py-4 text-gray-700" colSpan={5}>
+                <td className="px-4 py-4 text-muted-foreground" colSpan={5}>
                   {t('loading')}
                 </td>
@@ -196,5 +196,5 @@
             ) : filteredRows.length === 0 ? (
               <tr>
-                <td className="px-4 py-4 text-gray-700" colSpan={5}>
+                <td className="px-4 py-4 text-muted-foreground" colSpan={5}>
                   {t('no_students_found')}
                 </td>
@@ -207,12 +207,12 @@
 
                 return (
-                  <tr key={key} className="hover:bg-gray-50">
-                    <td className="px-4 py-3 border-b text-gray-900">{r.studentName}</td>
-                    <td className="px-4 py-3 border-b text-gray-900">{r.studentIdStr}</td>
-                    <td className="px-4 py-3 border-b text-gray-900">{r.subjectName}</td>
+                  <tr key={key} className="hover:bg-accent">
+                    <td className="px-4 py-3 border-b text-card-foreground">{r.studentName}</td>
+                    <td className="px-4 py-3 border-b text-card-foreground">{r.studentIdStr}</td>
+                    <td className="px-4 py-3 border-b text-card-foreground">{r.subjectName}</td>
                     <td className="px-4 py-3 border-b">
                       <div className="flex items-center gap-3">
                         <select
-                          className="border border-gray-300 rounded-lg px-3 py-2"
+                          className="border border-border rounded-lg px-3 py-2"
                           value={selected}
                           onChange={(e) =>
@@ -229,5 +229,5 @@
                           ))}
                         </select>
-                        <span className="text-sm text-gray-600">
+                        <span className="text-sm text-muted-foreground">
                           {t('current')}: {r.grade > 0 ? r.grade : t('none')}
                         </span>
Index: src/app/students/applications/page.tsx
===================================================================
--- src/app/students/applications/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/applications/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -23,5 +23,5 @@
 
 const TableCell = ({ children, className = "" }: TableCellProps) => (
-  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
     {children}
   </td>
@@ -78,6 +78,6 @@
       <div className="bg-primary text-white rounded-xl p-8 mb-8">
         <div className="flex items-center gap-4">
-          <div className="bg-white bg-opacity-20 rounded-full p-4">
-            <FontAwesomeIcon icon={faPenToSquare} className="text-3xl text-primary" />
+          <div className="bg-white rounded-full p-4">
+            <FontAwesomeIcon icon={faPenToSquare} className="text-3xl text-[#0272D1]" />
           </div>
           <div>
@@ -91,7 +91,7 @@
 
       {/* Session Selection */}
-      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
+      <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
         <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+          <h2 className="text-lg font-semibold text-card-foreground flex items-center gap-2">
             <FontAwesomeIcon icon={faCalendarAlt} className="text-primary" />
             {t('select_exam_session', 'Избери испитна сесија:')}
@@ -101,5 +101,5 @@
             <button
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className="bg-white border border-gray-300 rounded-lg px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary min-w-80"
+              className="bg-card border border-border rounded-lg px-4 py-2 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary min-w-80"
             >
               <div className="flex items-center justify-between">
@@ -109,5 +109,5 @@
                 <FontAwesomeIcon
                   icon={faChevronDown}
-                  className={`w-4 h-4 text-gray-400 transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
+                  className={`w-4 h-4 text-muted-foreground transition-transform ml-4 ${isDropdownOpen ? 'rotate-180' : ''}`}
                 />
               </div>
@@ -115,5 +115,5 @@
 
             {isDropdownOpen && (
-              <div className="absolute z-10 right-0 mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-lg">
+              <div className="absolute z-10 right-0 mt-1 w-80 bg-card border border-border rounded-lg shadow-lg">
                 {applicationsData.examSessions.map((session) => (
                   <button
@@ -123,8 +123,8 @@
                       setIsDropdownOpen(false);
                     }}
-                    className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
+                    className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent first:rounded-t-lg last:rounded-b-lg"
                   >
-                    <div className="font-medium text-gray-900">{t(session.id, session.name)}</div>
-                    <div className="text-xs text-gray-500">{session.year} - {t(session.semester, session.semester)} - {t(session.session, session.session)}</div>
+                    <div className="font-medium text-card-foreground">{t(session.id, session.name)}</div>
+                    <div className="text-xs text-muted-foreground">{session.year} - {t(session.semester, session.semester)} - {t(session.session, session.session)}</div>
                   </button>
                 ))}
@@ -136,5 +136,5 @@
 
       {/* Applications Section */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
         <div className="bg-primary text-white px-6 py-4">
           <h2 className="text-xl font-bold">{t('registered_exams', 'Пријавени испити')}</h2>
@@ -143,21 +143,21 @@
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-accent">
               <tr>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('serial_number', 'Сериски број')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code', 'Код')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject', 'Предмет')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed', 'Завршена')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('fee', 'Таксени')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('instructor', 'Наставник')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('decade', 'Декада')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('serial_number', 'Сериски број')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('code', 'Код')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('subject', 'Предмет')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('completed', 'Завршена')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('fee', 'Таксени')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date', 'Датум')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('instructor', 'Наставник')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('decade', 'Декада')}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {applications.map((application) => (
-                <tr key={application.id} className="hover:bg-gray-50 transition-colors">
-                  <TableCell className="font-medium text-gray-900">{application.id}</TableCell>
+                <tr key={application.id} className="hover:bg-accent transition-colors">
+                  <TableCell className="font-medium text-card-foreground">{application.id}</TableCell>
                   <TableCell>
                     <span className="font-mono text-sm text-primary font-medium hover:underline cursor-pointer">
@@ -166,5 +166,5 @@
                   </TableCell>
                   <TableCell className="font-mono text-sm font-medium">{application.code}</TableCell>
-                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                  <TableCell className="font-medium text-card-foreground max-w-xs">
                     <div className="flex items-center gap-2">
                       <FontAwesomeIcon icon={faFileText} className="w-4 h-4 text-primary" />
@@ -178,9 +178,9 @@
                     <FeeBadge fee={application.fee} />
                   </TableCell>
-                  <TableCell className="text-gray-600 font-medium">{application.date}</TableCell>
+                  <TableCell className="text-muted-foreground font-medium">{application.date}</TableCell>
                   <TableCell>
                     <div className="flex items-center gap-2">
-                      <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-gray-400" />
-                      <span className="font-medium text-gray-900">{t(application.instructor, application.instructor)}</span>
+                      <FontAwesomeIcon icon={faUser} className="w-4 h-4 text-muted-foreground" />
+                      <span className="font-medium text-card-foreground">{t(application.instructor, application.instructor)}</span>
                     </div>
                   </TableCell>
@@ -208,5 +208,5 @@
       {/* Statistics Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-blue-100 text-blue-600 rounded-full p-3">
@@ -214,5 +214,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('registered_exams', 'Пријавени испити')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('registered_exams', 'Пријавени испити')}</h3>
               <p className="text-2xl font-bold text-blue-600">
                 {applications.length}
@@ -222,5 +222,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-green-100 text-green-600 rounded-full p-3">
@@ -228,5 +228,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('completed', 'Завршени')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('completed', 'Завршени')}</h3>
               <p className="text-2xl font-bold text-green-600">
                 {applications.filter(app => app.completed === t('yes', 'Да')).length}
@@ -236,5 +236,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
@@ -242,5 +242,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('total_fee', 'Вкупна такса')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('total_fee', 'Вкупна такса')}</h3>
               <p className="text-2xl font-bold text-yellow-600">
                 {applications.reduce((sum, app) => sum + parseFloat(app.fee.replace(',', '.')), 0).toFixed(2)}
Index: src/app/students/documents/page.tsx
===================================================================
--- src/app/students/documents/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/documents/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -23,5 +23,5 @@
 
 const TableCell = ({ children, className = "" }: TableCellProps) => (
-  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
     {children}
   </td>
@@ -38,5 +38,5 @@
   }
   return (
-    <span className="inline-flex items-center justify-center w-8 h-8 bg-gray-100 text-gray-600 rounded-full">
+    <span className="inline-flex items-center justify-center w-8 h-8 bg-accent text-muted-foreground rounded-full">
       <FontAwesomeIcon icon={faFileText} className="w-4 h-4" />
     </span>
@@ -73,6 +73,6 @@
       <div className="bg-primary text-white rounded-xl p-8 mb-8">
         <div className="flex items-center gap-4">
-          <div className="bg-white bg-opacity-20 rounded-full p-4">
-            <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-primary" />
+          <div className="bg-white rounded-full p-4">
+            <FontAwesomeIcon icon={faFilePdf} className="text-3xl text-[#0272D1]" />
           </div>
           <div>
@@ -86,6 +86,6 @@
 
       {/* Document Request Form */}
-      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 mb-8">
-        <h2 className="text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2">
+      <div className="bg-card rounded-xl p-6 shadow-sm border border-border mb-8">
+        <h2 className="text-lg font-semibold text-card-foreground mb-6 flex items-center gap-2">
           <FontAwesomeIcon icon={faFileText} className="text-primary" />
           {t('new_document_request', 'Ново барање за документ')}
@@ -95,5 +95,5 @@
           {/* Document Type Selection */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-muted-foreground mb-2">
               {t('select_document', 'Избери документ')}:
             </label>
@@ -101,13 +101,13 @@
               <button
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
+                className="w-full bg-card border border-border rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
               >
                 <div className="flex items-center justify-between">
-                  <span className="text-sm text-gray-900 truncate">
+                  <span className="text-sm text-card-foreground truncate">
                     {selectedDocument ? t(selectedDocument.id) : t('select_document', 'Избери документ')}
                   </span>
                   <FontAwesomeIcon 
                     icon={faChevronDown} 
-                    className={`w-4 h-4 text-gray-400 transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
+                    className={`w-4 h-4 text-muted-foreground transition-transform ml-2 flex-shrink-0 ${isDropdownOpen ? 'rotate-180' : ''}`}
                   />
                 </div>
@@ -115,5 +115,5 @@
               
               {isDropdownOpen && (
-                <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-80 overflow-y-auto">
+                <div className="absolute z-10 w-full mt-1 bg-card border border-border rounded-lg shadow-lg max-h-80 overflow-y-auto">
                   {documentsData.documentTypes.map((docType) => (
                     <button
@@ -123,7 +123,7 @@
                         setIsDropdownOpen(false);
                       }}
-                      className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 border-b border-gray-100 last:border-b-0"
+                      className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent border-b border-border last:border-b-0"
                     >
-                      <div className="font-medium text-gray-900">{t(docType.id)}</div>
+                      <div className="font-medium text-card-foreground">{t(docType.id)}</div>
                       {docType.price > 0 && (
                         <div className="text-xs text-blue-600 mt-1">{t('price', 'Цена')}: {docType.price} мкд</div>
@@ -138,5 +138,5 @@
           {/* Comment Section */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-muted-foreground mb-2">
               {t('comment', 'Коментар')}:
             </label>
@@ -145,5 +145,5 @@
               onChange={(e) => setComment(e.target.value)}
               rows={4}
-              className="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
+              className="w-full border border-border rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary resize-none"
               placeholder={t('add_comment', 'Додај коментар')}
             />
@@ -163,5 +163,5 @@
 
       {/* Documents Table */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
         <div className="bg-primary text-white px-6 py-4">
           <h2 className="text-xl font-bold">{t('my_documents', 'Мои документи')}</h2>
@@ -170,25 +170,25 @@
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-accent">
               <tr>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('archive', 'Архива')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date', 'Датум')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('request', 'Барање')}</th>
-                <th className="px-4 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">{t('price', 'Цена')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid', 'Платено')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('document', 'Документ')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
-                <th className="px-4 py-4 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status', 'Статус')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('comment', 'Коментар')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('archive', 'Архива')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date', 'Датум')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('request', 'Барање')}</th>
+                <th className="px-4 py-4 text-right text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('price', 'Цена')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('paid', 'Платено')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('document', 'Документ')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('pay_online', 'Плати онлајн')}</th>
+                <th className="px-4 py-4 text-center text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status', 'Статус')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('comment', 'Коментар')}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {currentDocuments.map((document) => (
-                <tr key={document.id} className="hover:bg-gray-50 transition-colors">
-                  <TableCell className="font-medium text-gray-900">{document.id}</TableCell>
+                <tr key={document.id} className="hover:bg-accent transition-colors">
+                  <TableCell className="font-medium text-card-foreground">{document.id}</TableCell>
                   <TableCell className="font-mono text-sm text-primary font-medium">{document.archive}</TableCell>
-                  <TableCell className="text-gray-600">{document.date}</TableCell>
-                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                  <TableCell className="text-muted-foreground">{document.date}</TableCell>
+                  <TableCell className="font-medium text-card-foreground max-w-xs">
                     {t(document.request)}
                   </TableCell>
@@ -210,5 +210,5 @@
                       <FontAwesomeIcon icon={faCheckCircle} className="w-5 h-5 text-green-600" />
                     ) : (
-                      <span className="text-gray-400">{t('none', '—')}</span>
+                      <span className="text-muted-foreground">{t('none', '—')}</span>
                     )}
                   </TableCell>
@@ -218,5 +218,5 @@
                   <TableCell>
                     {document.comment || (
-                      <span className="text-gray-400">{t('none', '—')}</span>
+                      <span className="text-muted-foreground">{t('none', '—')}</span>
                     )}
                   </TableCell>
@@ -228,6 +228,6 @@
 
         {/* Pagination */}
-        <div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
-          <div className="flex items-center gap-4 text-sm text-gray-700">
+        <div className="bg-accent px-6 py-4 flex items-center justify-between border-t border-border">
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
             <div className="flex items-center gap-2">
               <span>{t('show_rows', 'Прикажи редови')}:</span>
@@ -235,5 +235,5 @@
                 value={recordsPerPage}
                 onChange={(e) => setRecordsPerPage(Number(e.target.value))}
-                className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+                className="border border-border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
               >
                 <option value={15}>15</option>
@@ -249,5 +249,5 @@
                 value={currentPage}
                 onChange={(e) => setCurrentPage(Number(e.target.value))}
-                className="w-12 border border-gray-300 rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
+                className="w-12 border border-border rounded px-2 py-1 text-sm text-center focus:outline-none focus:ring-1 focus:ring-primary"
               /> {t('of', 'од')} {totalPages}
             </div>
@@ -258,5 +258,5 @@
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <FontAwesomeIcon icon={faAngleDoubleLeft} className="w-4 h-4" />
@@ -265,5 +265,5 @@
               onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
               disabled={currentPage === 1}
-              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
@@ -275,5 +275,5 @@
               onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
               disabled={currentPage === totalPages}
-              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <FontAwesomeIcon icon={faChevronRight} className="w-4 h-4" />
@@ -282,14 +282,14 @@
               onClick={() => setCurrentPage(totalPages)}
               disabled={currentPage === totalPages}
-              className="p-2 text-gray-500 hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
+              className="p-2 text-muted-foreground hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <FontAwesomeIcon icon={faAngleDoubleRight} className="w-4 h-4" />
             </button>
-            <span className="ml-4 text-sm text-gray-700">
+            <span className="ml-4 text-sm text-muted-foreground">
               {t('last', 'Последна')}
             </span>
           </div>
 
-          <div className="text-sm text-gray-700">
+          <div className="text-sm text-muted-foreground">
             {t('total', 'Вкупно')}: {documents.length}
           </div>
@@ -309,5 +309,5 @@
       {/* Statistics Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-blue-100 text-blue-600 rounded-full p-3">
@@ -315,5 +315,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('total_documents', 'Вкупно документи')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('total_documents', 'Вкупно документи')}</h3>
               <p className="text-2xl font-bold text-blue-600">
                 {documents.length}
@@ -323,5 +323,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-green-100 text-green-600 rounded-full p-3">
@@ -329,5 +329,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('approved', 'Одобрени')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('approved', 'Одобрени')}</h3>
               <p className="text-2xl font-bold text-green-600">
                 {documents.filter(doc => doc.status === "approved").length}
@@ -337,5 +337,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-yellow-100 text-yellow-600 rounded-full p-3">
@@ -343,5 +343,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('total_price', 'Вкупна цена')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('total_price', 'Вкупна цена')}</h3>
               <p className="text-2xl font-bold text-yellow-600">
                 {documents.reduce((sum, doc) => sum + doc.price, 0).toFixed(2)} {t('mkd', 'мкд')}
Index: src/app/students/layout.tsx
===================================================================
--- src/app/students/layout.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/layout.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -32,13 +32,9 @@
 }>) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <div className="mx-auto max-w-6xl px-4">
-          <Header />
-          <Navbar />
-          {children}
-        </div>
-      </body>
-    </html>
+    <div className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+      <Header />
+      <Navbar />
+      {children}
+    </div>
   );
 }
Index: src/app/students/profile/page.tsx
===================================================================
--- src/app/students/profile/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/profile/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -98,10 +98,10 @@
   const { t } = useTranslation();
   return (
-    <div className="flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0">
-      <div className="flex items-center gap-2 text-gray-600 font-medium">
+    <div className="flex justify-between items-center py-3 border-b border-border last:border-b-0">
+      <div className="flex items-center gap-2 text-muted-foreground font-medium">
         {icon && <FontAwesomeIcon icon={icon} className="w-4 h-4" />}
         <span>{t(label)}:</span>
       </div>
-      <div className="text-gray-900 font-semibold text-right max-w-xs break-words">
+      <div className="text-card-foreground font-semibold text-right max-w-xs break-words">
         {value || t('n_a')}
       </div>
@@ -119,5 +119,5 @@
   const { t } = useTranslation();
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+    <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
       <div className="bg-primary text-white px-6 py-4">
         <div className="flex items-center gap-3">
@@ -187,5 +187,5 @@
     return (
       <div className="min-h-screen pb-8">
-        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
           {t('loading')}
         </div>
@@ -212,6 +212,6 @@
         <div className="flex items-center gap-6">
           <div className="relative">
-            <div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center border-2 border-white border-opacity-30">
-              <FontAwesomeIcon icon={faUser} className="text-3xl text-primary" />
+            <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-white shadow-lg">
+              <FontAwesomeIcon icon={faUser} className="text-3xl text-[#0272D1]" />
             </div>
             <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
Index: src/app/students/semesters/page.tsx
===================================================================
--- src/app/students/semesters/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/semesters/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -49,5 +49,5 @@
 
 const TableCell = ({ children, className = "" }: TableCellProps) => (
-  <td className={`px-4 py-3 text-sm border-b border-gray-100 ${className}`}>
+  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
     {children}
   </td>
@@ -66,5 +66,5 @@
   }
   return (
-    <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+    <span className={`${baseClasses} bg-accent text-gray-800`}>
       {t(status) || status}
     </span>
@@ -87,5 +87,5 @@
     );
   }
-  return <span className="text-gray-400">—</span>;
+  return <span className="text-muted-foreground">—</span>;
 };
 
@@ -163,5 +163,5 @@
     return (
       <div className="min-h-screen pb-8">
-        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
           {t('loading')}
         </div>
@@ -185,6 +185,6 @@
       <div className="bg-primary text-white rounded-xl p-8 mb-8">
         <div className="flex items-center gap-4">
-          <div className="bg-white bg-opacity-20 rounded-full p-4">
-            <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-primary" />
+          <div className="bg-white rounded-full p-4">
+            <FontAwesomeIcon icon={faCalendarAlt} className="text-3xl text-[#0272D1]" />
           </div>
           <div>
@@ -198,5 +198,5 @@
 
       {/* Table Container */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
         <div className="bg-primary text-white px-6 py-4">
           <h2 className="text-xl font-bold">{t('semesters_list')}</h2>
@@ -205,32 +205,32 @@
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-accent">
               <tr>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('direction')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('quota')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('note')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('student_com')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('sum')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('paid')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('ukim')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('created_on')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('date_changed')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('credits')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('type')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('doc1')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('verified')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('taxes')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signatures')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('completed')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('semester')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('direction')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('quota')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('note')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('student_com')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('sum')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('paid')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('ukim')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('created_on')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('date_changed')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('credits')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('type')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('doc')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('doc1')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('verified')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('taxes')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('signatures')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('completed')}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {semesters.map((semester) => (
-                <tr key={semester.id} className="hover:bg-gray-50 transition-colors">
-                  <TableCell className="font-medium text-gray-900">{semester.id}</TableCell>
+                <tr key={semester.id} className="hover:bg-accent transition-colors">
+                  <TableCell className="font-medium text-card-foreground">{semester.id}</TableCell>
                   <TableCell className="font-medium text-primary">{semester.semester}</TableCell>
                   <TableCell>{semester.direction}</TableCell>
@@ -246,5 +246,5 @@
                       </span>
                     ) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
@@ -255,5 +255,5 @@
                       </span>
                     ) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
@@ -265,5 +265,5 @@
                       </span>
                     ) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
@@ -275,5 +275,5 @@
                       </span>
                     ) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
@@ -282,9 +282,9 @@
                       <span className="text-blue-600">{semester.ukim}</span>
                     ) : (
-                      <span className="text-gray-400">—</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-gray-600">{semester.createdOn}</TableCell>
-                  <TableCell className="text-gray-600">{semester.dateChanged}</TableCell>
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">{semester.createdOn}</TableCell>
+                  <TableCell className="text-muted-foreground">{semester.dateChanged}</TableCell>
                   <TableCell className="font-medium text-primary">{semester.credits}</TableCell>
                   <TableCell>
@@ -331,5 +331,5 @@
       {/* Summary Cards */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-green-100 text-green-600 rounded-full p-3">
@@ -337,5 +337,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('completed_semesters')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('completed_semesters')}</h3>
               <p className="text-2xl font-bold text-green-600">
                 {semesters.filter(s => s.completed !== "Не").length}
@@ -345,5 +345,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-blue-100 text-blue-600 rounded-full p-3">
@@ -351,5 +351,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('verified_semesters')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('verified_semesters')}</h3>
               <p className="text-2xl font-bold text-blue-600">
                 {semesters.filter(s => s.verified === "Да").length}
@@ -359,5 +359,5 @@
         </div>
 
-        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
           <div className="flex items-center gap-4">
             <div className="bg-primary text-white rounded-full p-3">
@@ -365,5 +365,5 @@
             </div>
             <div>
-              <h3 className="text-lg font-bold text-gray-900">{t('total_semesters')}</h3>
+              <h3 className="text-lg font-bold text-card-foreground">{t('total_semesters')}</h3>
               <p className="text-2xl font-bold text-primary">
                 {semesters.length}
Index: src/app/students/subjects/page.tsx
===================================================================
--- src/app/students/subjects/page.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/app/students/subjects/page.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -142,5 +142,5 @@
 
 const TableCell = ({ children, className = "" }: TableCellProps) => (
-  <td className={`px-4 py-3 text-sm border-b border-gray-200 ${className}`}>
+  <td className={`px-4 py-3 text-sm border-b border-border ${className}`}>
     {children}
   </td>
@@ -164,5 +164,5 @@
   }
   return (
-    <span className={`${baseClasses} bg-gray-100 text-gray-800`}>
+    <span className={`${baseClasses} bg-accent text-gray-800`}>
       {t(status) || status}
     </span>
@@ -275,5 +275,5 @@
     return (
       <div className="min-h-screen pb-8">
-        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div className="bg-card rounded-xl shadow-sm border border-border p-6">
           {t('loading')}
         </div>
@@ -305,6 +305,6 @@
       <div className="bg-primary text-white rounded-xl p-8 mb-8">
         <div className="flex items-center gap-4">
-          <div className="bg-white bg-opacity-20 rounded-full p-4">
-            <FontAwesomeIcon icon={faBook} className="text-3xl text-primary" />
+          <div className="bg-white rounded-full p-4">
+            <FontAwesomeIcon icon={faBook} className="text-3xl text-[#0272D1]" />
           </div>
           <div>
@@ -324,9 +324,9 @@
           
           {/* Status Card */}
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
-            <div className="text-sm text-gray-600 mb-2">
+          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
+            <div className="text-sm text-muted-foreground mb-2">
               {t('status')}: <span className="text-primary font-semibold">{t('enrolled_by_student')}</span>
             </div>
-            <div className="text-sm text-gray-600">
+            <div className="text-sm text-muted-foreground">
               {t('ticket_number')}: <span className="font-semibold">{currentSemester.ticketNumber}</span>
             </div>
@@ -334,11 +334,11 @@
 
           {/* Semester Selection */}
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
-            <div className="text-sm text-gray-600 mb-2">
+          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
+            <div className="text-sm text-muted-foreground mb-2">
               {t('debt_from_documents')}: <span className="font-semibold">{currentSemester.debt}</span>
             </div>
             
             <div className="relative mt-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="block text-sm font-medium text-muted-foreground mb-2">
                 {t('select_semester')}:
               </label>
@@ -346,5 +346,5 @@
                 <button
                   onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                  className="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
+                  className="w-full bg-card border border-border rounded-lg px-4 py-3 text-left focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
                 >
                   <div className="flex items-center justify-between">
@@ -354,5 +354,5 @@
                     <FontAwesomeIcon 
                       icon={faChevronDown} 
-                      className={`w-4 h-4 text-gray-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
+                      className={`w-4 h-4 text-muted-foreground transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`}
                     />
                   </div>
@@ -360,5 +360,5 @@
                 
                 {isDropdownOpen && (
-                  <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg">
+                  <div className="absolute z-10 w-full mt-1 bg-card border border-border rounded-lg shadow-lg">
                     {subjectsData.semesters.map((semester) => (
                       <button
@@ -368,8 +368,8 @@
                           setIsDropdownOpen(false);
                         }}
-                        className="w-full px-4 py-3 text-left text-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 first:rounded-t-lg last:rounded-b-lg"
+                        className="w-full px-4 py-3 text-left text-sm hover:bg-accent focus:outline-none focus:bg-accent first:rounded-t-lg last:rounded-b-lg"
                       >
-                        <div className="font-medium text-gray-900">{semester.name}</div>
-                        <div className="text-xs text-gray-500">{t('status')}: {semester.status}</div>
+                        <div className="font-medium text-card-foreground">{semester.name}</div>
+                        <div className="text-xs text-muted-foreground">{t('status')}: {semester.status}</div>
                       </button>
                     ))}
@@ -387,6 +387,6 @@
 
           {/* Enrolled Subjects */}
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
-            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
+          <div className="bg-card rounded-xl p-6 shadow-sm border border-border">
+            <h3 className="font-semibold text-card-foreground mb-3 flex items-center gap-2">
               <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
               {t('enrolled_subjects')}
@@ -400,5 +400,5 @@
         {/* Right Column - Financial Information */}
         <div className="lg:col-span-2">
-          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+          <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
             <div className="bg-primary text-white px-6 py-4">
               <h2 className="text-xl font-bold flex items-center gap-2">
@@ -413,14 +413,14 @@
                 {/* Left Financial Column */}
                 <div className="space-y-4">
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('sum')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('sum')}:</span>
                     <span className="font-semibold text-primary">{currentSemester.financialInfo.sum}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('paid')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('paid')}:</span>
                     <span className="font-semibold text-green-600">{currentSemester.financialInfo.paid}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('due')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('due')}:</span>
                     <span className="font-semibold text-red-600">{currentSemester.financialInfo.due}</span>
                   </div>
@@ -433,22 +433,22 @@
                 {/* Right Financial Column */}
                 <div className="space-y-4">
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('credits')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('credits')}:</span>
                     <span className="font-semibold text-primary">{currentSemester.financialInfo.credits}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('mksa')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('mksa')}:</span>
                     <span className="font-semibold">{currentSemester.financialInfo.MKSA}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('electronic_registration')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('electronic_registration')}:</span>
                     <span className="font-semibold">{currentSemester.financialInfo.electronicRegistration}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('eukim')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('eukim')}:</span>
                     <span className="font-semibold">{currentSemester.financialInfo.eUKIM}</span>
                   </div>
-                  <div className="flex justify-between items-center py-2 border-b border-gray-100">
-                    <span className="text-gray-600">{t('bank_provision')}:</span>
+                  <div className="flex justify-between items-center py-2 border-b border-border">
+                    <span className="text-muted-foreground">{t('bank_provision')}:</span>
                     <span className="font-semibold">{currentSemester.financialInfo.bankProvision}</span>
                   </div>
@@ -465,5 +465,5 @@
 
       {/* Subjects Table */}
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+      <div className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
         <div className="bg-primary text-white px-6 py-4">
           <h2 className="text-xl font-bold">{t('subjects_list')}</h2>
@@ -472,26 +472,26 @@
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-accent">
               <tr>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('code')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('hours')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('which_time')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('subject')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('semester')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('status')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('signature')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('group')}</th>
-                <th className="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{t('professor')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">#</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('code')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('hours')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('which_time')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('subject')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('semester')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('status')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('signature')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('group')}</th>
+                <th className="px-4 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('professor')}</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {currentSubjects.map((subject: Subject) => (
-                <tr key={subject.id} className="hover:bg-gray-50 transition-colors">
-                  <TableCell className="font-medium text-gray-900">{subject.id}</TableCell>
+                <tr key={subject.id} className="hover:bg-accent transition-colors">
+                  <TableCell className="font-medium text-card-foreground">{subject.id}</TableCell>
                   <TableCell className="font-mono text-sm text-primary font-medium">{subject.code}</TableCell>
                   <TableCell className="font-medium">{subject.hours}</TableCell>
                   <TableCell className="text-center font-medium">{subject.kojPat}</TableCell>
-                  <TableCell className="font-medium text-gray-900 max-w-xs">
+                  <TableCell className="font-medium text-card-foreground max-w-xs">
                     <div className="flex items-center gap-2">
                       <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary" />
@@ -505,15 +505,15 @@
                   <TableCell className="text-center">
                     {subject.signature ? t(subject.signature, subject.signature) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
                   <TableCell className="text-center">
                     {subject.group ? t(subject.group, subject.group) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
                   <TableCell>
                     {subject.professor ? t(subject.professor, subject.professor) : (
-                      <span className="text-gray-400">—</span>
+                      <span className="text-muted-foreground">—</span>
                     )}
                   </TableCell>
Index: src/components/LanguageSwitcher.tsx
===================================================================
--- src/components/LanguageSwitcher.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/LanguageSwitcher.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
+++ src/components/theme-provider.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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 ba520691331c5f3afac921ef0a143d05e24ce4a5)
+++ src/components/theme-toggle.tsx	(revision ba520691331c5f3afac921ef0a143d05e24ce4a5)
@@ -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>
+  );
+}
