diff --git a/Frontend-Learner/assets/css/main.css b/Frontend-Learner/assets/css/main.css
index db18a4fb..960858a7 100644
--- a/Frontend-Learner/assets/css/main.css
+++ b/Frontend-Learner/assets/css/main.css
@@ -27,7 +27,7 @@
   /* Typography */
   /* Typography */
   --font-main:
-    "Prompt", "Sarabun", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Prompt", "Inter", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI",
     "Roboto", "Helvetica Neue", Arial, sans-serif;
 
   /* Layout */
@@ -634,6 +634,7 @@ ul {
 }
 .font-bold {
   font-weight: 700;
+  letter-spacing: normal;
 }
 .w-full {
   width: 100%;
diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue
index b8ef5613..ab1444d8 100644
--- a/Frontend-Learner/components/layout/AppHeader.vue
+++ b/Frontend-Learner/components/layout/AppHeader.vue
@@ -69,15 +69,7 @@ const searchText = ref('')
     <!-- Right Actions -->
     <div class="flex items-center gap-2 sm:gap-4 text-gray-500">
       <!-- Search Icon -->
-      <q-btn flat round dense icon="search" class="hover:text-purple-600 transition-colors" />
-      
-      <!-- Cart Icon -->
-      <q-btn flat round dense icon="shopping_cart" class="hover:text-purple-600 transition-colors" />
 
-      <!-- Notifications -->
-      <q-btn flat round dense icon="notifications_none" class="hover:text-purple-600 transition-colors">
-         <q-badge color="red" floating rounded dense v-if="false">2</q-badge>
-      </q-btn>
 
        <!-- Language -->
       <LanguageSwitcher />
diff --git a/Frontend-Learner/components/layout/LandingFooter.vue b/Frontend-Learner/components/layout/LandingFooter.vue
new file mode 100644
index 00000000..ac3ed521
--- /dev/null
+++ b/Frontend-Learner/components/layout/LandingFooter.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * @file LandingFooter.vue
+ * @description Footer component for the landing page
+ */
+</script>
+
+<template>
+  <footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
+    <div class="container mx-auto px-6 md:px-12">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12 text-center md:text-left">
+        <!-- Brand -->
+        <div>
+          <div class="flex items-center justify-center md:justify-start gap-3 mb-6">
+            <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">
+              E
+            </div>
+            <div class="flex flex-col text-left">
+              <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 mb-6">
+            แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
+          </p>
+          <div class="flex gap-4 justify-center md:justify-start">
+            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-600 hover:text-white hover:border-blue-600 transition-all">
+              <q-icon name="facebook" size="20px" />
+            </a>
+            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-blue-400 hover:text-white hover:border-blue-400 transition-all">
+              <q-icon name="flutter_dash" size="20px" /> <!-- Twitter equivalent -->
+            </a>
+            <a href="#" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:bg-pink-600 hover:text-white hover:border-pink-600 transition-all">
+              <q-icon name="camera_alt" size="20px" /> <!-- Instagram equivalent -->
+            </a>
+          </div>
+        </div>
+
+        <!-- Links -->
+        <div>
+          <h4 class="font-bold text-slate-900 mb-6">คอร์สเรียน</h4>
+          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
+            <li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors">คอร์สทั้งหมด</NuxtLink></li>
+            <li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors">คอร์สแนะนำ</NuxtLink></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors">โปรโมชั่น</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors">สำหรับองค์กร</a></li>
+          </ul>
+        </div>
+
+        <!-- Support -->
+        <div>
+          <h4 class="font-bold text-slate-900 mb-6">ช่วยเหลือ</h4>
+          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
+            <li><a href="#" class="hover:text-blue-600 transition-colors">คำถามที่พบบ่อย (FAQ)</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors">วิธีการใช้งาน</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors">เงื่อนไขการใช้งาน</a></li>
+            <li><a href="#" class="hover:text-blue-600 transition-colors">นโยบายความเป็นส่วนตัว</a></li>
+          </ul>
+        </div>
+
+        <!-- Contact -->
+        <div>
+          <h4 class="font-bold text-slate-900 mb-6">ติดต่อเรา</h4>
+          <ul class="space-y-4 text-sm text-slate-500 flex flex-col items-center md:items-start">
+            <li class="flex items-start justify-center md:justify-start gap-3">
+              <q-icon name="location_on" size="20px" class="flex-shrink-0 mt-0.5 text-blue-600" />
+              <span>123 อาคารสยามทาวเวอร์ ชั้น 15 ถนนพระราม 1 เขตปทุมวัน กรุงเทพฯ 10330</span>
+            </li>
+            <li class="flex items-center justify-center md:justify-start gap-3">
+              <q-icon name="phone" size="20px" class="flex-shrink-0 text-blue-600" />
+              <span>02-123-4567</span>
+            </li>
+            <li class="flex items-center justify-center md:justify-start gap-3">
+              <q-icon name="email" size="20px" class="flex-shrink-0 text-blue-600" />
+              <span>support@elearning.com</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
+        <p class="text-sm text-slate-400">© 2024 E-Learning Platform. All rights reserved.</p>
+        <div class="flex gap-6 text-sm text-slate-400">
+          <a href="#" class="hover:text-slate-600">Privacy Policy</a>
+          <a href="#" class="hover:text-slate-600">Terms of Service</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index 19ad4d27..ee6d8fd9 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -3,22 +3,35 @@
  * @file LandingHeader.vue
  * @description The main header for the public landing pages.
  * Features a transparent background that becomes solid/glass upon scrolling.
+ * Responsive: Collapses into a drawer on mobile (md breakpoint).
  */
 
 // Track scrolling state to adjust header styling
 const isScrolled = ref(false)
 const { isAuthenticated } = useAuth()
+// Mobile Drawer State
+const mobileMenuOpen = ref(false)
 
 const handleScroll = () => {
   isScrolled.value = window.scrollY > 20
 }
 
+// Lock body scroll when mobile menu is open
+watch(mobileMenuOpen, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll)
 })
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
+  document.body.style.overflow = '' // Cleanup
 })
 </script>
 
@@ -28,139 +41,180 @@ onUnmounted(() => {
     - Transitions between transparent and glass effect based on scroll.
   -->
   <header 
-    class="landing-header transition-all duration-300"
+    class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
     :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
   >
-    <div class="container h-full flex items-center justify-between">
-      <!-- Left Section: Logo & Desktop Navigation -->
-      <div class="flex items-center gap-8">
-        <!-- 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 transition-colors"
-              :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
-            >
-              E-Learning
-            </span>
-            <span 
-              class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
-              :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
-            >
-              Platform
-            </span>
-          </div>
+    <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>
+        <div class="flex flex-col">
+          <span 
+            class="font-black text-lg leading-none tracking-tight transition-colors"
+            :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
+          >
+            E-Learning
+          </span>
+          <span 
+            class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
+            :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
+          >
+            Platform
+          </span>
+        </div>
+      </NuxtLink>
+
+      <!-- Desktop Navigation (Hidden on Mobile) -->
+      <nav class="hidden md:flex items-center gap-8 text-sm font-bold">
+        <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']"
+        >
+          {{ $t('sidebar.onlineCourses') }}
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
         </NuxtLink>
+        <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']"
+        >
+          {{ $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>
 
-        <!-- Desktop Links -->
-        <nav class="flex items-center gap-6 text-sm font-bold">
-          <NuxtLink 
-            to="/browse" 
-            class="transition-colors relative group"
-            :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-          >
-            {{ $t('sidebar.onlineCourses') }}
-            <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
-          </NuxtLink>
-          <NuxtLink 
-            to="/browse/recommended" 
-            class="transition-colors relative group"
-            :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-          >
-            {{ $t('sidebar.recommendedCourses') }}
-            <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
-          </NuxtLink>
-
-        </nav>
-      </div>
-
-      <!-- Right Section: Action Buttons -->
-      <div class="flex items-center gap-4">
+      <!-- Desktop Action Buttons (Hidden on Mobile) -->
+      <div class="hidden md:flex items-center gap-4">
         <template v-if="!isAuthenticated">
+          <!-- Login Button -->
           <NuxtLink 
             to="/auth/login" 
-            class="btn-secondary-premium shadow-sm"
-            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'bg-blue-50 border-blue-100 text-blue-600 hover:bg-blue-100 hover:border-blue-200']"
+            class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
+            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
           >
             {{ $t('auth.login') }}
           </NuxtLink>
-          <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+          
+          <!-- 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"
+          >
             {{ $t('auth.getStarted') }}
           </NuxtLink>
         </template>
+        
         <template v-else>
-          <NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+          <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"
+          >
              {{ $t('landing.goToDashboard') }}
           </NuxtLink>
         </template>
       </div>
+
+      <!-- Mobile Menu Button (Visible on Mobile) -->
+      <button 
+        class="md:hidden relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
+        :class="[isScrolled || mobileMenuOpen ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100']"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
+      </button>
+
+      <!-- Mobile Navigation Drawer -->
+      <div 
+        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 transition-opacity duration-300 md:hidden"
+        :class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
+        @click="mobileMenuOpen = false"
+      />
+      
+      <div 
+        class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out md:hidden flex flex-col"
+        :class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
+      >
+        <div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
+          <!-- Close Button -->
+          <button 
+            class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
+            @click="mobileMenuOpen = false"
+          >
+            <q-icon name="close" size="20px" />
+          </button>
+
+          <!-- Mobile Links -->
+          <nav class="flex flex-col gap-2 mt-8">
+            <NuxtLink 
+              to="/" 
+              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.overview') }}
+              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
+            </NuxtLink>
+            <NuxtLink 
+              to="/browse" 
+              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.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">
+             <template v-if="!isAuthenticated">
+                <div class="flex flex-col gap-4">
+                   <NuxtLink 
+                      to="/auth/login" 
+                      class="w-full py-3 rounded-xl font-bold text-center border-2 border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                      @click="mobileMenuOpen = false"
+                   >
+                     {{ $t('auth.login') }}
+                   </NuxtLink>
+                   <NuxtLink 
+                      to="/auth/register" 
+                      class="w-full py-3 rounded-xl font-bold text-center text-white bg-blue-600 shadow-lg hover:bg-blue-700 transition-colors"
+                      @click="mobileMenuOpen = false"
+                   >
+                     {{ $t('auth.getStarted') }}
+                   </NuxtLink>
+                </div>
+             </template>
+             <template v-else>
+                <NuxtLink 
+                   to="/dashboard" 
+                   class="flex items-center justify-center w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/30"
+                   @click="mobileMenuOpen = false"
+                >
+                   {{ $t('landing.goToDashboard') }} <q-icon name="arrow_forward" class="ml-2" />
+                </NuxtLink>
+             </template>
+          </div>
+        </div>
+      </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);
+  background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
+  backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
-
-.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);
-}
-
-/* Secondary Premium Button Styling */
-.btn-secondary-premium {
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 800;
-  border: 1.5px solid;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-secondary-premium:hover {
-  transform: translateY(-2px);
-}
-
-@media (max-width: 768px) {
-  .container {
-    padding: 0 16px;
-  }
-}
 </style>
diff --git a/Frontend-Learner/error.vue b/Frontend-Learner/error.vue
index 4d957a3b..75540c71 100644
--- a/Frontend-Learner/error.vue
+++ b/Frontend-Learner/error.vue
@@ -86,7 +86,7 @@ const handleError = () => {
   background-color: var(--bg-body);
   color: var(--text-main);
   padding: 24px;
-  font-family: 'Inter', 'Prompt', 'Sarabun', sans-serif;
+  font-family: var(--font-main);
 }
 
 .error-content {
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index 42ef7e83..8bd52170 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -53,6 +53,6 @@ const toggleLeftDrawer = () => {
 <style>
 /* Ensure fonts are applied */
 .font-inter {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-main);
 }
 </style>
diff --git a/Frontend-Learner/layouts/landing.vue b/Frontend-Learner/layouts/landing.vue
index c05167bf..75e90c7e 100644
--- a/Frontend-Learner/layouts/landing.vue
+++ b/Frontend-Learner/layouts/landing.vue
@@ -36,6 +36,9 @@ onMounted(() => {
       </q-page>
     </q-page-container>
 
+    <!-- Footer -->
+    <LandingFooter />
+
 
   </q-layout>
 </template>
diff --git a/Frontend-Learner/nuxt.config.ts b/Frontend-Learner/nuxt.config.ts
index b3079964..ed929816 100644
--- a/Frontend-Learner/nuxt.config.ts
+++ b/Frontend-Learner/nuxt.config.ts
@@ -69,7 +69,7 @@ export default defineNuxtConfig({
         {
           rel: "stylesheet",
           // โหลด Font: Inter, Prompt, Sarabun
-          href: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700;800&display=swap",
+          href: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700;800;900&family=Sarabun:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800;900&display=swap",
         },
       ],
     },
diff --git a/Frontend-Learner/pages/dashboard/index.vue b/Frontend-Learner/pages/dashboard/index.vue
index 08ba4d77..191c62b8 100644
--- a/Frontend-Learner/pages/dashboard/index.vue
+++ b/Frontend-Learner/pages/dashboard/index.vue
@@ -91,17 +91,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
 <template>
   <div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
     
-    <!-- 1. Greeting Section -->
-    <section class="bg-white pt-8 pb-10 px-4 md:px-12">
-        <div class="max-w-7xl mx-auto">
-            <h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2D] mb-4 flex items-center gap-3">
-                สวัสดี {{ currentUser?.firstName || 'User' }} <span class="text-3xl">😊</span>
-            </h1>
-            <p class="text-gray-500 text-base md:text-lg font-light max-w-3xl">
-                เข้าถึง +490 หลักสูตรออนไลน์สำหรับสมาชิกรายปี เพื่อบรรลุเป้าหมายด้านอาชีพและพัฒนาการเรียนรู้สำหรับคุณ ✨
-            </p>
-        </div>
-    </section>
+
 
     <div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
 
@@ -109,8 +99,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
         <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]">เรียนต่อกับคอร์สของคุณ</h2>
-                 <NuxtLink to="/dashboard/my-courses" class="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
-                    การเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
+                 <NuxtLink to="/dashboard/my-courses" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1">
+                    คอร์สเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
                  </NuxtLink>
             </div>
 
@@ -120,20 +110,19 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                     <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">
-                        <div class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
+                        <div class="bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
                         <h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
                         
                         <!-- Progress -->
                         <div class="w-full">
-                            <div class="flex justify-between text-gray-300 text-xs mb-2">
-                                <span>{{ heroCourse.completed_lessons }}/{{ heroCourse.total_lessons }} บทเรียน</span>
+                            <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 bg-purple-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
+                                <div class="h-full bg-blue-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
                             </div>
                             <div class="mt-4 flex justify-end">
-                                <span class="text-white font-bold text-sm hover:underline">เรียนต่อ</span>
+                                <span class="text-white font-bold text-sm hover:underline">{{ heroCourse.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                             </div>
                         </div>
                     </div>
@@ -150,11 +139,10 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                              
                              <div class="mt-auto">
                                 <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
-                                    <div class="h-full bg-purple-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
+                                    <div class="h-full bg-blue-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
                                 </div>
-                                <div class="flex justify-between items-center text-xs">
-                                    <span class="text-gray-500">{{ course.completed_lessons }}/{{ course.total_lessons }} บทเรียน</span>
-                                    <span class="text-purple-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">เรียนต่อ</span>
+                                <div class="flex justify-end items-center text-xs">
+                                    <span class="text-blue-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">{{ course.progress === 100 ? 'เรียนอีกครั้ง' : 'เรียนต่อ' }}</span>
                                 </div>
                              </div>
                         </div>
@@ -174,7 +162,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                  <p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Content when courses exist -->
+            <div v-if="libraryCourses.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <!-- Course Cards -->
                 <CourseCard 
                   v-for="course in libraryCourses" 
@@ -191,13 +180,31 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
                         flat
                         rounded
                         no-caps
-                        class="text-purple-600 hover:bg-purple-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
+                        class="text-blue-600 hover:bg-blue-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
                         to="/dashboard/my-courses"
                      >
                         ดูทั้งหมด <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 rounded-3xl border border-dashed border-gray-200 p-12 flex flex-col items-center justify-center text-center min-h-[300px]">
+                <div class="bg-blue-50 p-6 rounded-full mb-6">
+                    <q-icon name="school" size="48px" class="text-blue-200" />
+                </div>
+                <h3 class="text-xl font-bold text-gray-800 mb-2">ยังไม่มีคอร์สเรียนในคลัง</h3>
+                <p class="text-gray-500 mb-8 max-w-md">เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ</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"
+                >
+                    ดูคอร์สเรียนทั้งหมด
+                </q-btn>
+            </div>
         </section>
 
 
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index 1e4026d7..de7ea2e6 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -121,7 +121,7 @@ onMounted(() => {
             <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-black text-slate-900 leading-[1.15] mb-8">
+          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
             คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
           </h1>
           <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;">
@@ -176,7 +176,7 @@ onMounted(() => {
     <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-black text-slate-900 mb-6 px-4">
+          <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">
@@ -184,27 +184,31 @@ onMounted(() => {
           </p>
         </div>
 
-        <!-- Horizontal Scrollable Container -->
+        <!-- Grid Container (Bento Layout) -->
         <div class="relative">
-          <div class="flex justify-center gap-6 overflow-x-auto pb-12 px-4 no-scrollbar scroll-smooth snap-x flex-wrap">
+          <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="flex-none w-[280px] snap-start group cursor-pointer p-8 rounded-[2.5rem] aspect-[3/4.5] flex flex-col justify-between transition-all hover:-translate-y-3 shadow-xl overflow-hidden relative"
-                 :class="card.bgClass"
+                 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-xs font-black uppercase tracking-[0.2em] opacity-80 mb-3 block text-white/80">ก้าวแรกของ</span>
-                <h3 class="text-3xl font-black leading-none tracking-tight text-white mb-2" style="text-shadow: 0 2px 4px rgba(0,0,0,0.1)">{{ card.title }}</h3>
+                <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-6 relative z-10">
-                <p class="text-lg font-bold leading-snug text-white/95" style="text-shadow: 0 1px 2px rgba(0,0,0,0.1)">{{ card.desc }}</p>
+              <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-14 h-14 rounded-full border-2 border-white/30 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-110 backdrop-blur-md shadow-lg">
-                     <q-icon name="arrow_forward" size="28px" class="text-white" />
+                  <div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
+                       :class="[i === 0 ? 'w-12 h-12' : '']">
+                     <q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
                   </div>
                 </div>
               </div>
@@ -262,7 +266,7 @@ onMounted(() => {
               <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-black text-slate-900 leading-[1.15] md:leading-[1.12] tracking-tight mb-0 pt-1 overflow-visible">
+              <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>
@@ -303,8 +307,8 @@ onMounted(() => {
       <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">
           <div class="slide-up">
-            <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-4">คอร์สออนไลน์</h2>
-            <p class="text-slate-500 font-black text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
+            <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
+            <p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
           </div>
           <NuxtLink to="/browse" class="flex items-center 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" />
@@ -435,7 +439,7 @@ onMounted(() => {
 
 /* Typography Overrides */
 h1, h2, h3 {
-  letter-spacing: -0.02em;
+  letter-spacing: normal;
 }
 
 /* Hover effects */