diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index 0164bdf1..c3b235e2 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-[#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">
+  <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">
diff --git a/Frontend-Learner/components/layout/AppSidebar.vue b/Frontend-Learner/components/layout/AppSidebar.vue
index 594acc5c..e8c28dac 100644
--- a/Frontend-Learner/components/layout/AppSidebar.vue
+++ b/Frontend-Learner/components/layout/AppSidebar.vue
@@ -36,11 +36,11 @@ const handleNavigate = (path: string) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full bg-white dark:bg-[#1e293b] border-r border-slate-200 dark:border-slate-700">
+  <div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
     
 
     <!-- Navigation Items -->
-    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3 pt-6">
+    <q-list padding class="text-slate-600 dark:text-slate-400 flex-grow px-3 pt-6">
       <q-item 
         v-for="item in navItems" 
         :key="item.to" 
@@ -83,8 +83,8 @@ const handleNavigate = (path: string) => {
 
 /* Dark Mode Active State Enhancement */
 .dark .sidebar-item--active {
-  background: rgba(37, 99, 235, 0.15) !important;
-  color: #93c5fd !important;     /* blue-300 */
+  background: rgba(59, 130, 246, 0.12) !important;
+  color: #60a5fa !important;     /* blue-400 */
 }
 
 .dark .sidebar-item--active .q-icon {
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index 0813f0ac..d98d5d54 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -15,11 +15,11 @@ const toggleLeftDrawer = () => {
 </script>
 
 <template>
-  <q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#020617] !text-slate-900 dark:!text-slate-50 font-sans">
+  <q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50 font-sans">
     <!-- Header -->
     <q-header
       bordered
-      class="!bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-800"
+      class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-800"
     >
       <AppHeader @toggleSidebar="toggleLeftDrawer" />
     </q-header>
@@ -30,7 +30,7 @@ const toggleLeftDrawer = () => {
       show-if-above
       bordered
       :width="280"
-      class="!bg-white dark:!bg-[#0f172a] border-r border-slate-200 dark:border-slate-800"
+      class="bg-white dark:!bg-[#0f172a] border-r border-slate-200 dark:border-slate-800"
     >
       <AppSidebar />
     </q-drawer>