diff --git a/src/views/eat-clean/components/DayCard.vue b/src/views/eat-clean/components/DayCard.vue
new file mode 100644
index 00000000..f06bc893
--- /dev/null
+++ b/src/views/eat-clean/components/DayCard.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { DayPlan } from '../data/meals'
+
+defineProps<{
+  dayData: DayPlan
+}>()
+
+defineEmits<{
+  (e: 'refresh-day'): void
+  (e: 'refresh-meal', mealType: 'breakfast' | 'lunch' | 'dinner'): void
+  (e: 'view-recipe', mealId: string): void
+}>()
+</script>
+
+<template>
+  <div class="bg-bg-surface border border-border-default hover:border-accent-coral transition-all duration-300 p-6 group">
+    <div class="flex justify-between items-center mb-6">
+      <h3 class="text-xl font-display font-bold text-white tracking-tight">{{ dayData.day }}</h3>
+      <button 
+        @click="$emit('refresh-day')" 
+        class="opacity-0 group-hover:opacity-100 transition-opacity p-2 hover:bg-bg-elevated text-text-secondary hover:text-white"
+        title="Làm mới cả ngày"
+      >
+        <Icon icon="lucide:refresh-cw" class="size-4" />
+      </button>
+    </div>
+    
+    <div class="space-y-4">
+      <div 
+        v-for="type in (['breakfast', 'lunch', 'dinner'] as const)" 
+        :key="type" 
+        class="p-4 bg-bg-deep border border-border-default hover:border-accent-amber/50 transition-colors relative group/meal cursor-pointer"
+        @click="$emit('view-recipe', dayData[type].id)"
+      >
+        <div class="text-[10px] uppercase tracking-widest text-text-dim mb-1 font-display">
+          {{ type === 'breakfast' ? 'Sáng' : type === 'lunch' ? 'Trưa' : 'Tối' }}
+        </div>
+        <div class="text-sm font-medium text-text-primary pr-8 leading-snug">
+          {{ dayData[type].name }}
+        </div>
+        <div class="text-[10px] text-text-secondary mt-1 flex items-center gap-1">
+          <Icon icon="lucide:flame" class="size-3 text-accent-amber" />
+          {{ dayData[type].calories }} kcal
+        </div>
+        
+        <button 
+          @click.stop="$emit('refresh-meal', type)" 
+          class="absolute top-4 right-4 opacity-0 group-hover/meal:opacity-100 transition-opacity p-1.5 hover:bg-bg-elevated rounded text-text-dim hover:text-accent-amber"
+          title="Đổi món này"
+        >
+          <Icon icon="lucide:refresh-cw" class="size-3" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/eat-clean/components/RecipeDetail.vue b/src/views/eat-clean/components/RecipeDetail.vue
new file mode 100644
index 00000000..0758dd12
--- /dev/null
+++ b/src/views/eat-clean/components/RecipeDetail.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import { breakfasts, lunches, dinners } from '../data/meals'
+import { recipes } from '../data/recipes'
+
+const props = defineProps<{
+  id: string
+}>()
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+
+const allMeals = [...breakfasts, ...lunches, ...dinners]
+
+const meal = computed(() => {
+  return allMeals.find(m => m.id === props.id)
+})
+
+const recipe = computed(() => {
+  return recipes[props.id] || null
+})
+
+const defaultRecipe = {
+  ingredients: [
+    '100g protein (ức gà/cá/bò) sạch',
+    '150g rau xanh (súp lơ/xà lách/cải)',
+    '1/2 bát tinh bột chậm (cơm lứt/khoai lang)',
+    'Gia vị healthy (dầu oliu, tiêu, chanh)'
+  ],
+  steps: [
+    'Sơ chế sạch các nguyên liệu, rau củ cắt miếng vừa ăn.',
+    'Chế biến protein (áp chảo/luộc/hấp) với chút dầu oliu và gia vị nhạt.',
+    'Rau củ luộc chín hoặc trộn salad với nước sốt mè rang.',
+    'Bày biện ra đĩa thật đẹp và thưởng thức thôi! ✨'
+  ]
+}
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-bg-deep/80 backdrop-blur-md animate-fade-in">
+    <div class="bg-bg-surface border border-border-default w-full max-w-3xl max-h-[90vh] overflow-y-auto relative animate-fade-up">
+      <!-- Close Button -->
+      <button 
+        @click="$emit('close')"
+        class="absolute top-4 right-4 p-2 hover:bg-bg-elevated text-text-secondary hover:text-white transition-colors z-10"
+      >
+        <Icon icon="lucide:x" class="size-6" />
+      </button>
+
+      <div class="p-8 sm:p-12">
+        <div class="flex flex-wrap items-center gap-3 mb-6">
+          <span class="px-3 py-1 bg-accent-coral/10 text-accent-coral text-[10px] font-display uppercase tracking-widest border border-accent-coral/20">
+            Chi tiết Công thức
+          </span>
+          <span class="px-3 py-1 bg-accent-amber/10 text-accent-amber text-[10px] font-display uppercase tracking-widest border border-accent-amber/20 flex items-center gap-1">
+            <Icon icon="lucide:flame" class="size-3" /> {{ meal?.calories || 0 }} kcal
+          </span>
+        </div>
+        
+        <h2 class="text-3xl sm:text-4xl font-display font-bold text-white mb-8 tracking-tight">
+          {{ meal?.name || 'Món ăn không tìm thấy 🤔' }}
+        </h2>
+        
+        <div v-if="meal" class="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <!-- Ingredients -->
+          <div>
+            <h3 class="text-xl font-display font-bold text-white mb-6 flex items-center gap-2">
+              <Icon icon="lucide:shopping-basket" class="size-5 text-accent-amber" />
+              Nguyên Liệu
+            </h3>
+            <ul class="space-y-4">
+              <li 
+                v-for="(item, idx) in (recipe?.ingredients || defaultRecipe.ingredients)" 
+                :key="idx" 
+                class="flex gap-3 text-text-secondary text-sm p-4 bg-bg-deep border border-border-default hover:border-accent-coral/30 transition-colors"
+              >
+                <Icon icon="lucide:check-circle" class="size-4 text-accent-coral shrink-0 mt-0.5" />
+                <span>{{ item }}</span>
+              </li>
+            </ul>
+          </div>
+          
+          <!-- Steps -->
+          <div>
+            <h3 class="text-xl font-display font-bold text-white mb-6 flex items-center gap-2">
+              <Icon icon="lucide:chef-hat" class="size-5 text-accent-sky" />
+              Cách Chế Biến
+            </h3>
+            <div class="space-y-6">
+              <div 
+                v-for="(step, idx) in (recipe?.steps || defaultRecipe.steps)" 
+                :key="idx" 
+                class="flex gap-4"
+              >
+                <div class="flex flex-col items-center">
+                  <div class="size-7 bg-bg-elevated border border-border-default flex items-center justify-center text-white font-display font-bold text-xs shrink-0">
+                    {{ idx + 1 }}
+                  </div>
+                  <div v-if="idx !== (recipe?.steps?.length || defaultRecipe.steps.length) - 1" class="w-px h-full bg-border-default my-2"></div>
+                </div>
+                <div class="pb-2">
+                  <p class="text-text-secondary text-sm leading-relaxed">{{ step }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out both;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style>
diff --git a/src/views/eat-clean/data/meals.ts b/src/views/eat-clean/data/meals.ts
new file mode 100644
index 00000000..ed44e8f8
--- /dev/null
+++ b/src/views/eat-clean/data/meals.ts
@@ -0,0 +1,68 @@
+export interface Meal {
+  id: string
+  name: string
+  calories: number
+}
+
+export interface DayPlan {
+  day: string
+  breakfast: Meal
+  lunch: Meal
+  dinner: Meal
+}
+
+export const breakfasts: Meal[] = [
+  { id: 'b1', name: 'Yến mạch ngâm sữa hạt (Overnight Oats) 🥣', calories: 300 },
+  { id: 'b2', name: 'Bánh mì đen & Trứng ốp la 🥚🍞', calories: 280 },
+  { id: 'b3', name: 'Sinh tố xanh (Rau bina, bơ, chuối) 🥑', calories: 250 },
+  { id: 'b4', name: 'Sữa chua không đường & Trái cây tươi 🍓', calories: 200 },
+  { id: 'b5', name: 'Khoai lang luộc & Bơ đậu phộng 🍠', calories: 260 },
+  { id: 'b6', name: 'Trứng luộc & Táo xanh 🍏', calories: 150 },
+  { id: 'b7', name: 'Pancake yến mạch chuối 🥞', calories: 320 },
+  { id: 'b8', name: 'Bún lứt trộn ức gà xé 🍜', calories: 350 },
+  { id: 'b9', name: 'Smoothie bowl ngũ cốc trái cây 🥥', calories: 280 }
+]
+
+export const lunches: Meal[] = [
+  { id: 'l1', name: 'Cơm gạo lứt & Ức gà nướng tiêu 🍗', calories: 450 },
+  { id: 'l2', name: 'Salad cá ngừ ngâm nước sốt chanh dây 🥗', calories: 380 },
+  { id: 'l3', name: 'Bún lứt xào thịt bò nạc & cải thìa 🍜', calories: 420 },
+  { id: 'l4', name: 'Cơm lứt & Cá hồi áp chảo măng tây 🍣', calories: 500 },
+  { id: 'l5', name: 'Mì rau củ xốt cà chua thịt nạc băm 🍝', calories: 400 },
+  { id: 'l6', name: 'Nui lứt lườn cá hồi xốt Pesto 🥣', calories: 460 },
+  { id: 'l7', name: 'Salad ức gà áp chảo sốt mè rang 🍗', calories: 350 },
+  { id: 'l8', name: 'Cơm quinoa & Đậu hũ xốt nấm 🍄', calories: 380 },
+  { id: 'l9', name: 'Cuốn tôm thịt luộc & bánh tráng lứt 🍤', calories: 320 },
+  { id: 'l10', name: 'Cơm lứt & Thịt heo nạc xào giá hẹ 🍛', calories: 430 }
+]
+
+export const dinners: Meal[] = [
+  { id: 'd1', name: 'Salad ức gà xé phay & bắp ngọt 🌽', calories: 280 },
+  { id: 'd2', name: 'Bò né nạc áp chảo kèm salad giấm 🥩', calories: 350 },
+  { id: 'd3', name: 'Tôm hấp & Canh bí đỏ thịt băm 🦐', calories: 300 },
+  { id: 'd4', name: 'Ức gà cuộn rau củ hấp 🥕', calories: 250 },
+  { id: 'd5', name: 'Súp lơ xanh luộc & Cá lóc hấp hành 🐟', calories: 280 },
+  { id: 'd6', name: 'Salad dưa leo cà chua & Trứng luộc 🍅', calories: 200 },
+  { id: 'd7', name: 'Đậu hũ non sốt cà chua & Nấm kim châm 🍲', calories: 220 },
+  { id: 'd8', name: 'Canh rong biển đậu non & thịt băm nạc 🌿', calories: 150 },
+  { id: 'd9', name: 'Bắp bắp luộc & Thịt băm xào nấm mộc nhĩ 🌽', calories: 300 }
+]
+
+export const getRandomItem = (array: Meal[], excludeId: string | null = null): Meal => {
+  let filtered = excludeId ? array.filter(item => item.id !== excludeId) : array
+  if (filtered.length === 0) filtered = array
+  const randomIndex = Math.floor(Math.random() * filtered.length)
+  return filtered[randomIndex]!
+}
+
+export const generateWeeklyMenu = (): DayPlan[] => {
+  const daysOfWeek = ['Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ Nhật']
+  return daysOfWeek.map((day) => {
+    return {
+      day,
+      breakfast: getRandomItem(breakfasts),
+      lunch: getRandomItem(lunches),
+      dinner: getRandomItem(dinners),
+    }
+  })
+}
diff --git a/src/views/eat-clean/data/recipes.ts b/src/views/eat-clean/data/recipes.ts
new file mode 100644
index 00000000..5b716e41
--- /dev/null
+++ b/src/views/eat-clean/data/recipes.ts
@@ -0,0 +1,56 @@
+export interface Recipe {
+  ingredients: string[]
+  steps: string[]
+}
+
+export interface RecipeMap {
+  [key: string]: Recipe
+}
+
+export const recipes: RecipeMap = {
+  'b1': {
+    ingredients: [
+      '40g yến mạch cán dẹt',
+      '100ml sữa tươi/sữa hạt không đường',
+      '1 muỗng hạt chia',
+      'Trái cây tùy thích (chuối, dâu tây, việt quất)',
+      '1/2 muỗng mật ong (tùy chọn)'
+    ],
+    steps: [
+      'Cho yến mạch và hạt chia vào một chiếc hũ thủy tinh sạch.',
+      'Đổ sữa tươi hoặc sữa hạt vào hũ sao cho ngập phần yến mạch.',
+      'Thêm một chút mật ong nếu thích ăn ngọt, sau đó khuấy đều.',
+      'Đậy nắp kín, cho vào ngăn mát tủ lạnh ngâm qua đêm (ít nhất 4 tiếng).',
+      'Sáng hôm sau, lấy ra thêm trái cây cắt nhỏ lên trên và thưởng thức. Cực kỳ nhanh gọn!'
+    ]
+  },
+  'l1': {
+    ingredients: [
+      '100g ức gà tươi',
+      '1 bát cơm gạo lứt (chín)',
+      '1/2 cây súp lơ xanh',
+      '1 muỗng cà phê dầu oliu',
+      'Tiêu chanh, hạt nêm diet, xì dầu'
+    ],
+    steps: [
+      'Ức gà rửa sạch, khía mặt để thấm gia vị. Ướp với hạt nêm diet và tiêu chanh trong 15 phút.',
+      'Súp lơ xanh cắt miếng vừa ăn, luộc chín tới.',
+      'Làm nóng chảo, cho chút dầu oliu, áp chảo ức gà mỗi mặt 3-4 phút đến khi chín vàng.',
+      'Thái ức gà thành lát. Bày ra đĩa cùng cơm gạo lứt và súp lơ. Ngon vô cùng!'
+    ]
+  },
+  'd1': {
+    ingredients: [
+      '80g ức gà luộc xé phay',
+      '1/2 bắp ngô ngọt luộc tách hạt',
+      'Xà lách, cà chua bi',
+      'Dầu oliu, nước cốt chanh, một chút muối hồng'
+    ],
+    steps: [
+      'Rửa sạch xà lách và cà chua bi, cắt miếng vừa ăn.',
+      'Pha nước xốt: 1 muỗng dầu oliu + 1 muỗng nước cốt chanh + xíu muối hồng.',
+      'Cho rau củ, ngô ngọt và ức gà xé vào tô lớn.',
+      'Rưới nước xốt lên trên trộn đều. Ăn tối nhẹ bụng nhưng vẫn đủ chất cho ngày dài năng động!'
+    ]
+  }
+}
diff --git a/src/views/eat-clean/index.vue b/src/views/eat-clean/index.vue
new file mode 100644
index 00000000..3495add2
--- /dev/null
+++ b/src/views/eat-clean/index.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import { Icon } from '@iconify/vue'
+import { useLocalStorage } from '@vueuse/core'
+import { toPng } from 'html-to-image'
+import { generateWeeklyMenu, breakfasts, lunches, dinners, getRandomItem } from './data/meals'
+import type { DayPlan } from './data/meals'
+import DayCard from './components/DayCard.vue'
+import RecipeDetail from './components/RecipeDetail.vue'
+
+// Persistence using VueUse
+const weekPlan = useLocalStorage<DayPlan[]>('eat-clean-weekly-menu', [])
+
+const selectedRecipeId = ref<string | null>(null)
+const captureRef = ref<HTMLElement | null>(null)
+const isExporting = ref(false)
+
+const generateNewWeek = () => {
+  weekPlan.value = generateWeeklyMenu()
+}
+
+const refreshDay = (dayIndex: number) => {
+  if (!weekPlan.value[dayIndex]) return
+  
+  const current = weekPlan.value[dayIndex]
+  weekPlan.value[dayIndex] = {
+    day: current.day,
+    breakfast: getRandomItem(breakfasts, current.breakfast.id),
+    lunch: getRandomItem(lunches, current.lunch.id),
+    dinner: getRandomItem(dinners, current.dinner.id)
+  }
+}
+
+const mealDataMap = {
+  breakfast: breakfasts,
+  lunch: lunches,
+  dinner: dinners
+}
+
+const refreshMeal = (dayIndex: number, mealType: 'breakfast' | 'lunch' | 'dinner') => {
+  if (!weekPlan.value[dayIndex]) return
+  
+  const currentMealId = weekPlan.value[dayIndex][mealType].id
+  weekPlan.value[dayIndex][mealType] = getRandomItem(mealDataMap[mealType], currentMealId)
+}
+
+const downloadImage = async () => {
+  if (!captureRef.value) return
+  isExporting.value = true
+  
+  try {
+    // Wait for next tick to ensure UI updates if needed
+    await new Promise(resolve => setTimeout(resolve, 100))
+    
+    const dataUrl = await toPng(captureRef.value, {
+      backgroundColor: '#0f1923', // --color-bg-deep
+      pixelRatio: 2,
+      style: {
+        transform: 'scale(1)',
+        padding: '2rem'
+      },
+      filter: (node: Node) => {
+        // Filter out elements with data-no-capture
+        if (node instanceof HTMLElement && node.hasAttribute('data-no-capture')) {
+          return false
+        }
+        return true
+      }
+    })
+    
+    const link = document.createElement('a')
+    link.download = `eat-clean-menu-${new Date().toISOString().split('T')[0]}.png`
+    link.href = dataUrl
+    link.click()
+  } catch (error) {
+    console.error('Lỗi khi lưu ảnh:', error)
+  } finally {
+    isExporting.value = false
+  }
+}
+
+onMounted(() => {
+  if (weekPlan.value.length === 0) {
+    generateNewWeek()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen bg-bg-deep text-text-primary font-body pb-20 selection:bg-accent-coral/30">
+    <!-- Header / Hero Section -->
+    <header class="relative overflow-hidden bg-bg-surface border-b border-border-default pt-24 pb-16 px-4 mb-12">
+      <!-- Decoration Orbs -->
+      <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-accent-coral/5 blur-[120px] rounded-full pointer-events-none -translate-y-1/2 translate-x-1/4"></div>
+      <div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-accent-amber/5 blur-[80px] rounded-full pointer-events-none translate-y-1/2 -translate-x-1/4"></div>
+
+      <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8 relative z-10">
+        <div class="text-center md:text-left animate-fade-up">
+          <div class="inline-flex items-center gap-2 px-3 py-1 bg-accent-coral/10 text-accent-coral text-[10px] font-display uppercase tracking-widest border border-accent-coral/20 mb-4">
+            <Icon icon="lucide:leaf" class="size-3" /> Health & Wellness
+          </div>
+          <h1 class="text-5xl md:text-6xl font-display font-bold text-white mb-4 tracking-tight">
+            Eat <span class="text-accent-coral">Clean</span> Menu
+          </h1>
+          <p class="text-text-secondary text-lg max-w-xl font-light">
+            Thiết kế thực đơn dinh dưỡng cho cả tuần để bạn luôn khỏe đẹp.<br>
+            Nhấp vào từng món để xem chi tiết cách chế biến.
+          </p>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-center gap-4 animate-fade-up animate-delay-1" data-no-capture>
+          <button 
+            @click="downloadImage" 
+            class="flex items-center gap-2 px-6 py-3 bg-bg-elevated border border-border-default hover:border-accent-coral hover:text-white transition-all duration-300 font-display font-bold text-sm tracking-wide group"
+            :disabled="isExporting"
+          >
+            <Icon :icon="isExporting ? 'lucide:loader-2' : 'lucide:download'" class="size-4 group-hover:-translate-y-0.5 transition-transform" :class="{'animate-spin': isExporting}" />
+            {{ isExporting ? 'Đang xuất...' : 'Lưu Thực Đơn' }}
+          </button>
+          <button 
+            @click="generateNewWeek" 
+            class="flex items-center gap-2 px-6 py-3 bg-accent-coral text-white hover:bg-accent-coral/90 transition-all duration-300 font-display font-bold text-sm tracking-wide group"
+          >
+            <Icon icon="lucide:refresh-ccw" class="size-4 group-hover:rotate-180 transition-transform duration-700" />
+            Đổi Thực Đơn
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Grid -->
+    <main ref="captureRef" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Title for exported image (hidden in UI) -->
+      <div class="hidden" :class="{ 'block mb-8': isExporting }">
+        <h2 class="text-4xl font-display font-bold text-white">Thực Đơn Eat Clean Của Tôi</h2>
+        <p class="text-text-secondary mt-2">www.mtdes23.id.vn</p>
+      </div>
+
+      <!-- First Row: Thứ 2 - Thứ 4 (3 days) -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <DayCard
+          v-for="(day, index) in weekPlan.slice(0, 3)"
+          :key="day.day"
+          :day-data="day"
+          class="animate-fade-up"
+          :style="{ animationDelay: `${(index + 2) * 100}ms` }"
+          @refresh-day="refreshDay(index)"
+          @refresh-meal="(mealType) => refreshMeal(index, mealType)"
+          @view-recipe="(id) => selectedRecipeId = id"
+        />
+      </div>
+
+      <!-- Second Row: Thứ 5 - Chủ Nhật (4 days) -->
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <DayCard
+          v-for="(day, index) in weekPlan.slice(3, 7)"
+          :key="day.day"
+          :day-data="day"
+          class="animate-fade-up"
+          :style="{ animationDelay: `${(index + 5) * 100}ms` }"
+          @refresh-day="refreshDay(index + 3)"
+          @refresh-meal="(mealType) => refreshMeal(index + 3, mealType)"
+          @view-recipe="(id) => selectedRecipeId = id"
+        />
+      </div>
+
+      <!-- Footer for exported image -->
+      <div class="hidden" :class="{ 'block mt-12 pt-8 border-t border-border-default text-center': isExporting }">
+        <p class="text-text-dim text-sm tracking-widest uppercase">Designed by mtdes23 • vibe.j2team.org</p>
+      </div>
+    </main>
+
+    <!-- Custom Footer -->
+    <footer class="mt-24 py-12 border-t border-border-default relative overflow-hidden" data-no-capture>
+      <div class="max-w-7xl mx-auto px-4 flex flex-col items-center">
+        <div class="flex items-center gap-6 mb-8 text-text-dim">
+          <RouterLink to="/" class="hover:text-white transition-colors flex items-center gap-2 text-sm font-display tracking-widest uppercase">
+            <Icon icon="lucide:arrow-left" class="size-4" /> Về Trang Chủ
+          </RouterLink>
+        </div>
+        
+        <div class="text-center">
+          <p class="text-text-secondary font-light text-sm mb-2">Designed by <span class="text-white font-bold">mtdes23</span></p>
+          <a 
+            href="https://www.mtdes23.id.vn" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-accent-coral hover:text-accent-amber transition-colors font-display text-xs tracking-[0.2em] font-bold uppercase"
+          >
+            www.mtdes23.id.vn
+          </a>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Recipe Detail Modal -->
+    <RecipeDetail 
+      v-if="selectedRecipeId" 
+      :id="selectedRecipeId" 
+      @close="selectedRecipeId = null" 
+    />
+  </div>
+</template>
+
+<style scoped>
+/* Optional: specific styles if needed */
+</style>
diff --git a/src/views/eat-clean/meta.ts b/src/views/eat-clean/meta.ts
new file mode 100644
index 00000000..60b4855e
--- /dev/null
+++ b/src/views/eat-clean/meta.ts
@@ -0,0 +1,11 @@
+import type { PageMeta } from '@/types/page'
+
+const meta: PageMeta = {
+  name: 'Eat Clean',
+  description: 'Thực đơn Eat Clean giúp bạn giảm cân và duy trì vóc dáng.',
+  author: 'mtdes23',
+  facebook: 'https://www.facebook.com/mtdes233/',
+  category: 'tool',
+}
+
+export default meta