feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.

Frontend-Learner/pages/browse/discovery.vue

@@ -112,7 +112,7 @@ const handleEnroll = async (id: number) => {
   } else {
     $q.notify({
         type: 'negative',
-        message: res.error || 'Failed to enroll',
+        message: res.error || t('enrollment.error'),
         position: 'top',
         timeout: 3000,
         actions: [{ icon: 'close', color: 'white' }]
@@ -127,6 +127,15 @@ watch(selectedCategoryIds, () => {
   loadCourses(1);
 }, { deep: true });
 
+const toggleCategory = (id: number) => {
+  const index = selectedCategoryIds.value.indexOf(id)
+  if (index === -1) {
+    selectedCategoryIds.value.push(id)
+  } else {
+    selectedCategoryIds.value.splice(index, 1)
+  }
+}
+
 onMounted(() => {
   loadCategories();
   loadCourses();
@@ -140,91 +149,101 @@ onMounted(() => {
     <div v-if="!showDetail">
 
       <!-- Top Header Area -->
-      <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-        <!-- Title -->
-        <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
-          <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
-          {{ $t('discovery.title') }}
-        </h1>
+      <div class="flex flex-col gap-6 mb-10">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <!-- Title -->
+          <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
+            <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
+            {{ $t('discovery.title') }}
+          </h1>
 
-        <!-- Right Side: Search & Sort -->
-        <div class="flex items-center gap-3 w-full md:w-auto">
-          <!-- Search Input -->
-          <q-input
-            v-model="searchQuery"
-            dense
-            outlined
-            rounded
-            :placeholder="$t('discovery.searchPlaceholder')"
-            class="w-full md:w-72 search-input"
-            bg-color="transparent"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" class="text-slate-400" />
-            </template>
-          </q-input>
+          <!-- Right Side: Search -->
+          <div class="flex items-center gap-3 w-full md:w-auto">
+            <q-input
+              v-model="searchQuery"
+              dense
+              outlined
+              rounded
+              :placeholder="$t('discovery.searchPlaceholder')"
+              class="w-full md:w-72 search-input shadow-sm"
+              bg-color="transparent"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" class="text-slate-400" />
+              </template>
+            </q-input>
+          </div>
+        </div>
+
+        <!-- Unified Filter Section: Categories -->
+        <div class="flex flex-wrap items-center gap-2">
+           <q-btn
+             flat
+             rounded
+             dense
+             class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
+             :class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
+             @click="selectedCategoryIds = []"
+             :label="$t('discovery.showAll')"
+           />
+           <q-btn
+             v-for="cat in categories"
+             :key="cat.id"
+             flat
+             rounded
+             dense
+             class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
+             :class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
+             @click="toggleCategory(cat.id)"
+             :label="getLocalizedText(cat.name)"
+           />
         </div>
       </div>
 
-      <!-- Main Layout: Sidebar + Grid -->
-      <div class="flex flex-col lg:flex-row gap-8">
-          
-          <!-- LEFT SIDEBAR: Category Filter -->
-          <div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24 z-10">
-             <ClientOnly>
-               <CategorySidebar
-                  :categories="categories"
-                  v-model="selectedCategoryIds"
-               />
-             </ClientOnly>
-          </div>
-
-          <!-- RIGHT CONTENT: Course Grid -->
-          <div class="flex-1 w-full">
-              <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
-                  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                      <CourseCard
-                        v-for="course in filteredCourses"
-                        :key="course.id"
-                        v-bind="{ ...course, image: course.thumbnail_url }"
-                        show-view-details
-                        @view-details="selectCourse(course.id)"
-                      />
-                  </div>
-
-                  <!-- Pagination Controls -->
-                  <div v-if="totalPages > 1" class="flex justify-center pb-10">
-                    <q-pagination
-                      v-model="currentPage"
-                      :max="totalPages"
-                      :max-pages="6"
-                      boundary-numbers
-                      direction-links
-                      color="primary"
-                      flat
-                      active-design="unelevated"
-                      active-color="primary"
-                      @update:model-value="loadCourses"
-                    />
-                  </div>
+      <!-- Main Layout: Grid Only -->
+      <div class="w-full">
+          <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+                  <CourseCard
+                    v-for="course in filteredCourses"
+                    :key="course.id"
+                    v-bind="{ ...course, image: course.thumbnail_url }"
+                    show-view-details
+                    @view-details="selectCourse(course.id)"
+                  />
               </div>
 
-              <!-- Empty State -->
-              <div
-                v-else
-                class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700"
-              >
-                <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
-                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
-                <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
-                  {{ $t('discovery.emptyDesc') }}
-                </p>
-                <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 dark:hover:text-blue-400 transition-colors" @click="searchQuery = ''; selectedCategoryIds = []">
-                  {{ $t('discovery.showAll') }}
-                </button>
+              <!-- Pagination Controls -->
+              <div v-if="totalPages > 1" class="flex justify-center pb-10">
+                <q-pagination
+                  v-model="currentPage"
+                  :max="totalPages"
+                  :max-pages="6"
+                  boundary-numbers
+                  direction-links
+                  color="primary"
+                  flat
+                  active-design="unelevated"
+                  active-color="primary"
+                  @update:model-value="loadCourses"
+                />
               </div>
           </div>
 
+          <!-- Empty State -->
+          <div
+            v-else
+            class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 shadow-sm"
+          >
+            <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
+            <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
+            <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
+              {{ $t('discovery.emptyDesc') }}
+            </p>
+            <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 dark:hover:text-blue-400 transition-colors" @click="searchQuery = ''; selectedCategoryIds = []">
+              {{ $t('discovery.showAll') }}
+            </button>
+          </div>
       </div>
 
     </div>

Frontend-Learner/pages/classroom/learning.vue

@@ -219,14 +219,14 @@ const loadLesson = async (lessonId: number) => {
             msg = accessRes.data.lock_reason
         } else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
              const quizTitle = getLocalizedText(accessRes.data.required_quiz_pass.title)
-             msg = `กรุณาทำแบบทดสอบ "${quizTitle}" ให้ผ่านก่อน`
+             msg = t('classroom.quizRequired', { title: quizTitle })
         } else if (accessRes.data.required_lessons && accessRes.data.required_lessons.length > 0) {
              const reqLesson = accessRes.data.required_lessons.find((l: any) => !l.is_completed)
              if (reqLesson) {
-                msg = `กรุณาเรียนบทเรียน "${getLocalizedText(reqLesson.title)}" ให้จบก่อน`
+                msg = t('classroom.lessonRequired', { title: getLocalizedText(reqLesson.title) })
              }
         } else if (accessRes.data.is_enrolled === false) {
-             msg = 'คุณยังไม่ได้ลงทะเบียนในคอร์สนี้'
+             msg = t('classroom.notEnrolled')
         }
 
         alert(msg)
@@ -516,27 +516,31 @@ onBeforeUnmount(() => {
     <!-- Header -->
     <q-header bordered class="bg-[var(--bg-surface)] border-b border-gray-200 dark:border-white/5 text-[var(--text-main)] h-14">
       <q-toolbar>
-        <q-btn flat round dense icon="menu" class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" @click="toggleSidebar" />
-        
-        <!-- Back Button & Branding -->
-        <div class="flex items-center gap-2 mr-6">
-          <q-btn 
-            flat 
-            round 
-            dense 
-            icon="arrow_back" 
-            class="mr-2 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800/50 hover:bg-blue-100 dark:hover:bg-blue-800/50 transition-all"
-            @click="handleExit('/dashboard/my-courses')"
-          >
-            <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
-          </q-btn>
+        <!-- Exit/Back Button -->
+        <q-btn 
+          flat 
+          rounded
+          no-caps
+          color="primary"
+          class="mr-4 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white font-bold hover:bg-slate-200"
+          @click="handleExit('/dashboard/my-courses')"
+        >
+          <q-icon name="close" size="18px" class="mr-1.5" />
+          <span class="hidden sm:inline">{{ $t('common.close') }}</span>
+          <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
+        </q-btn>
 
-          <div class="hidden sm:flex items-center gap-2 cursor-pointer group" @click="handleExit('/dashboard')">
-            <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
-              E
-            </div>
-          </div>
-        </div>
+        <!-- Sidebar Toggle (Clearer for Course Content) -->
+        <q-btn 
+          flat 
+          rounded 
+          no-caps 
+          class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors font-bold px-3" 
+          @click="toggleSidebar"
+        >
+           <q-icon name="format_list_bulleted" size="18px" class="mr-1.5" />
+           <span class="hidden md:inline">{{ $t('classroom.curriculum', 'เนื้อหาหลักสูตร') }}</span>
+        </q-btn>
         
         <q-toolbar-title class="text-base font-bold text-left truncate text-slate-900 dark:text-white">
            {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
@@ -581,6 +585,7 @@ onBeforeUnmount(() => {
                v-if="currentLesson && videoSrc && !isLessonLoading"
                ref="videoPlayerComp"
                :src="videoSrc"
+               :poster="courseData?.course?.thumbnail_url"
                :initialSeekTime="initialSeekTime"
                @timeupdate="handleVideoTimeUpdate"
                @ended="onVideoEnded"
@@ -588,11 +593,21 @@ onBeforeUnmount(() => {
             />
             
             <!-- Skeleton Loader for Video/Content -->
-            <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative">
-                <div class="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 opacity-50"></div>
+            <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative shadow-xl">
+                <!-- Course Thumbnail as a background during loading -->
+                <img 
+                    v-if="courseData?.course?.thumbnail_url"
+                    :src="courseData.course.thumbnail_url" 
+                    class="absolute inset-0 w-full h-full object-cover opacity-20 blur-md"
+                />
+                <div class="absolute inset-0 bg-gradient-to-br from-slate-200/50 to-slate-300/50 dark:from-slate-900/80 dark:to-slate-800/80"></div>
+                
                 <div class="z-10 flex flex-col items-center">
-                    <q-spinner size="4rem" color="primary" :thickness="4" />
-                    <p class="mt-4 text-slate-500 dark:text-slate-400 font-bold animate-bounce">{{ $t('common.loading') }}...</p>
+                    <div class="relative">
+                        <q-spinner size="4rem" color="primary" :thickness="4" />
+                        <q-icon name="play_circle" size="2rem" color="primary" class="absolute inset-0 m-auto opacity-50" />
+                    </div>
+                    <p class="mt-4 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-[0.2em] animate-pulse">{{ $t('common.loading') }}</p>
                 </div>
             </div>
             
@@ -600,7 +615,7 @@ onBeforeUnmount(() => {
              <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                 <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
                 <div class="flex items-start justify-between gap-4 mb-4">
-                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white leading-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
+                    <h1 class="text-3xl md:text-5xl font-black text-slate-900 dark:text-white leading-tight tracking-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
                 </div>
                 
                 <p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
@@ -615,10 +630,10 @@ onBeforeUnmount(() => {
                     
                     <div class="flex justify-center flex-wrap gap-3 text-sm mb-8">
                          <span v-if="currentLesson.quiz?.questions?.length" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
-                            <q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} ข้อ
+                            <q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} {{ $t('quiz.questions') }}
                          </span>
                          <span v-if="currentLesson.quiz?.time_limit" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
-                            <q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} นาที
+                            <q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} {{ $t('quiz.minutes') }}
                          </span>
                     </div>
 
@@ -627,7 +642,7 @@ onBeforeUnmount(() => {
                         size="lg" 
                         rounded 
                         no-caps
-                        :label="$t('quiz.startBtn', 'เริ่มทำแบบทดสอบ')" 
+                        :label="$t('quiz.startBtn')" 
                         icon="play_arrow"
                         @click="$router.push(`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`)"
                     />
@@ -642,7 +657,7 @@ onBeforeUnmount(() => {
                         <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
                             <q-icon name="attach_file" size="18px" />
                         </div>
-                        {{ $t('classroom.attachments') || 'เอกสารประกอบการเรียน' }}
+                        {{ $t('classroom.attachments') }}
                     </h3>
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <a 

Frontend-Learner/pages/classroom/quiz.vue

@@ -11,7 +11,7 @@ definePageMeta({
   middleware: 'auth'
 })
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const $q = useQuasar()
@@ -118,7 +118,8 @@ const timerDisplay = computed(() => {
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  return text.th || text.en || ''
+  const currentLocale = locale.value as 'th' | 'en'
+  return text[currentLocale] || text.th || text.en || ''
 }
 
 const lessonProgress = ref<any>(null)

Frontend-Learner/pages/dashboard/index.vue

@@ -53,27 +53,28 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- Welcome Header Section -->
-    <div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition border border-white/5">
-      <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
-        <div class="text-center md:text-left">
-          <ClientOnly>
-             <h1 class="text-4xl md:text-6xl font-black mb-4 slide-up tracking-tight text-white drop-shadow-sm">
-               {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
-             </h1>
-          </ClientOnly>
-          <p class="text-lg md:text-xl slide-up font-medium text-blue-100/90 max-w-xl" style="animation-delay: 0.1s;">
-            {{ $t('dashboard.welcomeSubtitle') }}
-          </p>
-        </div>
-        <div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
+  <div class="page-container !pt-4">
+    <!-- Welcome Header Section (Minimalist) -->
+    <div class="flex items-center gap-6 mb-10 py-2 animate-fade-in">
+      <!-- Avatar with premium shadow -->
+      <div class="relative group cursor-pointer" @click="$router.push('/dashboard/profile')">
+        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+        <q-avatar size="84px" class="relative shadow-2xl ring-4 ring-white dark:ring-slate-900 transition-all duration-500 overflow-hidden">
+          <img 
+            :src="currentUser?.photoURL || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'" 
+            class="object-cover"
+          />
+        </q-avatar>
+      </div>
+      
+      <div class="flex flex-col">
+          <h1 class="text-2xl md:text-4xl font-black text-slate-900 dark:text-white tracking-tight leading-tight mb-1">
+            {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
+          </h1>
+          <div class="flex items-center gap-2">
+            <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">{{ $t('dashboard.welcomeSubtitle') }}</span>
+          </div>
       </div>
-      <!-- Decorative Background elements -->
-      <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-[#1e293b] dark:via-[#0f172a] dark:to-[#1e3a8a] -z-0"/>
-      <div class="absolute -top-20 -right-20 w-80 h-80 bg-white/10 blur-[100px] rounded-full"/>
-      <div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-400/10 blur-[100px] rounded-full"/>
-      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03] mix-blend-overlay"></div>
     </div>
 
       <!-- Main Content Area -->
@@ -104,13 +105,12 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
+@keyframes fade-in {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
-.slide-up {
-  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-  opacity: 0;
+.animate-fade-in {
+  animation: fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }
 </style>

Frontend-Learner/pages/dashboard/my-courses.vue

@@ -18,6 +18,7 @@ useHead({
 const route = useRoute()
 const showEnrollModal = ref(false)
 const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
+const searchQuery = ref('')
 
 
 // Check URL query parameters to show 'Enrollment Success' modal
@@ -71,6 +72,7 @@ const loadEnrolledCourses = async () => {
       enrollment_id: item.id,
       title: item.course.title,
       progress: item.progress_percentage || 0, 
+      lessons: item.course.total_lessons || 0,
       completed: item.status === 'COMPLETED',
       thumbnail_url: item.course.thumbnail_url 
     }))
@@ -83,6 +85,16 @@ watch(activeFilter, () => {
   loadEnrolledCourses()
 })
 
+// Client-side Search Filtering
+const filteredEnrolledCourses = computed(() => {
+  if (!searchQuery.value) return enrolledCourses.value
+  const query = searchQuery.value.toLowerCase()
+  return enrolledCourses.value.filter(c => {
+    const title = getLocalizedText(c.title).toLowerCase()
+    return title.includes(query)
+  })
+})
+
 onMounted(() => {
   if (route.query.enrolled) {
     showEnrollModal.value = true
@@ -138,21 +150,43 @@ const validCourseId = computed(() => {
   <div class="page-container">
 
 
-    <!-- Page Header & Filters -->
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
-       <h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('sidebar.myCourses') }}</h1>
+    <!-- Page Header & Filters (Unified Layout) -->
+    <div class="flex flex-col gap-6 mb-10">
+       <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
+            <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
+            {{ $t('sidebar.myCourses') }}
+          </h1>
 
-       <!-- Filter Tabs -->
-       <div class="flex gap-2">
+          <!-- Search Input -->
+          <div class="flex items-center gap-3 w-full md:w-auto">
+            <q-input
+              v-model="searchQuery"
+              dense
+              outlined
+              rounded
+              :placeholder="$t('discovery.searchPlaceholder')"
+              class="w-full md:w-72 search-input shadow-sm"
+              bg-color="transparent"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" class="text-slate-400" />
+              </template>
+            </q-input>
+          </div>
+       </div>
+
+       <!-- Filter Tabs (Horizontal Bar) -->
+       <div class="flex flex-wrap items-center gap-2">
          <q-btn
            v-for="filter in ['all', 'progress', 'completed']"
            :key="filter"
            @click="activeFilter = filter as any"
+           flat
            rounded
-           unelevated
-           :color="activeFilter === filter ? 'primary' : 'white'"
-           :text-color="activeFilter === filter ? 'white' : 'grey-8'"
-           class="font-bold px-6"
+           dense
+           class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
+           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
            :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
          />
        </div>
@@ -163,7 +197,7 @@ const validCourseId = computed(() => {
        <q-spinner size="3rem" color="primary" />
     </div>
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <template v-for="course in enrolledCourses" :key="course.id">
+      <template v-for="course in filteredEnrolledCourses" :key="course.id">
         <!-- In Progress Course Card -->
         <CourseCard 
           v-if="!course.completed"
@@ -192,10 +226,18 @@ const validCourseId = computed(() => {
     </div>
 
     <!-- Empty State -->
-    <div v-if="!isLoading && enrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
-      <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.emptyTitle') }}</h3>
-      <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('myCourses.emptyDesc') }}</p>
-      <NuxtLink to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
+    <div v-if="!isLoading && filteredEnrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
+      <q-icon v-if="searchQuery" name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
+      <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
+        {{ searchQuery ? $t('discovery.emptyTitle') : $t('myCourses.emptyTitle') }}
+      </h3>
+      <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
+        {{ searchQuery ? $t('discovery.emptyDesc') : $t('myCourses.emptyDesc') }}
+      </p>
+      <NuxtLink v-if="!searchQuery" to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
+      <button v-else class="mt-4 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''">
+        {{ $t('discovery.showAll') }}
+      </button>
     </div>
 
     <!-- MODAL: Enrollment Success -->