diff --git a/Frontend-Learner/components/layout/AppHeader.vue b/Frontend-Learner/components/layout/AppHeader.vue
index f92a1353..373e8dfe 100644
--- a/Frontend-Learner/components/layout/AppHeader.vue
+++ b/Frontend-Learner/components/layout/AppHeader.vue
@@ -41,6 +41,17 @@ const searchText = ref('')
         <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500 dark:text-slate-400">Platform</span>
       </div>
     </div>
+
+    <!-- Desktop Navigation -->
+    <nav class="hidden md:flex items-center gap-6 ml-8 text-sm font-bold">
+      <NuxtLink to="/browse" class="text-slate-600 hover:text-blue-600 transition-colors">
+        {{ $t('sidebar.onlineCourses') }}
+      </NuxtLink>
+      <NuxtLink to="/browse/discovery" class="text-slate-600 hover:text-blue-600 transition-colors">
+        {{ $t('sidebar.recommendedCourses') }}
+      </NuxtLink>
+
+    </nav>
     
     <q-space />
     
diff --git a/Frontend-Learner/components/layout/AppSidebar.vue b/Frontend-Learner/components/layout/AppSidebar.vue
index e8c28dac..6cdea9ef 100644
--- a/Frontend-Learner/components/layout/AppSidebar.vue
+++ b/Frontend-Learner/components/layout/AppSidebar.vue
@@ -5,28 +5,10 @@
  * Uses Quasar QList for structure.
  */
 
+const { sidebarItems } = useNavItems()
 const { t } = useI18n()
+const navItems = sidebarItems
 
-const navItems = computed(() => [
-  {
-    to: "/dashboard",
-    label: t('sidebar.overview'),
-    icon: "dashboard", // Using Material Icons names where possible or SVG paths
-    isSvg: false
-  },
-  {
-    to: "/browse/discovery",
-    label: t('sidebar.browseCourses'),
-    icon: "explore",
-    isSvg: false
-  },
-  {
-    to: "/dashboard/my-courses",
-    label: t('sidebar.myCourses'),
-    icon: "school",
-    isSvg: false
-  }
-]);
 
 const handleNavigate = (path: string) => {
   if (import.meta.client) {
@@ -55,7 +37,7 @@ const handleNavigate = (path: string) => {
         </q-item-section>
         
         <q-item-section>
-          <q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
+          <q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
         </q-item-section>
       </q-item>
     </q-list>
diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index abb1f85d..dc31add9 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -27,10 +27,8 @@ onMounted(() => {
     :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">
+      <!-- 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">
@@ -53,35 +51,28 @@ onMounted(() => {
         </NuxtLink>
 
         <!-- Desktop Links -->
-        <nav class="hidden md:block">
-          <ul class="flex items-center gap-8 text-sm font-bold">
-            <li>
-              <NuxtLink 
-                to="/browse" 
-                class="transition-colors relative group"
-                :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-              >
-                {{ $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="transition-colors relative group"
-                :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-              >
-                {{ $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 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 (Login/Register or Dashboard) 
-      -->
+      <!-- Right Section: Action Buttons -->
       <div class="flex items-center gap-4">
         <template v-if="!isAuthenticated">
           <NuxtLink 
diff --git a/Frontend-Learner/components/layout/MobileNav.vue b/Frontend-Learner/components/layout/MobileNav.vue
index c0ee0cab..d6a80b27 100644
--- a/Frontend-Learner/components/layout/MobileNav.vue
+++ b/Frontend-Learner/components/layout/MobileNav.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
-const { t } = useI18n()
-
-const navItems = computed(() => [
-  { to: '/dashboard', icon: 'dashboard', label: t('sidebar.overview') },
-  { to: '/browse/discovery', icon: 'explore', label: t('sidebar.browseCourses') },
-  { to: '/dashboard/my-courses', icon: 'school', label: t('sidebar.myCourses') }
-])
+const { mobileItems } = useNavItems()
+const navItems = mobileItems
 
 const handleNavigate = (path: string) => {
   if (import.meta.client) {
@@ -27,7 +22,7 @@ const handleNavigate = (path: string) => {
       :key="item.to"
       @click="handleNavigate(item.to)"
       :icon="item.icon"
-      :label="item.label"
+      :label="$t(item.labelKey)"
       no-caps
       class="py-2"
       :class="{ 'q-tab--active text-primary': $route.path === item.to }"
diff --git a/Frontend-Learner/components/user/UserMenu.vue b/Frontend-Learner/components/user/UserMenu.vue
index 8d66bddd..44c3d114 100644
--- a/Frontend-Learner/components/user/UserMenu.vue
+++ b/Frontend-Learner/components/user/UserMenu.vue
@@ -29,12 +29,9 @@ const userInitials = computed(() => {
   return f + l
 })
 
-const menuItems = computed(() => [
-  { label: t('userMenu.home'), to: '/dashboard' },
-  { label: t('userMenu.courseList'), to: '/browse/discovery' },
-  { label: t('userMenu.myCourses'), to: '/dashboard/my-courses' },
-  { label: t('userMenu.settings'), to: '/dashboard/profile' }
-])
+const { userMenuItems } = useNavItems()
+const menuItems = userMenuItems
+
 
 const handleLogout = async () => {
   await logout()
@@ -63,14 +60,14 @@ const handleLogout = async () => {
         <q-list class="py-2">
           <q-item 
             v-for="item in menuItems" 
-            :key="item.label" 
+            :key="item.labelKey" 
             clickable 
             v-close-popup 
             @click="navigateTo(item.to)"
             class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
           >
             <q-item-section>
-              <q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ item.label }}</q-item-label>
+              <q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t(item.labelKey) }}</q-item-label>
             </q-item-section>
           </q-item>
 
diff --git a/Frontend-Learner/composables/useNavItems.ts b/Frontend-Learner/composables/useNavItems.ts
new file mode 100644
index 00000000..d5bb34cc
--- /dev/null
+++ b/Frontend-Learner/composables/useNavItems.ts
@@ -0,0 +1,76 @@
+/**
+ * @file useNavItems.ts
+ * @description Single Source of Truth for navigation items used across the app (Sidebar, Mobile Nav, User Menu).
+ */
+
+export interface NavItem {
+  to: string
+  labelKey: string
+  icon: string
+  showOn: ('sidebar' | 'mobile' | 'userMenu')[]
+  roles?: string[]
+}
+
+export const useNavItems = () => {
+  const allNavItems: NavItem[] = [
+    {
+      to: '/dashboard',
+      labelKey: 'sidebar.overview',
+      icon: 'dashboard',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/browse',
+      labelKey: 'sidebar.onlineCourses',
+      icon: 'video_library',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/browse/discovery',
+      labelKey: 'sidebar.recommendedCourses',
+      icon: 'auto_awesome',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/browse/discovery',
+      labelKey: 'sidebar.browseCourses',
+      icon: 'explore',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/dashboard/my-courses',
+      labelKey: 'sidebar.myCourses',
+      icon: 'school',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/dashboard/announcements',
+      labelKey: 'sidebar.announcements',
+      icon: 'campaign',
+      showOn: ['sidebar', 'mobile', 'userMenu']
+    },
+    {
+      to: '/dashboard/profile',
+      labelKey: 'sidebar.profile',
+      icon: 'person',
+      showOn: ['sidebar'] // Already in settings for userMenu
+    },
+    {
+        to: '/dashboard/profile',
+        labelKey: 'userMenu.settings',
+        icon: 'settings',
+        showOn: ['userMenu']
+    }
+  ]
+
+  const sidebarItems = computed(() => allNavItems.filter(item => item.showOn.includes('sidebar')))
+  const mobileItems = computed(() => allNavItems.filter(item => item.showOn.includes('mobile')))
+  const userMenuItems = computed(() => allNavItems.filter(item => item.showOn.includes('userMenu')))
+
+  return {
+    allNavItems,
+    sidebarItems,
+    mobileItems,
+    userMenuItems
+  }
+}
diff --git a/Frontend-Learner/i18n/locales/en.json b/Frontend-Learner/i18n/locales/en.json
index ea57a1e2..f51861ff 100644
--- a/Frontend-Learner/i18n/locales/en.json
+++ b/Frontend-Learner/i18n/locales/en.json
@@ -58,6 +58,8 @@
     "overview": "Home",
     "myCourses": "My Courses",
     "browseCourses": "Browse Courses",
+    "onlineCourses": "Online Courses",
+    "recommendedCourses": "Recommended Courses",
     "announcements": "Announcements",
     "profile": "My Profile"
   },
diff --git a/Frontend-Learner/i18n/locales/th.json b/Frontend-Learner/i18n/locales/th.json
index 82ca0f4a..29a7c0f1 100644
--- a/Frontend-Learner/i18n/locales/th.json
+++ b/Frontend-Learner/i18n/locales/th.json
@@ -58,6 +58,8 @@
     "overview": "หน้าหลัก",
     "myCourses": "คอร์สของฉัน",
     "browseCourses": "ค้นหาคอร์ส",
+    "onlineCourses": "คอร์สออนไลน์",
+    "recommendedCourses": "คอร์สเรียนออนไลน์แนะนำ",
     "announcements": "ข่าวประกาศ",
     "profile": "บัญชีผู้ใช้"
   },
diff --git a/Frontend-Learner/layouts/default.vue b/Frontend-Learner/layouts/default.vue
index d98d5d54..745c1669 100644
--- a/Frontend-Learner/layouts/default.vue
+++ b/Frontend-Learner/layouts/default.vue
@@ -15,7 +15,7 @@ const toggleLeftDrawer = () => {
 </script>
 
 <template>
-  <q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50 font-sans">
+  <q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
     <!-- Header -->
     <q-header
       bordered
diff --git a/Frontend-Learner/layouts/landing.vue b/Frontend-Learner/layouts/landing.vue
index f33dc157..c05167bf 100644
--- a/Frontend-Learner/layouts/landing.vue
+++ b/Frontend-Learner/layouts/landing.vue
@@ -20,7 +20,7 @@ onMounted(() => {
 
 
 <template>
-  <q-layout view="lHh LpR lFf" class="bg-white text-slate-900 font-inter">
+  <q-layout view="lHh LpR lFf" class="bg-white text-slate-900">
 
     
     <!-- Header (Transparent & Overlay) -->
@@ -39,9 +39,3 @@ onMounted(() => {
 
   </q-layout>
 </template>
-
-<style>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
-</style>
diff --git a/Frontend-Learner/pages/browse/index.vue b/Frontend-Learner/pages/browse/index.vue
index 503d9043..409d62a6 100644
--- a/Frontend-Learner/pages/browse/index.vue
+++ b/Frontend-Learner/pages/browse/index.vue
@@ -18,6 +18,7 @@ useHead({
 // Reactive state for the search input
 const searchQuery = ref('')
 const { fetchCourses } = useCourse()
+const { fetchCategories, categories } = useCategory()
 
 // Helper to handle localized text
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
@@ -26,8 +27,78 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
   return text.th || text.en || ''
 }
 
-// Fetch courses from API
-const { data: coursesResponse, error } = await useAsyncData('courses-list', () => fetchCourses())
+const route = useRoute()
+const router = useRouter()
+
+// State for selected category
+const selectedCategory = ref((route.query.category as string) || 'all')
+
+const selectCategory = (slug: string) => {
+  if (slug === 'all') {
+    // Remove query param for 'all' or keep it? Protocol says /browse?category=all is fine.
+    // But usually clean URL is better. Let's keep it simple as requested: "Click programming => /browse?category=programming".
+    // "all" might just remove the param or be ?category=all. The prompt didn't specify 'all' behavior for URL, but fallback is fine.
+    // If I use 'all', the watcher sets 'all'.
+    router.push({ query: { category: 'all' } })
+  } else {
+    router.push({ query: { ...route.query, category: slug } })
+  }
+}
+
+// Watch route query to sync state
+watch(() => route.query.category, (newCategory) => {
+  selectedCategory.value = (newCategory as string) || 'all'
+})
+
+// Specific labels mapping as requested
+const categoryLabels: Record<string, string> = {
+  all: "ทั้งหมด",
+  programming: "การเขียนโปรแกรม",
+  design: "การออกแบบ",
+  business: "เกี่ยวกับธุรกิจ"
+}
+
+const getCategoryLabel = (category: any) => {
+  if (categoryLabels[category.slug]) {
+    return categoryLabels[category.slug]
+  }
+  return getLocalizedText(category.name)
+}
+
+// Fetch categories on mount
+await useAsyncData('categories-list', () => fetchCategories())
+
+// Fetch courses from API (reactive to selectedCategory)
+// Fetch courses from API (reactive to selectedCategory)
+// Fetch courses from API (reactive to selectedCategory)
+const { data: coursesResponse, error, refresh } = await useAsyncData(
+  'browse-courses-list', 
+  () => {
+    const params: any = {}
+    console.log('Fetching courses. Selected Category:', selectedCategory.value)
+    
+    if (selectedCategory.value !== 'all') {
+      const category = categories.value.find(c => c.slug === selectedCategory.value)
+      console.log('Found Category:', category)
+      
+      if (category) {
+        params.category_id = category.id
+      }
+    }
+    
+    console.log('Params being sent to fetchCourses:', params)
+    return fetchCourses(params)
+  }
+)
+
+// Watch for category changes and refresh data
+watch(selectedCategory, (newVal) => {
+    console.log('Selected Category Changed to:', newVal)
+    refresh()
+})
+
+// Ref for the scroll container
+const categoryScroll = ref<HTMLElement | null>(null)
 
 // Computed property for courses list from API response
 const courses = computed(() => {
@@ -75,14 +146,10 @@ const filteredCourses = computed(() => {
     <section class="relative pt-32 pb-20 px-6 overflow-hidden">
       <div class="container mx-auto max-w-6xl text-center relative z-10">
         <!-- Tagline Badge -->
-        <div class="mb-8 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)]">
-             EXPLORE COURSES
-           </span>
-        </div>
+
         <!-- Main Title -->
-        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-8 tracking-normal py-10 slide-up leading-[1.6]" style="animation-delay: 0.1s;">
-          คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
+        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight py-2 slide-up leading-[1.2] overflow-visible" style="animation-delay: 0.1s;">
+          คอร์สเรียนออนไลน์<span class="text-gradient-cyan">ทั้งหมด</span>
         </h1>
         <!-- Subtitle -->
         <p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
@@ -97,12 +164,12 @@ const filteredCourses = computed(() => {
     <!-- ==========================================
           SEARCH & GRID SECTION
      ========================================== -->
-    <section class="container mx-auto max-w-[1440px] px-6 pb-32">
+    <section class="container mx-auto max-w-[1440px] px-6 pb-20">
        
        <!-- Content Frame Container -->
        <div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
         
-          <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-12">
+          <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-8">
             <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"/>
               รายการคอร์สเรียน
@@ -126,6 +193,49 @@ const filteredCourses = computed(() => {
             </div>
           </div>
 
+          <!-- Category Filter Tabs with Scroll Buttons -->
+          <div class="relative mb-8">
+            <!-- Left Scroll Button -->
+            <button 
+              class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: -200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_left" size="24px" />
+            </button>
+
+            <!-- Scrollable Container -->
+            <div 
+              ref="categoryScroll"
+              class="flex items-center gap-3 overflow-x-auto pb-2 no-scrollbar px-1 scroll-smooth"
+            >
+              <button 
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectCategory('all')"
+              >
+                {{ categoryLabels.all }}
+              </button>
+              <button 
+                v-for="category in categories" 
+                :key="category.id"
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectCategory(category.slug)"
+              >
+                {{ getCategoryLabel(category) }}
+              </button>
+            </div>
+
+            <!-- Right Scroll Button -->
+             <button 
+              class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: 200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_right" size="24px" />
+            </button>
+          </div>
+
+
           <!-- Course Grid (Updated to 4 cols) -->
           <div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
             <div 
@@ -197,7 +307,7 @@ const filteredCourses = computed(() => {
           CTA SECTION
           Call to action to register
      ========================================== -->
-    <section class="py-32 relative overflow-hidden">
+    <section class="py-20 relative overflow-hidden">
        <!-- Gradient Overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
       
diff --git a/Frontend-Learner/pages/browse/recommended.vue b/Frontend-Learner/pages/browse/recommended.vue
new file mode 100644
index 00000000..fc8b9bbb
--- /dev/null
+++ b/Frontend-Learner/pages/browse/recommended.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+/**
+ * @file recommended.vue
+ * @description Page displaying recommended courses.
+ * Matches the layout of the browse page.
+ */
+
+// Define page metadata using the landing layout (dark theme default)
+definePageMeta({
+  layout: 'landing'
+})
+
+// Set the HTML head title for SEO
+useHead({
+  title: 'คอร์สเรียนแนะนำ - E-Learning System'
+})
+
+// Reactive state for the search input
+const searchQuery = ref('')
+const { fetchCourses } = useCourse()
+const { fetchCategories, categories } = useCategory()
+
+// Helper to handle localized text
+const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
+  if (!text) return ''
+  if (typeof text === 'string') return text
+  return text.th || text.en || ''
+}
+
+// State for selected category
+const selectedCategory = ref('all')
+
+// Fetch categories on mount
+await useAsyncData('categories-list', () => fetchCategories())
+
+// Fetch courses from API (reactive to selectedCategory)
+const { data: coursesResponse, error, refresh } = await useAsyncData(
+  'recommended-courses-list', 
+  () => {
+    const params: any = {
+      is_recommended: true // Only fetch recommended courses
+    }
+    console.log('Fetching recommended courses. Selected Category:', selectedCategory.value)
+    
+    if (selectedCategory.value !== 'all') {
+      const category = categories.value.find(c => c.slug === selectedCategory.value)
+      console.log('Found Category:', category)
+      
+      if (category) {
+        params.category_id = category.id
+      }
+    }
+    
+    console.log('Params being sent to fetchCourses:', params)
+    return fetchCourses(params)
+  }
+)
+
+// Watch for category changes and refresh data
+watch(selectedCategory, (newVal) => {
+    console.log('Selected Category Changed to:', newVal)
+    refresh()
+})
+
+// Ref for the scroll container
+const categoryScroll = ref<HTMLElement | null>(null)
+
+// Computed property for courses list from API response
+const courses = computed(() => {
+  if (coursesResponse.value?.success) {
+    return coursesResponse.value.data
+  }
+  return []
+})
+
+/**
+ * @computed filteredCourses
+ * @description Filters the courses list based on the search query.
+ * Checks both the course title and description (case-insensitive).
+ */
+const filteredCourses = computed(() => {
+  const list = courses.value || []
+  if (!searchQuery.value) return list
+  
+  const query = searchQuery.value.toLowerCase()
+  return list.filter(c => {
+    const title = getLocalizedText(c.title).toLowerCase()
+    const desc = getLocalizedText(c.description).toLowerCase()
+    return title.includes(query) || desc.includes(query)
+  })
+})
+</script>
+
+<template>
+  <!-- Main Container: Dark Theme Base -->
+  <div class="relative min-h-screen text-slate-600  bg-slate-50  transition-colors">
+     
+     <!-- ==========================================
+          BACKGROUND EFFECTS
+          Ambient glows matching the index.vue theme
+     ========================================== -->
+     <div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
+      <div class="absolute top-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-blue-600/10 blur-[140px] animate-pulse-slow"/>
+      <div class="absolute bottom-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-indigo-600/10 blur-[140px] animate-pulse-slow" style="animation-delay: 3s;"/>
+    </div>
+
+    <!-- ==========================================
+          HERO SECTION
+          Title and subtitle area
+     ========================================== -->
+    <section class="relative pt-32 pb-20 px-6 overflow-hidden">
+      <div class="container mx-auto max-w-6xl text-center relative z-10">
+        <!-- Tagline Badge -->
+        <!-- Main Title -->
+        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight py-2 slide-up leading-[1.2] overflow-visible" style="animation-delay: 0.1s;">
+          คอร์สเรียนออนไลน์<span class="text-gradient-cyan">แนะนำ</span>
+        </h1>
+        <!-- Subtitle -->
+        <p class="text-slate-400 text-xl max-w-2xl mx-auto leading-relaxed slide-up" style="animation-delay: 0.2s;">
+          คัดสรรคอร์สเรียนที่ดีที่สุดเพื่อคุณโดยเฉพาะ ยกระดับทักษะของคุณด้วยเนื้อหาคุณภาพสูงที่เราแนะนำ
+        </p>
+      </div>
+    </section>
+
+    <!-- ==========================================
+          SEARCH & GRID SECTION
+     ========================================== -->
+    <section class="container mx-auto max-w-[1440px] px-6 pb-20">
+       
+       <!-- Content Frame Container -->
+       <div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
+        
+          <div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-8">
+            <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>
+
+            <!-- Search Bar (Compact) -->
+            <div class="relative max-w-md w-full">
+              <div class="relative group">
+                <input 
+                  v-model="searchQuery" 
+                  type="text" 
+                  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">
+                  <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Category Filter Tabs with Scroll Buttons -->
+          <div class="relative mb-8">
+            <!-- Left Scroll Button -->
+            <button 
+              class="absolute left-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: -200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_left" size="24px" />
+            </button>
+
+            <!-- Scrollable Container -->
+            <div 
+              ref="categoryScroll"
+              class="flex items-center gap-3 overflow-x-auto pb-2 no-scrollbar px-1 scroll-smooth"
+            >
+              <button 
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectedCategory = 'all'"
+              >
+                All
+              </button>
+              <button 
+                v-for="category in categories" 
+                :key="category.id"
+                class="px-6 py-2.5 rounded-full font-bold text-sm transition-all whitespace-nowrap border-2 flex-shrink-0"
+                :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+                @click="selectedCategory = category.slug"
+              >
+                {{ getLocalizedText(category.name) }}
+              </button>
+            </div>
+
+            <!-- Right Scroll Button -->
+             <button 
+              class="absolute right-0 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full bg-white shadow-md border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all md:hidden"
+              @click="categoryScroll?.scrollBy({ left: 200, behavior: 'smooth' })"
+            >
+              <q-icon name="chevron_right" size="24px" />
+            </button>
+          </div>
+
+
+          <!-- Course Grid (4 cols) -->
+          <div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <div 
+              v-for="(course, index) in filteredCourses" 
+              :key="course.id" 
+              class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
+              :style="{ animationDelay: `${0.1 * (index + 1)}s` }"
+            >
+              <!-- Card Image -->
+              <div class="h-48 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
+                <!-- Recommended Badge -->
+                
+                
+                <img 
+                  v-if="course.thumbnail_url" 
+                  :src="course.thumbnail_url" 
+                  :alt="getLocalizedText(course.title)"
+                  class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  @error="(e) => (e.target as HTMLImageElement).style.display = 'none'" 
+                />
+                <div 
+                  v-else 
+                  class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
+                >
+                </div>
+              </div>
+
+              <!-- Card Content Body -->
+              <div class="p-6 flex-1 flex flex-col border-t border-slate-100 ">
+                <h3 class="text-xl font-bold text-slate-900  mb-2 leading-snug group-hover:text-blue-600  transition-colors line-clamp-2">
+                  {{ getLocalizedText(course.title) }}
+                </h3>
+                <p class="text-slate-500  text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
+                  {{ getLocalizedText(course.description) }}
+                </p>
+
+                <!-- Card Footer -->
+                <div class="pt-4 border-t border-slate-100  flex items-center justify-between mt-auto">
+                  <span class="text-lg font-black text-blue-600  tracking-tight">
+                    {{ course.is_free ? 'ฟรี' : course.price }}
+                  </span>
+                  <NuxtLink 
+                    :to="`/course/${course.id}`" 
+                    class="px-4 py-2 bg-slate-50  hover:bg-blue-600 text-slate-600  hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200  hover:border-blue-500/50"
+                  >
+                    ดูรายละเอียด
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty State (No Results) -->
+          <div v-else class="text-center py-20">
+            <div class="text-6xl mb-6 opacity-50 animate-bounce">💎</div>
+            <h2 class="text-2xl font-black text-slate-900  mb-3">ไม่พบคอร์สแนะนำในขณะนี้</h2>
+            <p class="text-slate-400 mb-8 max-w-md mx-auto">
+              ลองเลือกหมวดหมู่อื่น หรือกลับมาดูใหม่ภายหลัง
+            </p>
+            <button 
+              class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20" 
+              @click="searchQuery = ''; selectedCategory = 'all'"
+            >
+              ล้างค่าการค้นหา
+            </button>
+          </div>
+
+       </div>
+    </section>
+
+    <!-- ==========================================
+          CTA SECTION
+     ========================================== -->
+    <section class="py-20 relative overflow-hidden">
+       <!-- Gradient Overlay -->
+       <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  mb-8 tracking-tight">
+          ปลดล็อกศักยภาพของคุณวันนี้
+        </h2>
+        <p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
+          เริ่มเรียนรู้กับคอร์สที่เราแนะนำ และเติบโตไปพร้อมกับผู้เรียนนับหมื่นคน
+        </p>
+        <NuxtLink 
+          to="/auth/register" 
+          class="inline-flex items-center gap-3 px-10 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl text-lg font-black shadow-2xl shadow-blue-900/40 hover:scale-105 transition-all duration-300"
+        >
+          <span></span>
+          <span>สมัครสมาชิกฟรี</span>
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* 
+  MATCHING INDEX.VUE STYLES
+  Adjusted to Pink/Rose theme for "Recommended" feel
+*/
+
+/* Gradient Text Effect (Cyan to Blue) */
+.text-gradient-cyan {
+  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  display: inline-block;
+  padding: 0.5em 0.2em;
+  margin: -0.5em -0.2em;
+  vertical-align: baseline;
+}
+
+/* Premium Glass Effect */
+.glass-premium {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(40px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+/* Glass Card Style */
+.glass-card {
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 2rem;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+/* Animations */
+@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;
+}
+
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-up {
+  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  opacity: 0;
+}
+</style>
diff --git a/Frontend-Learner/pages/index.vue b/Frontend-Learner/pages/index.vue
index ba526a4a..3c6e5c37 100644
--- a/Frontend-Learner/pages/index.vue
+++ b/Frontend-Learner/pages/index.vue
@@ -6,369 +6,461 @@
  */
 definePageMeta({
   layout: 'landing',
-  middleware: 'auth' // ใช้ auth middleware เพื่อเช็ค: ถ้า Login แล้วให้ดีดไป Dashboard
+  middleware: 'auth'
 })
 
 useHead({
   title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
 })
+
+const { fetchCategories } = useCategory()
+const { fetchCourses, getLocalizedText } = useCourse()
+
+const categories = ref<any[]>([])
+const topCourses = ref<any[]>([])
+const selectedCategory = ref('all')
+const isLoading = ref(false)
+const currentSlide = ref(0)
+const courseChunks = computed(() => {
+  const chunkSize = 4
+  const chunks = []
+  if (!topCourses.value) return []
+  for (let i = 0; i < topCourses.value.length; i += chunkSize) {
+    chunks.push(topCourses.value.slice(i, i + chunkSize))
+  }
+  return chunks
+})
+
+const loadData = async () => {
+    isLoading.value = true
+    try {
+        const [catRes, courseRes] = await Promise.all([
+            fetchCategories(),
+            fetchCourses({ limit: 8, forceRefresh: true })
+        ])
+        
+        if (catRes.success) categories.value = catRes.data || []
+        if (courseRes.success) topCourses.value = courseRes.data || []
+    } catch (err) {
+        console.error('Failed to load landing page data:', err)
+    } finally {
+        isLoading.value = false
+    }
+}
+
+const goBrowse = (slug: string) => {
+    navigateTo({ path: '/browse', query: { category: slug } })
+}
+
+watch(selectedCategory, async (newVal) => {
+    isLoading.value = true
+    try {
+        const params: any = { limit: 8 }
+        if (newVal !== 'all') {
+            const category = categories.value.find(c => c.slug === newVal)
+            if (category) {
+                params.category_id = category.id
+            }
+        }
+        const res = await fetchCourses(params)
+        if (res.success) {
+            topCourses.value = res.data || []
+            currentSlide.value = 0 // Reset carousel on filter change
+        }
+    } catch (err) {
+        console.error('Error filtering courses:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+
+onMounted(() => {
+    loadData()
+})
 </script>
 
 <template>
-  <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 -->
-      <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="landing-page bg-white min-h-screen">
+    <!-- Hero Section -->
+    <header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
+      <!-- Decorative Background -->
+      <div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
+      
+      <div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
+        <div class="hero-left slide-up">
+          <div class="flex items-center gap-3 mb-8 text-blue-600">
+            <q-icon name="stars" size="28px" />
+            <span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 leading-[1.15] mb-8">
+            คอร์สเรียนออนไลน์<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;">
+            แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
+          </p>
 
-    <!-- Hero Section: ส่วนหัวของหน้าเว็บ แสดงข้อความต้อนรับและปุ่ม CTA -->
-    <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  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"/>
+          <!-- Search Bar Pill -->
+          <div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
+            <q-btn 
+              unelevated 
+              rounded 
+              color="primary" 
+              label="ดูคอร์สเรียนทั้งหมด" 
+              class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
+              no-caps
+              to="/browse"
+            />
+            <q-btn 
+              outline
+              rounded 
+              color="primary" 
+              label="สมัครสมาชิกฟรี" 
+              class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
+              no-caps
+              to="/auth/register"
+              v-if="!user"
+            />
+          </div>
+        </div>
 
-          <div class="grid-hero items-center relative z-10">
-            
-            <!-- Left Content -->
-            <div class="hero-content">
-                <div class="mb-12 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 ">
-                    เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
-                 </span>
-               </div>
-               
-                <h1 class="hero-title leading-[1.6] mb-8 slide-up py-8" style="animation-delay: 0.1s;">
-                 ยกระดับทักษะ <br>
-                 <span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
-               </h1>
-              <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>
-  
-              <div class="hero-actions flex flex-wrap gap-6 mb-20 slide-up" style="animation-delay: 0.3s;">
-                <NuxtLink to="/auth/register" class="btn-cta-premium group">
-                  สมัครเรียนฟรีวันนี้ 
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
-                </NuxtLink>
-                <NuxtLink to="/browse" class="btn-outline-glass">
-                  เปิดดูคอร์สทั้งหมด
-                </NuxtLink>
+        <!-- Hero Visual Showcase -->
+        <div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
+          <div class="relative w-full max-w-xl">
+            <!-- Main Illustration -->
+            <div class="relative z-10 animate-float">
+              <img 
+                src="/img/elearning.png" 
+                alt="E-Learning Illustration"
+                class="w-full h-auto drop-shadow-2xl"
+              />
+            </div>
+
+            <!-- Decorative shapes behind the image -->
+            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
+            <div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
+            <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
+      <div class="container mx-auto px-6 lg:px-12">
+        <div class="text-center mb-16 slide-up">
+          <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6 px-4">
+            เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
+          </h2>
+          <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
+            เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
+          </p>
+        </div>
+
+        <!-- Horizontal Scrollable Container -->
+        <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 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"
+                 @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>
               </div>
-  
-             
-            </div>
-  
-            <!-- 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  border border-slate-200 ">
-                  <!-- Browser-like header -->
-                  <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  px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</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="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>
-  
-                  <!-- Showcase Content -->
-                  <div class="preview-body p-8 space-y-8">
-                     <!-- Video Hero Preview -->
-                     <div class="relative aspect-video bg-gradient-to-br from-blue-900/50 to-indigo-900/50 rounded-3xl overflow-hidden group/vid border border-white/5">
-                        <div class="absolute inset-0 flex items-center justify-center">
-                           <div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center shadow-2xl group-hover/vid:scale-110 transition-transform">
-                              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white ml-1" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-                           </div>
-                        </div>
-                        <div class="absolute bottom-4 left-6 right-6 h-1.5 bg-white/10 rounded-full overflow-hidden">
-                          <div class="h-full bg-blue-500 w-[65%]"/>
-                        </div>
-                     </div>
-  
-                     <!-- Course List Preview -->
-                     <div class="space-y-4">
-                        <div class="grid grid-cols-2 gap-4">
-                           <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  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"/>
-                           </div>
-                        </div>
-                     </div>
-                  </div>
-               </div>
-  
-
-             <!-- 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)]  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">
-                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
-                   </svg>
-                 </div>
-                 <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)]  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">
-                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                   </svg>
-                 </div>
-                 <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>
+              </div>
             </div>
-  
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
-    <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"/>
+    <!-- Section 2: "Value Proposition" - Why Online Learning here? -->
+    <section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
+      <!-- Decorative background blur -->
+      <div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
+      
+      <div class="container mx-auto px-6 lg:px-12">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+          <!-- Left side: Visual representation -->
+          <div class="relative slide-up">
+            <div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
+              <!-- Animated background shapes -->
+              <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
+              <div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
+              
+              <div class="relative z-20 flex flex-col items-center text-center text-white">
+                <div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
+                  <q-icon name="laptop_mac" size="64px" class="text-white" />
+                </div>
+                <h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
+                  คอร์สออนไลน์<br class="hidden md:block" />
+                  ที่ออกแบบมาสำหรับคุณ
+                </h3>
+                <p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
+                  เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
+                </p>
+              </div>
+            </div>
+            
+            <!-- Floating Stats pill -->
+            <div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
+              <div class="flex items-center gap-4">
+                <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
+                  <q-icon name="query_builder" size="28px" />
+                </div>
+                <div>
+                  <div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
+                  <div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-      <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  tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
-          <p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
-            เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
-          </p>
+          <!-- Right side: Content & Benefits -->
+          <div class="slide-up" style="animation-delay: 0.2s;">
+            <div class="mb-12">
+              <span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
+                Premium Learning Experience
+              </span>
+              <h2 class="text-4xl md:text-6xl font-black text-slate-900 leading-[1.15] md:leading-[1.12] tracking-tight mb-0 pt-1 overflow-visible">
+                ก้าวข้ามทุกขีดจำกัด<br />
+                ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
+              </h2>
+              <p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
+                เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
+              </p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+              <div v-for="(feature, f) in learningStyles[0].features" :key="f" 
+                   class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
+              >
+                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
+                  <q-icon name="check" size="20px" />
+                </div>
+                <span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
+              </div>
+            </div>
+
+            <q-btn 
+              unelevated 
+              rounded 
+              color="primary"
+              label="เริ่มต้นบทเรียนแรกของคุณ"
+              class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
+              no-caps
+              :to="user ? '/browse' : '/auth/login'"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+
+
+    <!-- Section 4: "คอร์สออนไลน์" -->
+    <section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
+      <div class="container mx-auto px-6 lg:px-12">
+        <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
+          <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>
+          </div>
+          <NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
+            คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
+          </NuxtLink>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
-           <!-- Feature 1 -->
-           <div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
-             <div class="w-20 h-20 rounded-[1.75rem] bg-blue-600/10 text-blue-500 flex items-center justify-center mb-10 border border-blue-500/20 group-hover:bg-blue-600 group-hover:text-white transition-colors duration-500">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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 ">สื่อการเรียนระดับสูง</h3>
-             <p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
-           </div>
-           
-           <!-- Feature 2 -->
-           <div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
-             <div class="w-20 h-20 rounded-[1.75rem] bg-emerald-600/10 text-emerald-500 flex items-center justify-center mb-10 border border-emerald-500/20 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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 ">วัดผลแบบอัจฉริยะ</h3>
-             <p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
-           </div>
+        <!-- Filter Tabs / Pills -->
+        <div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
+          <button 
+            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
+            :class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+            @click="selectedCategory = 'all'"
+          >
+            All
+          </button>
+          <button 
+            v-for="category in categories" 
+            :key="category.id"
+            class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
+            :class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
+            @click="selectedCategory = category.slug"
+          >
+            {{ getLocalizedText(category.name) }}
+          </button>
+        </div>
 
-           <!-- Feature 3 -->
-           <div class="feature-card glass-premium p-12 rounded-[3.5rem] hover:translate-y-[-15px] transition-all duration-700 group">
-             <div class="w-20 h-20 rounded-[1.75rem] bg-indigo-600/10 text-indigo-500 flex items-center justify-center mb-10 border border-indigo-500/20 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-500">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <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 ">ระบบติดตามผล</h3>
-             <p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
-           </div>
+        <!-- Courses Carousel -->
+        <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+          <div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
+        </div>
+        
+        <div v-else class="relative group/carousel slide-up">
+          <q-carousel
+            v-model="currentSlide"
+            transition-prev="slide-right"
+            transition-next="slide-left"
+            swipeable
+            animated
+            control-color="primary"
+            padding
+            height="auto"
+            class="bg-transparent rounded-none"
+          >
+            <q-carousel-slide 
+              v-for="(chunk, pageIndex) in courseChunks" 
+              :key="pageIndex" 
+              :name="pageIndex" 
+              class="p-4"
+            >
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+                <CourseCard 
+                  v-for="course in chunk" 
+                  :key="course.id" 
+                  v-bind="{ ...course, image: course.thumbnail_url }"
+                />
+              </div>
+            </q-carousel-slide>
+          </q-carousel>
+
+           <!-- Custom Carousel Navigation -->
+            <button 
+              v-if="courseChunks.length > 1"
+              class="absolute -left-4 md:-left-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
+              @click="currentSlide = Math.max(0, currentSlide - 1)"
+              :disabled="currentSlide === 0"
+              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === 0 }"
+            >
+              <q-icon name="chevron_left" size="32px" />
+            </button>
+            <button 
+              v-if="courseChunks.length > 1"
+              class="absolute -right-4 md:-right-12 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full bg-white shadow-xl border border-slate-100 flex items-center justify-center text-slate-500 hover:text-blue-600 transition-all hover:scale-110"
+              @click="currentSlide = Math.min(courseChunks.length - 1, currentSlide + 1)"
+              :disabled="currentSlide === courseChunks.length - 1"
+              :class="{ 'opacity-50 cursor-not-allowed': currentSlide === courseChunks.length - 1 }"
+            >
+              <q-icon name="chevron_right" size="32px" />
+            </button>
         </div>
       </div>
     </section>
   </div>
 </template>
 
+<script lang="ts">
+// Supplementary static data for the sections
+export default {
+  setup() {
+    const { user } = useAuth()
+    return { user }
+  },
+  data() {
+    return {
+      stepOneCards: [
+        { title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
+        { title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
+        { title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
+        { title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
+        { title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
+        { title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
+        { title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
+      ],
+      learningStyles: [
+        { 
+          title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
+          subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที', 
+          time: 'เข้าถึงได้ตลอดชีพ',
+          features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
+          iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
+          btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
+        }
+      ],
+      promoCategories: [
+        { title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
+        { title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
+        { title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
+        { title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
+      ]
+    }
+  }
+}
+</script>
+
 <style scoped>
-.container {
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 48px;
+.landing-page {
+  font-family: var(--font-main);
 }
 
-.hero-title {
-  font-size: clamp(3.5rem, 7vw, 5.5rem);
-  font-weight: 900;
-  color: #0f172a;
-}
-
-
-.text-gradient-cyan {
-  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  display: inline-block;
-  padding: 0.4em 0.2em;
-  margin: -0.4em -0.2em;
-  vertical-align: baseline;
-}
-
-.glass-premium {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(40px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
-}
-
-
-
-
-.glass-tag-premium {
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-
-
-.btn-cta-premium {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  padding: 1.5rem 3.5rem;
-  border-radius: 1.5rem;
-  font-weight: 900;
-  display: flex;
-  align-items: center;
-  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  font-size: 1.125rem;
-}
-
-.btn-cta-premium:hover {
-  @apply bg-blue-600;
-  transform: translateY(-5px);
-  box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.5);
-}
-
-.btn-outline-glass {
-  padding: 1.5rem 3.5rem;
-  border-radius: 1.5rem;
-  font-weight: 900;
-  color: #1e293b; /* Slate 800 for better visibility */
-  border: 2px solid #cbd5e1; /* Thicker, Slate 300 border */
-  background: rgba(255, 255, 255, 0.8); /* Whiting background */
-  transition: all 0.3s ease;
-  font-size: 1.125rem;
-}
-
-
-
-.btn-outline-glass:hover {
-  background: #ffffff;
-  border-color: #3b82f6; /* Blue border on hover */
-  color: #2563eb;
-  transform: translateY(-2px);
-  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
-}
-
-
-
-.platform-preview-card {
-  width: 100%;
-  max-width: 620px;
-  border-radius: 4rem;
-  overflow: hidden;
-}
-
-.grid-hero {
-  display: grid;
-  grid-template-columns: 1.3fr 1fr;
-  gap: 8rem;
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
+/* Animations */
 @keyframes slide-up {
-  from { opacity: 0; transform: translateY(50px); }
+  from { opacity: 0; transform: translateY(40px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 .slide-up {
-  animation: slide-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
   opacity: 0;
 }
 
 @keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-25px); }
+  0%, 100% { transform: translateY(0) rotate(0); }
+  50% { transform: translateY(-20px) rotate(5deg); }
 }
 
 .animate-float {
   animation: float 6s ease-in-out infinite;
 }
 
-@keyframes pulse-slow {
-  0%, 100% { opacity: 0.1; transform: scale(1); }
-  50% { opacity: 0.15; transform: scale(1.15); }
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.animate-pulse-slow {
-  animation: pulse-slow 10s linear infinite;
+.animate-fade-in {
+  animation: fade-in 1s ease-out forwards;
 }
 
-@media (max-width: 1300px) {
-  .grid-hero {
-    gap: 4rem;
-  }
+/* Typography Overrides */
+h1, h2, h3 {
+  letter-spacing: -0.02em;
 }
 
-@media (max-width: 1024px) {
-  .grid-hero {
-    grid-template-columns: 1fr;
-    text-align: center;
-    gap: 5rem;
-  }
-  .hero-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .hero-actions {
-    justify-content: center;
-  }
-  .program-stats {
-    justify-content: center;
-  }
-  .stat-divider { display: none; }
-  .program-stats { gap: 50px; }
-  .hero-visual {
-    padding-top: 40px;
+/* Hover effects */
+.hero-right:hover .animate-float {
+  animation-play-state: paused;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 1200px) {
+  .career-cards-grid {
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .container {
-    padding: 0 24px;
-  }
-  .hero-title {
-    font-size: 3.5rem;
-  }
-  .hidden-mobile {
-    display: none;
-  }
-  .btn-cta-premium, .btn-outline-glass {
-    width: 100%;
-    padding: 1.25rem 2rem;
+  .career-cards-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 </style>
diff --git a/Frontend-Learner/public/img/elearning.png b/Frontend-Learner/public/img/elearning.png
new file mode 100644
index 00000000..522a8447
Binary files /dev/null and b/Frontend-Learner/public/img/elearning.png differ
diff --git a/Frontend-Learner/คู่มืออธิบาย/Error.md b/Frontend-Learner/คู่มืออธิบาย/Error.md
new file mode 100644
index 00000000..e69de29b