diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index 100765f6..5a4bf8c7 100644
--- a/Frontend-Learner/assets/css/main.css
+++ b/Frontend-Learner/assets/css/main.css
@@ -10,8 +10,8 @@
   --bg-body: #f8fafc;
   --bg-surface: #ffffff;
   --bg-elevated: #ffffff;
-  --text-main: #0f172a;      /* text-slate-900: More natural than pure black */
-  --text-secondary: #475569;   /* text-slate-600: Muted subtext */
+  --text-main: #000000;      /* Pure Black for absolute clarity in light mode */
+  --text-secondary: #1f2937;   /* text-slate-800: Strong contrast subtext */
   --primary: #3b82f6;        /* Primary Blue */
 
   /* Semantic mappings */
diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index 08b6673a..0164bdf1 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -50,7 +50,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
 </script>
 
 <template>
-  <div class="group relative flex flex-col bg-white dark:bg-[#1e293b] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
+  <div class="group relative flex flex-col !bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
     
     <!-- Thumbnail Section -->
     <div class="relative w-full aspect-video overflow-hidden">
@@ -117,7 +117,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
           v-if="showViewDetails && !completed && !progress"
           flat
           rounded
-          class="w-full font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60"
+          class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
           :label="$t('menu.viewDetails')"
           :to="`/course/${id}`"
         />
@@ -127,7 +127,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
           v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
           unelevated
           rounded
-          class="w-full font-bold bg-blue-600 text-white hover:bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
+          class="w-full font-bold !bg-blue-600 !text-white hover:!bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
           :label="(!progress || progress === 0) ? $t('course.startLearning') : $t('course.continueLearning')"
           :to="`/classroom/learning?course_id=${id}`"
         />
@@ -138,7 +138,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
               v-if="showStudyAgain"
               unelevated
               rounded
-              class="w-full font-bold bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30 border border-blue-100 dark:border-blue-800/50"
+              class="w-full font-bold !bg-blue-50 !text-blue-700 hover:!bg-blue-100 dark:!bg-blue-900/20 dark:!text-blue-400 dark:hover:!bg-blue-900/30 border border-blue-100 dark:border-blue-800/50"
               :label="$t('course.studyAgain')"
               :to="`/classroom/learning?course_id=${id}`"
             />
@@ -148,7 +148,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
               v-if="showCertificate"
               unelevated
               rounded
-              class="w-full font-bold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/20 dark:text-emerald-400 dark:hover:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800/50"
+              class="w-full font-bold !bg-emerald-50 !text-emerald-700 hover:!bg-emerald-100 dark:!bg-emerald-900/20 dark:!text-emerald-400 dark:hover:!bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800/50"
               :label="$t('course.downloadCertificate')"
               @click="emit('viewCertificate')"
             />