From 50b93eb6294e60bdac94000f1da7b4ec834ab675 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 21 Jun 2026 20:00:01 -0400
Subject: [PATCH] x

---
 .agents/skills/design-system-auditor/SKILL.md | 211 ----------------
 .agents/skills/frontend-lead/SKILL.md         |   5 +
 .../skills/theme-compliance-auditor/SKILL.md  |  74 +++---
 apps/admin/src/App.tsx                        |   2 +
 apps/admin/src/components/Sidebar.tsx         |   4 +-
 apps/admin/src/pages/ContactMessagesPage.tsx  | 143 +++++++++++
 .../migration.sql                             |  12 +
 apps/backend/prisma/schema.prisma             |  11 +
 apps/backend/src/index.ts                     |   3 +-
 apps/backend/src/routes/contacts.ts           |  58 +++++
 .../src/app/[lang]/category/[id]/page.tsx     |   9 +-
 apps/website/src/app/[lang]/contact/page.tsx  |  36 ++-
 apps/website/src/app/globals.css              |   3 -
 .../dynamic/DynamicPageRenderer.tsx           | 236 +++++-------------
 apps/website/src/locales/en/translation.json  |  30 +++
 apps/website/src/locales/ja/translation.json  |  30 +++
 apps/website/src/locales/ko/translation.json  |  30 +++
 apps/website/src/locales/th/translation.json  |  30 +++
 apps/website/src/locales/vi/translation.json  |  30 +++
 apps/website/src/locales/zh/translation.json  |  30 +++
 20 files changed, 552 insertions(+), 435 deletions(-)
 delete mode 100644 .agents/skills/design-system-auditor/SKILL.md
 create mode 100644 apps/admin/src/pages/ContactMessagesPage.tsx
 create mode 100644 apps/backend/prisma/migrations/20260621225737_add_contact_message/migration.sql
 create mode 100644 apps/backend/src/routes/contacts.ts

diff --git a/.agents/skills/design-system-auditor/SKILL.md b/.agents/skills/design-system-auditor/SKILL.md
deleted file mode 100644
index d35b96d..0000000
--- a/.agents/skills/design-system-auditor/SKILL.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-name: design-system-auditor
-description: Design System Auditor Agent ตรวจสอบและแก้ไขปัญหา Color Contrast, Text Readability, และ Component Visibility ทั่วทั้งโปรเจกต์ HomAroma ให้ผ่านมาตรฐาน WCAG 2.1 AA โดยอิงกับ `spa` color palette ที่กำหนดไว้ใน tailwind.config.js
----
-
-# Skill: Design System Auditor Agent
-
-## Role
-คุณคือ **Design System Auditor Agent** ของโปรเจกต์ HomAroma
-ทำหน้าที่เป็น "ผู้พิทักษ์ความชัดเจนในการอ่าน (Readability Guardian)" ตรวจสอบทุก Component และ Page ให้แน่ใจว่าข้อความอ่านออกได้ชัดเจนบนพื้นหลังทุกสี และ UI Elements ต่างๆ มองเห็นได้ชัดเจนพอ
-
-## Context: ปัญหาที่พบบ่อยในโปรเจกต์นี้
-
-จากการตรวจสอบ พบปัญหาหลัก 3 ประเภทที่เกิดซ้ำๆ:
-
-1. **ตัวหนังสือกลืนพื้นหลัง** — เช่น ปุ่มสีอ่อนบนพื้น `spa-light` (#FDFDF9 ชมพูอ่อน/ขาวครีม)
-2. **Menu / Navigation Links ไม่ชัด** — สีเทาอ่อนบนพื้นขาว อ่านแทบไม่ออก
-3. **Input/Textbox กลมกลืนพื้น** — Border, Placeholder ไม่ตัดกับพื้นหลัง
-
----
-
-## 🎨 HomAroma Spa Color Palette (ข้อมูลอ้างอิง)
-
-```js
-// tailwind.config.js — spa palette
-spa: {
-  light:  '#FDFDF9',  // พื้นหลังหลัก (ขาวครีม)
-  sage:   '#EAEFEA',  // พื้นหลัง Section (เขียวตุ่น)
-  stone:  '#4B4B46',  // ตัวอักษรทั่วไป (เทาเข้มอมน้ำตาล)
-  forest: '#1F3D2D',  // ตัวอักษรหลัก/หัวข้อ (เขียวเข้ม)
-  gold:   '#D4AF37',  // จุดเน้น / Accent (ทอง)
-}
-```
-
-### WCAG 2.1 Contrast Ratio Requirements
-| ระดับ | Body Text (< 18px) | Large Text (≥ 18px / Bold 14px) |
-|---|---|---|
-| **AA (ต้องผ่าน)** | 4.5:1 | 3:1 |
-| **AAA (ดีที่สุด)** | 7:1 | 4.5:1 |
-
-### Approved Color Combinations (ผ่านแล้ว ✅)
-| Text Color | Background | Ratio | Use Case |
-|---|---|---|---|
-| `spa-forest` (#1F3D2D) | `spa-light` (#FDFDF9) | ~14:1 ✅ | หัวข้อบนพื้นขาว |
-| `spa-stone` (#4B4B46) | `spa-light` (#FDFDF9) | ~9:1 ✅ | Body text |
-| `spa-stone` (#4B4B46) | `spa-sage` (#EAEFEA) | ~7:1 ✅ | Text บน Section |
-| `white` (#FFFFFF) | `spa-forest` (#1F3D2D) | ~14:1 ✅ | ปุ่มหลัก |
-| `spa-forest` (#1F3D2D) | `spa-gold` (#D4AF37) | ~4.7:1 ✅ | Badge/Tag |
-
-### ❌ Combinations ที่ห้ามใช้ (Fail)
-| Text Color | Background | ปัญหา |
-|---|---|---|
-| `spa-gold` (#D4AF37) | `spa-light` (#FDFDF9) | Ratio ~1.8:1 ❌ ทองบนขาว อ่านไม่ออก |
-| Gray-300 / slate-300 | White | Ratio < 2:1 ❌ เทาอ่อนบนขาว |
-| `spa-sage` (#EAEFEA) | `spa-light` (#FDFDF9) | ต่างกันแค่เล็กน้อย ❌ |
-| White text | White/Light bg | ❌ มองไม่เห็นเลย |
-
----
-
-## 🛠️ Capabilities (ขีดความสามารถ)
-
-### 1. Contrast Audit (ตรวจสอบความต่าง)
-- ไล่ดูทุก Component ที่มีสีตัวหนังสือและพื้นหลัง
-- คำนวณ Contrast Ratio และรายงานว่า Fail หรือ Pass
-- ระบุ Class Tailwind ที่ต้องแก้ไขพร้อม Fix ที่แนะนำ
-
-### 2. Button & CTA Audit
-**ปัญหาที่ต้องตรวจ:**
-- ปุ่มที่ใช้ `bg-white/10` หรือ `bg-transparent` บนพื้น Light → ตัวหนังสือหาย
-- ปุ่ม "DISCOVER" / "Learn More" สีอ่อนบนพื้นอ่อน
-
-**Fix Pattern:**
-```tsx
-// ❌ Bad — กลมกลืน
-<button className="bg-white/20 text-spa-gold border border-spa-gold/30">
-  DISCOVER
-</button>
-
-// ✅ Good — ชัดเจน
-<button className="bg-spa-forest text-white border-2 border-spa-forest hover:bg-spa-stone">
-  DISCOVER
-</button>
-
-// หรือ Outlined ที่ยังชัด
-<button className="bg-transparent text-spa-forest border-2 border-spa-forest hover:bg-spa-forest hover:text-white">
-  DISCOVER
-</button>
-```
-
-### 3. Navigation & Menu Audit
-**ปัญหาที่ต้องตรวจ:**
-- Menu items ใช้ `text-slate-300` หรือ `text-gray-400` บนพื้นขาว
-- Mobile Drawer menu links ที่อ่านยาก
-
-**Fix Pattern:**
-```tsx
-// ❌ Bad
-<Link className="text-slate-300">ติดต่อเรา</Link>
-<Link className="text-gray-400">ค้าที่พบบ่อย</Link>
-
-// ✅ Good
-<Link className="text-spa-stone hover:text-spa-forest">ติดต่อเรา</Link>
-<Link className="text-spa-stone hover:text-spa-forest">ค้าที่พบบ่อย</Link>
-```
-
-### 4. Input / Textbox Audit
-**ปัญหาที่ต้องตรวจ:**
-- Input ที่มี `border-white/20` หรือ `bg-white/10` บนพื้นขาว → มองไม่เห็นกรอบ
-- Placeholder สีอ่อนเกินไป
-
-**Fix Pattern:**
-```tsx
-// ❌ Bad — กรอบกลมกลืน
-<input className="bg-white/10 border border-white/20 placeholder-white/30" />
-
-// ✅ Good — กรอบชัดเจน
-<input className="bg-white border border-spa-stone/30 placeholder-spa-stone/50
-                  focus:border-spa-forest focus:ring-1 focus:ring-spa-forest
-                  text-spa-stone" />
-```
-
-### 5. Price & Label Audit
-**ปัญหาที่ต้องตรวจ:**
-- ราคา `฿69` ที่แสดงด้วยสีอ่อนบน `spa-light`
-
-**Fix Pattern:**
-```tsx
-// ❌ Bad
-<span className="text-amber-200/80">฿69</span>
-
-// ✅ Good
-<span className="text-spa-forest font-semibold">฿69</span>
-```
-
----
-
-## 🔍 Audit Workflow (ขั้นตอนการตรวจสอบ)
-
-### Step 1: Scan ไฟล์ Component ทั้งหมด
-```bash
-# ค้นหา Tailwind class สีที่น่าสงสัย
-grep -rn "text-slate\|text-gray\|text-white\|bg-white/\|text-amber\|text-cyan\|opacity-" \
-  apps/spa/src/
-```
-
-### Step 2: จัดกลุ่มปัญหา
-แบ่งเป็น 3 ระดับความเร่งด่วน:
-- 🔴 **Critical** — อ่านไม่ออกเลย (ratio < 2:1)
-- 🟡 **Warning** — อ่านยาก (ratio 2:1 – 4.5:1)
-- 🟢 **Pass** — ผ่าน WCAG AA (ratio ≥ 4.5:1)
-
-### Step 3: สร้าง Audit Report
-สร้างรายงานในรูปแบบ Markdown ที่ระบุ:
-- ชื่อไฟล์ + Line Number
-- Class ที่ปัจจุบัน (ปัญหา)
-- Class ที่แนะนำ (Fix)
-- Contrast Ratio ก่อน/หลัง
-
-### Step 4: แก้ไขโค้ด
-แก้ไขตามลำดับ Critical → Warning โดยใช้ `multi_replace_file_content` tool
-
-### Step 5: ตรวจสอบซ้ำ
-หลังแก้ไข ให้ทำ Re-scan เพื่อยืนยันว่าแก้ครบแล้ว
-
----
-
-## 🚫 Constraints & Rules (กฎเหล็กในการทำงาน)
-
-> [!IMPORTANT]
-> **RULE #1: ห้ามเปลี่ยน Color Palette ใน tailwind.config.js**
-> หน้าที่ของคุณคือ "ใช้สีที่มีอยู่ให้ถูกต้อง" ไม่ใช่สร้างสีใหม่ หากเห็นว่า Palette ต้องการสีเพิ่ม ให้แจ้ง Orchestrator
-
-> [!WARNING]
-> **RULE #2: ห้ามแตะต้อง Business Logic**
-> แก้ได้เฉพาะ Tailwind CSS classes ที่เกี่ยวกับสีและการแสดงผลเท่านั้น
-
-> [!CAUTION]
-> **RULE #3: ต้อง Cross-check กับ Dark Mode / Overlay Components**
-> บาง Component อาจมีพื้นหลังซ้อนกัน (เช่น Image + Gradient Overlay) ต้องตรวจสอบให้ครบทุก Layer
-
-- **RULE #4: รายงานต้องครบก่อนแก้**
-  สร้าง Audit Report ให้ครบก่อนเสมอ ไม่แก้ทีละจุดแบบไม่มีแผน
-- **RULE #5: Hover/Focus State ต้องตรวจด้วย**
-  ตรวจทั้ง Default, Hover, Focus, Disabled State ไม่ใช่แค่ Default เท่านั้น
-
----
-
-## 📋 Quick Reference: Fix Cheatsheet สำหรับ HomAroma
-
-| สถานการณ์ | ❌ ห้ามใช้ | ✅ ควรใช้ |
-|---|---|---|
-| ตัวหนังสือบนพื้น Light/White | `text-slate-300`, `text-gray-400`, `text-white/60` | `text-spa-stone`, `text-spa-forest` |
-| ตัวหนังสือ Accent/เน้น | `text-spa-gold` บนพื้นขาว | `text-spa-gold` บน `spa-forest` เท่านั้น |
-| ปุ่มหลัก (Primary) | `bg-white/10 text-white` | `bg-spa-forest text-white` |
-| ปุ่มรอง (Secondary/Ghost) | `border-white/20 text-white/50` | `border-spa-forest text-spa-forest` |
-| Input box บนพื้นขาว | `border-white/20 bg-white/10` | `border-spa-stone/40 bg-white` |
-| Placeholder text | `placeholder-white/30` | `placeholder-spa-stone/50` |
-| ราคาสินค้า | `text-amber-200` | `text-spa-forest font-semibold` |
-| หัวข้อ Section | `text-white` บนพื้น Light | `text-spa-forest` |
-| Icon บน Light bg | `text-white`, `text-gray-300` | `text-spa-stone`, `text-spa-forest` |
-
-
-> [!CAUTION]
-> **RULE: Anti-Bypass & Honesty Discipline (บทสวดป้องกันการมักง่าย)**
-> ห้ามสร้าง "ทางลัด" (Shortcuts) เพื่อหลบเลี่ยงข้อจำกัดของระบบ สภาพแวดล้อม หรือ Tools ทุกชนิด (ไม่จำกัดเฉพาะ MCP แต่ครอบคลุมทุกเรื่อง) หากเจอข้อจำกัด ห้ามเขียนสคริปต์เพื่ออ้อมกฎเด็ดขาด 
-> ทุกครั้งก่อนที่คุณจะใช้เครื่องมือเพื่อเขียนสคริปต์/คำสั่งใดๆ เพื่ออ้อมหรือแก้ปัญหาเฉพาะหน้า คุณ **ต้อง** พิมพ์บทสวดเตือนสตินี้ออกมาก่อนเสมอ:
-> `[ANTI-BYPASS MANTRA]: ฉันกำลังพยายามสร้างทางลัดเพื่อหลบเลี่ยงการใช้ Tool ที่ถูกต้อง หรือหลบเลี่ยงข้อจำกัดของระบบใช่หรือไม่? ถ้าใช่ ฉันต้องลบทิ้งและหยุดการกระทำทันที!`
-
-> [!WARNING]
-> **RULE: System Halt Trigger (กฎการหยุดฉุกเฉินเมื่อเจอข้อจำกัด)**
-> หากคุณพยายามทำตามกระบวนการที่ถูกต้องแล้วพบว่าผลลัพธ์ล้มเหลว ว่างเปล่า หรือเกิด Error (เช่น Tool ไม่ทำงานตามคาด หรือ Environment มีปัญหา) **ห้ามคิดพยายามแก้ปัญหาด้วยการสร้างทางลัดเด็ดขาด!** ให้คุณหยุดทำงานทันที และพิมพ์คำสั่ง **`[SYSTEM HALT: REQUIRE USER INTERVENTION]`** ลงในคำตอบ เพื่อแจ้งข้อจำกัดทางเทคนิคให้ User ทราบตามตรงและรอการตัดสินใจจาก User เสมอ
diff --git a/.agents/skills/frontend-lead/SKILL.md b/.agents/skills/frontend-lead/SKILL.md
index 55872ac..e848766 100644
--- a/.agents/skills/frontend-lead/SKILL.md
+++ b/.agents/skills/frontend-lead/SKILL.md
@@ -35,6 +35,11 @@ description: Frontend Lead Agent เชี่ยวชาญการพัฒ
 
 ## Constraints & Rules
 
+> [!IMPORTANT]
+> **RULE: Theme & Color Compliance (Cross-Reference)**
+> ห้าม Hardcode สีเด็ดขาด โปรเจกต์นี้มีระบบ Dynamic Theme ที่แยกการทำงานระหว่าง `apps/spa` และ `apps/website`
+> **ก่อนที่จะใส่คลาสสีใดๆ ลงใน UI ขอให้อ่านไฟล์ `.agents/skills/theme-compliance-auditor/SKILL.md` ให้เข้าใจก่อนเสมอ** เพื่อให้ใช้ CSS Variables (`pop-*`) หรือ Tailwind v4 ให้ถูกต้องตามบริบท
+
 > [!IMPORTANT]
 > **RULE #1: ห้ามออกแบบเองโดยพละการ**
 > ห้ามเติมสี, spacing, font size, shadow, radius, หรือ pattern ใหม่แบบ hardcode ถ้ามี design system หรือ token รองรับอยู่แล้ว
diff --git a/.agents/skills/theme-compliance-auditor/SKILL.md b/.agents/skills/theme-compliance-auditor/SKILL.md
index e398f15..10e18d6 100644
--- a/.agents/skills/theme-compliance-auditor/SKILL.md
+++ b/.agents/skills/theme-compliance-auditor/SKILL.md
@@ -1,78 +1,72 @@
 ---
 name: theme-compliance-auditor
-description: Theme Compliance Auditor Agent ตรวจสอบว่า Component ใช้สีจาก Admin (CMS Theme) ผ่าน CSS Variables (ตระกูล pop-*) โดยห้าม Hardcode และห้ามมักง่ายอ่าน API มายัดสีตรงๆ
+description: Theme Compliance Auditor Agent ตรวจสอบว่า Component ใช้สีจาก Admin (CMS Theme) อย่างถูกต้อง โดยห้าม Hardcode สีเด็ดขาด (apps/spa ใช้ตัวแปร pop-*, apps/website ใช้ Tailwind v4 Dynamic SSR)
 ---
 
 # Skill: Theme Compliance Auditor Agent
 
 ## Role
 คุณคือ **Theme Compliance Auditor Agent** ประจำโปรเจกต์ HomAroma
-หน้าที่หลักของคุณคือ "ผู้พิทักษ์ความถูกต้องของโครงสร้างสีแบบ Dynamic" คุณต้องรับประกันว่า โค้ด Frontend ทั้งหมด (โดยเฉพาะใน `apps/spa`) มีความเคารพต่อการตั้งค่าสีจากระบบ CMS Admin แบบ 100%
+หน้าที่หลักของคุณคือ "ผู้พิทักษ์ความถูกต้องของโครงสร้างสีแบบ Dynamic" คุณต้องรับประกันว่า โค้ด Frontend ทั้งหมดในโปรเจกต์ (ทั้งใน `apps/spa` และ `apps/website`) มีความเคารพต่อการตั้งค่าสีจากระบบ CMS Admin แบบ 100%
 
 ## Context: กลไกการทำงานของระบบสี (System Flow)
-1. แอดมินตั้งค่าสีในระบบ CMS (เช่น BRAND PRIMARY, SURFACE PAGE, TEXT MAIN)
-2. ค่าเหล่านี้ถูกส่งมาผ่าน API (`/api/settings`)
-3. ในฝั่ง `apps/spa` เรามี `ThemeInjector.tsx` ทำหน้าที่รับค่า API เหล่านั้น แล้วสร้างเป็น **CSS Variables** ไว้ให้ใช้งาน เช่น:
-   - `--color-pop-bg` (ดึงค่าจาก `SURFACE PAGE`)
-   - `--color-pop-black` (ดึงค่าจาก `TEXT MAIN`)
-   - `--color-pop-pink` (ดึงค่าจาก `BRAND PRIMARY` / จุดเด่น)
-   - `--color-night-900` (ดึงค่าจาก `SURFACE CARD`)
+ระบบของเรามีกลไกการรับสีจากแอดมิน (ผ่าน API `/settings`) สองรูปแบบที่แตกต่างกันตามแอปพลิเคชัน:
+
+### 1. `apps/spa` (Client-Side Injection)
+- รับค่า API ฝั่ง Client และมี `ThemeInjector.tsx` ทำหน้าที่สร้าง CSS Variables
+- ใช้ตระกูล `pop-*` เช่น: `--color-pop-bg`, `--color-pop-black`, `--color-pop-pink`
+
+### 2. `apps/website` (SSR Injection & Tailwind v4)
+- รับค่า API ฝั่ง Server (SSR) ผ่าน `src/app/[lang]/layout.tsx` โดยไม่ต้องใช้ ThemeInjector
+- ระบบจะนำค่าสีแปะลงแท็ก `<body>` โดยตรง
+- ใช้ความสามารถของ **Tailwind v4 `@theme`** ใน `globals.css` สร้าง Utility Classes ขึ้นมาแบบอัตโนมัติ เช่น `bg-brand-primary`, `text-surface-page`, `border-line-primary`
 
 ## ❌ Anti-Patterns (สิ่งที่คุณต้องไล่ล่าและกำจัดทิ้ง)
 
 > [!WARNING]
 > **1. การ Hardcode สีเดิมของ Tailwind (Legacy Hardcode)**
-> - ห้ามใช้คลาสสีเก่าอย่าง `bg-spa-light`, `text-spa-forest`, `bg-spa-sage`, `border-spa-stone/20`
-> - เพราะคลาสพวกนี้เป็นสีคงที่ (Static) เมื่อแอดมินเปลี่ยน Theme หน้าเว็บจะไม่ยอมเปลี่ยนสีตาม
+> - **ใน SPA:** ห้ามใช้คลาสสีเก่าอย่าง `bg-spa-light`, `text-spa-forest`, `bg-spa-sage`
+> - **ใน Website:** ห้ามใช้คลาส Hardcode (เช่น `bg-[#FF6B6B]`) ยกเว้นในกรณีเฉพาะที่ยอมรับได้เช่น Status Badges หรือปุ่ม Danger 
 
 > [!CAUTION]
 > **2. ความมักง่าย: ยิง API แล้วดึง Hex มาแปะดื้อๆ (Sloppy API Hardcoding)**
-> - ห้ามแก้ปัญหาด้วยการไป Fetch `api/settings` หรือดึงค่าจาก Database เอง แล้วเอาเลข Hex (เช่น `#D4AF37`) มาแทรกตรงๆ ในแอตทริบิวต์ `style={{ color: '#D4AF37' }}` เด็ดขาด
-> - นี่คือการทำลาย System Flow เพราะเป็นการข้ามหัว `ThemeInjector.tsx` และทำให้ระบบพังเมื่อแอดมินเปลี่ยนสีภายหลัง
+> - ห้ามดึงค่าจาก API / Database มาแทรกตรงๆ ในแอตทริบิวต์ `style={{ color: '#D4AF37' }}` เด็ดขาด
+> - นี่คือการทำลาย System Flow และทำให้ระบบ Theme พังเมื่อแอดมินเปลี่ยนสี
 
 > [!WARNING]
 > **3. ละเลยสีสถานะ (Hover / Active / Opacity)**
-> - การเปลี่ยนแค่สีหลักไม่พอ หากมี Hover ที่เป็นสี Hardcode (`hover:bg-spa-light`) ต้องแก้เป็น Dynamic (`hover:bg-pop-black/5`)
-> - หากมีปุ่มสถานะแบบ Active (เช่นปุ่มเลือกขนาด) ต้องจัดการสีแบบ Invert อย่างสากล (เช่น สลับไปใช้ `bg-pop-black text-pop-bg`)
+> - ต้องเช็คเสมอว่า hover state และ active state ใช้แบบ Dynamic หรือไม่ (เช่น ใช้ opacity ควบคู่กับ CSS variable แทนที่จะใส่สีใหม่ตายตัวลงไป)
 
 ## ✅ Fixing Patterns (วิธีแก้ไขที่ถูกต้อง)
 
-### การแก้สีพื้นฐาน
+### สำหรับ `apps/spa`
 ```tsx
 // ❌ Bad (Legacy Hardcode)
-<div className="bg-spa-light text-spa-forest border-spa-stone/10">
+<div className="bg-spa-light text-spa-forest hover:bg-spa-sage">
 
-// ✅ Good (Dynamic Theme Compliance)
-<div className="bg-pop-bg text-pop-black border-pop-black/10">
+// ✅ Good (Dynamic Theme Compliance - ใช้ตระกูล pop-*)
+<div className="bg-pop-bg text-pop-black hover:bg-pop-black/5">
 ```
 
-### การแก้ปุ่มเน้นสีแบรนด์ (Brand Accent)
+### สำหรับ `apps/website`
 ```tsx
-// ❌ Bad
-<button className="bg-spa-forest text-white">
+// ❌ Bad (Hardcode Hex หรือสีพื้นฐาน Tailwind ที่ไม่ใช่ธีม)
+<div className="bg-[#FF6B6B] text-gray-900 hover:bg-red-400">
 
-// ✅ Good (ใช้ pop-pink ซึ่งผูกกับ Brand Primary)
-<button className="bg-pop-pink text-pop-bg">
-```
-
-### การแก้ Hover State ด้วยความโปร่งแสง
-```tsx
-// ❌ Bad
-<a className="hover:bg-spa-sage text-spa-stone hover:text-spa-forest">
-
-// ✅ Good (ใช้ opacity หรือดึงสีอักษรมาทำสีพื้นหลังจางๆ)
-<a className="text-pop-black/70 hover:bg-pop-black/5 hover:text-pop-black">
+// ✅ Good (ใช้ Tailwind v4 Dynamic Classes ที่ผูกกับ SSR ไว้แล้ว)
+<div className="bg-brand-primary text-text-main hover:bg-brand-primary/80">
 ```
 
 ## 🔍 Audit Workflow (กระบวนการทำงานของคุณ)
 
-1. **รับคำสั่ง:** ตรวจสอบชื่อไฟล์ / Component Block ที่รับมอบหมาย
-2. **Scan Code:** มองหาคลาส Tailwind กลุ่ม `spa-*` หรือรหัส Hex Color ที่ถูกฝังลงไปดื้อๆ
-3. **Analyze Logic:** พิจารณาว่าจุดนั้นคือพื้นหลัง (Background), ข้อความ (Text), จุดเด่น (Accent), หรือสถานะ (Hover/Active)
-4. **Refactor:** ใช้เครื่องมือ `replace_file_content` หรือ `multi_replace_file_content` แทนที่ด้วยคลาส `pop-*` ให้ครบถ้วน
-5. **Verify Context:** ตรวจทานความถูกต้องของ Contrast เช่น ถ้าพื้นหลังเป็น `bg-pop-black` ตัวหนังสือต้องเป็น `text-pop-bg` (ห้ามใช้สีมืดชนกันเอง)
+1. **Context Check:** ตรวจสอบว่าไฟล์ที่คุณกำลังตรวจอยู่ใน `apps/spa` หรือ `apps/website` เพื่อใช้กฎเกณฑ์ให้ถูกต้อง
+2. **Scan Code:** 
+   - **SPA:** มองหาคลาส `spa-*` หรือรหัส Hex Color
+   - **Website:** มองหา Hex Color หรือ Utility Classes ที่ไม่ได้อยู่ในระบบ Design System (ยกเว้นคอมโพเนนต์พิเศษที่กำหนดไว้ใน `globals.css`)
+3. **Refactor:** ทำการเปลี่ยนคลาสหรือสไตล์ที่ผิดกฎให้สอดคล้องกับกลไกของแอปนั้นๆ
+4. **Verify Context:** ตรวจทานความถูกต้องของ Contrast (เช่น พื้นมืดต้องคู่อักษรสว่าง)
 
 ## ⚖️ Disciplines
 
-- **"Do not break the pipe"**: คุณต้องตระหนักว่าคลาส `pop-pink` ไม่ใช่ "สีชมพู" แต่มันคือ "ท่อลำเลียงสี Brand Primary" ที่มาจาก Admin
-- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปร CSS เหล่านั้น ห้ามดึงน้ำออกจากท่อมาสาดใส่โค้ดเองเด็ดขาด
+- **"System Flow is King"**: หน้าที่ของคุณคือผูกโค้ดเข้ากับท่อส่งตัวแปรเหล่านั้น ไม่ว่าจะเป็นท่อ `pop-*` (SPA) หรือท่อ Utility ของ `@theme` Tailwind v4 (Website)
+- ห้ามดึงค่า API มาสาดใส่ component แบบ inline style เด็ดขาด ให้ใช้โครงสร้างที่มีอยู่แล้วเสมอ
diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
index f130494..a69202d 100644
--- a/apps/admin/src/App.tsx
+++ b/apps/admin/src/App.tsx
@@ -33,6 +33,7 @@ import LazadaAnalyticsPage from './pages/LazadaAnalyticsPage'
 import LazadaOverviewPage from './pages/LazadaOverviewPage'
 import GlobalAnalyticsPage from './pages/GlobalAnalyticsPage'
 import MediaLibraryPage from './pages/MediaLibraryPage'
+import ContactMessagesPage from './pages/ContactMessagesPage'
 
 function App() {
   return (
@@ -62,6 +63,7 @@ function App() {
             <Route path="/subscribers" element={<NewsletterSubscribersPage />} />
             <Route path="/articles" element={<ArticlesPage />} />
             <Route path="/articles/:id" element={<ArticleEditPage />} />
+            <Route path="/contacts" element={<ContactMessagesPage />} />
             <Route path="/tiktok" element={<TiktokPage />} />
             <Route path="/tiktok-analysis" element={<TiktokAnalysisPage />} />
             <Route path="/shopee" element={<ShopeePage />} />
diff --git a/apps/admin/src/components/Sidebar.tsx b/apps/admin/src/components/Sidebar.tsx
index 084861b..e3f3e86 100644
--- a/apps/admin/src/components/Sidebar.tsx
+++ b/apps/admin/src/components/Sidebar.tsx
@@ -16,7 +16,8 @@ import {
   Layers,
   Globe2,
   Users,
-  Image as ImageIcon
+  Image as ImageIcon,
+  MessageSquare
 } from 'lucide-react'
 
 const MENU_ITEMS = [
@@ -45,6 +46,7 @@ const MENU_ITEMS = [
   { icon: Globe2, label: 'All Analytics', to: '/global-analytics' },
   { icon: Layers, label: 'Menu Manager', to: '/menu-manager' },
   { icon: Users, label: 'Subscribers', to: '/subscribers' },
+  { icon: MessageSquare, label: 'Contact Messages', to: '/contacts' },
   { icon: Settings, label: 'Settings', to: '/settings' },
 ]
 
diff --git a/apps/admin/src/pages/ContactMessagesPage.tsx b/apps/admin/src/pages/ContactMessagesPage.tsx
new file mode 100644
index 0000000..6ab6646
--- /dev/null
+++ b/apps/admin/src/pages/ContactMessagesPage.tsx
@@ -0,0 +1,143 @@
+import { useState, useEffect } from 'react'
+import { API_BASE } from '@homaroma/types'
+import { CheckCircle2, MessageSquare, Clock, AlertCircle } from 'lucide-react'
+
+interface ContactMessage {
+  id: number
+  name: string
+  email: string
+  message: string
+  isRead: boolean
+  createdAt: string
+  updatedAt: string
+}
+
+export default function ContactMessagesPage() {
+  const [messages, setMessages] = useState<ContactMessage[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchMessages = async () => {
+    setLoading(true)
+    try {
+      const r = await fetch(`${API_BASE}/contacts`)
+      const data = await r.json()
+      setMessages(data)
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchMessages()
+  }, [])
+
+  const toggleReadStatus = async (id: number, currentStatus: boolean) => {
+    try {
+      const res = await fetch(`${API_BASE}/contacts/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ isRead: !currentStatus })
+      })
+
+      if (res.ok) {
+        fetchMessages()
+      } else {
+        const errorData = await res.json()
+        alert(errorData.error || 'Failed to update status')
+      }
+    } catch (err) {
+      console.error('Update error:', err)
+      alert('An error occurred while updating.')
+    }
+  }
+
+  return (
+    <div className="space-y-10 animate-fade-in">
+      <div className="space-y-1">
+        <h1 className="text-3xl font-bold flex items-center gap-3">
+          <MessageSquare className="w-8 h-8 text-cyan-glow" />
+          Contact Messages
+        </h1>
+        <p className="text-slate-500 text-sm">Review and manage inquiries submitted from the website.</p>
+      </div>
+
+      <div className="bg-night-900 border border-white/5 rounded-3xl overflow-hidden shadow-2xl">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm text-slate-300">
+            <thead className="bg-white/5 text-[10px] uppercase tracking-widest text-slate-500 font-bold border-b border-white/5">
+              <tr>
+                <th className="px-6 py-4">Status</th>
+                <th className="px-6 py-4">Date</th>
+                <th className="px-6 py-4">Name</th>
+                <th className="px-6 py-4">Email</th>
+                <th className="px-6 py-4">Message</th>
+                <th className="px-6 py-4">Action</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-white/5">
+              {loading ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12 text-center text-slate-500">
+                    <div className="animate-pulse">Loading messages...</div>
+                  </td>
+                </tr>
+              ) : messages.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12 text-center text-slate-500">
+                    No messages found.
+                  </td>
+                </tr>
+              ) : (
+                messages.map((msg) => (
+                  <tr key={msg.id} className={`hover:bg-white/[0.02] transition-colors ${!msg.isRead ? 'bg-cyan-glow/5' : ''}`}>
+                    <td className="px-6 py-4">
+                      {msg.isRead ? (
+                        <div className="flex items-center gap-2 text-slate-500">
+                          <CheckCircle2 className="w-4 h-4" />
+                          <span>Read</span>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2 text-cyan-glow font-bold">
+                          <AlertCircle className="w-4 h-4" />
+                          <span>New</span>
+                        </div>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-slate-400">
+                      <div className="flex items-center gap-2">
+                        <Clock className="w-3.5 h-3.5" />
+                        {new Date(msg.createdAt).toLocaleDateString('en-GB', {
+                          day: '2-digit', month: 'short', year: 'numeric',
+                          hour: '2-digit', minute: '2-digit'
+                        })}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 font-medium text-white">{msg.name}</td>
+                    <td className="px-6 py-4 text-slate-400">{msg.email}</td>
+                    <td className="px-6 py-4">
+                      <p className="line-clamp-2 max-w-md" title={msg.message}>{msg.message}</p>
+                    </td>
+                    <td className="px-6 py-4">
+                      <button
+                        onClick={() => toggleReadStatus(msg.id, msg.isRead)}
+                        className={`px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all ${
+                          msg.isRead 
+                            ? 'bg-white/5 text-slate-400 hover:bg-white/10 hover:text-white'
+                            : 'bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900'
+                        }`}
+                      >
+                        {msg.isRead ? 'Mark Unread' : 'Mark Read'}
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/backend/prisma/migrations/20260621225737_add_contact_message/migration.sql b/apps/backend/prisma/migrations/20260621225737_add_contact_message/migration.sql
new file mode 100644
index 0000000..b64baf4
--- /dev/null
+++ b/apps/backend/prisma/migrations/20260621225737_add_contact_message/migration.sql
@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "ContactMessage" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "message" TEXT NOT NULL,
+    "isRead" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ContactMessage_pkey" PRIMARY KEY ("id")
+);
diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
index dce2c83..568f1c3 100644
--- a/apps/backend/prisma/schema.prisma
+++ b/apps/backend/prisma/schema.prisma
@@ -632,3 +632,14 @@ model Media {
   sizeBytes Int
   createdAt DateTime @default(now())
 }
+
+// ── Contact Messages ────────────────────────────────────────────────────────
+model ContactMessage {
+  id        Int      @id @default(autoincrement())
+  name      String
+  email     String
+  message   String
+  isRead    Boolean  @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index 5fb0220..ce4a24e 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -27,6 +27,7 @@ import { lineRoutes } from "./routes/line";
 import { menusRoute } from "./routes/menus";
 import { newsletterRoute } from "./routes/newsletter";
 import { mediaRoute } from "./routes/media";
+import { contactsRoute } from "./routes/contacts";
 const PORT = process.env.PORT ? parseInt(process.env.PORT) : 3051;
 const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:5173";
 const JWT_SECRET = process.env.JWT_SECRET || "homaroma_secret_2026_scent";
@@ -125,7 +126,7 @@ const app = new Elysia()
     return file;
   })
   .group("/api", (app) =>
-    app.use(authRoute).use(categoriesRoute).use(productsRoute).use(uploadRoute).use(heroRoute).use(ordersRoute).use(settingsRoute).use(articlesRoute).use(tiktokRoute).use(rawMaterialsRoute).use(shopeeRoute).use(tiktokOrderRoute).use(lazadaOrderRoute).use(customersRoute).use(couponsRoute).use(reviewsRoute).use(promotionsRoute).use(pagesRoute).use(paymentsRoute).use(profileRoute).use(lineRoutes).use(menusRoute).use(newsletterRoute).use(mediaRoute)
+    app.use(authRoute).use(categoriesRoute).use(productsRoute).use(uploadRoute).use(heroRoute).use(ordersRoute).use(settingsRoute).use(articlesRoute).use(tiktokRoute).use(rawMaterialsRoute).use(shopeeRoute).use(tiktokOrderRoute).use(lazadaOrderRoute).use(customersRoute).use(couponsRoute).use(reviewsRoute).use(promotionsRoute).use(pagesRoute).use(paymentsRoute).use(profileRoute).use(lineRoutes).use(menusRoute).use(newsletterRoute).use(mediaRoute).use(contactsRoute)
   )
   .listen({ port: PORT, hostname: "0.0.0.0" });
 
diff --git a/apps/backend/src/routes/contacts.ts b/apps/backend/src/routes/contacts.ts
new file mode 100644
index 0000000..d208b4a
--- /dev/null
+++ b/apps/backend/src/routes/contacts.ts
@@ -0,0 +1,58 @@
+import { Elysia, t } from "elysia";
+import prisma from "../lib/prisma.js";
+
+export const contactsRoute = new Elysia({ prefix: "/contacts" })
+  .post("/", async ({ body, set }) => {
+    try {
+      const { name, email, message } = body;
+      
+      const contactMessage = await prisma.contactMessage.create({
+        data: {
+          name,
+          email,
+          message
+        }
+      });
+
+      return { success: true, data: contactMessage };
+    } catch (err) {
+      console.error(err);
+      set.status = 500;
+      return { success: false, error: "Failed to submit contact message" };
+    }
+  }, {
+    body: t.Object({
+      name: t.String({ minLength: 1 }),
+      email: t.String({ format: "email" }),
+      message: t.String({ minLength: 1 })
+    })
+  })
+  .get("/", async () => {
+    return await prisma.contactMessage.findMany({
+      orderBy: { createdAt: "desc" }
+    });
+  })
+  .patch("/:id", async ({ params, body, set }) => {
+    try {
+      const id = parseInt(params.id);
+      const { isRead } = body;
+
+      const updated = await prisma.contactMessage.update({
+        where: { id },
+        data: { isRead }
+      });
+
+      return { success: true, data: updated };
+    } catch (err) {
+      console.error(err);
+      set.status = 500;
+      return { success: false, error: "Failed to update contact message" };
+    }
+  }, {
+    params: t.Object({
+      id: t.String()
+    }),
+    body: t.Object({
+      isRead: t.Boolean()
+    })
+  });
diff --git a/apps/website/src/app/[lang]/category/[id]/page.tsx b/apps/website/src/app/[lang]/category/[id]/page.tsx
index 578348c..1e3d842 100644
--- a/apps/website/src/app/[lang]/category/[id]/page.tsx
+++ b/apps/website/src/app/[lang]/category/[id]/page.tsx
@@ -122,11 +122,10 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
               <Link
                 key={item.id}
                 href={`/category/${item.id}`}
-                className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
-                  isActive
-                    ? 'bg-text-main text-surface-card'
-                    : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
-                }`}
+                className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${isActive
+                  ? 'bg-text-main text-surface-card'
+                  : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
+                  }`}
               >
                 {name}
               </Link>
diff --git a/apps/website/src/app/[lang]/contact/page.tsx b/apps/website/src/app/[lang]/contact/page.tsx
index e63b268..7f616db 100644
--- a/apps/website/src/app/[lang]/contact/page.tsx
+++ b/apps/website/src/app/[lang]/contact/page.tsx
@@ -11,6 +11,7 @@ export default function ContactPage() {
   const lang = params?.lang as string || 'en'
   const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
   const [status, setStatus] = useState<Status>('idle')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [brandName, setBrandName] = useState('')
   const [socials, setSocials] = useState({ line: '@homaroma', ig: '@homaroma', email: 'hello@homaroma.shop' })
 
@@ -44,9 +45,33 @@ export default function ContactPage() {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setStatus('sending')
-    await new Promise(r => setTimeout(r, 1500))
-    setStatus('sent')
-    setForm({ name: '', email: '', subject: '', message: '' })
+    setErrorMessage(null)
+    
+    try {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
+      const res = await fetch(`${apiUrl}/contacts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          name: form.name, 
+          email: form.email, 
+          message: `[${form.subject}] ${form.message}` 
+        })
+      });
+      
+      const data = await res.json().catch(() => ({}));
+      
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Failed to send message');
+      }
+
+      setStatus('sent')
+      setForm({ name: '', email: '', subject: '', message: '' })
+    } catch (err: any) {
+      console.error(err);
+      setStatus('error')
+      setErrorMessage(err.message || 'An unexpected error occurred. Please try again.')
+    }
   }
 
   return (
@@ -132,6 +157,11 @@ export default function ContactPage() {
                 <textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
                   className="ui-form-shell-light resize-none" />
               </div>
+              {status === 'error' && errorMessage && (
+                <div className="rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
+                  {errorMessage}
+                </div>
+              )}
               <button type="submit" disabled={status === 'sending'}
                 className="ui-form-inline-button w-full">
                 {status === 'sending' ? (
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 6a92345..329f63f 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -573,6 +573,3 @@ body:has(.announcement-bar) .global-navbar[data-scrolled="false"] {
   top: 44px; /* Adjusts Navbar down when AnnouncementBar is present at the top */
 }
 
-body:has(.announcement-bar) .global-main {
-  padding-top: 116px; /* 72px original pt + 44px AnnouncementBar */
-}
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index 73ba253..8607c98 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -9,6 +9,7 @@ import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
 import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord } from '../../lib/localization'
 import { useLang } from '../../hooks/useLang'
+import { useTranslation } from 'react-i18next'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Autoplay } from 'swiper/modules'
 import 'swiper/css'
@@ -56,18 +57,7 @@ function renderAccentTitle(text: string, accentClassName = 'ui-accent-text') {
   })
 }
 
-function heroLearnMoreText(lang: string) {
-  const labels: Record<string, string> = {
-    th: 'ดูรายละเอียดเพิ่มเติม',
-    en: 'Learn More',
-    ja: '詳しく見る',
-    zh: '了解更多',
-    vi: 'Tìm hiểu thêm',
-    ko: '자세히 보기',
-  }
 
-  return labels[lang] ?? labels.en
-}
 
 function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
   const i18nLang = useLang()
@@ -103,6 +93,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
 }
 
 function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const tagline = localizedFromRecord(payload, 'tagline', resolvedLang)
@@ -149,7 +140,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
               href="#categories"
               className="ui-hero-link group"
             >
-              {heroLearnMoreText(resolvedLang)}
+              {t('dynamic.heroLearnMore', { lng: resolvedLang })}
               <span className="transition-transform group-hover:translate-x-1">→</span>
             </a>
           </div>
@@ -169,6 +160,7 @@ function CategoriesSection({
   lang: string
 }) {
   const i18nLang = useLang()
+  const { t } = useTranslation()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Our Collections'
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
@@ -176,14 +168,6 @@ function CategoriesSection({
   const payloadCategories = getCategoriesFromPayload(payload)
   const sourceCategories = payloadCategories.length ? payloadCategories : categories
   const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
-  const productsLabel: Record<string, string> = {
-    th: 'สินค้า',
-    en: 'Products',
-    ja: '商品',
-    zh: '商品',
-    vi: 'Sản phẩm',
-    ko: '상품',
-  }
 
   return (
     <section id="categories" className="bg-surface-page ui-section-band">
@@ -214,7 +198,7 @@ function CategoriesSection({
                   <span className="block text-lg font-semibold">{name}</span>
                   {category._count && (
                     <span className="text-sm text-white/90">
-                      {category._count.products} {productsLabel[resolvedLang] ?? productsLabel.en}
+                      {category._count.products} {t('dynamic.products', { lng: resolvedLang })}
                     </span>
                   )}
                 </div>
@@ -228,27 +212,12 @@ function CategoriesSection({
 }
 
 function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Featured Picks'
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
   const products = getProducts(payload)
-  const viewAllLabel: Record<string, string> = {
-    th: 'ดูทั้งหมด →',
-    en: 'View All Collection →',
-    ja: 'すべて見る →',
-    zh: '查看全部 →',
-    vi: 'Xem tất cả →',
-    ko: '전체 보기 →',
-  }
-  const emptyLabel: Record<string, string> = {
-    th: 'ไม่พบสินค้าในหมวดนี้',
-    en: 'No products found in this section.',
-    ja: 'このセクションには商品がありません。',
-    zh: '此区域中没有找到产品。',
-    vi: 'Không tìm thấy sản phẩm nào trong mục này.',
-    ko: '이 섹션에서 찾을 수 있는 상품이 없습니다.',
-  }
 
   return (
     <section className="bg-surface-page ui-section-band">
@@ -259,7 +228,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
             {subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
           </div>
           <Link href="/shop" className="ui-section-link">
-            {viewAllLabel[resolvedLang] ?? viewAllLabel.en}
+            {t('dynamic.viewAll', { lng: resolvedLang })}
           </Link>
         </div>
         {products.length ? (
@@ -268,7 +237,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
           </div>
         ) : (
           <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
-            {emptyLabel[resolvedLang] ?? emptyLabel.en}
+            {t('dynamic.emptyProducts', { lng: resolvedLang })}
           </p>
         )}
       </div>
@@ -450,6 +419,7 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
 }
 
 function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Guide Article'
@@ -466,14 +436,6 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
     : typeof payload.publishDate === 'string'
       ? payload.publishDate
       : ''
-  const authorPrefix: Record<string, string> = {
-    th: 'โดย',
-    en: 'By',
-    ja: '著者',
-    zh: '作者',
-    vi: 'Bởi',
-    ko: '작성자',
-  }
 
   return (
     <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
@@ -489,7 +451,7 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
         {subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
         {(author || date) && (
           <p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">
-            {[author && `${authorPrefix[resolvedLang] ?? authorPrefix.en} ${author}`, date].filter(Boolean).join(' / ')}
+            {[author && `${t('dynamic.authorBy', { lng: resolvedLang })} ${author}`, date].filter(Boolean).join(' / ')}
           </p>
         )}
       </div>
@@ -498,23 +460,16 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
 }
 
 function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const title = localizedFromRecord(payload, 'title', resolvedLang) || 'Scent Notes'
   const description = localizedFromRecord(payload, 'description', resolvedLang)
-  const noteLabels: Record<string, Record<string, string>> = {
-    th: { top: 'กลิ่นเปิด', heart: 'กลิ่นกลาง', base: 'กลิ่นฐาน' },
-    en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
-    ja: { top: 'トップノート', heart: 'ミドルノート', base: 'ベースノート' },
-    zh: { top: '前调', heart: '中调', base: '后调' },
-    vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
-    ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' },
-  }
-  const labels = noteLabels[resolvedLang] ?? noteLabels.en
+  
   const notes = [
-    [labels.top, optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
-    [labels.heart, optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
-    [labels.base, optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
+    [t('dynamic.notes.top', { lng: resolvedLang }), optionalText(payload.topNotes, resolvedLang) || 'The initial, lighter smells of the fragrance.'],
+    [t('dynamic.notes.heart', { lng: resolvedLang }), optionalText(payload.heartNotes ?? payload.middleNotes, resolvedLang) || 'The core of the fragrance, emerging just after the top notes.'],
+    [t('dynamic.notes.base', { lng: resolvedLang }), optionalText(payload.baseNotes, resolvedLang) || 'The deepest, richest scents that linger the longest.'],
   ]
 
   return (
@@ -611,27 +566,20 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
 }
 
 function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
-  const labels: Record<string, Record<string, string>> = {
-    th: { address: 'ที่อยู่', email: 'อีเมล', line: 'Line', hours: 'เวลาทำการ' },
-    en: { address: 'Address', email: 'Email', line: 'Line', hours: 'Business Hours' },
-    ja: { address: '住所', email: 'メール', line: 'Line', hours: '営業時間' },
-    zh: { address: '地址', email: '电子邮件', line: 'Line', hours: '营业时间' },
-    vi: { address: 'Địa chỉ', email: 'Email', line: 'Line', hours: 'Giờ làm việc' },
-    ko: { address: '주소', email: '이메일', line: 'Line', hours: '운영 시간' },
-  }
-  const resolvedLabels = labels[resolvedLang] ?? labels.en
+  
   const title = localizedFromRecord(payload, 'title', resolvedLang)
   const address = localizedFromRecord(payload, 'address', resolvedLang)
   const email = typeof payload.email === 'string' ? payload.email : ''
   const line = typeof payload.line === 'string' ? payload.line : ''
   const hours = localizedFromRecord(payload, 'hours', resolvedLang)
   const items = [
-    { key: 'address', label: resolvedLabels.address, value: address, Icon: MapPin },
-    { key: 'email', label: resolvedLabels.email, value: email, Icon: Mail },
-    { key: 'line', label: resolvedLabels.line, value: line, Icon: MessageCircle },
-    { key: 'hours', label: resolvedLabels.hours, value: hours, Icon: Clock },
+    { key: 'address', label: t('dynamic.contactInfo.address', { lng: resolvedLang }), value: address, Icon: MapPin },
+    { key: 'email', label: t('dynamic.contactInfo.email', { lng: resolvedLang }), value: email, Icon: Mail },
+    { key: 'line', label: t('dynamic.contactInfo.line', { lng: resolvedLang }), value: line, Icon: MessageCircle },
+    { key: 'hours', label: t('dynamic.contactInfo.hours', { lng: resolvedLang }), value: hours, Icon: Clock },
   ] as const
 
   return (
@@ -667,105 +615,46 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
 }
 
 function ContactFormSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
+  const { t } = useTranslation()
   const i18nLang = useLang()
   const resolvedLang = lang === 'all' ? i18nLang : lang
   const [formData, setFormData] = useState({ name: '', email: '', message: '' })
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isSuccess, setIsSuccess] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   const title = localizedFromRecord(payload, 'title', resolvedLang)
   const subtitle = localizedFromRecord(payload, 'subtitle', resolvedLang)
 
-  const labels: Record<string, Record<string, string>> = {
-    th: {
-      title: 'ติดต่อเรา',
-      subtitle: 'ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย',
-      successTitle: 'ส่งข้อความสำเร็จ',
-      successBody: 'ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด',
-      name: 'ชื่อ-นามสกุล',
-      namePlaceholder: 'กรอกชื่อของคุณ',
-      email: 'อีเมล',
-      message: 'ข้อความ',
-      messagePlaceholder: 'พิมพ์ข้อความของคุณที่นี่...',
-      submit: 'ส่งข้อความ',
-    },
-    en: {
-      title: 'Contact Us',
-      subtitle: 'Send a message to our team and we will get back to you soon.',
-      successTitle: 'Message sent successfully',
-      successBody: 'Thanks for reaching out. Our team will reply as soon as possible.',
-      name: 'Full Name',
-      namePlaceholder: 'Enter your name',
-      email: 'Email',
-      message: 'Message',
-      messagePlaceholder: 'Type your message here...',
-      submit: 'Send Message',
-    },
-    ja: {
-      title: 'お問い合わせ',
-      subtitle: 'チームへメッセージをお送りください。できるだけ早くご返信します。',
-      successTitle: '送信に成功しました',
-      successBody: 'お問い合わせありがとうございます。担当者ができるだけ早く返信します。',
-      name: '氏名',
-      namePlaceholder: 'お名前を入力してください',
-      email: 'メール',
-      message: 'メッセージ',
-      messagePlaceholder: 'ここにメッセージを入力してください...',
-      submit: '送信',
-    },
-    zh: {
-      title: '联系我们',
-      subtitle: '给我们的团队留言，我们会尽快回复您。',
-      successTitle: '发送成功',
-      successBody: '感谢您的联系，我们会尽快回复。',
-      name: '姓名',
-      namePlaceholder: '请输入您的姓名',
-      email: '邮箱',
-      message: '留言',
-      messagePlaceholder: '在这里输入您的留言...',
-      submit: '发送消息',
-    },
-    vi: {
-      title: 'Liên hệ',
-      subtitle: 'Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.',
-      successTitle: 'Gửi tin nhắn thành công',
-      successBody: 'Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.',
-      name: 'Họ và tên',
-      namePlaceholder: 'Nhập tên của bạn',
-      email: 'Email',
-      message: 'Tin nhắn',
-      messagePlaceholder: 'Nhập tin nhắn của bạn tại đây...',
-      submit: 'Gửi tin nhắn',
-    },
-    ko: {
-      title: '문의하기',
-      subtitle: '팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.',
-      successTitle: '메시지 전송 완료',
-      successBody: '문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.',
-      name: '이름',
-      namePlaceholder: '이름을 입력하세요',
-      email: '이메일',
-      message: '메시지',
-      messagePlaceholder: '여기에 메시지를 입력하세요...',
-      submit: '메시지 보내기',
-    }
-  }
-
-  const copy = labels[resolvedLang] ?? labels.en
-
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsSubmitting(true)
+    setError(null)
+    setIsSuccess(false)
     
-    // Simulate API call
-    setTimeout(() => {
-      setIsSubmitting(false)
+    try {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3051/api';
+      const res = await fetch(`${apiUrl}/contacts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData)
+      });
+      
+      const data = await res.json().catch(() => ({}));
+      
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Failed to send message');
+      }
+
       setIsSuccess(true)
       setFormData({ name: '', email: '', message: '' })
-      
-      // Reset success message after 3 seconds
       setTimeout(() => setIsSuccess(false), 3000)
-    }, 1000)
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'An unexpected error occurred. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
   }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -778,28 +667,33 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
       <div className="mx-auto max-w-3xl">
         <div className="mb-12 text-center">
           <h2 className="mb-4 text-3xl font-semibold text-text-main md:text-4xl">
-            {title || copy.title}
+            {title || t('contactForm.title', { lng: resolvedLang })}
           </h2>
           <p className="mx-auto max-w-xl text-lg text-muted-text">
-            {subtitle || copy.subtitle}
+            {subtitle || t('contactForm.subtitle', { lng: resolvedLang })}
           </p>
         </div>
 
         <div className="rounded-3xl border border-line-primary/20 bg-surface-card p-8 shadow-card md:p-12">
+          {error && (
+            <div className="mb-6 rounded-lg bg-rose-50 p-4 text-rose-500 text-sm border border-rose-200">
+              {error}
+            </div>
+          )}
           {isSuccess ? (
             <div className="py-12 text-center">
               <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-brand-success/20 text-brand-success">
                 <Send size={32} />
               </div>
-              <h3 className="mb-2 text-2xl font-semibold text-text-main">{copy.successTitle}</h3>
-              <p className="text-muted-text">{copy.successBody}</p>
+              <h3 className="mb-2 text-2xl font-semibold text-text-main">{t('contactForm.successTitle', { lng: resolvedLang })}</h3>
+              <p className="text-muted-text">{t('contactForm.successBody', { lng: resolvedLang })}</p>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-6">
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <div className="space-y-2">
                   <label htmlFor="name" className="block text-sm font-medium text-text-main">
-                    {copy.name}
+                    {t('contactForm.name', { lng: resolvedLang })}
                   </label>
                   <input
                     type="text"
@@ -808,13 +702,13 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                     required
                     value={formData.name}
                     onChange={handleChange}
-                    className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
-                    placeholder={copy.namePlaceholder}
+                    placeholder={t('contactForm.namePlaceholder', { lng: resolvedLang })}
+                    className="ui-form-shell"
                   />
                 </div>
                 <div className="space-y-2">
                   <label htmlFor="email" className="block text-sm font-medium text-text-main">
-                    {copy.email}
+                    {t('contactForm.email', { lng: resolvedLang })}
                   </label>
                   <input
                     type="email"
@@ -823,7 +717,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                     required
                     value={formData.email}
                     onChange={handleChange}
-                    className="w-full rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
+                    className="ui-form-shell"
                     placeholder="example@email.com"
                   />
                 </div>
@@ -831,17 +725,17 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
               
               <div className="space-y-2">
                 <label htmlFor="message" className="block text-sm font-medium text-text-main">
-                  {copy.message}
+                  {t('contactForm.message', { lng: resolvedLang })}
                 </label>
                 <textarea
                   id="message"
                   name="message"
                   required
+                  rows={4}
                   value={formData.message}
                   onChange={handleChange}
-                  rows={5}
-                  className="w-full resize-none rounded-xl border border-line-primary/30 bg-surface-page px-4 py-3 text-text-main outline-none transition-all focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20"
-                  placeholder={copy.messagePlaceholder}
+                  placeholder={t('contactForm.messagePlaceholder', { lng: resolvedLang })}
+                  className="ui-form-shell resize-none"
                 />
               </div>
 
@@ -855,7 +749,7 @@ function ContactFormSection({ payload, lang }: { payload: Record<string, unknown
                 ) : (
                   <>
                     <Send size={18} />
-                    {copy.submit}
+                    {t('contactForm.submit', { lng: resolvedLang })}
                   </>
                 )}
               </button>
diff --git a/apps/website/src/locales/en/translation.json b/apps/website/src/locales/en/translation.json
index d6914a0..d6485b4 100644
--- a/apps/website/src/locales/en/translation.json
+++ b/apps/website/src/locales/en/translation.json
@@ -34,5 +34,35 @@
     "followUs": "Follow Us",
     "contactUs": "Contact Us",
     "rights": "All rights reserved."
+  },
+  "dynamic": {
+    "heroLearnMore": "Learn More",
+    "products": "Products",
+    "viewAll": "View All Collection →",
+    "emptyProducts": "No products found in this section.",
+    "authorBy": "By",
+    "notes": {
+      "top": "Top Notes",
+      "heart": "Heart Notes",
+      "base": "Base Notes"
+    },
+    "contactInfo": {
+      "address": "Address",
+      "email": "Email",
+      "line": "Line",
+      "hours": "Business Hours"
+    }
+  },
+  "contactForm": {
+    "title": "Contact Us",
+    "subtitle": "Send a message to our team and we will get back to you soon.",
+    "successTitle": "Message sent successfully",
+    "successBody": "Thanks for reaching out. Our team will reply as soon as possible.",
+    "name": "Full Name",
+    "namePlaceholder": "Enter your name",
+    "email": "Email",
+    "message": "Message",
+    "messagePlaceholder": "Type your message here...",
+    "submit": "Send Message"
   }
 }
diff --git a/apps/website/src/locales/ja/translation.json b/apps/website/src/locales/ja/translation.json
index cd7752e..a1e7d89 100644
--- a/apps/website/src/locales/ja/translation.json
+++ b/apps/website/src/locales/ja/translation.json
@@ -57,5 +57,35 @@
     "moreRelated": "関連する {{category}}",
     "reviews": "レビュー",
     "viewDetails": "詳細を見る →"
+  },
+  "dynamic": {
+    "heroLearnMore": "詳しく見る",
+    "products": "商品",
+    "viewAll": "すべて見る →",
+    "emptyProducts": "このセクションには商品がありません。",
+    "authorBy": "著者",
+    "notes": {
+      "top": "トップノート",
+      "heart": "ミドルノート",
+      "base": "ベースノート"
+    },
+    "contactInfo": {
+      "address": "住所",
+      "email": "メール",
+      "line": "Line",
+      "hours": "営業時間"
+    }
+  },
+  "contactForm": {
+    "title": "お問い合わせ",
+    "subtitle": "チームへメッセージをお送りください。できるだけ早くご返信します。",
+    "successTitle": "送信に成功しました",
+    "successBody": "お問い合わせありがとうございます。担当者ができるだけ早く返信します。",
+    "name": "氏名",
+    "namePlaceholder": "お名前を入力してください",
+    "email": "メール",
+    "message": "メッセージ",
+    "messagePlaceholder": "ここにメッセージを入力してください...",
+    "submit": "送信"
   }
 }
diff --git a/apps/website/src/locales/ko/translation.json b/apps/website/src/locales/ko/translation.json
index 8673611..32f4117 100644
--- a/apps/website/src/locales/ko/translation.json
+++ b/apps/website/src/locales/ko/translation.json
@@ -57,5 +57,35 @@
     "moreRelated": "더 많은 {{category}}",
     "reviews": "리뷰",
     "viewDetails": "상세 보기 →"
+  },
+  "dynamic": {
+    "heroLearnMore": "자세히 보기",
+    "products": "상품",
+    "viewAll": "전체 보기 →",
+    "emptyProducts": "이 섹션에서 찾을 수 있는 상품이 없습니다.",
+    "authorBy": "작성자",
+    "notes": {
+      "top": "탑 노트",
+      "heart": "미들 노트",
+      "base": "베이스 노트"
+    },
+    "contactInfo": {
+      "address": "주소",
+      "email": "이메일",
+      "line": "Line",
+      "hours": "운영 시간"
+    }
+  },
+  "contactForm": {
+    "title": "문의하기",
+    "subtitle": "팀에 메시지를 보내주시면 최대한 빨리 답변드리겠습니다.",
+    "successTitle": "메시지 전송 완료",
+    "successBody": "문의해 주셔서 감사합니다. 가능한 빨리 답변드리겠습니다.",
+    "name": "이름",
+    "namePlaceholder": "이름을 입력하세요",
+    "email": "이메일",
+    "message": "메시지",
+    "messagePlaceholder": "여기에 메시지를 입력하세요...",
+    "submit": "메시지 보내기"
   }
 }
diff --git a/apps/website/src/locales/th/translation.json b/apps/website/src/locales/th/translation.json
index 519bae5..9e0de87 100644
--- a/apps/website/src/locales/th/translation.json
+++ b/apps/website/src/locales/th/translation.json
@@ -34,5 +34,35 @@
     "followUs": "ติดตามเรา",
     "contactUs": "ติดต่อสอบถาม",
     "rights": "สงวนลิขสิทธิ์."
+  },
+  "dynamic": {
+    "heroLearnMore": "ดูรายละเอียดเพิ่มเติม",
+    "products": "สินค้า",
+    "viewAll": "ดูทั้งหมด →",
+    "emptyProducts": "ไม่พบสินค้าในหมวดนี้",
+    "authorBy": "โดย",
+    "notes": {
+      "top": "กลิ่นเปิด",
+      "heart": "กลิ่นกลาง",
+      "base": "กลิ่นฐาน"
+    },
+    "contactInfo": {
+      "address": "ที่อยู่",
+      "email": "อีเมล",
+      "line": "Line",
+      "hours": "เวลาทำการ"
+    }
+  },
+  "contactForm": {
+    "title": "ติดต่อเรา",
+    "subtitle": "ส่งข้อความถึงทีมงานของเรา เรายินดีให้บริการและพร้อมตอบทุกข้อสงสัย",
+    "successTitle": "ส่งข้อความสำเร็จ",
+    "successBody": "ขอบคุณที่ติดต่อเรา ทีมงานจะรีบตอบกลับโดยเร็วที่สุด",
+    "name": "ชื่อ-นามสกุล",
+    "namePlaceholder": "กรอกชื่อของคุณ",
+    "email": "อีเมล",
+    "message": "ข้อความ",
+    "messagePlaceholder": "พิมพ์ข้อความของคุณที่นี่...",
+    "submit": "ส่งข้อความ"
   }
 }
diff --git a/apps/website/src/locales/vi/translation.json b/apps/website/src/locales/vi/translation.json
index 12a757e..976c438 100644
--- a/apps/website/src/locales/vi/translation.json
+++ b/apps/website/src/locales/vi/translation.json
@@ -57,5 +57,35 @@
     "moreRelated": "Thêm {{category}}",
     "reviews": "Đánh giá",
     "viewDetails": "Xem chi tiết →"
+  },
+  "dynamic": {
+    "heroLearnMore": "Tìm hiểu thêm",
+    "products": "Sản phẩm",
+    "viewAll": "Xem tất cả →",
+    "emptyProducts": "Không tìm thấy sản phẩm nào trong mục này.",
+    "authorBy": "Bởi",
+    "notes": {
+      "top": "Hương đầu",
+      "heart": "Hương giữa",
+      "base": "Hương cuối"
+    },
+    "contactInfo": {
+      "address": "Địa chỉ",
+      "email": "Email",
+      "line": "Line",
+      "hours": "Giờ làm việc"
+    }
+  },
+  "contactForm": {
+    "title": "Liên hệ",
+    "subtitle": "Gửi tin nhắn cho đội ngũ của chúng tôi, chúng tôi sẽ phản hồi sớm nhất.",
+    "successTitle": "Gửi tin nhắn thành công",
+    "successBody": "Cảm ơn bạn đã liên hệ, đội ngũ của chúng tôi sẽ phản hồi sớm nhất có thể.",
+    "name": "Họ và tên",
+    "namePlaceholder": "Nhập tên của bạn",
+    "email": "Email",
+    "message": "Tin nhắn",
+    "messagePlaceholder": "Nhập tin nhắn của bạn tại đây...",
+    "submit": "Gửi tin nhắn"
   }
 }
diff --git a/apps/website/src/locales/zh/translation.json b/apps/website/src/locales/zh/translation.json
index d19e23e..4e63297 100644
--- a/apps/website/src/locales/zh/translation.json
+++ b/apps/website/src/locales/zh/translation.json
@@ -57,5 +57,35 @@
     "moreRelated": "更多 {{category}}",
     "reviews": "评价",
     "viewDetails": "查看详情 →"
+  },
+  "dynamic": {
+    "heroLearnMore": "了解更多",
+    "products": "商品",
+    "viewAll": "查看全部 →",
+    "emptyProducts": "此区域中没有找到产品。",
+    "authorBy": "作者",
+    "notes": {
+      "top": "前调",
+      "heart": "中调",
+      "base": "后调"
+    },
+    "contactInfo": {
+      "address": "地址",
+      "email": "电子邮件",
+      "line": "Line",
+      "hours": "营业时间"
+    }
+  },
+  "contactForm": {
+    "title": "联系我们",
+    "subtitle": "给我们的团队留言，我们会尽快回复您。",
+    "successTitle": "发送成功",
+    "successBody": "感谢您的联系，我们会尽快回复。",
+    "name": "姓名",
+    "namePlaceholder": "请输入您的姓名",
+    "email": "邮箱",
+    "message": "留言",
+    "messagePlaceholder": "在这里输入您的留言...",
+    "submit": "发送消息"
   }
 }