diff --git a/Frontend-Learner/app.vue b/Frontend-Learner/app.vue
index a1ac35c7..8070d468 100644
--- a/Frontend-Learner/app.vue
+++ b/Frontend-Learner/app.vue
@@ -1,20 +1,27 @@
-<script setup>
-// ดึงฟังก์ชันจัดการ Authentication
-const { fetchUserProfile, isAuthenticated } = useAuth()
+<script setup lang="ts">
+/**
+ * @file app.vue
+ * @description Root application component.
+ * Handles initialization of authentication and theme settings.
+ */
 
-// เมื่อ App เริ่มทำงาน (Mounted)
+// Initialize composables
+const { fetchUserProfile, isAuthenticated } = useAuth()
+const { isDark, set: setTheme } = useThemeMode()
+
+// App initialization logic
 onMounted(() => {
-  // 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
+  // 1. Fetch user profile if tokens exist
   if (isAuthenticated.value) {
     fetchUserProfile()
   }
 
-  // 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
+  // 2. Initialize theme from persistent storage or system preference
   const savedTheme = localStorage.getItem('theme')
-  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
+  if (savedTheme) {
+    setTheme(savedTheme === 'dark')
+  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setTheme(true)
   }
 })
 </script>
diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index 960858a7..7f1001f3 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: #3b82f6;
+  color: #2563eb;
   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/CurriculumSidebar.vue b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
index 382be584..7bd6526e 100644
--- a/Frontend-Learner/components/classroom/CurriculumSidebar.vue
+++ b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
@@ -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">
+      <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">
         
         <!-- 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-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>
            
            <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}%` }"
@@ -124,24 +124,24 @@ watch(() => props.courseData, (newData) => {
         </div>
 
         <!-- 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">
+         <div class="flex-1 overflow-y-auto bg-slate-50 dark:!bg-slate-900 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 -->
                     <q-expansion-item
                         v-model="chapterOpenState[chapter.id]"
-                        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"
+                        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"
                     >
                         <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) -->
                                     <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-800'">
+                                            ? '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'">
                                         <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>
@@ -149,7 +149,7 @@ watch(() => props.courseData, (newData) => {
                                 <!-- 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>
@@ -157,13 +157,13 @@ watch(() => props.courseData, (newData) => {
                         </template>
 
                         <!-- Lessons List -->
-                        <div class="bg-slate-50 dark:bg-[#0f1219]/50 border-t border-slate-100 dark:border-slate-800 w-full">
+                        <div class="bg-slate-50 dark:!bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 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-800/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-700/50 w-full"
                                 :class="currentLessonId === lesson.id 
-                                    ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/10' 
+                                    ? 'border-blue-600 bg-blue-50 dark:!bg-blue-900/40' 
                                     : 'border-transparent'"
                                 @click="!lesson.is_locked && emit('select-lesson', lesson.id)"
                             >
@@ -178,13 +178,13 @@ watch(() => props.courseData, (newData) => {
                                     <!-- 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 -->
                                     <q-icon v-else-if="lesson.is_locked" 
                                             name="lock" 
-                                            class="text-slate-400 opacity-70" 
+                                            class="text-slate-400 dark:!text-slate-500 opacity-70" 
                                             size="18px" 
                                     />
                                     <!-- Not Started -->
@@ -193,7 +193,7 @@ watch(() => props.courseData, (newData) => {
 
                                 <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>
diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index c4714d79..1cd55e5a 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -57,7 +57,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
 </script>
 
 <template>
-  <div class="group relative flex flex-col bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
+  <div class="group relative flex flex-col bg-white dark:!bg-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">
     
     <!-- Thumbnail Section -->
     <div class="relative w-full aspect-video overflow-hidden">
@@ -125,7 +125,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
             v-if="showViewDetails && !completed && !progress"
             flat
             rounded
-            class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
+            class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-500/10 dark:!text-blue-400 dark:hover:!bg-blue-500/20"
             :label="$t('menu.viewDetails')"
             :to="`/course/${id}`"
           />
diff --git a/Frontend-Learner/components/discovery/CourseDetailView.vue b/Frontend-Learner/components/discovery/CourseDetailView.vue
index 3f1446a8..8560cf5a 100644
--- a/Frontend-Learner/components/discovery/CourseDetailView.vue
+++ b/Frontend-Learner/components/discovery/CourseDetailView.vue
@@ -66,11 +66,6 @@ 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 -->
             <div class="lg:col-span-2 space-y-8">
diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue
index 0fd7c08a..2bdba608 100644
--- a/Frontend-Learner/components/layout/AppHeader.vue
+++ b/Frontend-Learner/components/layout/AppHeader.vue
@@ -1,168 +1,116 @@
 <script setup lang="ts">
 /**
  * @file AppHeader.vue
- * @description The main header for the authenticated application dashboard.
- * Uses Quasar QToolbar.
+ * @description The main header for the EduLearn application dashboard.
  */
 
-import { ref, computed } from "vue";
-
 const props = defineProps<{
   /** Controls visibility of the sidebar toggle button */
   showSidebarToggle?: boolean;
-  /** Type of navigation links to display */
-  navType?: "public" | "learner";
 }>();
 
 const emit = defineEmits<{
   /** Emitted when the hamburger menu is clicked */
   toggleSidebar: [];
-  /** Emitted when the mobile menu toggle is clicked */
-  toggleRightDrawer: [];
 }>();
 
-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 { currentUser } = useAuth();
+const { locale, setLocale } = useI18n();
+const { isDark, set: setTheme } = useThemeMode();
 
+const toggleLanguage = () => {
+  setLocale(locale.value === 'th' ? 'en' : 'th');
+};
 
+const toggleTheme = () => {
+  setTheme(!isDark.value);
+};
 </script>
 
 <template>
-  <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">
+  <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">
+    
+    <!-- Left: 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">
       
-      <!-- Mobile Sidebar Toggle (For non-learner routes) -->
+      <!-- Theme Toggle -->
       <q-btn
-        v-if="showSidebarToggle !== false && navTypeComputed !== 'learner' && $q.screen.lt.md"
         flat
         round
         dense
-        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')"
+        :icon="isDark ? 'dark_mode' : 'light_mode'"
+        :class="isDark ? 'text-blue-400' : 'text-amber-500'"
+        class="transition-all active:scale-90"
+        size="12px"
+        @click="toggleTheme"
       >
-        <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
+        <q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
+      </q-btn>
+
+      <!-- Language Switcher (Pill Style) -->
+      <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>
-        <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>
+
+        <!-- รูปโปรไฟล์พร้อมวงแหวน 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>
       </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>
-/* High Priority Visibility Logic */
-@media (max-width: 1023px) {
-  .header-desktop {
+/* 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 {
     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 6cdea9ef..3e9cbd8d 100644
--- a/Frontend-Learner/components/layout/AppSidebar.vue
+++ b/Frontend-Learner/components/layout/AppSidebar.vue
@@ -1,79 +1,145 @@
 <script setup lang="ts">
 /**
  * @file AppSidebar.vue
- * @description Sidebar navigation for the authenticated dashboard.
- * Uses Quasar QList for structure.
+ * @description เมนูด้านข้างสำหรับการนำทาง (Sidebar Navigation)
  */
 
-const { sidebarItems } = useNavItems()
+// 1. นำเข้า Composables และไลบรารี
+import { useQuasar } from 'quasar'
 const { t } = useI18n()
-const navItems = sidebarItems
+const route = useRoute()
+const $q = useQuasar()
+const { logout } = useAuth()
+const { isDark } = useThemeMode()
 
+// 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') }
+])
 
-const handleNavigate = (path: string) => {
-  if (import.meta.client) {
-    window.location.href = path
-  }
+// 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()
+  })
 }
 </script>
 
 <template>
-  <div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
+  <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">
     
+    <!-- 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>
 
-    <!-- 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" 
+    <!-- Main Navigation -->
+    <div class="space-y-1 mb-8">
+      <NuxtLink 
+        v-for="item in menuItems" 
         :key="item.to" 
-        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') }"
+        :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'"
       >
-        <q-item-section avatar>
-          <q-icon :name="item.icon" size="22px" />
-        </q-item-section>
+        <q-icon :name="item.icon" size="24px" class="transition-colors" />
+        <span class="font-bold text-[15px]">{{ item.label }}</span>
         
-        <q-item-section>
-          <q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
-        </q-item-section>
-      </q-item>
-    </q-list>
+        <!-- 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>
 
+    <!-- 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>
-.sidebar-item--active {
-  background: #eff6ff !important; /* blue-50 */
-  color: #1d4ed8 !important;       /* blue-700 */
-  position: relative;
+.nav-item.active {
+  background: #EFF6FF;
+  color: #2563EB;
 }
 
-.sidebar-item--active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 15%;
-  height: 70%;
-  width: 4px;
-  background: #2563eb;
-  border-radius: 0 4px 4px 0;
+.dark .nav-item.active {
+  background: rgba(37,99,235,0.1);
+  color: #60A5FA;
 }
 
-/* Dark Mode Active State Enhancement */
-.dark .sidebar-item--active {
-  background: rgba(59, 130, 246, 0.12) !important;
-  color: #60a5fa !important;     /* blue-400 */
+.nav-item.active .q-icon {
+  color: #2563EB;
 }
 
-.dark .sidebar-item--active .q-icon {
-  color: #60a5fa !important;      /* blue-400 */
-}
-
-.dark .sidebar-item--active::before {
-  background: #3b82f6;
+.dark .nav-item.active .q-icon {
+  color: #60A5FA;
 }
 </style>
diff --git a/Frontend-Learner/components/layout/LandingFooter.vue b/Frontend-Learner/components/layout/LandingFooter.vue
index 52354631..eb65fa8b 100644
--- a/Frontend-Learner/components/layout/LandingFooter.vue
+++ b/Frontend-Learner/components/layout/LandingFooter.vue
@@ -6,31 +6,34 @@
 </script>
 
 <template>
-  <footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
+  <footer class="bg-white 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 -->
         <div class="space-y-6">
-          <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>
+           <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>
 
         <!-- Links -->
         <div class="lg:pl-8">
-          <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>
+          <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>
             <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>
@@ -39,7 +42,7 @@
         <!-- Support -->
         <div>
           <h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
-          <ul class="space-y-3 text-sm text-slate-500">
+          <ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
             <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>
@@ -53,11 +56,9 @@
           <div class="flex flex-col gap-5">
             <!-- Location -->
             <div class="flex flex-row items-start gap-4 flex-nowrap">
-              <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>
+              <q-icon name="o_location_on" size="20px" color="slate-800" />
               <div class="flex flex-col gap-1 min-w-0">
-                <span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
+                <span class="font-semibold text-slate-800 text-sm leading-tight">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>
@@ -66,20 +67,16 @@
 
             <!-- Phone -->
             <div class="flex flex-row items-center gap-4 flex-nowrap">
-              <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">
+              <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 font-semibold text-sm transition-colors truncate">
                 052-076-025
               </a>
             </div>
 
             <!-- Email -->
             <div class="flex flex-row items-center gap-4 flex-nowrap">
-              <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">
+              <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 font-semibold text-sm transition-colors truncate">
                 info@chamomind.com
               </a>
             </div>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index cb4efe7d..944c31ea 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -5,6 +5,7 @@
  * Features a transparent background that becomes solid/glass upon scrolling.
  * Responsive: Collapses into a drawer on mobile (md breakpoint).
  */
+const text = ref('');
 
 // Track scrolling state to adjust header styling
 const isScrolled = ref(false)
@@ -41,24 +42,24 @@ onUnmounted(() => {
     - Transitions between transparent and glass effect based on scroll.
   -->
   <header 
-    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']"
+    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 ']"
   >
-    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-start">
+    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
       <!-- Left Section: Logo -->
       <NuxtLink to="/" class="flex items-center gap-3 group">
-        <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 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-black text-lg leading-none tracking-tight transition-colors"
+            class="font-bold text-lg leading-none tracking-tight transition-colors"
             :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
           >
-            E-Learning
+            EduLearn
           </span>
           <span 
-            class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
+            class="text-[10px] font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors"
             :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
           >
             Platform
@@ -67,11 +68,11 @@ onUnmounted(() => {
       </NuxtLink>
 
       <!-- 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">
+     <!--  <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
         <NuxtLink 
           to="/browse" 
           class="transition-colors relative group py-2"
-          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
+          :class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 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,21 +80,23 @@ onUnmounted(() => {
         <NuxtLink 
           to="/browse/recommended" 
           class="transition-colors relative group py-2"
-          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
+          :class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 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> -->
+
+
 
       <!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
-      <div class="flex desktop-nav items-center gap-4 ml-auto">
+      <div class="flex desktop-nav items-center gap-4">
         <template v-if="!isAuthenticated">
           <!-- Login Button -->
           <NuxtLink 
             to="/auth/login" 
-            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']"
+            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']"
           >
             {{ $t('auth.login') }}
           </NuxtLink>
@@ -101,7 +104,7 @@ onUnmounted(() => {
           <!-- Register Button -->
           <NuxtLink 
             to="/auth/register" 
-            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"
+            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"
           >
             {{ $t('auth.getStarted') }}
           </NuxtLink>
@@ -110,7 +113,7 @@ onUnmounted(() => {
         <template v-else>
           <NuxtLink 
             to="/dashboard" 
-            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"
+            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"
           >
              {{ $t('landing.goToDashboard') }}
           </NuxtLink>
@@ -169,14 +172,6 @@ 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">
diff --git a/Frontend-Learner/components/profile/PasswordChangeForm.vue b/Frontend-Learner/components/profile/PasswordChangeForm.vue
index 67e6f031..0ca80cde 100644
--- a/Frontend-Learner/components/profile/PasswordChangeForm.vue
+++ b/Frontend-Learner/components/profile/PasswordChangeForm.vue
@@ -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-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 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>
             <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-amber-500/20"
-                style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
+                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;"
                 :label="$t('profile.changePasswordBtn')"
                 :loading="loading"
             />
diff --git a/Frontend-Learner/composables/useAuth.ts b/Frontend-Learner/composables/useAuth.ts
index aa8e7078..61f5ee0a 100644
--- a/Frontend-Learner/composables/useAuth.ts
+++ b/Frontend-Learner/composables/useAuth.ts
@@ -1,45 +1,4 @@
-
-// 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
-}
+import type { User, LoginResponse, RegisterPayload } from '@/types/auth'
 
 // ==========================================
 // Composable: useAuth
diff --git a/Frontend-Learner/composables/useCourse.ts b/Frontend-Learner/composables/useCourse.ts
index 1ae4a969..d320302a 100644
--- a/Frontend-Learner/composables/useCourse.ts
+++ b/Frontend-Learner/composables/useCourse.ts
@@ -1,151 +1,14 @@
-// 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
-}
+import type { 
+    Course, 
+    CourseResponse, 
+    SingleCourseResponse, 
+    EnrolledCourse, 
+    EnrolledCourseResponse, 
+    QuizAnswerSubmission, 
+    QuizSubmitRequest, 
+    QuizResult, 
+    Certificate 
+} from '@/types/course'
 
 // ==========================================
 // Composable: useCourse
diff --git a/Frontend-Learner/constants/landing.ts b/Frontend-Learner/constants/landing.ts
new file mode 100644
index 00000000..76747d36
--- /dev/null
+++ b/Frontend-Learner/constants/landing.ts
@@ -0,0 +1,43 @@
+/**
+ * @file landing.ts
+ * @description Static data for the 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 db41be18..b854b7c6 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -24,7 +24,8 @@
     "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"
+    "noRecommended": "No recommended courses found",
+    "moreCourses": "More Courses"
   },
   "menu": {
     "continueLearning": "Continue Learning",
@@ -87,10 +88,14 @@
     "overview": "Home",
     "myCourses": "My Courses",
     "browseCourses": "Browse Courses",
-    "onlineCourses": "Online Courses",
+    "onlineCourses": "All Courses",
     "recommendedCourses": "Recommended Courses",
     "announcements": "Announcements",
-    "profile": "My Profile"
+    "profile": "My Profile",
+    "accountGroup": "Account",
+    "promoTitle": "Find the right course",
+    "promoSubtitle": "Level up your skills",
+    "learnMore": "Learn More"
   },
   "discovery": {
     "title": "All Courses",
@@ -98,6 +103,9 @@
     "sortRecent": "Sort by: Recent",
     "sortPopular": "Popular",
     "categoryTitle": "Categories",
+    "design": "Design",
+    "programming": "Programming",
+    "business": "Business",
     "showMore": "Show More",
     "showLess": "Show Less",
     "emptyTitle": "No courses found",
@@ -107,15 +115,22 @@
     "backToCatalog": "Back to Catalog",
     "selectable": "Selected",
     "foundTotal": "Found Total",
-    "items": "items"
+    "items": "items",
+    "subtitle": "Choose to learn new skills from our curated quality courses",
+    "searchBtn": "Search"
   },
   "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"
+    "goToDiscovery": "Go to Courses",
+    "searchNoResult": "No matching courses found",
+    "searchNoResultDesc": "Try changing category or your search term"
   },
   "enrollment": {
     "successTitle": "Enrollment Successful!",
@@ -144,7 +159,7 @@
     "accountDetails": "Account Details",
     "editPersonalDesc": "Edit Personal Information",
     "yourAvatar": "Your Profile Photo",
-    "avatarHint": "PNG, JPG only",
+    "avatarHint": "Only JPG, PNG",
     "uploadNew": "Upload New Photo",
     "changeAvatar": "Change Profile Photo",
     "removeAvatar": "Remove Profile Photo",
@@ -175,7 +190,15 @@
     "emailVerified": "Email Verified",
     "myCertificates": "My Certificates",
     "viewCertificate": "View Certificate",
-    "issuedAt": "Issued at"
+    "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"
   },
   "userMenu": {
     "home": "Home",
@@ -198,7 +221,9 @@
     "emailVerifiedDesc": "Your account has been successfully verified.",
     "invalidToken": "Invalid verification token",
     "tokenExpired": "Token expired or invalid",
-    "logout": "Log Out"
+    "logout": "Log Out",
+    "logoutConfirmTitle": "Confirm Logout",
+    "logoutConfirmMessage": "Are you sure you want to log out of the system?"
   },
   "language": {
     "label": "Language / ภาษา",
@@ -209,6 +234,7 @@
     "newBadge": "New",
     "popularBadge": "Popular",
     "save": "Save",
+    "saveChanges": "Save Changes",
     "ok": "OK",
     "close": "Close",
     "cancel": "Cancel",
@@ -222,7 +248,9 @@
     "backToHome": "Back to Home",
     "error": "Error",
     "loading": "Loading",
-    "items": "Items"
+    "items": "Items",
+    "student": "Student",
+    "latest": "Latest"
   },
   "classroom": {
     "backToDashboard": "Back to My Courses",
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index 86154237..d096b4ad 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -24,7 +24,8 @@
     "emptyLibraryDesc": "เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ",
     "viewAllCourses": "ดูคอร์สเรียนทั้งหมด",
     "recommendedCourses": "คอร์สแนะนำ",
-    "noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ"
+    "noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ",
+    "moreCourses": "คอร์สเพิ่มเติม"
   },
   "menu": {
     "continueLearning": "เรียนต่อจากเดิม",
@@ -87,10 +88,14 @@
     "overview": "หน้าหลัก",
     "myCourses": "คอร์สของฉัน",
     "browseCourses": "ค้นหาคอร์ส",
-    "onlineCourses": "คอร์สออนไลน์",
+    "onlineCourses": "คอร์สเรียนทั้งหมด",
     "recommendedCourses": "คอร์สเรียนแนะนำ",
     "announcements": "ข่าวประกาศ",
-    "profile": "บัญชีผู้ใช้"
+    "profile": "บัญชีผู้ใช้",
+    "accountGroup": "บัญชี",
+    "promoTitle": "ค้นหาคอร์สที่ใช่",
+    "promoSubtitle": "ยกระดับทักษะของคุณ",
+    "learnMore": "เรียนรู้เพิ่มเติม"
   },
   "discovery": {
     "title": "รายการคอร์สทั้งหมด",
@@ -98,6 +103,9 @@
     "sortRecent": "เรียงตาม: ล่าสุด",
     "sortPopular": "ยอดนิยม",
     "categoryTitle": "หมวดหมู่",
+    "design": "การออกแบบ",
+    "programming": "การเขียนโปรแกรม",
+    "business": "ธุรกิจ",
     "showMore": "แสดงเพิ่มเติม",
     "showLess": "แสดงน้อยลง",
     "emptyTitle": "ไม่พบผลการค้นหา",
@@ -108,15 +116,21 @@
     "selectable": "รายการที่เลือก",
     "foundTotal": "พบทั้งหมด",
     "items": "รายการ",
-    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ"
+    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ",
+    "searchBtn": "ค้นหา"
   },
   "myCourses": {
+    "title": "คอร์สของฉัน",
+    "subtitle": "ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้",
+    "searchPlaceholder": "ค้นหาชื่อคอร์สของฉัน...",
     "filterAll": "ทั้งหมด",
     "filterProgress": "กำลังเรียน",
     "filterCompleted": "เรียนจบแล้ว",
     "emptyTitle": "ยังไม่มีคอร์สในหมวดหมู่นี้",
     "emptyDesc": "คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา",
-    "goToDiscovery": "ไปที่รายการคอร์ส"
+    "goToDiscovery": "ไปที่รายการคอร์ส",
+    "searchNoResult": "ไม่พบคอร์สที่สอดคล้อง",
+    "searchNoResultDesc": "ลองเปลี่ยนหมวดหมู่หรือคำค้นหาของคุณ"
   },
   "enrollment": {
     "successTitle": "ลงทะเบียนสำเร็จ!",
@@ -145,7 +159,7 @@
     "accountDetails": "รายละเอียดบัญชี",
     "editPersonalDesc": "แก้ไขข้อมูลส่วนตัว",
     "yourAvatar": "รูปโปรไฟล์ของคุณ",
-    "avatarHint": "เฉพาะไฟล์ png , jpg",
+    "avatarHint": "เฉพาะไฟล์ JPG, PNG",
     "uploadNew": "อัพโหลดรูปโปรไฟล์",
     "changeAvatar": "เปลี่ยนรูปโปรไฟล์",
     "removeAvatar": "ลบรูปโปรไฟล์",
@@ -176,7 +190,15 @@
     "emailVerified": "ยืนยันอีเมลเสร็จสิ้น",
     "myCertificates": "ประกาศนียบัตรของฉัน",
     "viewCertificate": "ดูประกาศนียบัตร",
-    "issuedAt": "ออกเมื่อ"
+    "issuedAt": "ออกเมื่อ",
+    "publicInfo": "ข้อมูลที่แสดงต่อสาธารณะบนแพลตฟอร์ม",
+    "uploading": "กำลังอัปโหลด...",
+    "selectPrefix": "เลือกคำนำหน้า",
+    "verifyNow": "คลิกเพื่อยืนยันอีเมล",
+    "verifying": "กำลังส่ง...",
+    "saving": "กำลังบันทึก...",
+    "securitySubtitle": "จัดการรหัสผ่านและการเข้าถึงบัญชี",
+    "password": "รหัสผ่าน"
   },
   "userMenu": {
     "home": "หน้าหลัก",
@@ -187,7 +209,7 @@
     "logout": "ออกจากระบบ"
   },
   "landing": {
-    "allCourses": "คอร์สทั้งหมด",
+    "allCourses": "คอร์สเรียนทั้งหมด",
     "discovery": "ค้นพบ",
     "goToDashboard": "เข้าสู่หน้าจัดการเรียน"
   },
@@ -199,7 +221,9 @@
     "emailVerifiedDesc": "บัญชีของคุณได้รับการยืนยันเรียบร้อยแล้ว",
     "invalidToken": "Token ยืนยันตัวตนไม่ถูกต้อง",
     "tokenExpired": "Token หมดอายุหรือล้มเหลว",
-    "logout": "ออกจากระบบ"
+    "logout": "ออกจากระบบ",
+    "logoutConfirmTitle": "ยืนยันการออกจากระบบ",
+    "logoutConfirmMessage": "คุณแน่ใจหรือไม่ว่าต้องการออกจากระบบ?"
   },
   "language": {
     "label": "ภาษา / Language",
@@ -210,6 +234,7 @@
     "newBadge": "ใหม่",
     "popularBadge": "ยอดนิยม",
     "save": "บันทึก",
+    "saveChanges": "บันทึกการเปลี่ยนแปลง",
     "ok": "ตกลง",
     "close": "ปิด",
     "cancel": "ยกเลิก",
@@ -223,7 +248,9 @@
     "backToHome": "กลับสู่หน้าหลัก",
     "error": "เกิดข้อผิดพลาด",
     "loading": "กำลังโหลด",
-    "items": "รายการ"
+    "items": "รายการ",
+    "student": "นักเรียน",
+    "latest": "ล่าสุด"
   },
   "classroom": {
     "backToDashboard": "กลับไปคอร์สของฉัน",
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index 82b02528..b3c48c41 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -1,181 +1,65 @@
 <script setup lang="ts">
 /**
  * @file default.vue
- * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
- * Uses Quasar QLayout for responsive structure.
+ * @description Master layout for the EduLearn platform.
  */
 
-// Initialize global theme management
 useThemeMode()
 
-const { currentUser, logout } = useAuth()
-const { isDark, set: setTheme } = useThemeMode()
-const leftDrawerOpen = ref(false)
-const rightDrawerOpen = ref(false)
+const leftDrawerOpen = ref(true)
 
 const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
 
-const toggleRightDrawer = () => {
-  rightDrawerOpen.value = !rightDrawerOpen.value
-}
-
 const route = useRoute()
-// Automatically hide sidebar for learner routes
-const shouldHideSidebar = computed(() => {
-  const silentRoutes = ['/dashboard', '/browse', '/classroom', '/course']
-  return silentRoutes.some(r => route.path.startsWith(r))
+// Show sidebar for these routes
+const isDashboardRoute = computed(() => {
+  const routes = ['/dashboard', '/browse', '/classroom', '/course']
+  return routes.some(r => route.path.startsWith(r))
 })
 </script>
 
 <template>
-  <q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
+  <q-layout view="lHh Lpr lFf" class="bg-[#F8FAFC] dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
+    
     <!-- Header -->
     <q-header
-      class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white border-none shadow-none"
+      class="bg-transparent text-slate-900 dark:!text-white border-none shadow-none"
     >
-      <AppHeader 
-        @toggleSidebar="toggleLeftDrawer" 
-        @toggleRightDrawer="toggleRightDrawer"
-        :showSidebarToggle="!shouldHideSidebar" 
-      />
+      <AppHeader @toggleSidebar="toggleLeftDrawer" />
     </q-header>
 
-    <!-- Sidebar (Drawer - Desktop Left) -->
+    <!-- Navigation Sidebar -->
     <q-drawer
-      v-if="!shouldHideSidebar"
       v-model="leftDrawerOpen"
       show-if-above
       :width="280"
-      class="bg-white dark:!bg-[#0f172a]"
+      side="left"
+      bordered
+      class="bg-white dark:!bg-[#0f172a] border-none"
     >
       <AppSidebar />
     </q-drawer>
 
-    <!-- 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 -->
+    <!-- Main Content Area -->
     <q-page-container>
-      <q-page class="relative">
-        <slot />
+      <q-page class="px-3 py-6 md:p-8">
+        <div class="max-w-[1600px] mx-auto">
+          <slot />
+        </div>
       </q-page>
     </q-page-container>
 
-
   </q-layout>
 </template>
 
 <style>
-/* Ensure fonts are applied */
-.font-inter {
-  font-family: var(--font-main);
+/* 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;
 }
 </style>
diff --git a/Frontend-Learner/nuxt.config.ts b/Frontend-Learner/nuxt.config.ts
index 239a3627..e0617f89 100644
--- a/Frontend-Learner/nuxt.config.ts
+++ b/Frontend-Learner/nuxt.config.ts
@@ -33,8 +33,11 @@ export default defineNuxtConfig({
 
   // การตั้งค่า Quasar Framework
   quasar: {
+    iconSet: 'material-icons-outlined',
     extras: {
-      fontIcons: ["material-icons"],
+      fontIcons: [
+        "material-icons", 
+        "material-icons-outlined"] // ใช้ไอคอน Material Icons, material-icons-outlined
     },
     plugins: ["Notify", "Dialog"], // เปิดใช้ Plugin Notify และ Dialog
     config: {
diff --git a/Frontend-Learner/pages/auth/login.vue b/Frontend-Learner/pages/auth/login.vue
index e30602df..7e75ee5a 100644
--- a/Frontend-Learner/pages/auth/login.vue
+++ b/Frontend-Learner/pages/auth/login.vue
@@ -237,17 +237,24 @@ 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>
 
-        <!-- 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">
+        <div class="text-center mt-8">
             <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">
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index 01b5369d..e8f15f77 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 /**
  * @file discovery.vue
- * @description Course Discovery / Catalog Page.
- * Allows users to browse, filter, and view details of available courses.
- * Includes a toggleable detailed view for course previews.
+ * @description Course Discovery / Catalog Page matching Figma Desktop Layout.
  */
 
 definePageMeta({
@@ -15,11 +13,19 @@ useHead({
   title: "รายการคอร์ส - e-Learning",
 });
 
-// ==========================================
-// 1. State Management
+const { t, locale } = useI18n();
+const { currentUser } = useAuth();
+const $q = useQuasar();
+const { fetchCategories } = useCategory();
+const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } = useCourse();
+
 const showDetail = ref(false);
 const searchQuery = ref("");
-const selectedCategoryIds = ref<number[]>([]);
+const activeCategory = ref<number | 'all'>('all');
+const viewMode = ref<'grid' | 'list'>('grid');
+const sortBy = ref('ยอดนิยม');
+const sortOptions = ['ยอดนิยม', 'ล่าสุด', 'ราคาต่ำ-สูงสุด', 'ราคาสูง-ต่ำสุด'];
+
 const categories = ref<any[]>([]);
 const courses = ref<any[]>([]);
 const selectedCourse = ref<any>(null);
@@ -28,47 +34,43 @@ 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 { t, locale } = useI18n();
-const { currentUser } = useAuth();
-const $q = useQuasar();
-const { fetchCategories } = useCategory();
-const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } =
-  useCourse();
+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'
+}
 
-// 2. Computed Properties
-const sortOption = ref(t("discovery.sortRecent"));
-const sortOptions = computed(() => [t("discovery.sortRecent")]);
+const formatPrice = (course: any) => {
+    if (course.is_free) return 'ฟรี';
+    if (!course.price) return 'ฟรี';
+    return `฿${parseFloat(course.price).toLocaleString()}`;
+};
 
-const filteredCourses = computed(() => {
-  let result = courses.value;
+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 || 'ผู้สอน';
+};
 
-  // 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 || [];
@@ -76,12 +78,7 @@ const loadCategories = async () => {
 
 const loadCourses = async (page = 1) => {
   isLoading.value = true;
-
-  // Use server-side filtering if exactly one category is selected
-  const categoryId =
-    selectedCategoryIds.value.length === 1
-      ? selectedCategoryIds.value[0]
-      : undefined;
+  const categoryId = activeCategory.value === 'all' ? undefined : activeCategory.value as number;
 
   const res = await fetchCourses({
     category_id: categoryId,
@@ -92,7 +89,17 @@ const loadCourses = async (page = 1) => {
   });
 
   if (res.success) {
-    courses.value = res.data || [];
+    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
+       }
+    });
     totalPages.value = res.totalPages || 1;
     currentPage.value = res.page || 1;
   }
@@ -126,231 +133,175 @@ const handleEnroll = async (id: number) => {
   isEnrolling.value = false;
 };
 
-// Watch for category selection changes to reload courses
 watch(
-  selectedCategoryIds,
+  activeCategory,
   () => {
     currentPage.value = 1;
     loadCourses(1);
-  },
-  { deep: true },
+  }
 );
 
-const toggleCategory = (id: number) => {
-  const index = selectedCategoryIds.value.indexOf(id);
-  if (index === -1) {
-    selectedCategoryIds.value.push(id);
-  } else {
-    selectedCategoryIds.value.splice(index, 1);
+onMounted(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);
   }
-};
+  
+  await loadCourses(1);
 
-onMounted(() => {
-  loadCategories();
-  loadCourses();
+  if (route.query.course_id) {
+    selectCourse(Number(route.query.course_id));
+  }
 });
 </script>
 
 <template>
-  <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 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>
-            <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>
+
+            <!-- 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>
+                
+
             </div>
-          </q-btn>
-        </div>
-      </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>
+            <!-- Loader -->
+            <div v-if="isLoading" class="flex justify-center py-24">
+               <q-spinner size="3rem" color="primary" />
+            </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 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>
         </div>
 
-      <!-- Main Layout: Grid Only -->
-      <div class="w-full">
-        <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
-          <div
-            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
-          >
-            <CourseCard
-              v-for="course in filteredCourses"
-              :key="course.id"
-              v-bind="{ ...course, image: course.thumbnail_url }"
-              show-view-details
-              @view-details="selectCourse(course.id)"
-            />
-          </div>
-
-          <!-- 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") }}
+        <!-- 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>
-    </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>
-/* 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;
+/* Disable default scrollbar for filter container */
+.scrollbar-hide::-webkit-scrollbar {
+    display: 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;
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 </style>
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index 415ee060..669fa5d5 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -1,26 +1,22 @@
 <script setup lang="ts">
 /**
- * @file courses.vue
+ * @file index.vue
  * @description Page displaying all available courses in a public catalog format.
- * Matches the premium dark theme of the landing page.
+ * Matches the requested modern layout.
  */
 
-// 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
@@ -30,7 +26,6 @@ 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) => {
@@ -41,357 +36,234 @@ const selectCategory = (slug: string) => {
   }
 }
 
-// Watch route query to sync state
 watch(() => route.query.category, (newCategory) => {
   selectedCategory.value = (newCategory as string) || 'all'
 })
 
-// Specific labels mapping as requested
-const categoryLabels: Record<string, string> = {
-  all: "ทั้งหมด",
-  programming: "การเขียนโปรแกรม",
-  design: "การออกแบบ",
-  business: "ธุรกิจ"
+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 getCategoryLabel = (category: any) => {
-  if (categoryLabels[category.slug]) {
-    return categoryLabels[category.slug]
-  }
-  return getLocalizedText(category.name)
-}
-
-// Fetch categories on mount
 await useAsyncData('categories-list', () => fetchCategories())
 
-// Fetch courses from API (reactive to selectedCategory)
-const { data: coursesResponse, error, refresh } = await useAsyncData(
+const { data: coursesResponse, pending: isLoading, 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 for category changes and refresh data
-watch(selectedCategory, (newVal) => {
-    console.log('Selected Category Changed to:', newVal)
-    refresh()
-})
+watch(selectedCategory, () => { refresh() })
 
-// Ref for the scroll container
-const categoryScroll = ref<HTMLElement | null>(null)
+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 || 'ผู้สอน';
+}
 
-// Computed property for courses list from API response
 const courses = computed(() => {
-  if (coursesResponse.value?.success) {
-    return coursesResponse.value.data
+  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
+       }
+    })
   }
   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 => {
+  return list.filter((c: any) => {
     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>
-  <!-- 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="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 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 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>
 
-            <!-- 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"
-                >
+            <!-- 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>
+            </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>
+            <!-- Loader -->
+            <div v-if="isLoading" class="flex justify-center py-24">
+               <q-spinner size="3rem" color="primary" />
+            </div>
 
-                <!-- 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"
-                  >
-                    ดูรายละเอียด
+            <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>
-              </div>
+               </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>
-          </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>
+            <!-- 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>
+    </div>
   </div>
 </template>
 
 <style scoped>
-/* 
-  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;
+/* Disable default scrollbar for filter container */
+.no-scrollbar::-webkit-scrollbar {
+    display: 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;
+.no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 </style>
diff --git a/Frontend-Learner/pages/dashboard/index.vue b/Frontend-Learner/pages/dashboard/index.vue
index 9e84868c..5e934d24 100644
--- a/Frontend-Learner/pages/dashboard/index.vue
+++ b/Frontend-Learner/pages/dashboard/index.vue
@@ -1,44 +1,46 @@
 <script setup lang="ts">
 /**
  * @file index.vue
- * @description Dashboard Home Page matching FutureSkill design
+ * @description หน้าหลักแดชบอร์ด (Dashboard Home)
  */
 
+// 1. นำเข้าระบบและกำหนด MetaData
 definePageMeta({
   layout: "default",
   middleware: "auth",
 });
 
 useHead({
-  title: "Dashboard - FutureSkill Clone",
+  title: "Dashboard - e-Learning Platform",
 });
 
+// 2. เรียกใช้งาน Composables
 const { currentUser } = useAuth();
 const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse();
 const { fetchCategories } = useCategory();
 const { t } = useI18n();
 
-// State
+// 3. กำหนดสถานะ (State)
 const enrolledCourses = ref<any[]>([]);
 const recommendedCourses = ref<any[]>([]);
 const libraryCourses = ref<any[]>([]);
 const categories = ref<any[]>([]);
-
 const isLoading = ref(true);
 
-// Initial Data Fetch
+// 4. การจัดการโหลดข้อมูล (Data Initialization)
 onMounted(async () => {
   isLoading.value = true;
   try {
-    const [catRes, enrollRes, courseRes] = await Promise.all([
+    const [catRes, enrollRes, courseRes, allCoursesRes] = await Promise.all([
       fetchCategories(),
-      fetchEnrolledCourses({ limit: 10 }), // Fetch more enrolled courses for library section
+      fetchEnrolledCourses({ limit: 10 }), // ดึงข้อมูลคอร์สที่ลงทะเบียนไว้
       fetchCourses({
         limit: 3,
         random: true,
         forceRefresh: true,
         is_recommended: true,
-      }), // Fetch 3 Recommended Courses
+      }), // ดึงข้อมูลคอร์สแนะนำ
+      fetchCourses({ limit: 1000 }) // สำหรับแมปหมวดหมู่
     ]);
 
     if (catRes.success) {
@@ -48,36 +50,44 @@ onMounted(async () => {
     const catMap = new Map();
     categories.value.forEach((c: any) => catMap.set(c.id, c.name));
 
-    // Map Enrolled Courses
+    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)
     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) => ({
-        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,
-      }));
+      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
+        };
+      });
 
-      // Update libraryCourses with only 2 courses
       libraryCourses.value = enrolledCourses.value.slice(0, 2);
     }
 
-    // Map Recommended Courses
+    // จัดการข้อมูลคอร์สแนะนำ (Mapping Recommended Courses)
     if (courseRes.success && courseRes.data) {
       recommendedCourses.value = courseRes.data.map((c: any) => ({
         id: c.id,
@@ -98,328 +108,215 @@ onMounted(async () => {
   }
 });
 
-// Helper for "Continue Learning" Hero Card
+// 5. ตัวแปร Computed และฟังก์ชันเสริม
 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 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="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">
+      
+      <!-- Left Column (Main Content) -->
+      <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="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>
-
-          <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>
-
-          <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>
-      </section>
-
-      <!-- 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 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="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>
+        <!-- การ์ดหมวดหมู่ด่วน (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>
+           <!-- การเขียนโปรแกรม -->
+            <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>
 
-          <!-- 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"
+        <!-- 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>
+        </div>
+      </div>
+      
+      <!-- Right Column (Sidebar/Profile Content) -->
+      <div class="xl:col-span-1 space-y-6">
+         <!-- Profile Widget -->
+         <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>
+
+            <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"
                 />
-              </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 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>
-                  <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>
+            
+            <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>
-            <!-- 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>
+         
+         <!-- Recommended Courses Widget -->
+         <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>
+                  <!-- 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>
+               </div>
             </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>
+            
+             <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>
     </div>
   </div>
 </template>
 
 <style scoped>
-/* 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 */
+.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;
 }
 </style>
diff --git a/Frontend-Learner/pages/dashboard/my-courses.vue b/Frontend-Learner/pages/dashboard/my-courses.vue
index 9b410f8f..00b0a210 100644
--- a/Frontend-Learner/pages/dashboard/my-courses.vue
+++ b/Frontend-Learner/pages/dashboard/my-courses.vue
@@ -1,303 +1,369 @@
 <script setup lang="ts">
 /**
  * @file my-courses.vue
- * @description My Courses Page.
- * Displays enrolled courses with filters for progress/completed.
- * Handles enrollment success modals and certificate downloads.
+ * @description หน้าคอร์สของฉัน (My Enrolled Courses)
  */
 
+// 1. นำเข้าระบบและกำหนด MetaData
 definePageMeta({
   layout: 'default',
   middleware: 'auth'
 })
 
-useHead({
-  title: 'คอร์สของฉัน - e-Learning'
-})
-
+const { t, locale } = useI18n()
 const route = useRoute()
-const showEnrollModal = ref(false)
-const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
+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)
 
-
-// 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) => {
+// 4. ฟังก์ชันเสริม (Helper Functions)
+const getLocalizedText = (text: any) => {
   if (!text) return ''
   if (typeof text === 'string') return text
-  
   const currentLocale = locale.value as 'th' | 'en'
   return text[currentLocale] || text.th || text.en || ''
 }
 
-// Data Handling
-const { fetchEnrolledCourses, getCertificate, generateCertificate } = useCourse()
-const enrolledCourses = ref<any[]>([])
-const isLoading = ref(false)
-const isDownloadingCert = ref(false)
+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 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
+// 5. การจัดการโหลดข้อมูล (Data Loading)
+const loadData = async () => {
+    isLoading.value = true
+    try {
+        const [catRes, courseRes, allCoursesRes] = await Promise.all([
+            fetchCategories(),
+            fetchEnrolledCourses({}),
+            fetchCourses({ limit: 1000 })
+        ])
 
-  const res = await fetchEnrolledCourses({ 
-    status: apiStatus
-  })
+        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))
+        }
 
-  if (res.success) {
-    let courses = (res.data || [])
+        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;
+               }
 
-    // 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')
+               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
     }
-
-    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
 }
 
-// Watch filter changes to reload
-watch(activeFilter, () => {
-  loadEnrolledCourses()
+// 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()
 })
 
-// Client-side Search Filtering
 const filteredEnrolledCourses = computed(() => {
-  if (!searchQuery.value) return enrolledCourses.value
-  const query = searchQuery.value.toLowerCase()
-  return enrolledCourses.value.filter(c => {
-    const title = getLocalizedText(c.title).toLowerCase()
-    return title.includes(query)
-  })
+    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
 })
 
-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="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>
+  <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="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"
-          />
+      <!-- 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>
         
-        <!-- 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 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>
-        </q-btn>
+        </div>
       </div>
-    </div>
 
-    <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>
+      <!-- ส่วนที่ 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>
+          </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>
+        <!-- ตัวกรองหมวดหมู่ (แบบเลื่อนแนวนอนบนมือถือ) -->
+        <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>
 
-    <!-- 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>
+        <!-- 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>
+      </div>
+    
     </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 be58fc39..74b4c141 100644
--- a/Frontend-Learner/pages/dashboard/profile.vue
+++ b/Frontend-Learner/pages/dashboard/profile.vue
@@ -4,13 +4,15 @@ definePageMeta({
   middleware: 'auth'
 })
 
-useHead({
-  title: 'ตั้งค่าบัญชี - e-Learning'
-})
-
+const { locale, t } = useI18n()
 const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
 const { getLocalizedText } = useCourse()
-const { locale, t } = useI18n()
+import { useQuasar } from 'quasar'
+const $q = useQuasar()
+
+useHead({
+  title: `${t('userMenu.settings')} - e-Learning`
+})
 
 
 
@@ -57,6 +59,13 @@ const passwordForm = reactive({
   confirmPassword: ''
 })
 
+const showPasswordModal = ref(false)
+const showPassword = reactive({
+  current: false,
+  new: false,
+  confirm: false
+})
+
 
 // Rules have been moved to components
 
@@ -95,9 +104,10 @@ 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)
-       alert(result.error || t('profile.updateError'))
+       $q.notify({ type: 'negative', message: result.error || t('profile.updateError') || 'อัปเดตรูปโปรไฟล์ไม่สำเร็จ', position: 'top' })
     }
   }
 }
@@ -131,9 +141,9 @@ const handleUpdateProfile = async () => {
   const result = await updateUserProfile(payload)
   
   if (result?.success) {
-    // success logic
+    $q.notify({ type: 'positive', message: t('profile.updateSuccess'), position: 'top' })
   } else {
-    alert(result?.error || t('profile.updateError'))
+    $q.notify({ type: 'negative', message: result?.error || t('profile.updateError'), position: 'top' })
   }
   
   isProfileSaving.value = false
@@ -145,19 +155,19 @@ const handleSendVerifyEmail = async () => {
   isSendingVerify.value = false
   
   if (result.success) {
-    alert(result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ')
+    $q.notify({ type: 'positive', message: result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ', position: 'top' })
   } else {
     if (result.code === 400) {
-        alert(t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว')
+        $q.notify({ type: 'warning', message: t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว', position: 'top' })
     } else {
-        alert(result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ')
+        $q.notify({ type: 'negative', message: result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ', position: 'top' })
     }
   }
 }
 
 const handleUpdatePassword = async () => {
   if (passwordForm.newPassword !== passwordForm.confirmPassword) {
-    alert('รหัสผ่านใหม่ไม่ตรงกัน')
+    $q.notify({ type: 'negative', message: 'รหัสผ่านใหม่ไม่ตรงกัน', position: 'top' })
     return
   }
   
@@ -169,12 +179,13 @@ const handleUpdatePassword = async () => {
   })
 
   if (result.success) {
-    alert(t('profile.passwordSuccess'))
+    $q.notify({ type: 'positive', message: t('profile.passwordSuccess') || 'เปลี่ยนรหัสผ่านสำเร็จ', position: 'top' })
     passwordForm.currentPassword = ''
     passwordForm.newPassword = ''
     passwordForm.confirmPassword = ''
+    showPasswordModal.value = false
   } else {
-    alert(result.error || t('profile.passwordError'))
+    $q.notify({ type: 'negative', message: result.error || t('profile.passwordError') || 'เปลี่ยนรหัสผ่านไม่สำเร็จ', position: 'top' })
   }
   
   isPasswordSaving.value = false
@@ -203,170 +214,216 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page-container bg-[#F8F9FA] dark:bg-[#020617] min-h-screen transition-colors duration-300">
+  <div class="page-container bg-[#F8F9FA] dark:bg-[#020617] transition-colors duration-300 min-h-screen">
     
-    <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>
 
-    <div v-else class="max-w-4xl mx-auto pb-20">
+    <!-- MAIN PROFILE SETTINGS -->
+    <div v-else class="max-w-5xl mx-auto pb-20 fade-in pt-4">
       
-      <!-- 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">
-        
-        <!-- 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>
-          </div>
+      <!-- บัตรข้อมูลโปรไฟล์ (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 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 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" />
+              </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>
+
+           <!-- 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>
 
-      <!-- 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>
+      <!-- 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>
             </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>
-          
-          <!-- 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>
       
     </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>
 
@@ -375,7 +432,13 @@ onMounted(async () => {
   color: white;
 }
 
-/* Removed card-premium and dark mode overrides as we used utility classes */
+.custom-pwd-input :deep(.q-field__control) {
+  border-radius: 8px;
+  background-color: #f8fafc;
+}
+.dark .custom-pwd-input :deep(.q-field__control) {
+  background-color: #1e293b;
+}
 
 .fade-in {
   animation: fadeIn 0.4s ease-out forwards;
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index de7ea2e6..1b03a4ef 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -13,47 +13,29 @@ 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 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' }
-]
+const categoryCards = CATEGORY_CARDS
+const whyChooseUs = WHY_CHOOSE_US
 
-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 levelModel = ref('ระดับทั้งหมด')
+const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
 
 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) return []
+  if (!topCourses.value || topCourses.value.length === 0) return []
   for (let i = 0; i < topCourses.value.length; i += chunkSize) {
     chunks.push(topCourses.value.slice(i, i + chunkSize))
   }
@@ -65,7 +47,7 @@ const loadData = async () => {
     try {
         const [catRes, courseRes] = await Promise.all([
             fetchCategories(),
-            fetchCourses({ limit: 8, forceRefresh: true })
+            fetchCourses({ limit: 12, forceRefresh: true })
         ])
         
         if (catRes.success) categories.value = catRes.data || []
@@ -84,7 +66,7 @@ const goBrowse = (slug: string) => {
 watch(selectedCategory, async (newVal) => {
     isLoading.value = true
     try {
-        const params: any = { limit: 8 }
+        const params: any = { limit: 12 }
         if (newVal !== 'all') {
             const category = categories.value.find(c => c.slug === newVal)
             if (category) {
@@ -110,41 +92,41 @@ onMounted(() => {
 
 <template>
   <div class="landing-page bg-white min-h-screen">
-    <!-- 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>ยุคดิจิทัล
+    <!-- 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>
           </h1>
-          <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;">
-            แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
+
+          <!-- Subtitle -->
+          <p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
+            จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
+            ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
+            เรียนได้ทุกที่ ทุกเวลา
           </p>
 
-          <!-- Search Bar Pill -->
-          <div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
+        <!-- Buttons -->
+          <div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
             <q-btn 
               unelevated 
               rounded 
-              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"
+              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"
               no-caps
               to="/browse"
             />
             <q-btn 
               outline
               rounded 
-              color="primary" 
               label="สมัครสมาชิกฟรี" 
-              class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
+              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 "
               no-caps
               to="/auth/register"
               v-if="!user"
@@ -152,192 +134,171 @@ onMounted(() => {
           </div>
         </div>
 
-        <!-- 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>
+        <!-- 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" />
 
-            <!-- 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>
-    </header>
-
-    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
-      <div class="container mx-auto px-6 lg:px-12">
-        <div class="text-center mb-16 slide-up">
-          <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
-            เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
-          </h2>
-          <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>
-
-        <!-- 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" />
+            <!-- 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>
+            </div> -->
           </div>
         </div>
       </div>
     </section>
 
-    <!-- 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" />
-      
+    <!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
+    <section class="pt-20 pb-14 bg-white relative flex-col">
       <div class="container mx-auto px-6 lg:px-12">
-        <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>
+        <!-- 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>
+          <p class="text-slate-500 text-base font-normal md:text-xl max-w-3xl mx-auto leading-relaxed">
+            เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
+          </p>
+        </div>
 
-          <!-- 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">
-                เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
+        <!-- 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" />
+            </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">
+      <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>
+
+            <!-- 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 }}
               </p>
             </div>
 
-            <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>
+            <!-- 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>
-
-            <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="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
+    <section class="py-12 md:py-24 bg-slate-50">
       <div class="container mx-auto px-6 lg:px-12">
-        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
+        <!-- Heading -->
+        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
           <div class="slide-up">
-            <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>
+            <h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
           </div>
-          <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 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>
         </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>
+        <!-- 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> -->
         </div>
 
         <!-- 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 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" />
         </div>
         
         <div v-else class="relative group/carousel slide-up">
@@ -356,14 +317,63 @@ onMounted(() => {
               v-for="(chunk, pageIndex) in courseChunks" 
               :key="pageIndex" 
               :name="pageIndex" 
-              class="p-4"
+              class="p-0"
             >
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
-                <CourseCard 
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <div 
                   v-for="course in chunk" 
                   :key="course.id" 
-                  v-bind="{ ...course, image: course.thumbnail_url }"
-                />
+                  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>
               </div>
             </q-carousel-slide>
           </q-carousel>
@@ -390,11 +400,55 @@ 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);
@@ -419,15 +473,6 @@ 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; }
@@ -437,26 +482,80 @@ onMounted(() => {
   animation: fade-in 1s ease-out forwards;
 }
 
-/* Typography Overrides */
-h1, h2, h3 {
-  letter-spacing: normal;
+/* Hero Right Hover State */
+.hero-right:hover .relative {
+    transform: translateY(-10px);
+    transition: transform 0.5s ease;
 }
 
-/* Hover effects */
-.hero-right:hover .animate-float {
-  animation-play-state: paused;
+.gradient-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
 }
 
-/* Responsive Grid Adjustments */
-@media (max-width: 1200px) {
-  .career-cards-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
+.gradient-sphere {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
 }
 
-@media (max-width: 768px) {
-  .career-cards-grid {
-    grid-template-columns: repeat(2, 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;
 }
 </style>
diff --git a/Frontend-Learner/pages/verify-email.vue b/Frontend-Learner/pages/verify-email.vue
index 31b513a1..169e8195 100644
--- a/Frontend-Learner/pages/verify-email.vue
+++ b/Frontend-Learner/pages/verify-email.vue
@@ -6,7 +6,7 @@
  */
 
 definePageMeta({
-  layout: 'default'
+  layout: 'auth'
 })
 
 const route = useRoute()
@@ -68,8 +68,8 @@ const navigateToHome = () => {
 
       <!-- 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-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 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>
         
         <h2 class="text-3xl font-black text-slate-900 dark:text-white mb-2">
diff --git a/Frontend-Learner/types/auth.ts b/Frontend-Learner/types/auth.ts
new file mode 100644
index 00000000..22f07190
--- /dev/null
+++ b/Frontend-Learner/types/auth.ts
@@ -0,0 +1,41 @@
+/**
+ * @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
new file mode 100644
index 00000000..44e4d0a5
--- /dev/null
+++ b/Frontend-Learner/types/course.ts
@@ -0,0 +1,142 @@
+/**
+ * @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
new file mode 100644
index 00000000..0f2701d3
--- /dev/null
+++ b/Frontend-Learner/types/index.ts
@@ -0,0 +1,2 @@
+export * from './auth'
+export * from './course'
diff --git a/Frontend-Learner/คู่มืออธิบาย/ED.md b/Frontend-Learner/คู่มืออธิบาย/ED.md
deleted file mode 100644
index 5727dde2..00000000
--- a/Frontend-Learner/คู่มืออธิบาย/ED.md
+++ /dev/null
@@ -1,71 +0,0 @@
-วันที่บันทึกปฏิบัติงาน \*
-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/คู่มืออธิบาย/web-dev-details.md b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
index fba0cc4e..cc52444c 100644
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@@ -1,187 +1,138 @@
-# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
+# Frontend-Learner (Web) — Technical Documentation
 
-เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)
+เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner (ฝั่งผู้เรียน)**  
+ใช้เป็นคู่มือสำหรับการพัฒนา บำรุงรักษา และขยายระบบต่อไป
+
+> อัปเดตล่าสุด: ปลายเดือนกุมภาพันธ์ 2026
 
 ---
 
-##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       z️ 1. Technical Foundation (รากฐานทางเทคนิค)
+## Table of Contents
 
-รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
+- [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
 
-- **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)
+- **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)
 
-### 1.2 Core Systems & Security
+### 1.2 Security & Authentication
 
-- **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)
+- **Token Management:** ใช้ JWT (Access & Refresh Tokens) จัดเก็บผ่าน `useCookie`  
+  โดยตั้งค่าความปลอดภัยระดับ **HTTP-only** และ **SameSite**
+- **Middleware:** `auth.ts` ตรวจสอบสิทธิ์การเข้าถึงหน้า Dashboard และ Classroom แบบ Real-time
+- **Persistence:** ระบบ Remember Me (จดจำอีเมล) ใช้ `localStorage` แยกส่วนจาก Session  
+  เพื่อความปลอดภัยและสะดวกสำหรับผู้ใช้
 
 ---
 
-## 📂 2. Frontend Structure (โครงสร้างหน้าเว็บและ UI)
+## 2. Project Architecture
 
-### 2.1 Application Routes (`pages/`)
+โครงสร้างโฟลเดอร์ที่จัดระเบียบตามหลัก Clean Architecture เพื่อความคล่องตัวในการขยายระบบ
 
-| 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**)            |
+### 2.1 Directory Structure
 
-### 2.2 Key Components (`components/`)
+- `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/` : ตัวกรองความปลอดภัยก่อนเข้าถึงแต่ละหน้า
 
-- **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`: ฟอร์มเปลี่ยนรหัสผ่าน
+### 2.2 Shared Infrastructure
+
+- **Types Architecture:** การสกัด Types จาก Composable ออกมาไว้ที่ `@/types`  
+  ช่วยลดความซ้ำซ้อนและป้องกัน Error จากการเปลี่ยนโครงสร้างข้อมูล API
+- **Constants System:** การใช้ `@/constants` ช่วยให้การแก้ไขคำโฆษณาหรือข้อมูลหน้าแรกทำได้จากจุดเดียว  
+  โดยไม่ต้องแก้โค้ด HTML
 
 ---
 
-## 🧠 3. Logic & Data Layer (Composables)
+## 3. Logic & Data Layer (Composables)
 
-รวบรวม Logic หลักแยกส่วนตามหน้าที่ (Separation of Concerns)
+การแยก Logic ออกจาก UI เพื่อความสะอาดและ Testable
 
-### 3.1 `useAuth.ts` (Authentication & User)
+- `useAuth`  
+  จัดการสถานะ Login, การดึงโปรไฟล์ล่วงหน้า (Pre-fetching), และระบบ Token Refresh
 
-จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย
+- `useCourse`  
+  หัวใจของระบบ จัดการตั้งแต่ Catalog, การสมัครเรียน (Enroll), ไปจนถึงการส่งผลการเรียน (Progress)
 
-- **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
-- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**
+- `useThemeMode`  
+  ระบบจัดการธีมกลางที่เชื่อมต่อกับ `localStorage` และ CSS Variables อย่างเป็นระบบ
 
-### 3.2 `useCourse.ts` (Course & Classroom)
+- `useQuizRunner`  
+  จัดการสถานะการสอบ เปลี่ยนข้อสอบ และส่งคะแนนไปยัง Backend โดยตรง
 
-หัวใจหลักของการเรียนการสอน
-
-- **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 จริงได้ทันที
+- `useNavItems`  
+  Single Source of Truth สำหรับเมนูทั้งหมด (Sidebar, Mobile Drawer, User Menu)
 
 ---
 
-## 🎨 4. Design System & Theming
+## 4. Branding & UI Policy
+
+มาตรฐานการออกแบบที่เน้นความ Premium และ Consistent
 
 ### 4.1 Theme Strategy
 
-- **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
+- **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 ระบบเดียวทั้งหมด
 
 ---
 
-## 📊 5. Dependency Map (ความสัมพันธ์ไฟล์)
+## 5. Core Feature Highlights
 
-| หน้าเว็บ (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)                |
+ฟีเจอร์เด่นที่ถูกพัฒนาขึ้นเพื่อผู้เรียนโดยเฉพาะ
+
+- **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:** ระบบตรวจสอบสิทธิ์ความสำเร็จและออกใบประกาศนียบัตรได้ทันที
 
 ---
 
-## ✅ 6. Project Status (สถานะล่าสุด)
+## 6. Maintenance & Performance Guidelines
 
-### ✨ Recent Updates (กุมภาพันธ์ 2026)
+แนวทางสำหรับการพัฒนาต่อยอด
 
-1.  **System-Wide Code Cleanup (Phase Final):**
-    - **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
-    - **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
-    - **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code
+- **Clean Code:** หลีกเลี่ยงการใช้ `console.log` ในโค้ด Final และลบ Dead Logic ทิ้งทันที
+- **Standard Fonts:** ใช้ชุด Font Prompt ผ่านตัวแปร `--font-main` เสมอ
+- **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
+- **Mobile First:** ทุก Component ต้องรองรับระบบ Master Drawer บนมือถืออย่างสมบูรณ์
 
-2.  **Authentication & Security Polish:**
-    - **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
-    - **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)
-
-3.  **UI & Aesthetics (Premium Fixes):**
-    - **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
-    - **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด
-
-4.  **Quiz System Productionization:**
-    - **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
-    - **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล
-
-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`)
-
-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)
-
-8.  **Quiz System Enhancements:**
-    - **Answer Review Mode:** เพิ่มโหมดเฉลยข้อสอบหลังทำเสร็จ พร้อมการไฮไลท์สีที่ชัดเจน (เขียว = ถูก, แดง = ตอบผิด)
-    - **Shuffle Logic:** เพิ่มการสลับคำถามและตัวเลือก (Shuffle) เพื่อความโปร่งใสในการสอบ
-    - **Enhanced Feedback:** ปรับปรุง UI ผลลัพธ์การสอบให้มีความ Premium และเข้าใจง่ายขึ้น
-
-9.  **Security & Registration Polish:**
-    - **Phone Validation:** เพิ่มระบบตรวจสอบเบอร์โทรศัพท์ในหน้าสมัครสมาชิก (ต้องเป็นตัวเลขและยาวไม่เกิน 10 หลัก)
-    - **Enrollment Alert Logic:** ปรับปรุง Logic การสมัครเรียนให้ตรวจสอบสถานะ Enrollment เดิมก่อน เพื่อป้องกัน API Error และการเรียก request ซ้ำซ้อน
-
-10. **Profile & Certificates:**
-    - **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
-    - **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
+---
diff --git a/frontend_management/pages/admin/courses/pending.vue b/frontend_management/pages/admin/courses/pending.vue
index 800855c8..e5871eb9 100644
--- a/frontend_management/pages/admin/courses/pending.vue
+++ b/frontend_management/pages/admin/courses/pending.vue
@@ -31,33 +31,48 @@
       </div>
     </div>
 
-    <!-- Search -->
+    <!-- Search & View Toggle -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <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>
+      <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>
 
-    <div class="flex justify-end mb-6">
-      <q-btn-toggle
+        <q-btn-toggle
           v-model="viewMode"
           toggle-color="primary"
           :options="[
-            { label: 'การ์ด', value: 'card' },
-            { label: 'ตาราง', value: 'table' }
+            { value: 'card', slot: 'card' },
+            { value: 'table', slot: '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/users/index.vue b/frontend_management/pages/admin/users/index.vue
index b5570d7e..2b220138 100644
--- a/frontend_management/pages/admin/users/index.vue
+++ b/frontend_management/pages/admin/users/index.vue
@@ -216,7 +216,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { adminService, type AdminUserResponse } from '~/services/admin.service';
+import { adminService, type AdminUserResponse, type RoleResponse } from '~/services/admin.service';
 import { useAuthStore } from '~/stores/auth';
 
 definePageMeta({
@@ -228,6 +228,7 @@ 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);
@@ -286,6 +287,14 @@ 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 {
@@ -328,24 +337,32 @@ const viewUser = (user: AdminUserResponse) => {
   showViewModal.value = true;
 };
 
-const changeRole = (user: AdminUserResponse) => {
-  const roleIds: Record<string, number> = {
-    INSTRUCTOR: 1,
-    STUDENT: 2,
-    ADMIN: 3
+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);
   
+  // 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: roleIds[user.role.code] as any,
-      items: [
-        { label: 'Instructor', value: 1 },
-        { label: 'Student', value: 2 },
-        { label: 'Admin', value: 3 }
-      ]
+      model: (currentRole?.id ?? 0) as any,
+      items: roleItems
     },
     cancel: true,
     persistent: true
@@ -415,6 +432,7 @@ const exportExcel = () => {
 
 // Lifecycle
 onMounted(() => {
+  fetchRoles();
   fetchUsers();
 });
 </script>
diff --git a/frontend_management/pages/instructor/courses/index.vue b/frontend_management/pages/instructor/courses/index.vue
index cdda8b84..4764b770 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="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="md:col-span-2">
+      <div class="flex gap-4 items-center">
+        <div class="flex-1">
           <q-input
             v-model="searchQuery"
             placeholder="ค้นหาหลักสูตร..."
@@ -62,15 +62,39 @@
           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>
 
-    <!-- Courses Grid -->
+    <!-- Loading -->
     <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>
@@ -82,7 +106,8 @@
       />
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <!-- 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-for="course in filteredCourses"
         :key="course.id"
@@ -134,15 +159,6 @@
           >
             <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>
@@ -167,6 +183,94 @@
       </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 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 />
+                  <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">
@@ -256,6 +360,17 @@ 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/services/admin.service.ts b/frontend_management/services/admin.service.ts
index cdea0ea4..8a90c27f 100644
--- a/frontend_management/services/admin.service.ts
+++ b/frontend_management/services/admin.service.ts
@@ -320,7 +320,25 @@ 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();