diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index 46420eed..61b96a06 100644
--- a/Frontend-Learner/assets/css/main.css
+++ b/Frontend-Learner/assets/css/main.css
@@ -62,10 +62,15 @@
   --bg-body: #020617; /* Slate 950: Deep Sea */
   --bg-surface: #0f172a; /* Slate 900: Sidebar/Main Cards */
   --bg-elevated: #1e293b; /* Slate 800: Inner Cards/Highlights */
-  
+
   --text-main: #f8fafc; /* text-slate-50: Brighter white for main text */
   --text-secondary: #94a3b8; /* text-slate-300: Lighter grey for secondary text */
-  --border-color: rgba(255, 255, 255, 0.08); /* White with low opacity for subtle borders */
+  --border-color: rgba(
+    255,
+    255,
+    255,
+    0.08
+  ); /* White with low opacity for subtle borders */
   --neutral-50: #1e293b;
   --neutral-100: #334155;
   --neutral-200: #475569;
@@ -226,22 +231,17 @@ ul {
   color: #f1f5f9;
 }
 
-/* Auth Layout */
+/* Auth Layout - Always Light for Auth Pages */
 .auth-shell {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-body);
-  color: var(--text-main);
+  background-color: #ffffff; /* เปลี่ยนเป็นสีขาวล้วน */
+  color: #0f172a; /* สีข้อความเข้ม */
   padding: 24px;
 }
 
-.dark .auth-shell {
-  background-color: #0f172a;
-  color: #f1f5f9;
-}
-
 /* ===========================
    Components
    =========================== */
@@ -1168,6 +1168,3 @@ html:not(.dark) .q-item__label,
 html:not(.dark) .q-select__dropdown .q-item {
   color: #0f172a !important;
 }
-
-
-
diff --git a/Frontend-Learner/composables/useAuth.ts b/Frontend-Learner/composables/useAuth.ts
index 2ad6eebc..b7bff874 100644
--- a/Frontend-Learner/composables/useAuth.ts
+++ b/Frontend-Learner/composables/useAuth.ts
@@ -452,9 +452,14 @@ export const useAuth = () => {
     refreshToken.value = null // ลบ Refresh Token
     user.value = null
     
-    // Reset client-side storage
+    // Reset client-side storage (Keep remembered_email)
     if (import.meta.client) {
+      // ลบเฉพาะข้อมูลที่ไม่ใช่อีเมลที่จำไว้
+      const rememberedEmail = localStorage.getItem('remembered_email')
       localStorage.clear()
+      if (rememberedEmail) {
+        localStorage.setItem('remembered_email', rememberedEmail)
+      }
     }
 
     const router = useRouter()
diff --git a/Frontend-Learner/composables/useQuizRunner.ts b/Frontend-Learner/composables/useQuizRunner.ts
index 1ef68b4c..840aaa60 100644
--- a/Frontend-Learner/composables/useQuizRunner.ts
+++ b/Frontend-Learner/composables/useQuizRunner.ts
@@ -2,67 +2,27 @@ export type QuestionStatus = 'not_started' | 'in_progress' | 'completed' | 'skip
 
 export interface QuizQuestion {
   id: number;
-  title: string;
+  question: string | { th: string; en: string };
   is_skippable: boolean;
-  type: 'single' | 'multiple' | 'text';
-  options?: { id: string; label: string }[];
+  type: string;
+  choices?: { id: number; text: string | { th: string; en: string } }[];
 }
 
 export interface AnswerState {
   questionId: number;
-  value: string | string[] | null;
+  value: any;
   is_saved: boolean;
   status: QuestionStatus;
   touched: boolean;
   last_saved_at?: string;
 }
 
-// Mock Data
-const MOCK_QUESTIONS: QuizQuestion[] = [
-  {
-    id: 1,
-    title: 'What is the capital of France?',
-    is_skippable: true,
-    type: 'single',
-    options: [
-      { id: 'london', label: 'London' },
-      { id: 'paris', label: 'Paris' },
-      { id: 'berlin', label: 'Berlin' },
-    ],
-  },
-  {
-    id: 2,
-    title: 'Explain the concept of closure in JavaScript.',
-    is_skippable: false, 
-    type: 'text',
-  },
-  {
-    id: 3,
-    title: 'Which of the following are Vue lifecycle hooks? (Select all that apply)',
-    is_skippable: true,
-    type: 'multiple',
-    options: [
-      { id: 'created', label: 'created' },
-      { id: 'mounted', label: 'mounted' },
-      { id: 'render', label: 'render' },
-      { id: 'compute', label: 'compute' },
-    ],
-  },
-  {
-    id: 4,
-    title: 'What is 2 + 2?',
-    is_skippable: false,
-    type: 'single',
-    options: [
-      { id: '3', label: '3' },
-      { id: '4', label: '4' },
-      { id: '5', label: '5' },
-    ],
-  }
-];
-
+/**
+ * @composable useQuizRunner
+ * @description Manages the state and logic for running a quiz activity.
+ */
 export const useQuizRunner = () => {
-  // State (using useState for Nuxt SSR safety and persistence across component reloads if needed)
+  // State
   const questions = useState<QuizQuestion[]>('quiz-questions', () => []);
   const answers = useState<Record<number, AnswerState>>('quiz-answers', () => ({}));
   const currentQuestionIndex = useState<number>('quiz-current-index', () => 0);
@@ -82,8 +42,10 @@ export const useQuizRunner = () => {
   const isFirstQuestion = computed(() => currentQuestionIndex.value === 0);
 
   // Actions
-  function initQuiz(quizId: string) {
-    questions.value = [...MOCK_QUESTIONS]; 
+  function initQuiz(quizData: any) {
+    if (!quizData || !quizData.questions) return;
+    
+    questions.value = quizData.questions; 
     currentQuestionIndex.value = 0;
     answers.value = {};
     lastError.value = null;
@@ -91,7 +53,7 @@ export const useQuizRunner = () => {
     questions.value.forEach(q => {
       answers.value[q.id] = {
         questionId: q.id,
-        value: q.type === 'multiple' ? [] : null,
+        value: null,
         is_saved: false,
         status: 'not_started',
         touched: false,
@@ -107,7 +69,6 @@ export const useQuizRunner = () => {
     const ans = answers.value[qId];
     if (ans) {
       ans.touched = true;
-      // Mark as in_progress if not final state
       if (ans.status === 'not_started' || ans.status === 'skipped') {
          ans.status = 'in_progress';
       }
@@ -122,21 +83,18 @@ export const useQuizRunner = () => {
     if (a.status === 'completed' || a.is_saved) return { allowed: true };
     if (q.is_skippable) return { allowed: true };
     
-    // Required and unsaved
-    if (!a.is_saved) {
-      return { allowed: false, reason: 'This question is required and must be saved.' };
+    if (!a.is_saved && a.value === null) {
+      return { allowed: false, reason: 'This question is required.' };
     }
 
     return { allowed: true };
   }
 
-  function updateAnswer(val: string | string[] | null) {
+  function updateAnswer(val: any) {
      if (!currentQuestion.value) return;
      const qId = currentQuestion.value.id;
      answers.value[qId].value = val;
      
-     // If modifying a completed answer, revert to in_progress until saved again?
-     // Yes, to enforce "Green = Saved Successfully" implies current state matches saved state.
      if (answers.value[qId].is_saved) {
         answers.value[qId].is_saved = false;
         answers.value[qId].status = 'in_progress';
@@ -148,24 +106,15 @@ export const useQuizRunner = () => {
     const qId = currentQuestion.value.id;
     const ans = answers.value[qId];
 
-    // Validation
-    if (currentQuestion.value.type === 'multiple') {
-       if (!ans.value || (ans.value as string[]).length === 0) {
-         lastError.value = "Please select at least one option.";
-         return false;
-       }
-    } else {
-       if (!ans.value || (ans.value as string).trim() === '') {
-         lastError.value = "Please provide an answer.";
-         return false;
-       }
+    if (ans.value === null) {
+      lastError.value = "Please provide an answer.";
+      return false;
     }
 
     loading.value = true;
     lastError.value = null;
 
     try {
-      await new Promise(resolve => setTimeout(resolve, 800)); 
       ans.is_saved = true;
       ans.status = 'completed';
       ans.last_saved_at = new Date().toISOString();
@@ -187,12 +136,12 @@ export const useQuizRunner = () => {
       return false;
     }
 
-    // Mark current as skipped if leaving without completion
     const currQ = currentQuestion.value;
-    const currAns = answers.value[currQ.id];
-    // If we leave and it is NOT completed (and implicit skippable check passed), set SKIPPED
-    if (currAns.status !== 'completed' && !currAns.is_saved) {
-      currAns.status = 'skipped';
+    if (currQ) {
+        const currAns = answers.value[currQ.id];
+        if (currAns.status !== 'completed' && !currAns.is_saved) {
+          currAns.status = 'skipped';
+        }
     }
 
     currentQuestionIndex.value = targetIndex;
@@ -205,51 +154,22 @@ export const useQuizRunner = () => {
     return true;
   }
 
-  async function nextQuestion() {
-    if (isLastQuestion.value) return;
-    handleLeaveLogic(currentQuestionIndex.value + 1);
-  }
-
-  async function prevQuestion() {
-    if (isFirstQuestion.value) return;
-    handleLeaveLogic(currentQuestionIndex.value - 1);
-  }
-
-  async function goToQuestion(index: number) {
-    if (index < 0 || index >= questions.value.length) return;
-    handleLeaveLogic(index);
-  }
-
-  async function skipQuestion() {
-    if (isLastQuestion.value) {
-        // If last question and skip... maybe just mark skipped?
-         const currQ = currentQuestion.value;
-         const currAns = answers.value[currQ.id];
-         currAns.status = 'skipped';
-         return;
-    }
-    handleLeaveLogic(currentQuestionIndex.value + 1);
-  }
-
   return {
     questions,
     answers,
     currentQuestionIndex,
     loading,
     lastError,
-    
     currentQuestion,
     currentAnswer,
     totalQuestions,
     isFirstQuestion,
     isLastQuestion,
-
     initQuiz,
     updateAnswer,
     saveCurrentAnswer,
-    nextQuestion,
-    prevQuestion,
-    goToQuestion,
-    skipQuestion
+    nextQuestion: () => handleLeaveLogic(currentQuestionIndex.value + 1),
+    prevQuestion: () => handleLeaveLogic(currentQuestionIndex.value - 1),
+    goToQuestion: (index: number) => handleLeaveLogic(index)
   };
 };
diff --git a/Frontend-Learner/layouts/auth.vue b/Frontend-Learner/layouts/auth.vue
index 5118eb43..57de3a1f 100644
--- a/Frontend-Learner/layouts/auth.vue
+++ b/Frontend-Learner/layouts/auth.vue
@@ -1,6 +1,26 @@
+<script setup lang="ts">
+const $q = useQuasar()
+
+// บังคับให้หน้า Auth เคลียร์ Dark Mode ของระบบทิ้ง
+useHead({
+  htmlAttrs: {
+    class: 'light',
+    style: 'background-color: #ffffff'
+  },
+  bodyAttrs: {
+    class: 'light',
+    style: 'background-color: #ffffff'
+  }
+})
+
+onMounted(() => {
+  $q.dark.set(false)
+})
+</script>
+
 <template>
   <!-- Auth Shell: Wrapper for authentication pages (Login, Register, etc.) -->
-  <div class="auth-shell dark">
+  <div class="auth-shell bg-white w-full min-h-screen">
     <slot />
   </div>
 </template>
diff --git a/Frontend-Learner/layouts/landing.vue b/Frontend-Learner/layouts/landing.vue
index e822d2d8..f33dc157 100644
--- a/Frontend-Learner/layouts/landing.vue
+++ b/Frontend-Learner/layouts/landing.vue
@@ -1,13 +1,27 @@
 <script setup lang="ts">
-/**
- * @file landing.vue
- * @description Layout for the landing page (public facing).
- * Uses Quasar QLayout with overlay header.
- */
+const $q = useQuasar()
+
+// บังคับให้หน้า Landing Page เคลียร์ Dark Mode ของระบบทิ้ง
+useHead({
+  htmlAttrs: {
+    class: 'light',
+    style: 'background-color: #ffffff'
+  },
+  bodyAttrs: {
+    class: 'light',
+    style: 'background-color: #ffffff'
+  }
+})
+
+onMounted(() => {
+  $q.dark.set(false)
+})
 </script>
 
+
 <template>
-  <q-layout view="lHh LpR lFf" class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-inter">
+  <q-layout view="lHh LpR lFf" class="bg-white text-slate-900 font-inter">
+
     
     <!-- Header (Transparent & Overlay) -->
     <q-header class="bg-transparent" style="height: auto;">
diff --git a/Frontend-Learner/pages/auth/login.vue b/Frontend-Learner/pages/auth/login.vue
index 17a99bcc..280273eb 100644
--- a/Frontend-Learner/pages/auth/login.vue
+++ b/Frontend-Learner/pages/auth/login.vue
@@ -95,10 +95,11 @@ const handleLogin = async () => {
   isLoading.value = false
 
   if (result.success) {
-    // REMEMBER ME LOGIC
+    // จดจำฉัน: บันทึกอีเมลลงเครื่องเฉพาะตอนติ๊กถูกเท่านั้น
     if (rememberMe.value) {
       localStorage.setItem('remembered_email', loginForm.email)
     } else {
+      // ถ้าไม่ได้ติ๊ก ให้ลบทิ้งเพื่อความปลอดภัย
       localStorage.removeItem('remembered_email')
     }
 
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index b7faf92a..3edd5819 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -57,7 +57,7 @@ const filteredCourses = computed(() => {
 
 <template>
   <!-- Main Container: Dark Theme Base -->
-  <div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
+  <div class="relative min-h-screen text-slate-600  bg-slate-50  transition-colors">
      
      <!-- ==========================================
           BACKGROUND EFFECTS
@@ -81,7 +81,7 @@ const filteredCourses = computed(() => {
            </span>
         </div>
         <!-- Main Title -->
-        <h1 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
+        <h1 class="text-4xl md:text-6xl font-black text-slate-900  mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
           คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
         </h1>
         <!-- Subtitle -->
@@ -103,7 +103,7 @@ const filteredCourses = computed(() => {
        <div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
         
           <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-12">
-            <h2 class="text-2xl font-black text-slate-900 dark:text-white flex items-center gap-3">
+            <h2 class="text-2xl font-black text-slate-900  flex items-center gap-3">
               <span class="w-2 h-8 bg-blue-600 rounded-full"/>
               รายการคอร์สเรียน
             </h2>
@@ -114,7 +114,7 @@ const filteredCourses = computed(() => {
                 <input 
                   v-model="searchQuery" 
                   type="text" 
-                  class="w-full pl-12 pr-6 py-3 bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:bg-white focus:dark:bg-white/10 focus:ring-2 focus:ring-blue-500/50 transition-all font-medium" 
+                  class="w-full pl-12 pr-6 py-3 bg-slate-100  border border-slate-200  rounded-xl text-slate-900  placeholder-slate-400  focus:outline-none focus:bg-white focus: focus:ring-2 focus:ring-blue-500/50 transition-all font-medium" 
                   placeholder="ค้นหาบทเรียน..." 
                 >
                 <div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
@@ -151,21 +151,21 @@ const filteredCourses = computed(() => {
               </div>
 
               <!-- Card Content Body -->
-              <div class="p-6 flex-1 flex flex-col border-t border-slate-100 dark:border-white/5">
-                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">
+              <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 dark:text-slate-400 text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
+                <p class="text-slate-500  text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
                   {{ getLocalizedText(course.description) }}
                 </p>
 
                 <!-- Meta Information -->
-                <div class="flex items-center gap-4 mb-6 text-xs font-medium text-slate-500 dark:text-slate-400">
+                <div class="flex items-center gap-4 mb-6 text-xs font-medium text-slate-500 ">
                   <div class="flex items-center gap-1.5">
                     <span class="text-amber-400">⭐</span>
                     <span>{{ course.rating || 'N/A' }}</span>
                   </div>
-                  <div class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
+                  <div class="w-1 h-1 rounded-full bg-slate-300 " />
                   <div class="flex items-center gap-1.5">
                     <span>📖</span>
                     <span>{{ course.lessons || 0 }} บทเรียน</span>
@@ -173,13 +173,13 @@ const filteredCourses = computed(() => {
                 </div>
 
                 <!-- Card Footer -->
-                <div class="pt-4 border-t border-slate-100 dark:border-white/5 flex items-center justify-between mt-auto">
-                  <span class="text-lg font-black text-blue-600 dark:text-blue-400 tracking-tight">
+                <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 dark:bg-white/5 hover:bg-blue-600 text-slate-600 dark:text-slate-300 hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200 dark:border-white/10 hover:border-blue-500/50"
+                    class="px-4 py-2 bg-slate-50  hover:bg-blue-600 text-slate-600  hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200  hover:border-blue-500/50"
                   >
                     ดูรายละเอียด
                   </NuxtLink>
@@ -191,7 +191,7 @@ const filteredCourses = computed(() => {
           <!-- 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 dark:text-white mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
+            <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>
@@ -215,7 +215,7 @@ const filteredCourses = computed(() => {
        <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent 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 dark:text-white mb-8 tracking-tight">
+        <h2 class="text-4xl md:text-5xl font-black text-slate-900  mb-8 tracking-tight">
           พร้อมจะเริ่มต้นแล้วหรือยัง?
         </h2>
         <p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
@@ -253,11 +253,7 @@ const filteredCourses = computed(() => {
   backdrop-filter: blur(40px);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
-:global(.dark) .glass-premium {
-  background: rgba(255, 255, 255, 0.02);
-  backdrop-filter: blur(40px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
+
 
 /* Glass Card Style for Course Items */
 .glass-card {
@@ -268,12 +264,7 @@ const filteredCourses = computed(() => {
   box-shadow: 0 10px 30px rgba(0,0,0,0.05);
 }
 
-:global(.dark) .glass-card {
-  background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: none;
-}
+
 
 /* Slow Pulse Animation for Background Glows */
 @keyframes pulse-slow {
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index 60bc3e81..77578d59 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -15,7 +15,7 @@ useHead({
 </script>
 
 <template>
-  <div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
+  <div class="relative min-h-screen text-slate-600 bg-slate-50 transition-colors">
     <!-- Premium Background -->
     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
       <!-- Animated Glows -->
@@ -27,7 +27,7 @@ useHead({
     <section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
       <div class="container relative z-10 w-full">
         <!-- Hero Card Container -->
-        <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 dark:border-white/10 relative overflow-hidden">
+        <div class="bg-white/60  backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50  relative overflow-hidden">
           
           <!-- Decorative background inside card -->
           <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none"/>
@@ -37,16 +37,16 @@ useHead({
             <!-- Left Content -->
             <div class="hero-content">
                <div class="mb-10 slide-up">
-                <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white dark:bg-slate-900">
+                <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white ">
                    เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
                 </span>
               </div>
               
               <h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
                 ยกระดับทักษะ <br>
-                <span class="text-slate-900 dark:text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
+                <span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
               </h1>
-              <h2 class="hero-subtitle text-slate-600 dark:text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
+              <h2 class="hero-subtitle text-slate-600  font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
                 แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
                 เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
               </h2>
@@ -69,15 +69,15 @@ useHead({
             <!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
             <div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
                <!-- Preview Snapshot Container -->
-               <div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl dark:shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-slate-200 dark:border-white/10">
+               <div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl  border border-slate-200 ">
                   <!-- Browser-like header -->
-                  <div class="preview-header border-b border-slate-200 dark:border-white/5 py-4 bg-slate-100 dark:bg-white/5 flex items-center px-6">
+                  <div class="preview-header border-b border-slate-200  py-4 bg-slate-100  flex items-center px-6">
                     <div class="dots flex gap-2">
                       <span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
                       <span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
                       <span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
                     </div>
-                    <div class="mx-auto bg-slate-200 dark:bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
+                    <div class="mx-auto bg-slate-200  px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
                   </div>
   
                   <!-- Showcase Content -->
@@ -97,12 +97,12 @@ useHead({
                      <!-- Course List Preview -->
                      <div class="space-y-4">
                         <div class="grid grid-cols-2 gap-4">
-                           <div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
+                           <div class="p-4 bg-slate-50  rounded-2xl border border-slate-200 ">
                               <div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
                               <div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
                               <div class="h-2 bg-white/5 rounded w-1/2"/>
                            </div>
-                           <div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
+                           <div class="p-4 bg-slate-50  rounded-2xl border border-slate-200 ">
                               <div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
                               <div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
                               <div class="h-2 bg-white/5 rounded w-1/2"/>
@@ -114,7 +114,7 @@ useHead({
   
 
              <!-- Floating Feature Highlights (Marketing focused) -->
-             <div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
+             <div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)]  animate-float">
                <div class="flex items-center gap-4">
                  <div class="w-12 h-12 bg-emerald-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -122,13 +122,13 @@ useHead({
                    </svg>
                  </div>
                  <div>
-                   <div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
-                   <div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
+                   <div class="text-slate-900  font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
+                   <div class="text-slate-500  text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
                  </div>
                </div>
              </div>
 
-             <div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
+             <div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)]  animate-float" style="animation-delay: -3s;">
                 <div class="flex items-center gap-4">
                  <div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/30">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -136,8 +136,8 @@ useHead({
                    </svg>
                  </div>
                  <div>
-                   <div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
-                   <div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
+                   <div class="text-slate-900  font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
+                   <div class="text-slate-500  text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
                  </div>
                </div>
              </div>
@@ -149,14 +149,14 @@ useHead({
     </section>
 
     <!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
-    <section class="info-section py-40 bg-slate-50 dark:bg-slate-900 relative transition-colors">
+    <section class="info-section py-40 bg-slate-50  relative transition-colors">
       <!-- Background detail -->
       <div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
 
       <div class="container relative z-10">
         <div class="text-center mb-28">
           <span class="text-blue-500 font-black tracking-[0.4em] text-[11px] uppercase mb-5 block">Why Choose Us</span>
-          <h2 class="section-title text-5xl font-black mb-8 text-slate-900 dark:text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
+          <h2 class="section-title text-5xl font-black mb-8 text-slate-900  tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
           <p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
             เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
           </p>
@@ -170,7 +170,7 @@ useHead({
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                 </svg>
              </div>
-             <h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">สื่อการเรียนระดับสูง</h3>
+             <h3 class="text-2xl font-black mb-5 text-slate-900 ">สื่อการเรียนระดับสูง</h3>
              <p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
            </div>
            
@@ -181,7 +181,7 @@ useHead({
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                 </svg>
              </div>
-             <h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">วัดผลแบบอัจฉริยะ</h3>
+             <h3 class="text-2xl font-black mb-5 text-slate-900 ">วัดผลแบบอัจฉริยะ</h3>
              <p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
            </div>
 
@@ -192,7 +192,7 @@ useHead({
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                 </svg>
              </div>
-             <h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">ระบบติดตามผล</h3>
+             <h3 class="text-2xl font-black mb-5 text-slate-900 ">ระบบติดตามผล</h3>
              <p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
            </div>
         </div>
@@ -213,9 +213,7 @@ useHead({
   font-weight: 900;
   color: #0f172a;
 }
-:global(.dark) .hero-title {
-  color: white;
-}
+
 
 .text-gradient-cyan {
   background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
@@ -231,12 +229,7 @@ useHead({
   box-shadow: 0 20px 40px rgba(0,0,0,0.05);
 }
 
-:global(.dark) .glass-premium {
-  background: rgba(255, 255, 255, 0.02);
-  backdrop-filter: blur(40px);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: none;
-}
+
 
 
 .glass-tag-premium {
@@ -245,10 +238,7 @@ useHead({
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-:global(.dark) .glass-tag-premium {
-  background: rgba(15, 23, 42, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
+
 
 .btn-cta-premium {
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
@@ -279,11 +269,7 @@ useHead({
   font-size: 1.125rem;
 }
 
-:global(.dark) .btn-outline-glass {
-  background: rgba(255, 255, 255, 0.04);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
+
 
 .btn-outline-glass:hover {
   background: #ffffff;
@@ -293,10 +279,7 @@ useHead({
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
 }
 
-:global(.dark) .btn-outline-glass:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.3);
-}
+
 
 .platform-preview-card {
   width: 100%;