diff --git a/src/App.vue b/src/App.vue
index c21583f..27f9908 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,28 @@
 <template>
   <div id="app" class="transition-colors duration-200">
-    <PageTransition>
-      <router-view />
-    </PageTransition>
+    <router-view v-slot="{ Component, route }">
+      <transition 
+        :name="route.meta.transition || 'slide-left'" 
+        mode="out-in"
+      >
+        <component :is="Component" :key="route.path" />
+      </transition>
+    </router-view>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import PageTransition from '@/components/PageTransition.vue'
 import { useTheme } from '@/composables/useTheme'
 
 // Initialize theme on app start
 const { initTheme } = useTheme()
 
+// Initialize theme immediately
+initTheme()
+
 onMounted(() => {
+  // Re-init on mount to ensure it's applied
   initTheme()
 })
 </script>
@@ -23,4 +31,59 @@ onMounted(() => {
 #app {
   min-height: 100vh;
 }
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Slide transitions */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* Scale transition */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.25s ease;
+}
+
+.scale-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(1.05);
+}
 </style>
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index 76cf028..e93ee96 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -92,6 +92,8 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-typescript'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-markup' // Must be loaded before PHP
+import 'prismjs/components/prism-markup-templating' // Required for PHP
 import 'prismjs/components/prism-php'
 import 'prismjs/components/prism-java'
 import 'prismjs/components/prism-c'
@@ -99,7 +101,6 @@ import 'prismjs/components/prism-cpp'
 import 'prismjs/components/prism-csharp'
 import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-scss'
-import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-yaml'
 import 'prismjs/components/prism-docker'
 import 'prismjs/components/prism-sql'
@@ -241,13 +242,10 @@ const codeClasses = computed(() => [
 
 const highlightCode = () => {
   if (codeElement.value) {
-    // Ensure the language is loaded
+    // Check if the language is available
     if (!Prism.languages[detectedLanguage.value] && detectedLanguage.value !== 'text') {
-      try {
-        require(`prismjs/components/prism-${detectedLanguage.value}`)
-      } catch (e) {
-        console.warn(`Language ${detectedLanguage.value} not available in Prism.js`)
-      }
+      console.warn(`Language ${detectedLanguage.value} not available in Prism.js`)
+      return
     }
     
     Prism.highlightElement(codeElement.value)
diff --git a/src/components/DataSources.vue b/src/components/DataSources.vue
index dbf0f64..841e809 100644
--- a/src/components/DataSources.vue
+++ b/src/components/DataSources.vue
@@ -9,7 +9,10 @@
         <a :href="source.url" target="_blank" rel="noopener noreferrer"
           class="flex w-full h-full items-center justify-center hover:scale-110 transition-transform duration-300 p-2"
           :title="source.alt">
-          <img :src="source.image" :alt="source.alt" class="max-h-8 sm:max-h-10 md:max-h-12 w-auto object-contain" loading="lazy">
+          <img :src="source.image" :alt="source.alt" 
+               class="max-h-8 sm:max-h-10 md:max-h-12 w-auto object-contain"
+               :class="getImageDarkModeClass(source.image)" 
+               loading="lazy">
         </a>
       </div>
     </div>
@@ -55,4 +58,24 @@ const dataSources: DataSource[] = [
     url: 'https://hack.co.id'
   }
 ]
+
+const getImageDarkModeClass = (imagePath: string): string => {
+  // Images that need background removal (non-transparent white backgrounds)
+  if (imagePath.includes('inacovid')) {
+    return 'image-remove-bg'
+  }
+  
+  // Images with government logos that need selective typography color inversion
+  if (imagePath.includes('dinkes-sulteng')) {
+    return 'image-gov-logo'
+  }
+  
+  // Images that should remain unchanged in dark mode
+  if (imagePath.includes('sulteng-lawan-covid')) {
+    return ''
+  }
+  
+  // Default: apply standard logo dark mode treatment for other logos
+  return 'logo-dark-mode'
+}
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 72fc1c1..5ac7360 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,11 +1,11 @@
 <template>
-  <nav ref="navbar" class="fixed w-full top-0 z-50 transition-all duration-500 ease-out" :class="navbarClass">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex justify-between items-center h-16">
+  <nav ref="navbar" class="fixed w-full top-0 left-0 z-50 transition-all duration-500 ease-out px-4 sm:px-6 lg:px-8 pt-4" :class="navbarClass">
+    <div class="max-w-7xl mx-auto rounded-2xl transition-all duration-500 ease-out" :class="innerContainerClass">
+      <div class="flex justify-between items-center h-16 px-4 sm:px-6 lg:px-8">
         <div class="flex items-center">
           <div class="flex-shrink-0 flex items-center space-x-3">
-            <img src="/pico-api-logo.webp" alt="PICO API Logo" class="h-10 w-auto">
-            <router-link to="/" class="text-2xl font-bold gradient-text">PICO SulTeng</router-link>
+            <img src="/pico-api-logo.webp" alt="PICO API Logo" class="h-10 w-auto logo-dark-mode">
+            <router-link to="/" class="text-2xl font-bold gradient-text flex items-center">PICO SulTeng</router-link>
           </div>
         </div>
         
@@ -14,22 +14,19 @@
           <div class="ml-10 flex items-baseline space-x-4">
             <router-link 
               to="/" 
-              class="text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              :class="{ 'text-gray-900': $route.path === '/' }"
+              :class="[navLinkClass, { [activeNavLinkClass]: $route.path === '/' }]"
             >
               {{ t('nav.home') }}
             </router-link>
             <router-link 
               to="/docs" 
-              class="text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              :class="{ 'text-gray-900': $route.path === '/docs' }"
+              :class="[navLinkClass, { [activeNavLinkClass]: $route.path === '/docs' }]"
             >
               {{ t('nav.documentation') }}
             </router-link>
             <router-link 
               to="/api" 
-              class="text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              :class="{ 'text-gray-900': $route.path === '/api' }"
+              :class="[navLinkClass, { [activeNavLinkClass]: $route.path === '/api' }]"
             >
               {{ t('nav.apiReference') }}
             </router-link>
@@ -38,41 +35,26 @@
             </a>
             <!-- Theme & Language Controls -->
             <div class="flex items-center space-x-2 ml-4">
-              <!-- Theme Toggle -->
-              <ThemeToggle />
-              
               <!-- Language Toggle -->
               <button 
                 @click="toggleLanguage"
-                class="flex items-center space-x-2 px-3 py-2 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 dark:border-gray-600 dark:hover:border-pico-sky"
+                class="flex items-center justify-center px-3 py-2 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white hover:bg-gray-50 shadow-sm dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700"
                 :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
               >
-                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
                 </svg>
-                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
+                <span class="ml-1.5 text-sm font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'EN' : 'ID' }}</span>
               </button>
+              
+              <!-- Theme Toggle -->
+              <ThemeToggle />
             </div>
           </div>
         </div>
 
         <!-- Mobile menu button -->
-        <div class="md:hidden flex items-center space-x-2">
-          <!-- Theme Toggle for Mobile -->
-          <ThemeToggle variant="compact" />
-          
-          <!-- Language Toggle for Mobile -->
-          <button 
-            @click="toggleLanguage"
-            class="flex items-center space-x-1 px-2 py-1.5 rounded-lg border border-gray-200 hover:border-pico-sky transition-colors bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 dark:border-gray-600"
-            :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
-          >
-            <svg class="w-3 h-3 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
-            </svg>
-            <span class="text-xs font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'ID' : 'EN' }}</span>
-          </button>
-          
+        <div class="md:hidden">
           <!-- Hamburger button -->
           <button 
             @click="toggleMobileMenu"
@@ -113,8 +95,7 @@
     <!-- Mobile menu -->
     <div 
       id="mobile-menu"
-      class="fixed top-0 right-0 z-50 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ease-in-out md:hidden"
-      :class="mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'"
+      :class="[mobileMenuClass, mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
       role="navigation"
       :aria-hidden="!mobileMenuOpen"
     >
@@ -123,24 +104,21 @@
           <router-link 
             to="/" 
             @click="closeMobileMenu"
-            class="block text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-base font-medium border-b border-gray-100 transition-colors"
-            :class="{ 'text-gray-900': $route.path === '/' }"
+            :class="[mobileNavLinkClass, { [activeMobileNavLinkClass]: $route.path === '/' }]"
           >
             {{ t('nav.home') }}
           </router-link>
           <router-link 
             to="/docs" 
             @click="closeMobileMenu"
-            class="block text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-base font-medium border-b border-gray-100 transition-colors"
-            :class="{ 'text-gray-900': $route.path === '/docs' }"
+            :class="[mobileNavLinkClass, { [activeMobileNavLinkClass]: $route.path === '/docs' }]"
           >
             {{ t('nav.documentation') }}
           </router-link>
           <router-link 
             to="/api" 
             @click="closeMobileMenu"
-            class="block text-gray-600 hover:text-pico-blue px-3 py-2 rounded-md text-base font-medium border-b border-gray-100 transition-colors"
-            :class="{ 'text-gray-900': $route.path === '/api' }"
+            :class="[mobileNavLinkClass, { [activeMobileNavLinkClass]: $route.path === '/api' }]"
           >
             {{ t('nav.apiReference') }}
           </router-link>
@@ -152,6 +130,27 @@
           >
             {{ t('nav.liveApi') }}
           </a>
+          
+          <!-- Mobile Controls Section -->
+          <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-4">
+            <!-- Language Toggle for Mobile -->
+            <div class="flex items-center justify-between px-3 py-2">
+              <span class="text-gray-700 dark:text-gray-300 text-sm font-medium">Language</span>
+              <button 
+                @click="toggleLanguage"
+                class="flex items-center justify-center px-3 py-1.5 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white hover:bg-gray-50 shadow-sm dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700"
+                :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
+              >
+                <span class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{ locale === 'en' ? 'EN' : 'ID' }}</span>
+              </button>
+            </div>
+            
+            <!-- Theme Toggle for Mobile -->
+            <div class="flex items-center justify-between px-3 py-2">
+              <span class="text-gray-700 dark:text-gray-300 text-sm font-medium">Theme</span>
+              <ThemeToggle variant="compact" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -184,14 +183,50 @@ const mobileMenuOpen = ref(false)
 
 const navbarClass = computed(() => {
   if (props.variant === 'solid') {
-    return 'bg-white shadow-sm'
+    return '!pt-0'
+  }
+  
+  return ''
+})
+
+// Mobile menu background should always be solid
+const mobileMenuClass = computed(() => 
+  'fixed top-0 right-0 z-50 w-64 h-full bg-white dark:bg-gray-900 shadow-lg transform transition-transform duration-300 ease-in-out md:hidden'
+)
+
+const innerContainerClass = computed(() => {
+  if (props.variant === 'solid') {
+    return 'bg-white dark:bg-gray-900 shadow-sm dark:shadow-gray-800/50 !rounded-none'
+  }
+  
+  return isScrolled.value 
+    ? 'bg-white/10 dark:bg-gray-900/10 backdrop-filter backdrop-blur-[20px] backdrop-saturate-[180%] shadow-2xl border border-white/20 dark:border-gray-800/20 md:rounded-2xl' 
+    : 'bg-white/0 dark:bg-gray-900/0 border border-gray-200/0 dark:border-gray-800/0 md:rounded-2xl'
+})
+
+// Dynamic text color classes based on glass state
+const navLinkClass = computed(() => {
+  const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium transition-all duration-200'
+  
+  if (props.variant === 'solid') {
+    return `${baseClasses} text-gray-600 dark:text-gray-300 hover:text-pico-blue dark:hover:text-pico-sky`
   }
   
   return isScrolled.value 
-    ? 'bg-white/95 backdrop-blur-lg shadow-lg border-b border-gray-200/50' 
-    : 'bg-transparent'
+    ? `${baseClasses} text-gray-900 dark:text-white hover:text-pico-blue dark:hover:text-pico-sky font-semibold` 
+    : `${baseClasses} text-gray-600 dark:text-gray-300 hover:text-pico-blue dark:hover:text-pico-sky`
+})
+
+const activeNavLinkClass = computed(() => {
+  return isScrolled.value && props.variant !== 'solid'
+    ? 'text-gray-900 dark:text-white font-bold' 
+    : 'text-gray-900 dark:text-white'
 })
 
+// Mobile navigation classes (always solid background)
+const mobileNavLinkClass = 'block text-gray-600 dark:text-gray-300 hover:text-pico-blue dark:hover:text-pico-sky px-3 py-2 rounded-md text-base font-medium border-b border-gray-100 dark:border-gray-700 transition-colors'
+const activeMobileNavLinkClass = 'text-gray-900 dark:text-white'
+
 // Scroll handler
 const handleScroll = () => {
   scrollY.value = window.scrollY
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index b92ab53..e06af18 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -45,6 +45,7 @@
 
       <!-- Dropdown arrow -->
       <svg 
+        v-if="variant === 'default'"
         class="w-3 h-3 ml-1 transition-transform duration-200" 
         :class="{ 'rotate-180': dropdownOpen }"
         fill="none" 
@@ -197,15 +198,15 @@ const themeOptions = [
 ]
 
 const buttonClasses = computed(() => [
-  'flex items-center px-3 py-2 rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
+  'flex items-center justify-center rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1',
   {
-    'border-gray-200 hover:border-pico-sky bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900': props.variant === 'default',
-    'border-gray-200 hover:border-pico-sky bg-white text-gray-700 hover:text-gray-900 min-w-0': props.variant === 'compact'
+    'px-3 py-2 border-gray-200 hover:border-gray-300 bg-white hover:bg-gray-50 text-gray-500 hover:text-gray-700 shadow-sm dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-gray-300': props.variant === 'default',
+    'p-2 border-gray-200 hover:border-gray-300 bg-white text-gray-500 hover:text-gray-700 shadow-sm dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 dark:text-gray-400': props.variant === 'compact'
   }
 ])
 
 const dropdownClasses = computed(() => [
-  'absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded-lg shadow-lg z-20 py-1',
+  'absolute right-0 mt-2 w-36 bg-white border border-gray-200 rounded-lg shadow-lg z-20 py-1',
   'dark:bg-gray-800 dark:border-gray-700'
 ])
 
@@ -223,11 +224,10 @@ const selectTheme = (selectedTheme: 'light' | 'dark' | 'system') => {
 }
 
 const getOptionClasses = (optionValue: string) => [
-  'flex items-center w-full px-3 py-2 text-sm text-left hover:bg-gray-100 transition-colors duration-150 space-x-2',
-  'dark:hover:bg-gray-700 dark:text-gray-200',
+  'flex items-center w-full px-3 py-2 text-sm text-left transition-colors duration-150 space-x-2',
   {
-    'text-blue-600 bg-blue-50 hover:bg-blue-100': theme.value === optionValue,
-    'text-gray-700': theme.value !== optionValue
+    'text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 dark:text-blue-400': theme.value === optionValue,
+    'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700': theme.value !== optionValue
   }
 ]
 
diff --git a/src/components/documentation/AuthenticationSection.vue b/src/components/documentation/AuthenticationSection.vue
index 8712095..1b38b65 100644
--- a/src/components/documentation/AuthenticationSection.vue
+++ b/src/components/documentation/AuthenticationSection.vue
@@ -1,33 +1,33 @@
 <template>
   <section v-show="isActive" id="authentication" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.authentication.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.authentication.subtitle') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.authentication.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.authentication.subtitle') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-yellow-600 to-orange-600 px-8 py-6">
         <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.authentication.title') }}</h2>
         <p class="text-yellow-100">{{ t('documentation.authentication.subtitle') }}</p>
       </div>
       
       <div class="p-8">
-        <div class="bg-green-50 border-l-4 border-green-400 p-6 mb-8">
+        <div class="bg-green-50 dark:bg-green-900/30 border-l-4 border-green-400 dark:border-green-800 p-6 mb-8">
           <div class="flex items-center">
             <svg class="w-6 h-6 text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
             <div>
-              <h3 class="text-lg font-semibold text-green-800 mb-1">{{ t('documentation.authentication.noAuthRequired') }}</h3>
-              <p class="text-green-700">{{ t('documentation.authentication.noAuthDescription') }}</p>
+              <h3 class="text-lg font-semibold text-green-800 dark:text-green-400 mb-1">{{ t('documentation.authentication.noAuthRequired') }}</h3>
+              <p class="text-green-700 dark:text-green-400">{{ t('documentation.authentication.noAuthDescription') }}</p>
             </div>
           </div>
         </div>
         
         <div class="grid md:grid-cols-2 gap-8">
-          <div class="bg-blue-50 rounded-xl p-6">
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.rateLimiting') }}</h3>
-            <ul class="space-y-2 text-gray-600">
+          <div class="bg-blue-50 dark:bg-blue-900/30 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.authentication.rateLimiting') }}</h3>
+            <ul class="space-y-2 text-gray-600 dark:text-gray-400">
               <li v-for="(detail, index) in rateLimitDetails" :key="index" class="flex items-center">
                 <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
@@ -37,9 +37,9 @@
             </ul>
           </div>
           
-          <div class="bg-purple-50 rounded-xl p-6">
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.bestPractices') }}</h3>
-            <ul class="space-y-2 text-gray-600">
+          <div class="bg-purple-50 dark:bg-purple-900/30 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.authentication.bestPractices') }}</h3>
+            <ul class="space-y-2 text-gray-600 dark:text-gray-400">
               <li v-for="(practice, index) in practiceDetails" :key="index" class="flex items-center">
                 <svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
@@ -52,25 +52,25 @@
 
         <!-- Rate Limit Headers -->
         <div class="mt-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Rate Limit Response Headers</h3>
-          <div class="bg-gray-50 rounded-lg p-6">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Rate Limit Response Headers</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6">
             <div class="grid md:grid-cols-1 gap-4">
               <div class="space-y-3">
-                <div class="flex justify-between items-center py-2 border-b border-gray-200">
-                  <code class="text-sm font-mono text-gray-800">X-RateLimit-Limit</code>
-                  <span class="text-sm text-gray-600">Request limit per window</span>
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
+                  <code class="text-sm font-mono text-gray-800 dark:text-gray-200">X-RateLimit-Limit</code>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">Request limit per window</span>
                 </div>
-                <div class="flex justify-between items-center py-2 border-b border-gray-200">
-                  <code class="text-sm font-mono text-gray-800">X-RateLimit-Remaining</code>
-                  <span class="text-sm text-gray-600">Requests remaining in current window</span>
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
+                  <code class="text-sm font-mono text-gray-800 dark:text-gray-200">X-RateLimit-Remaining</code>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">Requests remaining in current window</span>
                 </div>
-                <div class="flex justify-between items-center py-2 border-b border-gray-200">
-                  <code class="text-sm font-mono text-gray-800">X-RateLimit-Reset</code>
-                  <span class="text-sm text-gray-600">Unix timestamp when rate limit resets</span>
+                <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
+                  <code class="text-sm font-mono text-gray-800 dark:text-gray-200">X-RateLimit-Reset</code>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">Unix timestamp when rate limit resets</span>
                 </div>
                 <div class="flex justify-between items-center py-2">
-                  <code class="text-sm font-mono text-gray-800">Retry-After</code>
-                  <span class="text-sm text-gray-600">Seconds to wait before retrying (on 429 errors)</span>
+                  <code class="text-sm font-mono text-gray-800 dark:text-gray-200">Retry-After</code>
+                  <span class="text-sm text-gray-600 dark:text-gray-400">Seconds to wait before retrying (on 429 errors)</span>
                 </div>
               </div>
             </div>
diff --git a/src/components/documentation/ErrorHandlingSection.vue b/src/components/documentation/ErrorHandlingSection.vue
index ea23c4a..a6fbbc2 100644
--- a/src/components/documentation/ErrorHandlingSection.vue
+++ b/src/components/documentation/ErrorHandlingSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="error-handling" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.errorHandling.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.errorHandling.subtitle') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.errorHandling.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.subtitle') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-red-600 to-rose-600 px-8 py-6">
         <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.errorHandling.title') }}</h2>
         <p class="text-red-100">{{ t('documentation.errorHandling.subtitle') }}</p>
@@ -14,45 +14,45 @@
       <div class="p-8">
         <!-- Status Codes -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.errorHandling.httpStatusCodes') }}</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.errorHandling.httpStatusCodes') }}</h3>
           <div class="grid gap-4">
-            <div class="flex items-center p-4 bg-green-50 border border-green-200 rounded-lg">
+            <div class="flex items-center p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
               <div class="w-16 h-8 bg-green-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">200</div>
               <div>
-                <div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.200.title') }}</div>
-                <div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.200.description') }}</div>
+                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ t('documentation.errorHandling.statusCodes.200.title') }}</div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.statusCodes.200.description') }}</div>
               </div>
             </div>
             
-            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
+            <div class="flex items-center p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
               <div class="w-16 h-8 bg-red-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">400</div>
               <div>
-                <div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.400.title') }}</div>
-                <div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.400.description') }}</div>
+                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ t('documentation.errorHandling.statusCodes.400.title') }}</div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.statusCodes.400.description') }}</div>
               </div>
             </div>
             
-            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
+            <div class="flex items-center p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
               <div class="w-16 h-8 bg-red-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">404</div>
               <div>
-                <div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.404.title') }}</div>
-                <div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.404.description') }}</div>
+                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ t('documentation.errorHandling.statusCodes.404.title') }}</div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.statusCodes.404.description') }}</div>
               </div>
             </div>
             
-            <div class="flex items-center p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <div class="flex items-center p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-lg">
               <div class="w-16 h-8 bg-yellow-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">429</div>
               <div>
-                <div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.429.title') }}</div>
-                <div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.429.description') }}</div>
+                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ t('documentation.errorHandling.statusCodes.429.title') }}</div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.statusCodes.429.description') }}</div>
               </div>
             </div>
             
-            <div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
+            <div class="flex items-center p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
               <div class="w-16 h-8 bg-red-600 text-white text-sm font-bold rounded flex items-center justify-center mr-4">500</div>
               <div>
-                <div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.500.title') }}</div>
-                <div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.500.description') }}</div>
+                <div class="font-semibold text-gray-900 dark:text-gray-100">{{ t('documentation.errorHandling.statusCodes.500.title') }}</div>
+                <div class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.statusCodes.500.description') }}</div>
               </div>
             </div>
           </div>
@@ -60,11 +60,11 @@
         
         <!-- Error Response Format -->
         <div>
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.errorHandling.errorResponseFormat') }}</h3>
-          <div class="bg-gray-50 rounded-xl p-6">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.errorHandling.errorResponseFormat') }}</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-6">
             <div class="grid lg:grid-cols-2 gap-6">
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.errorHandling.errorResponse') }}</h4>
+                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">{{ t('documentation.errorHandling.errorResponse') }}</h4>
                 <CodeBlock 
                   :code="errorResponseExample"
                   language="json"
@@ -73,23 +73,23 @@
               </div>
               
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.errorHandling.errorFields') }}</h4>
+                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">{{ t('documentation.errorHandling.errorFields') }}</h4>
                 <div class="space-y-3 text-sm">
                   <div class="flex">
-                    <code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">status</code>
-                    <span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.status') }}</span>
+                    <code class="bg-white dark:bg-gray-800 px-2 py-1 rounded text-blue-600 mr-3 font-mono">status</code>
+                    <span class="text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.fieldDescriptions.status') }}</span>
                   </div>
                   <div class="flex">
-                    <code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">code</code>
-                    <span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.code') }}</span>
+                    <code class="bg-white dark:bg-gray-800 px-2 py-1 rounded text-blue-600 mr-3 font-mono">code</code>
+                    <span class="text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.fieldDescriptions.code') }}</span>
                   </div>
                   <div class="flex">
-                    <code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">message</code>
-                    <span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.message') }}</span>
+                    <code class="bg-white dark:bg-gray-800 px-2 py-1 rounded text-blue-600 mr-3 font-mono">message</code>
+                    <span class="text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.fieldDescriptions.message') }}</span>
                   </div>
                   <div class="flex">
-                    <code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">details</code>
-                    <span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.details') }}</span>
+                    <code class="bg-white dark:bg-gray-800 px-2 py-1 rounded text-blue-600 mr-3 font-mono">details</code>
+                    <span class="text-gray-600 dark:text-gray-400">{{ t('documentation.errorHandling.fieldDescriptions.details') }}</span>
                   </div>
                 </div>
               </div>
diff --git a/src/components/documentation/GlossarySection.vue b/src/components/documentation/GlossarySection.vue
index 68142fa..7b3d57c 100644
--- a/src/components/documentation/GlossarySection.vue
+++ b/src/components/documentation/GlossarySection.vue
@@ -7,12 +7,12 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
           </svg>
         </div>
-        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">{{ t('documentation.glossary.title') }}</h1>
+        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.title') }}</h1>
       </div>
-      <p class="text-sm sm:text-base lg:text-lg text-gray-600">{{ t('documentation.glossary.subtitle') }}</p>
+      <p class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.subtitle') }}</p>
     </div>
 
-    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-white mb-1 sm:mb-2">{{ t('documentation.glossary.cardTitle') }}</h2>
         <p class="text-sm sm:text-base text-indigo-100">{{ t('documentation.glossary.cardSubtitle') }}</p>
@@ -20,42 +20,42 @@
       
       <div class="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">
         <!-- Reproduction Rate -->
-        <div class="border-b border-gray-200 pb-6 sm:pb-8">
-          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4 flex items-center">
-            <div class="w-5 h-5 sm:w-6 sm:h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-2 sm:mr-3 text-xs sm:text-sm font-bold">Rt</div>
+        <div class="border-b border-gray-200 dark:border-gray-700 pb-6 sm:pb-8">
+          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4 flex items-center">
+            <div class="w-5 h-5 sm:w-6 sm:h-6 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center mr-2 sm:mr-3 text-xs sm:text-sm font-bold">Rt</div>
             {{ t('documentation.glossary.reproductionRate.title') }}
           </h3>
           
           <div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
             <div class="space-y-4 sm:space-y-6">
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.definition') }}</h4>
-                <p class="text-sm sm:text-base text-gray-600 mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.definitionText') }}</p>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.definition') }}</h4>
+                <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.definitionText') }}</p>
               </div>
               
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.interpretation') }}</h4>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.interpretation') }}</h4>
                 <div class="space-y-2 text-xs sm:text-sm">
-                  <div class="flex items-center p-2 bg-red-50 rounded-lg">
-                    <span class="font-mono font-bold text-red-600 mr-2">Rt > 1:</span>
-                    <span class="text-gray-700">{{ t('documentation.glossary.reproductionRate.growing') }}</span>
+                  <div class="flex items-center p-2 bg-red-50 dark:bg-red-900/30 rounded-lg">
+                    <span class="font-mono font-bold text-red-600 dark:text-red-400 mr-2">Rt > 1:</span>
+                    <span class="text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.growing') }}</span>
                   </div>
-                  <div class="flex items-center p-2 bg-yellow-50 rounded-lg">
-                    <span class="font-mono font-bold text-yellow-600 mr-2">Rt = 1:</span>
-                    <span class="text-gray-700">{{ t('documentation.glossary.reproductionRate.stable') }}</span>
+                  <div class="flex items-center p-2 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg">
+                    <span class="font-mono font-bold text-yellow-600 dark:text-yellow-400 mr-2">Rt = 1:</span>
+                    <span class="text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.stable') }}</span>
                   </div>
-                  <div class="flex items-center p-2 bg-green-50 rounded-lg">
-                    <span class="font-mono font-bold text-green-600 mr-2">Rt < 1:</span>
-                    <span class="text-gray-700">{{ t('documentation.glossary.reproductionRate.declining') }}</span>
+                  <div class="flex items-center p-2 bg-green-50 dark:bg-green-900/30 rounded-lg">
+                    <span class="font-mono font-bold text-green-600 dark:text-green-400 mr-2">Rt < 1:</span>
+                    <span class="text-gray-700 dark:text-gray-300">{{ t('documentation.glossary.reproductionRate.declining') }}</span>
                   </div>
                 </div>
               </div>
               
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.calculationMethod') }}</h4>
-                <div class="bg-blue-50 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
-                  <p class="font-semibold text-blue-900 mb-2">{{ t('documentation.glossary.reproductionRate.epiEstimTitle') }}</p>
-                  <ul class="space-y-1 text-blue-800">
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.calculationMethod') }}</h4>
+                <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
+                  <p class="font-semibold text-blue-900 dark:text-blue-400 mb-2">{{ t('documentation.glossary.reproductionRate.epiEstimTitle') }}</p>
+                  <ul class="space-y-1 text-blue-800 dark:text-blue-300">
                     <li v-for="(detail, index) in methodDetails" :key="index">
                       • {{ detail }}
                     </li>
@@ -64,42 +64,40 @@
               </div>
               
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.dataAvailability') }}</h4>
-                <div class="bg-gray-50 rounded-lg p-3 text-xs sm:text-sm text-gray-600">
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.dataAvailability') }}</h4>
+                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 text-xs sm:text-sm text-gray-600 dark:text-gray-400">
                   <p>{{ t('documentation.glossary.reproductionRate.dataAvailabilityText') }}</p>
                 </div>
               </div>
-            </div>
-            
-            <div class="space-y-4 sm:space-y-6">
+              
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.formula') }}</h4>
-                <div class="bg-purple-50 rounded-lg p-3 sm:p-4">
-                  <p class="font-semibold text-purple-900 mb-2 sm:mb-3 text-sm sm:text-base">{{ t('documentation.glossary.reproductionRate.formulaTitle') }}</p>
-                  <p class="text-purple-800 text-xs sm:text-sm mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.formulaDescription') }}</p>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.formula') }}</h4>
+                <div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg p-3 sm:p-4">
+                  <p class="font-semibold text-purple-900 dark:text-purple-400 mb-2 sm:mb-3 text-sm sm:text-base">{{ t('documentation.glossary.reproductionRate.formulaTitle') }}</p>
+                  <p class="text-purple-800 dark:text-purple-300 text-xs sm:text-sm mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.formulaDescription') }}</p>
                   
-                  <div class="bg-white rounded-lg p-3 sm:p-4 border border-purple-200 overflow-x-auto">
+                  <div class="bg-white dark:bg-gray-800 rounded-lg p-3 sm:p-4 border border-purple-200 dark:border-purple-700 overflow-x-auto">
                     <div class="space-y-3 sm:space-y-4 text-xs sm:text-sm min-w-0">
-                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                      <div class="text-purple-900 dark:text-purple-300 bg-purple-25 dark:bg-purple-900/20 p-2 sm:p-3 rounded border-l-4 border-purple-300 dark:border-purple-600">
                         <div class="font-semibold mb-2 sm:mb-3">1. {{ t('documentation.glossary.reproductionRate.formulaSteps.0') }}</div>
                         <div class="overflow-x-auto">
                           <MathFormula formula="\lambda_t = \sum_{s=1}^{t-1} I_{t-s} \cdot w_s" />
                         </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                      <div class="text-purple-900 dark:text-purple-300 bg-purple-25 dark:bg-purple-900/20 p-2 sm:p-3 rounded border-l-4 border-purple-300 dark:border-purple-600">
                         <div class="font-semibold mb-2 sm:mb-3">2. {{ t('documentation.glossary.reproductionRate.formulaSteps.1') }}</div>
                         <div class="space-y-2 overflow-x-auto">
                           <MathFormula formula="I_{t-s} = \text{incidence at time } (t-s)" />
                           <MathFormula formula="w_s = \text{serial interval probability}" />
                         </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                      <div class="text-purple-900 dark:text-purple-300 bg-purple-25 dark:bg-purple-900/20 p-2 sm:p-3 rounded border-l-4 border-purple-300 dark:border-purple-600">
                         <div class="font-semibold mb-2 sm:mb-3">3. {{ t('documentation.glossary.reproductionRate.formulaSteps.2') }}</div>
                         <div class="overflow-x-auto">
                           <MathFormula formula="R_t | \text{data} \sim \text{Gamma}\left(a + \sum I_t, \, b + \sum \lambda_t\right)" />
                         </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                      <div class="text-purple-900 dark:text-purple-300 bg-purple-25 dark:bg-purple-900/20 p-2 sm:p-3 rounded border-l-4 border-purple-300 dark:border-purple-600">
                         <div class="font-semibold mb-2 sm:mb-3">4. {{ t('documentation.glossary.reproductionRate.formulaSteps.3') }}</div>
                         <div class="overflow-x-auto">
                           <MathFormula formula="\mathbb{E}[R_t | \text{data}] = \frac{a + \sum I_t}{b + \sum \lambda_t}" />
@@ -110,21 +108,120 @@
                 </div>
               </div>
               
+            </div>
+            
+            <div class="space-y-4 sm:space-y-6">
+              
+              <!-- Practical Example Section -->
               <div>
-                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.references') }}</h4>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.practicalExample.title') }}</h4>
+                <div class="bg-orange-50 dark:bg-orange-900/30 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
+                  <p class="font-semibold text-orange-900 dark:text-orange-400 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.practicalExample.subtitle') }}</p>
+                  
+                  <!-- Time Series Data Table -->
+                  <div class="overflow-x-auto mb-3">
+                    <table class="w-full text-xs border border-orange-200 dark:border-orange-700 rounded">
+                      <thead class="bg-orange-100 dark:bg-orange-800/50">
+                        <tr>
+                          <th class="px-2 py-1 text-left border-r border-orange-200 dark:border-orange-700">{{ t('documentation.glossary.reproductionRate.practicalExample.table.day') }}</th>
+                          <th class="px-2 py-1 text-left border-r border-orange-200 dark:border-orange-700">{{ t('documentation.glossary.reproductionRate.practicalExample.table.date') }}</th>
+                          <th class="px-2 py-1 text-left">{{ t('documentation.glossary.reproductionRate.practicalExample.table.newCases') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody class="text-orange-800 dark:text-orange-300">
+                        <tr v-for="(row, index) in exampleData" :key="index" 
+                            class="border-t border-orange-200 dark:border-orange-700"
+                            :class="row.current ? 'bg-orange-200 dark:bg-orange-800/30' : ''">
+                          <td class="px-2 py-1 border-r border-orange-200 dark:border-orange-700" :class="row.current ? 'font-semibold' : ''">{{ row.day }}</td>
+                          <td class="px-2 py-1 border-r border-orange-200 dark:border-orange-700" :class="row.current ? 'font-semibold' : ''">{{ row.date }}</td>
+                          <td class="px-2 py-1 font-mono" :class="row.current ? 'font-semibold' : ''">{{ row.cases }}</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  
+                  <!-- Step by Step Calculation -->
+                  <div class="space-y-2">
+                    <div class="text-orange-900 dark:text-orange-400 font-medium text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.calculationTitle') }}</div>
+                    
+                    <div class="bg-white dark:bg-gray-800 rounded p-2 border border-orange-200 dark:border-orange-700">
+                      <div class="font-mono text-xs text-orange-800 dark:text-orange-300 space-y-1">
+                        <div><strong>{{ t('documentation.glossary.reproductionRate.practicalExample.step1.title') }}</strong></div>
+                        <div class="pl-2">{{ t('documentation.glossary.reproductionRate.practicalExample.step1.formula') }}</div>
+                        <div class="pl-2">{{ t('documentation.glossary.reproductionRate.practicalExample.step1.calculation') }}</div>
+                        
+                        <div class="mt-2"><strong>{{ t('documentation.glossary.reproductionRate.practicalExample.step2.title') }}</strong></div>
+                        <div class="pl-2">{{ t('documentation.glossary.reproductionRate.practicalExample.step2.formula') }}</div>
+                        <div class="pl-2">{{ t('documentation.glossary.reproductionRate.practicalExample.step2.calculation') }}</div>
+                        
+                        <div class="mt-2"><strong>{{ t('documentation.glossary.reproductionRate.practicalExample.step3.title') }}</strong></div>
+                        <div class="pl-2 text-blue-700 dark:text-blue-300 italic">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.explanation') }}</div>
+                        
+                        <!-- Gamma Quantile Formula -->
+                        <div class="bg-purple-50 dark:bg-purple-900/20 rounded p-2 border-l-2 border-purple-400 mb-2">
+                          <div class="font-semibold text-purple-800 dark:text-purple-300 text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.gammaQuantileFormula.title') }}</div>
+                          <div class="pl-1 font-mono text-xs text-purple-700 dark:text-purple-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.gammaQuantileFormula.formula') }}</div>
+                          <div class="pl-1 text-xs text-purple-600 dark:text-purple-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.gammaQuantileFormula.description') }}</div>
+                        </div>
+                        
+                        <!-- Detailed Calculations -->
+                        <div class="pl-2 mt-2">
+                          <div class="font-semibold text-indigo-800 dark:text-indigo-300 text-xs mb-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.title') }}</div>
+                          
+                          <!-- Lower Bound Calculation -->
+                          <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded p-2 border-l-2 border-indigo-400 mb-2">
+                            <div class="font-semibold text-indigo-800 dark:text-indigo-300 text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.title') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-700 dark:text-indigo-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.formula') }}</div>
+                            <div class="pl-1 text-xs text-indigo-600 dark:text-indigo-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.approximation') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-700 dark:text-indigo-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.wilsonHilfertyFormula') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-700 dark:text-indigo-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.substitution') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-800 dark:text-indigo-300 mt-1 font-semibold">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.lowerBoundStep.calculation') }}</div>
+                          </div>
+                          
+                          <!-- Upper Bound Calculation -->
+                          <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded p-2 border-l-2 border-indigo-400">
+                            <div class="font-semibold text-indigo-800 dark:text-indigo-300 text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.upperBoundStep.title') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-700 dark:text-indigo-400 mt-1">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.upperBoundStep.formula') }}</div>
+                            <div class="pl-1 font-mono text-xs text-indigo-800 dark:text-indigo-300 mt-1 font-semibold">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.detailedCalculations.upperBoundStep.calculation') }}</div>
+                          </div>
+                        </div>
+                        
+                        <!-- Summary -->
+                        <div class="pl-2 mt-2">
+                          <div class="text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.formulas.lowerBound') }}</div>
+                          <div class="text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.formulas.upperBound') }}</div>
+                          <div class="mt-1 font-semibold text-blue-800 dark:text-blue-300 text-xs">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.confidenceInterval') }}</div>
+                          <div class="mt-2 text-xs italic text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.reproductionRate.practicalExample.step3.mathematicalNote') }}</div>
+                        </div>
+                        
+                        <div class="mt-2 p-1 bg-red-50 dark:bg-red-900/30 rounded border-l-2 border-red-400">
+                          <strong>{{ t('documentation.glossary.reproductionRate.practicalExample.result.title') }}</strong> {{ t('documentation.glossary.reproductionRate.practicalExample.result.interpretation') }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <div class="mt-3 text-xs text-orange-700 dark:text-orange-400">
+                    <strong>{{ t('documentation.glossary.reproductionRate.practicalExample.note.title') }}</strong> {{ t('documentation.glossary.reproductionRate.practicalExample.note.content') }}
+                  </div>
+                </div>
+              </div>
+              
+              <div>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.references') }}</h4>
                 <div class="space-y-2 sm:space-y-3">
-                  <div class="bg-gray-50 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300">
-                    <p class="font-semibold text-gray-900 text-xs sm:text-sm">Cori, A., Ferguson, N. M., Fraser, C., & Cauchemez, S. (2013)</p>
-                    <p class="text-indigo-700 font-medium text-xs">American Journal of Epidemiology</p>
-                    <p class="text-gray-600 text-xs mt-1">A new framework and software to estimate time-varying reproduction numbers during epidemics. 178(9), 1505-1512.</p>
+                  <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300 dark:border-indigo-600">
+                    <p class="font-semibold text-gray-900 dark:text-gray-100 text-xs sm:text-sm">Cori, A., Ferguson, N. M., Fraser, C., & Cauchemez, S. (2013)</p>
+                    <p class="text-indigo-700 dark:text-indigo-400 font-medium text-xs">American Journal of Epidemiology</p>
+                    <p class="text-gray-600 dark:text-gray-400 text-xs mt-1">A new framework and software to estimate time-varying reproduction numbers during epidemics. 178(9), 1505-1512.</p>
                     <p class="text-blue-600 text-xs mt-1 break-all">
                       DOI: <a href="https://doi.org/10.1093/aje/kwt133" target="_blank" class="hover:underline">10.1093/aje/kwt133</a>
                     </p>
                   </div>
-                  <div class="bg-gray-50 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300">
-                    <p class="font-semibold text-gray-900 text-xs sm:text-sm">Thompson, R. N., et al. (2019)</p>
-                    <p class="text-indigo-700 font-medium text-xs">Epidemics</p>
-                    <p class="text-gray-600 text-xs mt-1">Improved inference of time-varying reproduction numbers during infectious disease outbreaks. 29, 100356.</p>
+                  <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300 dark:border-indigo-600">
+                    <p class="font-semibold text-gray-900 dark:text-gray-100 text-xs sm:text-sm">Thompson, R. N., et al. (2019)</p>
+                    <p class="text-indigo-700 dark:text-indigo-400 font-medium text-xs">Epidemics</p>
+                    <p class="text-gray-600 dark:text-gray-400 text-xs mt-1">Improved inference of time-varying reproduction numbers during infectious disease outbreaks. 29, 100356.</p>
                     <p class="text-blue-600 text-xs mt-1 break-all">
                       DOI: <a href="https://doi.org/10.1016/j.epidem.2019.100356" target="_blank" class="hover:underline">10.1016/j.epidem.2019.100356</a>
                     </p>
@@ -138,109 +235,109 @@
         <!-- Other Terms -->
         <div class="grid md:grid-cols-2 gap-8">
           <div>
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ t('documentation.glossary.caseClassifications.title') }}</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.glossary.caseClassifications.title') }}</h3>
             <div class="space-y-3">
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.caseClassifications.positive.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.caseClassifications.positive.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.caseClassifications.positive.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.caseClassifications.positive.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.caseClassifications.recovered.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.caseClassifications.recovered.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.caseClassifications.recovered.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.caseClassifications.recovered.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.caseClassifications.deceased.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.caseClassifications.deceased.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.caseClassifications.deceased.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.caseClassifications.deceased.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.caseClassifications.active.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.caseClassifications.active.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.caseClassifications.active.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.caseClassifications.active.description') }}</p>
               </div>
             </div>
           </div>
           
           <div>
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ t('documentation.glossary.dataTypes.title') }}</h3>
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.glossary.dataTypes.title') }}</h3>
             <div class="space-y-3">
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.dataTypes.daily.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.dataTypes.daily.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.dataTypes.daily.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.dataTypes.daily.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.dataTypes.cumulative.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.dataTypes.cumulative.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.dataTypes.cumulative.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.dataTypes.cumulative.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.dataTypes.percentages.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.dataTypes.percentages.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.dataTypes.percentages.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.dataTypes.percentages.description') }}</p>
               </div>
               <div>
-                <h4 class="font-medium text-gray-900">{{ t('documentation.glossary.dataTypes.serialInterval.title') }}</h4>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.dataTypes.serialInterval.description') }}</p>
+                <h4 class="font-medium text-gray-900 dark:text-gray-100">{{ t('documentation.glossary.dataTypes.serialInterval.title') }}</h4>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.dataTypes.serialInterval.description') }}</p>
               </div>
             </div>
           </div>
         </div>
 
         <!-- Indonesian Terminology -->
-        <div class="mt-8 pt-8 border-t border-gray-200">
-          <h3 class="text-lg font-semibold text-gray-900 mb-4">{{ t('documentation.glossary.indonesianTerminology.title') }}</h3>
-          <p class="text-gray-600 mb-4">{{ t('documentation.glossary.indonesianTerminology.subtitle') }}</p>
-          <div class="mb-6 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-400">
-            <p class="text-sm text-blue-800 font-medium">{{ t('documentation.glossary.indonesianTerminology.officialNote') }}</p>
+        <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.glossary.indonesianTerminology.title') }}</h3>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">{{ t('documentation.glossary.indonesianTerminology.subtitle') }}</p>
+          <div class="mb-6 p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg border-l-4 border-blue-400 dark:border-blue-600">
+            <p class="text-sm text-blue-800 dark:text-blue-400 font-medium">{{ t('documentation.glossary.indonesianTerminology.officialNote') }}</p>
           </div>
           
           <!-- Current Terms -->
           <div class="mb-6">
-            <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
+            <h4 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
               <div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center mr-2 text-xs font-bold">✓</div>
               {{ t('documentation.glossary.indonesianTerminology.currentTerms') }}
             </h4>
             <div class="grid md:grid-cols-2 gap-4">
-              <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-400">
-                <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.name') }}</h5>
-                <p class="text-sm text-green-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.translation') }}</p>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.description') }}</p>
+              <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-600">
+                <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.name') }}</h5>
+                <p class="text-sm text-green-700 dark:text-green-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.translation') }}</p>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.indonesianTerminology.kasusSuspect.description') }}</p>
               </div>
               
-              <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-400">
-                <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.name') }}</h5>
-                <p class="text-sm text-green-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.translation') }}</p>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.description') }}</p>
+              <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-600">
+                <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.name') }}</h5>
+                <p class="text-sm text-green-700 dark:text-green-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.translation') }}</p>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.indonesianTerminology.kasusProbable.description') }}</p>
               </div>
               
-              <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-400">
-                <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.kontakErat.name') }}</h5>
-                <p class="text-sm text-green-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kontakErat.translation') }}</p>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.indonesianTerminology.kontakErat.description') }}</p>
+              <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-600">
+                <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.kontakErat.name') }}</h5>
+                <p class="text-sm text-green-700 dark:text-green-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kontakErat.translation') }}</p>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.indonesianTerminology.kontakErat.description') }}</p>
               </div>
               
-              <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-400">
-                <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.name') }}</h5>
-                <p class="text-sm text-green-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.translation') }}</p>
-                <p class="text-sm text-gray-600">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.description') }}</p>
+              <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-600">
+                <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.name') }}</h5>
+                <p class="text-sm text-green-700 dark:text-green-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.translation') }}</p>
+                <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('documentation.glossary.indonesianTerminology.kasusKonfirmasi.description') }}</p>
               </div>
             </div>
           </div>
 
           <!-- Legacy Terms -->
           <div class="mb-6">
-            <h4 class="text-md font-semibold text-gray-900 mb-4 flex items-center">
+            <h4 class="text-md font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
               <div class="w-6 h-6 bg-gray-500 text-white rounded-full flex items-center justify-center mr-2 text-xs font-bold">📋</div>
               {{ t('documentation.glossary.indonesianTerminology.legacyTerms') }}
             </h4>
             <div class="grid md:grid-cols-3 gap-4">
-              <div class="bg-blue-50 rounded-lg p-4 opacity-75 border-l-4 border-blue-300">
+              <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 opacity-75 border-l-4 border-blue-300 dark:border-blue-600">
                 <div class="flex items-start">
                   <div class="w-10 h-10 bg-blue-600 text-white rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                     <span class="text-sm font-bold">{{ t('documentation.glossary.indonesianTerminology.odp.acronym') }}</span>
                   </div>
                   <div>
-                    <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.odp.fullName') }}</h5>
-                    <p class="text-sm text-blue-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.odp.translation') }}</p>
-                    <p class="text-sm text-gray-600 mb-2">{{ t('documentation.glossary.indonesianTerminology.odp.description') }}</p>
+                    <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.odp.fullName') }}</h5>
+                    <p class="text-sm text-blue-700 dark:text-blue-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.odp.translation') }}</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ t('documentation.glossary.indonesianTerminology.odp.description') }}</p>
                     <div class="mt-2">
-                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">
                         → {{ t('documentation.glossary.indonesianTerminology.odp.replacedBy') }}
                       </span>
                     </div>
@@ -248,17 +345,17 @@
                 </div>
               </div>
               
-              <div class="bg-orange-50 rounded-lg p-4 opacity-75 border-l-4 border-orange-300">
+              <div class="bg-orange-50 dark:bg-orange-900/30 rounded-lg p-4 opacity-75 border-l-4 border-orange-300 dark:border-orange-600">
                 <div class="flex items-start">
                   <div class="w-10 h-10 bg-orange-600 text-white rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                     <span class="text-sm font-bold">{{ t('documentation.glossary.indonesianTerminology.pdp.acronym') }}</span>
                   </div>
                   <div>
-                    <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.pdp.fullName') }}</h5>
-                    <p class="text-sm text-orange-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.pdp.translation') }}</p>
-                    <p class="text-sm text-gray-600 mb-2">{{ t('documentation.glossary.indonesianTerminology.pdp.description') }}</p>
+                    <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.pdp.fullName') }}</h5>
+                    <p class="text-sm text-orange-700 dark:text-orange-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.pdp.translation') }}</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ t('documentation.glossary.indonesianTerminology.pdp.description') }}</p>
                     <div class="mt-2">
-                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">
                         → {{ t('documentation.glossary.indonesianTerminology.pdp.replacedBy') }}
                       </span>
                     </div>
@@ -266,17 +363,17 @@
                 </div>
               </div>
               
-              <div class="bg-purple-50 rounded-lg p-4 opacity-75 border-l-4 border-purple-300">
+              <div class="bg-purple-50 dark:bg-purple-900/30 rounded-lg p-4 opacity-75 border-l-4 border-purple-300 dark:border-purple-600">
                 <div class="flex items-start">
                   <div class="w-10 h-10 bg-purple-600 text-white rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
                     <span class="text-sm font-bold">{{ t('documentation.glossary.indonesianTerminology.otg.acronym') }}</span>
                   </div>
                   <div>
-                    <h5 class="font-semibold text-gray-900 mb-1">{{ t('documentation.glossary.indonesianTerminology.otg.fullName') }}</h5>
-                    <p class="text-sm text-purple-700 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.otg.translation') }}</p>
-                    <p class="text-sm text-gray-600 mb-2">{{ t('documentation.glossary.indonesianTerminology.otg.description') }}</p>
+                    <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ t('documentation.glossary.indonesianTerminology.otg.fullName') }}</h5>
+                    <p class="text-sm text-purple-700 dark:text-purple-400 font-medium mb-2">{{ t('documentation.glossary.indonesianTerminology.otg.translation') }}</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">{{ t('documentation.glossary.indonesianTerminology.otg.description') }}</p>
                     <div class="mt-2">
-                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                      <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">
                         → {{ t('documentation.glossary.indonesianTerminology.otg.replacedBy') }}
                       </span>
                     </div>
@@ -287,45 +384,45 @@
           </div>
           
           <!-- Classification Evolution -->
-          <div class="mt-6 p-4 bg-gray-50 rounded-lg border-l-4 border-indigo-400">
-            <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.title') }}</h4>
-            <p class="text-sm text-gray-600 mb-4">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.description') }}</p>
+          <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border-l-4 border-indigo-400 dark:border-indigo-600">
+            <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.title') }}</h4>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.description') }}</p>
             
             <!-- Official Quote -->
-            <div class="mb-4 p-3 bg-indigo-50 rounded-lg border-l-4 border-indigo-300">
-              <p class="text-sm text-indigo-800 font-medium italic">
+            <div class="mb-4 p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg border-l-4 border-indigo-300 dark:border-indigo-600">
+              <p class="text-sm text-indigo-800 dark:text-indigo-400 font-medium italic">
                 "{{ t('documentation.glossary.indonesianTerminology.classificationProgression.officialQuote') }}"
               </p>
-              <p class="text-xs text-indigo-600 mt-1">— Kementerian Kesehatan RI</p>
+              <p class="text-xs text-indigo-600 dark:text-indigo-400 mt-1">— Kementerian Kesehatan RI</p>
             </div>
             
             <div class="space-y-4">
               <div>
-                <h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.currentFlow') }}</h5>
+                <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.currentFlow') }}</h5>
                 <div class="overflow-x-auto">
                   <div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Suspect</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded font-medium whitespace-nowrap">Suspect</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Probable</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded font-medium whitespace-nowrap">Probable</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">Confirmed</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded font-medium whitespace-nowrap">Confirmed</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-gray-100 text-gray-700 rounded font-medium whitespace-nowrap">Recovery/Death</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded font-medium whitespace-nowrap">Recovery/Death</span>
                   </div>
                 </div>
               </div>
               
               <div>
-                <h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.legacyFlow') }}</h5>
+                <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.legacyFlow') }}</h5>
                 <div class="overflow-x-auto opacity-75">
                   <div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">ODP</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded font-medium whitespace-nowrap">ODP</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-orange-100 text-orange-700 rounded font-medium whitespace-nowrap">PDP</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded font-medium whitespace-nowrap">PDP</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-purple-100 text-purple-700 rounded font-medium whitespace-nowrap">OTG</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded font-medium whitespace-nowrap">OTG</span>
                     <span class="text-gray-400">→</span>
-                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Confirmed</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded font-medium whitespace-nowrap">Confirmed</span>
                   </div>
                 </div>
               </div>
@@ -350,4 +447,14 @@ defineProps<Props>()
 const { t, tm } = useI18n()
 
 const methodDetails = computed(() => tm('documentation.glossary.reproductionRate.methodDetails') as string[])
+
+const exampleData = computed(() => [
+  { day: 't-6', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan1'), cases: '12', current: false },
+  { day: 't-5', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan2'), cases: '18', current: false },
+  { day: 't-4', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan3'), cases: '25', current: false },
+  { day: 't-3', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan4'), cases: '31', current: false },
+  { day: 't-2', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan5'), cases: '28', current: false },
+  { day: 't-1', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan6'), cases: '35', current: false },
+  { day: 't', date: t('documentation.glossary.reproductionRate.practicalExample.dates.jan7'), cases: '42', current: true }
+])
 </script>
diff --git a/src/components/documentation/HealthCheckSection.vue b/src/components/documentation/HealthCheckSection.vue
index ce24783..0446f37 100644
--- a/src/components/documentation/HealthCheckSection.vue
+++ b/src/components/documentation/HealthCheckSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="health-check" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.healthCheck.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.healthCheck.description') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.healthCheck.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.healthCheck.description') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-emerald-500 to-green-600 px-8 py-6">
         <div class="flex items-center gap-4">
@@ -18,44 +18,44 @@
       <div class="p-8">
         <!-- Parameters Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
-          <div class="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
             No parameters required
           </div>
         </div>
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">status</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">API health status ("healthy" or "degraded")</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">API health status ("healthy" or "degraded")</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">database</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Database connectivity status</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Database connectivity status</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">timestamp</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Timestamp of health check</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Timestamp of health check</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">version</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">API version information</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">API version information</td>
                 </tr>
               </tbody>
             </table>
@@ -64,27 +64,27 @@
 
         <!-- Status Codes Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">HTTP Status Codes</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">HTTP Status Codes</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Status</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Meaning</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Status</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Meaning</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4">
-                    <span class="bg-green-100 text-green-700 px-2 py-1 rounded font-mono text-sm">200</span>
+                    <span class="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded font-mono text-sm">200</span>
                   </td>
-                  <td class="py-3 px-4 text-gray-600">{{ t('documentation.healthCheck.status200') }}</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">{{ t('documentation.healthCheck.status200') }}</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4">
-                    <span class="bg-orange-100 text-orange-700 px-2 py-1 rounded font-mono text-sm">503</span>
+                    <span class="bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 px-2 py-1 rounded font-mono text-sm">503</span>
                   </td>
-                  <td class="py-3 px-4 text-gray-600">{{ t('documentation.healthCheck.status503') }}</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">{{ t('documentation.healthCheck.status503') }}</td>
                 </tr>
               </tbody>
             </table>
@@ -93,7 +93,7 @@
 
         <!-- Code Examples -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Request</h3>
           <div class="grid lg:grid-cols-2 gap-6">
             <div>
               <CodeBlock 
diff --git a/src/components/documentation/NationalHistoricalSection.vue b/src/components/documentation/NationalHistoricalSection.vue
index 6bdc57e..ec1bc51 100644
--- a/src/components/documentation/NationalHistoricalSection.vue
+++ b/src/components/documentation/NationalHistoricalSection.vue
@@ -7,26 +7,26 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
         </div>
-        <h1 class="text-3xl font-bold text-gray-900">{{ t('documentation.nationalHistorical.title') }}</h1>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">{{ t('documentation.nationalHistorical.title') }}</h1>
       </div>
-      <p class="text-lg text-gray-600 mb-4">{{ t('documentation.nationalHistorical.description') }}</p>
+      <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">{{ t('documentation.nationalHistorical.description') }}</p>
       
       <!-- Usage Note -->
-      <div class="bg-green-50 rounded-lg p-4 border-l-4 border-green-400 mb-6">
+      <div class="bg-green-50 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-400 dark:border-green-800 mb-6">
         <div class="flex">
           <svg class="w-5 h-5 text-green-400 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
-          <div class="text-green-800">
+          <div class="text-green-800 dark:text-green-400">
             <p class="font-medium mb-1">When to use this endpoint</p>
-            <p class="text-sm">{{ t('documentation.nationalHistorical.usageNote') }}</p>
+            <p class="text-sm text-green-700 dark:text-green-400">{{ t('documentation.nationalHistorical.usageNote') }}</p>
           </div>
         </div>
       </div>
     </div>
 
     <!-- Endpoint Details -->
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-8 py-6">
         <div class="flex items-center gap-4">
           <span class="bg-white text-purple-700 px-3 py-1 rounded-lg font-mono text-sm font-bold">GET</span>
@@ -38,59 +38,59 @@
       <div class="p-8">
         <!-- Query Parameters -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Parameter</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Required</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Parameter</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Required</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">limit</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Records per page (default: 50, max: 1000)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Records per page (default: 50, max: 1000)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">offset</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Records to skip (default: 0)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Records to skip (default: 0)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">page</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Page number (1-based, alternative to offset)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Page number (1-based, alternative to offset)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">all</td>
-                  <td class="py-3 px-4 text-gray-600">boolean</td>
-                  <td class="py-3 px-4 text-gray-600">Return all data without pagination</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">boolean</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Return all data without pagination</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">start_date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Start date for filtering data (YYYY-MM-DD format)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Start date for filtering data (YYYY-MM-DD format)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">end_date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">End date for filtering data (YYYY-MM-DD format)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">End date for filtering data (YYYY-MM-DD format)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">sort</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Sort by field:order (e.g., date:desc, positive:asc). Default: date:asc</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Sort by field:order (e.g., date:desc, positive:asc). Default: date:asc</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
               </tbody>
             </table>
@@ -99,110 +99,110 @@
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           
           <!-- Array Structure Note -->
-          <div class="bg-blue-50 rounded-lg p-4 mb-4 border-l-4 border-blue-400">
+          <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 mb-4 border-l-4 border-blue-400 dark:border-blue-800">
             <div class="flex">
               <svg class="w-5 h-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
-              <div class="text-blue-800">
+              <div class="text-blue-800 dark:text-blue-400">
                 <p class="font-medium">Array Response</p>
-                <p class="text-sm">Returns an array of daily COVID-19 data objects. Each object contains the following fields:</p>
+                <p class="text-sm text-blue-700 dark:text-blue-400">Returns an array of daily COVID-19 data objects. Each object contains the following fields:</p>
               </div>
             </div>
           </div>
 
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Date of the COVID-19 case report (YYYY-MM-DD)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Date of the COVID-19 case report (YYYY-MM-DD)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">day</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Day number since first case reported</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Day number since first case reported</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.positive</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total confirmed COVID-19 cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total confirmed COVID-19 cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total death cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total death cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Current active cases (positive - recovered - deceased)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Current active cases (positive - recovered - deceased)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.positive</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new confirmed cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new confirmed cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new death cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new death cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily change in active cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily change in active cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.percentages.active</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Percentage of active cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Percentage of active cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.percentages.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Percentage of recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Percentage of recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.percentages.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Percentage of deceased cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Percentage of deceased cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.reproduction_rate.value</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Reproduction rate (Rt) estimate</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Reproduction rate (Rt) estimate</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.reproduction_rate.upper_bound</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Upper confidence bound for reproduction rate</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Upper confidence bound for reproduction rate</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.reproduction_rate.lower_bound</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Lower confidence bound for reproduction rate</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Lower confidence bound for reproduction rate</td>
                 </tr>
               </tbody>
             </table>
@@ -211,7 +211,7 @@
 
         <!-- Code Examples -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Requests</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Requests</h3>
           <div class="grid lg:grid-cols-2 gap-6 mb-6">
             <div>
               <CodeBlock 
diff --git a/src/components/documentation/NationalLatestSection.vue b/src/components/documentation/NationalLatestSection.vue
index b3d97d0..bcaf732 100644
--- a/src/components/documentation/NationalLatestSection.vue
+++ b/src/components/documentation/NationalLatestSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="national-latest" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.nationalLatest.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.nationalLatest.description') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.nationalLatest.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.nationalLatest.description') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-pico-blue to-pico-deep px-8 py-6">
         <div class="flex items-center gap-4">
@@ -18,69 +18,69 @@
       <div class="p-8">
         <!-- Parameters Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
-          <div class="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
             No parameters required
           </div>
         </div>
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Date of the COVID-19 case report (YYYY-MM-DD)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Date of the COVID-19 case report (YYYY-MM-DD)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">day</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Day number since first case reported</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Day number since first case reported</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.positive</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total confirmed COVID-19 cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total confirmed COVID-19 cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total death cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total death cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Current active cases (positive - recovered - deceased)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Current active cases (positive - recovered - deceased)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.*</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new cases for each category</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new cases for each category</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.percentages.*</td>
-                  <td class="py-3 px-4 text-gray-600">number</td>
-                  <td class="py-3 px-4 text-gray-600">Percentage distribution of cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">number</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Percentage distribution of cases</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.reproduction_rate</td>
-                  <td class="py-3 px-4 text-gray-600">object</td>
-                  <td class="py-3 px-4 text-gray-600">COVID-19 reproduction rate with confidence bounds</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">object</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">COVID-19 reproduction rate with confidence bounds</td>
                 </tr>
               </tbody>
             </table>
@@ -89,7 +89,7 @@
 
         <!-- Code Examples -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Request</h3>
           <div class="grid lg:grid-cols-2 gap-6">
             <div>
               <CodeBlock 
diff --git a/src/components/documentation/OverviewSection.vue b/src/components/documentation/OverviewSection.vue
index 6b4364f..e3349b3 100644
--- a/src/components/documentation/OverviewSection.vue
+++ b/src/components/documentation/OverviewSection.vue
@@ -1,20 +1,20 @@
 <template>
   <section v-show="isActive" id="overview" class="mb-12 md:mb-16">
     <div class="mb-6 md:mb-8">
-      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 md:mb-4">{{ t('documentation.overview.title') }}</h1>
-      <p class="text-base sm:text-lg lg:text-xl text-gray-600 mb-4 md:mb-6 leading-relaxed">
+      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 md:mb-4">{{ t('documentation.overview.title') }}</h1>
+      <p class="text-base sm:text-lg lg:text-xl text-gray-600 dark:text-gray-400 mb-4 md:mb-6 leading-relaxed">
         {{ t('documentation.overview.subtitle') }}
       </p>
       
       <!-- API Status -->
-      <div class="inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 bg-green-50 border border-green-200 rounded-full text-green-700 mb-6 md:mb-8">
+      <div class="inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-full text-green-700 dark:text-green-400 mb-6 md:mb-8">
         <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
         <span class="text-xs sm:text-sm font-medium">{{ t('documentation.overview.apiStatus') }}</span>
       </div>
     </div>
 
     <!-- Getting Started Card -->
-    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
         <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-white mb-1 sm:mb-2">{{ t('documentation.overview.gettingStarted') }}</h2>
         <p class="text-sm sm:text-base text-blue-100">{{ t('documentation.overview.gettingStartedSub') }}</p>
@@ -23,27 +23,27 @@
       <div class="p-3 sm:p-4 md:p-6 lg:p-8">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 md:gap-8">
           <div>
-            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border overflow-x-auto">
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
+            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border dark:border-gray-600 overflow-x-auto">
               <code class="text-blue-600 whitespace-nowrap block">https://pico-api.banuacoder.com/api/v1</code>
             </div>
             
-            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mt-3 sm:mt-4 md:mt-6 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.contentType') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border">
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 dark:text-gray-100 mt-3 sm:mt-4 md:mt-6 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.contentType') }}</h3>
+            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border dark:border-gray-600">
               <code class="text-green-600">application/json</code>
             </div>
           </div>
           
           <div>
-            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
             <CodeBlock 
               :code="quickExampleCode"
               language="bash"
               title="cURL Request"
             />
             
-            <div class="mt-2 sm:mt-3 md:mt-4 p-2 sm:p-3 md:p-4 bg-green-50 border border-green-200 rounded-lg">
-              <div class="flex items-start sm:items-center text-green-800">
+            <div class="mt-2 sm:mt-3 md:mt-4 p-2 sm:p-3 md:p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
+              <div class="flex items-start sm:items-center text-green-800 dark:text-green-400">
                 <svg class="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 flex-shrink-0 mt-0.5 sm:mt-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
diff --git a/src/components/documentation/ProvinceCasesSection.vue b/src/components/documentation/ProvinceCasesSection.vue
index 5534a51..c47d463 100644
--- a/src/components/documentation/ProvinceCasesSection.vue
+++ b/src/components/documentation/ProvinceCasesSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="province-cases" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.provinceCases.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.provinceCases.description') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.provinceCases.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.provinceCases.description') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-8 py-6">
         <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.provinceCases.endpoints') }}</h2>
         <p class="text-purple-100">{{ t('documentation.provinceCases.description') }}</p>
@@ -13,8 +13,8 @@
       
       <div class="p-8">
         <div class="grid lg:grid-cols-2 gap-8 mb-8">
-          <div class="bg-gray-50 rounded-xl p-6">
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.provinceCases.endpoints') }}</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.provinceCases.endpoints') }}</h3>
             <div class="space-y-3">
               <CodeBlock 
                 :code="provinceCasesEndpoint"
@@ -29,10 +29,10 @@
             </div>
           </div>
           
-          <div class="bg-purple-50 rounded-xl p-6">
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.provinceCases.features') }}</h3>
+          <div class="bg-purple-50 dark:bg-purple-900/30 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.provinceCases.features') }}</h3>
             <ul class="space-y-2">
-              <li v-for="(feature, index) in featuresList" :key="index" class="flex items-center text-sm text-gray-600">
+              <li v-for="(feature, index) in featuresList" :key="index" class="flex items-center text-sm text-gray-600 dark:text-gray-400">
                 <svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                 </svg>
@@ -44,53 +44,53 @@
 
         <!-- Parameters Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Parameter</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Required</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Parameter</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Required</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">limit</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Number of records per page for pagination</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Number of records per page for pagination</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">offset</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Number of records to skip</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Number of records to skip</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">all</td>
-                  <td class="py-3 px-4 text-gray-600">boolean</td>
-                  <td class="py-3 px-4 text-gray-600">Return all data without pagination</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">boolean</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Return all data without pagination</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">start_date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Filter data from this date (YYYY-MM-DD)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Filter data from this date (YYYY-MM-DD)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">end_date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Filter data until this date (YYYY-MM-DD)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Filter data until this date (YYYY-MM-DD)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">sort</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Sorting options (e.g., date:desc, date:asc)</td>
-                  <td class="py-3 px-4 text-gray-500">Optional</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Sorting options (e.g., date:desc, date:asc)</td>
+                  <td class="py-3 px-4 text-gray-500 dark:text-gray-500">Optional</td>
                 </tr>
               </tbody>
             </table>
@@ -99,125 +99,125 @@
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           
           <!-- Province Structure Note -->
-          <div class="bg-blue-50 rounded-lg p-4 mb-4 border-l-4 border-blue-400">
+          <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 mb-4 border-l-4 border-blue-400 dark:border-blue-800">
             <div class="flex">
               <svg class="w-5 h-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
-              <div class="text-blue-800">
+              <div class="text-blue-800 dark:text-blue-400">
                 <p class="font-medium">Provincial Data Structure</p>
-                <p class="text-sm">Returns array of province COVID-19 data with enhanced ODP/PDP tracking. Each object includes:</p>
+                <p class="text-sm text-blue-700 dark:text-blue-400">Returns array of province COVID-19 data with enhanced ODP/PDP tracking. Each object includes:</p>
               </div>
             </div>
           </div>
 
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">date</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Date of the case report (YYYY-MM-DD format)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Date of the case report (YYYY-MM-DD format)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">day</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Day number since first case reported</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Day number since first case reported</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">province.id</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Province ID (e.g., '72' for Sulawesi Tengah)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Province ID (e.g., '72' for Sulawesi Tengah)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">province.name</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Province name</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Province name</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.positive</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new confirmed cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new confirmed cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily new death cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily new death cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.odp.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily active ODP (Orang Dalam Pengawasan)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily active ODP (Orang Dalam Pengawasan)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.odp.finished</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily finished ODP observations</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily finished ODP observations</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.pdp.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily active PDP (Pasien Dalam Pengawasan)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily active PDP (Pasien Dalam Pengawasan)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">daily.pdp.finished</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Daily finished PDP supervisions</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Daily finished PDP supervisions</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.positive</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total confirmed cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total confirmed cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.recovered</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total recovered cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total recovered cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.deceased</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total death cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total death cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.active</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Current active cases</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Current active cases</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.odp.total</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total ODP cases (active + finished)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total ODP cases (active + finished)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">cumulative.pdp.total</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Total PDP cases (active + finished)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Total PDP cases (active + finished)</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.percentages.*</td>
-                  <td class="py-3 px-4 text-gray-600">float</td>
-                  <td class="py-3 px-4 text-gray-600">Percentage breakdown (active, recovered, deceased)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">float</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Percentage breakdown (active, recovered, deceased)</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">statistics.reproduction_rate.*</td>
-                  <td class="py-3 px-4 text-gray-600">object</td>
-                  <td class="py-3 px-4 text-gray-600">Reproduction rate with confidence bounds</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">object</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Reproduction rate with confidence bounds</td>
                 </tr>
               </tbody>
             </table>
@@ -226,7 +226,7 @@
 
         <!-- Response Example -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Example</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Example</h3>
           <CodeBlock 
             :code="provinceCasesResponse"
             language="json"
diff --git a/src/components/documentation/ProvincesSection.vue b/src/components/documentation/ProvincesSection.vue
index 8db1ec0..7632718 100644
--- a/src/components/documentation/ProvincesSection.vue
+++ b/src/components/documentation/ProvincesSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="provinces" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.provinces.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.provinces.description') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.provinces.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.provinces.description') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-8 py-6">
         <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.provinces.endpoint') }}</h2>
         <p class="text-indigo-100">{{ t('documentation.provinces.description') }}</p>
@@ -14,44 +14,44 @@
       <div class="p-8">
         <!-- Parameters Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
-          <div class="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
             No parameters required
           </div>
         </div>
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">id</td>
-                  <td class="py-3 px-4 text-gray-600">integer</td>
-                  <td class="py-3 px-4 text-gray-600">Unique province identifier</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">integer</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Unique province identifier</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">name</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Province name</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Province name</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">latest_case</td>
-                  <td class="py-3 px-4 text-gray-600">object</td>
-                  <td class="py-3 px-4 text-gray-600">Latest COVID-19 case data for the province (always included)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">object</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Latest COVID-19 case data for the province (always included)</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">coordinates</td>
-                  <td class="py-3 px-4 text-gray-600">object</td>
-                  <td class="py-3 px-4 text-gray-600">Province geographic coordinates (lat, lng)</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">object</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Province geographic coordinates (lat, lng)</td>
                 </tr>
               </tbody>
             </table>
@@ -60,7 +60,7 @@
 
         <!-- Code Examples -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Request</h3>
           <div class="grid lg:grid-cols-2 gap-6">
             <div>
               <CodeBlock 
diff --git a/src/components/documentation/RootEndpointSection.vue b/src/components/documentation/RootEndpointSection.vue
index 9efc254..2635d1b 100644
--- a/src/components/documentation/RootEndpointSection.vue
+++ b/src/components/documentation/RootEndpointSection.vue
@@ -1,11 +1,11 @@
 <template>
   <section v-show="isActive" id="root-endpoint" class="mb-16">
     <div class="mb-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.rootEndpoint.title') }}</h1>
-      <p class="text-lg text-gray-600">{{ t('documentation.rootEndpoint.description') }}</p>
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">{{ t('documentation.rootEndpoint.title') }}</h1>
+      <p class="text-lg text-gray-600 dark:text-gray-400">{{ t('documentation.rootEndpoint.description') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
       <!-- Endpoint Header -->
       <div class="bg-gradient-to-r from-pico-sky to-pico-blue px-8 py-6">
         <div class="flex items-center gap-4">
@@ -18,44 +18,44 @@
       <div class="p-8">
         <!-- Parameters Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Parameters</h3>
-          <div class="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Parameters</h3>
+          <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
             No parameters required
           </div>
         </div>
 
         <!-- Response Fields Table -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Fields</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Response Fields</h3>
           <div class="overflow-x-auto">
-            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
-              <thead class="bg-gray-50">
+            <table class="min-w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+              <thead class="bg-gray-50 dark:bg-gray-900">
                 <tr>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Field</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Type</th>
-                  <th class="text-left py-3 px-4 font-semibold text-gray-900 border-b">Description</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Field</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Type</th>
+                  <th class="text-left py-3 px-4 font-semibold text-gray-900 dark:text-gray-100 border-b dark:border-gray-600">Description</th>
                 </tr>
               </thead>
               <tbody class="text-sm">
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">endpoints</td>
-                  <td class="py-3 px-4 text-gray-600">object</td>
-                  <td class="py-3 px-4 text-gray-600">List of all available API endpoints</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">object</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">List of all available API endpoints</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">version</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">Current API version</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">Current API version</td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b dark:border-gray-600">
                   <td class="py-3 px-4 font-mono text-pico-deep">description</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">API description and purpose</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">API description and purpose</td>
                 </tr>
                 <tr>
                   <td class="py-3 px-4 font-mono text-pico-deep">documentation</td>
-                  <td class="py-3 px-4 text-gray-600">string</td>
-                  <td class="py-3 px-4 text-gray-600">URL to API documentation</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">string</td>
+                  <td class="py-3 px-4 text-gray-600 dark:text-gray-400">URL to API documentation</td>
                 </tr>
               </tbody>
             </table>
@@ -64,7 +64,7 @@
 
         <!-- Code Examples -->
         <div class="mb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Example Request</h3>
           <div class="grid lg:grid-cols-2 gap-6">
             <div>
               <CodeBlock 
diff --git a/src/composables/useScrollAnimation.ts b/src/composables/useScrollAnimation.ts
new file mode 100644
index 0000000..5ebbfce
--- /dev/null
+++ b/src/composables/useScrollAnimation.ts
@@ -0,0 +1,73 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useScrollAnimation() {
+  const observers = ref<IntersectionObserver[]>([])
+
+  const createScrollObserver = (
+    elements: NodeListOf<Element> | Element[],
+    options: IntersectionObserverInit = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -100px 0px'
+    }
+  ) => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('in-view')
+        }
+      })
+    }, options)
+
+    elements.forEach((el) => observer.observe(el))
+    observers.value.push(observer)
+    
+    return observer
+  }
+
+  const initScrollAnimations = () => {
+    // Animate elements on scroll
+    const animateElements = document.querySelectorAll('.animate-on-scroll')
+    if (animateElements.length > 0) {
+      createScrollObserver(animateElements)
+    }
+
+    // Slide in from left
+    const slideLeftElements = document.querySelectorAll('.animate-slide-left')
+    if (slideLeftElements.length > 0) {
+      createScrollObserver(slideLeftElements)
+    }
+
+    // Slide in from right
+    const slideRightElements = document.querySelectorAll('.animate-slide-right')
+    if (slideRightElements.length > 0) {
+      createScrollObserver(slideRightElements)
+    }
+
+    // Stagger animations for child elements
+    const staggerContainers = document.querySelectorAll('.animate-stagger')
+    staggerContainers.forEach((container) => {
+      const children = container.querySelectorAll('.stagger-item')
+      children.forEach((child, index) => {
+        (child as HTMLElement).style.animationDelay = `${index * 0.1}s`
+      })
+    })
+  }
+
+  const cleanupObservers = () => {
+    observers.value.forEach(observer => observer.disconnect())
+    observers.value = []
+  }
+
+  onMounted(() => {
+    // Small delay to ensure DOM is ready
+    setTimeout(initScrollAnimations, 100)
+  })
+
+  onUnmounted(cleanupObservers)
+
+  return {
+    initScrollAnimations,
+    createScrollObserver,
+    cleanupObservers
+  }
+}
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 1131034..506af6e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -231,6 +231,78 @@
           "Posterior distribution:",
           "Point estimate:"
         ],
+        "practicalExample": {
+          "title": "Practical Example",
+          "subtitle": "Central Sulawesi COVID-19 Cases (7-day period)",
+          "table": {
+            "day": "Day",
+            "date": "Date",
+            "newCases": "New Cases (I_t)"
+          },
+          "dates": {
+            "jan1": "Jan 1",
+            "jan2": "Jan 2",
+            "jan3": "Jan 3",
+            "jan4": "Jan 4",
+            "jan5": "Jan 5",
+            "jan6": "Jan 6",
+            "jan7": "Jan 7"
+          },
+          "calculationTitle": "Step-by-step calculation for R_t on Jan 7:",
+          "step1": {
+            "title": "1. Calculate infectiousness (λ_t):",
+            "formula": "λ₇ = (12×0.1) + (18×0.2) + (25×0.3) + (31×0.25) + (28×0.1) + (35×0.05)",
+            "calculation": "λ₇ = 1.2 + 3.6 + 7.5 + 7.75 + 2.8 + 1.75 = 24.6"
+          },
+          "step2": {
+            "title": "2. Apply Bayesian estimation:",
+            "formula": "R₇ = (a + I₇) / (b + λ₇)",
+            "calculation": "R₇ = (1 + 42) / (1 + 24.6) = 43 / 25.6 = 1.68"
+          },
+          "step3": {
+            "title": "3. Calculate 95% credible intervals:",
+            "explanation": "Using posterior Gamma distribution: R_t | data ~ Gamma(43, 25.6)",
+            "gammaQuantileFormula": {
+              "title": "Gamma Quantile Formula:",
+              "formula": "Q(p; α, β) = F⁻¹(p; α, β) where F is the Gamma CDF",
+              "description": "For Gamma distribution with shape α=43 and rate β=25.6:"
+            },
+            "detailedCalculations": {
+              "title": "Detailed Quantile Calculations:",
+              "lowerBoundStep": {
+                "title": "2.5th Percentile (Lower Bound):",
+                "formula": "Q(0.025; 43, 25.6) = Γ⁻¹(0.025; 43, 25.6)",
+                "approximation": "Using Wilson-Hilferty approximation:",
+                "wilsonHilfertyFormula": "x ≈ (α/β) × [1 + (z_p/√(9α)) - (1/(9α))]³",
+                "substitution": "x ≈ (43/25.6) × [1 + (-1.96/√(387)) - (1/387)]³",
+                "calculation": "x ≈ 1.68 × [1 - 0.0996 - 0.0026]³ ≈ 1.68 × 0.898³ ≈ 1.25"
+              },
+              "upperBoundStep": {
+                "title": "97.5th Percentile (Upper Bound):",
+                "formula": "Q(0.975; 43, 25.6) = Γ⁻¹(0.975; 43, 25.6)",
+                "calculation": "x ≈ 1.68 × [1 + (1.96/√(387)) - (1/387)]³ ≈ 1.68 × 1.096³ ≈ 2.18"
+              }
+            },
+            "formulas": {
+              "lowerBound": "Lower bound = Gamma_quantile(0.025, 43, 25.6)",
+              "upperBound": "Upper bound = Gamma_quantile(0.975, 43, 25.6)"
+            },
+            "calculations": {
+              "lowerBound": "Lower bound = 1.25",
+              "upperBound": "Upper bound = 2.18"
+            },
+            "confidenceInterval": "95% CI: [1.25, 2.18]",
+            "mathematicalNote": "Note: In practice, statistical software uses more precise numerical methods (Newton-Raphson, Brent's method) for inverse Gamma calculations."
+          },
+          "result": {
+            "title": "Final Result:",
+            "interpretation": "R_t = 1.68 (95% CI: 1.25-2.18) → Epidemic is growing with high confidence"
+          },
+          "note": {
+            "title": "Note:",
+            "content": "Serial interval weights (w_s) are based on gamma distribution with mean=5.0 days, std=3.0 days"
+          }
+        },
         "references": "References"
       },
       "caseClassifications": {
diff --git a/src/locales/id.json b/src/locales/id.json
index d5ee5cc..1ff1799 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -231,6 +231,78 @@
           "Distribusi posterior:",
           "Estimasi titik:"
         ],
+        "practicalExample": {
+          "title": "Contoh Praktis",
+          "subtitle": "Kasus COVID-19 Sulawesi Tengah (periode 7 hari)",
+          "table": {
+            "day": "Hari",
+            "date": "Tanggal",
+            "newCases": "Kasus Baru (I_t)"
+          },
+          "dates": {
+            "jan1": "1 Jan",
+            "jan2": "2 Jan",
+            "jan3": "3 Jan",
+            "jan4": "4 Jan",
+            "jan5": "5 Jan",
+            "jan6": "6 Jan",
+            "jan7": "7 Jan"
+          },
+          "calculationTitle": "Perhitungan langkah demi langkah untuk R_t pada 7 Jan:",
+          "step1": {
+            "title": "1. Hitung tingkat infeksi (λ_t):",
+            "formula": "λ₇ = (12×0.1) + (18×0.2) + (25×0.3) + (31×0.25) + (28×0.1) + (35×0.05)",
+            "calculation": "λ₇ = 1.2 + 3.6 + 7.5 + 7.75 + 2.8 + 1.75 = 24.6"
+          },
+          "step2": {
+            "title": "2. Terapkan estimasi Bayesian:",
+            "formula": "R₇ = (a + I₇) / (b + λ₇)",
+            "calculation": "R₇ = (1 + 42) / (1 + 24.6) = 43 / 25.6 = 1.68"
+          },
+          "step3": {
+            "title": "3. Hitung interval kredibel 95%:",
+            "explanation": "Menggunakan distribusi posterior Gamma: R_t | data ~ Gamma(43, 25.6)",
+            "gammaQuantileFormula": {
+              "title": "Formula Kuantil Gamma:",
+              "formula": "Q(p; α, β) = F⁻¹(p; α, β) dimana F adalah CDF Gamma",
+              "description": "Untuk distribusi Gamma dengan shape α=43 dan rate β=25.6:"
+            },
+            "detailedCalculations": {
+              "title": "Perhitungan Kuantil Rinci:",
+              "lowerBoundStep": {
+                "title": "Persentil ke-2.5 (Batas Bawah):",
+                "formula": "Q(0.025; 43, 25.6) = Γ⁻¹(0.025; 43, 25.6)",
+                "approximation": "Menggunakan aproksimasi Wilson-Hilferty:",
+                "wilsonHilfertyFormula": "x ≈ (α/β) × [1 + (z_p/√(9α)) - (1/(9α))]³",
+                "substitution": "x ≈ (43/25.6) × [1 + (-1.96/√(387)) - (1/387)]³",
+                "calculation": "x ≈ 1.68 × [1 - 0.0996 - 0.0026]³ ≈ 1.68 × 0.898³ ≈ 1.25"
+              },
+              "upperBoundStep": {
+                "title": "Persentil ke-97.5 (Batas Atas):",
+                "formula": "Q(0.975; 43, 25.6) = Γ⁻¹(0.975; 43, 25.6)",
+                "calculation": "x ≈ 1.68 × [1 + (1.96/√(387)) - (1/387)]³ ≈ 1.68 × 1.096³ ≈ 2.18"
+              }
+            },
+            "formulas": {
+              "lowerBound": "Batas bawah = Gamma_quantile(0.025, 43, 25.6)",
+              "upperBound": "Batas atas = Gamma_quantile(0.975, 43, 25.6)"
+            },
+            "calculations": {
+              "lowerBound": "Batas bawah = 1.25",
+              "upperBound": "Batas atas = 2.18"
+            },
+            "confidenceInterval": "95% CI: [1.25, 2.18]",
+            "mathematicalNote": "Catatan: Dalam praktiknya, perangkat lunak statistik menggunakan metode numerik yang lebih presisi (Newton-Raphson, metode Brent) untuk perhitungan invers Gamma."
+          },
+          "result": {
+            "title": "Hasil Akhir:",
+            "interpretation": "R_t = 1.68 (95% CI: 1.25-2.18) → Epidemi sedang bertumbuh dengan tingkat kepercayaan tinggi"
+          },
+          "note": {
+            "title": "Catatan:",
+            "content": "Bobot interval serial (w_s) berdasarkan distribusi gamma dengan rata-rata=5.0 hari, standar deviasi=3.0 hari"
+          }
+        },
         "references": "Referensi"
       },
       "caseClassifications": {
diff --git a/src/style.css b/src/style.css
index 9abf7b5..383c34b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,6 +14,8 @@
 body {
   margin: 0;
   font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 /* Accessibility improvements */
@@ -225,4 +227,270 @@ body {
   animation: response-fade-in 0.8s ease-out;
   animation-delay: 4.3s;
   animation-fill-mode: both;
+}
+
+/* COVID Virus-themed Animations */
+@keyframes virus-float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-8px) rotate(90deg);
+  }
+  50% {
+    transform: translateY(-4px) rotate(180deg);
+  }
+  75% {
+    transform: translateY(-12px) rotate(270deg);
+  }
+}
+
+@keyframes molecular-drift {
+  0%, 100% {
+    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
+  }
+  20% {
+    transform: translateX(4px) translateY(-6px) rotate(45deg) scale(1.05);
+  }
+  40% {
+    transform: translateX(-2px) translateY(-8px) rotate(90deg) scale(0.95);
+  }
+  60% {
+    transform: translateX(6px) translateY(-2px) rotate(180deg) scale(1.1);
+  }
+  80% {
+    transform: translateX(-4px) translateY(-10px) rotate(270deg) scale(0.9);
+  }
+}
+
+@keyframes organic-pulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.15;
+  }
+  15% {
+    transform: scale(1.08) rotate(20deg);
+    opacity: 0.12;
+  }
+  30% {
+    transform: scale(0.95) rotate(-10deg);
+    opacity: 0.18;
+  }
+  45% {
+    transform: scale(1.12) rotate(35deg);
+    opacity: 0.10;
+  }
+  60% {
+    transform: scale(0.9) rotate(-25deg);
+    opacity: 0.20;
+  }
+  75% {
+    transform: scale(1.05) rotate(15deg);
+    opacity: 0.14;
+  }
+}
+
+@keyframes spiral-rotation {
+  0% {
+    transform: rotate(0deg) translateX(0) translateY(0) scale(1);
+  }
+  25% {
+    transform: rotate(90deg) translateX(2px) translateY(-2px) scale(1.02);
+  }
+  50% {
+    transform: rotate(180deg) translateX(0) translateY(-4px) scale(0.98);
+  }
+  75% {
+    transform: rotate(270deg) translateX(-2px) translateY(-2px) scale(1.04);
+  }
+  100% {
+    transform: rotate(360deg) translateX(0) translateY(0) scale(1);
+  }
+}
+
+/* Animation classes */
+.animate-virus-float {
+  animation: virus-float 6s ease-in-out infinite;
+}
+
+.animate-molecular-drift {
+  animation: molecular-drift 8s ease-in-out infinite;
+}
+
+.animate-organic-pulse {
+  animation: organic-pulse 5s ease-in-out infinite;
+}
+
+.animate-spiral-rotation {
+  animation: spiral-rotation 10s linear infinite;
+}
+
+/* Scroll-driven animations */
+@keyframes reveal-on-scroll {
+  0% {
+    opacity: 0;
+    transform: translateY(50px) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes slide-in-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-right {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes virus-hover-dance {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg) scale(1);
+  }
+  25% {
+    transform: translateY(-5px) rotate(10deg) scale(1.05);
+  }
+  50% {
+    transform: translateY(-8px) rotate(-5deg) scale(1.1);
+  }
+  75% {
+    transform: translateY(-3px) rotate(8deg) scale(1.02);
+  }
+}
+
+@keyframes particle-interaction {
+  0% {
+    transform: scale(1) rotate(0deg);
+    opacity: 0.15;
+  }
+  50% {
+    transform: scale(1.3) rotate(180deg);
+    opacity: 0.25;
+  }
+  100% {
+    transform: scale(1) rotate(360deg);
+    opacity: 0.15;
+  }
+}
+
+/* Scroll-driven animation classes */
+.animate-on-scroll {
+  opacity: 0;
+  transform: translateY(50px) scale(0.9);
+  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.animate-on-scroll.in-view {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.animate-slide-left {
+  opacity: 0;
+  transform: translateX(-100px);
+  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.animate-slide-left.in-view {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.animate-slide-right {
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.animate-slide-right.in-view {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Hover interaction animations */
+.virus-interactive:hover {
+  animation: virus-hover-dance 0.8s ease-in-out;
+}
+
+.particle-interactive:hover {
+  animation: particle-interaction 1.2s ease-in-out;
+}
+
+.feature-card-hover {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.feature-card-hover:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+/* Dark mode image styles */
+.dark-mode-invert {
+  transition: filter 0.3s ease-in-out;
+}
+
+.dark .dark-mode-invert {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Logo specific dark mode handling */
+.logo-dark-mode {
+  transition: filter 0.3s ease-in-out;
+}
+
+.dark .logo-dark-mode {
+  filter: brightness(0) invert(1);
+}
+
+/* Image background removal for better dark mode */
+.image-no-bg {
+  mix-blend-mode: multiply;
+  transition: mix-blend-mode 0.3s ease-in-out;
+}
+
+.dark .image-no-bg {
+  mix-blend-mode: screen;
+  filter: brightness(1.2) contrast(1.1);
+}
+
+/* Remove white backgrounds from images like INACOVID */
+.image-remove-bg {
+  transition: mix-blend-mode 0.3s ease-in-out, filter 0.3s ease-in-out;
+}
+
+.dark .image-remove-bg {
+  mix-blend-mode: screen;
+  filter: contrast(1.5) brightness(1.1);
+}
+
+/* Government logos with selective typography inversion */
+.image-gov-logo {
+  transition: filter 0.3s ease-in-out;
+}
+
+.dark .image-gov-logo {
+  /* This creates a complex filter that attempts to invert only dark text while preserving colored elements */
+  filter: 
+    brightness(1.2) 
+    contrast(1.3) 
+    sepia(0.1) 
+    hue-rotate(180deg) 
+    invert(0.15);
 }
\ No newline at end of file
diff --git a/src/views/ApiReference.vue b/src/views/ApiReference.vue
index e0f4077..977e759 100644
--- a/src/views/ApiReference.vue
+++ b/src/views/ApiReference.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
     <!-- Navigation -->
     <Navigation variant="solid" />
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 pt-20">
-      <div class="prose prose-lg max-w-none">
-        <h1>API Reference</h1>
-        <p class="lead">Complete API endpoint reference for PICO SulTeng</p>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 pt-24">
+      <div class="prose prose-lg max-w-none dark:prose-invert">
+        <h1 class="text-gray-900 dark:text-gray-100">API Reference</h1>
+        <p class="lead text-gray-600 dark:text-gray-400">Complete API endpoint reference for PICO SulTeng</p>
         
         <!-- API Reference content will go here -->
-        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 my-6">
+        <div class="bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-400 dark:border-blue-500 p-4 my-6">
           <div class="flex">
             <div class="flex-shrink-0">
-              <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+              <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
               </svg>
             </div>
             <div class="ml-3">
-              <p class="text-sm text-blue-700">
+              <p class="text-sm text-blue-700 dark:text-blue-300">
                 For the most up-to-date API reference with interactive examples, visit our
-                <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="font-medium underline text-blue-700 hover:text-blue-600">
+                <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="font-medium underline text-blue-700 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-200 transition-colors">
                   Swagger UI Documentation
                 </a>
               </p>
diff --git a/src/views/Documentation.vue b/src/views/Documentation.vue
index 957d2bd..0dc2c38 100644
--- a/src/views/Documentation.vue
+++ b/src/views/Documentation.vue
@@ -1,26 +1,45 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <!-- Navigation -->
-    <Navigation variant="solid" />
-
-    <div class="flex min-h-screen pt-16">
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
+    <div class="flex min-h-screen">
       <!-- Sidebar -->
-      <aside class="w-72 sm:w-64 bg-white shadow-lg border-r border-gray-200 fixed left-0 top-16 bottom-0 overflow-y-auto z-30 transform transition-transform duration-300 ease-in-out lg:translate-x-0" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
-        <div class="p-4 sm:p-6">
-          <!-- Header -->
-          <div class="mb-6 sm:mb-8">
-            <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-2">API Documentation</h2>
-            <p class="text-xs sm:text-sm text-gray-600">PICO SulTeng COVID-19 API</p>
+      <aside class="w-64 bg-white dark:bg-gray-800 shadow-lg border-r border-gray-200 dark:border-gray-700 fixed left-0 top-0 bottom-0 z-30 transform transition-transform duration-300 ease-in-out lg:translate-x-0 flex flex-col" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
+        <!-- Fixed Header -->
+        <div class="flex-shrink-0 p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
+          <div class="flex items-center space-x-3 mb-4">
+            <img src="/pico-api-logo.webp" alt="PICO API Logo" class="h-8 w-auto logo-dark-mode">
+            <router-link to="/" class="text-xl font-bold gradient-text">PICO SulTeng</router-link>
+          </div>
+          <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">API Documentation</h2>
+          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-4">PICO SulTeng COVID-19 API</p>
+          
+          <!-- Theme & Language Controls -->
+          <div class="flex items-center space-x-2">
+            <!-- Language Toggle -->
+            <button 
+              @click="toggleLanguage"
+              class="flex items-center justify-center px-3 py-2 rounded-lg border border-gray-200 hover:border-gray-300 transition-all duration-200 bg-white hover:bg-gray-50 shadow-sm dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600"
+              :aria-label="`Switch to ${locale === 'en' ? 'Indonesian' : 'English'} language`"
+            >
+              <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
+              </svg>
+              <span class="ml-1.5 text-sm font-medium text-gray-700 dark:text-gray-200">{{ locale === 'en' ? 'EN' : 'ID' }}</span>
+            </button>
+            
+            <!-- Theme Toggle -->
+            <ThemeToggle />
           </div>
+        </div>
 
-          <!-- Navigation Menu -->
+        <!-- Scrollable Navigation Menu -->
+        <div class="flex-1 overflow-y-auto p-4 sm:p-6">
           <nav class="space-y-2">
             <!-- Getting Started -->
             <div>
-              <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Getting Started</h3>
+              <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Getting Started</h3>
               <ul class="space-y-1">
                 <li>
-                  <a href="#overview" @click="setActiveSection('overview')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'overview' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#overview" @click="setActiveSection('overview')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'overview' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -28,7 +47,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#authentication" @click="setActiveSection('authentication')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'authentication' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#authentication" @click="setActiveSection('authentication')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'authentication' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                     </svg>
@@ -36,7 +55,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#error-handling" @click="setActiveSection('error-handling')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'error-handling' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#error-handling" @click="setActiveSection('error-handling')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'error-handling' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -44,7 +63,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#glossary" @click="setActiveSection('glossary')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'glossary' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#glossary" @click="setActiveSection('glossary')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'glossary' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                     </svg>
@@ -56,29 +75,29 @@
 
             <!-- API Endpoints -->
             <div class="pt-6">
-              <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">API Endpoints</h3>
+              <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">API Endpoints</h3>
               <ul class="space-y-1">
                 <!-- National Endpoints -->
                 <li>
                   <div class="flex items-center justify-between">
-                    <button @click="toggleSection('national')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 hover:bg-gray-50 flex-1 text-left">
+                    <button @click="toggleSection('national')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 flex-1 text-left">
                       <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                       </svg>
                       National Data
                     </button>
-                    <svg class="w-4 h-4 text-gray-400 transition-transform" :class="expandedSections.national ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform" :class="expandedSections.national ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                     </svg>
                   </div>
                   <ul v-show="expandedSections.national" class="ml-7 mt-2 space-y-1">
                     <li>
-                      <a href="#national-latest" @click="setActiveSection('national-latest')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'national-latest' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-600 hover:bg-gray-50'">
+                      <a href="#national-latest" @click="setActiveSection('national-latest')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'national-latest' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'">
                         Latest Data
                       </a>
                     </li>
                     <li>
-                      <a href="#national-historical" @click="setActiveSection('national-historical')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'national-historical' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-600 hover:bg-gray-50'">
+                      <a href="#national-historical" @click="setActiveSection('national-historical')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'national-historical' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'">
                         Historical Data
                       </a>
                     </li>
@@ -87,7 +106,7 @@
 
                 <!-- Core Endpoints -->
                 <li>
-                  <a href="#root-endpoint" @click="setActiveSection('root-endpoint')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'root-endpoint' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#root-endpoint" @click="setActiveSection('root-endpoint')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'root-endpoint' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                     </svg>
@@ -95,7 +114,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="#health-check" @click="setActiveSection('health-check')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'health-check' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-700 hover:bg-gray-50'">
+                  <a href="#health-check" @click="setActiveSection('health-check')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'health-check' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -106,25 +125,25 @@
                 <!-- Province Endpoints -->
                 <li>
                   <div class="flex items-center justify-between">
-                    <button @click="toggleSection('provinces')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 hover:bg-gray-50 flex-1 text-left">
+                    <button @click="toggleSection('provinces')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 flex-1 text-left">
                       <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                       </svg>
                       Province Data
                     </button>
-                    <svg class="w-4 h-4 text-gray-400 transition-transform" :class="expandedSections.provinces ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform" :class="expandedSections.provinces ? 'rotate-90' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                     </svg>
                   </div>
                   <ul v-show="expandedSections.provinces" class="ml-7 mt-2 space-y-1">
                     <li>
-                      <a href="#provinces" @click="setActiveSection('provinces')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'provinces' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-600 hover:bg-gray-50'">
+                      <a href="#provinces" @click="setActiveSection('provinces')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'provinces' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'">
                         All Provinces
                       </a>
                     </li>
                     <li>
-                      <a href="#province-cases" @click="setActiveSection('province-cases')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'province-cases' ? 'bg-pico-sky/20 text-pico-deep font-medium' : 'text-gray-600 hover:bg-gray-50'">
+                      <a href="#province-cases" @click="setActiveSection('province-cases')" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors" :class="activeSection === 'province-cases' ? 'bg-pico-sky/20 dark:bg-pico-sky/30 text-pico-deep dark:text-pico-sky font-medium' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'">
                         Province Cases
                       </a>
                     </li>
@@ -139,11 +158,11 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                       </svg>
-                      <span class="text-gray-500">Regional Data</span>
-                      <span class="ml-auto text-xs bg-pico-sky/30 text-pico-deep px-2 py-1 rounded-md font-medium">Coming Soon</span>
+                      <span class="text-gray-500 dark:text-gray-400">Regional Data</span>
+                      <span class="ml-auto text-xs bg-pico-sky/30 dark:bg-pico-sky/40 text-pico-deep dark:text-pico-sky px-2 py-1 rounded-md font-medium">Coming Soon</span>
                     </div>
                   </div>
-                  <div class="ml-7 mt-1 text-xs text-gray-400 px-3">
+                  <div class="ml-7 mt-1 text-xs text-gray-400 dark:text-gray-500 px-3">
                     Central Sulawesi • City/Regency Data
                   </div>
                 </li>
@@ -155,11 +174,11 @@
                       <svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                       </svg>
-                      <span class="text-gray-500">Healthcare Data</span>
-                      <span class="ml-auto text-xs bg-green-100 text-green-600 px-2 py-1 rounded-md font-medium">Coming Soon</span>
+                      <span class="text-gray-500 dark:text-gray-400">Healthcare Data</span>
+                      <span class="ml-auto text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-1 rounded-md font-medium">Coming Soon</span>
                     </div>
                   </div>
-                  <div class="ml-7 mt-1 text-xs text-gray-400 px-3">
+                  <div class="ml-7 mt-1 text-xs text-gray-400 dark:text-gray-500 px-3">
                     Hospital Beds • Vaccines • Testing Centers
                   </div>
                 </li>
@@ -167,11 +186,11 @@
             </div>
 
             <!-- External Links -->
-            <div class="pt-6 border-t border-gray-200">
-              <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Resources</h3>
+            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
+              <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">Resources</h3>
               <ul class="space-y-1">
                 <li>
-                  <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 hover:bg-gray-50">
+                  <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                     <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                     </svg>
@@ -179,7 +198,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="https://github.com/banua-coder/pico-api-go" target="_blank" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 hover:bg-gray-50">
+                  <a href="https://github.com/banua-coder/pico-api-go" target="_blank" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                     <svg class="w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 24 24">
                       <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
                     </svg>
@@ -190,16 +209,34 @@
             </div>
           </nav>
         </div>
+
+        <!-- Fixed Footer -->
+        <div class="flex-shrink-0 p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+          <div class="text-center">
+            <div class="flex items-center justify-center space-x-2 mb-2">
+              <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2C7 1.45 7.45 1 8 1H16C16.55 1 17 1.45 17 2V4M7 4H5C3.9 4 3 4.9 3 6V20C3 21.1 3.9 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4H17M7 4H17M9 9H15M9 13H12"></path>
+              </svg>
+              <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Version {{ version }}</span>
+            </div>
+            <p class="text-xs text-gray-500 dark:text-gray-500">
+              Built with ❤️ by 
+              <a href="https://github.com/banua-coder" target="_blank" class="text-pico-blue hover:text-pico-deep dark:text-pico-sky dark:hover:text-pico-blue font-medium transition-colors">
+                Banua Coder
+              </a>
+            </p>
+          </div>
+        </div>
       </aside>
 
       <!-- Mobile sidebar backdrop -->
       <div v-if="sidebarOpen" @click="closeSidebar" class="fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden"></div>
 
       <!-- Main content -->
-      <main class="flex-1 lg:ml-64 w-full min-w-0">
+      <main class="flex-1 lg:ml-64 w-full min-w-0 pt-0">
         <!-- Mobile header with sidebar toggle -->
-        <div class="lg:hidden bg-white border-b border-gray-200 px-4 py-4">
-          <button @click="openSidebar" class="flex items-center text-gray-600 hover:text-gray-900">
+        <div class="lg:hidden bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-4">
+          <button @click="openSidebar" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
             </svg>
@@ -227,7 +264,9 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import Navigation from '@/components/Navigation.vue'
+import { useI18n } from 'vue-i18n'
+import ThemeToggle from '@/components/ThemeToggle.vue'
+import packageJson from '../../package.json'
 import OverviewSection from '@/components/documentation/OverviewSection.vue'
 import NationalLatestSection from '@/components/documentation/NationalLatestSection.vue'
 import NationalHistoricalSection from '@/components/documentation/NationalHistoricalSection.vue'
@@ -239,6 +278,11 @@ import AuthenticationSection from '@/components/documentation/AuthenticationSect
 import ErrorHandlingSection from '@/components/documentation/ErrorHandlingSection.vue'
 import GlossarySection from '@/components/documentation/GlossarySection.vue'
 
+const { t, locale } = useI18n()
+
+// Version from package.json
+const version = packageJson.version
+
 // Sidebar state
 const sidebarOpen = ref(false)
 const activeSection = ref('overview')
@@ -269,6 +313,13 @@ const toggleSection = (section: keyof typeof expandedSections) => {
   expandedSections[section] = !expandedSections[section]
 }
 
+// Toggle language function
+const toggleLanguage = () => {
+  const newLocale = locale.value === 'en' ? 'id' : 'en'
+  locale.value = newLocale
+  localStorage.setItem('pico-language', newLocale)
+}
+
 // Initialize
 onMounted(() => {
   // Set default active section based on URL hash
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ae89228..20fa610 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="min-h-screen bg-white dark:bg-gray-900 transition-colors duration-200">
     <!-- Skip Navigation -->
     <a href="#main-content" class="skip-link">Skip to main content</a>
-    
+
     <!-- Navigation -->
     <Navigation />
 
@@ -11,82 +11,144 @@
       <!-- Background Pattern -->
       <div class="absolute inset-0 overflow-hidden">
         <!-- Gradient mesh background -->
-        <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50"></div>
-        
-        <!-- Geometric pattern overlay -->
-        <div class="absolute inset-0 opacity-40">
+        <div
+          class="absolute inset-0 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+        </div>
+
+        <!-- COVID-themed pattern overlay -->
+        <div class="absolute inset-0 opacity-30">
           <svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
             <defs>
-              <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
-                <path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgb(99 102 241)" stroke-width="1" opacity="0.1"/>
+              <!-- Subtle grid pattern -->
+              <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+                <path d="M 80 0 L 0 0 0 80" fill="none" stroke="rgb(99 102 241)" stroke-width="0.5" opacity="0.1" />
               </pattern>
-              <pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse">
-                <circle cx="20" cy="20" r="1.5" fill="rgb(79 70 229)" opacity="0.2"/>
+
+              <!-- Virus-like pattern -->
+              <pattern id="virus-pattern" width="120" height="120" patternUnits="userSpaceOnUse">
+                <!-- Central core -->
+                <circle cx="60" cy="60" r="8" fill="rgb(79 70 229)" opacity="0.08" />
+                <!-- Spike proteins as small dots -->
+                <circle cx="45" cy="45" r="2" fill="rgb(79 70 229)" opacity="0.06" />
+                <circle cx="75" cy="45" r="2" fill="rgb(79 70 229)" opacity="0.06" />
+                <circle cx="45" cy="75" r="2" fill="rgb(79 70 229)" opacity="0.06" />
+                <circle cx="75" cy="75" r="2" fill="rgb(79 70 229)" opacity="0.06" />
+                <circle cx="60" cy="35" r="1.5" fill="rgb(79 70 229)" opacity="0.05" />
+                <circle cx="85" cy="60" r="1.5" fill="rgb(79 70 229)" opacity="0.05" />
+                <circle cx="60" cy="85" r="1.5" fill="rgb(79 70 229)" opacity="0.05" />
+                <circle cx="35" cy="60" r="1.5" fill="rgb(79 70 229)" opacity="0.05" />
+              </pattern>
+
+              <!-- Molecular connection pattern -->
+              <pattern id="molecules" width="160" height="160" patternUnits="userSpaceOnUse">
+                <!-- Connected nodes -->
+                <circle cx="80" cy="80" r="3" fill="rgb(59 130 246)" opacity="0.1" />
+                <circle cx="40" cy="40" r="2" fill="rgb(59 130 246)" opacity="0.08" />
+                <circle cx="120" cy="40" r="2" fill="rgb(59 130 246)" opacity="0.08" />
+                <circle cx="40" cy="120" r="2" fill="rgb(59 130 246)" opacity="0.08" />
+                <circle cx="120" cy="120" r="2" fill="rgb(59 130 246)" opacity="0.08" />
+                <!-- Connection lines -->
+                <line x1="80" y1="80" x2="40" y2="40" stroke="rgb(59 130 246)" stroke-width="0.5" opacity="0.05" />
+                <line x1="80" y1="80" x2="120" y2="40" stroke="rgb(59 130 246)" stroke-width="0.5" opacity="0.05" />
+                <line x1="80" y1="80" x2="40" y2="120" stroke="rgb(59 130 246)" stroke-width="0.5" opacity="0.05" />
+                <line x1="80" y1="80" x2="120" y2="120" stroke="rgb(59 130 246)" stroke-width="0.5" opacity="0.05" />
               </pattern>
             </defs>
-            <rect width="100%" height="100%" fill="url(#grid)"/>
-            <rect width="100%" height="100%" fill="url(#dots)"/>
+
+            <!-- Layer the patterns -->
+            <rect width="100%" height="100%" fill="url(#grid)" />
+            <rect width="100%" height="100%" fill="url(#virus-pattern)" />
+            <rect width="100%" height="100%" fill="url(#molecules)" />
           </svg>
         </div>
-        
+
         <!-- Floating elements -->
-        <div class="absolute -top-40 -right-32 w-96 h-96 bg-gradient-to-br from-blue-400/30 to-purple-600/30 rounded-full blur-3xl animate-pulse"></div>
-        <div class="absolute -bottom-32 -left-40 w-80 h-80 bg-gradient-to-tr from-indigo-400/30 to-cyan-600/30 rounded-full blur-3xl animate-pulse animation-delay-2000"></div>
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-violet-400/20 to-pink-600/20 rounded-full blur-2xl animate-pulse animation-delay-4000"></div>
-        
+        <div
+          class="absolute -top-40 -right-32 w-96 h-96 bg-gradient-to-br from-blue-400/30 to-purple-600/30 rounded-full blur-3xl animate-pulse">
+        </div>
+        <div
+          class="absolute -bottom-32 -left-40 w-80 h-80 bg-gradient-to-tr from-indigo-400/30 to-cyan-600/30 rounded-full blur-3xl animate-pulse animation-delay-2000">
+        </div>
+        <div
+          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-violet-400/20 to-pink-600/20 rounded-full blur-2xl animate-pulse animation-delay-4000">
+        </div>
+
         <!-- Floating geometric shapes -->
-        <div class="absolute top-20 left-1/4 w-8 h-8 bg-blue-500/20 rotate-45 animate-bounce animation-delay-1000"></div>
-        <div class="absolute bottom-32 right-1/4 w-12 h-12 bg-indigo-500/20 rounded-full animate-pulse animation-delay-2000"></div>
-        <div class="absolute top-1/3 right-20 w-6 h-6 bg-purple-500/20 rotate-12 animate-spin" style="animation-duration: 8s;"></div>
-        <div class="absolute bottom-20 left-20 w-10 h-10 bg-cyan-500/20 rounded-lg rotate-45 animate-bounce animation-delay-3000"></div>
+        <div class="absolute top-20 left-1/4 w-8 h-8 bg-blue-500/20 rotate-45 animate-bounce animation-delay-1000">
+        </div>
+        <div
+          class="absolute bottom-32 right-1/4 w-12 h-12 bg-indigo-500/20 rounded-full animate-pulse animation-delay-2000">
+        </div>
+        <div class="absolute top-1/3 right-20 w-6 h-6 bg-purple-500/20 rotate-12 animate-spin"
+          style="animation-duration: 8s;"></div>
+        <div
+          class="absolute bottom-20 left-20 w-10 h-10 bg-cyan-500/20 rounded-lg rotate-45 animate-bounce animation-delay-3000">
+        </div>
       </div>
-      
+
       <div id="main-content" class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 relative z-10">
         <div class="grid lg:grid-cols-2 gap-6 md:gap-12 lg:gap-16 items-center">
           <!-- Left Content -->
           <div class="text-center lg:text-left">
             <!-- Badge -->
-            <div class="inline-flex items-center px-3 py-1.5 mb-6 text-xs sm:text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-full">
+            <div
+              class="inline-flex items-center px-3 py-1.5 mb-6 text-xs sm:text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-full">
               <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                <path fill-rule="evenodd"
+                  d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clip-rule="evenodd" />
               </svg>
               {{ t('hero.badge') }}
             </div>
-            
-            <!-- Main heading with improved typography -->
-            <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight mb-4 md:mb-6 leading-[1.15]">
+
+            <!-- Main heading with improved typography and mobile-responsive sizing -->
+            <h1
+              class="text-4xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-7xl font-extrabold tracking-tight mb-4 md:mb-6 leading-[1.15] animate-slide-right">
               <span class="block">
                 <span class="gradient-text inline-block animate-fade-in-up">{{ t('hero.title').split(' ')[0] }}</span>
-                <span class="text-gray-800 inline-block animate-fade-in-up animation-delay-200 ml-1 sm:ml-2">{{ t('hero.title').split(' ')[1] }}</span>
+                <span
+                  class="text-gray-800 dark:text-gray-200 inline-block animate-fade-in-up animation-delay-200 ml-1 sm:ml-2">{{
+                    t('hero.title').split(' ')[1] }}</span>
               </span>
-              <span class="block text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl text-gray-600 mt-1 md:mt-2 font-bold animate-fade-in-up animation-delay-400">{{ t('hero.subtitle') }}</span>
+              <span
+                class="block text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl text-gray-600 dark:text-gray-400 mt-1 md:mt-2 font-bold animate-fade-in-up animation-delay-400">{{
+                  t('hero.subtitle') }}</span>
             </h1>
-            
+
             <!-- Enhanced subtitle with better typography -->
             <div class="space-y-2 sm:space-y-3 mb-6 md:mb-8 animate-fade-in-up animation-delay-600">
-              <p class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-700 font-medium leading-relaxed max-w-xl lg:max-w-none">
-                <span v-html="t('hero.description', { region: `<span class='font-bold text-blue-600'>${t('common.centralSulawesi')}</span>` })"></span>
-                <span class="block mt-1" v-html="t('hero.descriptionSub', { context: `<span class='font-semibold text-indigo-600'>${t('common.nationalContext')}</span>` })"></span>
+              <p
+                class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-700 dark:text-gray-300 font-medium leading-relaxed max-w-xl lg:max-w-none">
+                <span
+                  v-html="t('hero.description', { region: `<span class='font-bold text-blue-600'>${t('common.centralSulawesi')}</span>` })"></span>
+                <span class="block mt-1"
+                  v-html="t('hero.descriptionSub', { context: `<span class='font-semibold text-indigo-600'>${t('common.nationalContext')}</span>` })"></span>
               </p>
-              <p class="text-xs sm:text-sm md:text-base lg:text-lg text-gray-600 leading-relaxed">
+              <p class="text-xs sm:text-sm md:text-base lg:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
                 {{ t('hero.tagline') }}
               </p>
             </div>
-            
-            <!-- CTA Buttons -->
-            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 justify-center lg:justify-start animate-fade-in-up animation-delay-800">
-              <router-link to="/docs" class="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-sm sm:text-base">
+
+            <!-- Interactive CTA Buttons with enhanced animations -->
+            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 justify-center lg:justify-start animate-on-scroll">
+              <router-link to="/docs"
+                class="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-500 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 hover:scale-105 text-sm sm:text-base hover:rotate-1">
                 <span class="flex items-center justify-center">
                   {{ t('hero.getStarted') }}
-                  <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                  <svg class="w-4 h-4 ml-2 group-hover:translate-x-2 group-hover:scale-110 transition-all duration-300"
+                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6">
+                    </path>
                   </svg>
                 </span>
               </router-link>
-              <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="group border-2 border-gray-300 hover:border-blue-600 text-gray-700 hover:text-blue-600 px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300 backdrop-blur-sm bg-white/70 hover:bg-white/90 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-sm sm:text-base">
+              <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank"
+                class="group border-2 border-gray-300 dark:border-gray-600 hover:border-blue-600 dark:hover:border-blue-400 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-500 backdrop-blur-sm bg-white/70 dark:bg-gray-800/70 hover:bg-white/90 dark:hover:bg-gray-800/90 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 hover:scale-105 text-sm sm:text-base hover:-rotate-1">
                 <span class="flex items-center justify-center">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                  <svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-all duration-300" fill="none"
+                    stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                   </svg>
                   {{ t('hero.apiDocs') }}
                 </span>
@@ -97,30 +159,29 @@
             <div class="mt-8 space-y-4 animate-fade-in-up animation-delay-900">
               <div class="flex items-center justify-center lg:justify-start space-x-4">
                 <div class="flex items-center space-x-2">
-                  <img src="/pico-app-logo.webp" alt="PICO App" class="w-6 h-6">
-                  <span class="text-gray-600 text-sm">
+                  <img src="/pico-app-logo.webp" alt="PICO App" class="w-6 h-6 logo-dark-mode">
+                  <span class="text-gray-600 dark:text-gray-400 text-sm">
                     {{ locale === 'en' ? 'Also available:' : 'Juga tersedia:' }}
                   </span>
                 </div>
-                <a href="https://banuacoders.com/app/pico/" target="_blank" class="group inline-flex items-center space-x-2 text-blue-600 hover:text-blue-700 font-medium text-sm transition-colors duration-200">
+                <a href="https://banuacoders.com/app/pico/" target="_blank"
+                  class="group inline-flex items-center space-x-2 text-blue-600 hover:text-blue-700 font-medium text-sm transition-colors duration-200">
                   <span>{{ t('hero.downloadApp') }}</span>
-                  <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                  <svg class="w-3 h-3 group-hover:translate-x-1 transition-transform duration-200" fill="none"
+                    stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                   </svg>
                 </a>
               </div>
-              
+
               <!-- API Status indicator -->
-              <div class="inline-flex items-center px-4 py-2 bg-green-50 border border-green-200 rounded-full text-green-700">
-                <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
-                <span class="text-sm font-medium">
+              <div
+                class="inline-flex items-center px-2 py-1 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-full text-green-700 dark:text-green-400 text-xs">
+                <div class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse"></div>
+                <span class="font-medium">
                   {{ t('hero.apiStatus') }}
                 </span>
-                <a href="https://pico-api.banuacoder.com/api/v1/health" target="_blank" class="ml-2 text-green-600 hover:text-green-700">
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                  </svg>
-                </a>
               </div>
             </div>
           </div>
@@ -128,198 +189,371 @@
           <!-- Right Content - API Demo -->
           <div class="order-first lg:order-last animate-fade-in-up animation-delay-1200 mt-8 lg:mt-0">
             <div class="relative">
-              <!-- Floating decoration elements -->
-              <div class="absolute -top-3 -right-3 w-6 h-6 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-20 animate-pulse"></div>
-              <div class="absolute -bottom-3 -left-3 w-4 h-4 bg-gradient-to-r from-green-500 to-blue-500 rounded-lg rotate-45 opacity-20 animate-bounce"></div>
-              
-              <div class="bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-700/50 backdrop-blur-sm relative">
-                <!-- Subtle gradient overlay -->
-                <div class="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-purple-500/5 pointer-events-none"></div>
-                
-                <!-- Terminal Header -->
-                <div class="bg-gray-800/90 backdrop-blur-sm px-2 sm:px-4 py-2 sm:py-3 flex items-center space-x-2 border-b border-gray-700/50">
-                  <div class="flex space-x-1">
-                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer"></div>
-                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer"></div>
-                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer"></div>
-                  </div>
-                  <div class="flex-1 text-center">
-                    <span class="text-gray-300 text-[10px] sm:text-xs font-medium">PICO API Terminal</span>
-                  </div>
-                  <div class="flex items-center space-x-1 text-[10px] sm:text-xs text-gray-500">
-                    <div class="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-green-500 rounded-full animate-pulse"></div>
-                    <span>Live</span>
+              <!-- Interactive floating decoration elements - COVID virus-inspired shapes -->
+              <!-- Virus-like shape 1 - Interactive with complex floating animation -->
+              <div class="absolute -top-4 -right-4 opacity-15 animate-virus-float virus-interactive cursor-pointer">
+                <svg width="32" height="32" viewBox="0 0 32 32"
+                  class="text-blue-500 hover:text-blue-400 transition-colors duration-300">
+                  <defs>
+                    <linearGradient id="virus1" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
+                    </linearGradient>
+                  </defs>
+                  <!-- Central core -->
+                  <circle cx="16" cy="16" r="8" fill="url(#virus1)" />
+                  <!-- Spike proteins -->
+                  <circle cx="8" cy="8" r="2.5" fill="url(#virus1)" />
+                  <circle cx="24" cy="8" r="2.5" fill="url(#virus1)" />
+                  <circle cx="8" cy="24" r="2.5" fill="url(#virus1)" />
+                  <circle cx="24" cy="24" r="2.5" fill="url(#virus1)" />
+                  <circle cx="16" cy="4" r="2" fill="url(#virus1)" />
+                  <circle cx="28" cy="16" r="2" fill="url(#virus1)" />
+                  <circle cx="16" cy="28" r="2" fill="url(#virus1)" />
+                  <circle cx="4" cy="16" r="2" fill="url(#virus1)" />
+                </svg>
+              </div>
+
+              <!-- Virus-like shape 2 - Interactive molecular drift animation -->
+              <div
+                class="absolute -bottom-4 -left-4 opacity-12 animate-molecular-drift particle-interactive cursor-pointer"
+                style="animation-delay: 1.5s;">
+                <svg width="24" height="24" viewBox="0 0 24 24"
+                  class="text-green-500 hover:text-green-400 transition-colors duration-300">
+                  <defs>
+                    <linearGradient id="virus2" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:1" />
+                    </linearGradient>
+                  </defs>
+                  <!-- Central core -->
+                  <circle cx="12" cy="12" r="6" fill="url(#virus2)" />
+                  <!-- Simplified spike proteins -->
+                  <circle cx="6" cy="6" r="1.8" fill="url(#virus2)" />
+                  <circle cx="18" cy="6" r="1.8" fill="url(#virus2)" />
+                  <circle cx="6" cy="18" r="1.8" fill="url(#virus2)" />
+                  <circle cx="18" cy="18" r="1.8" fill="url(#virus2)" />
+                  <circle cx="12" cy="2" r="1.5" fill="url(#virus2)" />
+                  <circle cx="22" cy="12" r="1.5" fill="url(#virus2)" />
+                  <circle cx="12" cy="22" r="1.5" fill="url(#virus2)" />
+                  <circle cx="2" cy="12" r="1.5" fill="url(#virus2)" />
+                </svg>
+              </div>
+
+              <!-- Abstract molecular structure - Interactive organic pulse -->
+              <div class="absolute top-1/4 -right-8 animate-organic-pulse virus-interactive cursor-pointer"
+                style="animation-delay: 2.5s;">
+                <svg width="20" height="20" viewBox="0 0 20 20"
+                  class="text-purple-500 hover:text-purple-400 transition-colors duration-300">
+                  <defs>
+                    <linearGradient id="molecule" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#EC4899;stop-opacity:1" />
+                    </linearGradient>
+                  </defs>
+                  <!-- Connected nodes representing molecular structure -->
+                  <circle cx="10" cy="10" r="3" fill="url(#molecule)" />
+                  <circle cx="4" cy="4" r="2" fill="url(#molecule)" />
+                  <circle cx="16" cy="4" r="2" fill="url(#molecule)" />
+                  <circle cx="4" cy="16" r="2" fill="url(#molecule)" />
+                  <circle cx="16" cy="16" r="2" fill="url(#molecule)" />
+                  <!-- Connection lines -->
+                  <line x1="10" y1="10" x2="4" y2="4" stroke="url(#molecule)" stroke-width="1" opacity="0.6" />
+                  <line x1="10" y1="10" x2="16" y2="4" stroke="url(#molecule)" stroke-width="1" opacity="0.6" />
+                  <line x1="10" y1="10" x2="4" y2="16" stroke="url(#molecule)" stroke-width="1" opacity="0.6" />
+                  <line x1="10" y1="10" x2="16" y2="16" stroke="url(#molecule)" stroke-width="1" opacity="0.6" />
+                </svg>
+              </div>
+
+              <!-- Interactive floating virus particles -->
+              <div
+                class="absolute top-1/2 -left-6 opacity-8 animate-spiral-rotation particle-interactive cursor-pointer"
+                style="animation-delay: 3s;">
+                <svg width="16" height="16" viewBox="0 0 16 16"
+                  class="text-indigo-400 hover:text-indigo-300 transition-colors duration-300">
+                  <defs>
+                    <linearGradient id="particle1" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:1" />
+                    </linearGradient>
+                  </defs>
+                  <circle cx="8" cy="8" r="4" fill="url(#particle1)" />
+                  <circle cx="4" cy="4" r="1.2" fill="url(#particle1)" />
+                  <circle cx="12" cy="4" r="1.2" fill="url(#particle1)" />
+                  <circle cx="4" cy="12" r="1.2" fill="url(#particle1)" />
+                  <circle cx="12" cy="12" r="1.2" fill="url(#particle1)" />
+                </svg>
+              </div>
+
+              <div class="absolute bottom-1/3 -right-12 opacity-6 animate-virus-float virus-interactive cursor-pointer"
+                style="animation-delay: 4s; animation-duration: 8s;">
+                <svg width="14" height="14" viewBox="0 0 14 14"
+                  class="text-cyan-400 hover:text-cyan-300 transition-colors duration-300">
+                  <defs>
+                    <linearGradient id="particle2" x1="0%" y1="0%" x2="100%" y2="100%">
+                      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
+                      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
+                    </linearGradient>
+                  </defs>
+                  <circle cx="7" cy="7" r="3.5" fill="url(#particle2)" />
+                  <circle cx="7" cy="2" r="1" fill="url(#particle2)" />
+                  <circle cx="12" cy="7" r="1" fill="url(#particle2)" />
+                  <circle cx="7" cy="12" r="1" fill="url(#particle2)" />
+                  <circle cx="2" cy="7" r="1" fill="url(#particle2)" />
+                </svg>
+              </div>
+
+              <div class="relative">
+                <div class="relative bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-700/50">
+                  <!-- Subtle gradient overlay -->
+                  <div
+                    class="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-purple-500/5 pointer-events-none">
                   </div>
-                </div>
-              
-                <!-- Code Content -->
-                <div class="p-1 sm:p-2 md:p-4 font-mono text-[8px] sm:text-xs relative bg-gray-900/50 overflow-x-auto">
-                <!-- Request -->
-                <div class="mb-2 sm:mb-4">
-                  <div class="text-green-400 mb-1 sm:mb-2 typing-animation overflow-x-auto">
-                    <div class="whitespace-nowrap">
-                      <span class="text-gray-500">$</span> curl https://pico-api.banuacoder.com/api/v1/national/latest
+
+                  <!-- Terminal Header -->
+                  <div
+                    class="bg-gray-800/90 px-2 sm:px-4 py-2 sm:py-3 flex items-center space-x-2 border-b border-gray-700/50">
+                    <div class="flex space-x-1">
+                      <div
+                        class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer">
+                      </div>
+                      <div
+                        class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer">
+                      </div>
+                      <div
+                        class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer">
+                      </div>
+                    </div>
+                    <div class="flex-1 text-center">
+                      <span class="text-gray-300 text-[10px] sm:text-xs font-medium">PICO API Terminal</span>
+                    </div>
+                    <div class="flex items-center px-2 py-1 bg-green-500/20 border border-green-500/30 rounded-full">
+                      <div class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5 animate-pulse"></div>
+                      <span class="text-xs text-green-400 font-medium">Live</span>
                     </div>
                   </div>
-                </div>
-                
-                <!-- Response -->
-                <div class="text-gray-300 leading-none sm:leading-tight md:leading-relaxed response-animation opacity-0 overflow-x-auto">
-                  <div class="text-blue-400">{</div>
-                  <div class="pl-1 sm:pl-2 md:pl-4">
-                    <span class="text-yellow-400">"status"</span>: <span class="text-green-300">"success"</span>,
-                  </div>
-                  <div class="pl-1 sm:pl-2 md:pl-4">
-                    <span class="text-yellow-400">"data"</span>: <div class="text-blue-400 inline">{</div>
-                  </div>
-                  <div class="pl-2 sm:pl-4 md:pl-8">
-                    <span class="text-yellow-400">"day"</span>: <span class="text-orange-400">1247</span>,
-                  </div>
-                  <div class="pl-2 sm:pl-4 md:pl-8">
-                    <span class="text-yellow-400">"date"</span>: <span class="text-green-300">"2024-09-07T00:00:00Z"</span>,
-                  </div>
-                  <div class="pl-2 sm:pl-4 md:pl-8">
-                    <span class="text-yellow-400">"daily"</span>: <div class="text-blue-400 inline">{</div>
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">127</span>,
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">98</span>,
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">2</span>
-                  </div>
-                  <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">},</div>
-                  <div class="pl-2 sm:pl-4 md:pl-8">
-                    <span class="text-yellow-400">"cumulative"</span>: <div class="text-blue-400 inline">{</div>
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">6754298</span>,
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">6589567</span>,
-                  </div>
-                  <div class="pl-3 sm:pl-6 md:pl-12">
-                    <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">161031</span>
+
+                  <!-- Code Content -->
+                  <div
+                    class="p-1 sm:p-2 md:p-4 font-mono text-[8px] sm:text-xs relative bg-gray-900/50 overflow-x-auto">
+                    <!-- Request -->
+                    <div class="mb-2 sm:mb-4">
+                      <div class="text-green-400 mb-1 sm:mb-2 typing-animation overflow-x-auto">
+                        <div class="whitespace-nowrap">
+                          <span class="text-gray-500">$</span> curl
+                          https://pico-api.banuacoder.com/api/v1/national/latest
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Response -->
+                    <div
+                      class="text-gray-300 leading-none sm:leading-tight md:leading-relaxed response-animation opacity-0 overflow-x-auto">
+                      <div class="text-blue-400">{</div>
+                      <div class="pl-1 sm:pl-2 md:pl-4">
+                        <span class="text-yellow-400">"status"</span>: <span class="text-green-300">"success"</span>,
+                      </div>
+                      <div class="pl-1 sm:pl-2 md:pl-4">
+                        <span class="text-yellow-400">"data"</span>: <div class="text-blue-400 inline">{</div>
+                      </div>
+                      <div class="pl-2 sm:pl-4 md:pl-8">
+                        <span class="text-yellow-400">"day"</span>: <span class="text-orange-400">1247</span>,
+                      </div>
+                      <div class="pl-2 sm:pl-4 md:pl-8">
+                        <span class="text-yellow-400">"date"</span>: <span
+                          class="text-green-300">"2024-09-07T00:00:00Z"</span>,
+                      </div>
+                      <div class="pl-2 sm:pl-4 md:pl-8">
+                        <span class="text-yellow-400">"daily"</span>: <div class="text-blue-400 inline">{</div>
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">127</span>,
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">98</span>,
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">2</span>
+                      </div>
+                      <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">},</div>
+                      <div class="pl-2 sm:pl-4 md:pl-8">
+                        <span class="text-yellow-400">"cumulative"</span>: <div class="text-blue-400 inline">{</div>
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">6754298</span>,
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">6589567</span>,
+                      </div>
+                      <div class="pl-3 sm:pl-6 md:pl-12">
+                        <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">161031</span>
+                      </div>
+                      <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">}</div>
+                      <div class="pl-1 sm:pl-2 md:pl-4 text-blue-400">}</div>
+                      <div class="text-blue-400">}</div>
+
+                      <!-- Typing cursor -->
+                      <div class="inline-block w-2 h-4 bg-green-400 ml-1 animate-pulse typing-cursor opacity-0"></div>
+                    </div>
                   </div>
-                  <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">}</div>
-                  <div class="pl-1 sm:pl-2 md:pl-4 text-blue-400">}</div>
-                  <div class="text-blue-400">}</div>
-                  
-                  <!-- Typing cursor -->
-                  <div class="inline-block w-2 h-4 bg-green-400 ml-1 animate-pulse typing-cursor opacity-0"></div>
-                </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        
+
         <!-- Data sources section integrated in hero -->
         <DataSources />
       </div>
     </div>
 
     <!-- Features Section -->
-    <div class="py-16 md:py-24 bg-gradient-to-b from-white to-gray-50">
+    <div class="py-12 sm:py-16 md:py-24 bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-12 md:mb-20">
-          <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4 md:mb-6">
+        <div class="text-center mb-8 sm:mb-12 md:mb-20">
+          <h2
+            class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4 md:mb-6">
             {{ t('features.title') }}
           </h2>
-          <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto">
+          <p class="text-base sm:text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto px-4">
             {{ t('features.subtitle') }}
           </p>
         </div>
-        
-        <!-- Bento Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-4 md:gap-6 max-w-6xl mx-auto">
-          <!-- Large Feature Card -->
-          <div class="sm:col-span-2 md:col-span-2 lg:col-span-3 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-6 md:p-8 rounded-3xl border border-blue-100/50 hover:border-blue-200/70 transition-all duration-300 hover:shadow-lg group">
-            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
-              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+
+        <!-- Interactive Bento Grid with scroll animations -->
+        <div
+          class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-4 md:gap-6 max-w-6xl mx-auto animate-stagger">
+          <!-- Large Feature Card with enhanced interactions -->
+          <div
+            class="sm:col-span-2 md:col-span-2 lg:col-span-3 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4 sm:p-6 md:p-8 rounded-2xl sm:rounded-3xl border border-blue-100/50 hover:border-blue-200/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-blue-900/20 dark:via-indigo-900/20 dark:to-purple-900/20 dark:border-blue-800/50 dark:hover:border-blue-700/70">
+            <div
+              class="w-12 sm:w-14 md:w-16 h-12 sm:h-14 md:h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-6 sm:w-7 md:w-8 h-6 sm:h-7 md:h-8 text-white" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
+                </path>
               </svg>
             </div>
-            <h3 class="text-2xl font-bold text-gray-900 mb-4">
+            <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 md:mb-4">
               {{ t('features.realTimeData.title') }}
             </h3>
-            <p class="text-gray-600 text-lg leading-relaxed">
+            <p
+              class="text-sm sm:text-base md:text-lg text-gray-600 dark:text-gray-400 leading-snug sm:leading-normal md:leading-relaxed">
               {{ t('features.realTimeData.description') }}
             </p>
-            <div class="mt-6 flex items-center text-sm text-blue-600 font-medium">
+            <div class="mt-4 sm:mt-6 flex items-center text-xs sm:text-sm text-blue-600 font-medium">
               <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
               {{ t('features.realTimeData.badge') }}
             </div>
           </div>
 
           <!-- Performance Card -->
-          <div class="sm:col-span-2 md:col-span-2 lg:col-span-3 bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 p-6 md:p-8 rounded-3xl border border-green-100/50 hover:border-green-200/70 transition-all duration-300 hover:shadow-lg group">
-            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
-              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+          <div
+            class="sm:col-span-2 md:col-span-2 lg:col-span-3 bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 p-4 sm:p-6 md:p-8 rounded-2xl sm:rounded-3xl border border-green-100/50 hover:border-green-200/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-green-900/20 dark:via-emerald-900/20 dark:to-teal-900/20 dark:border-green-800/50 dark:hover:border-green-700/70">
+            <div
+              class="w-12 sm:w-14 md:w-16 h-12 sm:h-14 md:h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl sm:rounded-2xl flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-6 sm:w-7 md:w-8 h-6 sm:h-7 md:h-8 text-white" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z">
+                </path>
               </svg>
             </div>
-            <h3 class="text-2xl font-bold text-gray-900 mb-4">High Performance</h3>
-            <p class="text-gray-600 text-lg leading-relaxed">Built with Go for lightning-fast API responses with intelligent hybrid pagination system</p>
-            <div class="mt-6 text-sm text-green-600 font-medium">
-              <span class="bg-green-100 px-3 py-1 rounded-full">< 100ms avg response</span>
+            <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 sm:mb-3 md:mb-4">
+              High Performance</h3>
+            <p
+              class="text-sm sm:text-base md:text-lg text-gray-600 dark:text-gray-400 leading-snug sm:leading-normal md:leading-relaxed">
+              Built with Go for lightning-fast API responses with intelligent hybrid pagination system</p>
+            <div class="mt-4 sm:mt-6 text-xs sm:text-sm text-green-600 font-medium">
+              <span class="bg-green-100 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full">
+                < 100ms avg response</span>
             </div>
           </div>
 
           <!-- Security Card -->
-          <div class="sm:col-span-1 md:col-span-2 lg:col-span-2 bg-gradient-to-br from-purple-50 via-violet-50 to-indigo-50 p-4 md:p-6 rounded-3xl border border-purple-100/50 hover:border-purple-200/70 transition-all duration-300 hover:shadow-lg group">
-            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
-              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+          <div
+            class="sm:col-span-1 md:col-span-2 lg:col-span-2 bg-gradient-to-br from-purple-50 via-violet-50 to-indigo-50 p-3 sm:p-4 md:p-6 rounded-2xl sm:rounded-3xl border border-purple-100/50 hover:border-purple-200/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-purple-900/20 dark:via-violet-900/20 dark:to-indigo-900/20 dark:border-purple-800/50 dark:hover:border-purple-700/70">
+            <div
+              class="w-10 sm:w-11 md:w-12 h-10 sm:h-11 md:h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 sm:w-5.5 md:w-6 h-5 sm:h-5.5 md:h-6 text-white" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
+                </path>
               </svg>
             </div>
-            <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-3">Secure & Reliable</h3>
-            <p class="text-sm md:text-base text-gray-600">Robust error handling and secure data access</p>
+            <h3
+              class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100 mb-1.5 sm:mb-2 md:mb-3">
+              Secure & Reliable</h3>
+            <p class="text-xs sm:text-sm md:text-base text-gray-600 dark:text-gray-400">Robust error handling and secure
+              data access</p>
           </div>
 
           <!-- Documentation Card -->
-          <div class="sm:col-span-1 md:col-span-2 lg:col-span-2 bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 p-4 md:p-6 rounded-3xl border border-yellow-100/50 hover:border-yellow-200/70 transition-all duration-300 hover:shadow-lg group">
-            <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-amber-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
-              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+          <div
+            class="sm:col-span-1 md:col-span-2 lg:col-span-2 bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 p-3 sm:p-4 md:p-6 rounded-2xl sm:rounded-3xl border border-yellow-100/50 hover:border-yellow-200/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-yellow-900/20 dark:via-amber-900/20 dark:to-orange-900/20 dark:border-yellow-800/50 dark:hover:border-yellow-700/70">
+            <div
+              class="w-10 sm:w-11 md:w-12 h-10 sm:h-11 md:h-12 bg-gradient-to-br from-yellow-500 to-amber-600 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 sm:w-5.5 md:w-6 h-5 sm:h-5.5 md:h-6 text-white" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                </path>
               </svg>
             </div>
-            <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-3">Rich Documentation</h3>
-            <p class="text-sm md:text-base text-gray-600">Interactive Swagger UI with examples</p>
+            <h3
+              class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100 mb-1.5 sm:mb-2 md:mb-3">
+              Rich Documentation</h3>
+            <p class="text-xs sm:text-sm md:text-base text-gray-600 dark:text-gray-400">Interactive Swagger UI with
+              examples</p>
           </div>
 
           <!-- Regional Focus Card -->
-          <div class="sm:col-span-2 md:col-span-4 lg:col-span-2 bg-gradient-to-br from-red-50 via-rose-50 to-pink-50 p-4 md:p-6 rounded-3xl border border-red-100/50 hover:border-red-200/70 transition-all duration-300 hover:shadow-lg group">
-            <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-rose-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
-              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+          <div
+            class="sm:col-span-2 md:col-span-4 lg:col-span-2 bg-gradient-to-br from-red-50 via-rose-50 to-pink-50 p-3 sm:p-4 md:p-6 rounded-2xl sm:rounded-3xl border border-red-100/50 hover:border-red-200/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-red-900/20 dark:via-rose-900/20 dark:to-pink-900/20 dark:border-red-800/50 dark:hover:border-red-700/70">
+            <div
+              class="w-10 sm:w-11 md:w-12 h-10 sm:h-11 md:h-12 bg-gradient-to-br from-red-500 to-rose-600 rounded-lg sm:rounded-xl flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
+              <svg class="w-5 sm:w-5.5 md:w-6 h-5 sm:h-5.5 md:h-6 text-white" fill="none" stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
               </svg>
             </div>
-            <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2 md:mb-3">Regional Focus</h3>
-            <p class="text-sm md:text-base text-gray-600">Specialized for Central Sulawesi data</p>
+            <h3
+              class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100 mb-1.5 sm:mb-2 md:mb-3">
+              Regional Focus</h3>
+            <p class="text-xs sm:text-sm md:text-base text-gray-600 dark:text-gray-400">Specialized for Central Sulawesi
+              data</p>
           </div>
 
           <!-- Developer Friendly - Full width -->
-          <div class="sm:col-span-2 md:col-span-4 lg:col-span-6 bg-gradient-to-r from-gray-50 via-slate-50 to-gray-50 p-6 md:p-8 rounded-3xl border border-gray-200/50 hover:border-gray-300/70 transition-all duration-300 hover:shadow-lg group">
+          <div
+            class="sm:col-span-2 md:col-span-4 lg:col-span-6 bg-gradient-to-r from-gray-50 via-slate-50 to-gray-50 p-4 sm:p-6 md:p-8 rounded-2xl sm:rounded-3xl border border-gray-200/50 hover:border-gray-300/70 transition-all duration-500 feature-card-hover group cursor-pointer animate-on-scroll stagger-item dark:from-gray-800/50 dark:via-slate-800/50 dark:to-gray-800/50 dark:border-gray-700/50 dark:hover:border-gray-600/70">
             <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between">
-              <div class="flex items-center mb-4 md:mb-0">
-                <div class="w-14 h-14 bg-gradient-to-br from-gray-700 to-slate-800 rounded-xl flex items-center justify-center mr-6 group-hover:scale-110 transition-transform duration-300">
-                  <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+              <div class="flex flex-col sm:flex-row items-start sm:items-center mb-4 md:mb-0">
+                <div
+                  class="w-12 sm:w-14 h-12 sm:h-14 bg-gradient-to-br from-gray-700 to-slate-800 rounded-xl flex items-center justify-center mb-3 sm:mb-0 sm:mr-4 md:mr-6 group-hover:scale-110 transition-transform duration-300">
+                  <svg class="w-6 sm:w-7 h-6 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                   </svg>
                 </div>
                 <div>
-                  <h3 class="text-2xl font-bold text-gray-900 mb-2">Developer Friendly</h3>
-                  <p class="text-gray-600 text-lg">RESTful API with JSON responses, CORS support, and flexible query parameters</p>
+                  <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1 sm:mb-2">
+                    Developer Friendly</h3>
+                  <p class="text-sm sm:text-base md:text-lg text-gray-600 dark:text-gray-400">RESTful API with JSON
+                    responses, CORS support, and flexible query parameters</p>
                 </div>
               </div>
-              <div class="flex space-x-3">
-                <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">REST</span>
-                <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">JSON</span>
-                <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">CORS</span>
+              <div class="flex flex-wrap sm:flex-nowrap gap-2 sm:space-x-3">
+                <span
+                  class="bg-blue-100 text-blue-700 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium">REST</span>
+                <span
+                  class="bg-green-100 text-green-700 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium">JSON</span>
+                <span
+                  class="bg-purple-100 text-purple-700 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium">CORS</span>
               </div>
             </div>
           </div>
@@ -328,45 +562,165 @@
     </div>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <div>
-            <div class="flex items-center space-x-3 mb-4">
-              <img src="/pico-api-logo.webp" alt="PICO API Logo" class="h-8 w-auto">
-              <h3 class="text-2xl font-bold">{{ t('hero.title') }} API</h3>
+    <footer class="relative bg-gradient-to-b from-gray-900 to-black dark:from-gray-950 dark:to-black overflow-hidden">
+      <!-- Background decoration -->
+      <div class="absolute inset-0 overflow-hidden">
+        <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12">
+          <!-- Brand Section -->
+          <div class="lg:col-span-2">
+            <div class="flex items-center space-x-3 mb-6">
+              <div class="p-2 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl">
+                <img src="/pico-api-logo.webp" alt="PICO API Logo" class="h-8 w-auto brightness-0 invert">
+              </div>
+              <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                {{ t('hero.title') }} API
+              </h3>
             </div>
-            <p class="text-gray-400 mb-4">
+            <p class="text-gray-400 mb-6 max-w-md leading-relaxed">
               {{ t('footer.description') }}
             </p>
-            <p class="text-gray-400 text-sm">
-              <span v-html="t('footer.createdBy', { author: `<a href='https://github.com/ryanaidilp' target='_blank' class='text-blue-400 hover:text-blue-300'>${t('common.author')}</a>` })"></span><br/>
-              <a href="https://banuacoder.com" target="_blank" class="text-blue-400 hover:text-blue-300">Banua Coder</a>
-            </p>
+
+            <!-- Social Links -->
+            <div class="flex items-center space-x-4 mb-6">
+              <a href="https://github.com/banua-coder/pico-api-go" target="_blank"
+                class="p-2 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg transition-all duration-200 group">
+                <svg class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="currentColor"
+                  viewBox="0 0 24 24">
+                  <path
+                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+              </a>
+              <a href="https://github.com/ryanaidilp" target="_blank"
+                class="p-2 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg transition-all duration-200 group">
+                <svg class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none"
+                  stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
+                </svg>
+              </a>
+              <a href="https://banuacoder.com" target="_blank"
+                class="p-2 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg transition-all duration-200 group">
+                <svg class="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none"
+                  stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9">
+                  </path>
+                </svg>
+              </a>
+            </div>
+
+            <!-- Creator Info -->
+            <div class="text-sm text-gray-500">
+              <span
+                v-html="t('footer.createdBy', { author: `<a href='https://github.com/ryanaidilp' target='_blank' class='text-blue-400 hover:text-blue-300 transition-colors'>${t('common.author')}</a>` })"></span>
+              <span class="mx-2">•</span>
+              <a href="https://banuacoder.com" target="_blank"
+                class="text-blue-400 hover:text-blue-300 transition-colors">Banua Coder</a>
+            </div>
           </div>
-          
+
+          <!-- Quick Links -->
           <div>
-            <h4 class="text-lg font-semibold mb-4">{{ t('footer.quickLinks') }}</h4>
-            <ul class="space-y-2">
-              <li><router-link to="/docs" class="text-gray-400 hover:text-white">{{ t('nav.documentation') }}</router-link></li>
-              <li><router-link to="/api" class="text-gray-400 hover:text-white">{{ t('nav.apiReference') }}</router-link></li>
-              <li><a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="text-gray-400 hover:text-white">Swagger UI</a></li>
-              <li><a href="https://banuacoders.com/app/pico/" target="_blank" class="text-gray-400 hover:text-white">{{ t('footer.picoApp') }}</a></li>
-              <li><a href="https://github.com/banua-coder/pico-api-go" target="_blank" class="text-gray-400 hover:text-white">API Source Code</a></li>
-              <li><a href="https://github.com/ryanaidilp" target="_blank" class="text-gray-400 hover:text-white">Developer GitHub</a></li>
+            <h4 class="text-white font-semibold mb-4 flex items-center">
+              <span class="w-8 h-[2px] bg-gradient-to-r from-blue-500 to-purple-500 mr-3"></span>
+              {{ t('footer.quickLinks') }}
+            </h4>
+            <ul class="space-y-3">
+              <li>
+                <router-link to="/docs"
+                  class="text-gray-400 hover:text-white transition-colors duration-200 flex items-center group">
+                  <span class="w-1 h-1 bg-gray-600 group-hover:bg-blue-400 rounded-full mr-2 transition-colors"></span>
+                  {{ t('nav.documentation') }}
+                </router-link>
+              </li>
+              <li>
+                <router-link to="/api"
+                  class="text-gray-400 hover:text-white transition-colors duration-200 flex items-center group">
+                  <span class="w-1 h-1 bg-gray-600 group-hover:bg-blue-400 rounded-full mr-2 transition-colors"></span>
+                  {{ t('nav.apiReference') }}
+                </router-link>
+              </li>
+              <li>
+                <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank"
+                  class="text-gray-400 hover:text-white transition-colors duration-200 flex items-center group">
+                  <span class="w-1 h-1 bg-gray-600 group-hover:bg-blue-400 rounded-full mr-2 transition-colors"></span>
+                  Swagger UI
+                  <svg class="w-3 h-3 ml-1 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                  </svg>
+                </a>
+              </li>
+              <li>
+                <a href="https://banuacoders.com/app/pico/" target="_blank"
+                  class="text-gray-400 hover:text-white transition-colors duration-200 flex items-center group">
+                  <span class="w-1 h-1 bg-gray-600 group-hover:bg-blue-400 rounded-full mr-2 transition-colors"></span>
+                  {{ t('footer.picoApp') }}
+                  <svg class="w-3 h-3 ml-1 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                  </svg>
+                </a>
+              </li>
             </ul>
           </div>
 
+          <!-- API Info -->
           <div>
-            <h4 class="text-lg font-semibold mb-4">{{ t('footer.apiBaseUrl') }}</h4>
-            <div class="bg-gray-800 rounded-lg p-4 font-mono text-sm text-green-400">
-              https://pico-api.banuacoder.com/api/v1
+            <h4 class="text-white font-semibold mb-4 flex items-center">
+              <span class="w-8 h-[2px] bg-gradient-to-r from-purple-500 to-pink-500 mr-3"></span>
+              {{ t('footer.apiBaseUrl') }}
+            </h4>
+            <div class="api-card-container">
+              <!-- Neon walking light effect on hover -->
+              <div
+                class="relative bg-white/5 dark:bg-gray-800/20 backdrop-filter backdrop-blur-[20px] backdrop-saturate-[180%] border border-white/20 dark:border-gray-700/30 rounded-xl p-4 hover:border-white/30 dark:hover:border-gray-600/40 hover:bg-white/10 dark:hover:bg-gray-800/30 transition-all duration-200">
+                <div class="flex items-center justify-between">
+                  <code
+                    class="text-xs lg:text-[10px] xl:text-xs font-mono text-transparent bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text whitespace-nowrap">
+                  pico-api.banuacoder.com/api/v1
+                </code>
+                  <button @click="copyApiUrl" class="p-1.5 hover:bg-gray-700/50 rounded-lg transition-colors group">
+                    <svg v-if="!apiUrlCopied" class="w-4 h-4 text-gray-400 group-hover:text-white" fill="none"
+                      stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                      </path>
+                    </svg>
+                    <svg v-else class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
+
           </div>
         </div>
-        
-        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-          <p>{{ t('footer.copyright') }}</p>
+
+        <!-- Bottom Bar -->
+        <div class="mt-12 pt-8 border-t border-gray-800/50">
+          <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
+            <p class="text-sm text-gray-500">
+              {{ t('footer.copyright') }}
+            </p>
+            <div class="flex items-center space-x-6 text-sm text-gray-500">
+              <a href="https://github.com/banua-coder/pico-api-go/blob/main/LICENSE" target="_blank"
+                class="hover:text-gray-300 transition-colors">
+                License
+              </a>
+              <a href="https://github.com/banua-coder/pico-api-go/issues" target="_blank"
+                class="hover:text-gray-300 transition-colors">
+                Report Issue
+              </a>
+              <span class="text-gray-600">v{{ version }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </footer>
@@ -374,9 +728,72 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Navigation from '@/components/Navigation.vue'
 import DataSources from '@/components/DataSources.vue'
+import { useScrollAnimation } from '@/composables/useScrollAnimation'
+import packageJson from '../../package.json'
 
 const { t, locale } = useI18n()
+const version = packageJson.version
+const { initScrollAnimations } = useScrollAnimation()
+
+const apiUrlCopied = ref(false)
+
+const copyApiUrl = async () => {
+  try {
+    await navigator.clipboard.writeText('https://pico-api.banuacoder.com/api/v1')
+    apiUrlCopied.value = true
+    setTimeout(() => {
+      apiUrlCopied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+onMounted(() => {
+  // Initialize scroll animations after component is mounted
+  initScrollAnimations()
+})
 </script>
+
+<style scoped>
+/* Liquid Glass Effect Enhancements */
+.feature-card-hover {
+  transition: all 0.3s ease;
+}
+
+.feature-card-hover:hover {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.dark .feature-card-hover:hover {
+  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Enhanced gradient overlays for liquid glass look */
+.bg-gradient-to-br {
+  position: relative;
+}
+
+.bg-gradient-to-br::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
+  pointer-events: none;
+}
+
+/* Subtle glass reflection on hover */
+@media (hover: hover) {
+  .feature-card-hover:hover::before {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
+  }
+}
+</style>