diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index 243ccdae..46420eed 100644
--- a/Frontend-Learner/assets/css/main.css
+++ b/Frontend-Learner/assets/css/main.css
@@ -9,8 +9,8 @@
   /* Colors - Light Mode Default */
   --bg-body: #f8fafc;
   --bg-surface: #ffffff;
-  --text-main: #0f172a; /* Dark Text */
-  --text-secondary: #64748b; /* Secondary Text */
+  --text-main: #000000; /* ดำสนิทสำหรับหัวข้อ */
+  --text-secondary: #111827; /* เทาเข้มมากสำหรับคำอธิบาย */
   --primary: #3b82f6; /* Primary Blue */
 
   /* Semantic mappings */
diff --git a/Frontend-Learner/components/course/CourseCard.vue b/Frontend-Learner/components/course/CourseCard.vue
index 0b12ded6..84ef2dd6 100644
--- a/Frontend-Learner/components/course/CourseCard.vue
+++ b/Frontend-Learner/components/course/CourseCard.vue
@@ -106,7 +106,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
       <!-- Progress Bar -->
       <div v-if="progress !== undefined && !completed" class="mb-8 p-3 rounded-2xl" style="background-color: rgba(148, 163, 184, 0.1);">
         <div class="flex justify-between items-center text-[10px] font-black uppercase tracking-widest mb-1.5">
-          <span style="color: var(--text-secondary);">{{ $t('course.progress') }}</span>
+          <span class="text-slate-950 dark:text-slate-300">{{ $t('course.progress') }}</span>
           <span class="text-blue-600">{{ progress }}%</span>
         </div>
         <div class="w-full h-1.5 bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden">
diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue
new file mode 100644
index 00000000..dc65c0ee
--- /dev/null
+++ b/Frontend-Learner/components/layout/AppHeader.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * @file AppHeader.vue
+ * @description The main header for the authenticated application dashboard.
+ * Uses Quasar QToolbar.
+ */
+
+defineProps<{
+  /** Controls visibility of the search bar */
+  showSearch?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** Emitted when the hamburger menu is clicked */
+  toggleSidebar: []
+}>()
+
+const searchText = ref('')
+</script>
+
+<template>
+  <q-toolbar class="bg-transparent text-slate-800 dark:text-white h-16 px-4">
+    <!-- Mobile Menu Toggle -->
+    <q-btn
+      flat
+      round
+      dense
+      icon="menu"
+      @click="emit('toggleSidebar')"
+      class="md:hidden mr-2 text-slate-700 dark:text-white"
+      aria-label="Menu"
+    />
+
+    <!-- Branding -->
+    <div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/dashboard')">
+      <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold">
+        E
+      </div>
+      <span class="font-bold text-xl text-blue-600 dark:text-blue-400 hidden xs:block">e-Learning</span>
+    </div>
+    
+    <q-space />
+    
+    <!-- Center Search (Optional) -->
+    <div v-if="showSearch !== false" class="hidden md:block w-1/3 max-w-md mx-4">
+      <q-input
+        dense
+        outlined
+        rounded
+        v-model="searchText"
+        :placeholder="$t('menu.searchCourses')"
+        class="bg-slate-50 dark:bg-slate-700/50 search-input"
+        bg-color="transparent" 
+      >
+        <template v-slot:prepend>
+          <q-icon name="search" class="text-slate-400" />
+        </template>
+      </q-input>
+    </div>
+    
+    <q-space />
+
+    <!-- Right Actions -->
+    <div class="flex items-center gap-2">
+      <!-- Language Switcher -->
+      <LanguageSwitcher />
+      
+      <!-- User Profile Dropdown -->
+      <UserMenu />
+    </div>
+  </q-toolbar>
+</template>
+
+<style scoped>
+.search-input :deep(.q-field__control) {
+  border-radius: 9999px; /* Full rounded */
+}
+.search-input :deep(.q-field__control:before) {
+  border-color: #e2e8f0; /* slate-200 */
+}
+</style>
diff --git a/Frontend-Learner/components/layout/AppSidebar.vue b/Frontend-Learner/components/layout/AppSidebar.vue
new file mode 100644
index 00000000..edb71d2e
--- /dev/null
+++ b/Frontend-Learner/components/layout/AppSidebar.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * @file AppSidebar.vue
+ * @description Sidebar navigation for the authenticated dashboard.
+ * Uses Quasar QList for structure.
+ */
+
+const { t } = useI18n()
+
+const navItems = computed(() => [
+  {
+    to: "/dashboard",
+    label: t('sidebar.overview'),
+    icon: "dashboard", // Using Material Icons names where possible or SVG paths
+    isSvg: false
+  },
+  {
+    to: "/dashboard/my-courses",
+    label: t('sidebar.myCourses'),
+    icon: "school",
+    isSvg: false
+  },
+  {
+    to: "/browse/discovery",
+    label: t('sidebar.browseCourses'),
+    icon: "explore",
+    isSvg: false
+  },
+  {
+    to: "/dashboard/announcements",
+    label: t('sidebar.announcements'),
+    icon: "campaign",
+    isSvg: false
+  },
+  {
+    to: "/dashboard/profile",
+    label: t('sidebar.profile'),
+    icon: "person",
+    isSvg: false
+  },
+]);
+</script>
+
+<template>
+  <div class="flex flex-col h-full bg-transparent">
+    <!-- Branding Area (Optional if not in Header) -->
+    
+    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow">
+
+      
+      <q-item 
+        v-for="item in navItems" 
+        :key="item.to" 
+        :to="item.to"
+        clickable 
+        v-ripple
+        class="rounded-r-full mr-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
+      >
+        <q-item-section avatar>
+          <q-icon :name="item.icon" />
+        </q-item-section>
+        
+        <q-item-section>
+          <q-item-label>{{ item.label }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <!-- Footer / Version -->
+    <div class="mt-auto p-4 text-xs text-center opacity-50 pb-8">
+      <p>e-Learning v0.1.0</p>
+      <p>&copy; 2026</p>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Light Mode Active State */
+.q-item.q-router-link--active {
+  background: rgb(239 246 255); /* blue-50 */
+  color: rgb(29 78 216);       /* blue-700 */
+  font-weight: 700;
+}
+
+/* Dark Mode Active State */
+.dark .q-item.q-router-link--active {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgb(147 197 253);     /* blue-300 */
+}
+</style>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
new file mode 100644
index 00000000..105f0718
--- /dev/null
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/**
+ * @file LandingHeader.vue
+ * @description The main header for the public landing pages.
+ * Features a transparent background that becomes solid/glass upon scrolling.
+ */
+
+// Track scrolling state to adjust header styling
+const isScrolled = ref(false)
+const { isAuthenticated } = useAuth()
+
+onMounted(() => {
+  // Add scroll listener to toggle 'isScrolled' class
+  window.addEventListener('scroll', () => {
+    isScrolled.value = window.scrollY > 20
+  })
+})
+</script>
+
+<template>
+  <!-- 
+    Header Container 
+    - Transitions between transparent and glass effect based on scroll.
+  -->
+  <header 
+    class="landing-header transition-all duration-300"
+    :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
+  >
+    <div class="container h-full flex items-center justify-between">
+      <!-- 
+        Left Section: Logo & Desktop Navigation 
+      -->
+      <div class="flex items-center gap-12">
+        <!-- Logo -->
+        <NuxtLink to="/" class="flex items-center gap-3 group">
+          <div class="logo-box bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
+            E
+          </div>
+          <div class="flex flex-col">
+            <span class="font-black text-lg leading-none tracking-tight text-white group-hover:text-blue-400 transition-colors">E-Learning</span>
+            <span class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] leading-none mt-1">Platform</span>
+          </div>
+        </NuxtLink>
+
+        <!-- Desktop Links -->
+        <nav class="hidden md:block">
+          <ul class="flex items-center gap-8 text-sm font-bold">
+            <li>
+              <NuxtLink to="/browse" class="text-slate-400 hover:text-white transition-colors relative group">
+                {{ $t('landing.allCourses') }}
+                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink to="/browse/discovery" class="text-slate-400 hover:text-white transition-colors relative group">
+                {{ $t('landing.discovery') }}
+                <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
+              </NuxtLink>
+            </li>
+          </ul>
+        </nav>
+      </div>
+
+      <!-- 
+        Right Section: Action Buttons (Login/Register or Dashboard) 
+      -->
+      <div class="flex items-center gap-4">
+        <template v-if="!isAuthenticated">
+          <NuxtLink to="/auth/login" class="text-sm font-bold text-slate-300 hover:text-white px-4 py-2 transition-colors">{{ $t('auth.login') }}</NuxtLink>
+          <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+            {{ $t('auth.getStarted') }}
+          </NuxtLink>
+        </template>
+        <template v-else>
+          <NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+             {{ $t('landing.goToDashboard') }}
+          </NuxtLink>
+        </template>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+/* Header content */
+.landing-header {
+  width: 100%;
+  z-index: 100;
+  transition: all 0.3s ease;
+}
+
+/* Glassmorphism Effect for Scrolled Header */
+.glass-nav {
+  background: rgba(15, 23, 42, 0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* Premium Primary Button Styling */
+.btn-primary-premium {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 800;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-primary-premium:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+</style>
diff --git a/Frontend-Learner/components/layout/MobileNav.vue b/Frontend-Learner/components/layout/MobileNav.vue
new file mode 100644
index 00000000..e61c6ed3
--- /dev/null
+++ b/Frontend-Learner/components/layout/MobileNav.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const navItems = [
+  { to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
+  { to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
+  { to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
+]
+</script>
+
+<template>
+  <q-tabs
+    indicator-color="primary"
+    active-color="primary"
+    class="bg-white text-slate-500 shadow-up-1"
+    align="justify"
+    dense
+  >
+    <q-route-tab
+      v-for="item in navItems"
+      :key="item.to"
+      :to="item.to"
+      :icon="item.icon"
+      :label="item.label"
+      no-caps
+      class="py-2"
+    />
+  </q-tabs>
+</template>
+
+<style scoped>
+/* Optional shadow for better separation */
+.shadow-up-1 {
+  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
+}
+</style>
diff --git a/Frontend-Learner/composables/useThemeMode.ts b/Frontend-Learner/composables/useThemeMode.ts
index c7fa778a..ec01317a 100644
--- a/Frontend-Learner/composables/useThemeMode.ts
+++ b/Frontend-Learner/composables/useThemeMode.ts
@@ -13,17 +13,7 @@ export const useThemeMode = () => {
     localStorage.setItem('theme', value ? 'dark' : 'light')
   }
 
-  const initTheme = () => {
-    if (!process.client) return
-    const saved = localStorage.getItem('theme') // 'dark' | 'light' | null
-    const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
 
-    const value = saved ? saved === 'dark' : prefersDark
-    isDark.value = value
-    applyTheme(value)
-  }
-
-  onMounted(initTheme)
 
   watch(isDark, (v) => applyTheme(v))
 
diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index 24762653..5b784688 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -283,15 +283,15 @@ onMounted(() => {
           </p>
 
           <!-- Course Syllabus -->
-          <div class="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
-            <h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-black flex items-center gap-2">
+          <div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700">
+            <h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-white flex items-center gap-2">
                <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
                {{ $t('course.courseContent') }}
             </h3>
             <div class="space-y-4">
-                <div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 rounded-xl overflow-hidden">
-                   <div class="bg-slate-50 p-4 flex justify-between items-center cursor-pointer">
-                      <div class="font-bold text-slate-800">
+                <div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
+                   <div class="bg-slate-50 dark:bg-slate-700/50 p-4 flex justify-between items-center cursor-pointer">
+                      <div class="font-bold text-slate-800 dark:text-slate-100">
                           <span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span>
                           {{ getLocalizedText(chapter.title) }}
                       </div>
@@ -300,13 +300,13 @@ onMounted(() => {
                       </span>
                    </div>
                    <!-- Lessons -->
-                   <div class="divide-y divide-slate-100 bg-white">
-                       <div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 transition-colors">
+                   <div class="divide-y divide-slate-100 dark:divide-slate-700 bg-white dark:bg-slate-800">
+                       <div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <div class="flex items-center gap-3">
-                               <div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500">
+                               <div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-slate-400">
                                    {{ Number(lIndex) + 1 }}
                                </div>
-                               <span class="text-slate-700 dark:text-black font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
+                               <span class="text-slate-700 dark:text-slate-200 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
                            </div>
                            <span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span>
                        </div>
diff --git a/Frontend-Learner/pages/browse/opencovery.vue b/Frontend-Learner/pages/browse/opencovery.vue
deleted file mode 100644
index df486d9e..00000000
--- a/Frontend-Learner/pages/browse/opencovery.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<script setup lang="ts">
-/**
- * @file opencovery.vue
- * @description Public Course Detail Page.
- * Displays detailed information about a specific course without requiring authentication.
- */
-
-definePageMeta({
-  layout: 'landing',
-  auth: false // Explicitly public
-})
-
-useHead({
-  title: 'รายละเอียดคอร์ส - E-Learning System'
-})
-
-// Mock Data (Static for now, ideally would fetch based on ID)
-const course = {
-  title: 'เบื้องต้นการออกแบบ UX/UI',
-  price: 'ฟรี',
-  originalPrice: '',
-  description: 'เนื้อหาครอบคลุมทุกอย่างตั้งแต่การวิจัยผู้ใช้ (User Research) ไปจนถึงการทำต้นแบบความละเอียดสูง (High-fidelity Prototyping) เหมาะสำหรับผู้เริ่มต้นที่ต้องการเข้าสู่สายงานออกแบบผลิตภัณฑ์',
-  duration: '4.5 ชั่วโมง',
-  lessons: 12,
-  certificate: true,
-  objectives: [
-    'วิธีการวิจัยผู้ใช้ (User Research)',
-    'การวาดโครงร่างและทำต้นแบบ',
-    'ระบบการออกแบบ (Design Systems)',
-    'การทดสอบการใช้งาน (Usability Testing)'
-  ],
-  syllabus: [
-    {
-      title: '01. บทนำ',
-      lessonCount: 3,
-      lessons: [
-        { title: '1.1 การออกแบบ UX คืออะไร?', duration: '10:00' },
-        { title: '1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)', duration: '15:30' },
-        { title: '1.3 เครื่องมือที่ต้องใช้', duration: '05:00' }
-      ]
-    },
-     {
-      title: '02. การวิจัยผู้ใช้',
-      lessonCount: 4,
-      lessons: [
-        { title: '2.1 การสัมภาษณ์ผู้ใช้', duration: '12:00' },
-        { title: '2.2 การสร้าง Persona', duration: '18:00' }
-      ]
-    }
-  ]
-}
-</script>
-
-<template>
-  <div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors pt-32 pb-20">
-      
-     <!-- Background Effects -->
-     <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>
-
-    <div class="container mx-auto max-w-6xl px-6">
-      
-      <!-- Back Button -->
-      <NuxtLink to="/browse" class="inline-flex items-center gap-2 text-slate-400 hover:text-white mb-8 transition-colors">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-        </svg>
-        กลับหน้ารายการคอร์ส
-      </NuxtLink>
-
-      <div class="grid grid-cols-1lg lg:grid-cols-12 gap-10">
-        
-        <!-- Main Content (Left Column) -->
-        <div class="lg:col-span-8">
-          <!-- Hero Video Placeholder -->
-          <div class="relative aspect-video bg-slate-800 rounded-3xl overflow-hidden border border-white/5 shadow-2xl mb-8 group cursor-pointer">
-             <div class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
-                <div class="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center shadow-[0_0_30px_rgba(37,99,235,0.5)] group-hover:scale-110 transition-transform duration-300">
-                  <div class="ml-1 w-0 h-0 border-t-[12px] border-t-transparent border-l-[20px] border-l-white border-b-[12px] border-b-transparent"/>
-                </div>
-             </div>
-          </div>
-
-          <h1 class="text-4xl font-black text-white mb-6 leading-tight">{{ course.title }}</h1>
-          <p class="text-slate-400 text-lg leading-relaxed mb-10">
-            {{ course.description }}
-          </p>
-
-          <!-- Learning Objectives -->
-          <div class="p-8 rounded-3xl bg-white/5 border border-white/5 mb-10">
-            <h3 class="font-bold text-xl text-white mb-6">สิ่งที่คุณจะได้เรียนรู้</h3>
-            <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <li v-for="(obj, idx) in course.objectives" :key="idx" class="flex gap-3 text-slate-300">
-                <span class="text-emerald-400 font-bold">✓</span> {{ obj }}
-              </li>
-            </ul>
-          </div>
-
-          <!-- Course Syllabus -->
-          <div class="p-8 rounded-3xl bg-white/5 border border-white/5">
-            <h3 class="font-bold text-xl text-white mb-6">เนื้อหาในคอร์ส</h3>
-            <div class="space-y-4">
-              <div v-for="(chapter, idx) in course.syllabus" :key="idx">
-                <div class="flex justify-between items-center p-4 bg-white/5 rounded-2xl mb-2 border border-white/5">
-                  <span class="font-bold text-white">{{ chapter.title }}</span>
-                  <span class="text-sm text-slate-500">{{ chapter.lessonCount }} บทเรียน</span>
-                </div>
-                <div class="pl-4 space-y-1">
-                  <div v-for="(lesson, lIdx) in chapter.lessons" :key="lIdx" class="flex justify-between py-3 px-4 border-b border-white/5 last:border-0 text-slate-400 hover:bg-white/5 rounded-xl transition-colors">
-                    <span class="text-sm">
-                      <span class="mr-2 opacity-50">🎥</span> {{ lesson.title }}
-                    </span>
-                    <span class="text-sm opacity-60">{{ lesson.duration }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Sidebar (Right Column): Sticky CTA -->
-        <div class="lg:col-span-4">
-          <div class="sticky top-28 p-8 rounded-3xl bg-slate-800/80 backdrop-blur-xl border border-white/10 shadow-2xl">
-            <div class="mb-8 text-center lg:text-left">
-              <span class="text-lg text-slate-500 line-through mr-4">{{ course.originalPrice }}</span>
-              <span class="text-5xl font-black text-white tracking-tight">{{ course.price }}</span>
-            </div>
-
-            <NuxtLink to="/auth/register" class="flex items-center justify-center w-full py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all hover:-translate-y-1 mb-6">
-              ลงทะเบียนเรียนทันที
-            </NuxtLink>
-            
-            <div class="space-y-4 text-sm text-slate-400">
-              <div class="flex justify-between py-3 border-b border-white/5">
-                <span>ระยะเวลาเรียน</span>
-                <span class="font-bold text-white">{{ course.duration }}</span>
-              </div>
-              <div class="flex justify-between py-3 border-b border-white/5">
-                <span>จำนวนบทเรียน</span>
-                <span class="font-bold text-white">{{ course.lessons }} บท</span>
-              </div>
-              <div class="flex justify-between py-3 border-b border-white/5">
-                <span>ใบประกาศนียบัตร</span>
-                <span class="font-bold text-white">{{ course.certificate ? 'มี' : 'ไม่มี' }}</span>
-              </div>
-              <div class="flex justify-between py-3 border-b border-white/5">
-                <span>ระดับ</span>
-                <span class="font-bold text-white">เหมาะสำหรับทุกคน</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@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;
-}
-</style>
diff --git a/Frontend-Learner/pages/classroom/learning.vue b/Frontend-Learner/pages/classroom/learning.vue
index e751a930..936bdd92 100644
--- a/Frontend-Learner/pages/classroom/learning.vue
+++ b/Frontend-Learner/pages/classroom/learning.vue
@@ -255,7 +255,7 @@ onBeforeUnmount(() => {
           <span>{{ $t('classroom.backToDashboard') }}</span>
         </NuxtLink>
         
-        <q-toolbar-title class="text-base font-bold text-center lg:text-left truncate">
+        <q-toolbar-title class="text-base font-bold text-center lg:text-left truncate text-slate-900 dark:text-white">
            {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
         </q-toolbar-title>
 
@@ -279,7 +279,7 @@ onBeforeUnmount(() => {
       <div v-if="courseData" class="h-full scroll">
          <q-list class="pb-10">
             <template v-for="chapter in courseData.chapters" :key="chapter.id">
-              <q-item-label header class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
+              <q-item-label header class="bg-slate-100 dark:bg-slate-800 text-[var(--text-main)] font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
                  {{ getLocalizedText(chapter.title) }}
               </q-item-label>
 
@@ -299,7 +299,7 @@ onBeforeUnmount(() => {
                 </q-item-section>
                 
                 <q-item-section>
-                  <q-item-label class="text-sm md:text-base line-clamp-2">
+                  <q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]">
                     {{ getLocalizedText(lesson.title) }}
                   </q-item-label>
                 </q-item-section>
@@ -357,7 +357,9 @@ onBeforeUnmount(() => {
             
              <!-- Lesson Info -->
              <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 rounded-2xl shadow-sm border border-[var(--border-color)] mt-6">
+                <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
                 <h1 class="text-2xl md:text-3xl font-bold mb-3 text-[var(--text-main)]">{{ getLocalizedText(currentLesson.title) }}</h1>
+                
                 <p class="text-[var(--text-secondary)] text-base md:text-lg" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
                 
                 <!-- Lesson Content Area -->
diff --git a/Frontend-Learner/pages/loading-demo.vue b/Frontend-Learner/pages/loading-demo.vue
deleted file mode 100644
index e36fbc9b..00000000
--- a/Frontend-Learner/pages/loading-demo.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  layout: 'default'
-})
-
-useHead({
-  title: 'Loading Demo - e-Learning'
-})
-
-const isLoading = ref(false)
-const showFullPageLoading = ref(false)
-
-const simulateLoading = () => {
-  isLoading.value = true
-  setTimeout(() => isLoading.value = false, 2000)
-}
-
-const simulateFullPageLoading = () => {
-  showFullPageLoading.value = true
-  setTimeout(() => showFullPageLoading.value = false, 2000)
-}
-</script>
-
-<template>
-  <div>
-    <LoadingSpinner v-if="showFullPageLoading" full-page text="กำลังโหลดหน้า..." />
-    
-    <h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">UI Loading & Validation Demo</h1>
-    <p class="text-muted mb-8">หน้านี้แสดง component สำหรับ Loading states และ Form Validation</p>
-
-    <div class="grid-12">
-      <!-- Loading Spinners -->
-      <div class="col-span-6">
-        <div class="card mb-6">
-          <h2 class="font-bold mb-4">Loading Spinners</h2>
-          <div class="flex items-center gap-8 mb-6">
-            <div class="text-center">
-              <LoadingSpinner size="sm" />
-              <p class="text-xs text-muted mt-2">Small</p>
-            </div>
-            <div class="text-center">
-              <LoadingSpinner size="md" />
-              <p class="text-xs text-muted mt-2">Medium</p>
-            </div>
-            <div class="text-center">
-              <LoadingSpinner size="lg" />
-              <p class="text-xs text-muted mt-2">Large</p>
-            </div>
-          </div>
-          
-          <div class="flex gap-4">
-            <button class="btn btn-primary" :disabled="isLoading" @click="simulateLoading">
-              <LoadingSpinner v-if="isLoading" size="sm" />
-              <span v-else>Submit Button</span>
-            </button>
-            <button class="btn btn-secondary" @click="simulateFullPageLoading">
-              Show Full Page Loading
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Skeleton Loaders -->
-      <div class="col-span-6">
-        <div class="card mb-6">
-          <h2 class="font-bold mb-4">Skeleton Loaders</h2>
-          <div class="mb-4">
-            <p class="text-sm text-muted mb-2">Text Skeleton:</p>
-            <LoadingSkeleton type="text" :count="3" />
-          </div>
-          <div class="mb-4">
-            <p class="text-sm text-muted mb-2">Avatar + Button:</p>
-            <div class="flex items-center gap-4">
-              <LoadingSkeleton type="avatar" />
-              <LoadingSkeleton type="button" width="100px" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Card Skeleton -->
-      <div class="col-span-12">
-        <div class="card mb-6">
-          <h2 class="font-bold mb-4">Card Skeleton</h2>
-          <div class="course-grid">
-            <LoadingSkeleton type="card" />
-            <LoadingSkeleton type="card" />
-            <LoadingSkeleton type="card" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Form Validation Demo -->
-      <div class="col-span-12">
-        <div class="card">
-          <h2 class="font-bold mb-4">Form Validation Demo</h2>
-          <p class="text-muted mb-6">ลองกด Submit โดยไม่กรอกข้อมูลเพื่อดู validation error messages</p>
-          
-          <div class="grid-12">
-            <div class="col-span-6">
-              <FormInput
-                model-value=""
-                label="อีเมล"
-                type="email"
-                placeholder="student@example.com"
-                error="รูปแบบอีเมลไม่ถูกต้อง"
-                required
-              />
-            </div>
-            <div class="col-span-6">
-              <FormInput
-                model-value=""
-                label="รหัสผ่าน"
-                type="password"
-                placeholder="••••••••"
-                error="รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร"
-                required
-              />
-            </div>
-            <div class="col-span-6">
-              <FormInput
-                model-value="สมชาย"
-                label="ชื่อ-นามสกุล"
-                placeholder="สมชาย ใจดี"
-                required
-              />
-              <p class="text-xs text-success">✓ กรอกถูกต้อง (ไม่มี error)</p>
-            </div>
-            <div class="col-span-6">
-              <FormInput
-                model-value=""
-                label="เบอร์โทรศัพท์ (ไม่บังคับ)"
-                placeholder="081-234-5678"
-              />
-              <p class="text-xs text-muted">กรอกหรือไม่กรอกก็ได้</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/Frontend-Learner/plugins/theme.client.ts b/Frontend-Learner/plugins/theme.client.ts
index 863165ba..62eca5ad 100644
--- a/Frontend-Learner/plugins/theme.client.ts
+++ b/Frontend-Learner/plugins/theme.client.ts
@@ -1,5 +1,8 @@
 export default defineNuxtPlugin((nuxtApp) => {
-  const { $q } = useQuasar()
+  const nuxt = useNuxtApp()
+  const $q = nuxt.vueApp.config.globalProperties.$q
+
+
 
   // ฟังก์ชันสลับโหมดและ Sync กับ Quasar
   const updateTheme = (isDark: boolean) => {
@@ -14,8 +17,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // ตอนเริ่มทำงานบน Client
   if (process.client) {
+    const { set } = useThemeMode()
     const savedTheme = localStorage.getItem('theme')
     const isDark = savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
     
+    set(isDark)
+    // Also explicitly force updateTheme initially since watcher might not fire if state matches default
+    updateTheme(isDark)
   }
 })