diff --git a/Backend/src/validators/ChaptersLesson.validator.ts b/Backend/src/validators/ChaptersLesson.validator.ts
index 45d7687a..933a3e1a 100644
--- a/Backend/src/validators/ChaptersLesson.validator.ts
+++ b/Backend/src/validators/ChaptersLesson.validator.ts
@@ -79,7 +79,7 @@ export const UpdateLessonValidator = Joi.object({
         'number.min': 'Duration must be at least 0'
     }),
     sort_order: Joi.number().integer().min(0).optional(),
-    prerequisite_lesson_ids: Joi.array().items(Joi.number().integer().positive()).allow(null).optional(),
+    prerequisite_lesson_ids: Joi.array().items(Joi.number().integer().positive()).optional(),
     is_published: Joi.boolean().optional()
 });
 
diff --git a/Frontend-Learner/app.vue b/Frontend-Learner/app.vue
index 8070d468..a1ac35c7 100644
--- a/Frontend-Learner/app.vue
+++ b/Frontend-Learner/app.vue
@@ -1,27 +1,20 @@
-<script setup lang="ts">
-/**
- * @file app.vue
- * @description Root application component.
- * Handles initialization of authentication and theme settings.
- */
-
-// Initialize composables
+<script setup>
+// ดึงฟังก์ชันจัดการ Authentication
 const { fetchUserProfile, isAuthenticated } = useAuth()
-const { isDark, set: setTheme } = useThemeMode()
 
-// App initialization logic
+// เมื่อ App เริ่มทำงาน (Mounted)
 onMounted(() => {
-  // 1. Fetch user profile if tokens exist
+  // 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
   if (isAuthenticated.value) {
     fetchUserProfile()
   }
 
-  // 2. Initialize theme from persistent storage or system preference
+  // 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
   const savedTheme = localStorage.getItem('theme')
-  if (savedTheme) {
-    setTheme(savedTheme === 'dark')
-  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    setTheme(true)
+  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
   }
 })
 </script>
diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index 7f1001f3..960858a7 100644
--- a/Frontend-Learner/assets/css/main.css
+++ b/Frontend-Learner/assets/css/main.css
@@ -113,9 +113,9 @@ body {
   background-attachment: fixed;
 }
 
-/* a {
+a {
   text-decoration: none;
-  color: #2563eb;
+  color: #3b82f6;
   transition: color 0.2s;
 }
 
@@ -129,7 +129,7 @@ a:hover {
 
 .dark a:hover {
   color: #93c5fd;
-} */
+}
 
 ul {
   list-style: none;
@@ -645,9 +645,9 @@ ul {
 .rounded {
   border-radius: var(--radius-md);
 }
-/* .border-b {
+.border-b {
   border-bottom: 1px solid var(--border-color);
-} */
+}
 .load-more-wrap {
   display: flex;
   justify-content: center;
diff --git a/Frontend-Learner/components/classroom/AnnouncementModal.vue b/Frontend-Learner/components/classroom/AnnouncementModal.vue
index 074ae27c..7c0b8356 100644
--- a/Frontend-Learner/components/classroom/AnnouncementModal.vue
+++ b/Frontend-Learner/components/classroom/AnnouncementModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file AnnouncementModal.vue
- * @description คอมโพเนนต์ Modal สำหรับแสดงประกาศของคอร์สเรียน (Modal component to display course announcements)
+ * @description Modal component to display course announcements
  */
 
 const props = defineProps<{
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 const { locale, t } = useI18n()
 
-// ตัวช่วยจัดการข้อความหลายภาษา (Helper for localization)
+// Helper for localization
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -49,7 +49,7 @@ const getLocalizedText = (text: any) => {
                         class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
                         :class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 !bg-orange-50/50 dark:!bg-orange-900/20': ann.is_pinned}"
                      >
-                        <!-- ป้ายกำกับสำหรับข้อความที่ปักหมุดไว้ (Pinned Banner) -->
+                        <!-- Pinned Banner -->
                         <div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
                             <q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
                         </div>
diff --git a/Frontend-Learner/components/classroom/CurriculumSidebar.vue b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
index 3e9c1c00..382be584 100644
--- a/Frontend-Learner/components/classroom/CurriculumSidebar.vue
+++ b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /**
  * @file CurriculumSidebar.vue
- * @description คอมโพเนนต์แถบเมนูด้านข้างสำหรับแสดงหลักสูตรของคอร์สเรียน (บทเรียน & ตอนต่างๆ)
- * จัดการการนำทางไปยังบทเรียน, แสดงสถานะการล็อค, และแจ้งเตือนประกาศที่ยังไม่ได้อ่าน
+ * @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
+ * Handles lesson navigation, locked status display, and unread announcement badge.
  */
 
 const props = defineProps<{
-  modelValue: boolean; // สถานะการเปิด/ปิดของ Sidebar (Sidebar open state - v-model)
+  modelValue: boolean; // Sidebar open state (v-model)
   courseData: any;
   currentLessonId?: number;
   isLoading: boolean;
@@ -21,10 +21,10 @@ const emit = defineEmits<{
 
 const { locale } = useI18n()
 
-// สถานะของส่วนที่ขยายได้ (State for expansion items)
+// State for expansion items
 const chapterOpenState = ref<Record<string, boolean>>({})
 
-// ตัวช่วยจัดการข้อความหลายภาษา (Helper for localization)
+// Helper for localization
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -34,13 +34,13 @@ const getLocalizedText = (text: any) => {
   return text[currentLocale] || text.th || text.en || ''
 }
 
-// ตัวช่วยตรวจสอบว่าบทเรียนเรียนจบหรือยัง (Helper: Check if lesson is completed)
+// Helper: Check if lesson is completed
 const isLessonCompleted = (lesson: any) => {
     return lesson.is_completed === true || lesson.progress?.is_completed === true
 }
 
-// ตรวจสอบสถานะการสำเร็จของบท (Reactive Chapter Completion Status)
-// คำนวณเป็น Map ของ chapterId -> boolean (true ถ้าทุกบทเรียนย่อยเรียนจบแล้ว)
+// Reactive Chapter Completion Status
+// Computes a map of chapterId -> boolean (true if all lessons are completed)
 const chapterCompletionStatus = computed(() => {
     const status: Record<string, boolean> = {}
     if (!props.courseData || !props.courseData.chapters) return status
@@ -55,7 +55,7 @@ const chapterCompletionStatus = computed(() => {
     return status
 })
 
-// คำนวณความคืบหน้าแบบ Local (Local Progress Calculation)
+// Local Progress Calculation
 const progressPercentage = computed(() => {
   if (!props.courseData || !props.courseData.chapters) return 0
   let total = 0
@@ -69,7 +69,7 @@ const progressPercentage = computed(() => {
   return total > 0 ? Math.round((completed / total) * 100) : 0
 })
 
-// ขยายบทเรียนปัจจุบันอัตโนมัติ (Auto-expand chapter containing current lesson)
+// Auto-expand chapter containing current lesson
 watch(() => props.currentLessonId, (newId) => {
     if (newId && props.courseData?.chapters) {
         props.courseData.chapters.forEach((chapter: any) => {
@@ -81,7 +81,7 @@ watch(() => props.currentLessonId, (newId) => {
     }
 }, { immediate: true })
 
-// ตั้งค่าเริ่มต้นให้ทุกบทเรียนเปิดอยู่เมื่อโหลด (Initialize all chapters as open by default on load)
+// Initialize all chapters as open by default on load
 watch(() => props.courseData, (newData) => {
     if (newData?.chapters) {
         newData.chapters.forEach((chapter: any) => {
@@ -102,20 +102,20 @@ watch(() => props.courseData, (newData) => {
       side="right"
       :width="300"
       :breakpoint="1024"
-      class="bg-slate-50 dark:!bg-slate-900 shadow-xl"
+      class="bg-slate-50 dark:bg-slate-900 shadow-xl"
     >
-      <!-- คอนเทนเนอร์หลักบังคับใช้ความกว้างเต็มที่ (Main Container: Enforce Column Layout and Full Width) -->
-      <div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:!text-white relative bg-slate-50 dark:!bg-slate-900">
+      <!-- Main Container: Enforce Column Layout and Full Width -->
+      <div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:text-white relative">
         
-        <!-- 1. ส่วนหัว ด้านบนคงที่ (Header Section - Fixed at Top) -->
-        <div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:!bg-slate-900 z-10 w-full">
-           <h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full text-slate-900 dark:!text-white">{{ getLocalizedText(courseData.course.title) }}</h2>
+        <!-- 1. Header Section (Fixed at Top) -->
+        <div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900 z-10 w-full">
+           <h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full">{{ getLocalizedText(courseData.course.title) }}</h2>
            
            <div class="flex justify-between items-center mb-2 w-full">
-            <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>
+            <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>
-          <div class="h-2 w-full bg-slate-100 dark:!bg-slate-800 rounded-full overflow-hidden">
+          <div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
             <div 
               class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out" 
               :style="{ width: `${progressPercentage}%` }"
@@ -123,77 +123,77 @@ watch(() => props.courseData, (newData) => {
           </div>
         </div>
 
-        <!-- 2. รายการหลักสูตร พื้นที่เลื่อนได้ (Curriculum List - Scrollable Area) -->
-         <div class="flex-1 overflow-y-auto bg-slate-50 dark:!bg-slate-900 w-full p-4 space-y-3">
+        <!-- 2. Curriculum List (Scrollable Area) -->
+         <div class="flex-1 overflow-y-auto bg-slate-50 dark:bg-[#0f1219] w-full p-4 space-y-3">
              <q-list class="block w-full">
                 <div v-for="(chapter, idx) in courseData.chapters" :key="chapter.id" class="block w-full mb-3">
-                    <!-- กล่องข้อมูลของบท (Chapter Accordion) -->
+                    <!-- Chapter Accordion -->
                     <q-expansion-item
                         v-model="chapterOpenState[chapter.id]"
-                        class="bg-white dark:!bg-slate-800 rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700 w-full"
-                        header-class="rounded-t-xl w-full text-slate-900 dark:!text-white"
-                        expand-icon-class="text-slate-400 dark:!text-slate-300"
+                        class="bg-white dark:bg-[#1a1e29] rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-800 w-full"
+                        header-class="rounded-t-xl w-full"
+                        expand-icon-class="text-slate-400"
                     >
                         <template v-slot:header>
-                            <div class="flex items-center w-full py-3 text-slate-900 dark:!text-white">
+                            <div class="flex items-center w-full py-3 text-slate-900 dark:text-white">
                                 <div class="mr-3 flex-shrink-0">
-                                    <!-- ตัวบ่งชี้บทเรียน เครื่องหมายถูกหรือตัวเลข (Chapter Indicator - Check or Number) -->
+                                    <!-- Chapter Indicator (Check or Number) -->
                                     <div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-colors font-bold"
                                          :class="chapterCompletionStatus[chapter.id]
-                                            ? 'border-green-500 text-green-500 bg-green-50 dark:!bg-green-500/10' 
-                                            : 'border-slate-300 dark:!border-slate-600 text-slate-500 dark:!text-slate-400 bg-slate-100 dark:!bg-slate-700'">
+                                            ? 'border-green-500 text-green-500 bg-green-50 dark:bg-green-500/10' 
+                                            : 'border-slate-300 dark:border-slate-600 text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800'">
                                         <q-icon v-if="chapterCompletionStatus[chapter.id]" name="check" size="14px" class="font-bold" />
                                         <span v-else class="text-[10px]">{{ Number(idx) + 1 }}</span>
                                     </div>
                                 </div>
-                                <!-- จัดการตัวอักษรที่ล้นเกินอย่างชัดเจน (Explicitly handle text overflow) -->
+                                <!-- Explicitly handle text overflow -->
                                 <div class="flex-1 min-w-0 pr-2 overflow-hidden">
                                     <div class="font-bold text-sm leading-tight mb-0.5 truncate block w-full">{{ getLocalizedText(chapter.title) }}</div>
-                                    <div class="text-[10px] text-slate-500 dark:!text-slate-400 font-normal truncate block w-full">
+                                    <div class="text-[10px] text-slate-500 dark:text-slate-400 font-normal truncate block w-full">
                                         {{ chapter.lessons.length }} {{ $t('course.lessonsUnit') }}
                                     </div>
                                 </div>
                             </div>
                         </template>
 
-                        <!-- รายการบทเรียนย่อย (Lessons List) -->
-                        <div class="bg-slate-50 dark:!bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 w-full">
+                        <!-- Lessons List -->
+                        <div class="bg-slate-50 dark:bg-[#0f1219]/50 border-t border-slate-100 dark:border-slate-800 w-full">
                             <div 
                                 v-for="(lesson, lIdx) in chapter.lessons" 
                                 :key="lesson.id"
-                                class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:!bg-slate-700/50 w-full"
+                                class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:bg-slate-800/50 w-full"
                                 :class="currentLessonId === lesson.id 
-                                    ? 'border-blue-600 bg-blue-50 dark:!bg-blue-900/40' 
+                                    ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/10' 
                                     : 'border-transparent'"
                                 @click="!lesson.is_locked && emit('select-lesson', lesson.id)"
                             >
-                                <!-- ไอคอนสถานะของบทเรียน (Lesson Status Icon) -->
+                                <!-- Lesson Status Icon -->
                                 <div class="mr-3 flex-shrink-0">
-                                    <!-- เรียนจบแล้ว (สำคัญที่สุด) (Completed - Takes Precedence) -->
+                                    <!-- Completed (Takes Precedence) -->
                                     <q-icon v-if="isLessonCompleted(lesson)" 
                                             name="check_circle" 
                                             class="text-green-500" 
                                             size="20px" 
                                     />
-                                    <!-- กำลังเรียนอยู่ (Active/Playing - If not completed) -->
+                                    <!-- Active/Playing (If not completed) -->
                                     <q-icon v-else-if="currentLessonId === lesson.id" 
                                             name="play_circle_filled" 
-                                            class="text-blue-600 dark:!text-blue-400 animate-pulse" 
+                                            class="text-blue-600 dark:text-blue-400 animate-pulse" 
                                             size="20px" 
                                     />
-                                    <!-- ถูกล็อคอยู่ (Locked) -->
+                                    <!-- Locked -->
                                     <q-icon v-else-if="lesson.is_locked" 
                                             name="lock" 
-                                            class="text-slate-400 dark:!text-slate-500 opacity-70" 
+                                            class="text-slate-400 opacity-70" 
                                             size="18px" 
                                     />
-                                    <!-- ยังไม่ได้เริ่ม (Not Started) -->
+                                    <!-- Not Started -->
                                     <div v-else class="w-[18px] h-[18px] rounded-full border-2 border-slate-300 dark:border-slate-600"></div>
                                 </div>
 
                                 <div class="flex-1 min-w-0 overflow-hidden">
                                     <div class="text-xs font-bold truncate leading-snug block w-full"
-                                        :class="currentLessonId === lesson.id ? 'text-blue-700 dark:!text-blue-300' : 'text-slate-600 dark:!text-slate-300'"
+                                        :class="currentLessonId === lesson.id ? 'text-blue-700 dark:text-blue-300' : 'text-slate-600 dark:text-slate-300'"
                                     >
                                         {{ getLocalizedText(lesson.title) }}
                                     </div>
@@ -214,7 +214,7 @@ watch(() => props.courseData, (newData) => {
 </template>
 
 <style scoped>
-/* สครอลบาร์ปรับแต่งเพื่อความสวยงาม (Custom scrollbar for better aesthetics) */
+/* Custom scrollbar for better aesthetics */
 ::-webkit-scrollbar {
   width: 4px;
 }
diff --git a/Frontend-Learner/components/classroom/VideoPlayer.vue b/Frontend-Learner/components/classroom/VideoPlayer.vue
index 1614d66b..4bd0af28 100644
--- a/Frontend-Learner/components/classroom/VideoPlayer.vue
+++ b/Frontend-Learner/components/classroom/VideoPlayer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file VideoPlayer.vue
- * @description คอมโพเนนต์เครื่องเล่นวิดีโอพร้อมด้วยตัวควบคุมแบบกำหนดเองตามการออกแบบ (Video Player Component with custom controls provided by design)
+ * @description Video Player Component with custom controls provided by design
  */
 
 const props = defineProps<{
@@ -22,7 +22,7 @@ const videoProgress = ref(0);
 const currentTime = ref(0);
 const duration = ref(0);
 
-// การตั้งค่าเกี่ยวกับสื่อ (Media Prefs)
+// Media Prefs
 const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
 
 const volumeIcon = computed(() => {
@@ -40,7 +40,7 @@ const formatTime = (time: number) => {
 const currentTimeDisplay = computed(() => formatTime(currentTime.value));
 const durationDisplay = computed(() => formatTime(duration.value || 0));
 
-// ตรรกะตัวช่วยสำหรับ YouTube (YouTube Helper Logic)
+// YouTube Helper Logic
 const isYoutube = computed(() => {
     const s = props.src.toLowerCase();
     return s.includes('youtube.com') || s.includes('youtu.be');
@@ -50,7 +50,7 @@ const youtubeEmbedUrl = computed(() => {
     if (!isYoutube.value) return '';
     let videoId = '';
     
-    // ดึงรหัสวิดีโอ (Extract Video ID)
+    // Extract Video ID
     if (props.src.includes('youtu.be')) {
         videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
     } else {
@@ -58,18 +58,18 @@ const youtubeEmbedUrl = computed(() => {
         videoId = urlParams.get('v') || '';
     }
 
-    // คืนค่า URL สำหรับฝังพร้อมเปิดใช้งาน jsapi (Return Embed URL with enablejsapi=1)
+    // Return Embed URL with enablejsapi=1
     return `https://www.youtube.com/embed/${videoId}?enablejsapi=1&rel=0`;
 });
 
-// การติดตามผ่าน YouTube API (YouTube API Tracking)
+// YouTube API Tracking
 let ytPlayer: any = null;
 let ytInterval: any = null;
 
 const initYoutubeAPI = () => {
     if (!isYoutube.value || typeof window === 'undefined') return;
 
-    // โหลดสคริปต์ API หากยังไม่มี (Load API Script if not exists)
+    // Load API Script if not exists
     if (!(window as any).YT) {
         const tag = document.createElement('script');
         tag.src = "https://www.youtube.com/iframe_api";
@@ -83,7 +83,7 @@ const initYoutubeAPI = () => {
                 'onReady': (event: any) => {
                     duration.value = event.target.getDuration();
                     
-                    // ตรรกะการเล่นต่อสำหรับ YouTube (Resume Logic for YouTube)
+                    // Resume Logic for YouTube
                     if (props.initialSeekTime && props.initialSeekTime > 0) {
                         event.target.seekTo(props.initialSeekTime, true);
                     }
@@ -118,7 +118,7 @@ const startYTTracking = () => {
             currentTime.value = ytPlayer.getCurrentTime();
             emit('timeupdate', currentTime.value, duration.value);
         }
-    }, 1000); // ตรวจสอบทุกๆ วินาที (Check every second)
+    }, 1000); // Check every second
 };
 
 const stopYTTracking = () => {
@@ -145,7 +145,7 @@ onUnmounted(() => {
     destroyYoutubePlayer();
 });
 
-// เฝ้าดูการเปลี่ยนแปลงของ src เพื่อเริ่มต้นใหม่ (Watch for src change to re-init)
+// Watch for src change to re-init
 watch(() => props.src, (newSrc, oldSrc) => {
     if (newSrc !== oldSrc) {
         destroyYoutubePlayer();
@@ -174,8 +174,8 @@ const togglePlay = () => {
             playPromise.then(() => {
                 isPlaying.value = true;
             }).catch(error => {
-                // การเล่นอัตโนมัติถูกป้องกันหรือถูกขัดจังหวะ (Auto-play was prevented or play was interrupted)
-                // สามารถละเว้นข้อผิดพลาดนี้ได้อย่างปลอดภัย (We can safely ignore this error)
+                // Auto-play was prevented or play was interrupted
+                // We can safely ignore this error
                 console.log("Video play request handled:", error.name);
             });
         }
@@ -223,14 +223,14 @@ const handleVolumeChange = (val: any) => {
     setVolume(newVol);
 };
 
-// เปิดเผย video ref ให้คอมโพเนนต์แม่ควบคุมถ้าจำเป็น (Expose video ref for parent to control if needed)
+// Expose video ref for parent to control if needed
 defineExpose({
     videoRef,
     pause: () => videoRef.value?.pause(),
     currentTime: () => videoRef.value?.currentTime || 0
 });
 
-// เฝ้าดูการเปลี่ยนแปลงระดับเสียง/ปิดเสียง เพื่อนำไปใช้กับองค์ประกอบวิดีโอ (Watch for volume/mute changes to apply to video element)
+// Watch for volume/mute changes to apply to video element
 watch([volume, isMuted], () => {
     if (videoRef.value) applyTo(videoRef.value);
 });
@@ -238,7 +238,7 @@ watch([volume, isMuted], () => {
 
 <template>
     <div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
-        <!-- 1. เครื่องเล่น YouTube (YouTube Player) -->
+        <!-- 1. YouTube Player -->
         <iframe
             v-if="isYoutube"
             id="youtube-iframe"
@@ -249,7 +249,7 @@ watch([volume, isMuted], () => {
             allowfullscreen
         ></iframe>
 
-        <!-- 2. เครื่องเล่นวิดีโอ HTML5 มาตรฐาน (Standard HTML5 Video Player) -->
+        <!-- 2. Standard HTML5 Video Player -->
         <div v-else class="w-full h-full relative group/video cursor-pointer">
             <video
                 ref="videoRef"
@@ -262,9 +262,9 @@ watch([volume, isMuted], () => {
                 @ended="handleEnded"
             />
         
-            <!-- เลเยอร์ควบคุมแบบกำหนดเอง (Overlay) เฉพาะสำหรับวิดีโอ HTML5 เท่านั้น (Custom Controls Overlay (Only for HTML5 Video)) -->
+            <!-- Custom Controls Overlay (Only for HTML5 Video) -->
             <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity opacity-0 group-hover/video:opacity-100 flex flex-col gap-3">
-                <!-- แถบแสดงความคืบหน้า (Progress Bar) -->
+                <!-- Progress Bar -->
                 <div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
                     <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_12px_rgba(59,130,246,0.6)]" :style="{ width: videoProgress + '%' }"></div>
                 </div>
@@ -275,7 +275,7 @@ watch([volume, isMuted], () => {
                     
                     <div class="flex-grow"></div>
 
-                    <!-- ตัวควบคุมระดับเสียง (Volume Control) -->
+                    <!-- Volume Control -->
                     <div class="flex items-center gap-2 group/volume relative">
                         <q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" class="hover:scale-110 transition-transform" />
                         <div class="w-0 group-hover/volume:w-24 overflow-hidden transition-all duration-300 flex items-center bg-black/60 backdrop-blur-md rounded-full px-2">
diff --git a/Frontend-Learner/components/common/FormInput.vue b/Frontend-Learner/components/common/FormInput.vue
index 96956ee4..df91fdac 100644
--- a/Frontend-Learner/components/common/FormInput.vue
+++ b/Frontend-Learner/components/common/FormInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file FormInput.vue
- * @description คอมโพเนนต์ช่องกรอกข้อมูล (Input) แบบนำกลับมาใช้ใหม่ได้ พร้อมรองรับข้อความป้ายกำกับ, จัดการข้อผิดพลาด และสถานะปิดใช้งาน/บังคับกรอก
- * รองรับการสลับซ่อน/แสดงรหัสผ่าน
+ * @description Reusable input component with label, error handling, and support for disabled/required states.
+ * Now supports password visibility toggle.
  */
 
 const props = defineProps<{
@@ -16,19 +16,19 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  /** อัปเดตค่า v-model (Update v-model value) */
+  /** Update v-model value */
   'update:modelValue': [value: string]
 }>()
 
-// สถานะการซ่อน/แสดงรหัสผ่าน (Password visibility state)
+// Password visibility state
 const showPassword = ref(false)
 
-// ฟังก์ชันสำหรับสลับสถานะ (Toggle function)
+// Toggle function
 const togglePassword = () => {
   showPassword.value = !showPassword.value
 }
 
-// คำนวณประเภทของช่องกรอกข้อมูล بناءً pada state (Compute input type based on visibility state)
+// Compute input type based on visibility state
 const inputType = computed(() => {
   if (props.type === 'password') {
     return showPassword.value ? 'text' : 'password'
@@ -59,7 +59,7 @@ const updateValue = (event: Event) => {
         @input="updateValue"
       >
       
-      <!-- ปุ่มสลับซ่อน/แสดงรหัสผ่าน (Password Toggle Button) -->
+      <!-- Password Toggle Button -->
       <button
         v-if="type === 'password'"
         type="button"
@@ -67,13 +67,13 @@ const updateValue = (event: Event) => {
         @click="togglePassword"
         tabindex="-1"
       >
-        <!-- ไอคอนเปิดตา (แสดงรหัสผ่าน) (Eye Icon - Show) -->
+        <!-- Eye Icon (Show) -->
         <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
           <circle cx="12" cy="12" r="3"/>
         </svg>
         
-        <!-- ไอคอนปิดตา (ซ่อนรหัสผ่าน) (Eye Off Icon - Hide) -->
+        <!-- Eye Off Icon (Hide) -->
         <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
           <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>
diff --git a/Frontend-Learner/components/common/GlobalLoader.vue b/Frontend-Learner/components/common/GlobalLoader.vue
index cbf1437b..405ba5ba 100644
--- a/Frontend-Learner/components/common/GlobalLoader.vue
+++ b/Frontend-Learner/components/common/GlobalLoader.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 /**
  * @file GlobalLoader.vue
- * @description คอมโพเนนต์หน้าจอโหลดแบบเต็มจอ (Global full-screen loading) แสดงผลตอนเปลี่ยนหน้า
- * พร้มแอนิเมชันโลโก้ขยับได้แบบพรีเมียม
+ * @description Global full-screen loading overlay that triggers during page navigation.
+ * Uses a premium pulsing logo animation.
  */
 
 const nuxtApp = useNuxtApp()
 const isLoading = ref(false)
 
-// ดักจับจังหวะการเปลี่ยนหน้าผ่าย Nuxt hook (Hook into Nuxt page transitions)
+// Hook into Nuxt page transitions
 nuxtApp.hook('page:start', () => {
   isLoading.value = true
 })
 
 nuxtApp.hook('page:finish', () => {
-  // หน่วงเวลาเล็กน้อยเพื่อให้ไหลลื่น ไม่กระพริบเร็วไปหากหน้าโหลดเสร็จไว (Add a small delay for better UX)
+  // Add a small delay for better UX (prevents flickering on fast loads)
   setTimeout(() => {
     isLoading.value = false
   }, 500)
@@ -25,14 +25,14 @@ nuxtApp.hook('page:finish', () => {
   <Transition name="fade">
     <div v-if="isLoading" class="fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-white dark:bg-[#0f172a] transition-colors duration-300">
       <div class="relative flex flex-col items-center">
-        <!-- กล่องโลโก้หลัก (Main Logo Box) -->
+        <!-- Main Logo Box -->
         <div class="w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6 animate-pulse-soft">
           <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-600/30 animate-bounce-subtle">
             <span class="text-2xl font-black text-white">E</span>
           </div>
         </div>
         
-        <!-- ข้อความระหว่างโหลด (Loading Text) -->
+        <!-- Loading Text -->
         <div class="flex flex-col items-center gap-2">
           <h3 class="text-lg font-bold text-slate-800 dark:text-white tracking-wide">e-Learning</h3>
           <div class="flex gap-1">
diff --git a/Frontend-Learner/components/common/LanguageSwitcher.vue b/Frontend-Learner/components/common/LanguageSwitcher.vue
index 97d4b967..b17eb1a3 100644
--- a/Frontend-Learner/components/common/LanguageSwitcher.vue
+++ b/Frontend-Learner/components/common/LanguageSwitcher.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /**
  * @file LanguageSwitcher.vue
- * @description คอมโพเนนต์ตัวสลับภาษาใช้ปุ่ม Dropdown ของ Quasar
- * ใช้สลับระหว่างภาษาไทย (th) และภาษาอังกฤษ (en)
+ * @description Language switcher component using Quasar dropdown.
+ * Allows switching between Thai (th) and English (en) locales.
  */
 
 const { locale, setLocale, locales } = useI18n()
 
-// ดึงรายการภาษาที่มีอยู่พร้อมชื่อภาษา (Get available locales with their names)
+// Get available locales with their names
 const availableLocales = computed(() => {
   return (locales.value as Array<{ code: string; name: string }>).map((loc) => ({
     code: loc.code,
@@ -15,13 +15,13 @@ const availableLocales = computed(() => {
   }))
 })
 
-// ดึงพาธภาพธงชาติสำหรับภาษานั้นๆ (Get flag image path for a locale)
+// Get flag image path for a locale
 const getFlagPath = (code: string) => `/flags/${code}.png`
 
-// จัดการเมื่อเปลี่ยนภาษา (Handle locale change)
+// Handle locale change
 const changeLocale = async (code: string) => {
   await setLocale(code as 'th' | 'en')
-  // คุกกี้ (Cookie) จะถูกจัดการอัตโนมัติโดย @nuxtjs/i18n จากออปชัน detectBrowserLanguage.useCookie
+  // Cookie is automatically handled by @nuxtjs/i18n with detectBrowserLanguage.useCookie
 }
 </script>
 
@@ -32,7 +32,7 @@ const changeLocale = async (code: string) => {
     class="language-btn"
     :aria-label="$t('language.label')"
   >
-    <!-- แสดงธงชาติตามภาษาที่ใช้อยู่ (Show current locale flag) -->
+    <!-- Show current locale flag -->
     <img 
       :src="getFlagPath(locale)" 
       :alt="locale.toUpperCase()" 
@@ -178,7 +178,7 @@ const changeLocale = async (code: string) => {
 </style>
 
 <style>
-/* สไตล์ Global สำหรับเมนูที่ถูกข้ามไปแสดงผลที่อื่นด้วย Teleport (Global styles for teleported menu) */
+/* Global styles for teleported menu */
 .language-menu {
   border-radius: 16px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
diff --git a/Frontend-Learner/components/common/LoadingSkeleton.vue b/Frontend-Learner/components/common/LoadingSkeleton.vue
index 50bfb566..ddd86c9f 100644
--- a/Frontend-Learner/components/common/LoadingSkeleton.vue
+++ b/Frontend-Learner/components/common/LoadingSkeleton.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-/**
- * @file LoadingSkeleton.vue
- * @description คอมโพเนนต์ Skeleton สำหรับแสดงโครงร่างหน้าจอระหว่างรอโหลดข้อมูล (Loading Skeleton Component)
- */
 defineProps<{
   type?: 'text' | 'avatar' | 'card' | 'button'
   width?: string
@@ -13,7 +9,6 @@ defineProps<{
 
 <template>
   <div class="skeleton-wrapper">
-    <!-- กรณีเป็นโครงร่างประเภทการ์ด (Card type skeleton) -->
     <template v-if="type === 'card'">
       <div v-for="i in (count || 1)" :key="i" class="skeleton-card">
         <div class="skeleton skeleton-image"/>
@@ -25,17 +20,14 @@ defineProps<{
       </div>
     </template>
     
-    <!-- กรณีเป็นโครงร่างประเภทรูปโปรไฟล์ (Avatar type skeleton) -->
     <template v-else-if="type === 'avatar'">
       <div class="skeleton skeleton-avatar"/>
     </template>
     
-    <!-- กรณีเป็นโครงร่างประเภทปุ่มกด (Button type skeleton) -->
     <template v-else-if="type === 'button'">
       <div class="skeleton skeleton-button" :style="{ width: width || '120px' }"/>
     </template>
     
-    <!-- กรณีอื่นๆ จะแสดงเป็นบรรทัดข้อความ (Fallback/Text type skeleton) -->
     <template v-else>
       <div 
         v-for="i in (count || 1)" 
diff --git a/Frontend-Learner/components/common/LoadingSpinner.vue b/Frontend-Learner/components/common/LoadingSpinner.vue
index 37a5d92d..2dd9d7a7 100644
--- a/Frontend-Learner/components/common/LoadingSpinner.vue
+++ b/Frontend-Learner/components/common/LoadingSpinner.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-/**
- * @file LoadingSpinner.vue
- * @description ไอคอนหมุนแสดงการโหลด (Loading Spinner Component) เหมาะสำหรับใช้ตรงจุดเล็กๆ หรือตอนโหลดหน้าเว็บ
- */
 defineProps<{
   size?: 'sm' | 'md' | 'lg'
   text?: string
diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index 16af9f03..c4714d79 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file CourseCard.vue
- * @description คอมโพเนนต์การ์ดแสดงคอร์สเรียนมาตรฐาน (Standardized Course Card Component)
- * วิธีใช้งาน: <CourseCard :id="1" title="..." ... />
+ * @description Standardized Course Card Component.
+ * Usage: <CourseCard :id="1" title="..." ... />
  */
 
 interface CourseCardProps {
@@ -20,7 +20,7 @@ interface CourseCardProps {
   image?: string
   loading?: boolean
   
-  // ตัวควบคุมการแสดงปุ่มต่างๆ (Action Flags)
+  // Action Flags
   showViewDetails?: boolean
   showContinue?: boolean
   showCertificate?: boolean
@@ -57,9 +57,9 @@ const displayCategory = computed(() => getLocalizedText(props.category))
 </script>
 
 <template>
-  <div class="group relative flex flex-col bg-white dark:!bg-slate-900 rounded-3xl overflow-hidden border border-slate-200 dark:border-white/5 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) -->
+    <!-- Thumbnail Section -->
     <div class="relative w-full aspect-video overflow-hidden">
       <img 
         v-if="image"
@@ -71,12 +71,12 @@ const displayCategory = computed(() => getLocalizedText(props.category))
          <q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-600" />
       </div>
 
-      <!-- เลเยอร์ฟิลเตอร์ซ้อนทับ (Overlays) -->
+      <!-- Overlays -->
       <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
       
 
 
-      <!-- ป้ายแสดงสถานะเรียนจบ (Completed Badge) -->
+      <!-- Completed Badge -->
       <div v-if="completed" class="absolute inset-0 bg-emerald-900/40 backdrop-blur-[2px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <span class="bg-emerald-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform scale-75 group-hover:scale-100 transition-transform">
            <q-icon name="check" size="24px" />
@@ -84,9 +84,9 @@ const displayCategory = computed(() => getLocalizedText(props.category))
       </div>
     </div>
 
-    <!-- ส่วนเนื้อหาข้อมูล (Content Section) -->
+    <!-- Content Section -->
     <div class="p-6 flex flex-col flex-grow">
-      <!-- ข้อมูลประกอบย่อย เช่น บทเรียน/ระยะเวลา (Meta Info - Lessons/Duration) -->
+      <!-- Meta Info (Lessons/Duration) -->
       <div class="flex items-center gap-3 text-xs font-bold text-slate-500 dark:text-slate-400 mb-3 uppercase tracking-wider">
          <span v-if="lessons" class="flex items-center gap-1">
            <q-icon name="menu_book" size="14px" /> {{ lessons }} {{ $t('course.lessonsUnit') }}
@@ -96,18 +96,18 @@ const displayCategory = computed(() => getLocalizedText(props.category))
          </span>
       </div>
 
-      <!-- ชื่อคอร์ส (Title) -->
+      <!-- Title -->
       <h3 class="text-lg font-black text-slate-900 dark:text-white mb-2 line-clamp-2 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
         {{ displayTitle }}
       </h3>
 
-      <!-- รายละเอียดเพิ่มเติม (Description) -->
+      <!-- Description -->
       <p v-if="displayDescription" class="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-6">
         {{ displayDescription }}
       </p>
 
       <div class="mt-auto pt-4">
-        <!-- หลอดความคืบหน้า (Progress Bar) -->
+        <!-- Progress Bar -->
         <div v-if="progress !== undefined && !completed && !hideProgress" class="mb-4">
           <div class="flex justify-between text-[10px] font-bold uppercase mb-1">
             <span class="text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
@@ -118,19 +118,19 @@ const displayCategory = computed(() => getLocalizedText(props.category))
           </div>
         </div>
 
-        <!-- ปุ่มปฏิบัติการต่างๆ (Action Buttons) -->
+        <!-- Action Buttons -->
         <div v-if="!hideActions" class="flex flex-col gap-3">
-          <!-- ปุ่มดูรายละเอียด (ปุ่มรอง) (View Details - Secondary Action) -->
+          <!-- View Details (Secondary Action) -->
           <q-btn
             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-500/10 dark:!text-blue-400 dark:hover:!bg-blue-500/20"
+            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}`"
           />
 
-          <!-- ปุ่มเรียนต่อ/เริ่มเรียน (ปุ่มหลัก) (Continue Learning - Primary Action) -->
+          <!-- Continue Learning (Primary Action) -->
           <q-btn
             v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
             unelevated
@@ -142,7 +142,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
         </div>
 
         <div v-if="completed" class="space-y-2">
-            <!-- ปุ่มเรียนอีกครั้ง (Study Again) -->
+            <!-- Study Again -->
             <q-btn
               v-if="showStudyAgain"
               unelevated
@@ -152,7 +152,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
               :to="`/classroom/learning?course_id=${id}`"
             />
             
-            <!-- ปุ่มดาวน์โหลดใบรับรอง (Download Certificate) -->
+            <!-- Download Certificate -->
             <q-btn
               v-if="showCertificate"
               unelevated
@@ -168,5 +168,5 @@ const displayCategory = computed(() => getLocalizedText(props.category))
 </template>
 
 <style scoped>
-/* ใส่โค้ด CSS เพิ่มได้ถ้าต้องการครอบคลุมเฉพาะไฟล์นี้ (Scoped overrides if needed) */
+/* Scoped overrides if needed */
 </style>
diff --git a/Frontend-Learner/components/discovery/CategorySidebar.vue b/Frontend-Learner/components/discovery/CategorySidebar.vue
index 692d26cf..15f238d4 100644
--- a/Frontend-Learner/components/discovery/CategorySidebar.vue
+++ b/Frontend-Learner/components/discovery/CategorySidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file CategorySidebar.vue
- * @description แถบเมนูด้านข้างสำหรับกรองคอร์สตามหมวดหมู่ (Sidebar for filtering courses by category)
+ * @description Sidebar for filtering courses by category
  */
 
 const props = defineProps<{
@@ -81,13 +81,13 @@ const toggleCategory = (id: number) => {
                                 {{ getLocalizedText(cat.name) }}
                             </span>
                             
-                            <!-- จุดแสดงสถานะเมื่อถูกเลือก (Active Indicator Dot) -->
+                            <!-- Active Indicator Dot -->
                             <div v-if="modelValue.includes(cat.id)" class="ml-auto w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400 shadow-lg shadow-blue-500/50"></div>
                         </div>
                     </div>
                 </div>
 
-                <!-- ปุ่มแสดงเพิ่มเติม/แสดงน้อยลง (Show More/Less Action) -->
+                <!-- Show More/Less Action -->
                 <div 
                     v-if="categories.length > 5"
                     @click="showAllCategories = !showAllCategories"
diff --git a/Frontend-Learner/components/discovery/CourseDetailView.vue b/Frontend-Learner/components/discovery/CourseDetailView.vue
index c7fb7621..3f1446a8 100644
--- a/Frontend-Learner/components/discovery/CourseDetailView.vue
+++ b/Frontend-Learner/components/discovery/CourseDetailView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file CourseDetailView.vue
- * @description แสดงรายละเอียดคอร์สแบบรวดเร็ว รวมถึงตัวอย่างวิดีโอ, หลักสูตร, และระบบการลงทะเบียน
+ * @description Quick view of course details including video preview, curriculum, and enroll logic
  */
 import { ref, computed } from 'vue'
 
@@ -51,9 +51,9 @@ const handleEnroll = () => {
     if(!props.course) return;
     enrollmentLoading.value = true;
     emit('enroll', props.course.id);
-    // สถานะ Loading ถูกจัดการโดยคอมโพเนนต์แม่ แต่ในคอมโพเนนต์นี้เรารีเซ็ตหลังจากส่ง event หรือเก็บไว้จนกว่า prop จะเปลี่ยน
-    // ในรูปแบบนี้ เราแค่ส่ง event ออกไป (just emit)
-    setTimeout(() => enrollmentLoading.value = false, 2000); // ตั้งเวลารีเซ็ตเพื่อความปลอดภัย (Safety timeout)
+    // Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
+    // In this pattern, we just emit.
+    setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
 };
 const instructorData = computed(() => {
     if (props.course?.instructors && props.course.instructors.length > 0) {
@@ -66,11 +66,16 @@ const instructorData = computed(() => {
 
 <template>
     <div class="animate-fade-in-up">
+        <div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
+            <q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
+            <span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
+        </div>
+
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- ด้านซ้าย: รายละเอียดเนื้อหา (Left: Content Detail) -->
+            <!-- Left: Content Detail -->
             <div class="lg:col-span-2 space-y-8">
                 
-                <!-- ส่วนแสดงตัวอย่างวิดีโอ (Video Preview Section) -->
+                <!-- Video Preview Section -->
                 <div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group cursor-pointer bg-slate-900 border-4 border-white dark:border-slate-800 transition-transform duration-500 hover:scale-[1.01]">
                      <template v-if="course.media?.video_url">
                          <video 
@@ -81,19 +86,19 @@ const instructorData = computed(() => {
                              <source :src="course.media.video_url" type="video/mp4">
                              {{ $t('course.videoNotSupported') }}
                          </video>
-                         <!-- ปุ่มเล่นวิดีโอแบบปรับแต่งเองตอนยังไม่เล่น (Custom Play Overlay when not playing) -->
+                         <!-- Custom Play Overlay when not playing - simple version is often best -->
                      </template>
-                     <!-- แสดงรูปภาพสวยๆ กรณีที่ไม่มีวิดีโอ (Beautiful Image Showcase if no video) -->
+                     <!-- Beautiful Image Showcase if no video -->
                      <template v-else>
                          <div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950 group">
-                             <!-- รูปพื้นหลังเบลอ (Blurred background fill) -->
+                             <!-- Blurred background fill -->
                              <img 
                                 v-if="course.thumbnail_url || course.cover_image"
                                 :src="course.thumbnail_url || course.cover_image"
                                 class="absolute inset-0 w-full h-full object-cover opacity-40 blur-2xl scale-125"
                              />
                              
-                             <!-- รูปหลักแบบคมชัด (Main Sharp Image) -->
+                             <!-- Main Sharp Image -->
                              <img 
                                 v-if="course.thumbnail_url || course.cover_image"
                                 :src="course.thumbnail_url || course.cover_image"
@@ -107,7 +112,7 @@ const instructorData = computed(() => {
                      </template>
                 </div>
 
-                <!-- ชื่อคอร์สและรายละเอียด (Course Title & Description) -->
+                <!-- Course Title & Description -->
                 <div>
                     <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
                         {{ getLocalizedText(course.title) }}
@@ -118,10 +123,10 @@ const instructorData = computed(() => {
                     </div>
                 </div>
 
-                <!-- รายละเอียดคอร์ส - รูแแบบหน้าเดียว (Course Detail - Single Page Layout) -->
+                <!-- Course Detail - Single Page Layout -->
                 <div class="space-y-10">
                     
-                    <!-- ข้อมูลผู้สอน (Instructor Info) -->
+                    <!-- Instructor Info -->
                     <div class="flex flex-col sm:flex-row gap-6 items-start sm:items-center pb-8 border-b border-slate-200 dark:border-slate-800">
                         <q-avatar size="64px">
                             <img :src="instructorData?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
@@ -135,7 +140,7 @@ const instructorData = computed(() => {
                         </div>
                     </div>
 
-                    <!-- รายละเอียดหลักสูตร / บทเรียน (Curriculum / Lesson Details) -->
+                    <!-- Curriculum / Lesson Details -->
                     <div>
                         <div class="flex items-center justify-between mb-6">
                             <h3 class="text-xl font-bold text-slate-900 dark:text-white">
@@ -148,7 +153,7 @@ const instructorData = computed(() => {
                         
                         <div class="space-y-4">
                              <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
-                                 <!-- ส่วนหัวของบท (Chapter Header) -->
+                                 <!-- Chapter Header -->
                                  <div class="px-6 py-4 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/5 font-black text-slate-800 dark:text-white flex justify-between items-center mb-2 shadow-sm">
                                      <span class="flex items-center gap-3">
                                          <span class="w-7 h-7 flex items-center justify-center bg-slate-100 dark:bg-white/10 rounded-lg text-xs font-bold font-mono">{{ Number(idx) + 1 }}</span>
@@ -157,7 +162,7 @@ const instructorData = computed(() => {
                                      <span class="text-[10px] uppercase font-black tracking-widest text-slate-400 opacity-60">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
                                  </div>
                                  
-                                 <!-- รายการบทเรียน (Lessons List) -->
+                                 <!-- Lessons List -->
                                  <div class="ml-4 pl-4 border-l-2 border-slate-100 dark:border-slate-800 space-y-1 mt-3">
                                      <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-5 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-white/5 rounded-xl transition-all hover:translate-x-1">
                                          <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" :class="lesson.type === 'VIDEO' ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400'">
@@ -173,7 +178,7 @@ const instructorData = computed(() => {
                                  </div>
                             </div>
                             
-                            <!-- กรณีที่ไม่มีข้อมูล (Empty State) -->
+                            <!-- Empty State -->
                             <div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
                                  <q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
                                  <p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
@@ -185,11 +190,11 @@ const instructorData = computed(() => {
 
             </div>
 
-            <!-- ด้านขวา: การ์ดลงทะเบียน (Right: Enrollment Card) -->
+            <!-- Right: Enrollment Card -->
             <div class="lg:col-span-1">
                  <div class="sticky top-24">
                      <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl shadow-blue-500/10 dark:shadow-none p-8 border border-slate-100 dark:border-white/5 relative overflow-hidden group">
-                           <!-- ลูกเล่นแสงพื้นหลังตกแต่ง (Decorative background glow) -->
+                           <!-- Decorative background glow -->
                            <div class="absolute -top-12 -right-12 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
                            
                            <div class="relative">
diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue
index 30b3e8af..0fd7c08a 100644
--- a/Frontend-Learner/components/layout/AppHeader.vue
+++ b/Frontend-Learner/components/layout/AppHeader.vue
@@ -1,116 +1,168 @@
 <script setup lang="ts">
 /**
  * @file AppHeader.vue
- * @description แถบเมนูด้านบนหลัก (Header) สำหรับหน้าแดชบอร์ด (Dashboard) ของระบบ EduLearn
+ * @description The main header for the authenticated application dashboard.
+ * Uses Quasar QToolbar.
  */
 
+import { ref, computed } from "vue";
+
 const props = defineProps<{
-  /** ควบคุมการแสดงผลของปุ่มเปิด/ปิดแถบเมนูด้านข้าง (Sidebar) */
+  /** Controls visibility of the sidebar toggle button */
   showSidebarToggle?: boolean;
+  /** Type of navigation links to display */
+  navType?: "public" | "learner";
 }>();
 
 const emit = defineEmits<{
-  /** ส่งสัญญาณ (Emit) เมื่อผู้ใช้คลิกที่ปุ่มแฮมเบอร์เกอร์เมนู */
+  /** Emitted when the hamburger menu is clicked */
   toggleSidebar: [];
+  /** Emitted when the mobile menu toggle is clicked */
+  toggleRightDrawer: [];
 }>();
 
-const { currentUser } = useAuth();
-const { locale, setLocale } = useI18n();
-const { isDark, set: setTheme } = useThemeMode();
+const { t } = useI18n();
+const route = useRoute();
+
+// Automatically determine navType based on route if not explicitly passed
+const navTypeComputed = computed(() => {
+  if (props.navType) return props.navType;
+  // Show learner nav for dashboard, browse, classroom, and course details
+  const learnerRoutes = ["/dashboard", "/browse", "/classroom", "/course"];
+  return learnerRoutes.some((r) => route.path.startsWith(r))
+    ? "learner"
+    : "public";
+});
 
-const toggleLanguage = () => {
-  setLocale(locale.value === 'th' ? 'en' : 'th');
-};
 
-const toggleTheme = () => {
-  setTheme(!isDark.value);
-};
 </script>
 
 <template>
-  <q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
-    
-    <!-- ด้านซ้าย: ปุ่มย่อขยายแถบเมนูด้านข้าง (Hamburger Toggle) -->
-    <q-btn
-      flat
-      round
-      dense
-      icon="menu"
-      class="text-slate-400 hover:text-blue-600 transition-colors"
-      size="16px"
-      @click="$emit('toggleSidebar')"
-    />
-
-    <q-space />
-
-    <!-- ส่วนการตั้งค่าทางด้านขวา (Right Section) -->
-    <div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
+  <q-toolbar class="bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-white h-16 border-none p-0 overflow-visible">
+    <div class="w-full px-4 md:px-12 flex items-center h-full no-wrap relative">
       
-      <!-- ปุ่มสลับธีม (Theme Toggle) -->
+      <!-- Mobile Sidebar Toggle (For non-learner routes) -->
       <q-btn
+        v-if="showSidebarToggle !== false && navTypeComputed !== 'learner' && $q.screen.lt.md"
         flat
         round
         dense
-        :icon="isDark ? 'dark_mode' : 'light_mode'"
-        :class="isDark ? 'text-blue-400' : 'text-amber-500'"
-        class="transition-all active:scale-90"
-        size="12px"
-        @click="toggleTheme"
+        icon="menu"
+        class="mr-2 text-gray-500"
+        @click="$emit('toggleSidebar')"
+      />
+
+      <!-- Branding: Logo + Name -->
+      <div
+        class="flex items-center gap-3 cursor-pointer group flex-shrink-0"
+        @click="navigateTo('/dashboard')"
       >
-        <q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
-      </q-btn>
-
-      <!-- ตัวสลับภาษาแบบแคปซูล (Language Switcher) -->
-      <div 
-        @click="toggleLanguage"
-        class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
-      >
-        <div :class="locale === 'th' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">TH</div>
-        <div class="w-[1px] h-3 bg-slate-200 dark:bg-slate-700 mx-0.5"></div>
-        <div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
-      </div>
-
-      <!-- เส้นคั่น (Divider) -->
-      <div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
-
-      <!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
-      <div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard/profile')">
-        <!-- ชื่อและบทบาท (แสดงเฉพาะบนจอที่ใหญ่กว่า 600px) -->
-        <div class="user-info-text flex flex-col items-end text-right">
-          <span class="text-[15px] font-bold text-slate-900 dark:text-white leading-tight">
-            {{ currentUser?.firstName || 'User' }} {{ currentUser?.lastName || '' }}
-          </span>
-          <span class="text-[11px] text-slate-500 font-medium">{{ $t('common.student') }}</span>
+        <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform flex-shrink-0">
+          E
         </div>
-
-        <!-- รูปโปรไฟล์พร้อมวงแหวน Gradient นุ่มนวล -->
-        <div class="relative p-[3px] rounded-full bg-gradient-to-tr from-[#FFD1D1] via-[#E2E8FF] to-[#D1F7FF] dark:from-slate-800 dark:to-slate-700 transition-transform group-hover:scale-105">
-          <div class="bg-white dark:bg-[#020617] p-[1.5px] rounded-full shadow-sm">
-            <UserAvatar 
-              :photoURL="currentUser?.photoURL" 
-              :firstName="currentUser?.firstName" 
-              :lastName="currentUser?.lastName" 
-              size="40"
-              class="w-[40px] h-[40px]"
-            />
-          </div>
+        <div class="flex flex-col text-left">
+          <span class="font-black text-[15px] md:text-lg leading-none tracking-tight text-slate-900 dark:text-white group-hover:text-blue-600 transition-colors">E-Learning</span>
+          <span class="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
         </div>
       </div>
 
+      <!-- Desktop Navigation -->
+      <nav class="header-desktop items-center gap-6 lg:gap-8 text-[14px] font-bold ml-12 flex-shrink-0 h-full">
+        <NuxtLink to="/dashboard" class="nav-link" exact-active-class="active">{{ $t("sidebar.overview") }}</NuxtLink>
+        <NuxtLink to="/browse/discovery" class="nav-link" active-class="active">{{ $t("landing.allCourses") }}</NuxtLink>
+        <NuxtLink to="/dashboard/my-courses" class="nav-link" exact-active-class="active">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</NuxtLink>
+      </nav>
+
+      <q-space />
+
+      <!-- Right Section: Tools -->
+      <div class="flex items-center gap-2 flex-shrink-0 no-wrap">
+        
+        <!-- Desktop Only Tools -->
+        <div class="header-desktop items-center gap-4 flex-shrink-0">
+          <LanguageSwitcher />
+          <UserMenu />
+        </div>
+
+        <!-- Mobile/Tablet Tools Hidden (Moved to Drawer) -->
+        <!-- Just keep space between logo and hamburger -->
+
+        <!-- Mobile/Tablet Hamburger -->
+        <q-btn
+          flat
+          round
+          dense
+          icon="menu"
+          class="header-mobile text-slate-700 dark:text-white bg-slate-100 dark:bg-slate-800 flex-shrink-0"
+          style="width: 40px; height: 40px; min-width: 40px;"
+          @click="$emit('toggleRightDrawer')"
+        />
+      </div>
     </div>
   </q-toolbar>
 </template>
 
 <style scoped>
-/* บังคับให้ความสูงของ Header เท่ากันเสมอ (Ensure toolbar height is consistent) */
-:deep(.q-toolbar) {
-  min-height: 80px;
-}
-
-/* ซ่อนชื่อผู้ใช้ไว้เฉพาะบนหน้าจอมือถือขนาดเล็กเท่านั้น (Hide user name only on small mobile screens) */
-@media (max-width: 600px) {
-  .user-info-text {
+/* High Priority Visibility Logic */
+@media (max-width: 1023px) {
+  .header-desktop {
     display: none !important;
   }
+  .header-mobile {
+    display: flex !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .header-mobile {
+    display: none !important;
+  }
+  .header-desktop {
+    display: flex !important;
+  }
+}
+
+.nav-link {
+  color: #64748b; /* slate-500 */
+  text-decoration: none;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+}
+
+.nav-link:hover {
+  color: #2563eb; /* blue-600 */
+}
+
+.nav-link.active {
+  color: #2563eb; /* blue-600 */
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 3px;
+  background-color: #2563eb;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.nav-link.active::after {
+  width: 100%;
+}
+
+.router-link-active {
+  color: #2563eb !important;
 }
 </style>
diff --git a/Frontend-Learner/components/layout/AppSidebar.vue b/Frontend-Learner/components/layout/AppSidebar.vue
index f359c349..6cdea9ef 100644
--- a/Frontend-Learner/components/layout/AppSidebar.vue
+++ b/Frontend-Learner/components/layout/AppSidebar.vue
@@ -1,145 +1,79 @@
 <script setup lang="ts">
 /**
  * @file AppSidebar.vue
- * @description เมนูด้านข้างสำหรับการนำทาง (Sidebar Navigation)
+ * @description Sidebar navigation for the authenticated dashboard.
+ * Uses Quasar QList for structure.
  */
 
-// 1. นำเข้า Composables และไลบรารี
-import { useQuasar } from 'quasar'
+const { sidebarItems } = useNavItems()
 const { t } = useI18n()
-const route = useRoute()
-const $q = useQuasar()
-const { logout } = useAuth()
-const { isDark } = useThemeMode()
+const navItems = sidebarItems
 
-// 2. กำหนดข้อมูลเมนูหลัก (Main Navigation)
-const menuItems = computed(() => [
-  { to: '/dashboard', icon: 'grid_view', label: t('sidebar.overview') },
-  { to: '/dashboard/my-courses', icon: 'book', label: t('sidebar.myCourses') }
-])
 
-// 3. กำหนดข้อมูลเมนูบัญชี (Account Navigation)
-const accountItems = computed(() => [
-  { to: '/dashboard/profile', icon: 'settings', label: t('userMenu.settings') }
-])
-
-// 4. ฟังก์ชันการออกจากระบบ (Logout Function)
-const handleLogout = () => {
-  $q.dialog({
-    title: t('auth.logoutConfirmTitle'),
-    message: t('auth.logoutConfirmMessage'),
-    cancel: {
-      flat: true,
-      color: isDark.value ? 'grey-4' : 'grey-7',
-      label: t('common.cancel')
-    },
-    ok: {
-      flat: false,
-      color: 'red-500',
-      label: t('auth.logout'),
-      unelevated: true
-    },
-    dark: isDark.value,
-    class: 'p-4 rounded-2xl text-slate-900 dark:text-white',
-    persistent: true
-  }).onOk(async () => {
-    await logout()
-  })
+const handleNavigate = (path: string) => {
+  if (import.meta.client) {
+    window.location.href = path
+  }
 }
 </script>
 
 <template>
-  <div class="flex flex-col h-full bg-white dark:!bg-[#04091a] px-4 py-6 border-r border-slate-100 dark:border-slate-800">
+  <div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
     
-    <!-- โลโก้แบรนด์ (Logo Section) -->
-    <div class="flex items-center gap-3 px-2 mb-10 transition-transform active:scale-95 cursor-pointer" @click="navigateTo('/dashboard')">
-      <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
-        <q-icon name="school" color="white" size="24px" />
-      </div>
-      <span class="text-[22px] font-black tracking-tight text-slate-800 dark:text-white">EduLearn</span>
-    </div>
 
-    <!-- การนำทางหลัก (Main Navigation) -->
-    <div class="space-y-1 mb-8">
-      <NuxtLink 
-        v-for="item in menuItems" 
+    <!-- Navigation Items -->
+    <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" 
-        :to="item.to"
-        class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group relative nav-item"
-        :class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
+        clickable 
+        v-ripple
+        @click="handleNavigate(item.to)"
+        class="rounded-xl mb-1 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
+        :class="{ 'sidebar-item--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
       >
-        <q-icon :name="item.icon" size="24px" class="transition-colors" />
-        <span class="font-bold text-[15px]">{{ item.label }}</span>
+        <q-item-section avatar>
+          <q-icon :name="item.icon" size="22px" />
+        </q-item-section>
         
-        <!-- ตัวบ่งชี้หน้าปัจจุบัน (Active Indicator) -->
-        <div v-if="route.path === item.to" class="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-blue-600 rounded-r-full shadow-[2px_0_8px_rgba(37,99,235,0.4)]"></div>
-      </NuxtLink>
-    </div>
+        <q-item-section>
+          <q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
 
-    <!-- หมวดหมู่บัญชี (Account Section) -->
-    <div class="px-4 mb-4">
-      <span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">{{ $t('sidebar.accountGroup') }}</span>
-    </div>
-    <div class="space-y-1">
-      <NuxtLink 
-        v-for="item in accountItems" 
-        :key="item.to" 
-        :to="item.to"
-        class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group nav-item"
-        :class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
-      >
-        <q-icon :name="item.icon" size="24px" />
-        <span class="font-bold text-[15px]">{{ item.label }}</span>
-      </NuxtLink>
-
-      <!-- ปุ่มออกจากระบบ (Logout Button) -->
-      <button 
-        @click="handleLogout"
-        class="w-full flex items-center gap-4 px-4 py-3 rounded-2xl transition-all text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 font-bold text-[15px] group"
-      >
-        <q-icon name="logout" size="24px" class="group-hover:translate-x-1 transition-transform" />
-        <span>{{ $t('userMenu.logout') }}</span>
-      </button>
-    </div>
-
-    <q-space />
-
-    <!-- การ์ดโปรโมชั่น (Promo Card) -->
-    <div class="mt-auto p-5 rounded-[2rem] bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 relative overflow-hidden group">
-      <div class="relative z-10">
-        <h4 class="font-black text-slate-800 dark:text-white text-sm mb-1">{{ $t('sidebar.promoTitle') }}</h4>
-        <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-4">{{ $t('sidebar.promoSubtitle') }}</p>
-        <q-btn
-          unelevated
-          class="full-width rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 no-caps transition-all active:scale-95 text-xs shadow-md shadow-blue-500/20"
-          @click="navigateTo('/browse/discovery')"
-        >
-          {{ $t('sidebar.learnMore') }}
-        </q-btn>
-      </div>
-      
-      <!-- การตกแต่งพื้นหลังแบบจางๆ (Subtle background decoration) -->
-      <div class="absolute -right-2 -bottom-2 w-16 h-16 bg-blue-500/5 rounded-full blur-xl"></div>
-    </div>
   </div>
 </template>
 
 <style scoped>
-.nav-item.active {
-  background: #EFF6FF;
-  color: #2563EB;
+.sidebar-item--active {
+  background: #eff6ff !important; /* blue-50 */
+  color: #1d4ed8 !important;       /* blue-700 */
+  position: relative;
 }
 
-.dark .nav-item.active {
-  background: rgba(37,99,235,0.1);
-  color: #60A5FA;
+.sidebar-item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 15%;
+  height: 70%;
+  width: 4px;
+  background: #2563eb;
+  border-radius: 0 4px 4px 0;
 }
 
-.nav-item.active .q-icon {
-  color: #2563EB;
+/* Dark Mode Active State Enhancement */
+.dark .sidebar-item--active {
+  background: rgba(59, 130, 246, 0.12) !important;
+  color: #60a5fa !important;     /* blue-400 */
 }
 
-.dark .nav-item.active .q-icon {
-  color: #60A5FA;
+.dark .sidebar-item--active .q-icon {
+  color: #60a5fa !important;      /* blue-400 */
+}
+
+.dark .sidebar-item--active::before {
+  background: #3b82f6;
 }
 </style>
diff --git a/Frontend-Learner/components/layout/LandingFooter.vue b/Frontend-Learner/components/layout/LandingFooter.vue
index 6cb717b0..52354631 100644
--- a/Frontend-Learner/components/layout/LandingFooter.vue
+++ b/Frontend-Learner/components/layout/LandingFooter.vue
@@ -1,48 +1,45 @@
 <script setup lang="ts">
 /**
  * @file LandingFooter.vue
- * @description ส่วนท้ายของหน้าแรก (Footer component for the landing page)
+ * @description Footer component for the landing page - Adjusted to Image 2 (E-Learning Platform Branding)
  */
 </script>
 
 <template>
-  <footer class="bg-white pt-16 pb-8 border-t border-slate-200">
+  <footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
     <div class="container mx-auto px-6 md:px-12">
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
-        <!-- โลโก้และชื่อแบรนด์ (Brand) -->
+        <!-- Brand -->
         <div class="space-y-6">
-           <NuxtLink to="/" class="flex items-center gap-3 group">
-              <div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                <q-icon name="o_school" size="24px" />
-              </div>
-              <div class="flex flex-col">
-                <span class="font-bold text-lg leading-none tracking-tight transition-colors text-slate-900">
-                  EduLearn
-                </span>
-                <span class="text-[10px] text-slate-500 font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors">
-                  Platform
-                </span>
-              </div>
-            </NuxtLink>
-            <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
-              แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
-            </p>
+          <div class="flex items-center gap-3">
+            <div class="w-12 h-12 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 shrink-0">
+              E
+            </div>
+            <div class="flex flex-col">
+              <span class="font-black text-lg leading-none tracking-tight text-slate-900">E-Learning</span>
+              <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
+            </div>
+          </div>
+          <p class="text-slate-500 text-sm leading-relaxed max-w-xs">
+            แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
+          </p>
         </div>
 
-        <!-- ลิงก์ต่างๆ (Links) -->
+        <!-- Links -->
         <div class="lg:pl-8">
-          <h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
-          <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
-            <li class=""><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
+          <h4 class="font-bold text-slate-900 mb-6 text-base">คอร์สเรียน</h4>
+          <ul class="space-y-3 text-sm text-slate-500">
+            <li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
+            <li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors inline-block">คอร์สแนะนำ</NuxtLink></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
           </ul>
         </div>
 
-        <!-- การสนับสนุนผู้ใช้ (Support) -->
+        <!-- Support -->
         <div>
           <h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
-          <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
+          <ul class="space-y-3 text-sm text-slate-500">
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">คำถามที่พบบ่อย (FAQ)</a></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">วิธีการใช้งาน</a></li>
             <li><a href="#" class="hover:text-blue-600 transition-colors inline-block">เงื่อนไขการใช้งาน</a></li>
@@ -50,33 +47,39 @@
           </ul>
         </div>
 
-        <!-- ข้อมูลการติดต่อ (Contact) -->
+        <!-- Contact (Bronco Hourse Data) -->
         <div class="space-y-6">
           <h4 class="font-bold text-slate-900 text-base">ติดต่อเรา</h4>
           <div class="flex flex-col gap-5">
-            <!-- สถานที่ตั้ง (Location) -->
+            <!-- Location -->
             <div class="flex flex-row items-start gap-4 flex-nowrap">
-              <q-icon name="o_location_on" size="20px" color="slate-800" />
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
+                 <q-icon name="location_on" size="20px" />
+              </div>
               <div class="flex flex-col gap-1 min-w-0">
-                <span class="font-semibold text-slate-800 text-sm leading-tight">Bronco Hourse</span>
+                <span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
                 <p class="text-slate-500 text-[11px] leading-relaxed">
                   74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
                 </p>
               </div>
             </div>
 
-            <!-- เบอร์โทรศัพท์ (Phone) -->
+            <!-- Phone -->
             <div class="flex flex-row items-center gap-4 flex-nowrap">
-              <q-icon name="o_phone" size="18px" color="slate-800" />
-              <a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
+                 <q-icon name="phone" size="18px" />
+              </div>
+              <a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
                 052-076-025
               </a>
             </div>
 
-            <!-- อีเมล (Email) -->
+            <!-- Email -->
             <div class="flex flex-row items-center gap-4 flex-nowrap">
-              <q-icon name="o_email" size="18px" color="slate-800" />
-              <a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 transition-colors truncate">
+              <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
+                 <q-icon name="email" size="18px" />
+              </div>
+              <a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
                 info@chamomind.com
               </a>
             </div>
@@ -84,7 +87,7 @@
         </div>
       </div>
 
-      <!-- แถบด้านล่างสำหรับสงวนลิขสิทธิ์ (Bottom Bar - Centered Copyright) -->
+      <!-- Bottom Bar (Centered Copyright) -->
       <div class="pt-8 border-t border-slate-200 text-center">
         <p class="text-sm text-slate-400 font-medium tracking-wide">
           Copyright © CHAMOMIND CO., LTD. 2023
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index 4b514707..cb4efe7d 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
 /**
  * @file LandingHeader.vue
- * @description คอมโพเนนต์แถบเมนูด้านบน (Header Navigation) สำหรับหน้า Landing Page และหน้าเปิดอื่นๆ
- * รองรับการเปลี่ยนภาษา เปลี่ยนโหมดสว่าง/มืด และเข้าถึงเมนูผู้ใช้ (Profile/Logout)
+ * @description The main header for the public landing pages.
+ * Features a transparent background that becomes solid/glass upon scrolling.
+ * Responsive: Collapses into a drawer on mobile (md breakpoint).
  */
 
-// ติดตามสถานะการเลื่อนเมาส์ (scroll) เพื่อปรับรูปแบบของ Header
+// Track scrolling state to adjust header styling
 const isScrolled = ref(false)
 const { isAuthenticated } = useAuth()
-// สถานะเมนูสำหรับหน้าจอมือถือ (Mobile Drawer State)
-// ตัวแปรควบคุมการเปิด/ปิดเมนูบนหน้าจอขนาดเล็ก (Mobile Drawer)
+// Mobile Drawer State
 const mobileMenuOpen = ref(false)
 
 const handleScroll = () => {
   isScrolled.value = window.scrollY > 20
 }
 
-// ปิดการเลื่อนหน้าเว็บ (Lock body scroll) เมื่อเปิดเมนูบนมือถือ
+// Lock body scroll when mobile menu is open
 watch(mobileMenuOpen, (isOpen) => {
   if (isOpen) {
     document.body.style.overflow = 'hidden'
@@ -31,34 +31,34 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
-  document.body.style.overflow = '' // คืนค่าเริ่มต้น (Cleanup)
+  document.body.style.overflow = '' // Cleanup
 })
 </script>
 
 <template>
   <!-- 
-    คอนเทนเนอร์ของ Header (Header Container)
-    - เปลี่ยนจากสีใส (transparent) เป็นเอฟเฟกต์กระจก (glass effect) เมื่อเลื่อนเมาส์ลง
+    Header Container 
+    - Transitions between transparent and glass effect based on scroll.
   -->
   <header 
-    class="fixed top-0 left-0 right-0 z-[100] transition-all"
-    :class="[isScrolled ? 'h-20 glass-nav shadow-lg' : 'h-20 bg-transparent duration-300 border-b border-b-grey-7 ']"
+    class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
+    :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
   >
-    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
-      <!-- ด้านซ้าย: โลโก้แบรนด์ (Left Section: Logo) -->
+    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-start">
+      <!-- Left Section: Logo -->
       <NuxtLink to="/" class="flex items-center gap-3 group">
-        <div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
-          <q-icon name="o_school" size="24px" />
+        <div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
+          E
         </div>
         <div class="flex flex-col">
           <span 
-            class="font-bold text-lg leading-none tracking-tight transition-colors"
+            class="font-black text-lg leading-none tracking-tight transition-colors"
             :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
           >
-            EduLearn
+            E-Learning
           </span>
           <span 
-            class="text-[10px] font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors"
+            class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
             :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
           >
             Platform
@@ -66,12 +66,12 @@ onUnmounted(() => {
         </div>
       </NuxtLink>
 
-      <!-- การนำทางสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS  'desktop-nav') -->
-     <!--  <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
+      <!-- Desktop Navigation (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
+      <nav class="flex desktop-nav items-center gap-8 text-sm font-bold ml-12">
         <NuxtLink 
           to="/browse" 
           class="transition-colors relative group py-2"
-          :class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
+          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
         >
           {{ $t('sidebar.onlineCourses') }}
           <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
@@ -79,31 +79,29 @@ onUnmounted(() => {
         <NuxtLink 
           to="/browse/recommended" 
           class="transition-colors relative group py-2"
-          :class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
+          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
         >
           {{ $t('sidebar.recommendedCourses') }}
           <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
         </NuxtLink>
-      </nav> -->
+      </nav>
 
-
-
-      <!-- ปุ่มปฏิบัติการสำหรับเดสก์ท็อป (แสดงผลเป็นค่าเริ่มต้น, ซ่อนบนมือถือผ่าน CSS 'desktop-nav') -->
-      <div class="flex desktop-nav items-center gap-4">
+      <!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
+      <div class="flex desktop-nav items-center gap-4 ml-auto">
         <template v-if="!isAuthenticated">
-          <!-- ปุ่มเข้าสู่ระบบ (Login Button) -->
+          <!-- Login Button -->
           <NuxtLink 
             to="/auth/login" 
-            class="px-5 py-4 rounded-full text-slate-700 font-semibold text-sm  transition-all hover:-translate-y-0.5"
-            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-white text-grey-9 bg-white hover:bg-blue-100 hover:border-blue-200']"
+            class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
+            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
           >
             {{ $t('auth.login') }}
           </NuxtLink>
           
-          <!-- ปุ่มสมัครสมาชิก (Register Button) -->
+          <!-- Register Button -->
           <NuxtLink 
             to="/auth/register" 
-            class="px-5 py-4 rounded-full bg-blue-600 text-white font-semibold text-sm   hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
+            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
           >
             {{ $t('auth.getStarted') }}
           </NuxtLink>
@@ -112,14 +110,14 @@ onUnmounted(() => {
         <template v-else>
           <NuxtLink 
             to="/dashboard" 
-            class="bg-blue-600 text-white font-semibold text-sm px-5 py-4 rounded-full  hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
+            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
           >
              {{ $t('landing.goToDashboard') }}
           </NuxtLink>
         </template>
       </div>
 
-      <!-- ปุ่มเปิดเมนูบนมือถือ (แสดงผลเฉพาะบน Mobile) -->
+      <!-- Mobile Menu Button (Visible on Mobile) -->
       <button 
         class="md:hidden mobile-toggle ml-auto relative z-[120] w-10 h-10 flex items-center justify-center rounded-full transition-colors"
         :class="[isScrolled ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100', mobileMenuOpen ? 'text-slate-900 z-[120]' : '']"
@@ -131,7 +129,7 @@ onUnmounted(() => {
     </div>
   </header>
 
-  <!-- ลิ้นชักเมนูด้านข้างสำหรับมือถือ (Mobile Navigation Drawer - แยกส่วนไปยัง body เพื่อไม่ให้มีปัญหา z-index หรือถูกบัง) -->
+  <!-- Mobile Navigation Drawer (Teleported to body to avoid z-index/clipping issues with Header) -->
   <Teleport to="body">
     <div v-if="mobileMenuOpen">
       <div 
@@ -145,7 +143,7 @@ onUnmounted(() => {
         :class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
       >
         <div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
-          <!-- ปุ่มปิดเมนู (Close Button) -->
+          <!-- Close Button -->
           <button 
             class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
             @click="mobileMenuOpen = false"
@@ -153,7 +151,7 @@ onUnmounted(() => {
             <q-icon name="close" size="20px" />
           </button>
 
-          <!-- ลิงก์สำหรับมือถือ (Mobile Links) -->
+          <!-- Mobile Links -->
           <nav class="flex flex-col gap-2 mt-8">
             <NuxtLink 
               to="/" 
@@ -171,6 +169,14 @@ onUnmounted(() => {
               {{ $t('sidebar.onlineCourses') }}
               <q-icon name="chevron_right" size="20px" class="text-slate-400" />
             </NuxtLink>
+            <NuxtLink 
+              to="/browse/recommended" 
+              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
+              @click="mobileMenuOpen = false"
+            >
+              {{ $t('sidebar.recommendedCourses') }}
+              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
+            </NuxtLink>
           </nav>
 
           <div class="mt-auto pb-8 border-t border-slate-100 pt-8">
@@ -209,14 +215,14 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-/* เอฟเฟกต์ Glassmorphism สำหรับ Header ตอนเลื่อนเมาส์ลง */
+/* Glassmorphism Effect for Scrolled Header */
 .glass-nav {
-  background: rgba(15, 23, 42, 0.95); /* พื้นหลังเข้มขึ้นเพื่อให้อ่านตัวหนังสือชัดเจน */
+  background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-/* สไตล์ปุ่มหลัก (Primary Button) แบบพรีเมียม */
+/* Premium Primary Button Styling */
 .btn-primary-premium {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
   color: white;
@@ -235,7 +241,7 @@ onUnmounted(() => {
   box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
 }
 
-/* สไตล์ปุ่มดรอง (Secondary Button) แบบพรีเมียม */
+/* Secondary Premium Button Styling */
 .btn-secondary-premium {
   padding: 0.75rem 1.5rem;
   border-radius: 0.75rem;
@@ -259,11 +265,11 @@ onUnmounted(() => {
 }
 
 /* 
-  โลจิกบังคับการแสดงผล เพื่อแก้ปัญหาการคอมไฟล์ของ Tailwind 
-  ยืนยันว่าส่วน Desktop และ Mobile เลย์เอาต์แยกจากกันอย่างชัดเจน
+  Force Visibility Logic to bypass potential Tailwind Build issues 
+  Ensures Desktop and Mobile parts are strictly separated
 */
 .desktop-nav {
-  display: flex; /* แสดงผลเป็นค่าเริ่มต้น */
+  display: flex; /* Default to visible */
 }
 
 @media (max-width: 767.98px) {
diff --git a/Frontend-Learner/components/layout/MobileNav.vue b/Frontend-Learner/components/layout/MobileNav.vue
index 876998a8..d6a80b27 100644
--- a/Frontend-Learner/components/layout/MobileNav.vue
+++ b/Frontend-Learner/components/layout/MobileNav.vue
@@ -31,7 +31,7 @@ const handleNavigate = (path: string) => {
 </template>
 
 <style scoped>
-/* เงาด้านบนแบบบางๆ เพื่อแบ่งส่วนล่างให้ชัดเจนขึ้น (Optional shadow for better separation) */
+/* Optional shadow for better separation */
 .shadow-up-1 {
   box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
 }
diff --git a/Frontend-Learner/components/profile/PasswordChangeForm.vue b/Frontend-Learner/components/profile/PasswordChangeForm.vue
index a5fb7e74..67e6f031 100644
--- a/Frontend-Learner/components/profile/PasswordChangeForm.vue
+++ b/Frontend-Learner/components/profile/PasswordChangeForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file PasswordChangeForm.vue
- * @description ฟอร์มสำหรับเปลี่ยนรหัสผ่านของผู้ใช้ (From for changing user password)
+ * @description From for changing user password
  */
 
 const props = defineProps<{
@@ -36,8 +36,8 @@ const showConfirmPassword = ref(false);
 <template>
     <div :class="[!flat ? 'card-premium p-6 md:p-8' : '']" class="h-fit">
         <div v-if="!flat" class="flex items-center gap-3 mb-8">
-            <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center">
-                <q-icon name="lock" class="text-blue-600 dark:text-blue-400 text-xl" />
+            <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
+                <q-icon name="lock" class="text-amber-600 dark:text-amber-400 text-xl" />
             </div>
             <h2 class="text-xl font-black text-slate-900 dark:text-white">
                 {{ $t('profile.security') }}
@@ -118,8 +118,8 @@ const showConfirmPassword = ref(false);
             type="submit"
                 unelevated
                 rounded
-                class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
-                style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white;"
+                class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
+                style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
                 :label="$t('profile.changePasswordBtn')"
                 :loading="loading"
             />
@@ -130,12 +130,7 @@ const showConfirmPassword = ref(false);
 
 <style scoped>
 .card-premium {
-  background-color: white;
-  border-color: #e2e8f0;
-}
-:global(.dark) .card-premium {
-  background-color: #1e293b;
-  border-color: rgba(255, 255, 255, 0.05);
+  @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
   border-radius: 1.5rem;
   border-width: 1px;
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
diff --git a/Frontend-Learner/components/profile/ProfileEditForm.vue b/Frontend-Learner/components/profile/ProfileEditForm.vue
index 7fcdc253..43d706f8 100644
--- a/Frontend-Learner/components/profile/ProfileEditForm.vue
+++ b/Frontend-Learner/components/profile/ProfileEditForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file ProfileEditForm.vue
- * @description ฟอร์มสำหรับแก้ไขข้อมูลส่วนตัวของผู้ใช้ (Form for editing user personal information)
+ * @description From for editing user personal information
  */
 
 const props = defineProps<{
@@ -93,14 +93,14 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
                 <div class="absolute inset-0 bg-black/40 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                     <q-icon name="camera_alt" class="text-white text-xl" />
                 </div>
-                <!-- ช่องเลือกไฟล์ที่ถูกซ่อนไว้ (Hidden Input) -->
+                <!-- Hidden Input -->
                 <input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
             </div>
             
             <div class="flex flex-col gap-2">
             <div class="font-bold text-slate-900 dark:text-white mb-1">{{ $t('profile.yourAvatar') }}</div>
             
-            <!-- แถวปุ่มกด (Buttons Row) -->
+            <!-- Buttons Row -->
                 <div class="flex items-center gap-3">
                 <template v-if="modelValue.photoURL">
                     <q-btn 
@@ -124,7 +124,7 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
                 </template>
                 </div>
 
-            <!-- ข้อความจำกัดขนาดไฟล์ (Add Limit Text) -->
+            <!-- Add Limit Text -->
             <div class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                 {{ $t('profile.uploadLimit') }}
             </div>
@@ -248,12 +248,7 @@ const onPhoneKeydown = (e: KeyboardEvent) => {
 
 <style scoped>
 .card-premium {
-  background-color: white;
-  border-color: #e2e8f0;
-}
-:global(.dark) .card-premium {
-  background-color: #1e293b;
-  border-color: rgba(255, 255, 255, 0.05);
+  @apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
   border-radius: 1.5rem;
   border-width: 1px;
   box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
diff --git a/Frontend-Learner/components/user/UserAvatar.vue b/Frontend-Learner/components/user/UserAvatar.vue
index 815177c2..913af928 100644
--- a/Frontend-Learner/components/user/UserAvatar.vue
+++ b/Frontend-Learner/components/user/UserAvatar.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-/**
- * @file UserAvatar.vue
- * @description คอมโพเนนต์แสดงรูปโปรไฟล์ผู้ใช้ หากไม่มีรูปจะแสดงตัวอักษรย่อของชื่อ
- */
 const props = defineProps<{
   size?: number | string
   photoURL?: string
@@ -23,7 +19,7 @@ const avatarSize = computed(() => {
 const initials = computed(() => {
   const getFirstChar = (name?: string) => {
     if (!name) return ''
-    // สำหรับชื่อภาษาไทย ถ้าตัวอักษรแรกเป็นสระนำหน้า (เ แ โ ใ ไ) ให้ข้ามไปเอาพยัญชนะ
+    // For Thai names, if the first char is a leading vowel (เ แ โ ใ ไ), skip it to get the consonant
     const leadingVowels = ['เ', 'แ', 'โ', 'ใ', 'ไ']
     if (leadingVowels.includes(name.charAt(0)) && name.length > 1) {
       return name.charAt(1)
@@ -40,7 +36,7 @@ const handleImageError = () => {
   imageError.value = true
 }
 
-// รีเซ็ตสถานะข้อผิดพลาดเมื่อรูปโปรไฟล์เปลี่ยน (Watch for photoURL changes to reset error state)
+// Watch for photoURL changes to reset error state
 watch(() => props.photoURL, () => {
   imageError.value = false
 })
diff --git a/Frontend-Learner/components/user/UserMenu.vue b/Frontend-Learner/components/user/UserMenu.vue
index 20e45784..44c3d114 100644
--- a/Frontend-Learner/components/user/UserMenu.vue
+++ b/Frontend-Learner/components/user/UserMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * @file UserMenu.vue
- * @description คอมโพเนนต์เมนู Dropdown ของโปรไฟล์ผู้ใช้ ใช้ Quasar
+ * @description User profile dropdown menu component using Quasar.
  */
 
 import { ref, computed, onMounted } from 'vue'
@@ -12,7 +12,7 @@ const { currentUser, logout } = useAuth()
 const { t } = useI18n()
 const $q = useQuasar()
 
-// จัดการการเปลี่ยนธีมแบบรวมศูนย์ (Use centralized theme management)
+// Use centralized theme management
 const { isDark, set } = useThemeMode()
 
 const isHydrated = ref(false)
@@ -21,7 +21,7 @@ onMounted(() => {
   isHydrated.value = true
 })
 
-// ตัวอักษรย่อของผู้ใช้ (User Initials)
+// User Initials
 const userInitials = computed(() => {
   if (!currentUser.value) return ''
   const f = currentUser.value.firstName?.charAt(0).toUpperCase() || 'U'
diff --git a/Frontend-Learner/composables/useAuth.ts b/Frontend-Learner/composables/useAuth.ts
index 61f5ee0a..aa8e7078 100644
--- a/Frontend-Learner/composables/useAuth.ts
+++ b/Frontend-Learner/composables/useAuth.ts
@@ -1,4 +1,45 @@
-import type { User, LoginResponse, RegisterPayload } from '@/types/auth'
+
+// Interface สำหรับข้อมูลผู้ใช้งาน (User)
+interface User {
+  id: number
+  username: string
+  email: string
+  email_verified_at?: string | null
+  created_at?: string
+  updated_at?: string
+  role: {
+    code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN'
+    name: { th: string; en: string }
+  }
+  profile?: {
+    prefix: { th: string; en: string }
+    first_name: string
+    last_name: string
+    phone: string | null
+    avatar_url: string | null
+  }
+}
+
+
+
+// Interface สำหรับข้อมูลตอบกลับตอน Login
+interface loginResponse {
+  token: string
+  refreshToken: string
+  user: User
+  profile: User['profile']
+}
+
+// Interface สำหรับข้อมูลที่ใช้ลงทะเบียน
+interface RegisterPayload {
+  username: string
+  email: string
+  password: string
+  first_name: string
+  last_name: string
+  prefix: { th: string; en: string }
+  phone: string
+}
 
 // ==========================================
 // Composable: useAuth
diff --git a/Frontend-Learner/composables/useCategory.ts b/Frontend-Learner/composables/useCategory.ts
index b5ce8f23..2677c9ec 100644
--- a/Frontend-Learner/composables/useCategory.ts
+++ b/Frontend-Learner/composables/useCategory.ts
@@ -1,21 +1,18 @@
-/**
- * @interface Category
- * @description โครงสร้างข้อมูลหมวดหมู่ (Category)
- */
+// Interface สำหรับข้อมูลหมวดหมู่ (Category)
 export interface Category {
   id: number
-  name: { // ชื่อหมวดหมู่รองรับ 2 ภาษา
+  name: {
     th: string
     en: string
     [key: string]: string
   }
-  slug: string // Slug สำหรับใช้งานบน URL
-  description: { // รายละเอียดหมวดหมู่
+  slug: string
+  description: {
     th: string
     en: string
     [key: string]: string
   }
-  icon: string // ไอคอนของหมวดหมู่อ้างอิงจาก Material Icons
+  icon: string
   sort_order: number
   is_active: boolean
   created_at: string
@@ -23,7 +20,7 @@ export interface Category {
 }
 
 export interface CategoryData {
-  total: number // จำนวนหมวดหมู่ทั้งหมด
+  total: number
   categories: Category[]
 }
 
@@ -33,24 +30,18 @@ interface CategoryResponse {
   data: CategoryData
 }
 
-/**
- * @composable useCategory
- * @description จัดการข้อมูลหมวดหมู่ (Categories) การดึงข้อมูล และการจัดการ Cache (เก็บข้อมูลจำลองชั่วคราว)
- */
+// Composable สำหรับจัดการข้อมูลหมวดหมู่
 export const useCategory = () => {
   const config = useRuntimeConfig()
   const API_BASE_URL = config.public.apiBase as string
   const { token } = useAuth()
 
-  // เก็บ Cache การดึงข้อมูลหมวดหมู่ในระดับ Global (ใช้ข้าม Component ได้โดยไม่ต้องโหลดใหม่)
+  // ใช้ useState เพื่อเก็บ Cached Data ระดับ Global (แชร์กันทุก Component)
   const categoriesState = useState<Category[]>('categories_cache', () => [])
   const isLoaded = useState<boolean>('categories_loaded', () => false)
 
-  /**
-   * @function fetchCategories
-   * @description ดึงรายการหมวดหมู่ทั้งหมดจาก API (GET /categories) 
-   * หากมีแคชอยู่แล้วจะดึงจาก State ทันที แต่อาจบังคับให้โหลดใหม่ (forceRefresh) ได้
-   */
+  // ฟังก์ชันดึงข้อมูลหมวดหมู่ทั้งหมด
+  // Endpoint: GET /categories
   const fetchCategories = async (forceRefresh = false) => {
     // ถ้ามีข้อมูลอยู่แล้วและไม่สั่งบังคับโหลดใหม่ ให้ใช้ข้อมูลเดิมทันที
     if (isLoaded.value && !forceRefresh && categoriesState.value.length > 0) {
@@ -71,7 +62,7 @@ export const useCategory = () => {
 
       const categories = response.data?.categories || []
       
-      // บันทึกรายการหมวดหมู่ลง State Cache
+      // เก็บข้อมูลลง State
       categoriesState.value = categories
       isLoaded.value = true
 
@@ -83,9 +74,9 @@ export const useCategory = () => {
     } catch (err: any) {
       console.error('Fetch categories failed:', err)
       
-      // กรณีเกิด Error 429 ระบบจะทำการหน่วงเวลา (1.5 วิ) และลองโหลดข้อมูลใหม่อีก 1 ครั้ง (Retry)
+      // Retry logic for 429 Too Many Requests
       if (err.statusCode === 429 || err.status === 429) {
-          await new Promise(resolve => setTimeout(resolve, 1500)); // หน่วงเวลา 1.5 วินาที
+          await new Promise(resolve => setTimeout(resolve, 1500)); // Wait 1.5s
           try {
                 const retryRes = await $fetch<CategoryResponse>(`${API_BASE_URL}/categories`, {
                   method: 'GET',
diff --git a/Frontend-Learner/composables/useCourse.ts b/Frontend-Learner/composables/useCourse.ts
index d320302a..1ae4a969 100644
--- a/Frontend-Learner/composables/useCourse.ts
+++ b/Frontend-Learner/composables/useCourse.ts
@@ -1,14 +1,151 @@
-import type { 
-    Course, 
-    CourseResponse, 
-    SingleCourseResponse, 
-    EnrolledCourse, 
-    EnrolledCourseResponse, 
-    QuizAnswerSubmission, 
-    QuizSubmitRequest, 
-    QuizResult, 
-    Certificate 
-} from '@/types/course'
+// Interface สำหรับข้อมูลคอร์สเรียน (Public Course Data)
+export interface Course {
+  id: number
+  title: string | { th: string; en: string } // รองรับ 2 ภาษา
+  slug: string
+  description: string | { th: string; en: string }
+  thumbnail_url: string
+  price: string
+  is_free: boolean
+  original_price?: string
+  have_certificate: boolean
+  status: string // DRAFT, PUBLISHED
+  category_id: number
+  created_at?: string
+  updated_at?: string
+  created_by?: number
+  updated_by?: number
+  approved_at?: string
+  approved_by?: number
+  rejection_reason?: string
+  enrolled?: boolean
+  total_lessons?: number
+  
+
+  rating?: string
+  lessons?: number | string
+  levelType?: 'neutral' | 'warning' | 'success' // ใช้สำหรับการแสดงผล Badge ระดับความยาก (Frontend Logic)
+  
+  // โครงสร้างบทเรียน (Chapters & Lessons)
+  chapters?: {
+    id: number
+    title: string | { th: string; en: string }
+    lessons: {
+      id: number
+      title: string | { th: string; en: string }
+      duration_minutes: number
+      video_url?: string
+    }[]
+  }[]
+
+  // ข้อมูลผู้สอนและเจ้าของคอร์ส
+  creator?: {
+    id: number
+    username: string
+    email: string
+    profile: {
+      first_name: string
+      last_name: string
+      avatar_url: string
+    }
+  }
+  instructors?: {
+    user_id: number
+    is_primary: boolean
+    user: {
+      id: number
+      username: string
+      email: string
+      profile: {
+        first_name: string
+        last_name: string
+        avatar_url: string
+      }
+    }
+  }[]
+}
+
+interface CourseResponse {
+  code: number
+  message: string
+  data: Course[]
+  total: number
+  page?: number
+  limit?: number
+  totalPages?: number
+}
+
+interface SingleCourseResponse {
+  code: number
+  message: string
+  data: Course
+}
+
+// Interface สำหรับคอร์สที่ผู้ใช้ลงทะเบียนเรียนแล้ว (My Course)
+export interface EnrolledCourse {
+    id: number
+    course_id: number
+    course: Course
+    status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED'
+    progress_percentage: number
+    enrolled_at: string
+    started_at?: string
+    completed_at?: string
+    last_accessed_at?: string
+}
+
+interface EnrolledCourseResponse {
+    code: number
+    message: string
+    data: EnrolledCourse[]
+    total: number
+    page: number
+    limit: number
+}
+
+// Interface สำหรับการส่งคำตอบแบบทดสอบ (Quiz Submission)
+export interface QuizAnswerSubmission {
+    question_id: number
+    choice_id: number
+}
+
+export interface QuizSubmitRequest {
+    answers: QuizAnswerSubmission[]
+}
+
+// Interface สำหรับผลลัพธ์การสอบ (Quiz Result)
+export interface QuizResult {
+    answers_review: {
+        score: number
+        is_correct: boolean
+        correct_choice_id: number
+        selected_choice_id: number
+        question_id: number
+    }[]
+    completed_at: string
+    started_at: string
+    attempt_number: number
+    passing_score: number
+    is_passed: boolean
+    correct_answers: number
+    total_questions: number
+    total_score: number
+    score: number
+    quiz_id: number
+    attempt_id: number
+}
+
+// Interface สำหรับ Certificate
+export interface Certificate {
+    certificate_id: number
+    course_id: number
+    course_title: {
+        en: string
+        th: string
+    }
+    issued_at: string
+    download_url: string
+}
 
 // ==========================================
 // Composable: useCourse
diff --git a/Frontend-Learner/composables/useFormValidation.ts b/Frontend-Learner/composables/useFormValidation.ts
index 20987f40..ae637bd1 100644
--- a/Frontend-Learner/composables/useFormValidation.ts
+++ b/Frontend-Learner/composables/useFormValidation.ts
@@ -1,7 +1,3 @@
-/**
- * @interface ValidationRule
- * @description กฎการตรวจสอบความถูกต้องของฟิลด์ (เช่น บังคับกรอก, เช็คความยาว, ตรวจอีเมล)
- */
 export interface ValidationRule {
   required?: boolean
   minLength?: number
@@ -12,18 +8,10 @@ export interface ValidationRule {
   custom?: (value: string) => string | null
 }
 
-/**
- * @interface FieldErrors
- * @description รูปแบบการเก็บข้อผิดพลาด (Key ของฟิลด์ คู่กับข้อความแจ้งเตือน)
- */
 export interface FieldErrors {
   [key: string]: string
 }
 
-/**
- * @composable useFormValidation
- * @description ใช้สำหรับตรวจสอบความถูกต้อง (Validate) ของข้อมูลในแบบฟอร์ม
- */
 export function useFormValidation() {
   const errors = ref<FieldErrors>({})
 
@@ -64,7 +52,6 @@ export function useFormValidation() {
     return null
   }
 
-  // ฟังก์ชันหลักที่เอาแบบฟอร์ม (formData) มาตรวจกับเช็คลิสต์ทั้งหมด (validationRules)
   const validate = (
     formData: Record<string, string>,
     validationRules: Record<string, { rules: ValidationRule; label: string; messages?: Record<string, string> }>
@@ -80,18 +67,14 @@ export function useFormValidation() {
       }
     }
 
-    // บันทึกข้อผิดพลาดที่พบทั้งหมดลงใน State
     errors.value = newErrors
-    // คืนค่าบอกว่า "ฟอร์มนี้ผ่านทั้งหมดไหม" (true คือผ่านหมด)
     return isValid
   }
 
-  // ฟังก์ชันลบข้อผิดพลาดทิ้งทั้งหมด (สำหรับตอนเริ่มกรอกใหม่)
   const clearErrors = () => {
     errors.value = {}
   }
 
-  // ฟังก์ชันลบข้อผิดพลาดเฉพาะฟิลด์ที่กำหนด
   const clearFieldError = (field: string) => {
     if (errors.value[field]) {
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
diff --git a/Frontend-Learner/composables/useMediaPrefs.ts b/Frontend-Learner/composables/useMediaPrefs.ts
index b71ea5e8..2bed3024 100644
--- a/Frontend-Learner/composables/useMediaPrefs.ts
+++ b/Frontend-Learner/composables/useMediaPrefs.ts
@@ -1,27 +1,22 @@
-/**
- * @composable useMediaPrefs
- * @description จัดการตั้งค่าระดับเสียงและสถานะปิดเสียง (Mute) ของวิดีโอ/สื่อ
- * โดยจะเก็บค่าแยกตามบัญชีผู้ใช้งาน และสั่งประยุกต์ใช้กับ <video> ให้อัตโนมัติ
- */
 export const useMediaPrefs = () => {
-    // 1. สถานะส่วนกลาง (Global State)
-    // ใช้ useState เพื่อแชร์ค่าเดียวกันทั่วหน้าเว็บ (เช่น เปลี่ยนหน้าแล้วระดับเสียงยังคงที่)
+    // 1. Global State
+    // ใช้ useState เพื่อแชร์ค่าเดียวกันทั่วทั้ง App (เช่น เปลี่ยนหน้าแล้วเสียงยังเท่าเดิม)
     const volume = useState<number>('media_prefs_volume', () => 1)
     const muted = useState<boolean>('media_prefs_muted', () => false)
     
     const { user } = useAuth()
 
-    // 2. ฟังก์ชันช่วยสร้าง Key สำหรับ Storage (เก็บแยกตาม User)
+    // 2. Storage Key Helper (User Specific)
     const getStorageKey = () => {
         const userId = user.value?.id || 'guest'
         return `media:prefs:v1:${userId}`
     }
 
-    // 3. ระบบบันทึกการตั้งค่าลงเบราว์เซอร์ (Throttled เพื่อไม่ให้บันทึกถี่เกินไป)
+    // 3. Save Logic (Throttled)
     let saveTimeout: ReturnType<typeof setTimeout> | null = null
     
     const save = () => {
-        if (import.meta.server) return // เลี่ยงไม่ได้ต้องทำงานบนฝั่ง Client เท่านั้น
+        if (import.meta.server) return
 
         if (saveTimeout) clearTimeout(saveTimeout)
         saveTimeout = setTimeout(() => {
@@ -34,12 +29,12 @@ export const useMediaPrefs = () => {
                 }
                 localStorage.setItem(key, JSON.stringify(data))
             } catch (e) {
-                console.error('ไม่สามารถบันทึกการตั้งค่าสื่อได้', e)
+                console.error('Failed to save media prefs', e)
             }
-        }, 500) // หน่วงเวลา 500ms
+        }, 500) // Throttle 500ms
     }
 
-    // 4. ระบบโหลดการตั้งค่าเก่าขึ้นมา (Load Logic)
+    // 4. Load Logic
     const load = () => {
         if (import.meta.server) return
         
@@ -56,20 +51,20 @@ export const useMediaPrefs = () => {
                 }
             }
         } catch (e) {
-            console.error('ไม่สามารถโหลดการตั้งค่าสื่อได้', e)
+            console.error('Failed to load media prefs', e)
         }
     }
 
-    // 5. ฟังก์ชันสำหรับอัปเดตและสั่งบันทึกการตั้งค่า (Setters)
+    // 5. Setters (With Logic)
     const setVolume = (val: number) => {
         const clamped = Math.max(0, Math.min(1, val))
         volume.value = clamped
         
-        // ยกเลิกปิดเสียงอัตโนมัติ ถ้าระดับเสียงเพิ่มขึ้นจาก 0
+        // Auto unmute if volume increased from 0
         if (clamped > 0 && muted.value) {
             muted.value = false
         }
-        // ปิดเสียงอัตโนมัติ ถ้าระดับเสียงกลายเป็น 0
+        // Auto mute if volume set to 0
         if (clamped === 0 && !muted.value) {
             muted.value = true
         }
@@ -80,7 +75,7 @@ export const useMediaPrefs = () => {
     const setMuted = (val: boolean) => {
         muted.value = val
         
-        // หากผู้ใช้กดยกเลิกการปิดเสียงขณะที่ระดับเสียงเคยเป็น 0 ควรตั้งค่าเริ่มต้นให้เป็น 1
+        // Logic: Unmuting should restore volume if it was 0
         if (!val && volume.value === 0) {
             volume.value = 1
         }
@@ -88,15 +83,15 @@ export const useMediaPrefs = () => {
         save()
     }
 
-    // 6. ฟังก์ชันจับคู่ใช้กับการเล่นสื่อ (ตย. <video ref="videoEl"> -> applyTo(videoEl.value))
+    // 6. Apply & Bind to Element (The Magic)
     const applyTo = (el: HTMLMediaElement | null | undefined) => {
         if (!el) return () => {}
 
-        // ใส่ค่าตั้งต้นให้กับออบเจ็กต์สื่อ
+        // Initial Apply
         el.volume = volume.value
         el.muted = muted.value
 
-        // A. สังเกตการเปลี่ยนแปลงจาก State -> เพื่อส่งไปอัปเดต Element สื่อ
+        // A. Watch State -> Update Element
         const stopVolWatch = watch(volume, (v) => {
             if (Math.abs(el.volume - v) > 0.01) el.volume = v
         })
@@ -104,9 +99,9 @@ export const useMediaPrefs = () => {
             if (el.muted !== m) el.muted = m
         })
 
-        // B. สังเกตการเปลี่ยนแปลงจาก Element (เช่น ผู้ใช้กดปุ่มเร่งเสียงในวิดีโอตรงๆ) -> เพื่อเอาค่ามาอัปเดต State 
+        // B. Listen Element -> Update State (e.g. Native Controls)
         const onVolumeChange = () => {
-            // อัปเดตเฉพาะเมื่อมีความแตกต่างเพื่อหลีกเลี่ยง Loop อนันต์
+            // Update state only if diff allows (prevent loop)
             if (Math.abs(el.volume - volume.value) > 0.01) {
                 volume.value = el.volume
                 save()
@@ -118,7 +113,7 @@ export const useMediaPrefs = () => {
         }
         el.addEventListener('volumechange', onVolumeChange)
 
-        // ฟังก์ชันล้างค่าเพื่อเลิกติดตาม (Cleanup แบบส่งกลับ (Return))
+        // Cleanup function
         return () => {
             stopVolWatch()
             stopMutedWatch()
@@ -126,11 +121,11 @@ export const useMediaPrefs = () => {
         }
     }
 
-    // 7. จังหวะวงจรชีวิตตอนโหลดเสร็จและระบบ Sync
+    // 7. Lifecycle & Sync
     if (import.meta.client) {
         onMounted(() => {
             load()
-            // ระบบ Sync กับแท็บหรือหน้าต่างเดียวกันหากถูกเปิดไว้
+            // Cross-tab sync
             window.addEventListener('storage', (e) => {
                 if (e.key === getStorageKey()) {
                     load()
diff --git a/Frontend-Learner/composables/useNavItems.ts b/Frontend-Learner/composables/useNavItems.ts
index 7c8fc6e4..a74e4676 100644
--- a/Frontend-Learner/composables/useNavItems.ts
+++ b/Frontend-Learner/composables/useNavItems.ts
@@ -1,19 +1,17 @@
 /**
  * @file useNavItems.ts
- * @description ศูนย์รวมจัดการเมนูนำทาง (Navigation Items) เพื่อให้ใช้ข้อมูลชุดเดียวกันทั้งเว็บ
- * (เช่น เมนูด้านข้าง, เมนูบนมือถือ, และเมนูโปรไฟล์ผู้ใช้)
+ * @description Single Source of Truth for navigation items used across the app (Sidebar, Mobile Nav, User Menu).
  */
 
 export interface NavItem {
-  to: string           // ลิงก์ปลายทาง
-  labelKey: string     // คีย์ภาษาสำหรับ i18n
-  icon: string         // ไอคอนจาก Material Icons
-  showOn: ('sidebar' | 'mobile' | 'userMenu')[] // กำหนดให้โชว์ที่ส่วนไหนบ้าง
-  roles?: string[]     // กำหนดสิทธิ์ผู้ใช้ที่จะเห็น (ถ้ามี)
+  to: string
+  labelKey: string
+  icon: string
+  showOn: ('sidebar' | 'mobile' | 'userMenu')[]
+  roles?: string[]
 }
 
 export const useNavItems = () => {
-  // เมนูทั้งหมดในระบบ กำหนดไว้ที่เดียว
   const allNavItems: NavItem[] = [
     {
       to: '/dashboard',
@@ -65,7 +63,6 @@ export const useNavItems = () => {
     }
   ]
 
-  // คัดกรองเมนูที่จะเอาไปแสดงแต่ละตำแหน่ง
   const sidebarItems = computed(() => allNavItems.filter(item => item.showOn.includes('sidebar')))
   const mobileItems = computed(() => allNavItems.filter(item => item.showOn.includes('mobile')))
   const userMenuItems = computed(() => allNavItems.filter(item => item.showOn.includes('userMenu')))
diff --git a/Frontend-Learner/composables/useQuizRunner.ts b/Frontend-Learner/composables/useQuizRunner.ts
index 081e2aa8..840aaa60 100644
--- a/Frontend-Learner/composables/useQuizRunner.ts
+++ b/Frontend-Learner/composables/useQuizRunner.ts
@@ -19,107 +19,95 @@ export interface AnswerState {
 
 /**
  * @composable useQuizRunner
- * @description จัดการ State (สถานะ) และ Logic สำหรับการทำแบบทดสอบ (Quiz)
- * ครอบคลุมการแสดงคำถาม, บันทึกคำตอบ, และตรวจสอบการข้ามคำถาม
+ * @description Manages the state and logic for running a quiz activity.
  */
 export const useQuizRunner = () => {
-  // ================= State (สถานะเก็บค่าต่างๆ ของข้อสอบ) =================
-  const questions = useState<QuizQuestion[]>('quiz-questions', () => []); // เก็บรายการคำถามทั้งหมด
-  const answers = useState<Record<number, AnswerState>>('quiz-answers', () => ({})); // เก็บคำตอบที่ผู้ใช้ตอบ แยกตาม ID คำถาม
-  const currentQuestionIndex = useState<number>('quiz-current-index', () => 0); // ลำดับคำถามที่กำลังทำอยู่ปัจจุบัน (เริ่มที่ 0)
-  const loading = useState<boolean>('quiz-loading', () => false); // สถานะตอนกำลังกดเซฟหรือโหลดข้อมูล
-  const lastError = useState<string | null>('quiz-error', () => null); // เก็บข้อความแจ้งเตือนข้อผิดพลาดล่าสุด
+  // State
+  const questions = useState<QuizQuestion[]>('quiz-questions', () => []);
+  const answers = useState<Record<number, AnswerState>>('quiz-answers', () => ({}));
+  const currentQuestionIndex = useState<number>('quiz-current-index', () => 0);
+  const loading = useState<boolean>('quiz-loading', () => false);
+  const lastError = useState<string | null>('quiz-error', () => null);
 
-  // ================= Getters (ดึงค่าที่ถูกประมวลผลแล้ว) =================
-  const currentQuestion = computed(() => questions.value[currentQuestionIndex.value]); // ดึงคำถามข้อปัจจุบัน
+  // Getters
+  const currentQuestion = computed(() => questions.value[currentQuestionIndex.value]);
   
-  const currentAnswer = computed(() => { // ดึงคำตอบในข้อปัจจุบัน
+  const currentAnswer = computed(() => {
     if (!currentQuestion.value) return null;
     return answers.value[currentQuestion.value.id];
   });
 
-  const totalQuestions = computed(() => questions.value.length); // จำนวนคำถามทั้งหมดในแบบทดสอบ
-  const isLastQuestion = computed(() => currentQuestionIndex.value === questions.value.length - 1); // เช็คว่าใช่คำถามข้อสุดท้ายหรือไม่
-  const isFirstQuestion = computed(() => currentQuestionIndex.value === 0); // เช็คว่าใช่คำถามข้อแรกหรือไม่
+  const totalQuestions = computed(() => questions.value.length);
+  const isLastQuestion = computed(() => currentQuestionIndex.value === questions.value.length - 1);
+  const isFirstQuestion = computed(() => currentQuestionIndex.value === 0);
 
-  // ================= Actions (ฟังก์ชันหลักสำหรับการทำงาน) =================
-  
-  // ฟังก์ชันเริ่มต้นสร้าง/โหลดข้อสอบ (กำหนดโครงสร้างพื้นฐาน)
+  // Actions
   function initQuiz(quizData: any) {
     if (!quizData || !quizData.questions) return;
     
     questions.value = quizData.questions; 
-    currentQuestionIndex.value = 0; // รีเซ็ตไปที่ข้อ 1 ใหม่
+    currentQuestionIndex.value = 0;
     answers.value = {};
     lastError.value = null;
 
-    // เตรียมโครงสร้างคำตอบรองรับทุกข้อ
     questions.value.forEach(q => {
       answers.value[q.id] = {
         questionId: q.id,
         value: null,
-        is_saved: false, // บันทึกและส่ง API เรียบร้อยหรือยัง
-        status: 'not_started', // สถานะเริ่มต้นของคำถาม
-        touched: false, // ผู้ใช้เคยเปิดเข้ามาดูข้อนีัหรือยัง
+        is_saved: false,
+        status: 'not_started',
+        touched: false,
       };
     });
 
-    // เริ่มต้นบันทึกเวลา/เข้าสู่ข้อที่ 1 ทันทีเมื่ออธิบายเสร็จ
     if (questions.value.length > 0) {
       enterQuestion(questions.value[0].id);
     }
   }
 
-  // ฟังก์ชันสลับสถานะเมื่อกดเข้ามาที่คำถามนั้นๆ
   function enterQuestion(qId: number) {
     const ans = answers.value[qId];
     if (ans) {
       ans.touched = true;
       if (ans.status === 'not_started' || ans.status === 'skipped') {
-         ans.status = 'in_progress'; // เปลี่ยนสถานะเป็น 'กำลังทำ'
+         ans.status = 'in_progress';
       }
     }
   }
 
-  // ตรวจสอบเงื่อนไขว่าผู้ใช้สามารถออกจากคำถามปัจจุบันไปยังข้ออื่นได้หรือไม่
   function canLeaveCurrent(): { allowed: boolean; reason?: string } {
     if (!currentQuestion.value) return { allowed: true };
     const q = currentQuestion.value;
     const a = answers.value[q.id];
     
-    // สามารถออกได้ถ้าคำถามทำถูกหรือโจทย์อนุญาตให้ข้ามได้
     if (a.status === 'completed' || a.is_saved) return { allowed: true };
     if (q.is_skippable) return { allowed: true };
     
-    // บังคับให้ตอบถ้าไม่ได้อนุญาตให้ข้าม และไม่ได้ตอบ
     if (!a.is_saved && a.value === null) {
-      return { allowed: false, reason: 'ต้องการคำตอบสำหรับข้อบังคับนี้' };
+      return { allowed: false, reason: 'This question is required.' };
     }
 
     return { allowed: true };
   }
 
-  // ฟังก์ชันอัปเดตค่าตัวเลือกที่ผู้ใช้กดเลือกในข้อปัจจุบัน
   function updateAnswer(val: any) {
      if (!currentQuestion.value) return;
      const qId = currentQuestion.value.id;
      answers.value[qId].value = val;
      
-     // หากมีแก้ไขคำตอบหลังจากกดเซฟไปแล้ว ให้เปลี่ยนสถานะให้ระบบรู้ว่าต้องเซฟใหม่
      if (answers.value[qId].is_saved) {
         answers.value[qId].is_saved = false;
-        answers.value[qId].status = 'in_progress'; 
+        answers.value[qId].status = 'in_progress';
      }
   }
 
-  // ล็อกและบันทึกข้อสอบเมื่อกดปุ่ม "ตกลง/ส่งคำตอบ" สำหรับข้อนั้นๆ
   async function saveCurrentAnswer() {
     if (!currentQuestion.value) return;
     const qId = currentQuestion.value.id;
     const ans = answers.value[qId];
 
     if (ans.value === null) {
-      lastError.value = "กรุณาเลือกคำตอบอย่างน้อย 1 ตัวเลือก";
+      lastError.value = "Please provide an answer.";
       return false;
     }
 
@@ -127,34 +115,30 @@ export const useQuizRunner = () => {
     lastError.value = null;
 
     try {
-      // หมายเหตุ: การเชื่อมต่อ API หลักต้องทำที่ไฟล์ component, ตัวนี้จัดการแค่เรื่อง State
       ans.is_saved = true;
-      ans.status = 'completed'; // มาร์คว่าเป็นข้อที่ทำเสร็จแล้ว
+      ans.status = 'completed';
       ans.last_saved_at = new Date().toISOString();
       return true;
     } catch (e) {
-      lastError.value = "เกิดข้อผิดพลาดในการบันทึกคำตอบ";
+      lastError.value = "Failed to save answer.";
       return false;
     } finally {
       loading.value = false;
     }
   }
 
-  // วินิจฉัยก่อนสั่งผู้ใช้ย้ายไปยังคำถามอื่นหน้าอื่นตามดัชนีระบุ
   function handleLeaveLogic(targetIndex: number) {
     if (targetIndex === currentQuestionIndex.value) return;
 
-    // ตรวจสอบขั้นสุดท้าย ป้องกันคนคลิกแอบหนีข้อที่บังคับทำ
     const check = canLeaveCurrent();
     if (!check.allowed) {
-      lastError.value = check.reason || "จำเป็นต้องตอบข้อนี้ก่อนข้าม";
+      lastError.value = check.reason || "Required question.";
       return false;
     }
 
     const currQ = currentQuestion.value;
     if (currQ) {
         const currAns = answers.value[currQ.id];
-        // หากผู้ใช้ทิ้งขว้างโดยที่ไม่บังคับ ให้ทิ้งสถานะเป็นข้าม ('skipped')
         if (currAns.status !== 'completed' && !currAns.is_saved) {
           currAns.status = 'skipped';
         }
@@ -163,7 +147,6 @@ export const useQuizRunner = () => {
     currentQuestionIndex.value = targetIndex;
     lastError.value = null;
 
-    // ติดตามสถานะ 'touched' ในข้อใหม่ที่เข้าไปล่าสุด
     if (questions.value[targetIndex]) {
        enterQuestion(questions.value[targetIndex].id);
     }
diff --git a/Frontend-Learner/composables/useThemeMode.ts b/Frontend-Learner/composables/useThemeMode.ts
index 6321381b..ec01317a 100644
--- a/Frontend-Learner/composables/useThemeMode.ts
+++ b/Frontend-Learner/composables/useThemeMode.ts
@@ -1,41 +1,26 @@
 import { useQuasar } from 'quasar'
 
-/**
- * @composable useThemeMode
- * @description จัดการระบบโหมดสว่าง/มืด (Light/Dark Theme) ของแพลตฟอร์ม
- * ครอบคลุมการสั่งบันทึกการตั้งค่า, เปลี่ยนคลาส Tailwind และ Sync ซิงก์กับ Quasar UI
- */
 export const useThemeMode = () => {
   const $q = useQuasar()
 
-  // สถานะเริ่มต้นของโหมดมืด (สำหรับการทำ SSR ถูกเซ็ตเป็น false (สว่าง) ไว้ก่อน)
+  // deterministic on SSR: default = light
   const isDark = useState<boolean>('theme:isDark', () => false)
 
-  // ฟังก์ชันใช้คลาสกับ Tag <html> เพื่อให้ Tailwind หรือ CSS รันโหมดมืด
   const applyTheme = (value: boolean) => {
-    if (!process.client) return // หากทำงานฝั่งเซิร์ฟเวอร์ จะไม่สั่งให้รัน DOM
-    
-    // สลับคลาส 'dark' หรือปิด
+    if (!process.client) return
     document.documentElement.classList.toggle('dark', value)
-    
-    // สั่งให้ Quasar (UI Framework) ปรับโหมดสีให้ตรงกัน (มืด/สว่าง)
     $q.dark.set(value)
-    
-    // บันทึกการตั้งค่าลงเครื่องระยะยาวเบราว์เซอร์
     localStorage.setItem('theme', value ? 'dark' : 'light')
   }
 
 
 
-  // จับตาดูเมื่อตัวแปรเปลี่ยนค่าค่อยทำการเปลี่ยนโหมดบนหน้าจอ
   watch(isDark, (v) => applyTheme(v))
 
-  // ฟังก์ชันสั่งสลับโหมด ไปมา (Toggle)
   const toggle = () => {
     isDark.value = !isDark.value
   }
 
-  // ฟังก์ชันสำหรับกำหนดตั้งค่าโหมดแบบเจาะจง
   const set = (v: boolean) => {
     isDark.value = v
   }
diff --git a/Frontend-Learner/constants/landing.ts b/Frontend-Learner/constants/landing.ts
deleted file mode 100644
index 7de23d50..00000000
--- a/Frontend-Learner/constants/landing.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @file landing.ts
- * @description ข้อมูลคงที่ (Static data) แบบจำลองที่เอาไว้แสดงผลบนหน้า Landing page
- */
-
-export const CATEGORY_CARDS = [
-  { 
-    title: 'โปรแกรมมิ่ง', 
-    desc: 'เชี่ยวชาญการเขียนโค้ดและพัฒนาซอฟต์แวร์', 
-    icon: 'o_code', 
-    slug: 'programming',
-  },
-  { 
-    title: 'การออกแบบ', 
-    desc: 'ทักษะ UI/UX และการออกแบบระดับมือโปร', 
-    icon: 'o_palette', 
-    slug: 'design',
-  },
-  { 
-    title: 'ธุรกิจ', 
-    desc: 'ทักษะการจัดการและความเป็นผู้นำสากล', 
-    icon: 'o_business_center', 
-    slug: 'business',
-  }
-]
-
-export const WHY_CHOOSE_US = [
-  {
-    title: 'ผู้สอนเชี่ยวชาญ',
-    desc: 'เรียนรู้จากผู้นำในอุตสาหกรรมที่มีประสบการณ์การทำงานหลายปีในบริษัทเทคโนโลยีชั้นนำระดับโลก',
-    icon: 'o_groups',
-  },
-  {
-    title: 'การเรียนรู้ที่ยืดหยุ่น',
-    desc: 'เรียนตามจังหวะของคุณเอง ได้ทุกที่ทุกเวลา เข้าถึงเนื้อหาคอร์สที่สมัครเรียนได้ตลอดชีพ',
-    icon: 'o_schedule',
-  },
-  {
-    title: 'ประกาศนียบัตรเมื่อเรียนจบ',
-    desc: 'รับวุฒิบัตรที่เป็นที่ยอมรับเพื่อเสริมพอร์ตโฟลิโอระดับมืออาชีพของคุณและแชร์ลง LinkedIn ได้โดยตรง',
-    icon: 'o_verified',
-  }
-]
diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json
index b854b7c6..db41be18 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -24,8 +24,7 @@
     "emptyLibraryDesc": "Start learning new things today. Browse interesting courses to develop your skills.",
     "viewAllCourses": "View All Courses",
     "recommendedCourses": "Recommended Courses",
-    "noRecommended": "No recommended courses found",
-    "moreCourses": "More Courses"
+    "noRecommended": "No recommended courses found"
   },
   "menu": {
     "continueLearning": "Continue Learning",
@@ -88,14 +87,10 @@
     "overview": "Home",
     "myCourses": "My Courses",
     "browseCourses": "Browse Courses",
-    "onlineCourses": "All Courses",
+    "onlineCourses": "Online Courses",
     "recommendedCourses": "Recommended Courses",
     "announcements": "Announcements",
-    "profile": "My Profile",
-    "accountGroup": "Account",
-    "promoTitle": "Find the right course",
-    "promoSubtitle": "Level up your skills",
-    "learnMore": "Learn More"
+    "profile": "My Profile"
   },
   "discovery": {
     "title": "All Courses",
@@ -103,9 +98,6 @@
     "sortRecent": "Sort by: Recent",
     "sortPopular": "Popular",
     "categoryTitle": "Categories",
-    "design": "Design",
-    "programming": "Programming",
-    "business": "Business",
     "showMore": "Show More",
     "showLess": "Show Less",
     "emptyTitle": "No courses found",
@@ -115,22 +107,15 @@
     "backToCatalog": "Back to Catalog",
     "selectable": "Selected",
     "foundTotal": "Found Total",
-    "items": "items",
-    "subtitle": "Choose to learn new skills from our curated quality courses",
-    "searchBtn": "Search"
+    "items": "items"
   },
   "myCourses": {
-    "title": "My Courses",
-    "subtitle": "Track your progress and continue learning from where you left off",
-    "searchPlaceholder": "Search my courses...",
     "filterAll": "All",
     "filterProgress": "In Progress",
     "filterCompleted": "Completed",
     "emptyTitle": "No courses in this category",
     "emptyDesc": "You don't have any courses here yet. Browse our catalog to find interesting courses.",
-    "goToDiscovery": "Go to Courses",
-    "searchNoResult": "No matching courses found",
-    "searchNoResultDesc": "Try changing category or your search term"
+    "goToDiscovery": "Go to Courses"
   },
   "enrollment": {
     "successTitle": "Enrollment Successful!",
@@ -159,7 +144,7 @@
     "accountDetails": "Account Details",
     "editPersonalDesc": "Edit Personal Information",
     "yourAvatar": "Your Profile Photo",
-    "avatarHint": "Only JPG, PNG",
+    "avatarHint": "PNG, JPG only",
     "uploadNew": "Upload New Photo",
     "changeAvatar": "Change Profile Photo",
     "removeAvatar": "Remove Profile Photo",
@@ -190,15 +175,7 @@
     "emailVerified": "Email Verified",
     "myCertificates": "My Certificates",
     "viewCertificate": "View Certificate",
-    "issuedAt": "Issued at",
-    "publicInfo": "Information visible to the public on the platform",
-    "uploading": "Uploading...",
-    "selectPrefix": "Select Prefix",
-    "verifyNow": "Click to verify email",
-    "verifying": "Sending...",
-    "saving": "Saving...",
-    "securitySubtitle": "Manage password and account access",
-    "password": "Password"
+    "issuedAt": "Issued at"
   },
   "userMenu": {
     "home": "Home",
@@ -221,9 +198,7 @@
     "emailVerifiedDesc": "Your account has been successfully verified.",
     "invalidToken": "Invalid verification token",
     "tokenExpired": "Token expired or invalid",
-    "logout": "Log Out",
-    "logoutConfirmTitle": "Confirm Logout",
-    "logoutConfirmMessage": "Are you sure you want to log out of the system?"
+    "logout": "Log Out"
   },
   "language": {
     "label": "Language / ภาษา",
@@ -234,7 +209,6 @@
     "newBadge": "New",
     "popularBadge": "Popular",
     "save": "Save",
-    "saveChanges": "Save Changes",
     "ok": "OK",
     "close": "Close",
     "cancel": "Cancel",
@@ -248,9 +222,7 @@
     "backToHome": "Back to Home",
     "error": "Error",
     "loading": "Loading",
-    "items": "Items",
-    "student": "Student",
-    "latest": "Latest"
+    "items": "Items"
   },
   "classroom": {
     "backToDashboard": "Back to My Courses",
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index d096b4ad..86154237 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -24,8 +24,7 @@
     "emptyLibraryDesc": "เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ",
     "viewAllCourses": "ดูคอร์สเรียนทั้งหมด",
     "recommendedCourses": "คอร์สแนะนำ",
-    "noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ",
-    "moreCourses": "คอร์สเพิ่มเติม"
+    "noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ"
   },
   "menu": {
     "continueLearning": "เรียนต่อจากเดิม",
@@ -88,14 +87,10 @@
     "overview": "หน้าหลัก",
     "myCourses": "คอร์สของฉัน",
     "browseCourses": "ค้นหาคอร์ส",
-    "onlineCourses": "คอร์สเรียนทั้งหมด",
+    "onlineCourses": "คอร์สออนไลน์",
     "recommendedCourses": "คอร์สเรียนแนะนำ",
     "announcements": "ข่าวประกาศ",
-    "profile": "บัญชีผู้ใช้",
-    "accountGroup": "บัญชี",
-    "promoTitle": "ค้นหาคอร์สที่ใช่",
-    "promoSubtitle": "ยกระดับทักษะของคุณ",
-    "learnMore": "เรียนรู้เพิ่มเติม"
+    "profile": "บัญชีผู้ใช้"
   },
   "discovery": {
     "title": "รายการคอร์สทั้งหมด",
@@ -103,9 +98,6 @@
     "sortRecent": "เรียงตาม: ล่าสุด",
     "sortPopular": "ยอดนิยม",
     "categoryTitle": "หมวดหมู่",
-    "design": "การออกแบบ",
-    "programming": "การเขียนโปรแกรม",
-    "business": "ธุรกิจ",
     "showMore": "แสดงเพิ่มเติม",
     "showLess": "แสดงน้อยลง",
     "emptyTitle": "ไม่พบผลการค้นหา",
@@ -116,21 +108,15 @@
     "selectable": "รายการที่เลือก",
     "foundTotal": "พบทั้งหมด",
     "items": "รายการ",
-    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ",
-    "searchBtn": "ค้นหา"
+    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ"
   },
   "myCourses": {
-    "title": "คอร์สของฉัน",
-    "subtitle": "ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้",
-    "searchPlaceholder": "ค้นหาชื่อคอร์สของฉัน...",
     "filterAll": "ทั้งหมด",
     "filterProgress": "กำลังเรียน",
     "filterCompleted": "เรียนจบแล้ว",
     "emptyTitle": "ยังไม่มีคอร์สในหมวดหมู่นี้",
     "emptyDesc": "คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา",
-    "goToDiscovery": "ไปที่รายการคอร์ส",
-    "searchNoResult": "ไม่พบคอร์สที่สอดคล้อง",
-    "searchNoResultDesc": "ลองเปลี่ยนหมวดหมู่หรือคำค้นหาของคุณ"
+    "goToDiscovery": "ไปที่รายการคอร์ส"
   },
   "enrollment": {
     "successTitle": "ลงทะเบียนสำเร็จ!",
@@ -159,7 +145,7 @@
     "accountDetails": "รายละเอียดบัญชี",
     "editPersonalDesc": "แก้ไขข้อมูลส่วนตัว",
     "yourAvatar": "รูปโปรไฟล์ของคุณ",
-    "avatarHint": "เฉพาะไฟล์ JPG, PNG",
+    "avatarHint": "เฉพาะไฟล์ png , jpg",
     "uploadNew": "อัพโหลดรูปโปรไฟล์",
     "changeAvatar": "เปลี่ยนรูปโปรไฟล์",
     "removeAvatar": "ลบรูปโปรไฟล์",
@@ -190,15 +176,7 @@
     "emailVerified": "ยืนยันอีเมลเสร็จสิ้น",
     "myCertificates": "ประกาศนียบัตรของฉัน",
     "viewCertificate": "ดูประกาศนียบัตร",
-    "issuedAt": "ออกเมื่อ",
-    "publicInfo": "ข้อมูลที่แสดงต่อสาธารณะบนแพลตฟอร์ม",
-    "uploading": "กำลังอัปโหลด...",
-    "selectPrefix": "เลือกคำนำหน้า",
-    "verifyNow": "คลิกเพื่อยืนยันอีเมล",
-    "verifying": "กำลังส่ง...",
-    "saving": "กำลังบันทึก...",
-    "securitySubtitle": "จัดการรหัสผ่านและการเข้าถึงบัญชี",
-    "password": "รหัสผ่าน"
+    "issuedAt": "ออกเมื่อ"
   },
   "userMenu": {
     "home": "หน้าหลัก",
@@ -209,7 +187,7 @@
     "logout": "ออกจากระบบ"
   },
   "landing": {
-    "allCourses": "คอร์สเรียนทั้งหมด",
+    "allCourses": "คอร์สทั้งหมด",
     "discovery": "ค้นพบ",
     "goToDashboard": "เข้าสู่หน้าจัดการเรียน"
   },
@@ -221,9 +199,7 @@
     "emailVerifiedDesc": "บัญชีของคุณได้รับการยืนยันเรียบร้อยแล้ว",
     "invalidToken": "Token ยืนยันตัวตนไม่ถูกต้อง",
     "tokenExpired": "Token หมดอายุหรือล้มเหลว",
-    "logout": "ออกจากระบบ",
-    "logoutConfirmTitle": "ยืนยันการออกจากระบบ",
-    "logoutConfirmMessage": "คุณแน่ใจหรือไม่ว่าต้องการออกจากระบบ?"
+    "logout": "ออกจากระบบ"
   },
   "language": {
     "label": "ภาษา / Language",
@@ -234,7 +210,6 @@
     "newBadge": "ใหม่",
     "popularBadge": "ยอดนิยม",
     "save": "บันทึก",
-    "saveChanges": "บันทึกการเปลี่ยนแปลง",
     "ok": "ตกลง",
     "close": "ปิด",
     "cancel": "ยกเลิก",
@@ -248,9 +223,7 @@
     "backToHome": "กลับสู่หน้าหลัก",
     "error": "เกิดข้อผิดพลาด",
     "loading": "กำลังโหลด",
-    "items": "รายการ",
-    "student": "นักเรียน",
-    "latest": "ล่าสุด"
+    "items": "รายการ"
   },
   "classroom": {
     "backToDashboard": "กลับไปคอร์สของฉัน",
diff --git a/Frontend-Learner/layouts/auth.vue b/Frontend-Learner/layouts/auth.vue
index 98f9aa74..57de3a1f 100644
--- a/Frontend-Learner/layouts/auth.vue
+++ b/Frontend-Learner/layouts/auth.vue
@@ -19,7 +19,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <!-- Auth Shell: ครอบคลุมการแสดงผลหน้าสำหรับเข้าสู่ระบบหรือสมัครสมาชิก -->
+  <!-- Auth Shell: Wrapper for authentication pages (Login, Register, etc.) -->
   <div class="auth-shell bg-white w-full min-h-screen">
     <slot />
   </div>
diff --git a/Frontend-Learner/layouts/dashboard-index.vue b/Frontend-Learner/layouts/dashboard-index.vue
index 5e152fbe..d9ff4593 100644
--- a/Frontend-Learner/layouts/dashboard-index.vue
+++ b/Frontend-Learner/layouts/dashboard-index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 /**
  * @file dashboard-index.vue
- * @description เลย์เอาต์สำหรับหน้าแรกของ Dashboard (ไม่มีแผงเมนูด้านข้างเพื่อเน้นพื้นที่เนื้อหา)
- * ใช้โครงสร้างจาก Quasar QLayout เพื่อให้รองรับ Responsive
+ * @description Layout for the Dashboard Index page, without the sidebar.
+ * Uses Quasar QLayout for responsive structure.
  */
 
-// เปิดใช้คอมโพสซิเบิลจัดการธีมแบบ Global
+// Initialize global theme management
 useThemeMode()
 
 const { currentUser, logout } = useAuth()
@@ -18,7 +18,7 @@ const toggleRightDrawer = () => {
 
 <template>
   <q-layout view="hHh lpR fFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
-    <!-- แถบด้านบนของโครงสร้าง (Header) -->
+    <!-- Header -->
     <q-header
       class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white"
     >
@@ -29,7 +29,7 @@ const toggleRightDrawer = () => {
       />
     </q-header>
 
-    <!-- แถบลิ้นชักมือถือหลัก (เมนูรวมทุกอย่างเมื่อปัดหน้าจอ/กดไอคอนบนสัดส่วนเล็ก) -->
+    <!-- Master Mobile Drawer (The Everything Hub) -->
     <q-drawer
       v-model="rightDrawerOpen"
       side="right"
@@ -39,7 +39,7 @@ const toggleRightDrawer = () => {
       :width="300"
     >
       <div class="flex flex-col h-full bg-white dark:bg-[#0f172a]">
-        <!-- 1. ส่วนบัญชีผู้ใช้ (Account Section) ดีไซน์พรีเมียม -->
+        <!-- 1. Account Section (Premium Look) -->
         <div class="p-6 bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800">
           <div class="flex items-center justify-between mb-8">
              <div class="flex items-center gap-3">
@@ -62,10 +62,10 @@ const toggleRightDrawer = () => {
           </div>
         </div>
 
-        <!-- 2. ศูนย์รวมเมนูและเนื้อหา (Integrated Content Hub) -->
+        <!-- 2. Integrated Content Hub -->
         <div class="flex-grow overflow-y-auto pt-4">
           <q-list padding class="text-slate-600 dark:text-slate-300">
-            <!-- การนำทาง (Navigation) -->
+            <!-- Navigation -->
             <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เมนูหลัก</q-item-label>
             
             <q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
@@ -85,10 +85,10 @@ const toggleRightDrawer = () => {
 
             <q-separator class="my-4 mx-6 opacity-50" />
 
-            <!-- เครื่องมือทั่วไปและการตั้งค่าระบบ -->
+            <!-- Tools & Settings -->
             <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เครื่องมือและการตั้งค่า</q-item-label>
             
-            <!-- ปุ่มสลับภาษา -->
+            <!-- Language Selection -->
             <q-item class="px-6 py-2">
               <q-item-section avatar><q-icon name="language" size="22px" /></q-item-section>
               <q-item-section>
@@ -99,7 +99,7 @@ const toggleRightDrawer = () => {
               </q-item-section>
             </q-item>
 
-            <!-- เปิดปิดโหมดมืด (Dark Mode Toggle) -->
+            <!-- Dark Mode Toggle -->
             <q-item class="px-6 py-2">
               <q-item-section avatar><q-icon :name="isDark ? 'dark_mode' : 'light_mode'" size="22px" /></q-item-section>
               <q-item-section>
@@ -121,7 +121,7 @@ const toggleRightDrawer = () => {
           </q-list>
         </div>
 
-        <!-- 3. ส่วนล่างสุด เช่น ล็อกเอาต์ หรือระบุเวอร์ชันระบบ -->
+        <!-- 3. Bottom Actions -->
         <div class="p-6 mt-auto border-t border-slate-100 dark:border-slate-800">
           <q-btn
             unelevated
@@ -138,16 +138,18 @@ const toggleRightDrawer = () => {
       </div>
     </q-drawer>
 
-    <!-- หมายเหตุ: สำหรับหน้านี้ จะไม่ได้มีการโชว์ Sidebar ที่เป็นลิ้นชักซ้าย -->
+    <!-- Sidebar Removed for this layout -->
 
-    <!-- พื้นที่แสดงเนื้อหาหลัก -->
+    <!-- Main Content -->
     <q-page-container>
       <q-page class="relative">
         <slot />
       </q-page>
     </q-page-container>
 
-    <!-- เมนูปุ่มกดล่างหน้าจอบนมือถือ (สำหรับช่วยให้เข้าถึงหน้าหลักได้ไวขึ้น) -->
+    <!-- Mobile Bottom Nav - Optional, keeping it consistent with default but maybe not needed if full width?
+         If we remove sidebar, we might still want mobile nav if it's main navigation.
+         Let's keep it for now as it doesn't hurt. -->
     <q-footer
       v-if="$q.screen.lt.md"
       class="!bg-white dark:!bg-[#1e293b] text-primary"
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index 6f6040da..82b02528 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -1,66 +1,181 @@
 <script setup lang="ts">
 /**
  * @file default.vue
- * @description เลย์เอาต์หลัก (Master Layout) สำหรับผู้ใช้งานที่เข้าสู่ระบบแล้ว 
- * ประกอบด้วยแถบเมนูด้านบน (Header), แถบเมนูด้านข้าง (Sidebar) และพื้นที่เนื้อหา
+ * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
+ * Uses Quasar QLayout for responsive structure.
  */
 
+// Initialize global theme management
 useThemeMode()
 
-const leftDrawerOpen = ref(true)
+const { currentUser, logout } = useAuth()
+const { isDark, set: setTheme } = useThemeMode()
+const leftDrawerOpen = ref(false)
+const rightDrawerOpen = ref(false)
 
 const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
 
+const toggleRightDrawer = () => {
+  rightDrawerOpen.value = !rightDrawerOpen.value
+}
+
 const route = useRoute()
-// ระบุว่า path ไหนบ้างที่ให้แสดงแถบเมนูด้านข้าง (Sidebar)
-const isDashboardRoute = computed(() => {
-  const routes = ['/dashboard', '/browse', '/classroom', '/course']
-  return routes.some(r => route.path.startsWith(r))
+// Automatically hide sidebar for learner routes
+const shouldHideSidebar = computed(() => {
+  const silentRoutes = ['/dashboard', '/browse', '/classroom', '/course']
+  return silentRoutes.some(r => route.path.startsWith(r))
 })
 </script>
 
 <template>
-  <q-layout view="lHh Lpr lFf" class="bg-[#F8FAFC] dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
-    
-    <!-- ส่วนหัว (Header) -->
+  <q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
+    <!-- Header -->
     <q-header
-      class="bg-transparent text-slate-900 dark:!text-white border-none shadow-none"
+      class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white border-none shadow-none"
     >
-      <AppHeader @toggleSidebar="toggleLeftDrawer" />
+      <AppHeader 
+        @toggleSidebar="toggleLeftDrawer" 
+        @toggleRightDrawer="toggleRightDrawer"
+        :showSidebarToggle="!shouldHideSidebar" 
+      />
     </q-header>
 
-    <!-- แถบเมนูด้านข้าง (Navigation Sidebar) -->
+    <!-- Sidebar (Drawer - Desktop Left) -->
     <q-drawer
+      v-if="!shouldHideSidebar"
       v-model="leftDrawerOpen"
       show-if-above
       :width="280"
-      side="left"
-      bordered
-      class="bg-white dark:!bg-[#0f172a] border-none"
+      class="bg-white dark:!bg-[#0f172a]"
     >
       <AppSidebar />
     </q-drawer>
 
-    <!-- พื้นที่แสดงเนื้อหาหลัก (Main Content Area) -->
-    <q-page-container>
-      <q-page class="px-3 py-6 md:p-8">
-        <div class="max-w-[1600px] mx-auto">
-          <slot />
+    <!-- Master Mobile Drawer (The Everything Hub) -->
+    <q-drawer
+      v-model="rightDrawerOpen"
+      side="right"
+      overlay
+      bordered
+      class="bg-white dark:!bg-[#0f172a]"
+      :width="300"
+    >
+      <div class="flex flex-col h-full bg-white dark:bg-[#0f172a]">
+        <!-- 1. Account Section -->
+        <div class="p-6 bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800">
+          <div class="flex items-center justify-between mb-8">
+             <div class="flex items-center gap-3">
+               <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black">E</div>
+               <span class="font-black text-lg text-slate-900 dark:text-white">E-Learning</span>
+            </div>
+            <q-btn flat round dense icon="close" class="text-slate-400" @click="rightDrawerOpen = false" />
+          </div>
+
+          <div class="flex items-center gap-4 py-2">
+            <q-avatar size="64px" class="shadow-lg border-2 border-white dark:border-slate-700">
+              <img :src="currentUser?.photoURL || 'https://cdn.quasar.dev/img/avatar.png'" />
+            </q-avatar>
+            <div class="overflow-hidden">
+              <p class="font-bold text-slate-900 dark:text-white mb-0 truncate text-lg">
+                {{ currentUser?.firstName || 'Guest' }} {{ currentUser?.lastName || '' }}
+              </p>
+              <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ currentUser?.email || 'e-learning@platform.com' }}</p>
+            </div>
+          </div>
         </div>
+
+        <!-- 2. Integrated Content Hub -->
+        <div class="flex-grow overflow-y-auto pt-4">
+          <q-list padding class="text-slate-600 dark:text-slate-300">
+            <!-- Navigation -->
+            <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เมนูหลัก</q-item-label>
+            
+            <q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+              <q-item-section avatar><q-icon name="dashboard" size="24px" /></q-item-section>
+              <q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.overview") }}</span></q-item-section>
+            </q-item>
+            
+            <q-item to="/browse/discovery" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+              <q-item-section avatar><q-icon name="explore" size="24px" /></q-item-section>
+              <q-item-section><span class="text-[15px] font-bold">{{ $t("landing.allCourses") }}</span></q-item-section>
+            </q-item>
+            
+            <q-item to="/dashboard/my-courses" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+              <q-item-section avatar><q-icon name="school" size="24px" /></q-item-section>
+              <q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</span></q-item-section>
+            </q-item>
+
+            <q-separator class="my-4 mx-6 opacity-50" />
+
+            <!-- Tools & Settings -->
+            <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เครื่องมือและการตั้งค่า</q-item-label>
+            
+            <!-- Language Selection -->
+            <q-item class="px-6 py-2">
+              <q-item-section avatar><q-icon name="language" size="22px" /></q-item-section>
+              <q-item-section>
+                <div class="flex items-center justify-between">
+                  <span class="font-bold text-[14px]">ภาษา</span>
+                  <LanguageSwitcher dense />
+                </div>
+              </q-item-section>
+            </q-item>
+
+            <!-- Dark Mode Toggle -->
+            <q-item class="px-6 py-2">
+              <q-item-section avatar><q-icon :name="isDark ? 'dark_mode' : 'light_mode'" size="22px" /></q-item-section>
+              <q-item-section>
+                <div class="flex items-center justify-between">
+                  <span class="font-bold text-[14px]">โหมดกลางคืน</span>
+                  <q-toggle
+                    :model-value="isDark"
+                    @update:model-value="setTheme"
+                    color="blue"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple @click="navigateTo('/dashboard/profile'); rightDrawerOpen = false" class="px-6 py-4">
+              <q-item-section avatar><q-icon name="person_outline" size="24px" /></q-item-section>
+              <q-item-section><span class="font-bold text-[15px]">จัดการโปรไฟล์</span></q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+
+        <!-- 3. Bottom Actions -->
+        <div class="p-6 mt-auto border-t border-slate-100 dark:border-slate-800">
+          <q-btn
+            unelevated
+            class="full-width rounded-xl bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400 font-bold py-3 no-caps transition-all active:scale-95"
+            @click="logout"
+          >
+            <q-icon name="logout" size="20px" class="mr-2" />
+            ออกจากระบบ
+          </q-btn>
+          <div class="text-center mt-6">
+            <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-300 dark:text-slate-600">E-Learning Platform v1.0</span>
+          </div>
+        </div>
+      </div>
+    </q-drawer>
+
+    <!-- Main Content -->
+    <q-page-container>
+      <q-page class="relative">
+        <slot />
       </q-page>
     </q-page-container>
 
+
   </q-layout>
 </template>
 
 <style>
-/* Global Layout Adjustments */
-.q-drawer--bordered {
-  border-right: 1px solid rgba(0,0,0,0.05) !important;
-}
-.dark .q-drawer--bordered {
-  border-right: 1px solid rgba(255,255,255,0.05) !important;
+/* Ensure fonts are applied */
+.font-inter {
+  font-family: var(--font-main);
 }
 </style>
diff --git a/Frontend-Learner/layouts/landing.vue b/Frontend-Learner/layouts/landing.vue
index 0969f278..75e90c7e 100644
--- a/Frontend-Learner/layouts/landing.vue
+++ b/Frontend-Learner/layouts/landing.vue
@@ -23,20 +23,20 @@ onMounted(() => {
   <q-layout view="lHh LpR lFf" class="bg-white text-slate-900">
 
     
-    <!-- ส่วนหัวของเพจ (แบบโปร่งใส และซ้อนทับให้โชว์เนื้อหาพื้นหลังได้) -->
+    <!-- Header (Transparent & Overlay) -->
     <q-header class="bg-transparent" style="height: auto;">
       <LandingHeader />
     </q-header>
 
-    <!-- ส่วนเนื้อหาหลัก -->
-    <!-- แทรก style padding-top: 0 บังคับให้เนื้อหาใต้ Header ชนชิดด้านบนสุด (ทำเป็น Hero section สวยๆ) -->
+    <!-- Main Content -->
+    <!-- padding-top: 0 forces content to go under the header (Hero effect) -->
     <q-page-container style="padding-top: 0 !important;">
       <q-page>
         <slot />
       </q-page>
     </q-page-container>
 
-    <!-- ส่วนท้ายของเพจ -->
+    <!-- Footer -->
     <LandingFooter />
 
 
diff --git a/Frontend-Learner/nuxt.config.ts b/Frontend-Learner/nuxt.config.ts
index e0617f89..239a3627 100644
--- a/Frontend-Learner/nuxt.config.ts
+++ b/Frontend-Learner/nuxt.config.ts
@@ -33,11 +33,8 @@ export default defineNuxtConfig({
 
   // การตั้งค่า Quasar Framework
   quasar: {
-    iconSet: 'material-icons-outlined',
     extras: {
-      fontIcons: [
-        "material-icons", 
-        "material-icons-outlined"] // ใช้ไอคอน Material Icons, material-icons-outlined
+      fontIcons: ["material-icons"],
     },
     plugins: ["Notify", "Dialog"], // เปิดใช้ Plugin Notify และ Dialog
     config: {
diff --git a/Frontend-Learner/pages/auth/login.vue b/Frontend-Learner/pages/auth/login.vue
index a3d6ed63..e30602df 100644
--- a/Frontend-Learner/pages/auth/login.vue
+++ b/Frontend-Learner/pages/auth/login.vue
@@ -23,7 +23,7 @@ const isLoading = ref(false)
 const rememberMe = ref(false)
 const showPassword = ref(false)
 
-// ข้อมูลฟอร์มสำหรับเก็บค่าอีเมลและรหัสผ่าน
+// Form data model
 const loginForm = reactive({
   email: '',
   password: ''
@@ -31,7 +31,7 @@ const loginForm = reactive({
 
 type LoginField = keyof typeof loginForm
 
-// การตั้งค่ากฎการตรวจสอบ (Validation Rules)
+// Validation rules definition
 // กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
 const loginRules = {
   email: {
@@ -108,12 +108,12 @@ const handleLogin = async () => {
   }
 
 
-  // แสดงข้อผิดพลาดตามช่องหรือแสดงข้อผิดพลาดรวม (เพื่อความปลอดภัย)
-  // กรณีเข้าสู่ระบบไม่สำเร็จ
+  // Show error on specific fields
+  // Show generic error for security (or specific if role mismatch)
   if (result.error === 'Email ไม่ถูกต้อง') {
-     errors.value.email = result.error // กรณี Role ไม่ตรงกัน
+     errors.value.email = result.error // Role mismatch case
   } else {
-     // ข้อผิดพลาดแบบเหมาสำหรับปัญหาการเข้าสู่ระบบทั่วไป (เช่น รหัสผิด, ไม่พบผู้ใช้)
+     // Generic login failure (401, 404, etc.)
      const msg = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
      errors.value.email = msg
      errors.value.password = msg
@@ -147,7 +147,7 @@ onMounted(() => {
      ========================================== -->
     <div class="w-full max-w-[460px] relative z-10 slide-up">
       
-       <!-- ส่วนหัวโปรไฟล์ / โลโก้ (Header / Logo) -->
+       <!-- Header / Logo -->
        <div class="text-center mb-8">
           <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
              <span class="font-black text-2xl">E</span>
@@ -158,10 +158,10 @@ onMounted(() => {
 
       <div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
         
-        <!-- ฟอร์มเข้าสู่ระบบ (Login Form) -->
+        <!-- Form -->
         <form @submit.prevent="handleLogin" class="flex flex-col gap-5">
           
-          <!-- ช่องกรอกอีเมล (Email Input) -->
+          <!-- Email Input -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">อีเมล</label>
             <div class="relative group">
@@ -180,7 +180,7 @@ onMounted(() => {
             <span v-if="errors.email" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.email }}</span>
           </div>
 
-          <!-- ช่องกรอกรหัสผ่าน (Password Input) -->
+          <!-- Password Input -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">รหัสผ่าน</label>
             <div class="relative group">
@@ -206,7 +206,7 @@ onMounted(() => {
             <span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
           </div>
 
-          <!-- ตัวเลือกเพิ่มเติม (จดจำฉัน, ลืมรหัสผ่าน) (Options) -->
+          <!-- Options -->
           <div class="flex items-center justify-between mt-1">
              <label class="flex items-center gap-2.5 cursor-pointer group select-none">
                <div class="relative flex items-center">
@@ -227,7 +227,7 @@ onMounted(() => {
              </NuxtLink>
           </div>
 
-          <!-- ปุ่มยืนยันเข้าสู่ระบบ (Submit Button) -->
+          <!-- Submit Button -->
           <button 
             type="submit" 
             :disabled="isLoading"
@@ -237,24 +237,17 @@ onMounted(() => {
             <div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
           </button>
 
-          <!-- กล่องแนะนำบัญชีสำหรับทดสอบ (Test Credentials Box) -->
-          <div class="mt-4 p-5 bg-blue-50/50 border border-blue-100 rounded-2xl flex flex-col items-center gap-2 animate-fade-in">
-             <div class="text-[11px] font-black uppercase tracking-[0.2em] text-blue-600 mb-1">บัญชีสำหรับทดสอบ (Test Account)</div>
-             <div class="flex flex-col items-center gap-1">
-                <div class="text-base font-black text-slate-900 select-all cursor-copy hover:text-blue-600 transition-colors">
-                   studentedtest@example.com
-                </div>
-                <div class="flex items-center gap-2">
-                   <span class="text-[11px] font-black uppercase tracking-wider text-slate-600">Password:</span>
-                   <span class="text-base font-black select-all cursor-copy hover:text-blue-600 transition-colors text-slate-900">admin123</span>
-                </div>
-             </div>
-          </div>
-
         </form>
 
-        <!-- ลิงก์สำหรับสมัครสมาชิกใหม่ (Register Link) -->
-        <div class="text-center mt-8">
+        <!-- Divider -->
+        <div class="my-8 flex items-center gap-4">
+           <div class="h-px bg-slate-200 flex-1"></div>
+           <span class="text-slate-400 text-xs font-medium uppercase tracking-wider">หรือ</span>
+           <div class="h-px bg-slate-200 flex-1"></div>
+        </div>
+
+        <!-- Register Link -->
+        <div class="text-center">
             <p class="text-slate-600 text-sm">
                ยังไม่มีบัญชีสมาชิก? 
                <NuxtLink to="/auth/register" class="font-bold text-blue-600 hover:text-blue-700 transition-colors ml-1">
@@ -265,7 +258,7 @@ onMounted(() => {
 
       </div>
 
-      <!-- ลิงก์ย้อนกลับ (Back Link) -->
+      <!-- Back Link -->
        <div class="mt-8 text-center text-slate-500">
            <NuxtLink to="/" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
              <span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าแรก
@@ -276,7 +269,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-/* เอฟเฟกต์การเคลื่อนไหว (Animations) */
+/* Animations */
 @keyframes pulse-slow {
   0%, 100% { opacity: 0.3; transform: scale(1); }
   50% { opacity: 0.5; transform: scale(1.15); }
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index e8f15f77..01b5369d 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /**
  * @file discovery.vue
- * @description Course Discovery / Catalog Page matching Figma Desktop Layout.
+ * @description Course Discovery / Catalog Page.
+ * Allows users to browse, filter, and view details of available courses.
+ * Includes a toggleable detailed view for course previews.
  */
 
 definePageMeta({
@@ -13,19 +15,11 @@ useHead({
   title: "รายการคอร์ส - e-Learning",
 });
 
-const { t, locale } = useI18n();
-const { currentUser } = useAuth();
-const $q = useQuasar();
-const { fetchCategories } = useCategory();
-const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } = useCourse();
-
+// ==========================================
+// 1. State Management
 const showDetail = ref(false);
 const searchQuery = ref("");
-const activeCategory = ref<number | 'all'>('all');
-const viewMode = ref<'grid' | 'list'>('grid');
-const sortBy = ref('ยอดนิยม');
-const sortOptions = ['ยอดนิยม', 'ล่าสุด', 'ราคาต่ำ-สูงสุด', 'ราคาสูง-ต่ำสุด'];
-
+const selectedCategoryIds = ref<number[]>([]);
 const categories = ref<any[]>([]);
 const courses = ref<any[]>([]);
 const selectedCourse = ref<any>(null);
@@ -34,43 +28,47 @@ const isLoading = ref(false);
 const isLoadingDetail = ref(false);
 const isEnrolling = ref(false);
 
+// Pagination State
 const currentPage = ref(1);
 const totalPages = ref(1);
 const itemsPerPage = 12;
 
-const getCategoryIcon = (name: any) => {
-   const text = getLocalizedText(name) || ''
-   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
-   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
-   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
-   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
-   return 'category'
-}
+const { t, locale } = useI18n();
+const { currentUser } = useAuth();
+const $q = useQuasar();
+const { fetchCategories } = useCategory();
+const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } =
+  useCourse();
 
-const formatPrice = (course: any) => {
-    if (course.is_free) return 'ฟรี';
-    if (!course.price) return 'ฟรี';
-    return `฿${parseFloat(course.price).toLocaleString()}`;
-};
+// 2. Computed Properties
+const sortOption = ref(t("discovery.sortRecent"));
+const sortOptions = computed(() => [t("discovery.sortRecent")]);
 
-const getInstructorName = (course: any) => {
-    let user = null;
-    if (course.instructors && course.instructors.length > 0) {
-        const primary = course.instructors.find((i: any) => i.is_primary);
-        user = primary ? primary.user : course.instructors[0].user;
-    } else {
-        user = course.creator || course.instructor;
-    }
-    
-    if (user?.profile?.first_name) {
-        return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
-    }
-    if (user?.first_name) {
-        return `${user.first_name} ${user.last_name || ''}`.trim();
-    }
-    return user?.username || 'ผู้สอน';
-};
+const filteredCourses = computed(() => {
+  let result = courses.value;
 
+  // If more than 1 category is selected, we still do client-side filtering
+  // because the API currently only supports one category_id at a time.
+  if (selectedCategoryIds.value.length > 1) {
+    result = result.filter((c) =>
+      selectedCategoryIds.value.includes(c.category_id),
+    );
+  }
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter((c) => {
+      const title = getLocalizedText(c.title).toLowerCase();
+      const desc = getLocalizedText(c.description).toLowerCase();
+      return title.includes(query) || (desc && desc.includes(query));
+    });
+  }
+  return result;
+});
+
+// 3. Helper Functions
+
+// 4. API Actions
 const loadCategories = async () => {
   const res = await fetchCategories();
   if (res.success) categories.value = res.data || [];
@@ -78,7 +76,12 @@ const loadCategories = async () => {
 
 const loadCourses = async (page = 1) => {
   isLoading.value = true;
-  const categoryId = activeCategory.value === 'all' ? undefined : activeCategory.value as number;
+
+  // Use server-side filtering if exactly one category is selected
+  const categoryId =
+    selectedCategoryIds.value.length === 1
+      ? selectedCategoryIds.value[0]
+      : undefined;
 
   const res = await fetchCourses({
     category_id: categoryId,
@@ -89,17 +92,7 @@ const loadCourses = async (page = 1) => {
   });
 
   if (res.success) {
-    courses.value = (res.data || []).map(c => {
-       const cat = categories.value.find(cat => cat.id === c.category_id);
-       return {
-          ...c,
-          category_name: cat ? getLocalizedText(cat.name) : '',
-          instructor_name: getInstructorName(c),
-          formatted_price: formatPrice(c),
-          rating: c.rating || '4.9',
-          reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
-       }
-    });
+    courses.value = res.data || [];
     totalPages.value = res.totalPages || 1;
     currentPage.value = res.page || 1;
   }
@@ -133,175 +126,231 @@ const handleEnroll = async (id: number) => {
   isEnrolling.value = false;
 };
 
+// Watch for category selection changes to reload courses
 watch(
-  activeCategory,
+  selectedCategoryIds,
   () => {
     currentPage.value = 1;
     loadCourses(1);
-  }
+  },
+  { deep: true },
 );
 
-onMounted(async () => {
-  await loadCategories();
-  
-  // Check if category_id or course_id is in query
-  const route = useRoute();
-  if (route.query.category_id) {
-    activeCategory.value = Number(route.query.category_id);
+const toggleCategory = (id: number) => {
+  const index = selectedCategoryIds.value.indexOf(id);
+  if (index === -1) {
+    selectedCategoryIds.value.push(id);
+  } else {
+    selectedCategoryIds.value.splice(index, 1);
   }
-  
-  await loadCourses(1);
+};
 
-  if (route.query.course_id) {
-    selectCourse(Number(route.query.course_id));
-  }
+onMounted(() => {
+  loadCategories();
+  loadCourses();
 });
 </script>
 
 <template>
-  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
-    <div class="max-w-[1240px] mx-auto">
-        <!-- ส่วนของการค้นหาคอร์ส (Catalog View) -->
-        <div v-if="!showDetail" class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
-            
-            <!-- ส่วนหัวและการค้นหา -->
-            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
-               <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
-                  <div class="relative w-full sm:w-[260px] flex-1">
-                     <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
-                     <input v-model="searchQuery" @keyup.enter="loadCourses(1)" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" placeholder="ค้นหาคอร์ส..." />
-                  </div>
-                  <div class="flex items-center gap-2 shrink-0">
-                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
-                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
-                  </div>
-               </div>
+  <div class="page-container">
+    <!-- CATALOG VIEW: Browse courses -->
+    <div v-if="!showDetail">
+      <!-- Top Header Area -->
+      <!-- New Enhanced Search Section (Image 1 Style) -->
+      <div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-8 border border-blue-100/50 dark:border-blue-500/10 transition-colors duration-300">
+        <div class="flex items-center gap-4 mb-2">
+          <span class="w-2 h-8 bg-blue-600 rounded-full shadow-lg shadow-blue-500/30"></span>
+          <h1 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white">
+            {{ $t("discovery.title") }}
+          </h1>
+        </div>
+        <p class="text-slate-500 dark:text-slate-400 font-medium mb-8">
+          {{ $t("discovery.subtitle") }}
+        </p>
+        
+        <div class="flex flex-col md:flex-row gap-4">
+          <!-- Search Input -->
+          <div class="relative flex-1 group">
+            <div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
+              <q-icon name="search" size="24px" />
             </div>
-
-            <!-- Filters Category -->
-            <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
-                <!-- Figma Style: Separate pill buttons -->
-                <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
-                   <button 
-                     @click="activeCategory = 'all'"
-                     :class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
-                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
-                   </button>
-                   
-                   <button 
-                     v-for="cat in categories" :key="cat.id"
-                     @click="activeCategory = cat.id"
-                     :class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
-                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
-                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
-                     {{ getLocalizedText(cat.name) }}
-                   </button>
-                </div>
-                
-
+            <input 
+              v-model="searchQuery"
+              type="text" 
+              :placeholder="$t('discovery.searchPlaceholder') || 'ค้นหาคอร์สที่น่าสนใจที่นี่...'"
+              class="w-full pl-14 pr-6 py-3.5 bg-white dark:bg-slate-800 border-2 border-transparent rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
+              @keyup.enter="loadCourses(1)"
+            />
+          </div>
+          
+          <!-- Search Button -->
+          <q-btn 
+            unelevated
+            color="primary"
+            class="px-8 h-[52px] rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
+            no-caps
+            @click="loadCourses(1)"
+          >
+            <div class="flex items-center gap-2">
+              <q-icon name="search" size="20px" />
+              <span class="text-base">ค้นหา</span>
             </div>
+          </q-btn>
+        </div>
+      </div>
 
-            <!-- Loader -->
-            <div v-if="isLoading" class="flex justify-center py-24">
-               <q-spinner size="3rem" color="primary" />
-            </div>
+      <div class="flex items-center justify-between mb-4 px-2">
+        <div class="text-slate-500 dark:text-slate-400 text-sm font-bold uppercase tracking-wider">
+          {{ $t("discovery.foundTotal") }} <span class="text-blue-600">{{ filteredCourses.length }}</span> {{ $t("discovery.items") }}
+        </div>
+      </div>
 
-            <div v-else-if="courses.length > 0">
-               <!-- GRID VIEW -->
-               <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                  <div v-for="course in courses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
-                     <!-- Thumbnail -->
-                     <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
-                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
-                           {{ course.category_name }}
-                        </div>
-                     </div>
-                     
-                     <!-- Body -->
-                     <div class="p-5 flex flex-col flex-1">
-                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h3>
-                        
-
-                        
-                        <div class="mt-auto flex items-center justify-between">
-                            <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
-                                {{ course.formatted_price }}
-                            </div>
-                            <!-- Eye icon circle button -->
-                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
-                                <q-icon name="visibility" size="18px" />
-                            </button>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-
-               <!-- LIST VIEW -->
-               <div v-else class="flex flex-col gap-5">
-                  <div v-for="course in courses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
-                     <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
-                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
-                           {{ course.category_name }}
-                        </div>
-                     </div>
-                     <div class="flex flex-col flex-1 py-1">
-                        <div class="flex-1">
-                            <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2">{{ getLocalizedText(course.title) }}</h3>
-
-                        </div>
-                        <div class="mt-4 sm:mt-auto flex items-center justify-between">
-                            <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
-                                {{ course.formatted_price }}
-                            </div>
-                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
-                                <q-icon name="visibility" size="16px" /> ดูรายละเอียด
-                            </button>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-
-               <!-- Pagination -->
-               <div v-if="totalPages > 1" class="flex justify-center pt-8 pb-4">
-                  <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-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
-               <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 transition-colors" @click="searchQuery = ''; activeCategory = 'all';">
-                  {{ $t("discovery.showAll") }}
-               </button>
-            </div>
+      <!-- Unified Filter Section: Categories -->
+        <div
+          class="bg-white dark:bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm"
+        >
+          <q-btn
+            flat
+            rounded
+            dense
+            class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+            :class="
+              selectedCategoryIds.length === 0
+                ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'
+            "
+            @click="selectedCategoryIds = []"
+            :label="$t('discovery.showAll')"
+          />
+          <q-btn
+            v-for="cat in categories"
+            :key="cat.id"
+            flat
+            rounded
+            dense
+            class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+            :class="
+              selectedCategoryIds.includes(cat.id)
+                ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'
+            "
+            @click="toggleCategory(cat.id)"
+            :label="getLocalizedText(cat.name)"
+          />
         </div>
 
-        <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
-        <div v-else>
-          <button @click="showDetail = false" class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group">
-            <q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
-            {{ $t("discovery.backToCatalog") }}
+      <!-- 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>
+
+          <!-- 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 v-if="isLoadingDetail" class="flex justify-center py-20"><q-spinner size="3rem" color="primary" /></div>
-          <CourseDetailView v-else-if="selectedCourse" :course="selectedCourse" :user="currentUser" @back="showDetail = false" @enroll="handleEnroll"/>
         </div>
+      </div>
+    </div>
+
+    <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
+    <div v-else>
+      <button
+        @click="showDetail = false"
+        class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group"
+      >
+        <q-icon
+          name="arrow_back"
+          size="24px"
+          class="transition-transform group-hover:-translate-x-1"
+        />
+        {{ $t("discovery.backToCatalog") }}
+      </button>
+
+      <div v-if="isLoadingDetail" class="flex justify-center py-20">
+        <q-spinner size="3rem" color="primary" />
+      </div>
+
+      <CourseDetailView
+        v-else-if="selectedCourse"
+        :course="selectedCourse"
+        :user="currentUser"
+        @back="showDetail = false"
+        @enroll="handleEnroll"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
-/* Disable default scrollbar for filter container */
-.scrollbar-hide::-webkit-scrollbar {
-    display: none;
+/* Standard overrides for Quasar inputs to match Tailwind theme */
+.search-input :deep(.q-field__control) {
+  border-radius: 9999px; /* Full rounded pill */
+  background-color: white !important;
+  transition: all 0.3s ease;
 }
-.scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+
+.dark .search-input :deep(.q-field__control) {
+  background-color: #1e293b !important; /* slate-800: Inner card depth */
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.search-input :deep(.q-field__native) {
+  color: #0f172a !important; /* slate-900: Dark text for light mode */
+}
+
+.dark .search-input :deep(.q-field__native) {
+  color: white !important;
+}
+
+.search-input :deep(.q-field__shadow) {
+  box-shadow: none !important;
 }
 </style>
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index 3e82a01d..415ee060 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -1,22 +1,26 @@
 <script setup lang="ts">
 /**
- * @file index.vue
- * @description หน้าแสดงคอร์สเรียนทั้งหมดในรูปแบบแคตตาล็อกสาธารณะ
- * ดีไซน์ปรับให้ทันสมัยเพื่อดึงดูดผู้ใช้งานใหม่
+ * @file courses.vue
+ * @description Page displaying all available courses in a public catalog format.
+ * Matches the premium dark theme of the landing page.
  */
 
+// Define page metadata using the landing layout (dark theme default)
 definePageMeta({
   layout: 'landing'
 })
 
+// Set the HTML head title for SEO
 useHead({
   title: 'คอร์สทั้งหมด - E-Learning System'
 })
 
+// Reactive state for the search input
 const searchQuery = ref('')
 const { fetchCourses } = useCourse()
 const { fetchCategories, categories } = useCategory()
 
+// Helper to handle localized text
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -26,6 +30,7 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
 const route = useRoute()
 const router = useRouter()
 
+// State for selected category
 const selectedCategory = ref((route.query.category as string) || 'all')
 
 const selectCategory = (slug: string) => {
@@ -36,234 +41,357 @@ const selectCategory = (slug: string) => {
   }
 }
 
+// Watch route query to sync state
 watch(() => route.query.category, (newCategory) => {
   selectedCategory.value = (newCategory as string) || 'all'
 })
 
-const getCategoryIcon = (name: any) => {
-   const text = getLocalizedText(name) || ''
-   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
-   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
-   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
-   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
-   return 'category'
+// Specific labels mapping as requested
+const categoryLabels: Record<string, string> = {
+  all: "ทั้งหมด",
+  programming: "การเขียนโปรแกรม",
+  design: "การออกแบบ",
+  business: "ธุรกิจ"
 }
 
+const getCategoryLabel = (category: any) => {
+  if (categoryLabels[category.slug]) {
+    return categoryLabels[category.slug]
+  }
+  return getLocalizedText(category.name)
+}
+
+// Fetch categories on mount
 await useAsyncData('categories-list', () => fetchCategories())
 
-const { data: coursesResponse, pending: isLoading, error, refresh } = await useAsyncData(
+// Fetch courses from API (reactive to selectedCategory)
+const { data: coursesResponse, error, refresh } = await useAsyncData(
   'browse-courses-list', 
   () => {
     const params: any = {}
+    console.log('Fetching courses. Selected Category:', selectedCategory.value)
+    
     if (selectedCategory.value !== 'all') {
       const category = categories.value.find(c => c.slug === selectedCategory.value)
+      console.log('Found Category:', category)
+      
       if (category) {
         params.category_id = category.id
       }
     }
+    
+    console.log('Params being sent to fetchCourses:', params)
     return fetchCourses(params)
   }
 )
 
-watch(selectedCategory, () => { refresh() })
+// Watch for category changes and refresh data
+watch(selectedCategory, (newVal) => {
+    console.log('Selected Category Changed to:', newVal)
+    refresh()
+})
 
-const formatPrice = (course: any) => {
-    if (course.is_free) return 'ฟรี';
-    if (!course.price) return 'ฟรี';
-    return `฿${parseFloat(course.price).toLocaleString()}`;
-}
-
-const getInstructorName = (course: any) => {
-    let user = null;
-    if (course.instructors && course.instructors.length > 0) {
-        const primary = course.instructors.find((i: any) => i.is_primary);
-        user = primary ? primary.user : course.instructors[0].user;
-    } else {
-        user = course.creator || course.instructor;
-    }
-    
-    if (user?.profile?.first_name) {
-        return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
-    }
-    if (user?.first_name) {
-        return `${user.first_name} ${user.last_name || ''}`.trim();
-    }
-    return user?.username || 'ผู้สอน';
-}
+// Ref for the scroll container
+const categoryScroll = ref<HTMLElement | null>(null)
 
+// Computed property for courses list from API response
 const courses = computed(() => {
-  if (coursesResponse.value?.success && coursesResponse.value.data) {
-    return coursesResponse.value.data.map((c: any) => {
-       const cat = categories.value.find((cat: any) => cat.id === c.category_id);
-       return {
-          ...c,
-          category_name: cat ? getLocalizedText(cat.name) : '',
-          instructor_name: getInstructorName(c),
-          formatted_price: formatPrice(c),
-          rating: c.rating || '4.9',
-          reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
-       }
-    })
+  if (coursesResponse.value?.success) {
+    return coursesResponse.value.data
   }
   return []
 })
 
+/**
+ * @computed filteredCourses
+ * @description Filters the courses list based on the search query.
+ * Checks both the course title and description (case-insensitive).
+ */
 const filteredCourses = computed(() => {
   const list = courses.value || []
   if (!searchQuery.value) return list
   
   const query = searchQuery.value.toLowerCase()
-  return list.filter((c: any) => {
+  return list.filter(c => {
     const title = getLocalizedText(c.title).toLowerCase()
     const desc = getLocalizedText(c.description).toLowerCase()
     return title.includes(query) || desc.includes(query)
   })
 })
-
-const viewMode = ref<'grid' | 'list'>('grid')
 </script>
 
 <template>
-  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen pt-32 pb-20 px-4 md:px-8 transition-colors duration-300">
-    <div class="max-w-[1240px] mx-auto">
-        <!-- มุมมองแคตตาล็อกแสดงคอร์ส (Catalog View) -->
-        <div class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
-            
-            <!-- ส่วนหัวและการค้นหา -->
-            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
-               <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
-                  <div class="relative w-full sm:w-[260px] flex-1">
-                     <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
-                     <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" placeholder="ค้นหาคอร์ส..." />
-                  </div>
-                  <div class="flex items-center gap-2 shrink-0">
-                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
-                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
-                  </div>
-               </div>
-            </div>
-
-            <!-- ตัวกรองหมวดหมู่ (Filters Category) -->
-            <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
-                <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
-                   <button 
-                     @click="selectCategory('all')"
-                     :class="selectedCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
-                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon name="check_circle_outline" size="18px" :class="selectedCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
-                   </button>
-                   
-                   <button 
-                     v-for="cat in categories" :key="cat.id"
-                     @click="selectCategory(cat.slug)"
-                     :class="selectedCategory === cat.slug ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
-                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
-                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="selectedCategory === cat.slug ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
-                     {{ getLocalizedText(cat.name) }}
-                   </button>
-                </div>
-            </div>
-
-            <!-- ตัวแสดงการโหลด (Loader) -->
-            <div v-if="isLoading" class="flex justify-center py-24">
-               <q-spinner size="3rem" color="primary" />
-            </div>
-
-            <div v-else-if="filteredCourses.length > 0">
-               <!-- มุมมองแบบกริด (GRID VIEW) -->
-               <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer">
-                     <!-- รูปหน้าปก (Thumbnail) -->
-                     <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
-                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
-                           {{ course.category_name }}
-                        </div>
-                     </div>
-                     
-                     <!-- เนื้อหาคอร์ส (Body) -->
-                     <div class="p-5 flex flex-col flex-1">
-                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
-                        
-                        <div class="flex items-center gap-2 mb-4">
-                           <span class="text-[12px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
-                        </div>
-
-                        <div class="flex items-center gap-1.5 mb-5">
-                             <q-icon name="star" class="text-amber-400" size="16px" />
-                             <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
-                             <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
-                        </div>
-                        
-                        <div class="mt-auto flex items-center justify-between">
-                            <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
-                                {{ course.formatted_price }}
-                            </div>
-                            <!-- ปุ่มกดรูปตาเพื่อดูรายละเอียด (Eye icon circle button) -->
-                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
-                                <q-icon name="visibility" size="18px" />
-                            </button>
-                        </div>
-                     </div>
-                  </NuxtLink>
-               </div>
-
-               <!-- มุมมองแบบรายการ (LIST VIEW) -->
-               <div v-else class="flex flex-col gap-5">
-                  <NuxtLink v-for="course in filteredCourses" :key="course.id" :to="`/course/${course.id}`" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer">
-                     <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
-                        <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                        <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
-                           {{ course.category_name }}
-                        </div>
-                     </div>
-                     <div class="flex flex-col flex-1 py-1">
-                        <div class="flex-1">
-                            <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 transition-colors">{{ getLocalizedText(course.title) }}</h3>
-                            <div class="flex items-center gap-2 mb-3">
-                               <span class="text-[13px] text-slate-500 font-medium">โดย {{ course.instructor_name }}</span>
-                            </div>
-                            <div class="flex items-center gap-1.5 mb-2">
-                                 <q-icon name="star" class="text-amber-400" size="16px" />
-                                 <span class="text-[13px] font-bold text-slate-800 dark:text-slate-200">{{ course.rating }}</span>
-                                 <span class="text-[12px] text-slate-400">({{ course.reviews_count.toLocaleString() }} นักเรียน)</span>
-                            </div>
-                        </div>
-                        <div class="mt-4 sm:mt-auto flex items-center justify-between">
-                            <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
-                                {{ course.formatted_price }}
-                            </div>
-                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
-                                <q-icon name="visibility" size="16px" /> ดูรายละเอียด
-                            </button>
-                        </div>
-                     </div>
-                  </NuxtLink>
-               </div>
-            </div>
-
-            <!-- กรณีไม่พบข้อมูลคอร์ส (Empty State) -->
-            <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
-               <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">{{ searchQuery ? 'ไม่พบคอร์สที่คุณค้นหา' : 'ไม่มีคอร์สในหมวดหมู่นี้' }}</h3>
-               <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">ลองใช้คำค้นหาอื่น หรือเลือกหมวดหมู่อื่นเพื่อดูคอร์สที่เรามีให้บริการ</p>
-               <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; selectedCategory = 'all';">
-                  แสดงคอร์สทั้งหมด
-               </button>
-            </div>
-        </div>
+  <!-- Main Container: Dark Theme Base -->
+  <div class="relative min-h-screen text-slate-600  bg-slate-50  transition-colors">
+     
+     <!-- ==========================================
+          BACKGROUND EFFECTS
+          Ambient glows matching the index.vue theme
+     ========================================== -->
+     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+      <div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
+      <div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
     </div>
+
+    <!-- ==========================================
+          HERO SECTION
+          Title and subtitle area
+     ========================================== -->
+    <section class="relative pt-32 pb-20 px-6 overflow-hidden">
+      <div class="container mx-auto max-w-6xl text-center relative z-10">
+        <!-- Tagline Badge -->
+
+        <!-- Main Title -->
+        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight py-2 slide-up leading-[1.2] overflow-visible" style="animation-delay: 0.1s;">
+          คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
+        </h1>
+        <!-- Subtitle -->
+        <p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
+          เริ่มต้นอัปสกิลของคุณวันนี้ด้วยหลักสูตรคุณภาพที่ออกแบบโดยผู้เชี่ยวชาญในอุตสาหกรรม
+        </p>
+      </div>
+    </section>
+
+    <!-- ==========================================
+          SEARCH & GRID SECTION
+     ========================================== -->
+    <!-- ==========================================
+          SEARCH & GRID SECTION
+     ========================================== -->
+    <section class="container mx-auto max-w-[1440px] px-6 pb-20">
+       
+       <!-- Content Frame Container -->
+       <div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
+        
+          <!-- New Enhanced Search Section (Image 2 Style) -->
+          <div class="bg-blue-50/50 rounded-[2.5rem] p-8 md:p-10 mb-6 border border-blue-100/50">
+            <h2 class="text-2xl md:text-3xl font-black text-slate-900 mb-2">คอร์สเรียนทั้งหมด</h2>
+            <p class="text-slate-500 font-medium mb-8">พัฒนาทักษะใหม่ๆ กับผู้เชี่ยวชาญจากทั่วโลก</p>
+            
+            <div class="flex flex-col md:flex-row gap-4">
+              <!-- Search Input -->
+              <div class="relative flex-1 group">
+                <div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
+                  <q-icon name="search" size="24px" />
+                </div>
+                <input 
+                  v-model="searchQuery"
+                  type="text" 
+                  placeholder="ค้นหาชื่อคอร์ส..."
+                  class="w-full pl-14 pr-6 py-4 bg-white border-2 border-transparent rounded-2xl text-slate-900 placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-lg font-medium shadow-sm"
+                />
+              </div>
+              
+              <!-- Search Button -->
+              <q-btn 
+                unelevated
+                color="primary"
+                class="px-4 h-16 rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
+                no-caps
+              >
+                <div class="flex items-center gap-2">
+                  <q-icon name="search" size="20px" />
+                  <span class="text-base">ค้นหา</span>
+                </div>
+              </q-btn>
+            </div>
+          </div>
+
+
+
+          <!-- Category Filter Tabs with Scroll Buttons -->
+          <div class="relative mb-8">
+            <!-- Left Scroll Button -->
+            <button 
+              class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: -200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_left" size="24px" />
+            </button>
+
+            <!-- Scrollable Container -->
+            <div 
+              ref="categoryScroll"
+              class="flex items-center gap-3 overflow-x-auto pb-2 no-scrollbar px-1 scroll-smooth"
+            >
+              <button 
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectCategory('all')"
+              >
+                {{ categoryLabels.all }}
+              </button>
+              <button 
+                v-for="category in categories" 
+                :key="category.id"
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectCategory(category.slug)"
+              >
+                {{ getCategoryLabel(category) }}
+              </button>
+            </div>
+
+            <!-- Right Scroll Button -->
+             <button 
+              class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: 200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_right" size="24px" />
+            </button>
+          </div>
+
+
+          <!-- Course Grid (Updated to 4 cols) -->
+          <div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div 
+              v-for="(course, index) in filteredCourses" 
+              :key="course.id" 
+              class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
+              :style="{ animationDelay: `${0.1 * (index + 1)}s` }"
+            >
+              <!-- Card Image -->
+              <div class="h-48 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
+                <img 
+                  v-if="course.thumbnail_url" 
+                  :src="course.thumbnail_url" 
+                  :alt="getLocalizedText(course.title)"
+                  class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  @error="(e) => (e.target as HTMLImageElement).style.display = 'none'" 
+                />
+                <div 
+                  v-else 
+                  class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
+                >
+                </div>
+              </div>
+
+              <!-- Card Content Body -->
+              <div class="p-6 flex-1 flex flex-col border-t border-slate-100 ">
+                <h3 class="text-xl font-bold text-slate-900  mb-2 leading-snug group-hover:text-blue-600  transition-colors line-clamp-2">
+                  {{ getLocalizedText(course.title) }}
+                </h3>
+                <p class="text-slate-500  text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
+                  {{ getLocalizedText(course.description) }}
+                </p>
+
+                <!-- Card Footer -->
+                <div class="pt-4 border-t border-slate-100  flex items-center justify-between mt-auto">
+                  <span class="text-lg font-black text-blue-600  tracking-tight">
+                    {{ course.is_free ? 'ฟรี' : course.price }}
+                  </span>
+                  <NuxtLink 
+                    :to="`/course/${course.id}`" 
+                    class="px-4 py-2 bg-slate-50  hover:bg-blue-600 text-slate-600  hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200  hover:border-blue-500/50"
+                  >
+                    ดูรายละเอียด
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty State (No Results) -->
+          <div v-else class="text-center py-20">
+            <div class="text-6xl mb-6 opacity-50 animate-bounce">🔭</div>
+            <h2 class="text-2xl font-black text-slate-900  mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
+            <p class="text-slate-400 mb-8 max-w-md mx-auto">
+              ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการ
+            </p>
+            <button 
+              class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20" 
+              @click="searchQuery = ''"
+            >
+              แสดงคอร์สทั้งหมด
+            </button>
+          </div>
+
+       </div>
+    </section>
+
+    <!-- ==========================================
+          CTA SECTION
+          Call to action to register
+     ========================================== -->
+    <section class="py-24 relative overflow-hidden">
+       <!-- Background Decoration -->
+       <div class="absolute inset-0 bg-gradient-to-b from-transparent to-blue-50/80 pointer-events-none -z-10"/>
+       <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-400/10 blur-[120px] rounded-full -z-10 pointer-events-none"/>
+      
+      <div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
+        <h2 class="text-4xl md:text-5xl font-black text-slate-900  mb-6 tracking-tight">
+          พร้อมจะเริ่มต้นแล้วหรือยัง?
+        </h2>
+        <p class="text-slate-500 text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed">
+          ลงทะเบียนฟรีวันนี้เพื่อเข้าถึงบทเรียนพื้นฐาน และติดตามความคืบหน้าการเรียนของคุณได้ทันที ไม่มีค่าใช้จ่ายแอบแฝง
+        </p>
+        <NuxtLink 
+          to="/auth/register" 
+          class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
+        >
+          <span></span>
+          <span>สมัครสมาชิกฟรี</span>
+        </NuxtLink>
+      </div>
+    </section>
   </div>
 </template>
 
 <style scoped>
-/* ปิดการแสดงแถบเลื่อนบนคอนเทนเนอร์ของตัวกรอง (Disable default scrollbar for filter container) */
-.no-scrollbar::-webkit-scrollbar {
-    display: none;
+/* 
+  MATCHING INDEX.VUE STYLES
+  These styles ensure consistency with the landing page theme.
+*/
+
+/* Gradient Text Effect (Cyan to Blue) */
+.text-gradient-cyan {
+  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: inline-block;
+  padding: 0.5em 0.2em;
+  margin: -0.5em -0.2em;
+  vertical-align: baseline;
 }
-.no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+
+/* Premium Glass Effect for Containers */
+.glass-premium {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(40px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+
+/* Glass Card Style for Course Items */
+.glass-card {
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2rem;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+
+
+/* Slow Pulse Animation for Background Glows */
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.1; transform: scale(1); }
+  50% { opacity: 0.15; transform: scale(1.15); }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 10s linear infinite;
+}
+
+/* Slide Up Entrance Animation */
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-up {
+  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  opacity: 0;
 }
 </style>
diff --git a/Frontend-Learner/pages/classroom/learning.vue b/Frontend-Learner/pages/classroom/learning.vue
index 46c474a5..1be1df59 100644
--- a/Frontend-Learner/pages/classroom/learning.vue
+++ b/Frontend-Learner/pages/classroom/learning.vue
@@ -22,7 +22,7 @@ const { user } = useAuth()
 const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements, markLessonComplete, getLocalizedText } = useCourse()
 const $q = useQuasar()
 
-// การจัดการสถานะ (State management)
+// State management
 const sidebarOpen = ref(false)
 const courseId = computed(() => Number(route.query.course_id))
 
@@ -31,11 +31,11 @@ const courseId = computed(() => Number(route.query.course_id))
 // ==========================================
 // courseData: เก็บข้อมูลโครงสร้างคอร์ส (บทเรียนต่างๆ)
 const courseData = ref<any>(null)
-const announcements = ref<any[]>([]) // สถานะของประกาศ (Announcements state)
-const showAnnouncementsModal = ref(false) // สถานะของป๊อปอัป (Modal state)
-const hasUnreadAnnouncements = ref(false) // ติดตามสถานะที่ยังไม่ได้อ่าน (Unread state tracking)
+const announcements = ref<any[]>([]) // Announcements state
+const showAnnouncementsModal = ref(false) // Modal state
+const hasUnreadAnnouncements = ref(false) // Unread state tracking
 
-// ฟังก์ชันช่วยเหลือสำหรับเก็บสถานะการอ่านถาวร (Helper for persistent read status)
+// Helper for persistent read status
 const getAnnouncementStorageKey = () => {
     if (!user.value?.id || !courseId.value) return ''
     return `read_announcements:${user.value.id}:${courseId.value}`
@@ -61,17 +61,17 @@ const checkUnreadAnnouncements = () => {
     const lastReadDate = new Date(lastRead).getTime()
     const hasNew = announcements.value.some(a => {
         const annDate = new Date(a.created_at || Date.now()).getTime()
-        // ตรวจสอบว่าประกาศใหม่กว่าที่อ่านครั้งล่าสุดหรือไม่ (Check if announcement is strictly newer than last read)
+        // Check if announcement is strictly newer than last read
         return annDate > lastReadDate
     })
     
     hasUnreadAnnouncements.value = hasNew
 }
 
-// ฟังก์ชันจัดการเมื่อเปิดประกาศ (Handler for opening announcements)
+// Handler for opening announcements
 const handleOpenAnnouncements = () => {
     showAnnouncementsModal.value = true
-    hasUnreadAnnouncements.value = false // ลบป้ายแจ้งเตือนเมื่อคลิก (Clear unread badge on click)
+    hasUnreadAnnouncements.value = false // Clear unread badge on click
     
     const key = getAnnouncementStorageKey()
     if (key) {
@@ -98,7 +98,7 @@ const toggleSidebar = () => {
   sidebarOpen.value = !sidebarOpen.value
 }
 
-// การจัดการตรรกะจำนวนครั้งในการทำแบบทดสอบ (Logic Quiz Attempt Management)
+// Logic Quiz Attempt Management
 const quizStatus = computed(() => {
   if (!currentLesson.value || currentLesson.value.type !== 'QUIZ' || !currentLesson.value.quiz) return null
   
@@ -106,7 +106,7 @@ const quizStatus = computed(() => {
   const latestAttempt = quiz.latest_attempt
   const allowMultiple = quiz.allow_multiple_attempts
 
-  // หากยังไม่เคยทดสอบ (If never attempted)
+  // If never attempted
   if (!latestAttempt) {
     return {
       canStart: true,
@@ -116,7 +116,7 @@ const quizStatus = computed(() => {
     }
   }
 
-  // หากอนุญาตให้ทดสอบได้หลายครั้ง (If multiple attempts allowed)
+  // If multiple attempts allowed
   if (allowMultiple) {
     return {
       canStart: true,
@@ -128,8 +128,8 @@ const quizStatus = computed(() => {
     }
   }
 
-  // ไม่อนุญาตให้สอบได้หลายครั้ง (allowMultiple is false (Single attempt only))
-  // ล็อกแบบทดสอบหลังทำเสร็จไม่ว่าจะผ่านหรือไม่ผ่าน (Lock the quiz regardless of pass/fail once attempted)
+  // allowMultiple is false (Single attempt only)
+  // Lock the quiz regardless of pass/fail once attempted
   return {
     canStart: false,
     label: latestAttempt.is_passed ? t('quiz.passedStatus') : t('quiz.failedStatus'),
@@ -145,7 +145,7 @@ const handleStartQuiz = () => {
 
     const quiz = currentLesson.value.quiz
     
-    // หากทำได้ครั้งเดียวและนี่เป็นครั้งแรก (If multiple attempts are disabled and it's the first time)
+    // If multiple attempts are disabled and it's the first time
     if (!quiz.allow_multiple_attempts && !quiz.latest_attempt) {
         $q.dialog({
             title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
@@ -193,18 +193,18 @@ const resetAndNavigate = (path: string) => {
         }
     }
     
-    // 2. ลบข้อมูลใน localStorage ทั้งหมด (Clear all localStorage)
+    // 2. Clear all localStorage
     localStorage.clear()
     
-    // 3. คืนค่าเฉพาะคีย์ที่อนุญาต (Restore ONLY whitelisted keys)
+    // 3. Restore ONLY whitelisted keys
     Object.keys(whitelist).forEach(key => {
         localStorage.setItem(key, whitelist[key])
     })
     
-    // 4. บังคับโหลดหน้าเว็บใหม่ไปยังเส้นทางใหม่ (Force hard reload to the new path)
+    // 4. Force hard reload to the new path
     window.location.href = path
   } else {
-    // การทำงานสำรองสำหรับ SSR (SSR Fallback)
+    // SSR Fallback
     router.push(path)
   }
 }
@@ -213,13 +213,13 @@ const resetAndNavigate = (path: string) => {
 const handleLessonSelect = (lessonId: number) => {
   if (currentLesson.value?.id === lessonId) return
   
-  // 1. อัปเดตพารามิเตอร์ใน URL (Update URL query params)
+  // 1. Update URL query params
   router.push({ query: { ...route.query, lesson_id: lessonId.toString() } })
   
-  // 2. โหลดเนื้อหาโดยไม่ต้องรีเฟรชหน้าเว็บ (Load content without refresh)
+  // 2. Load content without refresh
   loadLesson(lessonId)
   
-  // ปิดแถบด้านข้างบนมือถือ (Close sidebar on mobile)
+  // Close sidebar on mobile
   if (sidebarOpen.value) {
     sidebarOpen.value = false
   }
@@ -245,7 +245,7 @@ const loadCourseData = async () => {
     if (res.success) {
       courseData.value = res.data
       
-      // ตรรกะการโหลดอัตโนมัติ: เช็ค URL ก่อน หากไม่มีให้โหลดบทเรียนแรก (Auto-load logic: Check URL first, fallback to first available lesson)
+      // Auto-load logic: Check URL first, fallback to first available lesson
       const urlLessonId = route.query.lesson_id ? Number(route.query.lesson_id) : null
       
       if (urlLessonId) {
@@ -258,7 +258,7 @@ const loadCourseData = async () => {
           }
       }
 
-      // ดึงข้อมูลประกาศของคอร์สเรียน (Fetch Course Announcements)
+      // Fetch Course Announcements
       const annRes = await fetchCourseAnnouncements(courseId.value)
       if (annRes.success) {
           announcements.value = annRes.data || []
@@ -275,7 +275,7 @@ const loadCourseData = async () => {
 const loadLesson = async (lessonId: number) => {
   if (currentLesson.value?.id === lessonId) return
   
-  // ล้างสถานะวิดีโอเดิมเพื่อบังคับตั้งค่าใหม่ (Clear previous video state & unload component to force reset)
+  // Clear previous video state & unload component to force reset
   isPlaying.value = false
   videoProgress.value = 0
   currentTime.value = 0
@@ -285,16 +285,16 @@ const loadLesson = async (lessonId: number) => {
   lastSavedTimestamp.value = 0
   lastLocalSaveTimestamp.value = 0
   currentDuration.value = 0
-  currentLesson.value = null // ตัวนี้จะทำการซ่อนวิดีโอและซ่อนเนื้อหา (This will unmount VideoPlayer and hide content)
+  currentLesson.value = null // This will unmount VideoPlayer and hide content
   
   isLessonLoading.value = true
   try {
-    // ป้องกันไว้ก่อน: ตรวจสอบสิทธิ์การเข้าถึง (Optional: Check access first)
+    // Optional: Check access first
     const accessRes = await checkLessonAccess(courseId.value, lessonId)
     if (accessRes.success && !accessRes.data.is_accessible) {
         let msg = t('classroom.notAvailable')
         
-        // จัดการเหตุผลล็อกเฉพาะจุด (Handle specific lock reasons)
+        // Handle specific lock reasons
         if (accessRes.data.lock_reason) {
             msg = accessRes.data.lock_reason
         } else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
@@ -314,32 +314,32 @@ const loadLesson = async (lessonId: number) => {
         return
     }
 
-    // 1. ดึงข้อมูลเนื้อหา (Fetch content)
+    // 1. Fetch content
     const res = await fetchLessonContent(courseId.value, lessonId)
     if (res.success) {
       currentLesson.value = res.data
       
-      // กำหนดค่าออบเจ็กต์ความคืบหน้าหากไม่มี (สำคัญสำหรับผู้ใช้ใหม่) (Initialize progress object if missing)
+      // Initialize progress object if missing (Critical for New Users)
       if (!currentLesson.value.progress) {
           currentLesson.value.progress = {}
       }
       
-      // อัปเดตสถานะสำเร็จของบทเรียนบน UI อย่างปลอดภัย (Update Lesson Completion UI status safely)
+      // Update Lesson Completion UI status safely
       if (currentLesson.value?.progress?.is_completed && courseData.value) {
           for (const chapter of courseData.value.chapters) {
               const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
               if (lesson) {
                   if (!lesson.progress) lesson.progress = {}
                   lesson.progress.is_completed = true
-                  lesson.is_completed = true // ตั้งค่าสถานะสำเร็จให้เป็นมาตรฐาน (Standardize completion property)
+                  lesson.is_completed = true // Standardize completion property
                   break
               }
           }
       }
 
-      // 2. ดึงความคืบหน้าเริ่มต้นเพื่อเล่นต่อ (Fetch Initial Progress (Resume Playback))
+      // 2. Fetch Initial Progress (Resume Playback)
       if (currentLesson.value.type === 'VIDEO') {
-           // หากเรียนจบแล้ว ให้ล้างจุดที่ดูล่าสุดเพื่อดูใหม่ได้ (If already completed, clear local resume point to allow fresh re-watch)
+           // If already completed, clear local resume point to allow fresh re-watch
            const isCompleted = currentLesson.value.progress?.is_completed || false
            
            if (isCompleted) {
@@ -351,7 +351,7 @@ const loadLesson = async (lessonId: number) => {
                maxWatchedTime.value = 0
                currentTime.value = 0
            } else {
-               // ถ้ายังเรียนไม่จบ? กลับไปเล่นจากจุดเดิม (Not completed? Resume from where we left off)
+               // Not completed? Resume from where we left off
                const progressRes = await fetchVideoProgress(lessonId)
                let serverProgress = 0
                if (progressRes.success && progressRes.data?.video_progress_seconds) {
@@ -379,24 +379,24 @@ const loadLesson = async (lessonId: number) => {
   }
 }
 
-// ข้อมูลอ้างอิงวิดีโอ (Video Player Ref (Component))
+// Video Player Ref (Component)
 const videoPlayerComp = ref(null)
 
-// สถานะความก้าวหน้าและวิดีโอ (Video & Progress State)
+// Video & Progress State
 const initialSeekTime = ref(0)
-const maxWatchedTime = ref(0) // การติดตามแบบไม่ย้อนกลับ (Anti-rewind monotonic tracking)
+const maxWatchedTime = ref(0) // Anti-rewind monotonic tracking
 const lastSavedTime = ref(-1)
-const lastSavedTimestamp = ref(0) // เวลาบันทึกในเซิร์ฟเวอร์ (Server throttle timestamp)
-const lastLocalSaveTimestamp = ref(0) // เวลาบันทึกในเครื่อง (Local throttle timestamp)
-const currentDuration = ref(0) // ติดตามเวลาของวิดีโอ (Track duration for save logic)
+const lastSavedTimestamp = ref(0) // Server throttle timestamp
+const lastLocalSaveTimestamp = ref(0) // Local throttle timestamp
+const currentDuration = ref(0) // Track duration for save logic
 
-// ฟังก์ชันช่วยเหลือ: ชื่อคีย์สำหรับ Local Storage (Helper: Get Local Storage Key)
+// Helper: Get Local Storage Key
 const getLocalProgressKey = (lessonId: number) => {
     if (!user.value?.id) return null
     return `progress:${user.value.id}:${lessonId}`
 }
 
-// ฟังก์ชันช่วยเหลือ: ดึงความคืบหน้าจากเครื่อง (Helper: Get Local Progress)
+// Helper: Get Local Progress
 const getLocalProgress = (lessonId: number): number => {
     try {
         const key = getLocalProgressKey(lessonId)
@@ -408,7 +408,7 @@ const getLocalProgress = (lessonId: number): number => {
     }
 }
 
-// ฟังก์ชันช่วยเหลือ: บันทึกลงเครื่อง (Helper: Save to Local Storage)
+// Helper: Save to Local Storage
 const saveLocalProgress = (lessonId: number, time: number) => {
     try {
         const key = getLocalProgressKey(lessonId)
@@ -416,31 +416,31 @@ const saveLocalProgress = (lessonId: number, time: number) => {
            localStorage.setItem(key, time.toString())
         }
     } catch (e) {
-        // ข้ามกรณีเกิดข้อผิดพลาดในการบันทึก (Ignore storage errors)
+        // Ignore storage errors
     }
 }
 
-// ฟังก์ชันจัดการเวลาของวิดีโอ (จาก Component) (Handler: Video Time Update (from Component))
+// Handler: Video Time Update (from Component)
 const handleVideoTimeUpdate = (cTime: number, dur: number) => {
   currentDuration.value = dur || 0
   
-  // อัปเดตความคืบหน้าแบบทางเดียว (Update Monotonic Progress)
+  // Update Monotonic Progress
   if (cTime > maxWatchedTime.value) {
       maxWatchedTime.value = cTime
   }
   
-  // ตรรกะ: บันทึกเป็นระยะ (Logic: Periodic Save) 
+  // Logic: Periodic Save 
   if (currentLesson.value?.id) {
       const now = Date.now()
       
-      // 1. การหน่วงเวลาบันทึกในเครื่อง (5 วินาที) (Local Save Throttle (5 seconds))
+      // 1. Local Save Throttle (5 seconds)
       if (now - lastLocalSaveTimestamp.value > 5000) {
           saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
           lastLocalSaveTimestamp.value = now
       }
       
-      // 2. การหน่วงเวลาบันทึกบนเซิร์ฟเวอร์ (จัดการใน performSaveProgress)
-      // หมายเหตุ: เราไม่เช็ค isPlaying ตรงนี้เพราะถ้าเวลาเดินแปลว่าเล่นอยู่ (Note: We don't check isPlaying here because if time is updating, it IS playing.)
+      // 2. Server Save Throttle (handled inside performSaveProgress)
+      // Note: We don't check isPlaying here because if time is updating, it IS playing.
       performSaveProgress(false, false)
   }
 }
@@ -451,49 +451,49 @@ const onVideoMetadataLoaded = (duration: number) => {
     }
 }
 
-const isCompleting = ref(false) // ตัวแปรกันการแย่งกันทำงานตอนเรียนจบ (Flag to prevent race conditions during completion)
+const isCompleting = ref(false) // Flag to prevent race conditions during completion
 
 // -----------------------------------------------------
-// ระบบบันทึกความคืบหน้าที่แข็งแกร่ง (ไฮบริด: ในเครื่อง + เซิร์ฟเวอร์) (ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server))
+// ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server)
 // -----------------------------------------------------
 
-// ฟังก์ชันหลักสำหรับบันทึกลงเซิร์ฟเวอร์ (Main Server Save Function)
+// Main Server Save Function
 const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
     const lesson = currentLesson.value
     if (!lesson || lesson.type !== 'VIDEO') return
     
-    // ทำให้แน่ใจว่ามีออบเจ็กต์ความคืบหน้าอยู่ (Ensure progress object exists)
+    // Ensure progress object exists
     if (!lesson.progress) lesson.progress = {}
 
-    // 1. ป้องกันเมื่อดูจบแล้ว: ไม่ต้องบันทึกอีกถ้าดูจบไปแล้ว (Completed Guard: Stop everything if already completed)
+    // 1. Completed Guard: Stop everything if already completed
     if (lesson.progress.is_completed) return
 
-    // 2. ป้องกันการเรียกซ้ำ: ไม่ทำงานถ้ากำลังบันทึกเวลาจบอยู่ (Race Condition Guard: Stop if currently completing)
+    // 2. Race Condition Guard: Stop if currently completing
     if (isCompleting.value) return
 
     const now = Date.now()
-    const maxSec = Math.floor(maxWatchedTime.value) // ใช้เวลาที่ดูไปมากที่สุด (Use max watched time)
+    const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
     const durationSec = Math.floor(currentDuration.value || 0)
 
-    // 3. ตรวจสอบการเดินหน้า: ยอมให้บันทึก 0 ได้ถ้าเป็นการบันทึกครั้งแรก (lastSavedTime is -1) (Monotonic Check: Allow saving 0 if it's the very first save)
+    // 3. Monotonic Check: Allow saving 0 if it's the very first save (lastSavedTime is -1)
     if (!force) {
         if (lastSavedTime.value === -1) {
-            // บันทึกครั้งแรก: ยอมรับ 0 หรือมากกว่า (First time save: allow 0 or more)
+            // First time save: allow 0 or more
             if (maxSec < 0) return 
         } else if (maxSec <= lastSavedTime.value) {
-            // การบันทึกครั้งถัดไป: ต้องมากกว่าครั้งล่าสุด (Subsequent saves: must be greater than last saved)
+            // Subsequent saves: must be greater than last saved
             return
         }
     }
     
-    // 4. ตรวจสอบการหน่วงเวลา: เซิร์ฟเวอร์ (15 วินาที) (Throttle Check: Server Throttle (15 seconds))
+    // 4. Throttle Check: Server Throttle (15 seconds)
     if (!force && (now - lastSavedTimestamp.value < 15000)) return
 
-    // เตรียมบันทึก (Prepare for Save)
+    // Prepare for Save
     lastSavedTime.value = maxSec 
     lastSavedTimestamp.value = now
 
-    // เช็คว่าการบันทึกนี้จะทำให้จบบทเรียนหรือไม่ (เช่น 100% หรือบังคับจบ) (Check if this save might complete the lesson)
+    // Check if this save might complete the lesson (e.g. 100% or forced end)
     const isFinishing = force || (durationSec > 0 && maxSec >= durationSec)
     
     if (isFinishing) {
@@ -503,8 +503,8 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
     try {
         const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
         
-        // จัดการเมื่อดูจบ (กลยุทธ์เฉพาะฝั่งหน้าเว็บ: ให้ผ่านที่ 95%) (Handle Completion (Frontend-only strategy: 95% threshold))
-        // เพื่อให้เครื่องหมายถูกขึ้นที่ 95% ตรงกับหลังบ้าน (This ensures the checkmark appears at 95% to match backend.)
+        // Handle Completion (Frontend-only strategy: 95% threshold)
+        // This ensures the checkmark appears at 95% to match backend.
         const progressPercentage = durationSec > 0 ? (maxSec / durationSec) : 0
         const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)
 
@@ -513,7 +513,7 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
              markLessonAsCompletedLocally(lesson.id)
              if (lesson.progress) lesson.progress.is_completed = true
              
-             // หากเพิ่งเรียนจบใหม่ ให้โหลดเนื้อหาใหม่เพื่อปลดล็อกบทถัดไป (If newly completed, reload course data to unlock next lesson in sidebar)
+             // If newly completed, reload course data to unlock next lesson in sidebar
              if (!wasAlreadyCompleted) {
                  await loadCourseData()
              }
@@ -527,13 +527,13 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
     }
 }
 
-// ฟังก์ชันช่วยเหลือสำหรับอัปเดตแถบด้านข้าง (Helper to update Sidebar UI)
+// Helper to update Sidebar UI
 const markLessonAsCompletedLocally = (lessonId: number) => {
     if (courseData.value) {
         for (const chapter of courseData.value.chapters) {
             const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
             if (lesson) {
-                // สอดคล้องกับโครงสร้าง API (Compatible with API structure)
+                // Compatible with API structure
                 lesson.is_completed = true
                 if (!lesson.progress) lesson.progress = {}
                 lesson.progress.is_completed = true
@@ -547,11 +547,11 @@ const videoSrc = computed(() => {
   if (!currentLesson.value) return ''
   let url = ''
   
-  // ใช่ video_url โดยตรงจาก API ก่อน (Use explicit video_url from API first)
+  // Use explicit video_url from API first
   if (currentLesson.value.video_url) {
     url = currentLesson.value.video_url
   } else {
-    // สำรอง (ตรรกะแบบเก่า)
+    // Fallback (deprecated logic)
     const content = getLocalizedText(currentLesson.value.content)
     if (content && (content.startsWith('http') || content.startsWith('/')) && !content.includes(' ')) {
       url = content
@@ -560,7 +560,7 @@ const videoSrc = computed(() => {
 
   if (!url) return ''
 
-  // รองรับการเล่นต่อสำหรับ YouTube (Support Resume for YouTube)
+  // Support Resume for YouTube
   const isYoutube = url.toLowerCase().includes('youtube.com') || url.toLowerCase().includes('youtu.be')
   if (isYoutube && initialSeekTime.value > 0) {
       const separator = url.includes('?') ? '&' : '?'
@@ -575,7 +575,7 @@ const onVideoEnded = async () => {
     const lesson = currentLesson.value
     if (!lesson) return
 
-    // ล้าง localStorage เนื่องจากดจบแล้ว (Clear local storage on end since it's completed)
+    // Clear local storage on end since it's completed
     const key = getLocalProgressKey(lesson.id)
     if (key && typeof window !== 'undefined') {
         localStorage.removeItem(key)
@@ -598,7 +598,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  // ล้างสถานะเมื่อออกจากหน้าเพื่อให้หน้าเหมือนใหม่ตอนกลับมา (Clear state when leaving the page to ensure fresh start on return)
+  // Clear state when leaving the page to ensure fresh start on return
   courseData.value = null
   currentLesson.value = null
 })
@@ -665,7 +665,7 @@ onBeforeUnmount(() => {
       </q-toolbar>
     </q-header>
 
-    <!-- แถบด้านข้าง (บทเรียน) - วางชิดขวาผ่านพร็อพพ์ -->
+    <!-- Sidebar (Curriculum) - Positioned Right via component prop -->
     <CurriculumSidebar
       v-model="sidebarOpen"
       :courseData="courseData"
@@ -676,14 +676,14 @@ onBeforeUnmount(() => {
       @open-announcements="handleOpenAnnouncements"
     />
 
-    <!-- พื้นที่เนื้อหาหลัก (Main Content) -->
+    <!-- Main Content -->
     <q-page-container class="bg-white dark:bg-slate-900">
       <q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
-         <!-- กรอบวิดีโอและพื้นที่เนื้อหา (Video Player & Content Area) -->
+         <!-- Video Player & Content Area -->
          <div class="w-full h-full p-4 md:p-6 flex-grow overflow-y-auto">
-            <!-- 1. สถานะกำลังโหลด (โครงสร้างเสมือน (Skeleton) สมบูรณ์แบบ) (LOADING STATE (Comprehensive Skeleton)) -->
+            <!-- 1. LOADING STATE (Comprehensive Skeleton) -->
             <div v-if="isLessonLoading" class="animate-fade-in">
-                <!-- โครงภาพวิดีโอ (Video Skeleton) -->
+                <!-- Video Skeleton -->
                 <div class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-3xl animate-pulse flex items-center justify-center mb-10 overflow-hidden relative shadow-xl focus:outline-none">
                     <img 
                         v-if="courseData?.course?.thumbnail_url"
@@ -697,7 +697,7 @@ onBeforeUnmount(() => {
                     </div>
                 </div>
                 
-                <!-- โครงข้อมูล (Info Skeleton) -->
+                <!-- Info Skeleton -->
                 <div class="bg-white dark:bg-slate-800/50 p-8 rounded-3xl border border-slate-100 dark:border-white/5 shadow-sm">
                     <div class="h-10 bg-slate-200 dark:bg-slate-800 rounded-xl w-3/4 mb-4 animate-pulse"></div>
                     <div class="h-4 bg-slate-100 dark:bg-slate-800 rounded-lg w-full mb-2 animate-pulse"></div>
@@ -705,9 +705,9 @@ onBeforeUnmount(() => {
                 </div>
             </div>
             
-            <!-- 2. สถานะพร้อมใช้งาน (ข้อมูลบทเรียนจริง) (READY STATE (Real Lesson Content)) -->
+            <!-- 2. READY STATE (Real Lesson Content) -->
             <div v-else-if="currentLesson" class="animate-fade-in">
-                <!-- ส่วนการเล่นวิดีโอ (Video Player) -->
+                <!-- Video Player -->
                 <VideoPlayer
                    v-if="videoSrc"
                    ref="videoPlayerComp"
@@ -719,7 +719,7 @@ onBeforeUnmount(() => {
                    @loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
                 />
             
-              <!-- ข้อมูลบทเรียน (Lesson Info) -->
+              <!-- Lesson Info -->
               <div 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">
@@ -728,7 +728,7 @@ onBeforeUnmount(() => {
                 
                 <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>
                 
-                <!-- ช่องบทเรียน (Text/HTML) (Lesson Content Area) -->
+                <!-- Lesson Content Area (Text/HTML) -->
                 <div v-if="currentLesson.type === 'QUIZ'" class="p-8 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:from-slate-800/50 dark:to-slate-900/50 rounded-2xl border border-blue-100 dark:border-white/5 text-center">
                     <div class="bg-white dark:bg-slate-800 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm text-blue-500 dark:text-blue-400 border dark:border-white/10">
                         <q-icon name="quiz" size="40px" />
@@ -783,7 +783,7 @@ onBeforeUnmount(() => {
                     <div v-html="getLocalizedText(currentLesson.content)" class="leading-relaxed text-slate-800 dark:text-slate-200"></div>
                 </div>
 
-                <!-- ส่วนเอกสารแนบ (Attachments Section) -->
+                <!-- Attachments Section -->
                 <div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8 pt-6 border-t border-gray-100 dark:border-white/5">
                     <h3 class="text-lg font-bold mb-4 text-slate-900 dark:text-white flex items-center gap-2">
                         <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
diff --git a/Frontend-Learner/pages/classroom/quiz.vue b/Frontend-Learner/pages/classroom/quiz.vue
index 04a2e940..6bdf2d47 100644
--- a/Frontend-Learner/pages/classroom/quiz.vue
+++ b/Frontend-Learner/pages/classroom/quiz.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /**
  * @file quiz.vue
- * @description หน้าสำหรับทำแบบทดสอบ (Quiz Interface)
- * จัดการวงจรชีวิตของการทำแบบทดสอบทั้งหมด: เริ่มต้น -> ทำข้อสอบ -> ผลลัพธ์ -> ทบทวน
- * มีฟีเจอร์จับเวลา การนำทางระหว่างคำถาม และการวิเคราะห์ผลลัพธ์อย่างละเอียด
+ * @description Quiz Interface.
+ * Manages the entire quiz lifecycle: Start -> Taking -> Results -> Review.
+ * Features a timer, question navigation, and detailed result analysis.
  */
 
 definePageMeta({
@@ -17,7 +17,7 @@ const router = useRouter()
 const $q = useQuasar()
 const { fetchCourseLearningInfo, fetchLessonContent, submitQuiz: apiSubmitQuiz, markLessonComplete } = useCourse()
 
-// การจัดการสถานะ (State Management)
+// State Management
 const currentScreen = ref<'start' | 'taking' | 'result' | 'review'>('start')
 const timeLeft = ref(0) 
 let timerInterval: ReturnType<typeof setInterval> | null = null
@@ -30,20 +30,20 @@ const quizData = ref<any>(null)
 const isLoading = ref(true)
 const isSubmitting = ref(false)
 
-// สถานะขณะทำแบบทดสอบ (Quiz Taking State)
+// Quiz Taking State
 const currentQuestionIndex = ref(0)
-const userAnswers = ref<Record<number, number>>({}) // ID คำถาม -> ID คำตอบ (questionId -> choiceId)
-const visitedQuestions = ref<Set<number>>(new Set()) // ติดตามข้อที่เคยเปิดดูแล้ว (Track visited indices)
+const userAnswers = ref<Record<number, number>>({}) // questionId -> choiceId
+const visitedQuestions = ref<Set<number>>(new Set()) // Track visited indices
 const quizResult = ref<any>(null)
 
-// ติดตามคำถามที่เปิดดูแล้ว (Tracking visited questions)
+// Tracking visited questions
 watch(currentQuestionIndex, (newVal) => {
     visitedQuestions.value.add(newVal)
 }, { immediate: true })
 
-// ฟังก์ชันช่วยเหลือ: ดึงคลาสสีสำหรับสถานะคำถาม (Helper: Get Status Color Class)
+// Helper: Get Status Color Class
 const getQuestionStatusClass = (index: number, questionId: number) => {
-    // 1. ข้อปัจจุบัน = สีฟ้า (Current = Blue)
+    // 1. Current = Blue
     if (index === currentQuestionIndex.value) {
         return 'bg-blue-500 text-white border-blue-600 ring-2 ring-blue-200 dark:ring-blue-900'
     }
@@ -51,29 +51,32 @@ const getQuestionStatusClass = (index: number, questionId: number) => {
     const hasAnswer = userAnswers.value[questionId] !== undefined
     const isVisited = visitedQuestions.value.has(index)
 
-    // 2. ตอบแล้ว = สีเขียว (Completed = Green)
+    // 2. Completed = Green
     if (hasAnswer) {
         return 'bg-emerald-500 text-white border-emerald-600'
     }
 
-    // 3. ข้าม = สีส้ม (เปิดดูแล้วแต่ยังไม่ตอบ) (Skipped = Orange (Visited but no answer))
-    // หมายเหตุ: ตามคำนิยามของการข้าม หากคลิกแล้วหน้าเว็บไม่บันทึกข้อมูลจะถือว่าเป็นการข้าม
-    // ในขั้นตอนนี้การดูเฉยๆ แล้วผ่านถือเป็นการข้ามเช่นกัน
+    // 3. Skipped = Orange (Visited but no answer)
+    // Note: If we are strictly following "Skipped" definition:
+    // "user pressed Skip or moved forward on a skippable question without saving an answer"
+    // In this linear flow, merely visiting and leaving empty counts as skipped.
     if (isVisited && !hasAnswer) {
         return 'bg-orange-500 text-white border-orange-600'
     }
 
-    // 4. ยังไม่เริ่ม = สีเทา (Not Started = Grey)
+    // 4. Not Started = Grey
     return 'bg-slate-200 text-slate-400 border-slate-300 dark:bg-white/5 dark:border-white/5 dark:text-slate-600 hover:bg-slate-300 dark:hover:bg-white/10'
 }
 
 const jumpToQuestion = (targetIndex: number) => {
     if (targetIndex === currentQuestionIndex.value) return
     
-    // ตรวจสอบก่อนออกจากข้อปัจจุบัน (Validation before leaving current)
+    // Validation before leaving current (same logic as Next)
     if (targetIndex > currentQuestionIndex.value) {
-         // หากข้ามไปข้างหน้า จะต้องตรวจสอบว่าข้อปัจจุบันทำไปถึงไหนแล้ว 
-         // ควรบังคับให้คลิกคำตอบก่อนจึงข้ามได้ (เงื่อนไขสำหรับคำถามที่ไม่ให้ข้าม)
+         // If jumping forward, we must validate the CURRENT question requirements
+         // unless we treat grid jumps as free navigation? 
+         // Req: "user cannot go Next until the question is answered and saved" (if not skippable).
+         // So we must check restriction on the current spot before leaving.
          const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
          const isSkippable = quizData.value?.is_skippable
          
@@ -88,12 +91,12 @@ const jumpToQuestion = (targetIndex: number) => {
          }
     }
     
-    // อนุญาตให้ย้อนกลับได้อย่างอิสระ (If jumping backward? Usually allowed freely.)
+    // If jumping backward? Usually allowed freely.
     
     currentQuestionIndex.value = targetIndex
 }
 
-// ตัวแปรแบบ Computed (Computed Properties)
+// Computed
 const currentQuestion = computed(() => {
     if (!quizData.value || !quizData.value.questions) return null
     return quizData.value.questions[currentQuestionIndex.value]
@@ -113,7 +116,7 @@ const timerDisplay = computed(() => {
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
 })
 
-// ฟังก์ชันช่วยเหลือสำหรับการแปลภาษา (Helper for localization)
+// Helper for localization
 const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
@@ -123,7 +126,7 @@ const getLocalizedText = (text: any) => {
 
 const lessonProgress = ref<any>(null)
 
-// โหลดข้อมูล (Data Fetching)
+// Data Fetching
 const loadData = async () => {
     isLoading.value = true
     try {
@@ -135,9 +138,9 @@ const loadData = async () => {
         if (courseId && lessonId) {
             const lessonRes = await fetchLessonContent(courseId, lessonId)
             if (lessonRes.success) {
-                // กำหนดข้อมูลแบบทดสอบ (Determine if data is directly the quiz or nested)
+                // Determine if data is directly the quiz or nested
                 quizData.value = lessonRes.data.quiz || lessonRes.data
-                lessonProgress.value = lessonRes.progress // บันทึกความคืบหน้า (Capture progress)
+                lessonProgress.value = lessonRes.progress // Capture progress
                 if (quizData.value?.time_limit) {
                     timeLeft.value = quizData.value.time_limit * 60
                 }
@@ -150,7 +153,7 @@ const loadData = async () => {
     }
 }
 
-// ฟังก์ชันช่วยสุ่มเรียงลำดับอาร์เรย์ (Helper for shuffling)
+// Helper for shuffling
 const shuffleArray = <T>(array: T[]): T[] => {
     return array
         .map(value => ({ value, sort: Math.random() }))
@@ -158,18 +161,18 @@ const shuffleArray = <T>(array: T[]): T[] => {
         .map(({ value }) => value)
 }
 
-// การกระทำในแบบทดสอบ (Quiz Actions)
+// Quiz Actions
 const startQuiz = () => {
-  // รีเซ็ตข้อมูลโดยคัดลอกใหม่เพื่อนำมาสุ่ม (Deep copy to reset and apply shuffle)
+  // Deep copy to reset and apply shuffle
   const rawQuiz = JSON.parse(JSON.stringify(quizData.value))
   
   if (rawQuiz) {
-      // สุ่มคำถาม (Shuffle Questions)
+      // Shuffle Questions
       if (rawQuiz.shuffle_questions && rawQuiz.questions) {
           rawQuiz.questions = shuffleArray(rawQuiz.questions)
       }
       
-      // สุ่มตัวเลือกคำตอบ (Shuffle Choices)
+      // Shuffle Choices
       if (rawQuiz.shuffle_choices && rawQuiz.questions) {
           rawQuiz.questions.forEach((q: any) => {
               if (q.choices) {
@@ -177,7 +180,7 @@ const startQuiz = () => {
               }
           })
       }
-      // อัปเดตข้อมูลให้เป็นแบบสุ่ม (Update state with shuffled data)
+      // Update state with shuffled data
       quizData.value = rawQuiz
   }
 
@@ -193,7 +196,7 @@ const startQuiz = () => {
       }, 1000)
   }
   
-  // ทำเครื่องหมายข้อแรกว่าเปิดดูแล้ว (Mark first as visited)
+  // Mark first as visited
   visitedQuestions.value = new Set([0])
 }
 
@@ -206,12 +209,12 @@ const selectAnswer = (choiceId: number) => {
 const nextQuestion = () => {
     if (!currentQuestion.value) return
 
-    // อนุญาตให้ข้ามได้หากโหมดข้ามเปิดอยู่ หรือ ตอบแล้ว (Allow skip if quiz is skippable or question is answered)
+    // Allow skip if quiz is skippable or question is answered
     const isAnswered = userAnswers.value[currentQuestion.value.id] !== undefined
     const isSkippable = quizData.value?.is_skippable
 
     if (!isAnswered && !isSkippable) {
-        // แสดงข้อความเตือน (Show warning)
+        // Show warning
         $q.notify({
             type: 'warning',
             message: t('quiz.pleaseSelectAnswer', 'กรุณาเลือกคำตอบ'),
@@ -238,7 +241,7 @@ const retryQuiz = () => {
 }
 
 const submitQuiz = async (auto = false) => {
-  // 1. ตรวจสอบก่อนว่าทำครบทุกข้อหรือยัง (Manual Validation: Check if all questions are answered)
+  // 1. Manual Validation: Check if all questions are answered
   if (!auto) {
      const answeredCount = Object.keys(userAnswers.value).length
      if (answeredCount < totalQuestions.value) {
@@ -251,7 +254,7 @@ const submitQuiz = async (auto = false) => {
         return
      }
 
-     // หน้าต่างยืนยันส่งข้อสอบแบบสวยงาม (Premium Confirmation before submission)
+     // Premium Confirmation before submission
      $q.dialog({
          title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
          message: `<div class="text-slate-600 dark:text-slate-300 text-base leading-relaxed mt-2">${t('quiz.submitConfirm')}</div>`,
@@ -282,33 +285,33 @@ const submitQuiz = async (auto = false) => {
 }
 
 const processSubmitQuiz = async (auto = false) => {
-  // 2. เริ่มขั้นตอนการส่งข้อสอบ (Start Submission Process)
+  // 2. Start Submission Process
   if (timerInterval) clearInterval(timerInterval)
   
   isSubmitting.value = true
-  currentScreen.value = 'result' // เปลี่ยนหน้าไปที่หน้าสรุปผล (Switch to result screen to show progress)
+  currentScreen.value = 'result' // Switch to result screen to show progress
   
   try {
-      // เตรียมข้อมูลยิง API (Prepare Payload)
+      // Prepare Payload
       const answersPayload = Object.entries(userAnswers.value).map(([qId, cId]) => ({
           question_id: Number(qId),
           choice_id: cId
       }))
 
-      // ตรวจสอบว่าเคยผ่านแล้วหรือไม่ (Check if already passed)
+      // Check if already passed
       const alreadyPassed = lessonProgress.value?.is_passed || lessonProgress.value?.is_completed || false
 
-      // เรียก API (Call API)
+      // Call API
       const res = await apiSubmitQuiz(courseId, lessonId, answersPayload, alreadyPassed)
       
       if (res.success && res.data) {
           quizResult.value = res.data
-          // อัปเดตข้อมูลบนเว็บหากผ่านแบบทดสอบ (Update local progress if passed and not previously passed)
+          // Update local progress if passed and not previously passed
           if (res.data.is_passed && !alreadyPassed) {
              if (lessonProgress.value) lessonProgress.value.is_passed = true
           }
       } else {
-          // การจัดการเมื่อเกิดข้อผิดพลาดฉุกเฉิน (Fallback error handling)
+          // Fallback error handling
           $q.notify({
               type: 'negative',
               message: res.error || 'Failed to submit quiz'
@@ -361,14 +364,14 @@ const reviewQuiz = () => {
     currentScreen.value = 'review'
 }
 
-// เปลี่ยน ID เป็นตัวอักษรเพื่อความสวยงาม (A, B, C...) (Helper to get choice label (A, B, C...))
+// Helper to get choice label (A, B, C...)
 const getChoiceLabel = (index: number) => {
     return String.fromCharCode(65 + index) // 65 is 'A'
 }
 
 const getCorrectChoiceId = (questionId: number) => {
     if (!quizResult.value?.answers_review) return null
-    // เช็คข้อมูลก่อนพัง (Type checking for safety)
+    // Type checking for safety
     const review = Array.isArray(quizResult.value.answers_review) 
         ? quizResult.value.answers_review.find((r: any) => r.question_id === questionId)
         : null
@@ -381,7 +384,7 @@ const getCorrectChoiceId = (questionId: number) => {
     <q-page-container>
       <q-page>
         <div class="quiz-shell min-h-screen bg-slate-50 dark:bg-[#0b0f1a] text-slate-900 dark:text-slate-200 antialiased selection:bg-blue-500/20 transition-colors">
-    <!-- ส่วนหัว (Header) -->
+    <!-- Header -->
     <header class="h-14 bg-white dark:!bg-[var(--bg-surface)] fixed top-0 inset-x-0 z-[100] flex items-center px-6 border-b border-slate-200 dark:border-white/5 transition-colors">
       <div class="flex items-center w-full justify-between">
         <div class="flex items-center">
@@ -407,7 +410,7 @@ const getCorrectChoiceId = (questionId: number) => {
       </div>
     </header>
 
-    <!-- พื้นที่เนื้อหาหลัก (Main Content Area) -->
+    <!-- Main Content Area -->
     <main class="pt-14 h-screen flex items-center justify-center overflow-y-auto px-4 custom-scrollbar">
       
       <div v-if="isLoading" class="flex flex-col items-center gap-4">
@@ -432,9 +435,9 @@ const getCorrectChoiceId = (questionId: number) => {
       </div>
 
       <template v-else>
-          <!-- 1. หน้าเริ่มต้น (START SCREEN) -->
+          <!-- 1. START SCREEN -->
           <div v-if="currentScreen === 'start'" class="w-full max-w-[640px] animate-fade-in py-12">
-             <!-- ... (หน้าแรกยังคงเหมือนเดิม แปะไว้เป็น reference) ... -->
+             <!-- ... (Start Screen is unchanged but needs to be here for context) ... -->
              <div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-14 shadow-lg dark:shadow-2xl relative overflow-hidden transition-colors">
                
                <div class="flex justify-center mb-10">
@@ -456,7 +459,7 @@ const getCorrectChoiceId = (questionId: number) => {
                  </p>
                </div>
 
-               <!-- กล่องคำแนะนำ (Instruction Box) -->
+               <!-- Instruction Box -->
                <div class="bg-slate-50 dark:bg-[#0b121f]/80 p-8 rounded-3xl mb-8 border border-slate-100 dark:border-white/5">
                   <h3 class="text-[12px] font-black text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-[0.2em] flex items-center gap-2">
                      {{ $t('quiz.instructionTitle') }}
@@ -480,16 +483,17 @@ const getCorrectChoiceId = (questionId: number) => {
              </div>
           </div>
 
-          <!-- 2. หน้าทำแบบทดสอบ (TAKING SCREEN) -->
+          <!-- 2. TAKING SCREEN -->
+          <!-- 2. TAKING SCREEN -->
           <div v-if="currentScreen === 'taking'" class="w-full max-w-[840px] animate-fade-in py-12">
              <div v-if="currentQuestion" class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[32px] p-8 md:p-12 shadow-xl relative overflow-hidden">
 
-                 <!-- แถบความคืบหน้า (Progress Bar) -->
+                 <!-- Progress Bar -->
                  <div class="absolute top-0 left-0 right-0 h-1.5 bg-slate-100 dark:bg-white/5">
                      <div class="h-full bg-blue-500 transition-all duration-300" :style="{ width: ((currentQuestionIndex + 1) / totalQuestions) * 100 + '%' }"></div>
                  </div>
 
-                 <!-- แผนที่คำถาม / การเปลี่ยนหน้า (Question Map / Pagination) -->
+                 <!-- Question Map / Pagination -->
                  <div class="flex flex-wrap gap-2 mb-8 mt-4">
                      <button
                          v-for="(q, idx) in quizData?.questions"
@@ -502,12 +506,12 @@ const getCorrectChoiceId = (questionId: number) => {
                      </button>
                  </div>
 
-                 <!-- ชื่อคำถาม (Question Title) -->
+                 <!-- Question Title -->
                  <h3 class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white mb-10 leading-relaxed">
                      {{ getLocalizedText(currentQuestion.question) }}
                  </h3>
 
-                 <!-- ส่วนการเลือกคำตอบ (Choices) -->
+                 <!-- Choices -->
                  <div class="flex flex-col gap-4 mb-12">
                      <button 
                          v-for="choice in currentQuestion.choices" 
@@ -529,7 +533,7 @@ const getCorrectChoiceId = (questionId: number) => {
 
 
 
-                 <!-- ปุ่มควบคุมต่างๆ (Controls) -->
+                 <!-- Controls -->
                  <div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-white/5">
                      <button 
                          @click="prevQuestion" 
@@ -559,7 +563,7 @@ const getCorrectChoiceId = (questionId: number) => {
 
 
 
-           <!-- 3. หน้าผลลัพธ์การทำแบบทดสอบ (RESULT SCREEN) -->
+           <!-- 3. RESULT SCREEN -->
           <div v-if="currentScreen === 'result'" class="w-full max-w-[640px] animate-fade-in py-12">
              <div class="bg-white dark:!bg-[#1e293b] border border-slate-200 dark:border-white/5 rounded-[40px] p-10 shadow-2xl text-center relative overflow-hidden">
                  
@@ -582,7 +586,7 @@ const getCorrectChoiceId = (questionId: number) => {
                      </p>
                  </div>
 
-                 <!-- บัตรแสดงคะแนน (Score Card) -->
+                 <!-- Score Card -->
                  <div class="bg-slate-50 dark:bg-[#0b121f] rounded-3xl p-6 mb-8 flex items-center justify-around border border-slate-100 dark:border-white/5">
                      <div class="text-center">
                          <div class="text-xs font-black text-slate-400 uppercase tracking-widest mb-1">{{ $t('quiz.scoreLabel') }}</div>
@@ -622,7 +626,7 @@ const getCorrectChoiceId = (questionId: number) => {
              </div>
           </div>
 
-          <!-- 4. หน้าทบทวนข้อสอบ (REVIEW SCREEN) -->
+          <!-- 4. REVIEW SCREEN -->
           <div v-if="currentScreen === 'review'" class="w-full max-w-[840px] animate-fade-in py-12 pb-24">
              <div class="space-y-6">
                  <div 
@@ -648,7 +652,7 @@ const getCorrectChoiceId = (questionId: number) => {
                                       'border-slate-100 dark:border-white/5 opacity-80 dark:opacity-40': userAnswers[question.id] !== choice.id && choice.id !== getCorrectChoiceId(question.id)
                                   }"
                                 >
-                                    <!-- ไอคอนสถานะ (Indicator Icon) -->
+                                    <!-- Indicator Icon -->
                                     <div 
                                       class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-sm border-2"
                                       :class="{
@@ -664,7 +668,7 @@ const getCorrectChoiceId = (questionId: number) => {
 
                                     <span class="font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(choice.text) }}</span>
                                     
-                                    <!-- ป้ายแสดงสถานะ (Label Badge) -->
+                                    <!-- Label Badge -->
                                     <div v-if="choice.id === getCorrectChoiceId(question.id)" class="ml-auto px-2 py-0.5 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 text-xs font-bold rounded uppercase tracking-wider">
                                         {{ $t('quiz.correctLabel', 'Correct') }}
                                     </div>
@@ -691,11 +695,11 @@ const getCorrectChoiceId = (questionId: number) => {
     </main>
 
 
-        </div> <!-- ปิดส่วนเปลือกข้อสอบ (Close quiz-shell) -->
+        </div> <!-- Close quiz-shell -->
 
 
-       <!-- ป๊อปอัปแผนที่คำถาม (เดสก์ท็อป) - อยู่นอกพื้นที่ทำงานปกติ (Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow) -->
-       <!-- ใช้งาน QPageSticky ให้ถูกที่ (Using QPageSticky properly inside q-page/q-layout context we added) -->
+       <!-- Question Navigator Sidebar/Floating (Desktop) - Outside Main Flow -->
+       <!-- Using QPageSticky properly inside q-page/q-layout context we added -->
       <q-page-sticky
         v-if="false"
         position="top-right"
diff --git a/Frontend-Learner/pages/course/[id].vue b/Frontend-Learner/pages/course/[id].vue
index 9f6af795..6571fff3 100644
--- a/Frontend-Learner/pages/course/[id].vue
+++ b/Frontend-Learner/pages/course/[id].vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file [id].vue
- * @description หน้าแสดงรายละเอียดคอร์ส (Dynamic Course Detail Page)
- * ดึงข้อมูลคอร์สเรียนตาม ID ที่ส่งมาใน URL และมีปุ่มสำหรับចុះทะเบียน
+ * @description Dynamic Course Detail Page.
+ * Displays detailed information about a specific course based on the ID.
  */
 
 definePageMeta({
@@ -114,7 +114,7 @@ useHead({
         />
       </div>
       
-      <!-- ส่วนแสดงผลขณะโหลดข้อมูลหรือเกิดข้อผิดพลาด (Loading / Error State) -->
+      <!-- Loading / Error State -->
       <div v-else class="text-center py-20">
          <div v-if="error" class="text-red-500 mb-4">
              <p class="font-bold">เกิดข้อผิดพลาดในการโหลดข้อมูล</p>
diff --git a/Frontend-Learner/pages/dashboard/announcements.vue b/Frontend-Learner/pages/dashboard/announcements.vue
index 2734d250..220ea414 100644
--- a/Frontend-Learner/pages/dashboard/announcements.vue
+++ b/Frontend-Learner/pages/dashboard/announcements.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 /**
  * @file announcements.vue
- * @description หน้าแสดงประกาศระบบและข่าวสารเกี่ยวกับคอร์สเรียน (Page displaying system and course-related announcements.)
- * ใช้เลย์เอาต์เริ่มต้นและต้องตรวจสอบสิทธิ์ (Uses the default layout and requires authentication.)
+ * @description Page displaying system and course-related announcements.
+ * Uses the default layout and requires authentication.
  */
 
-// ข้อมูล metadata ของหน้า: ใช้เลย์เอาต์ 'default' และระบบตรวจสอบสิทธิ์ 'auth' (Define page metadata: usage of 'default' layout and 'auth' middleware)
+// Define page metadata: usage of 'default' layout and 'auth' middleware
 definePageMeta({
   layout: 'default',
   middleware: 'auth'
 })
 
-// กำหนดชื่อหัวหน้าเว็บสำหรับ SEO (Set page title for SEO)
+// Set page title for SEO
 useHead({
   title: 'ประกาศ - e-Learning'
 })
@@ -19,22 +19,22 @@ useHead({
 
 <template>
   <div class="page-container">
-    <!-- ส่วนหัวหน้าเว็บ (Page Header) -->
+    <!-- Page Header -->
     <h1 class="text-3xl font-black mb-10 text-slate-900 dark:text-white">ประกาศ</h1>
 
     <!-- 
-      โครงสร้างหลัก: กริด 12 คอลัมน์ (Main Layout: 12-column Grid)
-      - คอลัมน์ซ้าย (span-8): เนื้อหาประกาศหลัก (Left Column: Main announcements content)
-      - คอลัมน์ขวา (span-4): แถบหมวดหมู่/ตัวกรอง (Right Column: Categories/Filter sidebar)
+      Main Layout: 12-column Grid 
+      - Left Column (span-8): Main announcements content
+      - Right Column (span-4): Categories/Filter sidebar
     -->
     <div class="grid-12">
       
       <!-- ==========================================
-           พื้นที่เนื้อหาหลัก (ด้านซ้าย) (MAIN CONTENT AREA (Left))
+           MAIN CONTENT AREA (Left)
       ========================================== -->
       <div class="col-span-8">
         
-        <!-- หน้าที่ 1: ประกาศระบบสำคัญ (Feature 1: Critical System Announcement) -->
+        <!-- Feature 1: Critical System Announcement -->
         <div class="card mb-6">
           <div class="flex items-center gap-2 mb-2">
             <span class="status-pill status-warning">สำคัญ</span>
@@ -42,13 +42,13 @@ useHead({
           </div>
           <h2 class="text-xl font-bold mb-4 text-slate-900 dark:text-white">แจ้งปิดปรับปรุงระบบ</h2>
           <p class="mb-4">เราจะทำการปิดปรับปรุงระบบในวันที่ 25 ธ.ค. เวลา 02:00 - 04:00 น. ขออภัยในความไม่สะดวก</p>
-          <!-- ส่วนแนบไฟล์ (Attachment Block) -->
+          <!-- Attachment Block -->
           <div class="flex items-center gap-2 p-3 rounded" style="background: var(--neutral-50); border: 1px solid var(--border-color); width: fit-content;">
             <span>📎</span> <span class="text-sm font-bold">ตารางการปิดปรับปรุง.pdf</span>
           </div>
         </div>
 
-        <!-- ประกาศ: อัปเดตคอร์ส UX/UI (Announcement: UX/UI Course Update) -->
+        <!-- Announcement: UX/UI Course Update -->
         <div class="card mb-4" style="border-left: 4px solid var(--primary);">
           <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
             <div>
@@ -61,7 +61,7 @@ useHead({
           <NuxtLink to="/browse/discovery" class="text-sm" style="color: var(--primary);">ดูรายละเอียดคอร์ส</NuxtLink>
         </div>
 
-        <!-- ประกาศ: เอกสารประกอบการเรียนด้านการเข้าถึงเว็บ (WCAG) (Announcement: Accessibility (WCAG) Material) -->
+        <!-- Announcement: Accessibility (WCAG) Material -->
         <div class="card mb-4" style="border-left: 4px solid var(--success);">
           <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
             <div>
@@ -71,13 +71,13 @@ useHead({
             <span class="text-sm text-slate-600 dark:text-slate-400">22 ธ.ค. 2024</span>
           </div>
           <p class="text-slate-700 dark:text-slate-300 mb-2">เราได้เพิ่มไฟล์ PDF สรุปเกณฑ์ WCAG 2.2 ในส่วนของเอกสารประกอบการเรียนแล้ว...</p>
-          <!-- ไฟล์แนบแบบเล็ก (Small Attachment) -->
+          <!-- Small Attachment -->
           <div class="flex items-center gap-2 p-2 rounded mt-2" style="background: var(--neutral-50); border: 1px dotted var(--border-color); width: fit-content;">
             <span>📄</span> <span class="text-xs">WCAG_2.2_Summary.pdf</span>
           </div>
         </div>
 
-        <!-- ประกาศ: อัปเดตคอร์ส React (Announcement: React Course Update) -->
+        <!-- Announcement: React Course Update -->
         <div class="card mb-4" style="border-left: 4px solid var(--warning);">
           <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
             <div>
@@ -90,7 +90,7 @@ useHead({
           <NuxtLink to="/classroom/learning" class="btn btn-secondary text-sm" style="width: fit-content;">เข้าสู่บทเรียน</NuxtLink>
         </div>
 
-        <!-- ประกาศ: คอร์สใหม่ทั่วไป (Announcement: General New Course) -->
+        <!-- Announcement: General New Course -->
         <div class="card mb-4">
           <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
             <h3 class="font-bold text-slate-900 dark:text-white">คอร์สใหม่: Advanced Python</h3>
@@ -100,7 +100,7 @@ useHead({
           <a href="#" class="text-sm" style="color: var(--primary);">อ่านเพิ่มเติม</a>
         </div>
 
-        <!-- ประกาศ: อัปเดตแพลตฟอร์ม (Announcement: Platform Update) -->
+        <!-- Announcement: Platform Update -->
         <div class="card mb-4">
           <div class="flex justify-between items-start mb-2" style="flex-wrap: wrap; gap: 8px;">
             <h3 class="font-bold text-slate-900 dark:text-white">ยินดีต้อนรับสู่ดีไซน์ใหม่!</h3>
@@ -112,24 +112,24 @@ useHead({
       </div>
 
       <!-- ==========================================
-           แถบด้านข้าง (ด้านขวา) (SIDEBAR (Right))
-           ตัวกรองหมวดหมู่ (Category Filters)
+           SIDEBAR (Right)
+           Category Filters
       ========================================== -->
       <div class="col-span-4">
         <div class="card">
           <h3 class="font-bold mb-4 text-slate-900 dark:text-white">หมวดหมู่</h3>
           <ul class="flex flex-col gap-2">
-            <!-- ตัวเลือกตัวกรอง: ทั้งหมด (Filter Option: All) -->
+            <!-- Filter Option: All -->
             <li class="flex justify-between items-center p-2 rounded cursor-pointer" style="background: var(--neutral-50);">
               <span>ทั้งหมด</span>
               <span class="text-muted">15</span>
             </li>
-            <!-- ตัวเลือกตัวกรอง: อัปเดตระบบ (Filter Option: System Updates) -->
+            <!-- Filter Option: System Updates -->
             <li class="flex justify-between items-center p-2 rounded cursor-pointer">
               <span>อัปเดตระบบ</span>
               <span class="text-muted">3</span>
             </li>
-            <!-- ตัวเลือกตัวกรอง: ข่าวสารคอร์ส (Filter Option: Course News) -->
+            <!-- Filter Option: Course News -->
             <li class="flex justify-between items-center p-2 rounded cursor-pointer">
               <span>ข่าวสารคอร์ส</span>
               <span class="text-muted">11</span>
diff --git a/Frontend-Learner/pages/dashboard/index.vue b/Frontend-Learner/pages/dashboard/index.vue
index 4afebbe4..9e84868c 100644
--- a/Frontend-Learner/pages/dashboard/index.vue
+++ b/Frontend-Learner/pages/dashboard/index.vue
@@ -1,46 +1,44 @@
 <script setup lang="ts">
 /**
  * @file index.vue
- * @description หน้าหลักแดชบอร์ด (Dashboard Home)
+ * @description Dashboard Home Page matching FutureSkill design
  */
 
-// 1. นำเข้าระบบและกำหนด MetaData
 definePageMeta({
   layout: "default",
   middleware: "auth",
 });
 
 useHead({
-  title: "Dashboard - e-Learning Platform",
+  title: "Dashboard - FutureSkill Clone",
 });
 
-// 2. เรียกใช้งาน Composables
 const { currentUser } = useAuth();
 const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse();
 const { fetchCategories } = useCategory();
 const { t } = useI18n();
 
-// 3. กำหนดสถานะ (State)
+// State
 const enrolledCourses = ref<any[]>([]);
 const recommendedCourses = ref<any[]>([]);
 const libraryCourses = ref<any[]>([]);
 const categories = ref<any[]>([]);
+
 const isLoading = ref(true);
 
-// 4. การจัดการโหลดข้อมูล (Data Initialization)
+// Initial Data Fetch
 onMounted(async () => {
   isLoading.value = true;
   try {
-    const [catRes, enrollRes, courseRes, allCoursesRes] = await Promise.all([
+    const [catRes, enrollRes, courseRes] = await Promise.all([
       fetchCategories(),
-      fetchEnrolledCourses({ limit: 10 }), // ดึงข้อมูลคอร์สที่ลงทะเบียนไว้
+      fetchEnrolledCourses({ limit: 10 }), // Fetch more enrolled courses for library section
       fetchCourses({
         limit: 3,
         random: true,
         forceRefresh: true,
         is_recommended: true,
-      }), // ดึงข้อมูลคอร์สแนะนำ
-      fetchCourses({ limit: 1000 }) // สำหรับแมปหมวดหมู่
+      }), // Fetch 3 Recommended Courses
     ]);
 
     if (catRes.success) {
@@ -50,44 +48,36 @@ onMounted(async () => {
     const catMap = new Map();
     categories.value.forEach((c: any) => catMap.set(c.id, c.name));
 
-    const catIdMap = new Map();
-    if (allCoursesRes && allCoursesRes.success && allCoursesRes.data) {
-        allCoursesRes.data.forEach((c: any) => catIdMap.set(c.id, c.category_id));
-    }
-
-    // จัดการข้อมูลคอร์สที่ลงทะเบียน (Mapping Enrolled Courses)
+    // Map Enrolled Courses
     if (enrollRes.success && enrollRes.data) {
+      // Sort by last_accessed_at descending (Newest first)
       const sortedEnrollments = [...enrollRes.data].sort((a, b) => {
         const dateA = new Date(a.last_accessed_at || a.enrolled_at).getTime();
         const dateB = new Date(b.last_accessed_at || b.enrolled_at).getTime();
         return dateB - dateA;
       });
 
-      enrolledCourses.value = sortedEnrollments.map((item: any) => {
-        const mappedCategoryId = catIdMap.get(item.course.id) || item.course.category_id;
-        
-        return {
-          id: item.course_id,
-          title: item.course.title,
-          thumbnail_url: item.course.thumbnail_url,
-          progress: item.progress_percentage || 0,
-          total_lessons: item.course.total_lessons || 0,
-          completed_lessons: Math.floor(
-            (item.progress_percentage / 100) * (item.course.total_lessons || 0),
-          ),
-          category: catMap.get(mappedCategoryId),
-          lessons: item.course.total_lessons || 0,
-          image: item.course.thumbnail_url,
-          enrolled: true,
-          instructor: item.course.creator || item.course.instructor,
-          last_accessed: item.last_accessed_at || item.enrolled_at
-        };
-      });
+      enrolledCourses.value = sortedEnrollments.map((item: any) => ({
+        id: item.course_id,
+        title: item.course.title,
+        thumbnail_url: item.course.thumbnail_url,
+        progress: item.progress_percentage || 0,
+        total_lessons: item.course.total_lessons || 10,
+        completed_lessons: Math.floor(
+          (item.progress_percentage / 100) * (item.course.total_lessons || 10),
+        ),
+        // For CourseCard compatibility in library section
+        category: catMap.get(item.course.category_id),
+        lessons: item.course.total_lessons || 0,
+        image: item.course.thumbnail_url,
+        enrolled: true,
+      }));
 
+      // Update libraryCourses with only 2 courses
       libraryCourses.value = enrolledCourses.value.slice(0, 2);
     }
 
-    // จัดการข้อมูลคอร์สแนะนำ (Mapping Recommended Courses)
+    // Map Recommended Courses
     if (courseRes.success && courseRes.data) {
       recommendedCourses.value = courseRes.data.map((c: any) => ({
         id: c.id,
@@ -108,215 +98,328 @@ onMounted(async () => {
   }
 });
 
-// 5. ตัวแปร Computed และฟังก์ชันเสริม
+// Helper for "Continue Learning" Hero Card
 const heroCourse = computed(() => enrolledCourses.value[0] || null);
 const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
-
-const navigateToCategory = (catName: string) => {
-  const cat = categories.value.find(c => getLocalizedText(c.name) === catName);
-  if (cat) {
-    navigateTo(`/browse/discovery?category_id=${cat.id}`);
-  } else {
-    navigateTo(`/browse/discovery`);
-  }
-}
 </script>
 
 <template>
-  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen font-inter p-4 md:p-8 transition-colors duration-300">
-    <div class="max-w-[1400px] mx-auto grid grid-cols-1 xl:grid-cols-3 gap-8">
-      
-      <!-- คอลัมน์ซ้าย (เนื้อหาหลัก) -->
-      <div class="xl:col-span-2 space-y-6">
-        
-        <!-- ป้ายต้อนรับ (Welcome Banner) -->
-        <div class="bg-[#3B6BE8] rounded-[2rem] p-6 md:p-10 relative overflow-hidden text-white shadow-[0_8px_30px_rgb(59,107,232,0.2)]">
-           <!-- ลวดลายพื้นหลังและดาวตกแต่ง -->
-           <div class="absolute inset-0 bg-grid-pattern opacity-10 md:opacity-20 pointer-events-none"></div>
-           <div class="absolute right-5 md:right-10 top-1/2 -translate-y-1/2 w-20 h-20 md:w-28 md:h-28 border border-white/20 rounded-[1.5rem] md:rounded-[2rem] flex items-center justify-center rotate-12 bg-white/5 backdrop-blur-sm opacity-30 md:opacity-100">
-             <q-icon name="auto_awesome" size="32px" md-size="48px" class="text-white" />
-           </div>
+  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen font-inter pb-20 transition-colors duration-300">
+    <div class="container mx-auto px-6 md:px-12 space-y-16 mt-10">
+      <!-- 1. Dashboard Hero Banner (Refined) -->
+      <section
+        class="relative overflow-hidden bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-950 rounded-[2rem] py-10 md:py-14 px-8 md:px-12 shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col items-center text-center transition-colors duration-300"
+      >
+        <!-- Subtle Decorative Elements -->
+        <div
+          class="absolute top-[-20%] left-[-10%] w-[300px] h-[300px] bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-3xl -z-10"
+        />
+        <div
+          class="absolute bottom-[-20%] right-[-10%] w-[300px] h-[300px] bg-indigo-500/5 dark:bg-indigo-500/10 rounded-full blur-3xl -z-10"
+        />
 
-           <div class="relative z-10 max-w-lg">
-             <h1 class="text-2xl md:text-4xl font-bold mb-2 md:mb-3 tracking-tight">{{ $t('dashboard.welcomeTitle') }} {{ currentUser?.firstName || 'User' }} !</h1>
-             <p class="text-blue-100/90 text-[13px] md:text-[15px] leading-relaxed mb-6 md:mb-8 font-medium">
-               {{ $t('dashboard.welcomeSubtitle') }}
-             </p>
-             <button @click="navigateTo('/browse/discovery')" class="bg-white text-[#3B6BE8] font-bold px-5 py-2.5 md:px-6 md:py-3 rounded-full text-xs md:text-sm flex items-center gap-2 hover:bg-slate-50 hover:scale-105 shadow-md transition-all">
-               {{ $t('dashboard.moreCourses') }} <q-icon name="chevron_right" size="16px" />
-             </button>
-           </div>
-        </div>
+        <div class="max-w-2xl space-y-6 relative z-10">
+          <h1
+            class="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white leading-[1.5] tracking-tight"
+          >
+            {{ $t("dashboard.heroTitle") }}
+            <span class="inline-block text-blue-600 dark:text-blue-400 mt-1 md:mt-2">{{
+              $t("dashboard.heroSubtitle")
+            }}</span>
+          </h1>
 
-        <!-- การ์ดหมวดหมู่ด่วน (3 Stats Cards) -->
-        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-           <!-- การออกแบบ -->
-            <div @click="navigateToCategory('การออกแบบ')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
-               <div class="w-12 h-12 rounded-2xl bg-[#E9EFFD] dark:bg-blue-900/30 text-[#3B6BE8] flex items-center justify-center shrink-0">
-                  <q-icon name="palette" size="24px" />
-               </div>
-               <div>
-                  <h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.design') }}</h3>
-               </div>
-            </div>
-           <!-- การเขียนโปรแกรม -->
-            <div @click="navigateToCategory('การเขียนโปรแกรม')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
-               <div class="w-12 h-12 rounded-2xl bg-[#FFF3EB] dark:bg-orange-900/30 text-[#FF8A4C] flex items-center justify-center shrink-0">
-                  <q-icon name="code" size="24px" />
-               </div>
-               <div>
-                  <h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.programming') }}</h3>
-               </div>
-            </div>
-           <!-- ธุรกิจ -->
-            <div @click="navigateToCategory('ธุรกิจ')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
-               <div class="w-12 h-12 rounded-2xl bg-[#EBFAF6] dark:bg-emerald-900/30 text-[#10B981] flex items-center justify-center shrink-0">
-                  <q-icon name="work_outline" size="24px" />
-               </div>
-               <div>
-                  <h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.business') }}</h3>
-               </div>
-            </div>
-        </div>
+          <p
+            class="text-slate-500 dark:text-slate-400 font-medium text-base md:text-lg max-w-xl mx-auto leading-relaxed"
+          >
+            {{ $t("dashboard.heroDesc") }}
+          </p>
 
-        <!-- ส่วนเรียนต่อจากครั้งก่อน (Continue Learning) -->
-        <div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
-          <div class="flex items-center justify-between mb-6">
-             <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('dashboard.continueLearningTitle') }}</h2>
-             <NuxtLink to="/dashboard/my-courses" class="text-[#3B6BE8] font-bold text-sm flex items-center gap-1 hover:underline">
-               {{ $t('dashboard.viewAll') }}
-             </NuxtLink>
-          </div>
-          
-          <div v-if="heroCourse" class="bg-[#F8F9FA] dark:bg-slate-800/50 rounded-3xl p-4 md:p-6 flex flex-col md:flex-row gap-6 md:gap-8 items-center border border-slate-100 dark:border-slate-800">
-             <div class="w-full md:w-[35%] aspect-[4/3] rounded-[1.5rem] overflow-hidden flex-shrink-0 bg-slate-200">
-                <img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover" />
-             </div>
-             
-             <div class="flex-1 w-full flex flex-col">
-                <div class="flex items-center justify-between mb-3">
-                   <!-- ป้ายบอกหมวดหมู่ (Category Badge) -->
-                   <div v-if="heroCourse.category">
-                      <span class="bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] dark:text-blue-400 px-3 py-1 rounded-full text-[11px] font-bold tracking-wide">{{ getLocalizedText(heroCourse.category) }}</span>
-                   </div>
-                   <div v-else></div>
-                   <span class="text-slate-400 dark:text-slate-400 text-xs flex items-center gap-1.5 font-medium" v-if="heroCourse.last_accessed">
-                     <q-icon name="schedule" size="14px" /> {{ $t('common.latest') }} {{ new Date(heroCourse.last_accessed).toLocaleDateString('th-TH', { day: 'numeric', month: 'short' }) }}
-                   </span>
-                </div>
-                
-                <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2 leading-snug line-clamp-2">
-                  {{ getLocalizedText(heroCourse.title) || 'Advanced UI/UX Design มาสเตอร์คลาส' }}
-                </h3>
-                <!-- ไม่แสดงเลขบทเรียนตามที่ได้รับคำขอมา (Removed Lesson Title/Number as per request) -->
-                
-                <div class="mb-6 mt-4">
-                   <div class="flex justify-between text-[13px] font-bold mb-2">
-                      <span class="text-[#3B6BE8] dark:text-blue-400">{{ $t('course.progress') }}: {{ heroCourse.progress || 0 }}%</span>
-                   </div>
-                   <div class="h-2.5 w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
-                      <div class="h-full bg-[#3B6BE8] rounded-full transition-all duration-500" :style="{ width: `${heroCourse.progress || 0}%` }"></div>
-                   </div>
-                </div>
-                
-                <div class="flex items-center justify-between mt-auto">
-                   <div class="flex items-center gap-3" v-if="heroCourse.instructor">
-                      <div class="w-10 h-10 rounded-full bg-orange-100 overflow-hidden shrink-0 border border-slate-200 dark:border-slate-700">
-                         <img :src="heroCourse.instructor.profile_image_url || heroCourse.instructor.photoURL || `https://api.dicebear.com/7.x/avataaars/svg?seed=${heroCourse.instructor.username || 'Inst'}`" class="w-full h-full object-cover" />
-                      </div>
-                      <div>
-                         <p class="font-bold text-slate-900 dark:text-white text-[13px] leading-tight mb-0.5">
-                           {{ heroCourse.instructor.firstName || heroCourse.instructor.first_name ? `${heroCourse.instructor.firstName || heroCourse.instructor.first_name} ${heroCourse.instructor.lastName || heroCourse.instructor.last_name || ''}` : heroCourse.instructor.username || 'ผู้สอน' }}
-                         </p>
-                         <p class="text-slate-500 dark:text-slate-400 text-[11px] font-medium line-clamp-1">{{ heroCourse.instructor.bio || heroCourse.instructor.role?.name?.th || 'Instructor' }}</p>
-                      </div>
-                   </div>
-                   <div v-else class="flex items-center gap-3"></div>
-                   <button @click="navigateTo(`/classroom/learning?course_id=${heroCourse.id}`)" class="bg-[#3B6BE8] hover:bg-blue-700 text-white px-5 py-2.5 rounded-full font-bold text-sm flex items-center gap-2 shadow-lg shadow-blue-500/20 transition-all hover:scale-105 shrink-0">
-                      <q-icon name="play_circle" size="18px" /> {{ $t('course.continueLearning') }}
-                   </button>
-                </div>
-             </div>
-          </div>
-          
-          <div v-else class="bg-[#F8F9FA] dark:bg-slate-800/50 rounded-3xl p-10 flex items-center justify-center text-slate-400 border border-dashed border-slate-200 dark:border-slate-700">
-             ไม่มีคอร์สเรียนปัจจุบัน
+          <div class="flex flex-wrap justify-center gap-4 pt-4">
+            <q-btn
+              unelevated
+              rounded
+              color="primary"
+              :label="$t('dashboard.goToMyCourses')"
+              class="px-8 h-[48px] font-bold no-caps shadow-lg shadow-blue-500/10 hover:-translate-y-0.5 transition-all text-sm"
+              to="/dashboard/my-courses"
+            />
+            <q-btn
+              outline
+              rounded
+              color="primary"
+              :label="$t('dashboard.searchNewCourses')"
+              class="px-8 h-[48px] font-bold no-caps hover:bg-white dark:hover:bg-slate-800 transition-all border-1 text-sm dark:text-white dark:border-slate-600"
+              style="border-width: 1.5px"
+              to="/browse/discovery"
+            />
           </div>
         </div>
-      </div>
-      
-      <!-- คอลัมน์ขวา (แถบข้อมูลโปรไฟล์และคอร์สแนะนำ) -->
-      <div class="xl:col-span-1 space-y-6">
-         <!-- วิดเจ็ตโปรไฟล์ผู้ใช้ -->
-         <div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-8 shadow-sm border border-slate-100 dark:border-slate-800 text-center flex flex-col items-center relative overflow-hidden transition-colors">
-            <!-- พื้นหลังตกแต่ง (decorative bg) -->
-            <div class="absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-[#F8FAFC] to-white dark:from-slate-800 dark:to-slate-900"></div>
+      </section>
 
-            <div class="relative z-10 w-24 h-24 rounded-full bg-white dark:bg-slate-800 mb-4 shadow-md flex items-center justify-center">
-               <UserAvatar 
-                  :photo-u-r-l="currentUser?.photoURL" 
-                  :first-name="currentUser?.firstName || 'ผู้ใช้งาน'" 
-                  :last-name="currentUser?.lastName" 
-                  size="88"
-                  class="rounded-full object-cover"
+      <!-- 2. Continue Learning Section -->
+      <section v-if="enrolledCourses.length > 0">
+        <div class="flex justify-between items-end mb-6">
+          <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white transition-colors">
+            {{ $t("dashboard.continueLearningTitle") }}
+          </h2>
+          <NuxtLink
+            to="/dashboard/my-courses"
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium text-sm flex items-center gap-1 transition-colors"
+          >
+            {{ $t("dashboard.myCourses") }}
+            <q-icon name="arrow_forward" size="16px" />
+          </NuxtLink>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+          <!-- Hero Card (Left) -->
+          <div
+            v-if="heroCourse"
+            class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white dark:bg-[#1e293b] shadow-sm border border-gray-100 dark:border-slate-700 hover:shadow-md transition-all h-[260px] md:h-[320px]"
+            @click="
+              navigateTo(`/classroom/learning?course_id=${heroCourse.id}`)
+            "
+          >
+            <img
+              :src="heroCourse.thumbnail_url"
+              class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500"
+            />
+
+            <div
+              class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end"
+            >
+              <h3
+                class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug shadow-black/50 drop-shadow-sm"
+              >
+                {{ getLocalizedText(heroCourse.title) }}
+              </h3>
+
+              <!-- Progress -->
+              <div class="w-full">
+                <div class="flex justify-end text-gray-300 text-xs mb-2">
+                  <span>{{ heroCourse.progress }}%</span>
+                </div>
+                <div
+                  class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden"
+                >
+                  <div
+                    class="h-full rounded-full transition-all duration-500"
+                    :class="
+                      heroCourse.progress === 100
+                        ? 'bg-emerald-500'
+                        : 'bg-blue-500'
+                    "
+                    :style="{ width: `${heroCourse.progress}%` }"
+                  ></div>
+                </div>
+                <div class="mt-4 flex justify-end">
+                  <span
+                    class="font-bold text-sm hover:underline transition-colors"
+                    :class="
+                      heroCourse.progress === 100
+                        ? 'text-emerald-400'
+                        : 'text-white'
+                    "
+                  >
+                    {{
+                      heroCourse.progress === 100
+                        ? $t("dashboard.studyAgain")
+                        : $t("dashboard.continue")
+                    }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Side List (Right) -->
+          <div class="flex flex-col gap-4">
+            <div
+              v-for="course in sideCourses"
+              :key="course.id"
+              class="flex-1 bg-white dark:bg-[#1e293b] rounded-2xl p-4 border border-gray-100 dark:border-slate-700 shadow-sm hover:shadow-md transition-all flex gap-4 items-center"
+            >
+              <div class="w-32 h-20 rounded-xl overflow-hidden flex-shrink-0">
+                <img
+                  :src="course.thumbnail_url"
+                  class="w-full h-full object-cover"
                 />
+              </div>
+              <div
+                class="flex-grow min-w-0 flex flex-col justify-between h-full py-1"
+              >
+                <h4 class="text-gray-800 dark:text-slate-200 font-bold text-sm line-clamp-2 mb-2 transition-colors">
+                  {{ getLocalizedText(course.title) }}
+                </h4>
 
-            </div>
-            
-            <h2 class="text-xl font-bold text-slate-900 dark:text-white relative z-10 tracking-tight">
-              {{ currentUser?.firstName ? `${currentUser.firstName} ${currentUser.lastName || ''}` : 'ผู้ใช้งาน' }}
-            </h2>
-            <p class="text-slate-500 dark:text-slate-400 text-xs mt-1 relative z-10 font-medium tracking-wide">{{ $t('common.student') }}</p>
-            
-            <div class="flex w-full gap-3 mt-7 relative z-10 px-2">
-                <div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
-                   <span class="text-[1.35rem] font-black text-[#3B6BE8] dark:text-blue-400 mb-1 leading-none">{{ String(enrolledCourses.length || 0).padStart(2, '0') }}</span>
-                   <span class="text-slate-400 text-[10px] font-bold tracking-wider">{{ $t('myCourses.filterProgress') }}</span>
-                </div>
-                <div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
-                   <span class="text-[1.35rem] font-black text-[#10B981] dark:text-emerald-400 mb-1 leading-none z-10">{{ String(enrolledCourses.filter(c => c.progress >= 100).length || 0).padStart(2, '0') }}</span>
-                   <span class="text-slate-400 text-[10px] font-bold tracking-wider z-10">{{ $t('myCourses.filterCompleted') }}</span>
-                </div>
-            </div>
-         </div>
-         
-         <!-- วิดเจ็ตคอร์สแนะนำ -->
-         <div v-if="recommendedCourses.length > 0" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
-             <h2 class="text-[1.1rem] font-bold text-slate-900 dark:text-white mb-5 tracking-tight flex items-center justify-between">
-               {{ $t('dashboard.recommendedCourses') }}
-             </h2>
-            <div class="flex flex-col gap-5">
-               <div v-for="course in recommendedCourses.slice(0, 3)" :key="course.id" class="flex gap-4 group cursor-pointer transition-all" @click="navigateTo(`/browse/discovery?course_id=${course.id}`)">
-                  <!-- รูปหน้าปก (Thumbnail) -->
-                  <div class="w-24 h-[68px] rounded-xl overflow-hidden bg-slate-100 shrink-0 relative shadow-sm">
-                     <img :src="course.image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                <div class="mt-auto">
+                  <div
+                    class="h-1.5 w-full bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden mb-2"
+                  >
+                    <div
+                      class="h-full rounded-full transition-all duration-500"
+                      :class="
+                        course.progress === 100
+                          ? 'bg-emerald-500'
+                          : 'bg-blue-600'
+                      "
+                      :style="{ width: `${course.progress}%` }"
+                    ></div>
                   </div>
-                  <!-- ข้อมูลคอร์ส (Info) -->
-                  <div class="flex-1 flex flex-col justify-center min-w-0">
-                     <h3 class="font-bold text-[13px] text-slate-900 dark:text-white leading-snug line-clamp-2 mb-1.5 group-hover:text-[#3B6BE8] transition-colors pr-1">{{ getLocalizedText(course.title) }}</h3>
-                     <div class="flex items-center justify-between mt-auto">
-                        <span class="text-slate-500 dark:text-slate-400 text-[11px] font-medium bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded text-ellipsis overflow-hidden whitespace-nowrap max-w-[80px]">{{ getLocalizedText(course.category) || 'อื่นๆ' }}</span>
-                        <span v-if="course.is_free" class="text-[#10B981] font-bold text-[12px]">ฟรี</span>
-                        <span v-else class="text-[#3B6BE8] font-bold text-[12px]">฿{{ Number(course.price).toLocaleString() }}</span>
-                     </div>
+                  <div class="flex justify-end items-center text-xs">
+                    <span
+                      class="font-bold cursor-pointer hover:underline transition-colors"
+                      :class="
+                        course.progress === 100
+                          ? 'text-emerald-600 dark:text-emerald-400'
+                          : 'text-blue-600 dark:text-blue-400'
+                      "
+                      @click="
+                        navigateTo(`/classroom/learning?course_id=${course.id}`)
+                      "
+                    >
+                      {{
+                        course.progress === 100
+                          ? $t("dashboard.studyAgain")
+                          : $t("dashboard.continue")
+                      }}
+                    </span>
                   </div>
-               </div>
+                </div>
+              </div>
             </div>
-            
-             <button @click="navigateTo('/browse/discovery')" class="w-full mt-6 py-2.5 rounded-xl text-[13px] font-bold text-[#3B6BE8] dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
-                {{ $t('dashboard.viewAllCourses') }}
-             </button>
-         </div>
-      </div>
+            <!-- Empty State Placeholder if less than 2 side courses -->
+            <div
+              v-if="sideCourses.length < 2"
+              class="flex-1 bg-gray-50 dark:bg-[#1e293b]/50 rounded-2xl border border-dashed border-gray-200 dark:border-slate-700 flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm transition-colors"
+            >
+              {{ $t("dashboard.startNewCourse") }}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 3. Knowledge Library -->
+      <section>
+        <div class="mb-6">
+          <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white mb-1 transition-colors">
+            {{ $t("dashboard.knowledgeLibrary") }}
+          </h2>
+          <p class="text-gray-500 dark:text-slate-400 text-sm transition-colors">
+            {{ $t("dashboard.libraryDesc") }}
+          </p>
+        </div>
+
+        <!-- Content when courses exist -->
+        <div
+          v-if="libraryCourses.length > 0"
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
+        >
+          <!-- Course Cards -->
+          <CourseCard
+            v-for="course in libraryCourses"
+            :key="course.id"
+            v-bind="course"
+            :image="course.thumbnail_url"
+            hide-progress
+            hide-actions
+            class="h-full md:col-span-1"
+          />
+
+          <!-- CTA Card (Large) -->
+          <div
+            class="bg-white dark:bg-[#1e293b] rounded-3xl border border-gray-100 dark:border-slate-700 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group"
+          >
+            <p class="text-gray-600 dark:text-slate-300 font-medium mb-6 mt-4 transition-colors">
+              {{ $t("dashboard.chooseLibrary") }}
+            </p>
+            <q-btn
+              flat
+              rounded
+              no-caps
+              class="text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/30 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
+              to="/dashboard/my-courses"
+            >
+              {{ $t("dashboard.viewAll") }}
+              <q-icon name="arrow_forward" size="18px" class="ml-2" />
+            </q-btn>
+          </div>
+        </div>
+
+        <!-- Empty State when no courses -->
+        <div
+          v-else
+          class="bg-white dark:bg-[#1e293b] rounded-3xl border border-dashed border-gray-200 dark:border-slate-700 p-12 flex flex-col items-center justify-center text-center min-h-[300px] transition-colors"
+        >
+          <div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-full mb-6 transition-colors">
+            <q-icon name="school" size="48px" class="text-blue-200 dark:text-blue-400" />
+          </div>
+          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2 transition-colors">
+            {{ $t("dashboard.emptyLibraryTitle") }}
+          </h3>
+          <p class="text-gray-500 dark:text-slate-400 mb-8 max-w-md transition-colors">
+            {{ $t("dashboard.emptyLibraryDesc") }}
+          </p>
+          <q-btn
+            unelevated
+            rounded
+            no-caps
+            class="bg-blue-600 text-white px-8 py-3 font-bold hover:bg-blue-700 shadow-lg shadow-blue-500/20 transition-all hover:scale-105"
+            to="/browse/discovery"
+          >
+            {{ $t("dashboard.viewAllCourses") }}
+          </q-btn>
+        </div>
+      </section>
+
+      <!-- 5. Recommended Courses -->
+      <section class="pb-20">
+        <div class="mb-6">
+          <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white text-left transition-colors">
+            {{ $t("dashboard.recommendedCourses") }}
+          </h2>
+        </div>
+
+        <!-- Recommended Grid (3 columns) -->
+        <div
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in"
+        >
+          <CourseCard
+            v-for="course in recommendedCourses"
+            :key="course.id"
+            v-bind="course"
+          />
+        </div>
+
+        <!-- Loading State -->
+        <div
+          v-if="recommendedCourses.length === 0 && !isLoading"
+          class="flex justify-center py-10 opacity-50"
+        >
+          <div class="text-gray-400 dark:text-slate-500">{{ $t("dashboard.noRecommended") }}</div>
+        </div>
+      </section>
     </div>
   </div>
 </template>
 
 <style scoped>
-.bg-grid-pattern {
-  background-image: 
-    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
-  background-size: 24px 24px;
+/* Scoped specific styles */
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:deep(.q-btn) {
+  text-transform: none; /* Prevent uppercase in Q-Btns */
 }
 </style>
diff --git a/Frontend-Learner/pages/dashboard/my-courses.vue b/Frontend-Learner/pages/dashboard/my-courses.vue
index 1fdf6342..9b410f8f 100644
--- a/Frontend-Learner/pages/dashboard/my-courses.vue
+++ b/Frontend-Learner/pages/dashboard/my-courses.vue
@@ -1,369 +1,303 @@
 <script setup lang="ts">
 /**
  * @file my-courses.vue
- * @description หน้าคอร์สของฉัน (My Enrolled Courses)
+ * @description My Courses Page.
+ * Displays enrolled courses with filters for progress/completed.
+ * Handles enrollment success modals and certificate downloads.
  */
 
-// 1. นำเข้าระบบและกำหนด MetaData
 definePageMeta({
   layout: 'default',
   middleware: 'auth'
 })
 
-const { t, locale } = useI18n()
+useHead({
+  title: 'คอร์สของฉัน - e-Learning'
+})
+
 const route = useRoute()
-const quasar = useQuasar()
-useHead({ title: `${t('sidebar.myCourses') || 'My Courses'} - e-Learning Platform` })
-
-// 2. เรียกใช้งาน Composables
-const { fetchEnrolledCourses, getCertificate, generateCertificate, fetchCourses } = useCourse()
-const { fetchCategories } = useCategory()
-
-// 3. กำหนดสถานะ (State)
-const enrolledCourses = ref<any[]>([])
-const allCategories = ref<any[]>([])
-const isLoading = ref(false)
-const searchQuery = ref('')
-const activeCategory = ref<number | 'all'>('all')
-const viewMode = ref<'grid' | 'list'>('grid')
 const showEnrollModal = ref(false)
+const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
+const searchQuery = ref('')
 
-// 4. ฟังก์ชันเสริม (Helper Functions)
-const getLocalizedText = (text: any) => {
+
+// Check URL query parameters to show 'Enrollment Success' modal
+onMounted(() => {
+  if (route.query.enrolled) {
+    showEnrollModal.value = true
+  }
+})
+
+const { locale } = useI18n()
+
+// Helper to get localized text
+const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
   if (!text) return ''
   if (typeof text === 'string') return text
+  
   const currentLocale = locale.value as 'th' | 'en'
   return text[currentLocale] || text.th || text.en || ''
 }
 
-const getCategoryIcon = (name: any) => {
-   const text = getLocalizedText(name) || ''
-   if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
-   if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
-   if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
-   if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
-   return 'category'
-}
+// Data Handling
+const { fetchEnrolledCourses, getCertificate, generateCertificate } = useCourse()
+const enrolledCourses = ref<any[]>([])
+const isLoading = ref(false)
+const isDownloadingCert = ref(false)
 
-// 5. การจัดการโหลดข้อมูล (Data Loading)
-const loadData = async () => {
-    isLoading.value = true
-    try {
-        const [catRes, courseRes, allCoursesRes] = await Promise.all([
-            fetchCategories(),
-            fetchEnrolledCourses({}),
-            fetchCourses({ limit: 1000 })
-        ])
+const loadEnrolledCourses = async () => {
+  isLoading.value = true
+  // FIX: For 'progress' tab, we want both ENROLLED and IN_PROGRESS.
+  // Since API takes single status, we fetch ALL and filter locally for 'progress'.
+  const apiStatus = activeFilter.value === 'completed' 
+      ? 'COMPLETED' 
+      : undefined // 'all' or 'progress' -> fetch all
 
-        if (catRes.success) allCategories.value = catRes.data || []
-        const catMap = new Map()
-        allCategories.value.forEach(c => catMap.set(c.id, c))
-        
-        const catIdMap = new Map()
-        if (allCoursesRes && allCoursesRes.success && allCoursesRes.data) {
-            allCoursesRes.data.forEach((c: any) => catIdMap.set(c.id, c.category_id))
-        }
+  const res = await fetchEnrolledCourses({ 
+    status: apiStatus
+  })
 
-        if (courseRes.success && courseRes.data) {
-            enrolledCourses.value = courseRes.data.map(item => {
-               const mappedCategoryId = catIdMap.get(item.course.id) || item.course.category_id
-               const cat = catMap.get(mappedCategoryId)
-               
-               // ตรรกะการหาชื่อผู้สอน (Instructor Name Logic)
-               let instName = t('course.instructor')
-               let user = null;
-               if (item.course.instructors && item.course.instructors.length > 0) {
-                   const primary = item.course.instructors.find((i: any) => i.is_primary);
-                   user = primary ? primary.user : item.course.instructors[0].user;
-               } else {
-                   user = item.course.creator || (item.course as any).instructor;
-               }
-               
-               if (user?.profile?.first_name) {
-                   instName = `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
-               } else if (user?.first_name) {
-                   instName = `${user.first_name} ${user.last_name || ''}`.trim();
-               } else if (user?.username) {
-                   instName = user.username;
-               }
+  if (res.success) {
+    let courses = (res.data || [])
 
-               return {
-                 id: item.course_id,
-                 enrollment_id: item.id,
-                 title: item.course.title,
-                 progress: item.progress_percentage || 0,
-                 lessons: item.course.total_lessons || 10,
-                 completed: item.status === 'COMPLETED',
-                 thumbnail_url: item.course.thumbnail_url,
-                 category_id: mappedCategoryId,
-                 category_name: cat ? getLocalizedText(cat.name) : '',
-                 instructor_name: instName
-               }
-            })
-        }
-    } catch (err) {
-        console.error("Failed to load enrolled courses", err)
-    } finally {
-        isLoading.value = false
+    // Local filter to ensure UI consistency regardless of backend filtering
+    if (activeFilter.value === 'progress') {
+        courses = courses.filter(c => c.status !== 'COMPLETED')
+    } else if (activeFilter.value === 'completed') {
+        courses = courses.filter(c => c.status === 'COMPLETED')
     }
+
+    enrolledCourses.value = courses.map(item => ({
+      id: item.course_id, 
+      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 
+    }))
+  }
+  isLoading.value = false
 }
 
-// 6. ตัวแปร Computed (Computed Properties)
-const uniqueCategories = computed(() => {
-    const ids = Array.from(new Set(enrolledCourses.value.map(c => c.category_id)))
-    return allCategories.value.filter(c => ids.includes(c.id))
-})
-
-const inProgressCourses = computed(() => {
-    return enrolledCourses.value.filter(c => !c.completed && c.progress >= 0 && c.progress < 100).reverse()
+// Watch filter changes to reload
+watch(activeFilter, () => {
+  loadEnrolledCourses()
 })
 
+// Client-side Search Filtering
 const filteredEnrolledCourses = computed(() => {
-    let result = enrolledCourses.value
-    if (activeCategory.value !== 'all') {
-        result = result.filter(c => c.category_id === activeCategory.value)
-    }
-    if (searchQuery.value) {
-        const query = searchQuery.value.toLowerCase()
-        result = result.filter(c => getLocalizedText(c.title).toLowerCase().includes(query))
-    }
-    return result
+  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
+  }
+  loadEnrolledCourses()
+})
+
+// Certificate Handling
+const downloadingCourseId = ref<number | null>(null)
+// Certificate Handling
+
+const downloadCertificate = async (course: any) => {
+  if (!course) return
+  downloadingCourseId.value = course.id
+  
+  try {
+      // 1. Try to GET existing certificate
+      let res = await getCertificate(course.id)
+
+      // 2. If not found (or error), try to GENERATE new one
+      if (!res.success) {
+         res = await generateCertificate(course.id)
+      }
+
+      // 3. Handle Result
+      if (res.success && res.data) {
+          const cert = res.data
+          if (cert.download_url) {
+              window.open(cert.download_url, '_blank')
+          } else {
+              // Fallback if no URL but success (maybe show message)
+              console.warn('Certificate ready but no URL')
+          }
+      } else {
+           // Silent fail or minimal log, or maybe use a toast if available, but avoid $q if undefined
+           console.error(res.error || 'Failed to get certificate')
+      }
+  } catch (e) {
+      console.error(e)
+  } finally {
+      downloadingCourseId.value = null
+  }
+}
+
 const validCourseId = computed(() => {
     const cid = route.query.course_id
     if (!cid || cid === 'undefined' || cid === 'null' || cid === 'NaN') return null
     return cid
 })
-
-// 7. ฟังก์ชันการทำงาน (Actions)
-const handleDownloadCertificate = async (courseId: number) => {
-    try {
-        quasar.notify({ message: t('common.loading') + '...', color: 'info' })
-        const genRes = await generateCertificate(courseId)
-        if (genRes.success && genRes.data?.download_url) {
-            window.open(genRes.data.download_url, '_blank')
-        } else {
-            throw new Error(genRes.error || t('common.error'))
-        }
-    } catch (err: any) {
-        quasar.notify({ message: err.message || t('common.error'), color: 'negative' })
-    }
-}
-
-// 8. Lifecycle Hooks
-onMounted(() => {
-  if (route.query.enrolled) showEnrollModal.value = true
-  loadData()
-})
 </script>
 
 <template>
-  <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
-    <div class="max-w-[1240px] mx-auto">
+  <div class="page-container">
+
+
+    <!-- Page Header & Filters (Unified Layout) -->
+    <!-- New Enhanced Search Section (Image 2 Style) -->
+    <div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-6 border border-blue-100/50 dark:border-blue-500/10">
+      <h2 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white mb-2">คอร์สของฉัน</h2>
+      <p class="text-slate-500 dark:text-slate-400 font-medium mb-8">ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้</p>
       
-      <!-- Section 1: เรียนต่อจากครั้งก่อน (Continue Learning) -->
-      <div v-if="inProgressCourses.length > 0 && !searchQuery" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 mb-8 transition-all">
-        <div class="flex items-center gap-2.5 mb-6">
-          <q-icon name="play_circle_outline" size="26px" class="text-[#3B6BE8]" />
-          <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('dashboard.continueLearningTitle') }}</h2>
-        </div>
-        
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div v-for="course in inProgressCourses.slice(0, 2)" :key="course.id" class="border border-slate-100 dark:border-slate-800 rounded-3xl p-4 flex flex-col sm:flex-row gap-5 items-center bg-[#F8FAFC] dark:bg-slate-800/50 hover:border-blue-100 dark:hover:border-blue-900/50 transition-colors">
-            <!-- ส่วนรูปภาพหน้าปก (Image) -->
-            <div class="w-full sm:w-[160px] h-[120px] rounded-[1.25rem] overflow-hidden bg-slate-200 shrink-0 relative group">
-               <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
-               <!-- เลเยอร์เล่นวิดีโอด่วน (Quick play overlay) -->
-               <div @click="navigateTo(`/classroom/learning?course_id=${course.id}`)" class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
-                  <div class="bg-white/30 backdrop-blur-md rounded-full w-10 h-10 flex flex-col items-center justify-center">
-                      <q-icon name="play_arrow" color="white" size="20px" class="ml-0.5" />
-                  </div>
-               </div>
-            </div>
-            <!-- ส่วนข้อมูลเนื้อหา (Info) -->
-            <div class="flex-1 flex flex-col justify-center min-w-0 py-1 w-full">
-               <div class="mb-2" v-if="course.category_name">
-                  <span class="bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] dark:text-blue-400 px-3.5 py-1.5 rounded-full text-[10px] font-bold tracking-wide">{{ course.category_name }}</span>
-               </div>
-               <h3 class="font-bold text-slate-900 dark:text-white text-[14px] leading-snug line-clamp-2 mb-4 pr-2">{{ getLocalizedText(course.title) }}</h3>
-               
-               <div class="flex items-center justify-between gap-4 mt-auto">
-                  <div class="flex-1">
-                     <div class="flex items-center gap-2 text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5 tracking-wide">
-                        {{ $t('course.progress') }}: {{ course.progress }}%
-                     </div>
-                     <div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
-                        <div class="h-full bg-[#3B6BE8] rounded-full transition-all duration-500" :style="{ width: `${course.progress}%` }"></div>
-                     </div>
-                  </div>
-                  <button @click="navigateTo(`/classroom/learning?course_id=${course.id}`)" class="bg-[#3B6BE8] hover:bg-blue-700 text-white rounded-full px-5 py-2 text-[12px] font-bold shrink-0 shadow-md shadow-blue-500/20 transition-transform hover:scale-105 outline-none">{{ $t('dashboard.continue') }}</button>
-               </div>
-            </div>
+      <div class="flex flex-col md:flex-row gap-4">
+        <!-- Search Input -->
+        <div class="relative flex-1 group">
+          <div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
+            <q-icon name="search" size="24px" />
           </div>
+          <input 
+            v-model="searchQuery"
+            type="text" 
+            placeholder="ค้นหาชื่อคอร์สของฉัน..."
+            class="w-full pl-14 pr-6 py-3.5 bg-white dark:bg-slate-800 border-2 border-transparent rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
+          />
         </div>
-      </div>
-
-      <!-- ส่วนที่ 2: คอร์สของฉัน (My Courses) -->
-      <div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
-        <!-- ส่วนหัวและการค้นหา -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-          <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('myCourses.title') }}</h2>
-          <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
-            <div class="relative w-full sm:w-[260px] flex-1">
-              <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
-              <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" :placeholder="$t('myCourses.searchPlaceholder')" />
-            </div>
-            <div class="flex items-center gap-2 shrink-0">
-              <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
-              <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
-            </div>
+        
+        <!-- Search Button -->
+        <q-btn 
+          unelevated
+          color="primary"
+          class="px-8 h-[52px] rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
+          no-caps
+        >
+          <div class="flex items-center gap-2">
+            <q-icon name="search" size="20px" />
+            <span class="text-base">ค้นหา</span>
           </div>
-        </div>
-
-        <!-- ตัวกรองหมวดหมู่ (แบบเลื่อนแนวนอนบนมือถือ) -->
-        <div class="mb-8 w-full overflow-hidden">
-          <div class="flex flex-nowrap items-center gap-3 overflow-x-auto scrollbar-hide pb-2 -mx-1 px-1">
-                <button 
-                  @click="activeCategory = 'all'"
-                  :class="activeCategory === 'all' ? 'bg-[#3B6BE8] text-white border-transparent' : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-slate-300'"
-                  class="px-5 py-2.5 rounded-xl border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none whitespace-nowrap font-bold shadow-sm">
-                  <q-icon name="apps" size="18px" /> {{ $t('myCourses.filterAll') }}
-                </button>
-                
-                <button 
-                  v-for="cat in uniqueCategories" :key="cat.id"
-                  @click="activeCategory = cat.id"
-                  :class="activeCategory === cat.id ? 'bg-[#3B6BE8] text-white border-transparent' : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-slate-300'"
-                  class="px-5 py-2.5 rounded-xl border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none whitespace-nowrap font-bold shadow-sm">
-                  <q-icon :name="getCategoryIcon(cat.name)" size="18px" />
-                  {{ getLocalizedText(cat.name) }}
-                </button>
-             </div>
-         </div>
-
-        <!-- Active View -->
-        <div v-if="isLoading" class="flex justify-center py-24">
-           <q-spinner size="3rem" color="primary" />
-        </div>
-        
-        <div v-else-if="filteredEnrolledCourses.length > 0">
-           
-           <!-- หมวดแสดงสไตล์กริดตาราง (GRID VIEW) -->
-           <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-              <div v-for="course in filteredEnrolledCourses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">
-                 <!-- ส่วนรูปภาพหน้าปก (Thumbnail) -->
-                 <div class="relative w-full aspect-[4/3] bg-slate-100 dark:bg-slate-800 overflow-hidden">
-                    <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                    <!-- ป้ายหมวดหมู่บนมุมซ้ายของรูป (Badge inside Image Map Top Left) -->
-                    <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm">
-                       {{ course.category_name }}
-                    </div>
-                 </div>
-                 
-                 <!-- ตัวการ์ด (Card Body) -->
-                 <div class="p-5 flex flex-col flex-1">
-                    <h3 class="font-bold text-slate-900 dark:text-white text-[14px] leading-snug line-clamp-2 mb-3">{{ getLocalizedText(course.title) }}</h3>
-                    
-
-                    
-                    <div class="mt-auto flex items-center justify-between gap-4">
-                       <div class="flex-1">
-                          <div class="text-[10px] font-bold text-slate-700 dark:text-slate-300 mb-1.5 tracking-wide">{{ $t('course.progress') }}: {{ course.progress }}%</div>
-                           <div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
-                              <div class="h-full rounded-full transition-all duration-500" :class="course.completed ? 'bg-green-500' : 'bg-[#3B6BE8] dark:bg-blue-400'" :style="{ width: `${course.progress}%` }"></div>
-                           </div>
-                       </div>
-                        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3 sm:mt-0">
-                            <!-- ปุ่มดาวน์โหลดใบเซอร์ (Certificate Button) -->
-                            <button v-if="course.completed" @click.stop="handleDownloadCertificate(course.id)" class="border border-green-100 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-900/30 dark:text-green-400 rounded-full px-3 py-1.5 text-[11px] font-bold hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors shrink-0 flex items-center justify-center gap-1">
-                              <q-icon name="workspace_premium" size="14px" /> {{ $t('course.certificate') }}
-                            </button>
-                            <!-- ปุ่มเรียนต่อหรือเรียนซ้ำ (Continue/Replay Button) -->
-                            <button class="bg-[#3B6BE8] text-white border-transparent hover:bg-blue-700 shadow-sm rounded-full px-5 py-1.5 text-[11px] font-bold transition-colors shrink-0 text-center cursor-pointer">
-                               {{ course.completed ? $t('course.studyAgain') : $t('dashboard.continue') }}
-                            </button>
-                        </div>
-                    </div>
-                 </div>
-              </div>
-           </div>
-
-           <!-- หมวดแสดงสไตล์บรรทัดรายการ (LIST VIEW) -->
-           <div v-else class="flex flex-col gap-4">
-              <div v-for="course in filteredEnrolledCourses" :key="course.id" class="flex flex-col sm:flex-row items-center rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:border-slate-800 p-4 gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 cursor-pointer group" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">
-                 
-                 <!-- ส่วนภาพหน้าปกด้านซ้าย (Thumbnail Left) -->
-                 <div class="relative w-full sm:w-[240px] aspect-[16/10] sm:aspect-auto sm:h-[130px] rounded-2xl bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
-                    <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                    <!-- ป้ายหมวดหมู่ในรูปภาพ (Badge inside Image) -->
-                    <div v-if="course.category_name" class="absolute top-2.5 left-2.5 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm">
-                       {{ course.category_name }}
-                    </div>
-                 </div>
-
-                 <!-- เนื้อหาอยู่ทางขวา (Content Right) -->
-                 <div class="flex-1 w-full flex flex-col md:flex-row gap-6 md:items-center">
-                    
-                    <div class="flex-1 min-w-0">
-                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-3 pr-4">{{ getLocalizedText(course.title) }}</h3>
-
-                    </div>
-
-                    <!-- โซนความคืบหน้าและปุ่มกด (Progress and Button Zone) -->
-                    <div class="flex md:flex-col items-center md:items-end justify-between md:justify-center gap-4 shrink-0 md:w-[200px]">
-                        <div class="w-full max-w-[140px] md:max-w-full">
-                           <div class="flex justify-between items-center text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-2 tracking-wide">
-                              <span>{{ $t('course.progress') }}:</span>
-                              <span>{{ course.progress }}%</span>
-                           </div>
-                           <div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
-                              <div class="h-full rounded-full transition-all duration-500" :class="course.completed ? 'bg-green-500' : 'bg-[#3B6BE8] dark:bg-blue-400'" :style="{ width: `${course.progress}%` }"></div>
-                           </div>
-                        </div>
-
-                        <div class="flex flex-col items-stretch md:items-end gap-2 mt-3 sm:mt-0 w-full sm:w-auto">
-                            <!-- ปุ่มดาวน์โหลดใบเซอร์ (Certificate Button) -->
-                            <button v-if="course.completed" @click.stop="handleDownloadCertificate(course.id)" class="border border-green-100 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-900/30 dark:text-green-400 rounded-full px-4 py-2 text-[12px] font-bold hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors shrink-0 flex items-center justify-center gap-1 w-full sm:w-auto">
-                              <q-icon name="workspace_premium" size="16px" /> {{ $t('course.downloadCertificate') }}
-                            </button>
-                            <!-- ปุ่มเรียนต่อหรือเรียนซ้ำ (Continue/Replay Button) -->
-                            <button class="bg-[#3B6BE8] text-white border-transparent hover:bg-blue-700 shadow-sm rounded-full px-6 py-2 text-[12px] font-bold transition-colors shrink-0 text-center w-full sm:w-auto cursor-pointer">
-                              {{ course.completed ? $t('course.studyAgain') : $t('dashboard.continue') }}
-                            </button>
-                        </div>
-                    </div>
-                 </div>
-                 
-              </div>
-           </div>
-
-        </div>
-        
-        <!-- กรณีที่ค้นหา/กรองแล้วไม่พบข้อมูล (Empty filter state) -->
-        <div v-else class="flex flex-col items-center justify-center py-20">
-          <q-icon name="search_off" size="48px" class="text-slate-300 dark:text-slate-600 mb-4" />
-          <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.searchNoResult') }}</h3>
-          <p class="text-slate-500 dark:text-slate-400 text-sm">{{ $t('myCourses.searchNoResultDesc') }}</p>
-        </div>
+        </q-btn>
       </div>
-    
     </div>
 
-    <!-- หน้าต่างแจ้งเตือน: ลงทะเบียนสำเร็จ (MODAL: Enrollment Success) -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+       <!-- Filter Tabs (Horizontal Bar) -->
+       <div class="bg-white dark:bg-slate-900/50 p-1.5 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex items-center gap-1 shadow-sm">
+         <q-btn
+           v-for="filter in ['all', 'progress', 'completed']"
+           :key="filter"
+           @click="activeFilter = filter as any"
+           flat
+           rounded
+           dense
+           class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
+           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
+           :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
+         />
+       </div>
+    </div>
+
+    <!-- Courses Grid -->
+    <div v-if="isLoading" class="flex justify-center py-20">
+       <q-spinner size="3rem" color="primary" />
+    </div>
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <template v-for="course in filteredEnrolledCourses" :key="course.id">
+        <!-- In Progress Course Card -->
+        <CourseCard 
+          v-if="!course.completed"
+          :id="course.id"
+          :title="course.title"
+          :progress="course.progress"
+          :image="course.thumbnail_url"
+          show-continue
+          :show-view-details="false"
+        />
+        <!-- Completed Course Card -->
+        <CourseCard 
+          v-else
+          :id="course.id"
+          :title="course.title"
+          :progress="100"
+          :image="course.thumbnail_url"
+          :completed="true"
+          show-certificate
+          show-study-again
+          :show-view-details="false"
+          :loading="downloadingCourseId === course.id"
+          @view-certificate="downloadCertificate(course)"
+        />
+      </template>
+    </div>
+
+    <!-- Empty State -->
+    <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 -->
     <q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
       <q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
         <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
-        <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">✓</div>
+        <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
+          ✓
+        </div>
         <h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
         <p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
         <div class="flex flex-col gap-3">
-          <q-btn v-if="validCourseId" :to="`/classroom/learning?course_id=${validCourseId}`" unelevated rounded color="primary" class="w-full py-3 text-lg font-bold shadow-lg" :label="$t('enrollment.startNow')" />
-          <q-btn v-else unelevated rounded color="primary" class="w-full py-3 text-lg font-bold shadow-lg" :label="$t('common.close')" @click="showEnrollModal = false" />
-          <q-btn v-if="validCourseId" flat rounded color="grey-7" class="w-full py-3 font-bold" :label="$t('enrollment.later')" @click="showEnrollModal = false" />
+          <q-btn
+            v-if="validCourseId"
+            :to="`/classroom/learning?course_id=${validCourseId}`"
+            unelevated
+            rounded
+            color="primary"
+            class="w-full py-3 text-lg font-bold shadow-lg"
+            :label="$t('enrollment.startNow')"
+          />
+           <q-btn
+            v-else
+            unelevated
+            rounded
+            color="primary"
+            class="w-full py-3 text-lg font-bold shadow-lg"
+            :label="$t('common.close')" 
+            @click="showEnrollModal = false"
+          />
+          <q-btn
+            v-if="validCourseId"
+            flat
+            rounded
+            color="grey-7"
+            class="w-full py-3 font-bold"
+            :label="$t('enrollment.later')"
+            @click="showEnrollModal = false"
+          />
         </div>
       </q-card>
     </q-dialog>
 
+
   </div>
 </template>
+
+<style scoped>
+/* Custom Font for Signature/Name if desired */
+.font-handwriting {
+  font-family: 'Dancing Script', cursive, serif; /* Fallback */
+}
+</style>
diff --git a/Frontend-Learner/pages/dashboard/profile.vue b/Frontend-Learner/pages/dashboard/profile.vue
index c8a8a103..be58fc39 100644
--- a/Frontend-Learner/pages/dashboard/profile.vue
+++ b/Frontend-Learner/pages/dashboard/profile.vue
@@ -4,15 +4,13 @@ definePageMeta({
   middleware: 'auth'
 })
 
-const { locale, t } = useI18n()
+useHead({
+  title: 'ตั้งค่าบัญชี - e-Learning'
+})
+
 const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
 const { getLocalizedText } = useCourse()
-import { useQuasar } from 'quasar'
-const $q = useQuasar()
-
-useHead({
-  title: `${t('userMenu.settings')} - e-Learning`
-})
+const { locale, t } = useI18n()
 
 
 
@@ -59,30 +57,23 @@ const passwordForm = reactive({
   confirmPassword: ''
 })
 
-const showPasswordModal = ref(false)
-const showPassword = reactive({
-  current: false,
-  new: false,
-  confirm: false
-})
 
+// Rules have been moved to components
 
-// กฎต่างๆ ถูกย้ายไปที่คอมโพเนนต์แล้ว (Rules have been moved to components)
-
-const fileInput = ref<HTMLInputElement | null>(null) // ใช้ในโหมดมุมมอง (อยู่นอกคอมโพเนนต์) (Used in view mode (outside component))
+const fileInput = ref<HTMLInputElement | null>(null) // Used in view mode (outside component)
 
 const toggleEdit = (edit: boolean) => {
   isEditing.value = edit
 }
 
-// อัปเดตให้รับออบเจ็กต์ File ได้โดยตรง (หรือ Event สำหรับความเข้ากันได้ของโหมดมุมมองหากจำเป็น) (Updated to accept File object directly (or Event for view mode compatibility if needed))
+// Updated to accept File object directly (or Event for view mode compatibility if needed)
 const handleFileUpload = async (fileOrEvent: File | Event) => {
   let file: File | null = null
 
   if (fileOrEvent instanceof File) {
     file = fileOrEvent
   } else {
-    // การทำงานสำรองสำหรับอีเวนต์ input change แบบเนทีฟ (Fallback for native input change event)
+    // Fallback for native input change event
     const target = (fileOrEvent as Event).target as HTMLInputElement
     if (target.files && target.files[0]) {
       file = target.files[0]
@@ -104,15 +95,14 @@ const handleFileUpload = async (fileOrEvent: File | Event) => {
 
     if (result.success && result.data?.avatar_url) {
        userData.value.photoURL = result.data.avatar_url
-       $q.notify({ type: 'positive', message: 'อัปเดตรูปโปรไฟล์สำเร็จ', position: 'top' })
     } else {
        console.error('Upload failed:', result.error)
-       $q.notify({ type: 'negative', message: result.error || t('profile.updateError') || 'อัปเดตรูปโปรไฟล์ไม่สำเร็จ', position: 'top' })
+       alert(result.error || t('profile.updateError'))
     }
   }
 }
 
-// เรียกการอัปโหลดเมื่อคลิกที่รูปโปรไฟล์ในโหมด View (Trigger upload for VIEW mode avatar click)
+// Trigger upload for VIEW mode avatar click
 const triggerUpload = () => {
     fileInput.value?.click()
 }
@@ -141,9 +131,9 @@ const handleUpdateProfile = async () => {
   const result = await updateUserProfile(payload)
   
   if (result?.success) {
-    $q.notify({ type: 'positive', message: t('profile.updateSuccess'), position: 'top' })
+    // success logic
   } else {
-    $q.notify({ type: 'negative', message: result?.error || t('profile.updateError'), position: 'top' })
+    alert(result?.error || t('profile.updateError'))
   }
   
   isProfileSaving.value = false
@@ -155,19 +145,19 @@ const handleSendVerifyEmail = async () => {
   isSendingVerify.value = false
   
   if (result.success) {
-    $q.notify({ type: 'positive', message: result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ', position: 'top' })
+    alert(result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ')
   } else {
     if (result.code === 400) {
-        $q.notify({ type: 'warning', message: t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว', position: 'top' })
+        alert(t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว')
     } else {
-        $q.notify({ type: 'negative', message: result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ', position: 'top' })
+        alert(result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ')
     }
   }
 }
 
 const handleUpdatePassword = async () => {
   if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-    $q.notify({ type: 'negative', message: 'รหัสผ่านใหม่ไม่ตรงกัน', position: 'top' })
+    alert('รหัสผ่านใหม่ไม่ตรงกัน')
     return
   }
   
@@ -179,19 +169,18 @@ const handleUpdatePassword = async () => {
   })
 
   if (result.success) {
-    $q.notify({ type: 'positive', message: t('profile.passwordSuccess') || 'เปลี่ยนรหัสผ่านสำเร็จ', position: 'top' })
+    alert(t('profile.passwordSuccess'))
     passwordForm.currentPassword = ''
     passwordForm.newPassword = ''
     passwordForm.confirmPassword = ''
-    showPasswordModal.value = false
   } else {
-    $q.notify({ type: 'negative', message: result.error || t('profile.passwordError') || 'เปลี่ยนรหัสผ่านไม่สำเร็จ', position: 'top' })
+    alert(result.error || t('profile.passwordError'))
   }
   
   isPasswordSaving.value = false
 }
 
-// เฝ้าดูการเปลี่ยนแปลงในสถานะผู้ใช้ส่วนกลาง (เช่น หลังจากอัปโหลดรูปโปรไฟล์หรืออัปเดตข้อมูลส่วนตัว) (Watch for changes in global user state (e.g. after avatar upload or profile update))
+// Watch for changes in global user state (e.g. after avatar upload or profile update)
 watch(() => currentUser.value, (newUser) => {
   if (newUser) {
     userData.value.photoURL = newUser.photoURL || ''
@@ -214,216 +203,170 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page-container bg-[#F8F9FA] dark:bg-[#020617] transition-colors duration-300 min-h-screen">
+  <div class="page-container bg-[#F8F9FA] dark:bg-[#020617] min-h-screen transition-colors duration-300">
     
+    <div class="flex items-center justify-between mb-8">
+      <div class="flex items-center gap-4">
+        <q-btn
+          v-if="isHydrated && isEditing"
+          flat
+          round
+          icon="arrow_back"
+          class="text-slate-600 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800"
+          @click="toggleEdit(false)"
+        />
+        <div class="flex items-start gap-4">
+          <span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
+          <div>
+            <h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
+              {{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
+            </h1>
+          </div>
+        </div>
+      </div>
+
+      <div class="min-h-9 flex items-center">
+        <q-btn
+          v-if="isHydrated && !isEditing"
+          unelevated
+          rounded
+          color="primary"
+          class="font-bold shadow-lg shadow-blue-500/20"
+          icon="edit"
+          :label="$t('profile.editProfile')"
+          @click="toggleEdit(true)"
+        />
+        <div
+          v-else-if="!isHydrated"
+          class="h-9 w-24 rounded-md bg-slate-200 dark:bg-slate-700 animate-pulse"
+        />
+      </div>
+    </div>
+
     <div v-if="!isHydrated" class="flex justify-center py-20">
        <q-spinner size="3rem" color="primary" />
     </div>
 
-    <!-- การตั้งค่าโปรไฟล์หลัก (MAIN PROFILE SETTINGS) -->
-    <div v-else class="max-w-5xl mx-auto pb-20 fade-in pt-4">
+    <div v-else class="max-w-4xl mx-auto pb-20">
       
-      <!-- บัตรข้อมูลโปรไฟล์ (Profile Card) -->
-      <div class="bg-white dark:!bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm mb-6 overflow-hidden">
-        <div class="p-8 border-b border-slate-200 dark:border-slate-800">
-          <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h2>
-          <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">{{ $t('profile.publicInfo') }}</p>
-        </div>
+      <!-- VIEW MODE: Premium Card with Banner -->
+      <div v-if="!isEditing" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none overflow-hidden fade-in min-h-[500px] flex flex-col transition-colors duration-300">
         
-        <div class="p-8">
-           <!-- ส่วนอัปโหลดรูปโปรไฟล์ -->
-           <div class="flex flex-col sm:flex-row items-center sm:items-center gap-6 mb-10 text-center sm:text-left">
-              <div class="relative cursor-pointer" @click="triggerUpload">
-                <UserAvatar 
-                  :photo-u-r-l="userData.photoURL" 
-                  :first-name="userData.firstName" 
-                  :last-name="userData.lastName" 
-                  size="100"
-                  class="rounded-full bg-slate-100 dark:bg-slate-800 object-cover border-4 border-slate-50 dark:border-slate-800"
-                />
-                <div class="absolute bottom-0 right-0 bg-[#3B6BE8] text-white p-1.5 rounded-full border-2 border-white dark:border-slate-900 hover:bg-blue-700 transition flex items-center justify-center">
-                  <q-icon name="edit" size="14px" />
-                </div>
-                <input type="file" ref="fileInput" class="hidden" accept="image/jpeg, image/png, image/gif" @change="handleFileUpload" />
+        <!-- Identity Header (Banner & Avatar) -->
+        <div class="relative">
+          <div class="h-40 bg-gradient-to-r from-blue-700 via-blue-600 to-indigo-700 relative overflow-hidden">
+             <!-- Abstract Patterns -->
+             <div class="absolute inset-0 opacity-10">
+                <div class="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-white blur-3xl"></div>
+                <div class="absolute -bottom-10 -left-10 w-48 h-48 rounded-full bg-indigo-300 blur-3xl"></div>
+             </div>
+          </div>
+          
+          <div class="px-8 md:px-12 flex flex-col md:flex-row items-center md:items-end gap-8 md:gap-12 -mt-12 pb-8 relative z-10">
+            <div class="relative group flex-shrink-0">
+              <UserAvatar 
+                :photo-u-r-l="userData.photoURL" 
+                :first-name="userData.firstName" 
+                :last-name="userData.lastName" 
+                size="140"
+                class="border-[6px] border-white dark:border-[#1e293b] shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300"
+              />
+            </div>
+            
+            <div class="text-center md:text-left pt-4 md:pt-0 flex-grow min-w-0">
+              <h2 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-2 leading-tight tracking-tight break-words">
+                {{ userData.firstName }} {{ userData.lastName }}
+              </h2>
+              <div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
+                      <q-icon name="alternate_email" size="xs" class="text-blue-500" />
+                      <span class="text-sm">{{ userData.email }}</span>
+                  </div>
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
+                      <q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
+                      <span class="text-sm">{{ userData.emailVerifiedAt ? $t('profile.emailVerified') : $t('profile.verifyEmail') }}</span>
+                  </div>
               </div>
-              <div class="flex flex-col items-center sm:items-start">
-                <button @click="triggerUpload" class="bg-[#3B6BE8] hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg text-sm font-bold transition mb-2 shadow-sm whitespace-nowrap">
-                  <span v-if="isProfileSaving"><q-spinner size="18px" /> {{ $t('profile.uploading') }}</span>
-                  <span v-else>{{ $t('profile.changeAvatar') }}</span>
-                </button>
-                <p class="text-slate-500 dark:text-slate-400 text-xs mt-1">{{ $t('profile.avatarHint') }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- View Details Content -->
+        <div class="p-8 md:p-12 flex-grow">
+           <div class="max-w-3xl mx-auto h-full fade-in">
+              <h3 class="text-sm font-black text-slate-700 dark:text-slate-300 uppercase tracking-widest flex items-center gap-2 mb-8">
+                 <span class="w-2 h-2 bg-blue-600 rounded-full"></span> {{ $t('profile.accountDetails') }}
+              </h3>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
+                 <div class="flex items-center gap-4 group">
+                    <div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform">
+                       <q-icon name="smartphone" size="24px" />
+                    </div>
+                    <div>
+                       <div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.phone') }}</div>
+                       <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
+                    </div>
+                 </div>
+                 <div class="flex items-center gap-4 group">
+                    <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 group-hover:scale-110 transition-transform">
+                       <q-icon name="calendar_today" size="24px" />
+                    </div>
+                    <div>
+                       <div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.joinedAt') }}</div>
+                       <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
+                    </div>
+                 </div>
               </div>
            </div>
-
-           <!-- ฟิลด์ข้อมูลฟอร์ม (แบ่งเป็น 2 คอลัมน์) (Form Inputs (2 Column Grid)) -->
-           <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-4">
-               <div class="md:col-span-2 relative">
-                  <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.prefix') }}</label>
-                  <select v-model="userData.prefix" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white appearance-none cursor-pointer">
-                     <option value="" disabled>{{ $t('profile.selectPrefix') }}</option>
-                     <option value="นาย">{{ $t('profile.mr') }}</option>
-                     <option value="นาง">{{ $t('profile.mrs') }}</option>
-                     <option value="นางสาว">{{ $t('profile.miss') }}</option>
-                  </select>
-                  <div class="pointer-events-none absolute bottom-0 right-0 flex items-center px-4 h-11 text-slate-500">
-                     <q-icon name="arrow_drop_down" size="24px" />
-                  </div>
-               </div>
-               <div>
-                  <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.firstName') }}-{{ $t('profile.lastName') }}</label>
-                  <div class="flex gap-3">
-                     <input type="text" v-model="userData.firstName" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" :placeholder="$t('profile.firstName')" />
-                     <input type="text" v-model="userData.lastName" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" :placeholder="$t('profile.lastName')" />
-                  </div>
-               </div>
-              <div>
-                  <div class="flex items-center justify-between mb-2">
-                     <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300">{{ $t('profile.email') }}</label>
-                     <div v-if="userData.emailVerifiedAt" class="flex items-center gap-1 text-green-500 text-xs font-bold">
-                         <q-icon name="verified_user" size="14px" /> {{ $t('profile.emailVerified') }}
-                     </div>
-                     <button v-else @click="handleSendVerifyEmail" :disabled="isSendingVerify" class="flex items-center gap-1 text-amber-500 hover:text-amber-600 text-xs font-bold transition">
-                         <q-icon name="warning" size="14px" /> <span v-if="isSendingVerify"><q-spinner size="xs" /> {{ $t('profile.verifying') }}</span><span v-else class="underline">{{ $t('profile.verifyNow') }}</span>
-                     </button>
-                  </div>
-                 <input type="email" v-model="userData.email" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none transition text-sm font-medium text-slate-500 dark:text-slate-400" disabled />
-              </div>
-               <div>
-                  <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.phone') }}</label>
-                  <input type="tel" v-model="userData.phone" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" placeholder="08x-xxx-xxxx" />
-               </div>
-               <div>
-                  <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.joinedAt') }}</label>
-                  <input type="text" :value="formatDate(userData.createdAt)" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none transition text-sm font-medium text-slate-500 dark:text-slate-400" disabled />
-               </div>
-           </div>
-
-        </div>
-        
-        <!-- ปุ่มกดยืนยันต่างๆ (Footer Buttons) -->
-        <div class="px-6 sm:px-8 py-5 border-t border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row justify-center sm:justify-end gap-3 items-center bg-white dark:!bg-slate-900">
-           <button class="w-full sm:w-auto text-[13px] font-bold text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white px-4 py-2 transition order-2 sm:order-1" @click="fetchUserProfile(true)">{{ $t('common.cancel') }}</button>
-           <button @click="handleUpdateProfile" :disabled="isProfileSaving" class="w-full sm:w-auto bg-[#3B6BE8] hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg text-[13px] font-bold transition shadow-sm disabled:opacity-50 order-1 sm:order-2">
-             <span v-if="isProfileSaving"><q-spinner size="18px" color="white" class="mr-1" /> {{ $t('profile.saving') }}</span>
-             <span v-else>{{ $t('common.saveChanges') }}</span>
-           </button>
         </div>
       </div>
 
-      <!-- การ์ดความปลอดภัย (Security Card) -->
-      <div class="bg-white dark:!bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm overflow-hidden">
-        <div class="p-8 border-b border-slate-200 dark:border-slate-800">
-          <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.security') }}</h2>
-          <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">{{ $t('profile.securitySubtitle') }}</p>
-        </div>
-        
-        <div class="px-6 sm:px-8 py-8 sm:py-10">
-          <div class="p-5 sm:p-6 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row items-center sm:items-center justify-between gap-6 text-center sm:text-left">
-            <div class="flex flex-col sm:flex-row items-center gap-4">
-              <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
-                <q-icon name="key" size="24px" />
-              </div>
-              <div>
-                <h3 class="font-bold text-slate-900 dark:text-white text-[15px] sm:text-[16px]">{{ $t('profile.password') }}</h3>
-                <p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5 sm:mt-1">{{ $t('profile.securitySubtitle') }}</p>
-              </div>
+      <!-- EDIT MODE: Tabs and Forms (Clean Layout) -->
+      <div v-else class="fade-in">
+          <!-- Tab Selector -->
+          <div class="flex justify-center mb-8">
+            <div class="bg-white dark:bg-[#1e293b] p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-slate-700 shadow-sm">
+                <button 
+                  @click="activeTab = 'general'"
+                  class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
+                  :class="activeTab === 'general' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
+                >
+                  <q-icon name="person_outline" size="18px" /> {{ $t('profile.generalInfo') }}
+                </button>
+                <button 
+                  @click="activeTab = 'security'"
+                  class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
+                  :class="activeTab === 'security' ? 'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
+                >
+                  <q-icon name="lock_open" size="18px" /> {{ $t('profile.security') }}
+                </button>
             </div>
-            <button @click="showPasswordModal = true" class="w-full sm:w-auto bg-[#3B6BE8] hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg text-sm font-bold transition shadow-sm shadow-blue-500/10">
-              {{ $t('profile.changePasswordBtn') }}
-            </button>
           </div>
-        </div>
+          
+          <!-- Edit Content -->
+          <div class="max-w-3xl mx-auto">
+              <div v-if="activeTab === 'general'" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
+                  <ProfileEditForm
+                      v-model="userData"
+                      :loading="isProfileSaving"
+                      :verifying="isSendingVerify"
+                      @submit="handleUpdateProfile"
+                      @upload="handleFileUpload"
+                      @verify="handleSendVerifyEmail"
+                  />
+              </div>
+              <div v-else class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
+                  <PasswordChangeForm
+                      v-model="passwordForm"
+                      :loading="isPasswordSaving"
+                      @submit="handleUpdatePassword"
+                  />
+              </div>
+          </div>
       </div>
       
     </div>
 
-    <!-- โมดอลเปลี่ยนรหัสผ่าน (Password Modal) -->
-    <q-dialog v-model="showPasswordModal">
-      <q-card class="w-full max-w-md rounded-2xl p-2 dark:bg-slate-900 shadow-xl">
-        <q-form @submit="handleUpdatePassword">
-          <q-card-section class="flex items-center justify-between pb-2">
-            <div class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.changePasswordBtn') }}</div>
-            <q-btn icon="close" flat round dense v-close-popup class="text-slate-500" />
-          </q-card-section>
-
-          <q-card-section class="pt-2">
-            <div class="space-y-1">
-               <div>
-                <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.currentPassword') }}</label>
-                <q-input
-                  v-model="passwordForm.currentPassword"
-                  :type="showPassword.current ? 'text' : 'password'"
-                  outlined 
-                  dense
-                  class="custom-pwd-input"
-                  :rules="[val => !!val || $t('common.required')]"
-                >
-                  <template v-slot:append>
-                    <q-icon
-                      :name="showPassword.current ? 'visibility_off' : 'visibility'"
-                      class="cursor-pointer text-slate-400"
-                      @click="showPassword.current = !showPassword.current"
-                    />
-                  </template>
-                </q-input>
-              </div>
-              
-               <div>
-                <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.newPassword') }}</label>
-                <q-input
-                  v-model="passwordForm.newPassword"
-                  :type="showPassword.new ? 'text' : 'password'"
-                  outlined 
-                  dense
-                  class="custom-pwd-input"
-                  :rules="[
-                    val => !!val || $t('common.required'),
-                    val => val.length >= 6 || $t('profile.newPasswordHint')
-                  ]"
-                >
-                  <template v-slot:append>
-                    <q-icon
-                      :name="showPassword.new ? 'visibility_off' : 'visibility'"
-                      class="cursor-pointer text-slate-400"
-                      @click="showPassword.new = !showPassword.new"
-                    />
-                  </template>
-                </q-input>
-              </div>
-
-               <div>
-                <label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.confirmNewPassword') }}</label>
-                <q-input
-                  v-model="passwordForm.confirmPassword"
-                  :type="showPassword.confirm ? 'text' : 'password'"
-                  outlined 
-                  dense
-                  class="custom-pwd-input"
-                  :rules="[
-                    val => !!val || $t('common.required'),
-                    val => val === passwordForm.newPassword || $t('common.passwordsDoNotMatch')
-                  ]"
-                >
-                  <template v-slot:append>
-                    <q-icon
-                      :name="showPassword.confirm ? 'visibility_off' : 'visibility'"
-                      class="cursor-pointer text-slate-400"
-                      @click="showPassword.confirm = !showPassword.confirm"
-                    />
-                  </template>
-                </q-input>
-              </div>
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="right" class="pt-2 pb-2 px-4">
-            <q-btn flat :label="$t('common.cancel')" color="grey-7" v-close-popup class="font-bold text-[13px]" />
-            <q-btn type="submit" unelevated color="primary" :label="$t('common.save')" :loading="isPasswordSaving" class="font-bold rounded-lg px-4 text-[13px]" />
-          </q-card-actions>
-        </q-form>
-      </q-card>
-    </q-dialog>
-
   </div>
 </template>
 
@@ -432,13 +375,7 @@ onMounted(async () => {
   color: white;
 }
 
-.custom-pwd-input :deep(.q-field__control) {
-  border-radius: 8px;
-  background-color: #f8fafc;
-}
-.dark .custom-pwd-input :deep(.q-field__control) {
-  background-color: #1e293b;
-}
+/* Removed card-premium and dark mode overrides as we used utility classes */
 
 .fade-in {
   animation: fadeIn 0.4s ease-out forwards;
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index 7c804579..de7ea2e6 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -13,29 +13,47 @@ useHead({
   title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
 })
 
-import { CATEGORY_CARDS, WHY_CHOOSE_US } from '@/constants/landing'
-
 const { fetchCategories } = useCategory()
 const { fetchCourses, getLocalizedText } = useCourse()
 const { user } = useAuth()
 
-const categoryCards = CATEGORY_CARDS
-const whyChooseUs = WHY_CHOOSE_US
+const stepOneCards = [
+  { title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
+  { title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
+  { title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
+  { title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
+  { title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
+  { title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
+  { title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
+]
 
-// ระดับความยาก (Level)
-const levelModel = ref('ระดับทั้งหมด')
-const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
+const learningStyles = [
+  { 
+    title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
+    subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที', 
+    time: 'เข้าถึงได้ตลอดชีพ',
+    features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
+    iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
+    btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
+  }
+]
+
+const promoCategories = [
+  { title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
+  { title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
+  { title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
+  { title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
+]
 
 const categories = ref<any[]>([])
 const topCourses = ref<any[]>([])
 const selectedCategory = ref('all')
 const isLoading = ref(false)
 const currentSlide = ref(0)
-
 const courseChunks = computed(() => {
   const chunkSize = 4
   const chunks = []
-  if (!topCourses.value || topCourses.value.length === 0) return []
+  if (!topCourses.value) return []
   for (let i = 0; i < topCourses.value.length; i += chunkSize) {
     chunks.push(topCourses.value.slice(i, i + chunkSize))
   }
@@ -47,7 +65,7 @@ const loadData = async () => {
     try {
         const [catRes, courseRes] = await Promise.all([
             fetchCategories(),
-            fetchCourses({ limit: 12, forceRefresh: true })
+            fetchCourses({ limit: 8, forceRefresh: true })
         ])
         
         if (catRes.success) categories.value = catRes.data || []
@@ -66,7 +84,7 @@ const goBrowse = (slug: string) => {
 watch(selectedCategory, async (newVal) => {
     isLoading.value = true
     try {
-        const params: any = { limit: 12 }
+        const params: any = { limit: 8 }
         if (newVal !== 'all') {
             const category = categories.value.find(c => c.slug === newVal)
             if (category) {
@@ -92,41 +110,41 @@ onMounted(() => {
 
 <template>
   <div class="landing-page bg-white min-h-screen">
-    <!-- Section 1: Hero Section -->
-    <section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
-      <div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
-        <!-- ด้านซ้าย: ข้อความและปุ่มกด (Left Content) -->
-        <div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
-          <!-- หัวข้อหลัก (Heading) -->
-          <h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
-            <span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>
-            <span class="text-blue-600">ด้วยการเรียนรู้ออนไลน์</span>
+    <!-- Hero Section -->
+    <header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
+      <!-- Decorative Background -->
+      <div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
+      
+      <div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
+        <div class="hero-left slide-up">
+          <div class="flex items-center gap-3 mb-8 text-blue-600">
+            <q-icon name="stars" size="28px" />
+            <span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
+            คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
           </h1>
-
-          <!-- คำอธิบายรอง (Subtitle) -->
-          <p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
-            จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
-            ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
-            เรียนได้ทุกที่ ทุกเวลา
+          <p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
+            แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
           </p>
 
-        <!-- ปุ่มกดต่างๆ (Buttons) -->
-          <div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
+          <!-- Search Bar Pill -->
+          <div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
             <q-btn 
               unelevated 
               rounded 
-              color="blue-600" 
-              label="ดูคอร์สเรียน" 
-              class="px-10 py-4 w-full sm:w-auto rounded-3xl font-semibold text-white text-lg shadow-xl shadow-blue-600/20 transition-transform"
+              color="primary" 
+              label="ดูคอร์สเรียนทั้งหมด" 
+              class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
               no-caps
               to="/browse"
             />
             <q-btn 
               outline
               rounded 
+              color="primary" 
               label="สมัครสมาชิกฟรี" 
-              color="grey-8"
-              class="px-10 py-4 w-full sm:w-auto btn-user rounded-3xl font-semibold text-lg hover:bg-blue-50 "
+              class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
               no-caps
               to="/auth/register"
               v-if="!user"
@@ -134,171 +152,192 @@ onMounted(() => {
           </div>
         </div>
 
-        <!-- ด้านขวา: รูปภาพฮีโร่ (Right - Hero Image) -->
-        <div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
-          <div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
-            <img
-              src="https://api.builder.io/api/v1/image/assets/TEMP/11ba9b46c799fac950967377f8158fa942c1a6b8?width=1184"
-              alt="Students collaborating"
-              class="w-full h-full object-cover"
-            />
-            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
+        <!-- Hero Visual Showcase -->
+        <div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
+          <div class="relative w-full max-w-xl">
+            <!-- Main Illustration -->
+            <div class="relative z-10 animate-float">
+              <img 
+                src="/img/elearning.png" 
+                alt="E-Learning Illustration"
+                class="w-full h-auto drop-shadow-2xl"
+              />
+            </div>
 
-            <!-- ส่วนทับซ้อนสำหรับทำโมเดลการ์ดคอร์ส (Course Card Overlay) -->
-            <!-- <div class="absolute bottom-5 left-5 right-5">
-              <div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
-                <div class="flex items-center gap-4">
-                  <div class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-2xl bg-blue-600/20">
-                    <q-icon name="o_play_circle" size="25px" class="text-blue-600" />
-                  </div>
-                  <div class="flex flex-col">
-                    <span class="text-slate-900 font-bold text-sm leading-5">
-                      เรียนรู้การออกแบบ UI/UX
-                    </span>
-                    <span class="text-slate-500 text-xs leading-4 mt-0.5">
-                      คอร์สวิดีโอ • 12 บทเรียน
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div> -->
+            <!-- Decorative shapes behind the image -->
+            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
+            <div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
+            <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
           </div>
         </div>
       </div>
-    </section>
+    </header>
 
-    <!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
-    <section class="pt-20 pb-14 bg-white relative flex-col">
+    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- หัวข้อหลัก (Heading) -->
         <div class="text-center mb-16 slide-up">
-          <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-6">
-            ทำไมต้องเลือกแพลตฟอร์มของเรา?
+          <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
+            เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
           </h2>
-          <p class="text-slate-500 text-base font-normal md:text-xl max-w-3xl mx-auto leading-relaxed">
-            เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
+          <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
+            เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
           </p>
         </div>
 
-        <!-- โซนแนะนำแบบการ์ดแนวนอน (Horizontal Cards) -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div v-for="(item, i) in whyChooseUs" :key="i"
-               class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white transition-all duration-500 group"
-               :style="`animation-delay: ${i * 0.1}s`"
-          >
-            <div class="w-14 h-14 rounded-full bg-[#E3EBFA] flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-500">
-              <q-icon :name="item.icon" size="28px" class="text-blue-600" />
+        <!-- Grid Container (Bento Layout) -->
+        <div class="relative">
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div v-for="(card, i) in stepOneCards" :key="i" 
+                 class="group cursor-pointer rounded-3xl p-6 flex flex-col justify-between transition-all hover:-translate-y-1 shadow-lg hover:shadow-2xl overflow-hidden relative"
+                 :class="[
+                   card.bgClass,
+                   i === 0 ? 'lg:row-span-2 min-h-[380px]' : 'min-h-[220px]'
+                 ]"
+                 @click="goBrowse(card.categorySlug)"
+            >
+              <!-- Background Accent -->
+              <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
+              
+              <div>
+                <span class="text-[10px] font-bold uppercase tracking-[0.15em] opacity-80 mb-3 block" :class="card.textClass === 'text-white' ? 'text-white/80' : 'text-slate-900/60'">ก้าวแรกของ</span>
+                <h3 class="text-2xl font-bold leading-tight tracking-tight mb-2" :class="card.textClass">{{ card.title }}</h3>
+              </div>
+              
+              <div class="space-y-4 relative z-10">
+                <p class="text-sm font-medium leading-relaxed opacity-90" :class="card.textClass">{{ card.desc }}</p>
+                <div class="flex justify-end">
+                  <div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
+                       :class="[i === 0 ? 'w-12 h-12' : '']">
+                     <q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
+                  </div>
+                </div>
+              </div>
             </div>
-            <h3 class="text-[1.3rem] font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
-              {{ item.title }}
-            </h3>
-            <p class="text-slate-500 text-lg leading-relaxed ">
-              {{ item.desc }}
-            </p>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Section 3: เลือกเรียนตามเรื่องที่คุณสนใจ -->
-    <section class="py-20 md:py-24 bg-white">
+    <!-- Section 2: "Value Proposition" - Why Online Learning here? -->
+    <section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
+      <!-- Decorative background blur -->
+      <div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
+      
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- หัวข้อ (Heading) -->
-        <div class="mb-12 slide-up">
-          <h2 class="text-[1.4rem] text-3xl md:text-4xl font-semibold text-slate-900 px-4">
-            เลือกเรียนตามเรื่องที่คุณสนใจ
-          </h2>
-        </div>
-
-        <!-- โซนหมวดหมู่แบบการ์ดแนวนอน (Horizontal Cards) -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-6 px-4">
-          <div v-for="(card, i) in categoryCards" :key="i"
-               class="cursor-pointer bg-white rounded-3xl p-6 border border-slate-200/80 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 hover:border-[#2463eb61] transition-all duration-500 flex items-center gap-5"
-               @click="goBrowse(card.slug)"
-          >
-            <!-- กล่องไอคอน (Icon Box) -->
-            <div class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-50 group-hover:scale-110 transition-transform duration-500">
-              <q-icon :name="card.icon" size="35px" class="text-blue-600" />
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+          <!-- Left side: Visual representation -->
+          <div class="relative slide-up">
+            <div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
+              <!-- Animated background shapes -->
+              <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
+              <div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
+              
+              <div class="relative z-20 flex flex-col items-center text-center text-white">
+                <div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
+                  <q-icon name="laptop_mac" size="64px" class="text-white" />
+                </div>
+                <h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
+                  คอร์สออนไลน์<br class="hidden md:block" />
+                  ที่ออกแบบมาสำหรับคุณ
+                </h3>
+                <p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
+                  เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
+                </p>
+              </div>
             </div>
+            
+            <!-- Floating Stats pill -->
+            <div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
+              <div class="flex items-center gap-4">
+                <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
+                  <q-icon name="query_builder" size="28px" />
+                </div>
+                <div>
+                  <div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
+                  <div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-            <!-- เนื้อหาข้อความ (Content) -->
-            <div class="flex-grow pr-2">
-              <h3 class="text-lg md:text-xl font-bold text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
-                {{ card.title }}
-              </h3>
-              <p class="text-slate-600 text-xs md:text-sm leading-relaxed opacity-70">
-                {{ card.desc }}
+          <!-- Right side: Content & Benefits -->
+          <div class="slide-up" style="animation-delay: 0.2s;">
+            <div class="mb-12">
+              <span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
+                Premium Learning Experience
+              </span>
+              <h2 class="text-4xl md:text-6xl font-bold text-slate-900 leading-[1.2] md:leading-[1.2] tracking-tight mb-0 pt-1 overflow-visible">
+                ก้าวข้ามทุกขีดจำกัด<br />
+                ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
+              </h2>
+              <p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
+                เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
               </p>
             </div>
 
-            <!-- ลูกศรชี้ขวา (Arrow) -->
-            <div class="gt-xs flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
-              <q-icon name="chevron_right" size="24px" />
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+              <div v-for="(feature, f) in learningStyles[0].features" :key="f" 
+                   class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
+              >
+                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
+                  <q-icon name="check" size="20px" />
+                </div>
+                <span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
+              </div>
             </div>
+
+            <q-btn 
+              unelevated 
+              rounded 
+              color="primary"
+              label="เริ่มต้นบทเรียนแรกของคุณ"
+              class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
+              no-caps
+              :to="user ? '/browse' : '/auth/login'"
+            />
           </div>
         </div>
       </div>
     </section>
 
+
+
     <!-- Section 4: "คอร์สออนไลน์" -->
-    <section class="py-12 md:py-24 bg-slate-50">
+    <section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
       <div class="container mx-auto px-6 lg:px-12">
-        <!-- หัวข้อหลักและลิงก์เพิ่มเติม (Heading) -->
-        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
+        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
           <div class="slide-up">
-            <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
+            <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
+            <p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
           </div>
-          <NuxtLink to="/browse" class="flex items-center py-3 text-lg rounded-full font-bold ">
-            <span class="text-blue-600 hover:text-blue-500 ">ดูคอร์สทั้งหมด</span>
-            <q-icon name="arrow_forward" size="15px" class="text-blue-600 ml-2" />
+          <NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
+            คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
           </NuxtLink>
         </div>
 
-        <!-- แถวตัวกรองคอร์ส (Filters Row) -->
-        <div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
-          <!-- ตัวกรองหมวดหมู่คอร์ส (Category Filters) -->
-          <div class="flex items-center gap-2">
-            <button 
-              class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
-              :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-100 text-slate-700 hover:border-slate-300'"
-              @click="selectedCategory = 'all'"
-            >
-              <q-icon name="o_check_circle" size="20px" class="mr-1" />
-              ทั้งหมด
-            </button>
-
-            <button 
-              v-for="category in categories" 
-              :key="category.id"
-              class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-[1.5px]"
-              :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
-              @click="selectedCategory = category.slug"
-            >
-              <q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
-              {{ getLocalizedText(category.name) }}
-            </button>
-          </div>
-
-          <!-- Level Dropdown -->
-          <!-- <div class="flex items-center gap-2 font-medium">
-            <q-select 
-                borderless 
-                v-model="levelModel" 
-                :options="levelOptions" 
-                dropdown-icon="o_keyboard_arrow_down"  
-                class="text-lg" 
-                popup-content-class="rounded-lg text-lg shadow-sm text-slate-700"
-            >
-              <template v-slot:before>
-                <div class="text-slate-700 text-lg">ระดับความยาก:</div>
-              </template>
-            </q-select>
-          </div> -->
+        <!-- Filter Tabs / Pills -->
+        <div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
+          <button 
+            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
+            :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+            @click="selectedCategory = 'all'"
+          >
+            ทั้งหมด
+          </button>
+          <button 
+            v-for="category in categories" 
+            :key="category.id"
+            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
+            :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+            @click="selectedCategory = category.slug"
+          >
+            {{ getLocalizedText(category.name) }}
+          </button>
         </div>
 
-        <!-- ระบบเลื่อนสไลด์ดูคอร์ส (Courses Carousel) -->
-        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] animate-pulse" />
+        <!-- Courses Carousel -->
+        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+          <div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
         </div>
         
         <div v-else class="relative group/carousel slide-up">
@@ -317,68 +356,19 @@ onMounted(() => {
               v-for="(chunk, pageIndex) in courseChunks" 
               :key="pageIndex" 
               :name="pageIndex" 
-              class="p-0"
+              class="p-4"
             >
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                <div 
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+                <CourseCard 
                   v-for="course in chunk" 
                   :key="course.id" 
-                  class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
-                  @click="navigateTo(`/course/${course.id}`)"
-                >
-                  <!-- รูปภาพหน้าปกคอร์ส (Image) -->
-                  <div class="relative flex-shrink-0">
-                    <img
-                      v-if="course.thumbnail_url"
-                      :src="course.thumbnail_url"
-                      :alt="getLocalizedText(course.title)"
-                      class="w-full h-[150px] sm:h-[180px] lg:h-[200px] object-cover"
-                    />
-                    <div v-else class="w-full h-[150px] sm:h-[180px] lg:h-[200px] bg-slate-100 flex items-center justify-center">
-                        <q-icon name="o_image" size="40px" class="text-slate-300" />
-                    </div>
-                  </div>
-
-                  <!-- เนื้อหาของคอร์ส (Content) -->
-                  <div class="flex flex-col flex-1 p-6">
-
-
-                    <!-- ชื่อคอร์ส (Title) -->
-                    <h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
-                      {{ getLocalizedText(course.title) }}
-                    </h3>
-
-                    <!-- รายละเอียดแบบย่อ (Description) -->
-                    <p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
-                      {{ getLocalizedText(course.description) }}
-                    </p>
-
-
-
-                   <!-- ส่วนแถบราคาและปุ่มกด (Price + Button) -->
-                    <div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
-                        <div class="flex flex-col">
-                            <span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
-                                {{ course.price.toLocaleString() }}.-
-                            </span>
-                            <span v-else class="text-green-600 font-bold text-xl">
-                                ฟรี
-                            </span>
-                        </div>
-                      <button class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#2463EB]/10 hover:bg-[#2463EB]/20 transition-colors">
-                        <q-icon name="o_remove_red_eye" size="18px" class="text-[#2463EB]" />
-                        <span class="text-[#2463EB] font-medium text-sm">
-                          รายละเอียด
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
+                  v-bind="{ ...course, image: course.thumbnail_url }"
+                />
               </div>
             </q-carousel-slide>
           </q-carousel>
 
-           <!-- ระบบนำทางสไลด์แบบกำหนดเอง (Custom Carousel Navigation) -->
+           <!-- Custom Carousel Navigation -->
             <button 
               v-if="courseChunks.length > 1"
               class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
@@ -400,55 +390,11 @@ onMounted(() => {
         </div>
       </div>
     </section>
-
-    <!-- Section 5: "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง" -->
-    <section class="py-16 md:py-24 bg-white">
-      <div class="max-w-7xl mx-auto px-6 lg:px-12">
-        <div class="bg-blue-600 rounded-3xl px-8 py-20 md:px-18 text-center relative overflow-hidden">
-          <div class="gradient-background">
-            <div class="gradient-sphere sphere-1"></div>
-            <div class="gradient-sphere sphere-2"></div>
-            <div class="gradient-sphere sphere-3"></div>
-          </div>
-          <div class="grid-overlay"></div>
-          <div class="relative z-10">
-            <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
-              พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง?
-            </h2>
-            <p class="text-blue-100 text-lg mb-8 max-w-xl mx-auto">
-              อัปสกิลและรับทักษะที่คุณต้องการเพื่อก้าวหน้าในระดับมืออาชีพ 
-              เปิดประสบการณ์การเรียนรู้รูปแบบใหม่ สมัครเลยวันนี้เพื่อเริ่มต้นเข้าสู่บทเรียน
-            </p>
-            <div class="flex flex-wrap justify-center gap-4">
-              <q-btn 
-                unelevated 
-                rounded 
-                class="px-8 py-4 bg-white font-bold rounded-3xl hover:bg-slate-50 transition-colors"
-                no-caps
-                size="18px"
-                to="/browse"
-              >
-                <div class="text-blue-600">สำรวจคอร์สเรียน</div>
-              </q-btn>
-              <q-btn 
-                outline
-                rounded 
-                label="สมัครฟรีวันนี้" 
-                color="white"
-                class="px-8 py-4 font-bold rounded-3xl hover:bg-white/10 transition-colors"
-                no-caps
-                size="18px"
-                to="/auth/register"
-                v-if="!user"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
   </div>
 </template>
 
+
+
 <style scoped>
 .landing-page {
   font-family: var(--font-main);
@@ -473,6 +419,15 @@ onMounted(() => {
   opacity: 0;
 }
 
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0); }
+  50% { transform: translateY(-20px) rotate(5deg); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
 @keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -482,80 +437,26 @@ onMounted(() => {
   animation: fade-in 1s ease-out forwards;
 }
 
-/* Hero Right Hover State */
-.hero-right:hover .relative {
-    transform: translateY(-10px);
-    transition: transform 0.5s ease;
+/* Typography Overrides */
+h1, h2, h3 {
+  letter-spacing: normal;
 }
 
-.gradient-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  overflow: hidden;
+/* Hover effects */
+.hero-right:hover .animate-float {
+  animation-play-state: paused;
 }
 
-.gradient-sphere {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(60px);
+/* Responsive Grid Adjustments */
+@media (max-width: 1200px) {
+  .career-cards-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 
-.sphere-1 {
-  width: 30vw;
-  height: 30vw;
-  background: linear-gradient(40deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.164));
-  top: 10%;
-  left: -30%;
-  animation: float-1 15s ease-in-out infinite alternate;
-}
-
-.sphere-2 {
-  width: 45vw;
-  height: 45vw;
-  background: linear-gradient(240deg, rgba(16, 33, 121, 0.245), rgba(155, 169, 239, 0.263));
-  bottom: -20%;
-  right: -35%;
-  animation: float-2 18s ease-in-out infinite alternate;
-}
-
-.sphere-3 {
-  width: 30vw;
-  height: 30vw;
-  background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
-  top: 60%;
-  left: 20%;
-  animation: float-3 20s ease-in-out infinite alternate;
-}
-
-@keyframes float-1 {
-  0% { transform: translate(0, 0) scale(1); }
-  100% { transform: translate(10%, 10%) scale(1.1); }
-}
-
-@keyframes float-2 {
-  0% { transform: translate(0, 0) scale(1); }
-  100% { transform: translate(-10%, -5%) scale(1.15); }
-}
-
-@keyframes float-3 {
-  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
-  100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
-}
-
-.grid-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-size: 40px 40px;
-  background-image: 
-      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
-  z-index: 2;
+@media (max-width: 768px) {
+  .career-cards-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>
diff --git a/Frontend-Learner/pages/quiz/[id].vue b/Frontend-Learner/pages/quiz/[id].vue
index 9ef36433..e7d4dae5 100644
--- a/Frontend-Learner/pages/quiz/[id].vue
+++ b/Frontend-Learner/pages/quiz/[id].vue
@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50 p-4 md:p-8">
     <div class="max-w-4xl mx-auto">
       
-      <!-- ส่วนหัว / ชื่อเรื่อง (Header / Title) -->
+      <!-- Header / Title -->
       <div class="mb-6 flex items-center justify-between">
         <div>
           <h1 class="text-2xl font-bold text-gray-800">Quiz Runner</h1>
@@ -16,7 +16,7 @@
 
       <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
         
-        <!-- แถบด้านข้าง: ตัวนำทางคำถาม (Sidebar: Question Navigator) -->
+        <!-- Sidebar: Question Navigator -->
         <div class="lg:col-span-3 order-2 lg:order-1">
           <QCard class="bg-white shadow-sm sticky top-4">
             <QCardSection>
@@ -33,7 +33,7 @@
                 </button>
               </div>
               
-              <!-- คำอธิบายสัญลักษณ์ (Legend) -->
+              <!-- Legend -->
               <div class="mt-6 space-y-2 text-xs text-gray-600">
                 <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-blue-500"></div> Current</div>
                 <div class="flex items-center gap-2"><div class="w-3 h-3 rounded-full bg-green-500"></div> Completed</div>
@@ -44,11 +44,11 @@
           </QCard>
         </div>
 
-        <!-- เนื้อหาหลัก: คำถาม (Main Content: Question) -->
+        <!-- Main Content: Question -->
         <div class="lg:col-span-9 order-1 lg:order-2">
           <QCard v-if="store.currentQuestion" class="bg-white shadow-md min-h-[400px] flex flex-col">
             
-            <!-- ส่วนหัวคำถาม (Question Header) -->
+            <!-- Question Header -->
             <QCardSection class="bg-gray-50 border-b border-gray-100 py-4">
               <div class="flex justify-between items-start">
                 <div>
@@ -57,18 +57,18 @@
                   </QBadge>
                   <h2 class="text-xl font-medium text-gray-800">
                     <span class="text-gray-400 mr-2">{{ store.currentQuestionIndex + 1 }}.</span>
-                    {{ getLocalizedString(store.currentQuestion.question) }}
+                    {{ store.currentQuestion.title }}
                   </h2>
                 </div>
               </div>
             </QCardSection>
 
-            <!-- ส่วนเนื้อหาคำถาม (Question Body) -->
+            <!-- Question Body -->
             <QCardSection class="flex-grow py-8 px-6">
               
-              <!-- เลือกคำตอบเดียว (Single Choice) -->
+              <!-- Single Choice -->
               <div v-if="store.currentQuestion.type === 'single'">
-                <div v-for="opt in store.currentQuestion.choices" :key="opt.id" 
+                <div v-for="opt in store.currentQuestion.options" :key="opt.id" 
                      class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
                      :class="{ 'border-blue-500 bg-blue-50': currentVal === opt.id, 'border-gray-200': currentVal !== opt.id }"
                      @click="handleInput(opt.id)">
@@ -77,14 +77,14 @@
                          :class="{ 'border-blue-500': currentVal === opt.id, 'border-gray-300': currentVal !== opt.id }">
                       <div v-if="currentVal === opt.id" class="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
                     </div>
-                    <span class="text-gray-700">{{ getLocalizedString(opt.text) }}</span>
+                    <span class="text-gray-700">{{ opt.label }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- เลือกหลายคำตอบ (Multiple Choice) -->
+              <!-- Multiple Choice -->
               <div v-else-if="store.currentQuestion.type === 'multiple'">
-                <div v-for="opt in store.currentQuestion.choices" :key="opt.id" 
+                <div v-for="opt in store.currentQuestion.options" :key="opt.id" 
                      class="mb-3 p-3 border rounded-lg hover:bg-blue-50 cursor-pointer transition-colors"
                      :class="{ 'border-blue-500 bg-blue-50': isSelected(opt.id), 'border-gray-200': !isSelected(opt.id) }"
                      @click="toggleSelection(opt.id)">
@@ -93,12 +93,12 @@
                          :class="{ 'border-blue-500 bg-blue-500': isSelected(opt.id), 'border-gray-300': !isSelected(opt.id) }">
                       <QIcon v-if="isSelected(opt.id)" name="check" class="text-white text-xs" />
                     </div>
-                    <span class="text-gray-700">{{ getLocalizedString(opt.text) }}</span>
+                    <span class="text-gray-700">{{ opt.label }}</span>
                   </div>
                 </div>
               </div>
 
-              <!-- พิมพ์ข้อความ (Text Input) -->
+              <!-- Text Input -->
               <div v-else-if="store.currentQuestion.type === 'text'">
                 <QInput
                   v-model="textModel"
@@ -113,7 +113,7 @@
 
             </QCardSection>
 
-            <!-- แบนเนอร์แสดงข้อผิดพลาด (Error Banner) -->
+            <!-- Error Banner -->
             <QBanner v-if="store.lastError" class="bg-red-50 text-red-600 px-6 py-2 border-t border-red-100">
               <template v-slot:avatar>
                 <QIcon name="warning" color="red" />
@@ -121,7 +121,7 @@
               {{ store.lastError }}
             </QBanner>
 
-            <!-- ส่วนท้ายปุ่มกดต่างๆ (Actions Footer) -->
+            <!-- Actions Footer -->
             <QCardSection class="border-t border-gray-100 bg-gray-50 p-4 flex flex-wrap gap-4 items-center justify-between">
               
               <QBtn
@@ -140,7 +140,7 @@
                   flat
                   color="orange-8"
                   label="Skip for now"
-                  @click="store.nextQuestion()"
+                  @click="store.skipQuestion()"
                   no-caps
                 />
 
@@ -178,11 +178,11 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, watch, reactive } from 'vue';
 import { useRoute } from 'vue-router';
-// คอมโพสิเบิลถูกนำเข้าอัตโนมัติใน Nuxt (Composable is auto-imported in Nuxt)
+// Composable is auto-imported in Nuxt
 // import { useQuizRunner } from '@/composables/useQuizRunner'; 
 
 const route = useRoute();
-// ห่อหุ้มใน reactive เพื่อแกะค่า refs ทำให้เหมือนพฤติกรรม Pinia store สำหรับ template (Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template)
+// Wrap in reactive to unwrap refs, mimicking Pinia store behavior for template
 const store = reactive(useQuizRunner());
 
 onMounted(() => {
@@ -190,16 +190,7 @@ onMounted(() => {
   store.initQuiz(quizId);
 });
 
-// -- ตัวช่วยสำหรับการจัดการการป้อนข้อมูล (Helpers for Input Handling) --
-
-// ฟังก์ชันช่วยเหลือสำหรับแปลภาษา (Helper to safely format text)
-const getLocalizedString = (val: any): string => {
-  if (typeof val === 'string') return val;
-  if (val && typeof val === 'object') {
-    return val.th || val.en || String(val);
-  }
-  return String(val || '');
-}
+// -- Helpers for Input Handling --
 
 const currentVal = computed(() => {
   return store.currentAnswer?.value;
@@ -209,23 +200,23 @@ const isSaved = computed(() => {
   return store.currentAnswer?.is_saved;
 });
 
-// เลือกคำตอบเดียว (Single Choice)
-function handleInput(val: number) {
+// Single Choice
+function handleInput(val: string) {
   store.updateAnswer(val);
 }
 
-// พิมพ์ข้อความ (Text Choice)
+// Text Choice
 const textModel = ref('');
-// จับตาดูการเปลี่ยนแปลงคำถามเพื่อล้างค่า (Watch for question changes to reset text model)
+// Watch for question changes to reset text model
 watch(
   () => store.currentQuestionIndex,
   () => {
     if (store.currentQuestion?.type === 'text') {
        textModel.value = (store.currentAnswer?.value as string) || '';
     }
-    // ล้างข้อผิดพลาดเมื่อเปลี่ยนคำถาม (Clear error when changing question)
+    // Clear error when changing question
     store.lastError = null;
-    // เลื่อนหน้าจอขึ้นบนสุด (Scroll to top)
+    // Scroll to top
     if (typeof window !== 'undefined') {
        window.scrollTo({ top: 0, behavior: 'smooth' });
     }
@@ -233,7 +224,7 @@ watch(
   { immediate: true }
 );
 
-// จับตาดูข้อผิดพลาดเพื่อเลื่อนหน้าจอไปยังฟิลด์นั้น (Watch for error to scroll to error/field)
+// Watch for error to scroll to error/field
 watch(
   () => store.lastError,
   (newVal) => {
@@ -254,8 +245,8 @@ function handleTextInput(val: string | number | null) {
   store.updateAnswer(val as string);
 }
 
-// เลือกหลายคำตอบ (Multiple Choice)
-function isSelected(id: number) {
+// Multiple Choice
+function isSelected(id: string) {
   const val = store.currentAnswer?.value;
   if (Array.isArray(val)) {
     return val.includes(id);
@@ -263,9 +254,9 @@ function isSelected(id: number) {
   return false;
 }
 
-function toggleSelection(id: number) {
+function toggleSelection(id: string) {
   const val = store.currentAnswer?.value;
-  let currentArr: number[] = [];
+  let currentArr: string[] = [];
   if (Array.isArray(val)) {
     currentArr = [...val];
   }
@@ -279,10 +270,10 @@ function toggleSelection(id: number) {
   store.updateAnswer(currentArr);
 }
 
-// -- ตัวช่วยสำหรับการจัดแต่งทรง (Helpers for Styling) --
+// -- Helpers for Styling --
 
 function getIndicatorClass(index: number, qId: number) {
-  // 1. ปัจจุบัน = สีน้ำเงิน (Current = Blue)
+  // 1. Current = Blue
   if (index === store.currentQuestionIndex) {
     return 'bg-blue-500 text-white border-blue-600';
   }
@@ -295,8 +286,7 @@ function getIndicatorClass(index: number, qId: number) {
     case 'skipped':
       return 'bg-orange-500 text-white border-orange-600';
     case 'in_progress':
-      // กรณีที่เป็น in_progress แต่ไม่ใช่คำถามปัจจุบัน (จริงๆ เกิดยากตามตรรกะที่เข้มงวด แต่เผื่อไว้ก่อน) 
-      // (If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled))
+      // If it's in_progress but NOT current (should be rare/impossible with strict logic, but handled)
       return 'bg-blue-200 text-blue-800 border-blue-300'; 
     case 'not_started':
     default:
@@ -307,5 +297,5 @@ function getIndicatorClass(index: number, qId: number) {
 </script>
 
 <style scoped>
-/* ส่วนเสริม: ทรานสิชั่น (Optional: Transitions) */
+/* Optional: Transitions */
 </style>
diff --git a/Frontend-Learner/pages/reset-password.vue b/Frontend-Learner/pages/reset-password.vue
index 5897c7f4..79ebdfef 100644
--- a/Frontend-Learner/pages/reset-password.vue
+++ b/Frontend-Learner/pages/reset-password.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * @file reset-password.vue
- * @description หน้าตั้งรหัสผ่านใหม่ (Reset Password Page.
- * อนุญาตให้ผู้ใช้ตั้งรหัสผ่านใหม่หลังจากยืนยันลิงก์อีเมล)
+ * @description Reset Password Page.
+ * Allows user to set a new password after verifying their email link (simulated).
  */
 
 definePageMeta({
@@ -44,9 +44,9 @@ const handlePasswordInput = (field: keyof typeof resetForm, val: string) => {
   resetForm[field] = val
   if (/[\u0E00-\u0E7F]/.test(val)) {
     if (field === 'password') errors.value.password = 'ห้ามใส่ภาษาไทย'
-    // ไม่จำเป็นต้องแจ้งเตือน confirmPassword แยกต่างหากถ้ามันแค่ต้องตรงกัน แต่เพื่อให้สอดคล้องกันเราก็ควรทำ (We don't necessarily need to flag confirmPassword individually if it just needs to match, but let's be consistent if we want)
+    // We don't necessarily need to flag confirmPassword individually if it just needs to match, but let's be consistent if we want
   } else {
-    // ลบข้อผิดพลาดถ้าเป็น "ห้ามใส่ภาษาไทย" (Clear error if it was "Thai characters")
+    // Clear error if it was "Thai characters"
     if (field === 'password' && errors.value.password === 'ห้ามใส่ภาษาไทย') {
       clearFieldError('password')
     }
@@ -63,7 +63,7 @@ onMounted(() => {
 const resetPassword = async () => {
   if (!validate(resetForm, resetRules)) return
   
-  // ดึงโทเคนจาก URL query (Extract token from query)
+  // Extract token from query
   const token = route.query.token as string
 
   if (!token) {
@@ -92,7 +92,7 @@ const resetPassword = async () => {
 <template>
   <div class="relative min-h-screen w-full flex items-center justify-center p-4 overflow-hidden bg-slate-50 transition-colors">
     <!-- ==========================================
-          เอฟเฟกต์พื้นหลัง (แสดงเฉพาะโหมดสว่าง) (BACKGROUND EFFECTS (Light Mode Only))
+          BACKGROUND EFFECTS (Light Mode Only)
      ========================================== -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
        <div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50 to-blue-50/50"></div>
@@ -101,11 +101,11 @@ const resetPassword = async () => {
     </div>
 
     <!-- ==========================================
-          การ์ดตั้งรหัสผ่านใหม่ (RESET PASSWORD CARD)
+          RESET PASSWORD CARD
      ========================================== -->
     <div class="w-full max-w-[460px] relative z-10 slide-up">
       
-       <!-- หัวข้อ / โลโก้ (Header / Logo) -->
+       <!-- Header / Logo -->
        <div class="text-center mb-8">
           <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
              <span class="font-black text-2xl">E</span>
@@ -116,10 +116,10 @@ const resetPassword = async () => {
 
       <div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
         
-        <!-- ฟอร์ม (Form) -->
+        <!-- Form -->
         <form @submit.prevent="resetPassword" class="flex flex-col gap-6">
           
-          <!-- รหัสผ่านใหม่ (New Password) -->
+          <!-- New Password -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">รหัสผ่านใหม่ <span class="text-red-500">*</span></label>
             <div class="relative group">
@@ -145,7 +145,7 @@ const resetPassword = async () => {
             <span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
           </div>
 
-          <!-- ยืนยันรหัสผ่านใหม่ (Confirm Password) -->
+          <!-- Confirm Password -->
           <div>
             <label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">ยืนยันรหัสผ่านใหม่ <span class="text-red-500">*</span></label>
             <div class="relative group">
@@ -171,7 +171,7 @@ const resetPassword = async () => {
             <span v-if="errors.confirmPassword" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.confirmPassword }}</span>
           </div>
 
-          <!-- ปุ่มยืนยัน (Submit Button) -->
+          <!-- Submit Button -->
           <button 
             type="submit" 
             :disabled="isLoading"
@@ -183,7 +183,7 @@ const resetPassword = async () => {
         </form>
       </div>
 
-      <!-- ลิงก์ย้อนกลับ (Back Link) -->
+      <!-- Back Link -->
        <div class="mt-8 text-center text-slate-500">
            <NuxtLink to="/auth/login" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
              <span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าเข้าสู่ระบบ
diff --git a/Frontend-Learner/pages/verify-email.vue b/Frontend-Learner/pages/verify-email.vue
index 5976eb8f..31b513a1 100644
--- a/Frontend-Learner/pages/verify-email.vue
+++ b/Frontend-Learner/pages/verify-email.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 /**
  * @file verify-email.vue
- * @description หน้าสำหรับกระบวนการยืนยันอีเมล (Page for handling email verification process.
- * แสดงสถานะกำลังโหลดระหว่างประมวลผลโทเคน จากนั้นแสดงข้อความสำเร็จหรือข้อผิดพลาด)
+ * @description Page for handling email verification process.
+ * Displays loading state while processing token, then shows success or error message.
  */
 
 definePageMeta({
-  layout: 'auth'
+  layout: 'default'
 })
 
 const route = useRoute()
@@ -28,7 +28,7 @@ onMounted(async () => {
         return
     }
 
-    // เรียกใช้ API เพื่อยืนยัน (Call verify API)
+    // Call verify API
     const result = await verifyEmail(token)
     
     isLoading.value = false
@@ -39,7 +39,7 @@ onMounted(async () => {
         isSuccess.value = false
         if (result.code === 400) {
              errorMessage.value = t('profile.emailAlreadyVerified')
-             // หากยืนยันแล้วให้แสดงสถานะสำเร็จพร้อมด้วยข้อความเฉพาะ (If already verified, show success state with specific message)
+             // If already verified, show success state with specific message
              isSuccess.value = true 
         } else if (result.code === 401) {
             errorMessage.value = t('auth.tokenExpired')
@@ -58,7 +58,7 @@ const navigateToHome = () => {
   <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-[#0f172a]">
     <div class="auth-card max-w-md w-full space-y-8 p-8 rounded-2xl text-center">
       
-      <!-- สถานะกำลังโหลด (Loading State) -->
+      <!-- Loading State -->
       <div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
         <q-spinner-dots size="4rem" color="primary" />
         <h2 class="mt-6 text-xl font-bold text-slate-900 dark:text-white animate-pulse">
@@ -66,10 +66,10 @@ const navigateToHome = () => {
         </h2>
       </div>
 
-      <!-- สถานะสำเร็จ (Success State) -->
+      <!-- Success State -->
       <div v-else-if="isSuccess" class="flex flex-col items-center animate-bounce-in">
-        <div class="w-24 h-24 rounded-full bg-green-500 flex items-center justify-center mb-10 shadow-lg shadow-green-500/20">
-           <q-icon name="check" class="text-5xl text-white font-black" />
+        <div class="w-24 h-24 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-6">
+           <q-icon name="check_circle" class="text-6xl text-green-500" />
         </div>
         
         <h2 class="text-3xl font-black text-slate-900 dark:text-white mb-2">
@@ -89,7 +89,7 @@ const navigateToHome = () => {
         />
       </div>
 
-      <!-- สถานะข้อผิดพลาด (Error State) -->
+      <!-- Error State -->
       <div v-else class="flex flex-col items-center animate-shake">
          <div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-6">
            <q-icon name="error" class="text-6xl text-red-500" />
@@ -126,15 +126,11 @@ const navigateToHome = () => {
 }
 
 .auth-card {
-  background-color: white;
-  border-color: #f1f5f9;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  @apply bg-white border-slate-100 shadow-xl;
   border-width: 1px;
 }
-:global(.dark) .auth-card {
-  background-color: #1e293b;
-  border-color: rgba(255, 255, 255, 0.05);
-  box-shadow: none;
+.dark .auth-card {
+  @apply bg-[#1e293b] border-white/5 shadow-none;
 }
 
 @keyframes bounceIn {
diff --git a/Frontend-Learner/types/auth.ts b/Frontend-Learner/types/auth.ts
deleted file mode 100644
index 22f07190..00000000
--- a/Frontend-Learner/types/auth.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * @file auth.ts
- * @description Type definitions for authentication and user profiles.
- */
-
-export interface User {
-  id: number
-  username: string
-  email: string
-  email_verified_at?: string | null
-  created_at?: string
-  updated_at?: string
-  role: {
-    code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN'
-    name: { th: string; en: string }
-  }
-  profile?: {
-    prefix: { th: string; en: string }
-    first_name: string
-    last_name: string
-    phone: string | null
-    avatar_url: string | null
-  }
-}
-
-export interface LoginResponse {
-  token: string
-  refreshToken: string
-  user: User
-  profile: User['profile']
-}
-
-export interface RegisterPayload {
-  username: string
-  email: string
-  password: string
-  first_name: string
-  last_name: string
-  prefix: { th: string; en: string }
-  phone: string
-}
diff --git a/Frontend-Learner/types/course.ts b/Frontend-Learner/types/course.ts
deleted file mode 100644
index 44e4d0a5..00000000
--- a/Frontend-Learner/types/course.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * @file course.ts
- * @description Type definitions for courses, enrollments, quizzes, and certificates.
- */
-
-export interface Course {
-  id: number
-  title: string | { th: string; en: string }
-  slug: string
-  description: string | { th: string; en: string }
-  thumbnail_url: string
-  price: string
-  is_free: boolean
-  original_price?: string
-  have_certificate: boolean
-  status: string
-  category_id: number
-  created_at?: string
-  updated_at?: string
-  created_by?: number
-  updated_by?: number
-  approved_at?: string
-  approved_by?: number
-  rejection_reason?: string
-  enrolled?: boolean
-  total_lessons?: number
-  rating?: string
-  lessons?: number | string
-  levelType?: 'neutral' | 'warning' | 'success'
-  chapters?: {
-    id: number
-    title: string | { th: string; en: string }
-    lessons: {
-      id: number
-      title: string | { th: string; en: string }
-      duration_minutes: number
-      video_url?: string
-    }[]
-  }[]
-  creator?: {
-    id: number
-    username: string
-    email: string
-    profile: {
-      first_name: string
-      last_name: string
-      avatar_url: string
-    }
-  }
-  instructors?: {
-    user_id: number
-    is_primary: boolean
-    user: {
-      id: number
-      username: string
-      email: string
-      profile: {
-        first_name: string
-        last_name: string
-        avatar_url: string
-      }
-    }
-  }[]
-}
-
-export interface CourseResponse {
-  code: number
-  message: string
-  data: Course[]
-  total: number
-  page?: number
-  limit?: number
-  totalPages?: number
-}
-
-export interface SingleCourseResponse {
-  code: number
-  message: string
-  data: Course
-}
-
-export interface EnrolledCourse {
-  id: number
-  course_id: number
-  course: Course
-  status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED'
-  progress_percentage: number
-  enrolled_at: string
-  started_at?: string
-  completed_at?: string
-  last_accessed_at?: string
-}
-
-export interface EnrolledCourseResponse {
-  code: number
-  message: string
-  data: EnrolledCourse[]
-  total: number
-  page: number
-  limit: number
-}
-
-export interface QuizAnswerSubmission {
-  question_id: number
-  choice_id: number
-}
-
-export interface QuizSubmitRequest {
-  answers: QuizAnswerSubmission[]
-}
-
-export interface QuizResult {
-  answers_review: {
-    score: number
-    is_correct: boolean
-    correct_choice_id: number
-    selected_choice_id: number
-    question_id: number
-  }[]
-  completed_at: string
-  started_at: string
-  attempt_number: number
-  passing_score: number
-  is_passed: boolean
-  correct_answers: number
-  total_questions: number
-  total_score: number
-  score: number
-  quiz_id: number
-  attempt_id: number
-}
-
-export interface Certificate {
-  certificate_id: number
-  course_id: number
-  course_title: {
-    en: string
-    th: string
-  }
-  issued_at: string
-  download_url: string
-}
diff --git a/Frontend-Learner/types/index.ts b/Frontend-Learner/types/index.ts
deleted file mode 100644
index 0f2701d3..00000000
--- a/Frontend-Learner/types/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './auth'
-export * from './course'
diff --git a/Frontend-Learner/คู่มืออธิบาย/ED.md b/Frontend-Learner/คู่มืออธิบาย/ED.md
new file mode 100644
index 00000000..5727dde2
--- /dev/null
+++ b/Frontend-Learner/คู่มืออธิบาย/ED.md
@@ -0,0 +1,71 @@
+วันที่บันทึกปฏิบัติงาน \*
+18/02/2026
+
+องค์ความรู้ที่ได้รับ \*
+
+- การใช้งาน Nuxt 3 Routing (useRoute, useRouter) ในการจัดการ Query Parameters
+- การเชื่อมโยง State กับ URL เพื่อสร้าง Deep Linking ให้แชร์ลิงก์หมวดหมู่ได้
+- การใช้งาน Vue 3 Composition API (Script Setup) แทน Options API เพื่อความเป็นระเบียบและลดความซับซ้อน
+- การตกแต่ง UI ด้วย Tailwind CSS ขั้นสูง (Gradients, Glow Effects, Backdrop Filters) เพื่อให้ได้ธีม Premium/Clean
+- การจัดการ Event Listener ใน Vue Component (onMounted, onUnmounted) เพื่อป้องกัน Memory Leak
+
+รายละเอียด \*
+
+- พัฒนาระบบ Filter หมวดหมู่คอร์สเรียน เชื่อมโยงหน้าแรก (Home) กับหน้าค้นหา (Browse)
+- ปรับแก้โครงสร้าง Code ในหน้า `index.vue` ให้ใช้ Script Setup ทั้งหมดเพื่อลดความซับซ้อนและแก้ปัญหาการเรียกใช้ตัวแปร
+- ปรับดีไซน์ส่วน Call to Action (CTA) ในหน้า `browse/index.vue` และ `browse/recommended.vue` ให้ดูสว่างและทันสมัยขึ้นโดยใช้แสงและเงา (Blue Glow)
+
+ปัญหาและอุปสรรค \*
+
+- พบปัญหาการทำงานร่วมกันระหว่าง Options API และ Script Setup ในไฟล์ `index.vue` ทำให้ฟังก์ชันบางตัวเรียกใช้ไม่ได้
+- ระบบ Filter เดิมไม่ทำงานเมื่อกดย้อนกลับ (Back Button) เนื่องจากไม่ได้ Watch การเปลี่ยนแปลงของ URL Query
+- การดึงข้อมูลคอร์สเริ่มต้นได้ไม่ครบเนื่องจาก API มีการกำหนด Limit ไว้
+
+รายละเอียด \*
+
+- แก้ไขโดยการยุบรวม Code ทั้งหมดให้เป็นรูปแบบ Script Setup มาตรฐานเดียว
+- เพิ่ม `watch(() => route.query.category)` ในหน้า Browse เพื่อให้อัปเดตข้อมูลทุกครั้งที่ URL เปลี่ยน
+- เพิ่มพารามิเตอร์ `limit: 1000` ในการเรียก API เพื่อดึงข้อมูลคอร์สทั้งหมดมาแสดง
+
+หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.)
+
+- แก้ไขไฟล์ `pages/index.vue` (เพิ่ม goBrowse, ย้าย Logic)
+- แก้ไขไฟล์ `pages/browse/index.vue` (เพิ่ม Query Watcher, ปรับ UI)
+- แก้ไขไฟล์ `pages/browse/recommended.vue` (ปรับ UI ส่วน CTA)
+- แก้ไขไฟล์ `components/layout/LandingHeader.vue` (แก้ Memory Leak)
+
+---
+
+วันที่บันทึกปฏิบัติงาน \*
+19/02/2026
+
+องค์ความรู้ที่ได้รับ \*
+
+- การออกแบบ Dashboard Layout แบบ Modern Grid (SkillLane Style/Reference Style)
+- การใช้ `q-carousel` (Quasar) ทำ Image Slider แบนเนอร์ประชาสัมพันธ์
+- การจัดการแสดงผลข้อมูล Course Card แยกตามสถานะ (Enrolled/Recommended/Free)
+- การปรับแต่ง Menu Navigation (`useNavItems`) เพื่อลดความซ้ำซ้อนใน Sidebar
+
+รายละเอียด \*
+
+- ออกแบบและพัฒนาหน้า Dashboard ใหม่ (`pages/dashboard/index.vue`)
+  1. เพิ่ม Banner Slide ขนาดใหญ่ด้านบน
+  2. แสดงรายการ "คอร์สที่คุณกำลังเรียน" (In Progress Courses) พร้อม Progress Bar
+  3. แสดงรายการ "คอร์สแนะนำ" (Recommended Courses)
+  4. เพิ่มหมวด "คอร์สฟรี" (Free Courses)
+- ปรับแต่ง Sidebar Navigation (`composables/useNavItems.ts`) ลบเมนูที่ไม่จำเป็นออก (Online Courses, Recommended, Announcements) ให้เหลือเฉพาะเมนูหลัก
+
+ปัญหาและอุปสรรค \*
+
+- การแสดงผล Carousel มีปุ่ม Arrows เกะกะสายตาบนแบนเนอร์
+- ต้องการแยกข้อมูลคอร์สฟรีออกจากคอร์สทั่วไป แต่ API ยังไม่มี Filter โดยตรง
+
+รายละเอียด \*
+
+- แก้ไข Property ของ `q-carousel` โดยลบ `arrows` ออก เพื่อให้เหลือเฉพาะ Navigation Dots ด้านล่าง
+- เขียน Logic กรองข้อมูลฝั่ง Client (Client-side filtering) สำหรับคอร์สฟรี โดยตรวจสอบจาก `price === 0` หรือ `is_free: true`
+
+หลักฐานการปฏิบัติงาน (เฉพาะไฟล์ JPG, JPEG, PNG, PDF.)
+
+- แก้ไขไฟล์ `pages/dashboard/index.vue` (New Dashboard UI)
+- แก้ไขไฟล์ `composables/useNavItems.ts` (Clean Sidebar)
diff --git a/Frontend-Learner/คู่มืออธิบาย/summary.md b/Frontend-Learner/คู่มืออธิบาย/summary.md
deleted file mode 100644
index a0d18e58..00000000
--- a/Frontend-Learner/คู่มืออธิบาย/summary.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# สรุปโครงสร้างและหน้าที่ของไฟล์ (File Architecture Summary)
-
-เอกสารนี้สรุปภาพรวมของแต่ละโฟลเดอร์และไฟล์หลักในระบบ Frontend-Learner ว่าแต่ละไฟล์ทำหน้าที่อะไร และมีการเชื่อมโยง (Dependencies) กันอย่างไร
-
----
-
-## 1. 📂 หน้าจอหลัก (Pages Directory: `pages/`)
-
-ควบคุมการทำงานและการนำทาง (Routing) ของผู้ใช้งานแต่ละหน้า โดยจะเรียกใช้ `components/` และ `composables/` มาทำงานร่วมกัน
-
-- **`pages/index.vue` (หน้า Landing Page):**
-  - **หน้าที่:** หน้าแรกสุดของระบบสำหรับผู้เยี่ยมชม (Guest) นำเสนอคอร์สเด่นและจุดเด่นของระบบ
-  - **การเชื่อมโยง:** ใช้ Layout `landing`, เชื่อมต่อ `useCourse`, `useCategory` และ components เช่น `CourseCard`, `LandingHeader`, `LandingFooter`
-- **`pages/auth/` (กลุ่มหน้าเข้าสู่ระบบและสมัครสมาชิก):**
-  - **`login.vue`:** หน้าเข้าสู่ระบบ (เชื่อม `useAuth` -> `login()`)
-  - **`register.vue`:** หน้าลงทะเบียนผู้ใช้ใหม่ (เชื่อม `useAuth` -> `register()`)
-  - **`forgot-password.vue`:** หน้าลืมรหัสผ่าน
-  - **การเชื่อมโยง:** กลุ่มนี้ใช้ Layout `auth` และ `useFormValidation` เพื่อตรวจสอบฟอร์ม
-- **`pages/dashboard/` (กลุ่มหน้าแผงควบคุมหลักของผู้ใช้):**
-  - **`index.vue`:** หน้า Dashboard หลัก แสดงคอร์สที่กำลังเรียนและคอร์สแนะนำ
-  - **`my-courses.vue`:** หน้าแสดงคอร์สทั้งหมดที่ผู้เรียนลงทะเบียนแล้ว
-  - **`profile.vue`:** หน้าจัดการข้อมูลส่วนตัวของผู้ใช้งาน
-  - **`announcements.vue`:** หน้าแสดงประกาศระบบและประกาศจากคอร์ส
-  - **การเชื่อมโยง:** ใช้ Layout `default`, เชื่อม `useAuth`, `useCourse`, และ components โซน `layout/` กับ `course/`
-- **`pages/classroom/` (กลุ่มหน้าห้องเรียนเมื่อเข้าสู่คอร์ส):**
-  - **`learning.vue`:** หน้าจอหลักของการเรียน (มี Video Player เนื้อหาบทเรียน และคอมเมนต์) ควบคุมสถานะความคืบหน้า (Progress)
-  - **`quiz.vue`:** หน้า Landing ก่อนเริ่มทำแบบทดสอบ แสดงรายละเอียดและสถิติ
-  - **การเชื่อมโยง:** เชี่อมต่อ `useCourse`, `useQuizRunner` และเรียกใช้คอมโพเนนต์กลุ่ม `classroom/`
-- **`pages/quiz/[id].vue` (หน้าจอขณะทำข้อสอบ):**
-  - **หน้าที่:** นำเสนอตัวคำถามแบบ Interactive และตัวเลือกการตอบ (ข้อความ, ตัวเลือกเดี่ยว, หลายตัวเลือก)
-  - **การเชื่อมโยง:** เชื่อมกับตัวจัดการสถานะ `useQuizRunner` หนักที่สุด
-- **`pages/course/[id].vue` (หน้ารายละเอียดคอร์สก่อนซื้อ/ลงทะเบียน):**
-  - **การเชื่อมโยง:** เชื่อมต้อ `useCourse` เพื่อดึงรายละเอียดแบบ SSR (Server-Side Rendering)
-
----
-
-## 2. 🧩 ตัวจัดการตรรกะและข้อมูล (Composables Directory: `composables/`)
-
-เปรียบเสมือน "สมอง" ของระบบ แยกการจัดการข้อมูล (State) และการเรียก API (Fetch) ออกจากหน้าจอ (UI)
-
-- **`useAuth.ts`:**
-  - **หน้าที่:** จัดการ Login, Register, Logout, ระบบ Token (Access & Refresh), ดึง Data ของผู้ใช้
-  - **ถูกเรียกใช้โดย:** แทบทุกหน้าจอและ `middleware/auth.ts`
-- **`useCourse.ts`:**
-  - **หน้าที่:** ศูนย์รวม API คอร์สเรียน (ดึงรายการคอร์ส, รายละเอียด, รายชื่อบทเรียน, การลงทะเบียน, ส่งความคืบหน้า, โหลดหน้าวิดีโอ)
-  - **ถูกเรียกใช้โดย:** `pages/dashboard/`, `pages/classroom/`, `pages/course/` และคอมโพเนนต์ที่แสดงรายการคอร์ส
-- **`useQuizRunner.ts`:**
-  - **หน้าที่:** จัดการสถานะข้อสอบขณะรัน (Current Question), เก็บคำตอบ, ข้ามคำถาม, บันทึกส่งคะแนนเมื่อจบเกม
-  - **ถูกเรียกใช้โดย:** `pages/quiz/[id].vue` และ `pages/classroom/quiz.vue`
-- **`useCategory.ts`:** ดึงหมวดหมู่หลักสูตร นำไปใช้ทำ Filter ใน `index.vue` และ `my-courses.vue`
-- **`useThemeMode.ts`:** จัดการโหมดสว่าง-มืด (Dark/Light mode) บันทึกและซิงค์กับ LocalStorage
-- **`useFormValidation.ts`:** ดักจับ Error และ Validate กฎ (Rules) ต่างๆ ในฟอร์มรหัสผ่าน, สมัครสมาชิก
-- **`useNavItems.ts`:** จัดการรายการเมนูด้านซ้าย (Sidebar Links) เปลี่ยนเมนูตาม Role อัตโนมัติ
-
----
-
-## 3. 📦 คอมโพเนนต์หน้าจอ (Components Directory: `components/`)
-
-ส่วนประกอบของ UI ที่สามารถนำไปใช้ซ้ำได้ (Reusable) เพื่อลดความซ้ำซ้อนในโค้ดฝั่งหน้าจอ
-
-- **`layout/`:**
-  - **`AppHeader.vue` & `AppSidebar.vue`:** ประกอบร่างเป็นเมนูและส่วนหัวของ Layout `default`
-  - **`LandingHeader.vue` & `LandingFooter.vue`:** เมนูส่วนหน้าของเว็บ Guest
-- **`classroom/`:**
-  - **`VideoPlayer.vue`:** ตัวเล่นวิดีโออัจฉริยะ (จัดการ Youtube API และ Native Video) ส่งเวลาดูคืนหน้า `learning.vue` เสมอ
-  - **`CurriculumSidebar.vue`:** แถบขวาในห้องเรียนเพื่อกดเปลี่ยนบทเรียน แสดงสถานะล็อก/ผ่าน/กำลังเรียน
-  - **`AnnouncementModal.vue`:** เด้ง Pop-up แจ้งข่าวสารในคอร์สเรียน
-- **`course/`:**
-  - **`CourseCard.vue`:** การ์ดสี่เหลี่ยมแสดงหน้าปกคอร์ส (ถูกใช้ใน `index.vue` และ `my-courses.vue`)
-- **`profile/`:**
-  - แบบฟอร์มแก้ไขแยกย่อยของหน้า `profile.vue` เช่น ฟอร์มเปลี่ยนรหัส (`PasswordChangeForm`)
-- **`common/`:**
-  - คอมโพเนนต์จิปาถะทั่วไปที่ใช้ทุกที่ เช่น สวิตช์เปลี่ยนภาษา (`LanguageSwitcher`) สปินเนอร์โหลดของระบบ (`GlobalLoader.vue`)
-
----
-
-## 4. 🖼 โครงสร้างเลย์เอาต์ (Layouts Directory: `layouts/`)
-
-เป็นตัวคลุม (Wrapper) พื้นโครงสร้างเว็บของหน้าจอนั้นๆ ไม่ให้กระตุกเมื่อเปลี่ยนเนื้อหา
-
-- **`default.vue`:** เลย์เอาต์หลัก มี Header และ Sidebar ใช้สำหรับ Dashboard
-- **`auth.vue`:** เลย์เอาต์เรียบง่ายตรงกลางจอ มีพื้นหลังเบลอๆ สำหรับหน้า Login/Register
-- **`landing.vue`:** เลย์เอาต์สำหรับหน้า `index.vue` เต็มจอแบบ Modern นำเสนอผลิตภัณฑ์
-- **`dashboard.vue`:** เลย์เอาต์สำหรับมุมมอง Dashboard บางชนิด (ขึ้นอยู่กับโปรเจกต์)
-
----
-
-## 5. 🛡 ตัวกรองหน้าและยามรักษาความปลอดภัย (Middleware: `middleware/`)
-
-- **`auth.ts`:** ตรวจสอบผู้ใช้ก่อนเข้าหน้าใดๆ เสมอ (Route Guard)
-  - ถ้ายังไม่ Login จะถูกดีดไปหน้า `/auth/login`
-  - ถ้าจะเข้าหน้า Login แต่มี Token ล็อกอินแล้ว จะผลักกลับไปหน้า `/dashboard`
-  - มันจะพึ่งพา Token ที่จัดการผ่าน `useAuth`
-
----
-
-### ภาพรวมการหมุนเวียนข้อมูล (Data Flow Example)
-
-1. **ล็อกอิน:** หน้า `login.vue` กดยืนยัน -> เรียก `useAuth.login()` -> ได้ Token และ Role ยัดลง Local Cache (Cookie)
-2. **เข้าห้องเรียน:** หน้า `index.vue` กดคอร์ส -> ส่งเข้า `middleware/auth.ts` เช็คผ่านเข้าหน้าเรียน -> `pages/course/[id].vue` เรียก `useCourse.fetchCourseById(id)` -> ส่งข้อมูลให้ UI
-3. **เปิดคลิปเรียน:** `learning.vue` ส่ง URL ให้ `<VideoPlayer />` เล่น
-4. **บันทึกเวลาเรียน:** `VideoPlayer` เฝ้าดูเวลา (TimeUpdate) -> รายงานตัวเลขกลับมายังฟังก์ชัน `handleVideoTimeUpdate()` ที่อยู่ใน `learning.vue` -> เรียก `useCourse.saveVideoProgress()` ส่ง API กลับ Database
diff --git a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
index f2832622..fba0cc4e 100644
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@@ -1,180 +1,187 @@
-# Frontend-Learner (Web) — Technical Documentation
+# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
 
-เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner (ฝั่งผู้เรียน)**  
-ใช้เป็นคู่มือสำหรับการพัฒนา บำรุงรักษา และขยายระบบต่อไป
-
-> อัปเดตล่าสุด: 27 กุมภาพันธ์ 2026 (อัปเดตคอมเมนต์ภาษาไทย & แก้ไข TypeScript)
+เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)
 
 ---
 
-## Table of Contents
+##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       z️ 1. Technical Foundation (รากฐานทางเทคนิค)
 
-- [1. Technical Foundation](#1-technical-foundation)
-  - [1.1 Tech Stack](#11-tech-stack)
-  - [1.2 Security & Authentication](#12-security--authentication)
-- [2. Project Architecture](#2-project-architecture)
-  - [2.1 Directory Structure](#21-directory-structure)
-  - [2.2 Shared Infrastructure](#22-shared-infrastructure)
-- [3. Logic & Data Layer (Composables)](#3-logic--data-layer-composables)
-- [4. Branding & UI Policy](#4-branding--ui-policy)
-  - [4.1 Theme Strategy](#41-theme-strategy)
-  - [4.2 UI Elements](#42-ui-elements)
-- [5. Core Feature Highlights](#5-core-feature-highlights)
-- [6. Maintenance & Performance Guidelines](#6-maintenance--performance-guidelines)
-
----
-
-## 1. Technical Foundation
-
-รากฐานทางเทคนิคที่ขับเคลื่อนระบบ เพื่อให้ได้ประสิทธิภาพและความเสถียรสูงสุด
+รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
 
 ### 1.1 Tech Stack
 
-- **Framework:** Nuxt 3 (Vue 3, Vite, SSR/SPA Hybrid)
-- **UI System:** Quasar Framework + Tailwind CSS (Utility-first)
-- **Typography:** Google Fonts (**Prompt** เป็น Font หลักเพื่อความทันสมัยและอ่านง่าย)
-- **Multilingual:** `@nuxtjs/i18n` (รองรับ JSON-based locales ภาษาไทยและอังกฤษ)
-- **Programming:** TypeScript (Strict Type Checking)
+- **Core:** [Nuxt 3](https://nuxt.com) (v`^3.11.2`), TypeScript `^5.4.5`
+- **UI Framework:** Quasar Framework `^2.15.2` (via `nuxt-quasar-ui ^3.0.0`)
+- **Styling:** Tailwind CSS `^6.12.0` (Utility) + Vanilla CSS Variables (Theming/Dark Mode)
+- **State Management:** `ref`/`reactive` (Local) + `useState` (Global/Shared State)
+- **Localization:** `@nuxtjs/i18n` (Supports JSON locales in `i18n/locales/`)
+- **Media Control:** `useMediaPrefs` (Command Pattern for global volume/mute state)
 
-### 1.2 Security & Authentication
+### 1.2 Core Systems & Security
 
-- **Token Management:** ใช้ JWT (Access & Refresh Tokens) จัดเก็บผ่าน `useCookie`  
-  โดยตั้งค่าความปลอดภัยระดับ **HTTP-only** และ **SameSite**
-- **Middleware:** `auth.ts` ตรวจสอบสิทธิ์การเข้าถึงหน้า Dashboard และ Classroom แบบ Real-time
-- **Persistence:** ระบบ Remember Me (จดจำอีเมล) ใช้ `localStorage` แยกส่วนจาก Session  
-  เพื่อความปลอดภัยและสะดวกสำหรับผู้ใช้
+- **Authentication:**
+  - ใช้ **JWT** (Access Token 1 วัน, Refresh Token 7 วัน)
+  - เก็บ Token ใน `useCookie` (Secure, SameSite)
+  - Middleware (`middleware/auth.ts`) ป้องกัน Route ตามสถานะ
+  - **Remember Me:** ระบบจดจำอีเมลลงใน `localStorage` (จำแยกจาก session, ไม่ถูกลบเมื่อ Logout)
+- **API Handling:**
+  - ใช้ `runtimeConfig.public.apiBase` เชื่องโยง Backend
+  - Auto-attach Bearer Token ใน `useAuth` และ `useCourse`
+- **Performance:**
+  - **Hybrid Progress Saving:** บันทึกเวลาเรียนลง LocalStorage (ถี่) และ Server (Throttle 15s) เพื่อความแม่นยำสูงสุด
+  - **Caching:** ใช้ `useState` จำข้อมูล Profile และ Categories ลด request
+  - **Code Quality:** ลบ Log, Dead logic และ Redundant comments ทั่วทั้งโปรเจกต์ (Clean Code Phase)
 
 ---
 
-## 2. Project Architecture
+## 📂 2. Frontend Structure (โครงสร้างหน้าเว็บและ UI)
 
-โครงสร้างโฟลเดอร์ที่จัดระเบียบตามหลัก Clean Architecture เพื่อความคล่องตัวในการขยายระบบ
+### 2.1 Application Routes (`pages/`)
 
-### 2.1 Directory Structure
+| Module      | ไฟล์                       | Path                    | หน้าที่                                       |
+| :---------- | :------------------------- | :---------------------- | :-------------------------------------------- |
+| **Public**  | `index.vue`                | `/`                     | หน้าแรก Landing Page (**Forced Light Mode**)  |
+|             | `browse/discovery.vue`     | `/browse/discovery`     | **ระบบค้นหาและ Filter คอร์ส** (Catalog)       |
+|             | `course/[id].vue`          | `/course/:id`           | **หน้ารายละเอียดคอร์ส** (Course Detail)       |
+| **Auth**    | `auth/login.vue`           | `/auth/login`           | เข้าสู่ระบบ (**Remember Me**, **Light Mode**) |
+|             | `auth/register.vue`        | `/auth/register`        | สมัครสมาชิกผู้เรียน (**Light Mode**)          |
+|             | `auth/forgot-password.vue` | `/auth/forgot-password` | กู้คืนรหัสผ่าน (**Light Mode**)               |
+| **Student** | `dashboard/index.vue`      | `/dashboard`            | แดชบอร์ดภาพรวมผู้เรียน                        |
+|             | `dashboard/my-courses.vue` | `/dashboard/my-courses` | **คอร์สของฉัน** และดาวน์โหลดใบประกาศฯ         |
+|             | `dashboard/profile.vue`    | `/dashboard/profile`    | จัดการโปรไฟล์, รูปภาพ, เปลี่ยนรหัสผ่าน        |
+|             | `classroom/learning.vue`   | `/classroom/learning`   | **ห้องเรียน (Video Player)** & Announcements  |
+|             | `classroom/quiz.vue`       | `/classroom/quiz`       | การสอบวัดผล (**API-Driven Logic**)            |
 
-- `pages/` : ระบบ Routing ทั้งหมด (Landing, Auth, Dashboard, Classroom)
-- `components/` : UI Components แยกตามความรับผิดชอบ (Common, Layout, Course, Classroom, Profile)
-- `composables/` : Business Logic ทั้งหมด (Auth, Course, Theme, Quiz, Navigation)
-- `types/` : ศูนย์รวม Interface และ Type definitions ของทั้งระบบ
-- `constants/` : แหล่งเก็บข้อมูล Static (เช่น Category cards, Why choose us) เพื่อลดความซ้อนในไฟล์ Vue
-- `assets/css/` : `main.css` ที่เป็น Single Source of Truth สำหรับสไตล์และ CSS Variables
-- `layouts/` : Master templates (Default, Auth, Dashboard)
-- `middleware/` : ตัวกรองความปลอดภัยก่อนเข้าถึงแต่ละหน้า
+### 2.2 Key Components (`components/`)
 
-### 2.2 Shared Infrastructure
-
-- **Types Architecture:** การสกัด Types จาก Composable ออกมาไว้ที่ `@/types`  
-  ช่วยลดความซ้ำซ้อนและป้องกัน Error จากการเปลี่ยนโครงสร้างข้อมูล API
-- **Constants System:** การใช้ `@/constants` ช่วยให้การแก้ไขคำโฆษณาหรือข้อมูลหน้าแรกทำได้จากจุดเดียว  
-  โดยไม่ต้องแก้โค้ด HTML
+- **Common (`components/common/`):**
+  - `GlobalLoader.vue`: Loading indicator ทั่วทั้งแอป
+  - `LanguageSwitcher.vue`: ปุ่มเปลี่ยนภาษา (TH/EN)
+  - `AppHeader.vue`, `MobileNav.vue`: Navigation หลัก (ใช้ร่วมกับ AppSidebar)
+  - `FormInput.vue`: Input field มาตรฐาน
+- **Layout (`components/layout/`):**
+  - `AppSidebar.vue`: Sidebar หลักสำหรับ Dashboard (Collapsible)
+  - `LandingHeader.vue`: Header เฉพาะสำหรับหน้า Landing Page
+- **Course (`components/course/`):**
+  - `CourseCard.vue`: การ์ดแสดงผลคอร์ส รองรับ Progress และ **Glassmorphism** ในโหมดมืด
+- **Discovery (`components/discovery/`):**
+  - `CategorySidebar.vue`: Sidebar ตัวกรองหมวดหมู่แบบย่อ/ขยายได้
+  - `CourseDetailView.vue`: หน้ารายละเอียดคอร์สขนาดใหญ่ (Video Preview + Syllabus)
+- **Classroom (`components/classroom/`):**
+  - `CurriculumSidebar.vue`: Sidebar บทเรียนและสถานะการเรียน
+  - `AnnouncementModal.vue`: Modal แสดงประกาศของคอร์ส
+  - `VideoPlayer.vue`: Video Player พร้อม Custom Controls และ YouTube Support
+- **User / Profile (`components/user/`, `components/profile/`):**
+  - `UserAvatar.vue`: แสดงรูปโปรไฟล์ (รองรับ Fallback)
+  - `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
+  - `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
 
 ---
 
-## 3. Logic & Data Layer (Composables)
+## 🧠 3. Logic & Data Layer (Composables)
 
-การแยก Logic ออกจาก UI เพื่อความสะอาดและ Testable
+รวบรวม Logic หลักแยกส่วนตามหน้าที่ (Separation of Concerns)
 
-- `useAuth`  
-  จัดการสถานะ Login, การดึงโปรไฟล์ล่วงหน้า (Pre-fetching), และระบบ Token Refresh
+### 3.1 `useAuth.ts` (Authentication & User)
 
-- `useCourse`  
-  หัวใจของระบบ จัดการตั้งแต่ Catalog, การสมัครเรียน (Enroll), ไปจนถึงการส่งผลการเรียน (Progress)
+จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย
 
-- `useThemeMode`  
-  ระบบจัดการธีมกลางที่เชื่อมต่อกับ `localStorage` และ CSS Variables อย่างเป็นระบบ
+- **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
+- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**
 
-- `useQuizRunner`  
-  จัดการสถานะการสอบ เปลี่ยนข้อสอบ และส่งคะแนนไปยัง Backend โดยตรง
+### 3.2 `useCourse.ts` (Course & Classroom)
 
-- `useNavItems`  
-  Single Source of Truth สำหรับเมนูทั้งหมด (Sidebar, Mobile Drawer, User Menu)
+หัวใจหลักของการเรียนการสอน
+
+- **Catalog:** `fetchCourses`, `fetchCourseById`, `enrollCourse`
+- **Classroom:**
+  - `fetchCourseLearningInfo`: โครงสร้างบทเรียน (Chapters/Lessons)
+  - `fetchLessonContent`: เนื้อหาวิดีโอ/Quiz/Attachments
+  - `fetchCourseAnnouncements`: ดึงข้อมูลประกาศของคอร์ส
+  - `saveVideoProgress`: บันทึกเวลาเรียน (Sync Server)
+- **i18n Support:** `getLocalizedText` ตัวช่วยในการเลือกแสดงผลภาษา (TH/EN) ตาม Locale ปัจจุบันที่ผู้ใช้เลือก อัตโนมัติทั่วทั้งแอป
+
+### 3.3 `useQuizRunner.ts` (Quiz System)
+
+จัดการ Logic การทำข้อสอบ (Production-Ready)
+
+- **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
+- **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที
 
 ---
 
-## 4. Branding & UI Policy
-
-มาตรฐานการออกแบบที่เน้นความ Premium และ Consistent
+## 🎨 4. Design System & Theming
 
 ### 4.1 Theme Strategy
 
-- **Public Pages (Landing, Auth, Detail):** บังคับ **Forced Light Mode**  
-  เพื่อภาพลักษณ์แบรนด์ที่สะอาดและน่าเชื่อถือ
-- **Internal Pages (Dashboard, Learning):** รองรับ **Dark Mode (Oceanic Theme)**  
-  ลดการเมื่อยล้าของสายตาขณะเรียนเป็นเวลานาน
-- **Transitions:** ใช้ GlobalLoader และ Smooth transitions ทั่วทั้งแอปเพื่อประสบการณ์ที่ลื่นไหล
-
-### 4.2 UI Elements
-
-- **Image 2 Style Categories:** การ์ดหมวดหมู่แบบแนวนอนที่เป็นระเบียบ (Minimalist)
-- **Glassmorphism:** พื้นผิวโปร่งแสงใน Dashboard และ Classroom ช่วยให้แอปดูมีมิติ
-- **Standardized Icons:** ใช้ Material Icons ผ่าน Quasar ระบบเดียวทั้งหมด
+- **Framework:** Tailwind CSS + Quasar UI
+- **Light/Dark Mode Policy:**
+  - **Public Pages:** บังคับ **Light Mode** (Landing, Course Detail, Auth) เพื่อภาพลักษณ์แบรนด์ที่สะอาดตา
+  - **Dashboard/Learning:** รองรับ **Dark Mode** เต็มรูปแบบ (Oceanic Theme)
+  - **Aesthetics:** ปรับปรุงความชัดเจนของ Badge, Icon และสถานะต่างๆ ในหน้าสอบ (Quiz) สำหรับโหมดมืดโดยเฉพาะ ให้มี Contrast สูงและดู Premium
+- **Visual Fixes:** แก้ไขปัญหา "Dark Frame" ในหน้า Auth โดยการบังคับสไตล์ระดับ HTML/Body
 
 ---
 
-## 5. Core Feature Highlights
+## 📊 5. Dependency Map (ความสัมพันธ์ไฟล์)
 
-ฟีเจอร์เด่นที่ถูกพัฒนาขึ้นเพื่อผู้เรียนโดยเฉพาะ
-
-- **SPA Learning Journey:** การสลับบทเรียนในห้องเรียนเป็นแบบ Single Page App (ไม่มีการ Re-load หน้า)  
-  ทำให้การเรียนต่อเนื่อง
-- **Hybrid Progress Tracking:** บันทึกเวลาเรียนลง `localStorage` แบบ Real-time และ Sync ขึ้น Server เป็นระยะ  
-  เพื่อป้องกันข้อมูลหาย
-- **Announcement System:** ระบบแจ้งเตือนในคอร์สพร้อมตัวระบุ "ยังไม่ได้อ่าน" (Unread Badge)  
-  ที่จำสถานะตามผู้ใช้งาน
-- **Interactive Quizzes:** ระบบสอบที่สลับคำถามอัตโนมัติ พร้อมโหมดเฉลย (Answer Review) ที่ชัดเจน
-- **Certificate Automation:** ระบบตรวจสอบสิทธิ์ความสำเร็จและออกใบประกาศนียบัตรได้ทันที
+| หน้าเว็บ (Page)          | Components หลัก              | Composables หลัก                                       |
+| :----------------------- | :--------------------------- | :----------------------------------------------------- |
+| **Login / Register**     | `FormInput`                  | `useAuth` (Remember Me), `useFormValidation`           |
+| **Discovery (Browse)**   | `CourseCard`                 | `useCourse` (Search/Filter), `useCategory`             |
+| **My Courses**           | `CourseCard` (with Progress) | `useCourse` (Certificates)                             |
+| **Classroom (Learning)** | Video Player, Sidebar        | `useCourse` (Progress, Announcements), `useMediaPrefs` |
+| **Quiz**                 | `QuizHeader`, `QuizContent`  | `useQuizRunner` (Real API Integration)                 |
+| **Profile**              | `UserAvatar`, `FormInput`    | `useAuth` (Upload Avatar, Verify Email)                |
 
 ---
 
-## 6. Maintenance & Performance Guidelines
+## ✅ 6. Project Status (สถานะล่าสุด)
 
-แนวทางสำหรับการพัฒนาต่อยอด
+### ✨ Recent Updates (กุมภาพันธ์ 2026)
 
-- **Clean Code:** หลีกเลี่ยงการใช้ `console.log` ในโค้ด Final และลบ Dead Logic ทิ้งทันที
-- **Standard Fonts:** ใช้ชุด Font Prompt ผ่านตัวแปร `--font-main` เสมอ
-- **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
-- **Mobile First:** ทุก Component ต้องรองรับระบบ Master Drawer บนมือถืออย่างสมบูรณ์
-- **Code Comments (Thai Localization):** ระบบหลักทั้งหมด (เช่น Classroom, Quiz, Dashboard, Profile) ได้รับการแปลคอมเมนต์ในโค้ดเป็นภาษาไทยอย่างละเอียด เพื่อให้ทีมนักพัฒนาชาวไทยสามารถทำความเข้าใจ บำรุงรักษา และขยายระบบได้ง่ายและรวดเร็วที่สุด
-- **TypeScript Strictness:** ระบบมีการบังคับใช้ Type ใน TypeScript อย่างเข้มงวด และมีการแก้ไข Linting Errors (เช่นในหน้าต่างทำแบบทดสอบ `quiz/[id].vue`) อย่างสม่ำเสมอ เพื่อลดข้อผิดพลาดในขณะรันไทม์ (Runtime)
+1.  **System-Wide Code Cleanup (Phase Final):**
+    - **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
+    - **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
+    - **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code
 
----
+2.  **Authentication & Security Polish:**
+    - **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
+    - **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)
 
-## 7. Getting Started & Setup (การติดตั้งและเริ่มต้นใช้งาน)
+3.  **UI & Aesthetics (Premium Fixes):**
+    - **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
+    - **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด
 
-สำหรับนักพัฒนาที่จะประเมิน เวิร์กโฟลว์ หรือรัน Frontend-Learner ข้อมูลที่จำเป็นมีดังนี้:
+4.  **Quiz System Productionization:**
+    - **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
+    - **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล
 
-- **Requirements:** ต้องมี Node.js (แนะนำเวอร์ชัน 18 ขึ้นไป)
-- **Install Dependencies:** ติดตั้งแพ็กเกจด้วยคำสั่ง `npm install`
-- **Run Development Server:** สำหรันการรันในเครื่องตัวเอง ให้ใช้ `npm run dev` ตัวระบบจะคอยรีเฟรชอัติโนมัติเมื่อโค้ดเปลี่ยน
-- **Build for Production:** ใช้คำสั่ง `npm run build` และเรียกใช้ระบบผ่าน `node .output/server/index.mjs` หรือรันผ่านคำสั่ง `npm run start` (Nuxt 3)
+5.  **Smooth Navigation & Quiz Experience:**
+    - **SPA Navigation:** เปลี่ยนการสไลด์บทเรียนจาก Hard Reload เป็น SPA Navigation (`router.push`) ทำให้เรียนได้ต่อเนื่อง ไม่ต้องรอโหลดหน้าใหม่
+    - **Smart Lesson Loading:** ปรับปรุง Error ที่หน้าเว็บชอบเด้งกลับไปบทเรียนที่ 1 เสมอ โดยเปลี่ยนให้ความสำคัญกับ `lesson_id` จาก URL ก่อน
+    - **UI Simplification:** ลบทิ้ง "Legend/คำอธิบายสถานะ" ในหน้าสอบเพื่อความสะอาดตา (Minimal UI)
+    - **Sidebar visibility:** ช่วยให้ผู้ใช้เปิด-ปิด Sidebar บน Desktop ได้อย่างอิสระผ่านปุ่ม Hamburger
 
----
+6.  **Internationalization (i18n) Improvements:**
+    - **Localized Text Logic:** แก้ไขฟังก์ชัน `getLocalizedText` ให้แสดงภาษาตามที่ผู้ใช้สลับจริง (แก้ปัญหาหน้าเว็บเป็นอังกฤษแต่ชื่อวิชาเป็นไทย)
+    - **Hardcoded Removal:** ทยอยลบข้อความภาษาไทยที่พิมพ์ค้างไว้ในโค้ด (เช่น ใน Sidebar หมวดหมู่) และแทนที่ด้วย i18n keys
+    - **Boot Sequence Fix:** แก้ไขปัญหาเว็บค้าง (Error 500) ที่เกิดจากการเรียกใช้ภาษาเร็วเกินไปก่อนที่ระบบจะพร้อม (`initialization error`)
 
-## 8. Environment Variables (การตั้งค่าตัวแปรสภาพแวดล้อม)
+7.  **Classroom & UX Optimization (Mid-February 2026):**
+    - **SPA Navigation for Learning:** เปลี่ยนระบบเลือกบทเรียนจากการ Reload หน้าเป็น SPA Navigation ทำให้เปลี่ยนวิดีโอ/บทเรียนได้ทันทีโดยไม่ต้อง Refresh หน้าจอ
+    - **Announcement Persistence:** เพิ่มระบบเช็กสถานะการอ่านประกาศ (Unread Badge) โดยบันทึกสถานะล่าสุดลง LocalStorage แยกตามผู้ใช้และคอร์ส
+    - **YouTube Resume:** รองรับการเรียนต่อจากจุดเดิมสำหรับวิดีโอ YouTube (Time Seeking via URL parameter)
 
-ระบบฝั่ง Frontend จะเชื่อมต่อกับ API Backend ผ่านตัวแปรตั้งค่า ในการพัฒนาในเครื่องของตนเอง จำเป็นต้องสร้างไฟล์ `.env` ที่ root folder ของ `Frontend-Learner` โดยต้องมีข้อมูลดังต่อไปนี้:
+8.  **Quiz System Enhancements:**
+    - **Answer Review Mode:** เพิ่มโหมดเฉลยข้อสอบหลังทำเสร็จ พร้อมการไฮไลท์สีที่ชัดเจน (เขียว = ถูก, แดง = ตอบผิด)
+    - **Shuffle Logic:** เพิ่มการสลับคำถามและตัวเลือก (Shuffle) เพื่อความโปร่งใสในการสอบ
+    - **Enhanced Feedback:** ปรับปรุง UI ผลลัพธ์การสอบให้มีความ Premium และเข้าใจง่ายขึ้น
 
-```env
-NUXT_PUBLIC_API_BASE=http://localhost:4000/api # เปลี่ยนเป็น URL หลังบ้านของ Production หากนำขึ้นโฮสต์
-```
+9.  **Security & Registration Polish:**
+    - **Phone Validation:** เพิ่มระบบตรวจสอบเบอร์โทรศัพท์ในหน้าสมัครสมาชิก (ต้องเป็นตัวเลขและยาวไม่เกิน 10 หลัก)
+    - **Enrollment Alert Logic:** ปรับปรุง Logic การสมัครเรียนให้ตรวจสอบสถานะ Enrollment เดิมก่อน เพื่อป้องกัน API Error และการเรียก request ซ้ำซ้อน
 
-_(หมายเหตุ: Nuxt จะอ่านค่า `NUXT_PUBLIC_API_BASE` เข้าไปใน `useRuntimeConfig().public.apiBase` ให้นักพัฒนาเรียกใช้ใน Composables ตลอดทั้งแอปอัตโนมัติ)_
-
----
-
-## 9. Internationalization (i18n) (ระบบสองภาษา)
-
-ระบบมี 2 รูปแบบการแปลภาษาคือ:
-
-- **UI Elements แบบ Static:** แปลผ่านไฟล์หรือแท็กในระบบ `@nuxtjs/i18n` (การสลับภาษาทำผ่านแฮมเบอร์เกอร์เมนูด้านบนขวา แจ้งสถานะผ่าน `useI18n()`)
-- **API Content แบบ Dynamic:** ในตาราง Course หรือ Quiz จากหลังบ้าน จะใช้โครงสร้างแบบคู่ (เช่น `title: { th: "...", en: "..." }`) โดยในทุกตรรกะหน้าเรียน (Composables) จะมีฟังก์ชันช่วยอย่าง `getLocalizedText()` ไว้คอยแปลงก้อน JSON นี้เป็นภาษาที่ผู้ใช้เลือกในปัจจุบันอัตโนมัติ
-
----
-
-## 10. Error Handling & UI Feedback (การจัดการหน้าตาระหว่างเข้าถึง API)
-
-ระบบ Frontend-Learner มีแนวทางสำหรับประสบการณ์ผู้ใช้ (UX) ต่อกรณีข้อผิดพลาดที่ตายตัว ดังนี้:
-
-- **Toast Notifications:** ในกรณีข้อมูลไม่ถูกต้อง (เช่น ล็อกอินผิด, สมัครไม่ผ่าน) ระบบจะเด้ง `Notify` ของ Quasar (`$q.notify`) แจ้งผู้ใช้จากขอบบนขวา
-- **Confirmation Dialogs:** สำหรับการกระทำที่สำคัญและอาจผิดพลาดได้ (เช่น ยืนยันการส่งแบบทดสอบครั้งสุดท้ายเตือนไม่ให้กดส่งพลาด) จะใช้ `$q.dialog` แทน Toast
-- **Skeleton & Loading States:** ระหว่างดึงข้อมูลระบบจากหลังบ้าน จะใช้ Skeleton (กรอบเทากะพริบ) คงรูปทรงของวิดีโอ/แบบทดสอบไว้ก่อน ป้องกันไม่ให้หน้าขาวเพื่อลดอคติโหลดช้าของนักเรียน
+10. **Profile & Certificates:**
+    - **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
+    - **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
diff --git a/frontend_management/.env.example b/frontend_management/.env.example
index dbb3e3f7..d5e0ccc9 100644
--- a/frontend_management/.env.example
+++ b/frontend_management/.env.example
@@ -1,3 +1,5 @@
 # API Configuration
-NUXT_PUBLIC_API_BASE_URL=http://localhost:3001/api
+API_BASE_URL=http://localhost:3001/api
 
+# Application
+NODE_ENV=development
diff --git a/frontend_management/.gitignore b/frontend_management/.gitignore
index df2ba243..c05a50a2 100644
--- a/frontend_management/.gitignore
+++ b/frontend_management/.gitignore
@@ -23,13 +23,4 @@ logs
 .env.*
 !.env.example
 deploy.ps1
-*.tar
-
-# Playwright
-tests
-tests/.auth/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-playwright.config.ts
\ No newline at end of file
+*.tar
\ No newline at end of file
diff --git a/frontend_management/components/course/AnnouncementsTab.vue b/frontend_management/components/course/AnnouncementsTab.vue
index 1efe7f2b..84b49a14 100644
--- a/frontend_management/components/course/AnnouncementsTab.vue
+++ b/frontend_management/components/course/AnnouncementsTab.vue
@@ -342,18 +342,11 @@ const save = async () => {
 
   saving.value = true;
   try {
-    // Convert local datetime to ISO string to preserve timezone
-    const payload = { ...form.value };
-    if (payload.published_at) {
-      const localDate = new Date(payload.published_at.replace(' ', 'T'));
-      payload.published_at = localDate.toISOString();
-    }
-
     if (editing.value) {
-      await instructorService.updateAnnouncement(props.courseId, editing.value.id, payload);
+      await instructorService.updateAnnouncement(props.courseId, editing.value.id, form.value);
       $q.notify({ type: 'positive', message: 'บันทึกประกาศสำเร็จ', position: 'top' });
     } else {
-      const created = await instructorService.createAnnouncement(props.courseId, payload);
+      const created = await instructorService.createAnnouncement(props.courseId, form.value);
       
       // Upload pending files
       for (const file of pendingFiles.value) {
diff --git a/frontend_management/components/course/InstructorsTab.vue b/frontend_management/components/course/InstructorsTab.vue
index 4f47af73..323a5a72 100644
--- a/frontend_management/components/course/InstructorsTab.vue
+++ b/frontend_management/components/course/InstructorsTab.vue
@@ -32,7 +32,7 @@
             <q-item-label caption>{{ instructor.user.email }}</q-item-label>
           </q-item-section>
 
-          <q-item-section side v-if="isPrimaryInstructor && instructor.user_id !== currentUserId">
+          <q-item-section side v-if="isPrimaryInstructor">
             <q-btn flat dense round icon="more_vert">
               <q-menu>
                 <q-item v-if="!instructor.is_primary" clickable v-close-popup @click="setPrimary(instructor.user_id)">
@@ -139,10 +139,6 @@ const isPrimaryInstructor = computed(() => {
   return myRecord?.is_primary === true;
 });
 
-const currentUserId = computed(() => {
-  return authStore.user?.id ? parseInt(authStore.user.id) : null;
-});
-
 // Methods
 const fetchInstructors = async () => {
   loading.value = true;
diff --git a/frontend_management/package-lock.json b/frontend_management/package-lock.json
index e113ea0c..665d28ad 100644
--- a/frontend_management/package-lock.json
+++ b/frontend_management/package-lock.json
@@ -18,7 +18,6 @@
       },
       "devDependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
-        "@playwright/test": "^1.58.2",
         "@types/node": "^25.0.3",
         "nuxt-quasar-ui": "^3.0.0"
       }
@@ -2774,22 +2773,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
-      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -8800,53 +8783,6 @@
         "pathe": "^2.0.3"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
-      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "playwright-core": "1.58.2"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
-    "node_modules/playwright-core": {
-      "version": "1.58.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
-      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/playwright/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/portfinder": {
       "version": "1.0.38",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
diff --git a/frontend_management/package.json b/frontend_management/package.json
index 9ca64017..0cd042dd 100644
--- a/frontend_management/package.json
+++ b/frontend_management/package.json
@@ -7,11 +7,7 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "test": "playwright test",
-    "test:ui": "playwright test --ui",
-    "test:headed": "playwright test --headed",
-    "test:report": "playwright show-report"
+    "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.11.3",
@@ -25,8 +21,7 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "@playwright/test": "^1.58.2",
     "@types/node": "^25.0.3",
     "nuxt-quasar-ui": "^3.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend_management/pages/admin/courses/pending.vue b/frontend_management/pages/admin/courses/pending.vue
index e5871eb9..800855c8 100644
--- a/frontend_management/pages/admin/courses/pending.vue
+++ b/frontend_management/pages/admin/courses/pending.vue
@@ -31,48 +31,33 @@
       </div>
     </div>
 
-    <!-- Search & View Toggle -->
+    <!-- Search -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <div class="flex gap-4 items-center">
-        <div class="flex-1">
-          <q-input
-            v-model="searchQuery"
-            placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
-            outlined
-            dense
-            bg-color="grey-1"
-          >
-            <template v-slot:prepend>
-              <q-icon name="search" />
-            </template>
-            <template v-slot:append v-if="searchQuery">
-              <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
-            </template>
-          </q-input>
-        </div>
+      <q-input
+        v-model="searchQuery"
+        placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
+        outlined
+        dense
+        bg-color="grey-1"
+      >
+        <template v-slot:prepend>
+          <q-icon name="search" />
+        </template>
+        <template v-slot:append v-if="searchQuery">
+          <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
+        </template>
+      </q-input>
+    </div>
 
-        <q-btn-toggle
+    <div class="flex justify-end mb-6">
+      <q-btn-toggle
           v-model="viewMode"
           toggle-color="primary"
           :options="[
-            { value: 'card', slot: 'card' },
-            { value: 'table', slot: 'table' }
+            { label: 'การ์ด', value: 'card' },
+            { label: 'ตาราง', value: 'table' }
           ]"
-          dense
-          rounded
-          unelevated
-          class="border"
-        >
-          <template v-slot:card>
-            <q-icon name="view_stream" size="20px" />
-            <q-tooltip>มุมมองการ์ด</q-tooltip>
-          </template>
-          <template v-slot:table>
-            <q-icon name="view_list" size="20px" />
-            <q-tooltip>มุมมองตาราง</q-tooltip>
-          </template>
-        </q-btn-toggle>
-      </div>
+        />
     </div>
 
     <!-- Pending Courses List -->
diff --git a/frontend_management/pages/admin/index.vue b/frontend_management/pages/admin/index.vue
index e4e6b968..cf1121ed 100644
--- a/frontend_management/pages/admin/index.vue
+++ b/frontend_management/pages/admin/index.vue
@@ -182,7 +182,6 @@
 
 <script setup lang="ts">
 import { adminService, type PendingCourse, type AuditLog } from '~/services/admin.service';
-import { useQuasar } from 'quasar';
 
 definePageMeta({
   layout: 'admin',
@@ -191,7 +190,6 @@ definePageMeta({
 
 const authStore = useAuthStore();
 const router = useRouter();
-const $q = useQuasar();
 
 // State
 const loading = ref(true);
@@ -209,23 +207,8 @@ const goToProfile = () => {
 };
 
 const handleLogout = () => {
-  $q.dialog({
-    title: 'ยืนยันการออกจากระบบ',
-    message: 'คุณต้องการออกจากระบบใช่หรือไม่?',
-    cancel: {
-      label: 'ยกเลิก',
-      flat: true,
-      color: 'grey-8'
-    },
-    ok: {
-      label: 'ออกจากระบบ',
-      color: 'negative'
-    },
-    persistent: true
-  }).onOk(() => {
-    authStore.logout();
-    router.push('/login');
-  });
+  authStore.logout();
+  router.push('/login');
 };
 
 // Data Fetching
diff --git a/frontend_management/pages/admin/recommended-courses/index.vue b/frontend_management/pages/admin/recommended-courses/index.vue
index c8aac610..96d66203 100644
--- a/frontend_management/pages/admin/recommended-courses/index.vue
+++ b/frontend_management/pages/admin/recommended-courses/index.vue
@@ -171,7 +171,7 @@
                    </div>
 
                    <!-- Stats -->
-                   <!-- <div class="grid grid-cols-3 gap-2">
+                   <div class="grid grid-cols-3 gap-2">
                       <div class="bg-blue-50 p-2 rounded-lg text-center">
                          <div class="text-2xl font-bold text-blue-800">{{ selectedCourse.chapters_count || 0 }}</div>
                          <div class="text-blue-600 text-sm">Chapters</div>
@@ -180,7 +180,7 @@
                          <div class="text-2xl font-bold text-purple-800">{{ selectedCourse.lessons_count || 0 }}</div>
                          <div class="text-purple-600 text-sm">Lessons</div>
                       </div>
-                   </div> -->
+                   </div>
                 </div>
              </div>
 
@@ -204,7 +204,7 @@
                      >
                        <q-icon name="article" color="primary" size="20px" />
                        <span class="text-gray-700">{{ lessonIndex + 1 }}. {{ lesson.title.th }}</span>
-                       <!-- <span v-if="lesson.title.en" class="text-gray-400 text-xs ml-auto">{{ lesson.title.en }}</span> -->
+                       <span v-if="lesson.title.en" class="text-gray-400 text-xs ml-auto">{{ lesson.title.en }}</span>
                      </div>
                    </div>
                  </q-expansion-item>
diff --git a/frontend_management/pages/admin/users/index.vue b/frontend_management/pages/admin/users/index.vue
index 8635e0c3..b5570d7e 100644
--- a/frontend_management/pages/admin/users/index.vue
+++ b/frontend_management/pages/admin/users/index.vue
@@ -93,7 +93,7 @@
                 <q-icon v-else name="person" color="primary" />
               </div>
               <div>
-                <div class="font-medium text-primary-600">
+                <div class="font-medium text-primary-600 hover:underline cursor-pointer">
                   {{ getFullName(props.row) }}
                 </div>
                 <div class="text-sm text-gray-500">{{ props.row.email }}</div>
@@ -216,7 +216,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { adminService, type AdminUserResponse, type RoleResponse } from '~/services/admin.service';
+import { adminService, type AdminUserResponse } from '~/services/admin.service';
 import { useAuthStore } from '~/stores/auth';
 
 definePageMeta({
@@ -228,7 +228,6 @@ const $q = useQuasar();
 
 // Data
 const users = ref<AdminUserResponse[]>([]);
-const roles = ref<RoleResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterRole = ref<string | null>(null);
@@ -287,14 +286,6 @@ const filteredUsers = computed(() => {
 });
 
 // Methods
-const fetchRoles = async () => {
-  try {
-    roles.value = await adminService.getRoles();
-  } catch (error) {
-    console.error('Failed to fetch roles:', error);
-  }
-};
-
 const fetchUsers = async () => {
   loading.value = true;
   try {
@@ -337,32 +328,24 @@ const viewUser = (user: AdminUserResponse) => {
   showViewModal.value = true;
 };
 
-const getRoleLabel = (code: string): string => {
-  const labels: Record<string, string> = {
-    INSTRUCTOR: 'Instructor',
-    STUDENT: 'Student',
-    ADMIN: 'Admin'
-  };
-  return labels[code] || code;
-};
-
 const changeRole = (user: AdminUserResponse) => {
-  // Find current role ID from fetched roles
-  const currentRole = roles.value.find(r => r.code === user.role.code);
+  const roleIds: Record<string, number> = {
+    INSTRUCTOR: 1,
+    STUDENT: 2,
+    ADMIN: 3
+  };
   
-  // Build items from API roles
-  const roleItems = roles.value.map(r => ({
-    label: getRoleLabel(r.code),
-    value: r.id
-  }));
-
   $q.dialog({
     title: 'เปลี่ยน Role',
     message: `เลือก Role ใหม่สำหรับ ${user.profile.first_name}`,
     options: {
       type: 'radio',
-      model: (currentRole?.id ?? 0) as any,
-      items: roleItems
+      model: roleIds[user.role.code] as any,
+      items: [
+        { label: 'Instructor', value: 1 },
+        { label: 'Student', value: 2 },
+        { label: 'Admin', value: 3 }
+      ]
     },
     cancel: true,
     persistent: true
@@ -432,7 +415,6 @@ const exportExcel = () => {
 
 // Lifecycle
 onMounted(() => {
-  fetchRoles();
   fetchUsers();
 });
 </script>
diff --git a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/quiz.vue b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/quiz.vue
index fdd0ce17..6e89fe33 100644
--- a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/quiz.vue
+++ b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/quiz.vue
@@ -40,37 +40,28 @@
             <!-- Title English -->
             <q-input
               v-model="form.title.en"
-              label="ชื่อแบบทดสอบ (English) *"
+              label="ชื่อแบบทดสอบ (English)"
               outlined
-              :rules="[val => !!val || 'กรุณากรอกชื่อแบบทดสอบ']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <!-- Content Thai -->
             <q-input
               v-model="form.content.th"
-              label="คำอธิบาย (ภาษาไทย) *"
+              label="คำอธิบาย (ภาษาไทย)"
               type="textarea"
               outlined
               autogrow
               rows="2"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <!-- Content English -->
             <q-input
               v-model="form.content.en"
-              label="คำอธิบาย (English) *"
+              label="คำอธิบาย (English)"
               type="textarea"
               outlined
               autogrow
               rows="2"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
           </div>
         </q-card-section>
@@ -616,6 +607,7 @@ const saveQuestion = async () => {
   try {
     const questionData: CreateQuestionRequest = {
       question: questionForm.value.text,
+      explanation: { th: '', en: '' },
       question_type: 'MULTIPLE_CHOICE',
       sort_order: editingQuestionIndex.value !== null 
         ? questions.value[editingQuestionIndex.value].id ? editingQuestionIndex.value + 1 : questions.value.length + 1
diff --git a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
index 1800f252..6c0bb237 100644
--- a/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
+++ b/frontend_management/pages/instructor/courses/[id]/chapters/[chapterId]/lessons/[lessonId]/video.vue
@@ -39,37 +39,28 @@
             <!-- Title English -->
             <q-input
               v-model="form.title.en"
-              label="ชื่อบทเรียน (English) *"
+              label="ชื่อบทเรียน (English)"
               outlined
-              :rules="[val => !!val || 'กรุณากรอกชื่อบทเรียน']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <!-- Content Thai -->
             <q-input
               v-model="form.content.th"
-              label="คำอธิบาย (ภาษาไทย) *"
+              label="คำอธิบาย (ภาษาไทย)"
               type="textarea"
               outlined
               autogrow
               rows="3"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <!-- Content English -->
             <q-input
               v-model="form.content.en"
-              label="คำอธิบาย (English) *"
+              label="คำอธิบาย (English)"
               type="textarea"
               outlined
               autogrow
               rows="3"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
             <q-card-section class="flex justify-end gap-2">
           <q-btn
diff --git a/frontend_management/pages/instructor/courses/[id]/edit.vue b/frontend_management/pages/instructor/courses/[id]/edit.vue
index b1c966ba..6fd408f3 100644
--- a/frontend_management/pages/instructor/courses/[id]/edit.vue
+++ b/frontend_management/pages/instructor/courses/[id]/edit.vue
@@ -68,28 +68,22 @@
         <div class="mb-6">
           <q-input
             v-model="form.description.th"
-            label="คำอธิบาย (ภาษาไทย) *"
+            label="คำอธิบาย (ภาษาไทย)"
             type="textarea"
             outlined
             autogrow
             rows="3"
-            :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-            lazy-rules="ondemand"
-            hide-bottom-space
           />
         </div>
 
         <div class="mb-6">
           <q-input
             v-model="form.description.en"
-            label="คำอธิบาย (English) *"
+            label="คำอธิบาย (English)"
             type="textarea"
             outlined
             autogrow
             rows="3"
-            :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-            lazy-rules="ondemand"
-            hide-bottom-space
           />
         </div>
 
diff --git a/frontend_management/pages/instructor/courses/[id]/structure.vue b/frontend_management/pages/instructor/courses/[id]/structure.vue
index 668009e9..51d1a33e 100644
--- a/frontend_management/pages/instructor/courses/[id]/structure.vue
+++ b/frontend_management/pages/instructor/courses/[id]/structure.vue
@@ -156,34 +156,25 @@
             />
             <q-input
               v-model="chapterForm.title.en"
-              label="ชื่อบท (English) *"
+              label="ชื่อบท (English)"
               outlined
               class="mb-4"
-              :rules="[val => !!val || 'กรุณากรอกชื่อบท']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
             <q-input
               v-model="chapterForm.description.th"
-              label="คำอธิบาย (ภาษาไทย) *"
+              label="คำอธิบาย (ภาษาไทย)"
               type="textarea"
               outlined
               autogrow
               class="mb-4"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
             <q-input
               v-model="chapterForm.description.en"
-              label="คำอธิบาย (English) *"
+              label="คำอธิบาย (English)"
               type="textarea"
               outlined
               autogrow
               class="mb-4"
-              :rules="[val => !!val || 'กรุณากรอกคำอธิบาย']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <div class="flex justify-end gap-2 mt-4">
@@ -217,7 +208,7 @@
             />
             <q-input
               v-model="lessonForm.title.en"
-              label="ชื่อบทเรียน (English) *"
+              label="ชื่อบทเรียน (English)"
               outlined
               class="mb-4"
             />
@@ -244,29 +235,22 @@
             <q-input
               v-if="lessonForm.type"
               v-model="lessonForm.content.th"
-              label="เนื้อหา (ภาษาไทย) *"
+              label="เนื้อหา (ภาษาไทย)"
               type="textarea"
               outlined
               autogrow
               rows="3"
               class="mb-4"
-              :rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <q-input
               v-if="lessonForm.type"
               v-model="lessonForm.content.en"
-              label="เนื้อหา (English) *"
+              label="เนื้อหา (English)"
               type="textarea"
               outlined
               autogrow
               rows="3"
-              class="mb-4"
-              :rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
-              lazy-rules="ondemand"
-              hide-bottom-space
             />
 
             <div class="flex justify-end gap-2 mt-4">
diff --git a/frontend_management/pages/instructor/courses/index.vue b/frontend_management/pages/instructor/courses/index.vue
index 43b17b11..cdda8b84 100644
--- a/frontend_management/pages/instructor/courses/index.vue
+++ b/frontend_management/pages/instructor/courses/index.vue
@@ -39,8 +39,8 @@
 
     <!-- Filter Bar -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <div class="flex gap-4 items-center">
-        <div class="flex-1">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="md:col-span-2">
           <q-input
             v-model="searchQuery"
             placeholder="ค้นหาหลักสูตร..."
@@ -62,39 +62,15 @@
           dense
           emit-value
           map-options
-          style="min-width: 160px"
         />
-
-        <q-btn-toggle
-          v-model="viewMode"
-          toggle-color="primary"
-          :options="[
-            { value: 'card', slot: 'card' },
-            { value: 'table', slot: 'table' }
-          ]"
-          dense
-          rounded
-          unelevated
-          class="border"
-        >
-          <template v-slot:card>
-            <q-icon name="grid_view" size="20px" />
-            <q-tooltip>มุมมองการ์ด</q-tooltip>
-          </template>
-          <template v-slot:table>
-            <q-icon name="view_list" size="20px" />
-            <q-tooltip>มุมมองตาราง</q-tooltip>
-          </template>
-        </q-btn-toggle>
       </div>
     </div>
 
-    <!-- Loading -->
+    <!-- Courses Grid -->
     <div v-if="loading" class="flex justify-center py-10">
       <q-spinner-dots size="50px" color="primary" />
     </div>
 
-    <!-- Empty State -->
     <div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
       <q-icon name="school" size="60px" color="grey-5" class="mb-4" />
       <p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
@@ -106,8 +82,7 @@
       />
     </div>
 
-    <!-- Card View -->
-    <div v-else-if="viewMode === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       <div
         v-for="course in filteredCourses"
         :key="course.id"
@@ -159,17 +134,26 @@
           >
             <q-tooltip>ดูรายละเอียด</q-tooltip>
           </q-btn>
+          <!-- <q-btn
+            flat
+            dense
+            icon="edit"
+            color="primary"
+            @click="navigateTo(`/instructor/courses/${course.id}/edit`)"
+          >
+            <q-tooltip>แก้ไข</q-tooltip>
+          </q-btn> -->
           <q-space />
           <q-btn flat round dense icon="more_vert">
             <q-menu>
               <q-list style="min-width: 150px">
-                <q-item v-if="course.status === 'APPROVED'" clickable v-close-popup @click="duplicateCourse(course)">
+                <q-item clickable v-close-popup @click="duplicateCourse(course)">
                   <q-item-section avatar>
                     <q-icon name="content_copy" />
                   </q-item-section>
                   <q-item-section>ทำสำเนา</q-item-section>
                 </q-item>
-                <q-separator v-if="course.status === 'APPROVED'" />
+                <q-separator />
                 <q-item clickable v-close-popup @click="confirmDelete(course)">
                   <q-item-section avatar>
                     <q-icon name="delete" color="negative" />
@@ -183,94 +167,6 @@
       </div>
     </div>
 
-    <!-- Table View -->
-    <div v-else class="bg-white rounded-xl shadow-sm overflow-hidden">
-      <q-table
-        :rows="filteredCourses"
-        :columns="tableColumns"
-        row-key="id"
-        flat
-        :pagination="tablePagination"
-        :rows-per-page-options="[10, 20, 50, 0]"
-        @update:pagination="tablePagination = $event"
-      >
-        <!-- Thumbnail + Title -->
-        <template v-slot:body-cell-title="props">
-          <q-td :props="props">
-            <div class="flex items-center gap-3">
-              <div class="w-16 h-10 rounded overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
-                <img
-                  v-if="props.row.thumbnail_url"
-                  :src="props.row.thumbnail_url"
-                  :alt="props.row.title.th"
-                  class="w-full h-full object-cover"
-                  @error="($event.target as HTMLImageElement).style.display = 'none'"
-                />
-                <q-icon v-else name="school" size="20px" color="white" />
-              </div>
-              <div class="min-w-0">
-                <div class="font-medium text-gray-900 truncate">{{ props.row.title.th }}</div>
-                <div class="text-xs text-gray-400 truncate">{{ props.row.title.en }}</div>
-              </div>
-            </div>
-          </q-td>
-        </template>
-
-        <!-- Status Badge -->
-        <template v-slot:body-cell-status="props">
-          <q-td :props="props">
-            <q-badge :color="getStatusColor(props.row.status)">
-              {{ getStatusLabel(props.row.status) }}
-            </q-badge>
-          </q-td>
-        </template>
-
-        <!-- Price -->
-        <template v-slot:body-cell-price="props">
-          <q-td :props="props">
-            <span class="font-medium" :class="props.row.is_free ? 'text-green-600' : 'text-primary-600'">
-              {{ props.row.is_free ? 'ฟรี' : `฿${parseFloat(props.row.price).toLocaleString()}` }}
-            </span>
-          </q-td>
-        </template>
-
-        <!-- Date -->
-        <template v-slot:body-cell-created_at="props">
-          <q-td :props="props">
-            {{ formatDate(props.row.created_at) }}
-          </q-td>
-        </template>
-
-        <!-- Actions -->
-        <template v-slot:body-cell-actions="props">
-          <q-td :props="props">
-            <q-btn flat round dense icon="visibility" color="grey" size="sm" @click="handleViewDetails(props.row)">
-              <q-tooltip>ดูรายละเอียด</q-tooltip>
-            </q-btn>
-            <q-btn flat round dense icon="more_vert" size="sm">
-              <q-menu>
-                <q-list style="min-width: 150px">
-                  <q-item v-if="props.row.status === 'APPROVED'" clickable v-close-popup @click="duplicateCourse(props.row)">
-                    <q-item-section avatar>
-                      <q-icon name="content_copy" />
-                    </q-item-section>
-                    <q-item-section>ทำสำเนา</q-item-section>
-                  </q-item>
-                  <q-separator v-if="props.row.status === 'APPROVED'" />
-                  <q-item clickable v-close-popup @click="confirmDelete(props.row)">
-                    <q-item-section avatar>
-                      <q-icon name="delete" color="negative" />
-                    </q-item-section>
-                    <q-item-section class="text-negative">ลบ</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </template>
-      </q-table>
-    </div>
-
     <!-- Rejection Details Dialog -->
     <q-dialog v-model="rejectionDialog">
       <q-card style="min-width: 400px">
@@ -360,17 +256,6 @@ const courses = ref<CourseResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterStatus = ref<string | null>(null);
-const viewMode = ref<'card' | 'table'>('card');
-
-// Table config
-const tablePagination = ref({ page: 1, rowsPerPage: 10 });
-const tableColumns = [
-  { name: 'title', label: 'หลักสูตร', field: 'title', align: 'left' as const, sortable: true },
-  { name: 'status', label: 'สถานะ', field: 'status', align: 'center' as const, sortable: true },
-  { name: 'price', label: 'ราคา', field: 'price', align: 'center' as const, sortable: true },
-  { name: 'created_at', label: 'วันที่สร้าง', field: 'created_at', align: 'center' as const, sortable: true },
-  { name: 'actions', label: 'จัดการ', field: 'actions', align: 'center' as const }
-];
 
 // Status options
 const statusOptions = [
diff --git a/frontend_management/pages/instructor/index.vue b/frontend_management/pages/instructor/index.vue
index 16411da0..8b7fb904 100644
--- a/frontend_management/pages/instructor/index.vue
+++ b/frontend_management/pages/instructor/index.vue
@@ -171,8 +171,6 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar } from 'quasar';
-
 definePageMeta({
   layout: 'instructor',
   middleware: 'auth'
@@ -181,7 +179,6 @@ definePageMeta({
 const authStore = useAuthStore();
 const instructorStore = useInstructorStore();
 const router = useRouter();
-const $q = useQuasar();
 
 // Navigation functions
 const goToProfile = () => {
@@ -193,23 +190,8 @@ const goToSettings = () => {
 };
 
 const handleLogout = () => {
-  $q.dialog({
-    title: 'ยืนยันการออกจากระบบ',
-    message: 'คุณต้องการออกจากระบบใช่หรือไม่?',
-    cancel: {
-      label: 'ยกเลิก',
-      flat: true,
-      color: 'grey-8'
-    },
-    ok: {
-      label: 'ออกจากระบบ',
-      color: 'negative'
-    },
-    persistent: true
-  }).onOk(() => {
-    authStore.logout();
-    router.push('/login');
-  });
+  authStore.logout();
+  router.push('/login');
 };
 
 // Fetch dashboard data on mount
diff --git a/frontend_management/services/admin.service.ts b/frontend_management/services/admin.service.ts
index 8a90c27f..cdea0ea4 100644
--- a/frontend_management/services/admin.service.ts
+++ b/frontend_management/services/admin.service.ts
@@ -320,25 +320,7 @@ const getAuthToken = (): string => {
     return tokenCookie.value || '';
 };
 
-// Role interface
-export interface RoleResponse {
-    id: number;
-    code: string;
-}
-
 export const adminService = {
-    async getRoles(): Promise<RoleResponse[]> {
-        const config = useRuntimeConfig();
-        const token = getAuthToken();
-        const response = await $fetch<{ roles: RoleResponse[] }>('/api/user/roles', {
-            baseURL: config.public.apiBaseUrl as string,
-            headers: {
-                Authorization: `Bearer ${token}`
-            }
-        });
-        return response.roles;
-    },
-
     async getUsers(): Promise<AdminUserResponse[]> {
         const config = useRuntimeConfig();
         const token = getAuthToken();