diff --git a/Frontend-Learner/components/classroom/CurriculumSidebar.vue b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
index 14d8d159..c9c2e11a 100644
--- a/Frontend-Learner/components/classroom/CurriculumSidebar.vue
+++ b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
@@ -59,18 +59,17 @@ const progressPercentage = computed(() => {
     >
       <div v-if="courseData" class="flex flex-col h-full overflow-hidden">
         <!-- Course Progress Header -->
-        <div class="p-5 border-b border-gray-200 dark:border-white/5 bg-white dark:bg-slate-900">
+        <div class="p-5 border-b border-gray-200 dark:border-white/10 bg-slate-50/50 dark:bg-slate-900/50">
           <div class="flex justify-between items-center mb-2">
             <span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress', 'ความคืบหน้า') }}</span>
             <span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span>
           </div>
-          <q-linear-progress 
-            :value="progressPercentage / 100" 
-            color="primary" 
-            track-color="blue-1"
-            class="rounded-full h-2" 
-            rounded
-          />
+          <div class="h-2 w-full bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden shadow-inner">
+            <div 
+              class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out shadow-[0_0_12px_rgba(37,99,235,0.3)]" 
+              :style="{ width: `${progressPercentage}%` }"
+            ></div>
+          </div>
         </div>
 
          <div class="flex-grow scroll">