diff --git a/apps/website/src/app/[lang]/[slug]/page.tsx b/apps/website/src/app/[lang]/[slug]/page.tsx
index ddd5b64..9a13f43 100644
--- a/apps/website/src/app/[lang]/[slug]/page.tsx
+++ b/apps/website/src/app/[lang]/[slug]/page.tsx
@@ -59,15 +59,15 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
   if (!pageResult.ok) {
     if (pageResult.status === 404) notFound()
 
-    return (
-      <main className="min-h-[70vh] bg-pop-bg px-6 py-24">
-        <div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white px-6 py-16 text-center shadow-brutal">
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-rose-500">CMS Page Error</p>
-          <h1 className="mt-4 text-3xl font-semibold text-pop-black md:text-4xl">
-            ไม่สามารถโหลดหน้านี้ได้
-          </h1>
-          <p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
-        </div>
+  return (
+    <main className="min-h-[70vh] bg-surface-page px-6 py-24 text-text-main">
+      <div className="ui-panel mx-auto max-w-3xl border border-rose-100 px-6 py-16 text-center">
+        <p className="text-xs font-bold uppercase tracking-[0.28em] text-rose-500">CMS Page Error</p>
+        <h1 className="mt-4 text-3xl font-semibold text-text-main md:text-4xl">
+          ไม่สามารถโหลดหน้านี้ได้
+        </h1>
+        <p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
+      </div>
       </main>
     )
   }
@@ -85,7 +85,7 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
   const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {sections.length > 0 ? (
         <>
           {announcementSections.length > 0 && (
@@ -100,9 +100,9 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
         </>
       ) : (
         <div className="mx-auto max-w-4xl px-6 py-24 text-center">
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">HomAroma</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">{page.title}</h1>
-          <p className="mt-5 text-gray-600">
+          <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-primary">HomAroma</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">{page.title}</h1>
+          <p className="mt-5 text-muted-text">
             หน้านี้ถูกเผยแพร่แล้ว แต่ยังไม่มี section ที่เปิดใช้งานใน Page Builder
           </p>
         </div>
diff --git a/apps/website/src/app/[lang]/about/page.tsx b/apps/website/src/app/[lang]/about/page.tsx
index ba61031..6d2c8cb 100644
--- a/apps/website/src/app/[lang]/about/page.tsx
+++ b/apps/website/src/app/[lang]/about/page.tsx
@@ -38,26 +38,26 @@ export async function generateMetadata({ params }: { params: Promise<{ lang: str
 
 export default function AboutPage() {
   return (
-    <div className="min-h-screen bg-pop-bg">
-      <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-white pt-24">
+    <div className="min-h-screen bg-surface-page text-text-main">
+      <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-surface-card pt-24">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" />
         <div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center">
-          <p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Our Story</p>
-          <h1 className="text-5xl font-bold leading-tight text-pop-black md:text-7xl">
-            Born from a passion for <span className="italic text-pop-pink">stillness</span>
+          <p className="ui-eyebrow">Our Story</p>
+          <h1 className="text-5xl font-bold leading-tight text-text-main md:text-7xl">
+            Born from a passion for <span className="italic text-brand-primary">stillness</span>
           </h1>
-          <p className="text-lg leading-relaxed text-gray-600">
+          <p className="text-lg leading-relaxed text-muted-text">
             HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
           </p>
         </div>
       </section>
 
-      <section className="border-y border-gray-200 bg-white px-6 py-12">
+      <section className="border-y border-line-primary/20 bg-surface-card px-6 py-12">
         <div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4">
           {STATS.map(s => (
             <div key={s.label} className="space-y-1">
-              <div className="text-4xl font-bold text-pop-pink">{s.value}</div>
-              <div className="text-xs uppercase tracking-widest text-gray-500">{s.label}</div>
+              <div className="text-4xl font-bold text-brand-primary">{s.value}</div>
+              <div className="text-xs uppercase tracking-widest text-muted-text">{s.label}</div>
             </div>
           ))}
         </div>
@@ -66,40 +66,40 @@ export default function AboutPage() {
       <section className="px-6 py-24">
         <div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
           <div className="space-y-6">
-            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">Our Mission</p>
-            <h2 className="text-4xl font-bold leading-tight text-pop-black">Transforming spaces into sanctuaries of peace</h2>
-            <p className="leading-relaxed text-gray-700">
+            <p className="ui-eyebrow">Our Mission</p>
+            <h2 className="text-4xl font-bold leading-tight text-text-main">Transforming spaces into sanctuaries of peace</h2>
+            <p className="leading-relaxed text-text-main/85">
               We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
             </p>
-            <p className="text-sm leading-relaxed text-gray-600">
+            <p className="text-sm leading-relaxed text-muted-text">
               Every HomAroma product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
             </p>
           </div>
-          <div className="relative h-80 overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-brutal">
-            <div className="absolute inset-0 bg-gradient-to-br from-pop-bg via-white to-pop-orange/20" />
+          <div className="relative h-80 overflow-hidden rounded-3xl border border-line-primary/20 bg-surface-card shadow-card">
+            <div className="absolute inset-0 bg-gradient-to-br from-surface-page via-white to-brand-warm/20" />
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="space-y-3 text-center">
                 <div className="text-7xl">🌿</div>
-                <p className="text-sm uppercase tracking-widest text-gray-500">HomAroma Studio, Bangkok</p>
+                <p className="text-sm uppercase tracking-widest text-muted-text">HomAroma Studio, Bangkok</p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
-      <section className="border-y border-gray-200 bg-white px-6 py-24">
+      <section className="border-y border-line-primary/20 bg-surface-card px-6 py-24">
         <div className="mx-auto max-w-6xl space-y-12">
           <div className="space-y-3 text-center">
-            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">What We Stand For</p>
-            <h2 className="text-4xl font-bold text-pop-black">Three Pillars</h2>
-            <div className="mx-auto h-px w-12 bg-pop-pink" />
+            <p className="ui-eyebrow">What We Stand For</p>
+            <h2 className="text-4xl font-bold text-text-main">Three Pillars</h2>
+            <div className="mx-auto h-px w-12 bg-brand-primary" />
           </div>
           <div className="grid gap-8 md:grid-cols-3">
             {PILLARS.map(p => (
-              <div key={p.title} className="space-y-4 rounded-2xl border border-gray-100 bg-pop-bg p-8 shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
+              <div key={p.title} className="ui-card ui-card-hover space-y-4 p-8">
                 <div className="text-4xl">{p.icon}</div>
-                <h3 className="text-xl font-bold text-pop-black">{p.title}</h3>
-                <p className="text-sm leading-relaxed text-gray-600">{p.desc}</p>
+                <h3 className="text-xl font-bold text-text-main">{p.title}</h3>
+                <p className="text-sm leading-relaxed text-muted-text">{p.desc}</p>
               </div>
             ))}
           </div>
@@ -107,13 +107,13 @@ export default function AboutPage() {
       </section>
 
       <section className="space-y-6 px-6 py-24 text-center">
-        <h2 className="text-4xl font-bold text-pop-black">Ready to find your scent?</h2>
-        <p className="mx-auto max-w-md text-gray-600">Let our Scent Guide help you discover the perfect blend for your moment.</p>
+        <h2 className="text-4xl font-bold text-text-main">Ready to find your scent?</h2>
+        <p className="mx-auto max-w-md text-muted-text">Let our Scent Guide help you discover the perfect blend for your moment.</p>
         <div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row">
-          <Link href="/scent-guide" className="rounded-full bg-pop-black px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
+          <Link href="/scent-guide" className="rounded-full bg-text-main px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
             Take the Scent Guide
           </Link>
-          <Link href="/shop" className="rounded-full border border-pop-pink bg-white px-10 py-4 font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg">
+          <Link href="/shop" className="rounded-full border border-brand-primary bg-surface-card px-10 py-4 font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page">
             Shop All Products
           </Link>
         </div>
diff --git a/apps/website/src/app/[lang]/article/[slug]/page.tsx b/apps/website/src/app/[lang]/article/[slug]/page.tsx
index d416d92..7339a16 100644
--- a/apps/website/src/app/[lang]/article/[slug]/page.tsx
+++ b/apps/website/src/app/[lang]/article/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import Link from '@/components/LocalizedLink'
+import Image from 'next/image'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
@@ -39,38 +40,38 @@ export default async function ArticleReaderPage({ params }: { params: Promise<{
   if (!article) notFound()
 
   return (
-    <div className="flex min-h-screen flex-col bg-pop-bg">
+    <div className="flex min-h-screen flex-col bg-surface-page text-text-main">
       <main className="flex-1 pb-20 pt-24">
         <article className="relative mx-auto mt-8 w-full max-w-4xl">
           <Link
             href="/scent-guide"
-            className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-gray-200 bg-white p-4 text-pop-black shadow-sm transition-colors hover:text-pop-pink xl:-left-24 lg:flex"
+            className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-line-primary/20 bg-surface-card p-4 text-text-main shadow-sm transition-colors hover:text-brand-primary xl:-left-24 lg:flex"
           >
             <ArrowLeft className="h-5 w-5" />
           </Link>
 
           <div className="space-y-6 px-6 py-12 text-center">
-            <Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-gray-600 hover:text-pop-pink lg:hidden">
+            <Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-muted-text hover:text-brand-primary lg:hidden">
               <ArrowLeft className="h-4 w-4" /> Go Back
             </Link>
-            <p className="text-xs font-bold uppercase tracking-[0.3em] text-pop-pink">
+            <p className="ui-eyebrow">
               {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
             </p>
-            <h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-pop-black md:text-5xl lg:text-6xl">
+            <h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-text-main md:text-5xl lg:text-6xl">
               {article.title}
             </h1>
           </div>
 
           {article.coverImage && (
-            <div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]">
-              <img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" />
+            <div className="relative mb-16 aspect-[16/7] w-full overflow-hidden bg-surface-card shadow-card md:rounded-[2rem]">
+              <Image src={article.coverImage} alt={article.title} fill unoptimized className="h-full w-full object-cover" />
             </div>
           )}
 
-          <div className="mx-auto max-w-3xl rounded-3xl bg-white px-6 py-10 shadow-brutal md:px-12">
+          <div className="ui-panel mx-auto max-w-3xl px-6 py-10 md:px-12">
             <div
               dangerouslySetInnerHTML={{ __html: article.content }}
-              className="space-y-6 leading-relaxed text-gray-700 [&_a]:font-semibold [&_a]:text-pop-pink [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-pop-black [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-pop-black [&_img]:rounded-2xl [&_img]:shadow-brutal [&_p]:leading-relaxed [&_strong]:text-pop-black"
+              className="space-y-6 leading-relaxed text-text-main/85 [&_a]:font-semibold [&_a]:text-brand-primary [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-text-main [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-text-main [&_img]:rounded-2xl [&_img]:shadow-card [&_p]:leading-relaxed [&_strong]:text-text-main"
             />
           </div>
         </article>
diff --git a/apps/website/src/app/[lang]/category/[id]/page.tsx b/apps/website/src/app/[lang]/category/[id]/page.tsx
index 214bb66..bacdb34 100644
--- a/apps/website/src/app/[lang]/category/[id]/page.tsx
+++ b/apps/website/src/app/[lang]/category/[id]/page.tsx
@@ -1,4 +1,5 @@
 import Link from '@/components/LocalizedLink'
+import Image from 'next/image'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
@@ -54,15 +55,15 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
     if (categoryProductsResult.status === 404) notFound()
 
     return (
-      <div className="min-h-screen bg-pop-bg">
+      <div className="min-h-screen bg-surface-page text-text-main">
         {announcementSections.length > 0 && (
           <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
         )}
         <div className="px-6 py-20">
-          <div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Unable to load this category</p>
+          <div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
+            <p className="text-lg font-semibold text-text-main">Unable to load this category</p>
             <p className="mt-2 text-sm text-rose-500">{categoryProductsResult.error}</p>
-            <Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
+            <Link href="/shop" className="mt-6 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
           </div>
         </div>
       </div>
@@ -76,30 +77,32 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
   const categoryName = resolveLocalized(category.name, lang)
 
   return (
-    <div className="min-h-screen bg-pop-bg">
+    <div className="min-h-screen bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <section className="relative overflow-hidden bg-white">
-          <img
+        <section className="relative overflow-hidden bg-surface-card">
+          <Image
             src={category.imageUrl || getCategoryImage(categoryName)}
-            className="absolute inset-0 h-full w-full object-cover"
             alt={categoryName}
+            fill
+            unoptimized
+            className="absolute inset-0 h-full w-full object-cover"
           />
-          <div className="absolute inset-0 bg-gradient-to-r from-pop-bg/95 via-pop-bg/70 to-white/20" />
+          <div className="absolute inset-0 bg-gradient-to-r from-surface-page/95 via-surface-page/70 to-white/20" />
           <div className="relative mx-auto max-w-7xl px-6 py-20">
-            <div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-500">
-              <Link href="/" className="transition hover:text-pop-pink">Home</Link>
+            <div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
+              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
               <span>/</span>
-              <Link href="/shop" className="transition hover:text-pop-pink">Shop</Link>
+              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
               <span>/</span>
-              <span className="text-pop-black">{categoryName}</span>
+              <span className="text-text-main">{categoryName}</span>
             </div>
-            <h1 className="text-5xl font-semibold text-pop-black md:text-6xl">{categoryName}</h1>
-            {category._count && <p className="mt-3 text-gray-600">{category._count.products} products available</p>}
+            <h1 className="text-5xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
+            {category._count && <p className="mt-3 text-muted-text">{category._count.products} products available</p>}
           </div>
         </section>
       )}
@@ -107,7 +110,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
       <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
         <div className="flex flex-wrap gap-3">
           {!categoriesResult.ok && (
-            <span className="rounded-full border border-rose-100 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
+            <span className="rounded-full border border-rose-100 bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
               Categories unavailable
             </span>
           )}
@@ -121,8 +124,8 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
                 href={`/category/${item.id}`}
                 className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
                   isActive
-                    ? 'bg-pop-black text-white'
-                    : 'border border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
+                    ? 'bg-text-main text-white'
+                    : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
                 }`}
               >
                 {name}
@@ -132,9 +135,9 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
         </div>
 
         {products.length === 0 ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">No products in this category yet.</p>
-            <Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
+          <div className="ui-panel px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">No products in this category yet.</p>
+            <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
diff --git a/apps/website/src/app/[lang]/checkout/page.tsx b/apps/website/src/app/[lang]/checkout/page.tsx
index 79cfc48..fa85b8e 100644
--- a/apps/website/src/app/[lang]/checkout/page.tsx
+++ b/apps/website/src/app/[lang]/checkout/page.tsx
@@ -32,7 +32,7 @@ export default async function CheckoutPage({ params }: { params: Promise<{ lang:
   }
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
@@ -41,12 +41,12 @@ export default async function CheckoutPage({ params }: { params: Promise<{ lang:
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
         <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
-          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
             <CreditCard className="h-8 w-8" />
           </div>
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Secure Checkout</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">ยืนยันคำสั่งซื้อ</h1>
-          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+          <p className="ui-eyebrow">Secure Checkout</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">ยืนยันคำสั่งซื้อ</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-text">
             ตรวจสอบรายการสินค้า ใช้คูปองหรือคะแนนสะสม และสร้างคำสั่งซื้อเพื่อไปยังหน้ารายละเอียดออเดอร์
           </p>
         </section>
diff --git a/apps/website/src/app/[lang]/contact/page.tsx b/apps/website/src/app/[lang]/contact/page.tsx
index e9446da..837f852 100644
--- a/apps/website/src/app/[lang]/contact/page.tsx
+++ b/apps/website/src/app/[lang]/contact/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 import { useState } from 'react'
 
 type FormState = { name: string; email: string; subject: string; message: string }
@@ -22,17 +22,17 @@ export default function ContactPage() {
   }
 
   return (
-    <div className="min-h-screen bg-pop-bg">
-      <div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Get in Touch</p>
-        <h1 className="text-5xl font-bold text-pop-black">Contact Us</h1>
-        <p className="mx-auto max-w-lg text-gray-600">Have a question, custom request, or partnership idea? We&apos;d love to hear from you.</p>
+    <div className="min-h-screen bg-surface-page">
+      <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
+        <p className="ui-eyebrow">Get in Touch</p>
+        <h1 className="text-5xl font-bold text-text-main">Contact Us</h1>
+        <p className="mx-auto max-w-lg text-muted-text">Have a question, custom request, or partnership idea? We&apos;d love to hear from you.</p>
       </div>
 
       <div className="mx-auto grid max-w-6xl gap-16 px-6 py-16 md:grid-cols-5">
         <div className="space-y-8 md:col-span-2">
           <div>
-            <h2 className="mb-6 text-xl font-bold text-pop-black">Reach Us Directly</h2>
+            <h2 className="mb-6 text-xl font-bold text-text-main">Reach Us Directly</h2>
             <div className="space-y-5">
               {[
                 { icon: '📧', label: 'Email', value: 'hello@homaroma.shop', href: 'mailto:hello@homaroma.shop' },
@@ -41,71 +41,71 @@ export default function ContactPage() {
                 { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
               ].map(item => (
                 <a key={item.label} href={item.href} className="group flex items-start gap-4">
-                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100 bg-white text-lg shadow-sm transition-colors group-hover:border-pop-pink/30 group-hover:bg-pop-bg">{item.icon}</div>
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-line-primary/20 bg-surface-card text-lg shadow-sm transition-colors group-hover:border-brand-primary/30 group-hover:bg-surface-page">{item.icon}</div>
                   <div>
-                    <p className="text-xs uppercase tracking-widest text-gray-500">{item.label}</p>
-                    <p className="text-sm font-medium text-pop-black transition-colors group-hover:text-pop-pink">{item.value}</p>
+                    <p className="text-xs uppercase tracking-widest text-muted-text">{item.label}</p>
+                    <p className="text-sm font-medium text-text-main transition-colors group-hover:text-brand-primary">{item.value}</p>
                   </div>
                 </a>
               ))}
             </div>
           </div>
 
-          <div className="space-y-3 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal">
-            <h3 className="text-sm font-bold uppercase tracking-widest text-pop-black">Response Time</h3>
+          <div className="ui-panel space-y-3 p-6">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-text-main">Response Time</h3>
             <div className="space-y-2 text-sm">
               {[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => (
                 <div key={k} className="flex justify-between">
-                  <span className="text-gray-600">{k}</span>
-                  <span className="font-medium text-pop-pink">{v}</span>
+                  <span className="text-muted-text">{k}</span>
+                  <span className="font-medium text-brand-primary">{v}</span>
                 </div>
               ))}
             </div>
-            <p className="pt-2 text-[10px] uppercase tracking-wider text-gray-500">Mon-Sat, 9:00-18:00 (ICT)</p>
+            <p className="pt-2 text-[10px] uppercase tracking-wider text-muted-text">Mon-Sat, 9:00-18:00 (ICT)</p>
           </div>
         </div>
 
         <div className="md:col-span-3">
           {status === 'sent' ? (
-            <div className="flex h-full items-center justify-center rounded-3xl bg-white shadow-brutal">
+            <div className="ui-panel flex h-full items-center justify-center">
               <div className="space-y-5 py-16 text-center">
                 <div className="text-6xl">✉️</div>
-                <h2 className="text-2xl font-bold text-pop-black">Message Sent!</h2>
-                <p className="text-gray-600">Thank you for reaching out. We&apos;ll get back to you within 2 hours.</p>
-                <button onClick={() => setStatus('idle')} className="mt-4 rounded-full border border-pop-pink bg-white px-8 py-3 text-xs font-bold uppercase tracking-widest text-pop-pink transition-all hover:bg-pop-bg">
+                <h2 className="text-2xl font-bold text-text-main">Message Sent!</h2>
+                <p className="text-muted-text">Thank you for reaching out. We&apos;ll get back to you within 2 hours.</p>
+                <button onClick={() => setStatus('idle')} className="mt-4 rounded-full border border-brand-primary bg-surface-card px-8 py-3 text-xs font-bold uppercase tracking-widest text-brand-primary transition-all hover:bg-surface-page">
                   Send Another
                 </button>
               </div>
             </div>
           ) : (
-            <form onSubmit={handleSubmit} className="space-y-5 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal md:p-8">
+            <form onSubmit={handleSubmit} className="ui-panel space-y-5 p-6 md:p-8">
               <div className="grid gap-5 md:grid-cols-2">
                 <div className="space-y-2">
-                  <label className="text-xs uppercase tracking-widest text-gray-600">Full Name *</label>
+                  <label className="ui-form-label">Full Name *</label>
                   <input required type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name"
-                    className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
+                    className="ui-form-shell-light" />
                 </div>
                 <div className="space-y-2">
-                  <label className="text-xs uppercase tracking-widest text-gray-600">Email *</label>
+                  <label className="ui-form-label">Email *</label>
                   <input required type="email" name="email" value={form.email} onChange={handleChange} placeholder="your@email.com"
-                    className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
+                    className="ui-form-shell-light" />
                 </div>
               </div>
               <div className="space-y-2">
-                <label className="text-xs uppercase tracking-widest text-gray-600">Subject *</label>
+                <label className="ui-form-label">Subject *</label>
                 <select required name="subject" value={form.subject} onChange={handleChange}
-                  className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors focus:border-pop-pink">
+                  className="ui-form-shell-light">
                   <option value="" disabled>Select a subject</option>
                   {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
                 </select>
               </div>
               <div className="space-y-2">
-                <label className="text-xs uppercase tracking-widest text-gray-600">Message *</label>
+                <label className="ui-form-label">Message *</label>
                 <textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
-                  className="w-full resize-none rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
+                  className="ui-form-shell-light resize-none" />
               </div>
               <button type="submit" disabled={status === 'sending'}
-                className="flex w-full items-center justify-center gap-3 rounded-full bg-pop-black py-4 text-sm font-bold uppercase tracking-widest text-white transition-all duration-300 hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-50">
+                className="ui-form-inline-button w-full">
                 {status === 'sending' ? (
                   <><svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg>Sending...</>
                 ) : 'Send Message ->'}
diff --git a/apps/website/src/app/[lang]/coupons/page.tsx b/apps/website/src/app/[lang]/coupons/page.tsx
index 260ec0f..611cb53 100644
--- a/apps/website/src/app/[lang]/coupons/page.tsx
+++ b/apps/website/src/app/[lang]/coupons/page.tsx
@@ -40,7 +40,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
   }
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
@@ -49,11 +49,11 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
       ) : (
         <div className="mx-auto max-w-6xl px-6 py-16">
           <div className="space-y-4 text-center">
-            <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Offers</p>
-            <h1 className="text-4xl font-semibold text-pop-black md:text-5xl">
+            <p className="ui-eyebrow">Offers</p>
+            <h1 className="text-4xl font-semibold text-text-main md:text-5xl">
               Exclusive Offers
             </h1>
-            <p className="mx-auto max-w-2xl text-gray-600">
+            <p className="mx-auto max-w-2xl text-muted-text">
               คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
             </p>
           </div>
@@ -62,19 +62,19 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
 
       <div className="mx-auto max-w-6xl px-6 pb-24">
         {!couponsResult.ok ? (
-          <div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
+          <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
             <Ticket className="mx-auto mb-4 h-16 w-16 text-rose-200" />
-            <h2 className="mb-2 text-xl font-semibold text-pop-black">ไม่สามารถโหลดคูปองได้</h2>
+            <h2 className="mb-2 text-xl font-semibold text-text-main">ไม่สามารถโหลดคูปองได้</h2>
             <p className="text-sm text-rose-500">{couponsResult.error}</p>
           </div>
         ) : coupons.length === 0 ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
-            <Ticket className="mx-auto mb-4 h-16 w-16 text-gray-300" />
-            <h2 className="mb-2 text-xl font-semibold text-pop-black">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
-            <p className="mb-6 text-gray-500">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
+          <div className="ui-panel px-6 py-20 text-center">
+            <Ticket className="mx-auto mb-4 h-16 w-16 text-muted-text/40" />
+            <h2 className="mb-2 text-xl font-semibold text-text-main">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
+            <p className="mb-6 text-muted-text">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
             <Link
               href="/shop"
-              className="inline-flex rounded-full bg-pop-pink px-8 py-3 font-bold text-white transition hover:bg-pop-red"
+              className="inline-flex rounded-full bg-brand-primary px-8 py-3 font-bold text-white transition hover:bg-brand-primary-hover"
             >
               ไปช้อปปิ้งกันก่อน
             </Link>
@@ -84,11 +84,11 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
             {coupons.map((coupon) => (
               <article
                 key={coupon.id}
-                className="relative overflow-hidden rounded-3xl bg-white p-8 shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
+                className="ui-card ui-card-hover relative overflow-hidden p-8"
               >
                 <div className="space-y-6">
                   <div className="flex items-start justify-between gap-4">
-                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-pop-bg text-pop-pink">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface-page text-brand-primary">
                       <Ticket className="h-6 w-6" />
                     </div>
                     {coupon.expiresAt && (
@@ -99,23 +99,23 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
                   </div>
 
                   <div>
-                    <h3 className="mb-1 text-3xl font-black text-pop-black">
+                    <h3 className="mb-1 text-3xl font-black text-text-main">
                       {formatDiscount(coupon.type, coupon.value)}
                     </h3>
-                    <p className="text-sm text-gray-500">
+                    <p className="text-sm text-muted-text">
                       เมื่อซื้อครบ {coupon.minPurchase} บาท
                     </p>
                   </div>
 
-                  <div className="rounded-xl border border-dashed border-pop-pink/40 bg-pop-bg p-3 text-center">
-                    <span className="font-mono font-bold uppercase tracking-widest text-pop-pink">
+                  <div className="rounded-xl border border-dashed border-brand-primary/40 bg-surface-page p-3 text-center">
+                    <span className="font-mono font-bold uppercase tracking-widest text-brand-primary">
                       {coupon.code}
                     </span>
                   </div>
 
                   <Link
                     href={`/shop?coupon=${encodeURIComponent(coupon.code)}`}
-                    className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black py-4 font-bold text-white transition hover:bg-pop-pink"
+                    className="flex w-full items-center justify-center gap-2 rounded-full bg-text-main py-4 font-bold text-white transition hover:bg-brand-primary"
                   >
                     ช้อปพร้อมใช้คูปองเลย
                     <ArrowRight className="h-4 w-4" />
diff --git a/apps/website/src/app/[lang]/faq/page.tsx b/apps/website/src/app/[lang]/faq/page.tsx
index 3577434..28bf429 100644
--- a/apps/website/src/app/[lang]/faq/page.tsx
+++ b/apps/website/src/app/[lang]/faq/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 import { useState } from 'react'
 import Link from '@/components/LocalizedLink'
 
@@ -44,11 +44,11 @@ export default function FaqPage() {
   const activeFaqs = FAQS.find(f => f.category === activeCategory)
 
   return (
-    <div className="min-h-screen bg-pop-bg">
-      <div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Support</p>
-        <h1 className="text-5xl font-bold text-pop-black">Frequently Asked Questions</h1>
-        <p className="mx-auto max-w-lg text-gray-600">Everything you need to know about HomAroma products, shipping, and care.</p>
+    <div className="min-h-screen bg-surface-page text-text-main">
+      <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
+        <p className="ui-eyebrow">Support</p>
+        <h1 className="text-5xl font-bold text-text-main">Frequently Asked Questions</h1>
+        <p className="mx-auto max-w-lg text-muted-text">Everything you need to know about HomAroma products, shipping, and care.</p>
       </div>
 
       <div className="mx-auto max-w-4xl space-y-10 px-6 py-16">
@@ -59,8 +59,8 @@ export default function FaqPage() {
               onClick={() => setActiveCategory(category)}
               className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
                 activeCategory === category
-                  ? 'bg-pop-black text-white shadow-brutal'
-                  : 'border border-gray-200 bg-white text-pop-black hover:border-pop-pink hover:text-pop-pink'
+                  ? 'ui-tab-button-active bg-text-main text-white shadow-card'
+                  : 'ui-tab-button-inactive border border-line-primary/20 bg-surface-card hover:border-brand-primary hover:text-brand-primary'
               }`}
             >
               <span>{icon}</span> {category}
@@ -73,17 +73,17 @@ export default function FaqPage() {
             const key = `${activeCategory}-${i}`
             const isOpen = openItems[key]
             return (
-              <div key={key} className={`overflow-hidden rounded-2xl border bg-white shadow-brutal transition-all duration-300 ${isOpen ? 'border-pop-pink/30' : 'border-gray-100'}`}>
+              <div key={key} className={`overflow-hidden rounded-2xl border bg-surface-card shadow-card transition-all duration-300 ${isOpen ? 'border-brand-primary/30' : 'border-line-primary/20'}`}>
                 <button onClick={() => toggle(key)} className="flex w-full items-start justify-between gap-4 px-6 py-5 text-left">
-                  <span className="text-sm font-semibold leading-snug text-pop-black md:text-base">{item.q}</span>
-                  <svg className={`h-5 w-5 shrink-0 text-pop-pink transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <span className="text-sm font-semibold leading-snug text-text-main md:text-base">{item.q}</span>
+                  <svg className={`h-5 w-5 shrink-0 text-brand-primary transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                   </svg>
                 </button>
                 {isOpen && (
                   <div className="px-6 pb-6">
-                    <div className="mb-4 h-px w-full bg-gray-100" />
-                    <p className="text-sm leading-relaxed text-gray-600">{item.a}</p>
+                    <div className="mb-4 h-px w-full bg-line-primary/10" />
+                    <p className="text-sm leading-relaxed text-muted-text">{item.a}</p>
                   </div>
                 )}
               </div>
@@ -91,11 +91,11 @@ export default function FaqPage() {
           })}
         </div>
 
-        <div className="mt-12 space-y-4 rounded-3xl border border-gray-100 bg-white p-8 text-center shadow-brutal">
+        <div className="ui-panel mt-12 space-y-4 p-8 text-center">
           <div className="text-3xl">💬</div>
-          <h3 className="text-xl font-bold text-pop-black">Still have questions?</h3>
-          <p className="text-sm text-gray-600">Our team is here to help — usually responds within 2 hours.</p>
-          <Link href="/contact" className="inline-block rounded-full bg-pop-black px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-pop-pink">
+          <h3 className="text-xl font-bold text-text-main">Still have questions?</h3>
+          <p className="text-sm text-muted-text">Our team is here to help — usually responds within 2 hours.</p>
+          <Link href="/contact" className="inline-block rounded-full bg-text-main px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-brand-primary">
             Contact Us
           </Link>
         </div>
diff --git a/apps/website/src/app/[lang]/layout.tsx b/apps/website/src/app/[lang]/layout.tsx
index 6194bb5..d4bb9fb 100644
--- a/apps/website/src/app/[lang]/layout.tsx
+++ b/apps/website/src/app/[lang]/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import { Sarabun } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import '../globals.css';
 import Navbar from '@/components/Navbar';
@@ -10,13 +9,6 @@ import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
 import type { MenuItem, StoreSettings } from '@homaroma/types';
 import { isSupportedLocale } from '@/lib/locales';
 
-const sarabun = Sarabun({
-  subsets: ['thai', 'latin'],
-  weight: ['300', '400', '500', '600', '700', '800'],
-  display: 'swap',
-  variable: '--font-sarabun',
-});
-
 export const metadata: Metadata = {
   title: 'HomAroma',
   description: 'Pure Origins, Artisan Craft, Zero Compromise',
@@ -104,8 +96,8 @@ export default async function RootLayout({
   ]);
 
   return (
-    <html lang={lang} className={`${lang === 'th' ? sarabun.variable : ''} scroll-smooth`}>
-      <body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
+    <html lang={lang} className="scroll-smooth">
+      <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
           <main className="global-main">
diff --git a/apps/website/src/app/[lang]/order/[id]/page.tsx b/apps/website/src/app/[lang]/order/[id]/page.tsx
index 4d1f9e5..3113e73 100644
--- a/apps/website/src/app/[lang]/order/[id]/page.tsx
+++ b/apps/website/src/app/[lang]/order/[id]/page.tsx
@@ -1,4 +1,5 @@
 import Link from '@/components/LocalizedLink'
+import Image from 'next/image'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
@@ -28,11 +29,11 @@ function statusLabel(status: string) {
 }
 
 function statusTone(status: string) {
-  if (status === 'PENDING_PAYMENT') return 'bg-amber-50 text-amber-700 border-amber-100'
-  if (status === 'PAID' || status === 'PROCESSING') return 'bg-emerald-50 text-emerald-700 border-emerald-100'
-  if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-sky-50 text-sky-700 border-sky-100'
+  if (status === 'PENDING_PAYMENT') return 'bg-brand-warm/15 text-amber-700 border-amber-100'
+  if (status === 'PAID' || status === 'PROCESSING') return 'bg-brand-success/20 text-emerald-700 border-emerald-100'
+  if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-brand-cool/40 text-sky-700 border-sky-100'
   if (status === 'CANCELLED') return 'bg-rose-50 text-rose-700 border-rose-100'
-  return 'bg-gray-50 text-gray-700 border-gray-100'
+  return 'bg-surface-page text-muted-text border-line-primary/20'
 }
 
 export async function generateMetadata({ params }: { params: Promise<{ id: string, lang: string }> }): Promise<Metadata> {
@@ -68,15 +69,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
     if (orderResult.status === 404) notFound()
 
     return (
-      <main className="min-h-[70vh] bg-pop-bg">
+      <main className="min-h-[70vh] bg-surface-page">
         {announcementSections.length > 0 && (
           <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
         )}
         <section className="mx-auto max-w-3xl px-6 py-24 text-center">
-          <div className="rounded-3xl border border-rose-100 bg-white p-10 shadow-brutal">
-            <h1 className="text-2xl font-semibold text-pop-black">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
+          <div className="ui-panel border border-rose-100 p-10">
+            <h1 className="text-2xl font-semibold text-text-main">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
             <p className="mt-3 text-sm text-rose-500">{orderResult.error}</p>
-            <Link href="/track" className="mt-6 inline-flex font-semibold text-pop-pink">กลับไปค้นหาคำสั่งซื้อ</Link>
+            <Link href="/track" className="mt-6 inline-flex font-semibold text-brand-primary">กลับไปค้นหาคำสั่งซื้อ</Link>
           </div>
         </section>
       </main>
@@ -87,76 +88,78 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
   const subtotal = order.subtotal ?? Math.max(0, order.totalAmount - order.shippingFee)
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
 
       <section className="mx-auto max-w-4xl space-y-8 px-6 py-16 md:py-20">
         <div className="text-center">
-          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
             <CheckCircle2 className="h-10 w-10" />
           </div>
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Order Status</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">
+          <p className="ui-eyebrow">Order Status</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">
             {orderLabel(order.id)}
           </h1>
-          <p className="mt-3 text-gray-600">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
+          <p className="mt-3 text-muted-text">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
         </div>
 
         <section className="grid gap-5 md:grid-cols-3">
-          <article className="rounded-3xl bg-white p-6 shadow-brutal">
-            <Clock className="mb-4 h-6 w-6 text-pop-pink" />
-            <p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Created</p>
-            <p className="mt-2 font-semibold text-pop-black">
+          <article className="ui-panel p-6">
+            <Clock className="mb-4 h-6 w-6 text-brand-primary" />
+            <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Created</p>
+            <p className="mt-2 font-semibold text-text-main">
               {new Date(order.createdAt).toLocaleDateString('th-TH')}
             </p>
           </article>
-          <article className="rounded-3xl bg-white p-6 shadow-brutal">
-            <PackageCheck className="mb-4 h-6 w-6 text-pop-pink" />
-            <p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Status</p>
+          <article className="ui-panel p-6">
+            <PackageCheck className="mb-4 h-6 w-6 text-brand-primary" />
+            <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Status</p>
             <span className={`mt-3 inline-flex rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${statusTone(order.status)}`}>
               {statusLabel(order.status)}
             </span>
           </article>
-          <article className="rounded-3xl bg-white p-6 shadow-brutal">
-            <Truck className="mb-4 h-6 w-6 text-pop-pink" />
-            <p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Tracking No.</p>
-            <p className="mt-2 font-semibold text-pop-black">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
+          <article className="ui-panel p-6">
+            <Truck className="mb-4 h-6 w-6 text-brand-primary" />
+            <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Tracking No.</p>
+            <p className="mt-2 font-semibold text-text-main">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
           </article>
         </section>
 
-        <section className="rounded-3xl bg-white p-8 shadow-brutal">
-          <h2 className="border-b border-gray-100 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-pop-pink">
+        <section className="ui-panel p-8">
+          <h2 className="border-b border-line-primary/20 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-brand-primary">
             Order Items
           </h2>
           <div className="mt-6 space-y-4">
             {order.items.map((item) => (
-              <div key={item.id} className="flex items-center gap-4 rounded-2xl bg-pop-bg p-4">
-                <div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-white">
-                  <img
+              <div key={item.id} className="flex items-center gap-4 rounded-2xl bg-surface-page p-4">
+                <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-card">
+                  <Image
                     src={item.productImage || '/images/oil_ozone.png'}
                     alt={item.productName}
+                    fill
+                    unoptimized
                     className="h-full w-full object-cover"
                   />
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="font-semibold text-pop-black">{item.productName}</p>
-                  <p className="text-sm text-gray-500">
+                  <p className="font-semibold text-text-main">{item.productName}</p>
+                  <p className="text-sm text-muted-text">
                     {item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}
                   </p>
                 </div>
-                <p className="font-bold text-pop-pink">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
+                <p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
               </div>
             ))}
           </div>
 
-          <div className="mt-6 space-y-3 border-t border-gray-100 pt-5 text-sm">
-            <div className="flex justify-between text-gray-500">
+          <div className="mt-6 space-y-3 border-t border-line-primary/20 pt-5 text-sm">
+            <div className="flex justify-between text-muted-text">
               <span>Subtotal</span>
               <span>{formatPrice(subtotal)}</span>
             </div>
-            <div className="flex justify-between text-gray-500">
+            <div className="flex justify-between text-muted-text">
               <span>Shipping Fee</span>
               <span>{formatPrice(order.shippingFee)}</span>
             </div>
@@ -166,15 +169,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
                 <span>-{formatPrice(order.discountAmount)}</span>
               </div>
             )}
-            <div className="flex justify-between border-t border-gray-100 pt-4 text-lg font-bold text-pop-black">
+            <div className="flex justify-between border-t border-line-primary/20 pt-4 text-lg font-bold text-text-main">
               <span>Total</span>
-              <span className="text-pop-pink">{formatPrice(order.totalAmount)}</span>
+              <span className="text-brand-primary">{formatPrice(order.totalAmount)}</span>
             </div>
           </div>
         </section>
 
         {order.status === 'PENDING_PAYMENT' && (
-          <section className="rounded-3xl border border-amber-100 bg-amber-50 p-6 text-amber-800">
+          <section className="rounded-3xl border border-amber-100 bg-brand-warm/15 p-6 text-amber-800">
             <h2 className="font-semibold">คำสั่งซื้อนี้ยังรอการชำระเงิน</h2>
             <p className="mt-2 text-sm leading-relaxed">
               หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน website จะย้ายมาในรอบถัดไป เพื่อไม่ทำ workaround ที่เสี่ยงกับ payment flow
@@ -183,10 +186,10 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
         )}
 
         <div className="flex flex-wrap justify-center gap-3">
-          <Link href="/track" className="rounded-full bg-white px-6 py-3 font-semibold text-pop-black shadow-brutal transition hover:text-pop-pink">
+          <Link href="/track" className="rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main shadow-card transition hover:text-brand-primary">
             ค้นหาออเดอร์อื่น
           </Link>
-          <Link href="/shop" className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white transition hover:bg-pop-red">
+          <Link href="/shop" className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white transition hover:bg-brand-primary-hover">
             กลับไปช้อปต่อ
           </Link>
         </div>
diff --git a/apps/website/src/app/[lang]/page.tsx b/apps/website/src/app/[lang]/page.tsx
index 0bf6e8f..9d29266 100644
--- a/apps/website/src/app/[lang]/page.tsx
+++ b/apps/website/src/app/[lang]/page.tsx
@@ -32,7 +32,7 @@ export default async function HomePage({ params }: Props) {
   const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
 
   return (
-    <div className="min-h-screen bg-pop-bg">
+    <div className="min-h-screen bg-surface-page text-text-main">
       {sections.length > 0 ? (
         <>
           {announcementSections.length > 0 && (
@@ -47,13 +47,13 @@ export default async function HomePage({ params }: Props) {
         </>
       ) : (
         <section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center">
-          <p className="mb-4 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
+          <p className="mb-4 ui-eyebrow">
             HomAroma
           </p>
-          <h1 className="text-5xl font-semibold text-pop-black md:text-7xl">
+          <h1 className="text-5xl font-semibold text-text-main md:text-7xl">
             Premium scents for calmer spaces
           </h1>
-          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-text">
             The home CMS layout is unavailable right now, so this SEO-safe fallback keeps the page meaningful while the API is checked.
           </p>
         </section>
diff --git a/apps/website/src/app/[lang]/products/[id]/page.tsx b/apps/website/src/app/[lang]/products/[id]/page.tsx
index c365662..b1159e4 100644
--- a/apps/website/src/app/[lang]/products/[id]/page.tsx
+++ b/apps/website/src/app/[lang]/products/[id]/page.tsx
@@ -1,4 +1,5 @@
 import Link from '@/components/LocalizedLink'
+import Image from 'next/image'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
@@ -58,15 +59,15 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
     if (productResult.status === 404) notFound()
 
     return (
-      <div className="min-h-screen bg-pop-bg">
+      <div className="min-h-screen bg-surface-page text-text-main">
         {announcementSections.length > 0 && (
           <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
         )}
         <div className="px-6 py-20">
-          <div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Unable to load this product</p>
+          <div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
+            <p className="text-lg font-semibold text-text-main">Unable to load this product</p>
             <p className="mt-2 text-sm text-rose-500">{productResult.error}</p>
-            <Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
+            <Link href="/shop" className="mt-6 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
           </div>
         </div>
       </div>
@@ -81,32 +82,34 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
   const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
 
   return (
-    <div className="min-h-screen bg-pop-bg pb-24 md:pb-0">
+    <div className="min-h-screen bg-surface-page pb-24 text-text-main md:pb-0">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
       <div className="mx-auto max-w-7xl space-y-16 px-6 py-14 md:py-20">
-        <nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-400">
-          <Link href="/" className="transition hover:text-pop-pink">Home</Link>
+        <nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text/70">
+          <Link href="/" className="transition hover:text-brand-primary">Home</Link>
           <span>/</span>
-          <Link href="/shop" className="transition hover:text-pop-pink">Shop</Link>
+          <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
           <span>/</span>
-          <Link href={`/category/${product.category.id}`} className="transition hover:text-pop-pink">
+          <Link href={`/category/${product.category.id}`} className="transition hover:text-brand-primary">
             {categoryName}
           </Link>
           <span>/</span>
-          <span className="text-pop-black">{productName}</span>
+          <span className="text-text-main">{productName}</span>
         </nav>
 
         <section className="grid gap-10 md:grid-cols-2 md:gap-16">
-          <div className="relative overflow-hidden rounded-3xl bg-white shadow-brutal">
-            <img
+          <div className="relative overflow-hidden rounded-3xl bg-surface-card shadow-card">
+            <Image
               src={imageUrl}
-              className="aspect-square h-full w-full object-cover"
               alt={productName}
+              fill
+              unoptimized
+              className="aspect-square h-full w-full object-cover"
             />
             {categoryName && (
-              <div className="absolute left-5 top-5 rounded-full bg-white/90 px-4 py-2 text-xs font-bold uppercase tracking-widest text-pop-black shadow-sm">
+              <div className="absolute left-5 top-5 rounded-full bg-surface-card/90 px-4 py-2 text-xs font-bold uppercase tracking-widest text-text-main shadow-sm">
                 {categoryName}
               </div>
             )}
@@ -116,10 +119,10 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
         </section>
 
         {details && (
-          <section className="rounded-3xl bg-white p-8 shadow-brutal md:p-12">
-            <h2 className="mb-6 text-3xl font-semibold text-pop-black">Product Details</h2>
+          <section className="ui-panel p-8 md:p-12">
+            <h2 className="mb-6 text-3xl font-semibold text-text-main">Product Details</h2>
             <div
-              className="product-editorial leading-relaxed text-gray-600"
+              className="product-editorial leading-relaxed text-muted-text"
               dangerouslySetInnerHTML={{ __html: details }}
             />
           </section>
@@ -127,14 +130,14 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
 
         {related.length > 0 && (
           <section className="space-y-8">
-            <div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
+            <div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
               <div>
-                <p className="mb-2 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
+                <p className="mb-2 ui-eyebrow">
                   More {categoryName}
                 </p>
-                <h2 className="text-3xl font-semibold text-pop-black">Related Products</h2>
+                <h2 className="text-3xl font-semibold text-text-main">Related Products</h2>
               </div>
-              <Link href={`/category/${product.category.id}`} className="font-semibold text-pop-pink transition hover:text-pop-red">
+              <Link href={`/category/${product.category.id}`} className="font-semibold text-brand-primary transition hover:text-brand-primary-hover">
                 View All &rarr;
               </Link>
             </div>
diff --git a/apps/website/src/app/[lang]/profile/page.tsx b/apps/website/src/app/[lang]/profile/page.tsx
index 629735e..ab4b9fd 100644
--- a/apps/website/src/app/[lang]/profile/page.tsx
+++ b/apps/website/src/app/[lang]/profile/page.tsx
@@ -32,7 +32,7 @@ export default async function ProfilePage({ params }: { params: Promise<{ lang:
   }
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
@@ -41,12 +41,12 @@ export default async function ProfilePage({ params }: { params: Promise<{ lang:
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
         <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
-          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
             <User className="h-8 w-8" />
           </div>
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Member Profile</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">โปรไฟล์ของฉัน</h1>
-          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+          <p className="ui-eyebrow">Member Profile</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">โปรไฟล์ของฉัน</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-text">
             ตรวจสอบประวัติคำสั่งซื้อ คะแนนสะสม และจัดการที่อยู่จัดส่งสำหรับการสั่งซื้อครั้งถัดไป
           </p>
         </section>
diff --git a/apps/website/src/app/[lang]/scent-guide/page.tsx b/apps/website/src/app/[lang]/scent-guide/page.tsx
index 0bddb5c..09a225a 100644
--- a/apps/website/src/app/[lang]/scent-guide/page.tsx
+++ b/apps/website/src/app/[lang]/scent-guide/page.tsx
@@ -1,4 +1,5 @@
 import Link from '@/components/LocalizedLink'
+import Image from 'next/image'
 import { generateSeoMetadata } from '@/lib/seo'
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import { getArticlesResult, getCategoriesResult, getCmsPageResult } from '@/lib/cms'
@@ -32,28 +33,28 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-pop-bg">
+    <div className="flex min-h-screen flex-col bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
-          <p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Journal</p>
-          <h1 className="text-5xl font-bold text-pop-black">Scent Guide</h1>
-          <p className="mx-auto max-w-lg text-gray-600">Explore our collection of articles, guides, and sensory knowledge.</p>
+        <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
+          <p className="ui-eyebrow">Journal</p>
+          <h1 className="text-5xl font-bold text-text-main">Scent Guide</h1>
+          <p className="mx-auto max-w-lg text-muted-text">Explore our collection of articles, guides, and sensory knowledge.</p>
         </div>
       )}
 
       <div className="mx-auto w-full max-w-7xl flex-1 px-6 py-16">
         {!articlesResult.ok ? (
-          <div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Unable to load articles</p>
+          <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">Unable to load articles</p>
             <p className="mt-2 text-sm text-rose-500">{articlesResult.error}</p>
           </div>
         ) : articles.length === 0 ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center italic text-gray-500 shadow-brutal">
+          <div className="ui-panel px-6 py-20 text-center italic text-muted-text">
             Articles coming soon. Check back later!
           </div>
         ) : (
@@ -62,23 +63,25 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
               <Link
                 key={article.id}
                 href={`/article/${article.slug}`}
-                className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover"
+                className="ui-card ui-card-hover group flex flex-col overflow-hidden border border-line-primary/20 bg-surface-card"
               >
-                <div className="aspect-[4/3] shrink-0 overflow-hidden bg-pop-bg">
+                <div className="aspect-[4/3] shrink-0 overflow-hidden bg-surface-page">
                   {article.coverImage ? (
-                    <img src={article.coverImage} alt={article.title} className="h-full w-full object-cover transition-all duration-500 group-hover:scale-105" />
+                    <div className="relative h-full w-full">
+                      <Image src={article.coverImage} alt={article.title} fill unoptimized className="h-full w-full object-cover transition-all duration-500 group-hover:scale-105" />
+                    </div>
                   ) : (
-                    <div className="flex h-full w-full items-center justify-center bg-pop-bg">
-                      <span className="text-sm uppercase tracking-widest text-gray-500">No Image</span>
+                    <div className="flex h-full w-full items-center justify-center bg-surface-page">
+                      <span className="text-sm uppercase tracking-widest text-muted-text">No Image</span>
                     </div>
                   )}
                 </div>
                 <div className="flex flex-1 flex-col space-y-3 p-6">
-                  <p className="text-[10px] font-bold uppercase tracking-widest text-pop-pink">
+                  <p className="ui-eyebrow text-[10px]">
                     {new Date(article.createdAt).toLocaleDateString()}
                   </p>
-                  <h2 className="text-xl font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink">{article.title}</h2>
-                  <div className="line-clamp-3 text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: article.content }} />
+                  <h2 className="text-xl font-bold leading-tight text-text-main transition-colors group-hover:text-brand-primary">{article.title}</h2>
+                  <div className="line-clamp-3 text-sm text-muted-text" dangerouslySetInnerHTML={{ __html: article.content }} />
                 </div>
               </Link>
             ))}
diff --git a/apps/website/src/app/[lang]/search/page.tsx b/apps/website/src/app/[lang]/search/page.tsx
index c32cecc..f5a911c 100644
--- a/apps/website/src/app/[lang]/search/page.tsx
+++ b/apps/website/src/app/[lang]/search/page.tsx
@@ -36,28 +36,28 @@ export default async function SearchPage({ searchParams, params }: { searchParam
   }
 
   return (
-    <div className="min-h-screen bg-pop-bg">
+    <div className="min-h-screen bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Search</p>
-          <h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">Find Your Scent</h1>
+        <section className="border-b border-line-primary/20 bg-surface-card px-6 py-16 text-center">
+          <p className="ui-eyebrow">Search</p>
+          <h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">Find Your Scent</h1>
         </section>
       )}
 
-      <section className="border-b border-gray-100 bg-white/70 px-6 py-8">
-        <form className="mx-auto flex max-w-xl overflow-hidden rounded-full border border-gray-200 bg-white shadow-brutal" action="/search">
+      <section className="border-b border-line-primary/20 bg-surface-card/70 px-6 py-8">
+        <form className="mx-auto flex max-w-xl overflow-hidden rounded-full border border-line-primary/20 bg-surface-card shadow-card" action="/search">
           <input
             name="q"
             defaultValue={query}
             placeholder="Search by scent or product name..."
-            className="min-w-0 flex-1 px-5 py-3 text-sm text-pop-black outline-none placeholder:text-gray-400"
+            className="min-w-0 flex-1 px-5 py-3 text-sm text-text-main outline-none placeholder:text-muted-text/70"
           />
-          <button className="bg-pop-black px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
+          <button className="bg-text-main px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
             Search
           </button>
         </form>
@@ -72,7 +72,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
                 <Link
                   key={category.id}
                   href={`/search?q=${encodeURIComponent(name)}`}
-                  className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-xs font-semibold text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
+                  className="rounded-full border border-line-primary/20 bg-surface-card px-4 py-1.5 text-xs font-semibold text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
                 >
                   {name}
                 </Link>
@@ -82,7 +82,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
         )}
 
         {query && (
-          <p className="mt-5 text-center text-sm text-gray-500">
+          <p className="mt-5 text-center text-sm text-muted-text">
             {products.length > 0
               ? `Found ${products.length} result${products.length !== 1 ? 's' : ''} for "${query}"`
               : `No results for "${query}"`}
@@ -92,22 +92,22 @@ export default async function SearchPage({ searchParams, params }: { searchParam
 
       <div className="mx-auto max-w-7xl px-6 py-12">
         {!query ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Type something to search</p>
-            <Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
+          <div className="ui-panel px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">Type something to search</p>
+            <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">
               Browse All Products &rarr;
             </Link>
           </div>
         ) : !productsResult.ok ? (
-          <div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Unable to search products</p>
+          <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">Unable to search products</p>
             <p className="mt-2 text-sm text-rose-500">{productsResult.error}</p>
           </div>
         ) : products.length === 0 ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">No products found</p>
-            <p className="mt-2 text-sm text-gray-500">Try a different scent name or keyword.</p>
-            <Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
+          <div className="ui-panel px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">No products found</p>
+            <p className="mt-2 text-sm text-muted-text">Try a different scent name or keyword.</p>
+            <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">
               Browse All Products &rarr;
             </Link>
           </div>
diff --git a/apps/website/src/app/[lang]/shop/page.tsx b/apps/website/src/app/[lang]/shop/page.tsx
index 71d94be..5c71ebb 100644
--- a/apps/website/src/app/[lang]/shop/page.tsx
+++ b/apps/website/src/app/[lang]/shop/page.tsx
@@ -42,7 +42,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
   }
 
   return (
-    <div className="min-h-screen bg-pop-bg">
+    <div className="min-h-screen bg-surface-page text-text-main">
       <ShopCouponBridge coupon={coupon} />
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
@@ -50,10 +50,10 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">All Products</p>
-          <h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">The Collection</h1>
-          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+        <section className="border-b border-line-primary bg-surface-card px-6 py-16 text-center">
+          <p className="ui-eyebrow">All Products</p>
+          <h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">The Collection</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-text">
             Browse our full range of premium aroma products crafted to elevate every space.
           </p>
         </section>
@@ -61,7 +61,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
 
       <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
         <div className="flex flex-wrap gap-3">
-          <Link className="rounded-full bg-pop-black px-5 py-2 text-xs font-bold uppercase tracking-widest text-white" href="/shop">
+          <Link className="rounded-full bg-text-main px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary" href="/shop">
             All
           </Link>
           {categories.map((category) => {
@@ -70,7 +70,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
               <Link
                 key={category.id}
                 href={`/category/${category.id}`}
-                className="rounded-full border border-gray-200 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
+                className="rounded-full border border-line-primary bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
               >
                 {name}
                 {category._count && <span className="ml-2 opacity-60">({category._count.products})</span>}
@@ -80,21 +80,21 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
         </div>
 
         <div className="flex items-center justify-between">
-          <p className="text-sm text-gray-500">{products.length} products</p>
-          <Link href="/search" className="text-sm font-semibold text-pop-pink transition hover:text-pop-red">
+          <p className="text-sm text-muted-text">{products.length} products</p>
+          <Link href="/search" className="text-sm font-semibold text-brand-primary transition hover:text-brand-primary-hover">
             Search products
           </Link>
         </div>
 
         {apiError ? (
-          <div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">Unable to load products</p>
+          <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">Unable to load products</p>
             <p className="mt-2 text-sm text-rose-500">{apiError}</p>
           </div>
         ) : products.length === 0 ? (
-          <div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
-            <p className="text-lg font-semibold text-pop-black">No products found</p>
-            <p className="mt-2 text-sm text-gray-500">Please check back soon.</p>
+          <div className="ui-panel px-6 py-20 text-center">
+            <p className="text-lg font-semibold text-text-main">No products found</p>
+            <p className="mt-2 text-sm text-muted-text">Please check back soon.</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
diff --git a/apps/website/src/app/[lang]/track/page.tsx b/apps/website/src/app/[lang]/track/page.tsx
index 1457229..498d05a 100644
--- a/apps/website/src/app/[lang]/track/page.tsx
+++ b/apps/website/src/app/[lang]/track/page.tsx
@@ -32,7 +32,7 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
   }
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
@@ -41,12 +41,12 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
         <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
-          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
             <MapPin className="h-8 w-8" />
           </div>
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1>
-          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+          <p className="ui-eyebrow">Track Order</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">Track Your Status</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-text">
             กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
           </p>
         </section>
diff --git a/apps/website/src/app/[lang]/wishlist/page.tsx b/apps/website/src/app/[lang]/wishlist/page.tsx
index 5d8fc74..d2c8c02 100644
--- a/apps/website/src/app/[lang]/wishlist/page.tsx
+++ b/apps/website/src/app/[lang]/wishlist/page.tsx
@@ -32,7 +32,7 @@ export default async function WishlistPage({ params }: { params: Promise<{ lang:
   }
 
   return (
-    <main className="min-h-[70vh] bg-pop-bg">
+    <main className="min-h-[70vh] bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
@@ -41,12 +41,12 @@ export default async function WishlistPage({ params }: { params: Promise<{ lang:
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
         <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
-          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-rose-500 shadow-brutal">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-rose-500 shadow-card">
             <Heart className="h-8 w-8 fill-current" />
           </div>
-          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Wishlist</p>
-          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Your Wishlist</h1>
-          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+          <p className="ui-eyebrow">Wishlist</p>
+          <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">Your Wishlist</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-text">
             Items you&apos;ve loved. Keep them here until you&apos;re ready to make them yours.
           </p>
         </section>
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index d7f19a5..c55bc4d 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -1,20 +1,39 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
+  --font-body: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
+  --font-display: var(--font-body);
+  --font-sans: var(--font-body);
 
-  --color-pop-pink: #FF6B6B;
-  --color-pop-yellow: #FFF200;
-  --color-pop-orange: #FFA07A;
-  --color-pop-red: #FF4500;
-  --color-pop-cyan: #E0FFFF;
-  --color-pop-green: #98FB98;
-  --color-pop-purple: #D8BFD8;
-  --color-pop-bg: #FFF0F5;
-  --color-pop-black: #333333;
+  --color-brand-primary: #FF6B6B;
+  --color-brand-primary-hover: #FF4500;
+  --color-brand-accent: #FFF200;
+  --color-brand-warm: #FFA07A;
+  --color-brand-cool: #E0FFFF;
+  --color-brand-success: #98FB98;
+  --color-brand-soft: #D8BFD8;
+  --color-surface-page: #FFF0F5;
+  --color-surface-nav-rest: #F9F8F5;
+  --color-surface-card: #FFFFFF;
+  --color-text-main: #333333;
+  --color-muted-text: #666666;
+  --color-line-primary: #00B900;
+  --color-line-primary-hover: #009900;
 
-  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
-  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
+  --color-pop-pink: var(--color-brand-primary);
+  --color-pop-yellow: var(--color-brand-accent);
+  --color-pop-orange: var(--color-brand-warm);
+  --color-pop-red: var(--color-brand-primary-hover);
+  --color-pop-cyan: var(--color-brand-cool);
+  --color-pop-green: var(--color-brand-success);
+  --color-pop-purple: var(--color-brand-soft);
+  --color-pop-bg: var(--color-surface-page);
+  --color-pop-black: var(--color-text-main);
+
+  --shadow-card: 0 10px 25px rgba(0,0,0,0.05);
+  --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.1);
+  --shadow-brutal: var(--shadow-card);
+  --shadow-brutal-hover: var(--shadow-card-hover);
   
   --animate-pop-in: fade-in-up 0.6s ease-out forwards;
   --animate-spin-slow: spin 15s linear infinite;
@@ -27,14 +46,14 @@
 
 @layer base {
   body {
-    @apply bg-pop-bg text-pop-black font-sans antialiased;
+    @apply bg-surface-page text-text-main font-sans antialiased;
     background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
                       radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
     min-height: 100vh;
   }
 
   h1, h2, h3, h4 {
-    @apply text-pop-black font-semibold tracking-tight;
+    @apply text-text-main font-semibold tracking-tight;
   }
 }
 
@@ -48,11 +67,199 @@
   }
 
   .brutal-button {
-    @apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 hover:shadow-brutal-hover;
+    @apply px-8 py-4 bg-brand-primary text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
   }
 
   .brutal-button-alt {
-    @apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
+    @apply px-8 py-4 bg-white text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
+  }
+
+  .ui-card {
+    @apply rounded-2xl border border-gray-100 bg-surface-card shadow-card transition-all duration-300;
+  }
+
+  .ui-card-hover {
+    @apply hover:-translate-y-1 hover:shadow-card-hover;
+  }
+
+  .ui-button-primary {
+    @apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary;
+  }
+
+  .ui-button-brand {
+    @apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary-hover;
+  }
+
+  .ui-button-line {
+    @apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-line-primary-hover;
+  }
+
+  .ui-icon-button {
+    @apply rounded-full p-2 text-text-main transition-all hover:bg-brand-primary/10 hover:text-brand-primary md:p-2.5;
+  }
+
+  .ui-brand-wordmark {
+    @apply shrink-0 text-xl font-bold uppercase italic tracking-widest text-text-main md:text-2xl;
+  }
+
+  .ui-nav-chip {
+    @apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
+  }
+
+  .ui-nav-panel {
+    @apply overflow-hidden rounded-xl border border-text-main/10 bg-white/95 shadow-2xl backdrop-blur-xl;
+  }
+
+  .ui-menu-link {
+    @apply block w-full text-left text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary;
+  }
+
+  .ui-menu-link-compact {
+    @apply block w-full text-left text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary;
+  }
+
+  .ui-menu-title {
+    @apply text-xs font-bold uppercase tracking-widest text-text-main;
+  }
+
+  .ui-eyebrow {
+    @apply text-xs font-bold uppercase tracking-[0.24em] text-brand-primary;
+  }
+
+  .ui-muted-text {
+    @apply text-gray-600;
+  }
+
+  .ui-input-shell {
+    @apply rounded-2xl border border-gray-200 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
+  }
+
+  .ui-footer-link {
+    @apply transition-colors hover:text-brand-primary;
+  }
+
+  .ui-footer-social {
+    @apply flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-white;
+  }
+
+  .ui-section-band {
+    @apply px-6 py-20 md:py-24;
+  }
+
+  .ui-section-shell {
+    @apply mx-auto max-w-7xl;
+  }
+
+  .ui-section-title {
+    @apply text-3xl font-semibold text-text-main md:text-5xl;
+  }
+
+  .ui-section-subtitle {
+    @apply text-gray-500;
+  }
+
+  .ui-section-card {
+    @apply rounded-3xl bg-white shadow-card;
+  }
+
+  .ui-section-card-muted {
+    @apply rounded-3xl bg-surface-page shadow-card;
+  }
+
+  .ui-section-link {
+    @apply font-semibold text-brand-primary transition hover:text-brand-primary-hover;
+  }
+
+  .ui-accent-text {
+    @apply italic text-brand-accent;
+  }
+
+  .ui-panel {
+    @apply rounded-3xl bg-white shadow-card;
+  }
+
+  .ui-panel-muted {
+    @apply rounded-3xl bg-surface-page shadow-card;
+  }
+
+  .ui-panel-border {
+    @apply rounded-3xl border border-gray-100 bg-white shadow-card;
+  }
+
+  .ui-panel-header {
+    @apply flex items-center gap-3 border-b border-gray-100 pb-5;
+  }
+
+  .ui-panel-title {
+    @apply text-xl font-semibold text-text-main;
+  }
+
+  .ui-panel-subtitle {
+    @apply text-sm text-gray-500;
+  }
+
+  .ui-form-label {
+    @apply text-xs font-bold uppercase tracking-[0.18em] text-gray-500;
+  }
+
+  .ui-form-shell {
+    @apply w-full rounded-2xl border border-gray-200 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
+  }
+
+  .ui-form-shell-light {
+    @apply w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
+  }
+
+  .ui-form-inline-button {
+    @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
+  }
+
+  .ui-form-inline-button-sm {
+    @apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
+  }
+
+  .ui-form-secondary-button {
+    @apply rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600 transition hover:text-brand-primary;
+  }
+
+  .ui-form-danger-button {
+    @apply rounded-full border border-rose-100 p-2 text-rose-500 transition hover:bg-rose-50;
+  }
+
+  .ui-form-checkbox {
+    @apply h-4 w-4 rounded border-gray-300 text-brand-primary;
+  }
+
+  .ui-status-badge {
+    @apply rounded-full border px-3 py-1 text-xs font-bold;
+  }
+
+  .ui-avatar-shell {
+    @apply flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
+  }
+
+  .ui-avatar-shell-sm {
+    @apply flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
+  }
+
+  .ui-tab-button {
+    @apply relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition;
+  }
+
+  .ui-tab-button-active {
+    @apply text-brand-primary;
+  }
+
+  .ui-tab-button-inactive {
+    @apply text-gray-500 hover:text-text-main;
+  }
+
+  .ui-tab-count {
+    @apply rounded-full bg-surface-page px-2 py-0.5 text-[10px];
+  }
+
+  .ui-empty-panel {
+    @apply rounded-3xl bg-white px-6 py-16 text-center shadow-card;
   }
 }
 
@@ -62,7 +269,7 @@
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-pop-bg;
+  @apply bg-surface-page;
 }
 
 ::-webkit-scrollbar-thumb {
diff --git a/apps/website/src/components/AddToCartSection.tsx b/apps/website/src/components/AddToCartSection.tsx
index 6eb59ca..d7546b5 100644
--- a/apps/website/src/components/AddToCartSection.tsx
+++ b/apps/website/src/components/AddToCartSection.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import { useState } from 'react'
 import Link from './LocalizedLink'
@@ -41,30 +41,28 @@ export default function AddToCartSection({ product }: Props) {
       <div className="space-y-8">
         <div className="space-y-2">
           {categoryName && (
-            <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
-              {categoryName}
-            </p>
+            <p className="ui-eyebrow">{categoryName}</p>
           )}
-          <h1 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl">
+          <h1 className="text-4xl font-semibold leading-tight text-text-main md:text-6xl">
             {productName}
           </h1>
-          <p className="text-sm font-semibold uppercase tracking-widest text-gray-500">
+          <p className="text-sm font-semibold uppercase tracking-widest text-muted-text">
             Premium Collection
           </p>
         </div>
 
-        {description && <p className="leading-relaxed text-gray-600">{description}</p>}
+        {description && <p className="leading-relaxed text-muted-text">{description}</p>}
 
         <div className="flex items-baseline gap-3">
-          <span className="text-4xl font-bold text-pop-pink">
+          <span className="text-4xl font-bold text-brand-primary">
             {formatPrice(currentVariant?.price ?? product.price)}
           </span>
-          {currentVariant && <span className="text-sm text-gray-500">/ {currentVariant.size}</span>}
+          {currentVariant && <span className="text-sm text-muted-text">/ {currentVariant.size}</span>}
         </div>
 
         {product.variants.length > 0 && (
           <div className="space-y-3">
-            <p className="text-xs font-bold uppercase tracking-widest text-gray-500">Select Size</p>
+            <p className="text-xs font-bold uppercase tracking-widest text-muted-text">Select Size</p>
             <div className="flex flex-wrap gap-3">
               {product.variants.map((variant, index) => (
                 <button
@@ -72,12 +70,12 @@ export default function AddToCartSection({ product }: Props) {
                   onClick={() => setSelectedVariant(index)}
                   className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${
                     selectedVariant === index
-                      ? 'border-pop-pink bg-pop-pink text-white shadow-brutal'
-                      : 'border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
+                      ? 'border-brand-primary bg-brand-primary text-white shadow-card'
+                      : 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
                   }`}
                 >
                   {variant.size}
-                  <span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-gray-400'}`}>
+                  <span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-muted-text/70'}`}>
                     {formatPrice(variant.price)}
                   </span>
                 </button>
@@ -89,35 +87,35 @@ export default function AddToCartSection({ product }: Props) {
         <div className="hidden gap-4 md:flex">
           <button
             onClick={handleAddToCart}
-            className="flex-1 rounded-full bg-pop-black px-8 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
+            className="ui-form-inline-button flex-1"
           >
             Add to Cart
           </button>
           {categoryName && (
             <Link
               href={`/category/${product.category.id}`}
-              className="rounded-full border border-gray-200 bg-white px-8 py-4 font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
+              className="rounded-full border border-line-primary/20 bg-surface-card px-8 py-4 font-bold uppercase tracking-widest text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
             >
               {categoryName}
             </Link>
           )}
         </div>
 
-        <div className="grid grid-cols-2 gap-4 border-t border-gray-200 pt-6 text-sm text-gray-500">
+        <div className="grid grid-cols-2 gap-4 border-t border-line-primary/20 pt-6 text-sm text-muted-text">
           <div>
-            <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Scent</span>
-            <span className="font-semibold text-pop-black">{product.scent.name}</span>
+            <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-muted-text/70">Scent</span>
+            <span className="font-semibold text-text-main">{product.scent.name}</span>
           </div>
           <div>
-            <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Category</span>
-            <Link href={`/category/${product.category.id}`} className="font-semibold text-pop-black transition hover:text-pop-pink">
+            <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-muted-text/70">Category</span>
+            <Link href={`/category/${product.category.id}`} className="font-semibold text-text-main transition hover:text-brand-primary">
               {categoryName}
             </Link>
           </div>
         </div>
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
+      <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
         {product.variants.length > 1 && (
           <div className="mb-3 flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
             {product.variants.map((variant, index) => (
@@ -126,8 +124,8 @@ export default function AddToCartSection({ product }: Props) {
                 onClick={() => setSelectedVariant(index)}
                 className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${
                   selectedVariant === index
-                    ? 'border-pop-pink bg-pop-pink text-white'
-                    : 'border-gray-200 bg-white text-gray-500'
+                    ? 'border-brand-primary bg-brand-primary text-white'
+                    : 'border-line-primary/20 bg-surface-card text-muted-text'
                 }`}
               >
                 {variant.size}
@@ -137,14 +135,14 @@ export default function AddToCartSection({ product }: Props) {
         )}
         <div className="flex items-center justify-between gap-4">
           <div className="flex flex-col">
-            <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+            <span className="text-[10px] font-bold uppercase tracking-widest text-muted-text/70">
               {product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
             </span>
-            <span className="text-xl font-bold text-pop-pink">{formatPrice(currentVariant?.price ?? product.price)}</span>
+            <span className="text-xl font-bold text-brand-primary">{formatPrice(currentVariant?.price ?? product.price)}</span>
           </div>
           <button
             onClick={handleAddToCart}
-            className="flex-1 rounded-full bg-pop-black px-5 py-3.5 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
+            className="ui-form-inline-button flex-1 px-5 py-3.5"
           >
             Add to Cart
           </button>
diff --git a/apps/website/src/components/CartDrawer.tsx b/apps/website/src/components/CartDrawer.tsx
index 9fdb75f..59d766d 100644
--- a/apps/website/src/components/CartDrawer.tsx
+++ b/apps/website/src/components/CartDrawer.tsx
@@ -1,4 +1,5 @@
-"use client";
+"use client"
+import Image from 'next/image'
 import { X, ShoppingBag, Plus, Minus, Trash2 } from 'lucide-react'
 import Link from './LocalizedLink'
 import { useCartStore } from '../store/cartStore'
@@ -13,61 +14,60 @@ export default function CartDrawer() {
 
   return (
     <div className="fixed inset-0 z-[100] flex justify-end">
-      <div
-        className="absolute inset-0 bg-pop-black/45 backdrop-blur-sm"
-        onClick={() => toggleCart(false)}
-      />
+      <div className="absolute inset-0 bg-text-main/45 backdrop-blur-sm" onClick={() => toggleCart(false)} />
 
-      <div className="relative flex h-full w-full max-w-md flex-col border-l border-gray-200 bg-white shadow-2xl">
-        <div className="flex items-center justify-between border-b border-gray-100 bg-pop-bg/70 p-6">
-          <h2 className="flex items-center gap-2 text-xl font-bold text-pop-black">
-            <ShoppingBag className="h-5 w-5 text-pop-pink" />
+      <div className="relative flex h-full w-full max-w-md flex-col border-l border-line-primary/20 bg-surface-card shadow-2xl">
+        <div className="flex items-center justify-between border-b border-line-primary/20 bg-surface-page/70 p-6">
+          <h2 className="flex items-center gap-2 text-xl font-bold text-text-main">
+            <ShoppingBag className="h-5 w-5 text-brand-primary" />
             {t('cart.title')}
-            <span className="ml-2 rounded-full bg-white px-2 py-0.5 text-sm font-normal text-gray-500">
+            <span className="ml-2 rounded-full bg-surface-card px-2 py-0.5 text-sm font-normal text-muted-text">
               {t('cart.items', { count: items.length })}
             </span>
           </h2>
-          <button onClick={() => toggleCart(false)} className="rounded-full border border-gray-200 p-2 text-gray-500 transition-colors hover:text-pop-pink">
+          <button onClick={() => toggleCart(false)} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition-colors hover:text-brand-primary">
             <X className="h-5 w-5" />
           </button>
         </div>
 
         <div className="flex-1 space-y-6 overflow-y-auto p-6">
           {items.length === 0 ? (
-            <div className="flex h-full flex-col items-center justify-center space-y-4 text-gray-500">
+            <div className="flex h-full flex-col items-center justify-center space-y-4 text-muted-text">
               <ShoppingBag className="h-16 w-16 opacity-30" />
               <p>{t('cart.empty')}</p>
-              <button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-pop-pink hover:underline">
+              <button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-brand-primary hover:underline">
                 {t('cart.continueShopping')}
               </button>
             </div>
           ) : (
             items.map((item) => (
-              <div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-gray-100 bg-pop-bg/60 p-4">
-                <div className="h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-white">
-                  <img
+              <div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-line-primary/20 bg-surface-page/60 p-4">
+                <div className="relative h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-surface-card">
+                  <Image
                     src={item.productImage || '/images/oil_ozone.png'}
                     alt={item.productName}
+                    fill
+                    unoptimized
                     className="h-full w-full object-cover"
                   />
                 </div>
 
                 <div className="relative flex flex-1 flex-col space-y-1 pt-1">
-                  <h3 className="pr-6 text-sm font-bold leading-tight text-pop-black">{item.productName}</h3>
-                  {item.variantSize && <p className="text-xs text-gray-500">{item.variantSize}</p>}
-                  <p className="mt-auto text-sm font-bold text-pop-pink">{formatPrice(item.price)}</p>
+                  <h3 className="pr-6 text-sm font-bold leading-tight text-text-main">{item.productName}</h3>
+                  {item.variantSize && <p className="text-xs text-muted-text">{item.variantSize}</p>}
+                  <p className="mt-auto text-sm font-bold text-brand-primary">{formatPrice(item.price)}</p>
 
-                  <div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-gray-200 bg-white">
-                    <button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-pop-pink">
+                  <div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-line-primary/20 bg-surface-card">
+                    <button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-brand-primary">
                       <Minus className="h-4 w-4" />
                     </button>
                     <span className="w-4 text-center text-xs font-bold">{item.quantity}</span>
-                    <button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-pop-pink">
+                    <button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-brand-primary">
                       <Plus className="h-4 w-4" />
                     </button>
                   </div>
 
-                  <button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-gray-400 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
+                  <button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-muted-text/60 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
                     <Trash2 className="h-4 w-4" />
                   </button>
                 </div>
@@ -77,13 +77,13 @@ export default function CartDrawer() {
         </div>
 
         {items.length > 0 && (
-          <div className="space-y-6 border-t border-gray-100 bg-pop-bg/70 p-6">
+          <div className="space-y-6 border-t border-line-primary/20 bg-surface-page/70 p-6">
             <div className="flex items-center justify-between text-lg font-bold">
               <span>{t('cart.subtotal')}</span>
-              <span className="text-pop-pink">{formatPrice(getCartTotal())}</span>
+              <span className="text-brand-primary">{formatPrice(getCartTotal())}</span>
             </div>
-            <p className="text-center text-xs text-gray-500">{t('cart.shippingNote')}</p>
-            <Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-pop-black py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
+            <p className="text-center text-xs text-muted-text">{t('cart.shippingNote')}</p>
+            <Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
               {t('cart.proceed')}
             </Link>
           </div>
diff --git a/apps/website/src/components/CheckoutClient.tsx b/apps/website/src/components/CheckoutClient.tsx
index e232171..8a3e11e 100644
--- a/apps/website/src/components/CheckoutClient.tsx
+++ b/apps/website/src/components/CheckoutClient.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from 'next/image'
 import Link from './LocalizedLink'
 import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
@@ -386,20 +387,20 @@ export default function CheckoutClient() {
 
   if (!hydrated) {
     return (
-      <div className="rounded-3xl bg-white p-10 text-center shadow-brutal">
-        <Loader2 className="mx-auto h-8 w-8 animate-spin text-pop-pink" />
-        <p className="mt-4 text-sm font-semibold text-gray-500">กำลังโหลดตะกร้าสินค้า...</p>
+      <div className="ui-panel p-10 text-center">
+        <Loader2 className="mx-auto h-8 w-8 animate-spin text-brand-primary" />
+        <p className="mt-4 text-sm font-semibold text-muted-text">กำลังโหลดตะกร้าสินค้า...</p>
       </div>
     )
   }
 
   if (items.length === 0) {
     return (
-      <div className="mx-auto max-w-xl rounded-3xl bg-white p-10 text-center shadow-brutal">
-        <ShoppingBag className="mx-auto h-14 w-14 text-pop-pink" />
-        <h2 className="mt-5 text-3xl font-semibold text-pop-black">ตะกร้าสินค้าว่าง</h2>
-        <p className="mt-3 text-gray-600">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
-        <Link href="/shop" className="mt-8 inline-flex rounded-full bg-pop-black px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink">
+      <div className="ui-panel mx-auto max-w-xl p-10 text-center">
+        <ShoppingBag className="mx-auto h-14 w-14 text-brand-primary" />
+        <h2 className="mt-5 text-3xl font-semibold text-text-main">ตะกร้าสินค้าว่าง</h2>
+        <p className="mt-3 text-muted-text">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
+        <Link href="/shop" className="mt-8 inline-flex rounded-full bg-text-main px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
           กลับไปเลือกสินค้า
         </Link>
       </div>
@@ -412,58 +413,58 @@ export default function CheckoutClient() {
   return (
     <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_420px]">
       <form id="checkout-form" onSubmit={createOrder} className="space-y-6">
-        <section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
-          <div className="flex items-center gap-3 border-b border-gray-100 pb-5">
-            <UserRound className="h-5 w-5 text-pop-pink" />
+        <section className="ui-panel p-6 md:p-8">
+          <div className="ui-panel-header">
+            <UserRound className="h-5 w-5 text-brand-primary" />
             <div>
-              <h2 className="text-xl font-semibold text-pop-black">ข้อมูลผู้รับสินค้า</h2>
-              <p className="text-sm text-gray-500">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
+              <h2 className="ui-panel-title">ข้อมูลผู้รับสินค้า</h2>
+              <p className="ui-panel-subtitle">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
             </div>
           </div>
 
           <div className="mt-6 grid gap-5 md:grid-cols-2">
             <label className="space-y-2">
-              <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ชื่อผู้รับ *</span>
+              <span className="ui-form-label">ชื่อผู้รับ *</span>
               <input
                 required
                 value={formData.name}
                 onChange={(event) => setFormData((current) => ({ ...current, name: event.target.value }))}
-                className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                className="ui-form-shell"
                 placeholder="ชื่อ-นามสกุล"
               />
             </label>
             <label className="space-y-2">
-              <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">เบอร์โทรศัพท์ *</span>
+              <span className="ui-form-label">เบอร์โทรศัพท์ *</span>
               <input
                 required
                 pattern="[0-9]{9,10}"
                 title="กรุณากรอกเบอร์โทรศัพท์ 9-10 หลัก"
                 value={formData.phone}
                 onChange={(event) => setFormData((current) => ({ ...current, phone: event.target.value }))}
-                className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                className="ui-form-shell"
                 placeholder="0812345678"
               />
             </label>
             <label className="space-y-2 md:col-span-2">
-              <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อีเมล *</span>
+              <span className="ui-form-label">อีเมล *</span>
               <input
                 required
                 type="email"
                 value={formData.email}
                 onChange={(event) => setFormData((current) => ({ ...current, email: event.target.value }))}
-                className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                className="ui-form-shell"
                 placeholder="you@example.com"
               />
             </label>
           </div>
         </section>
 
-        <section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
-          <div className="flex items-center gap-3 border-b border-gray-100 pb-5">
-            <PackageCheck className="h-5 w-5 text-pop-pink" />
+        <section className="ui-panel p-6 md:p-8">
+          <div className="ui-panel-header">
+            <PackageCheck className="h-5 w-5 text-brand-primary" />
             <div>
-              <h2 className="text-xl font-semibold text-pop-black">ที่อยู่จัดส่ง</h2>
-              <p className="text-sm text-gray-500">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
+              <h2 className="ui-panel-title">ที่อยู่จัดส่ง</h2>
+              <p className="ui-panel-subtitle">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
             </div>
           </div>
 
@@ -474,8 +475,8 @@ export default function CheckoutClient() {
                   key={address.id}
                   className={`flex cursor-pointer gap-3 rounded-2xl border p-4 transition ${
                     selectedAddressId === address.id
-                      ? 'border-pop-pink bg-pop-bg'
-                      : 'border-gray-100 bg-white hover:border-pop-pink/40'
+                      ? 'border-brand-primary bg-surface-page'
+                      : 'border-line-primary bg-surface-card hover:border-brand-primary/40'
                   }`}
                 >
                   <input
@@ -483,25 +484,25 @@ export default function CheckoutClient() {
                     name="shippingAddress"
                     checked={selectedAddressId === address.id}
                     onChange={() => selectAddress(address)}
-                    className="mt-1 accent-pop-pink"
+                    className="mt-1 accent-brand-primary"
                   />
                   <span>
-                    <span className="block text-sm font-bold text-pop-black">
+                    <span className="block text-sm font-bold text-text-main">
                       {address.recipientName}
                       {address.isDefault && (
-                        <span className="ml-2 rounded-full bg-pop-pink/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-pop-pink">
+                        <span className="ml-2 rounded-full bg-brand-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-brand-primary">
                           default
                         </span>
                       )}
                     </span>
-                    <span className="mt-1 block text-xs text-gray-500">{address.phone}</span>
-                    <span className="mt-1 block text-sm text-gray-600">{formatAddress(address)}</span>
+                    <span className="mt-1 block text-xs text-muted-text">{address.phone}</span>
+                    <span className="mt-1 block text-sm text-text-main/80">{formatAddress(address)}</span>
                   </span>
                 </label>
               ))}
               <label
                 className={`flex cursor-pointer items-center gap-3 rounded-2xl border p-4 transition ${
-                  selectedAddressId === 'new' ? 'border-pop-pink bg-pop-bg' : 'border-gray-100 bg-white hover:border-pop-pink/40'
+                  selectedAddressId === 'new' ? 'border-brand-primary bg-surface-page' : 'border-line-primary bg-surface-card hover:border-brand-primary/40'
                 }`}
               >
                 <input
@@ -509,9 +510,9 @@ export default function CheckoutClient() {
                   name="shippingAddress"
                   checked={selectedAddressId === 'new'}
                   onChange={() => selectAddress('new')}
-                  className="accent-pop-pink"
+                  className="accent-brand-primary"
                 />
-                <span className="text-sm font-bold text-pop-black">กรอกที่อยู่ใหม่</span>
+                <span className="text-sm font-bold text-text-main">กรอกที่อยู่ใหม่</span>
               </label>
             </div>
           )}
@@ -519,49 +520,49 @@ export default function CheckoutClient() {
           {(savedAddresses.length === 0 || selectedAddressId === 'new') && (
             <div className="mt-6 grid gap-5 md:grid-cols-2">
               <label className="space-y-2 md:col-span-2">
-                <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">บ้านเลขที่ / ถนน / ซอย *</span>
+                <span className="ui-form-label">บ้านเลขที่ / ถนน / ซอย *</span>
                 <input
                   required={selectedAddressId === 'new' || savedAddresses.length === 0}
                   value={addressForm.addressLine}
                   onChange={(event) => setAddressForm((current) => ({ ...current, addressLine: event.target.value }))}
-                  className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                  className="ui-form-shell"
                   placeholder="บ้านเลขที่ หมู่บ้าน ถนน ซอย"
                 />
               </label>
               <label className="space-y-2">
-                <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ตำบล/แขวง *</span>
+                <span className="ui-form-label">ตำบล/แขวง *</span>
                 <input
                   required={selectedAddressId === 'new' || savedAddresses.length === 0}
                   value={addressForm.subdistrict}
                   onChange={(event) => setAddressForm((current) => ({ ...current, subdistrict: event.target.value }))}
-                  className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                  className="ui-form-shell"
                 />
               </label>
               <label className="space-y-2">
-                <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อำเภอ/เขต *</span>
+                <span className="ui-form-label">อำเภอ/เขต *</span>
                 <input
                   required={selectedAddressId === 'new' || savedAddresses.length === 0}
                   value={addressForm.district}
                   onChange={(event) => setAddressForm((current) => ({ ...current, district: event.target.value }))}
-                  className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                  className="ui-form-shell"
                 />
               </label>
               <label className="space-y-2">
-                <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">จังหวัด *</span>
+                <span className="ui-form-label">จังหวัด *</span>
                 <input
                   required={selectedAddressId === 'new' || savedAddresses.length === 0}
                   value={addressForm.province}
                   onChange={(event) => setAddressForm((current) => ({ ...current, province: event.target.value }))}
-                  className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                  className="ui-form-shell"
                 />
               </label>
               <label className="space-y-2">
-                <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">รหัสไปรษณีย์ *</span>
+                <span className="ui-form-label">รหัสไปรษณีย์ *</span>
                 <input
                   required={selectedAddressId === 'new' || savedAddresses.length === 0}
                   value={addressForm.zipcode}
                   onChange={(event) => setAddressForm((current) => ({ ...current, zipcode: event.target.value }))}
-                  className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                  className="ui-form-shell"
                   placeholder="10110"
                 />
               </label>
@@ -579,7 +580,7 @@ export default function CheckoutClient() {
         <button
           type="submit"
           disabled={submitting || loadingSettings}
-          className="flex w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:hidden"
+          className="ui-form-inline-button w-full justify-between lg:hidden"
         >
           <span className="flex items-center gap-2">
             {submitting && <Loader2 className="h-5 w-5 animate-spin" />}
@@ -590,55 +591,57 @@ export default function CheckoutClient() {
       </form>
 
       <aside className="lg:sticky lg:top-28 lg:self-start">
-        <section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
+        <section className="ui-panel p-6 md:p-8">
           <button
             type="button"
             onClick={() => setSummaryOpen((open) => !open)}
-            className="flex w-full items-center justify-between border-b border-gray-100 pb-5 text-left lg:pointer-events-none"
+            className="flex w-full items-center justify-between border-b border-line-primary pb-5 text-left lg:pointer-events-none"
           >
             <span>
-              <span className="block text-xl font-semibold text-pop-black">สรุปรายการ</span>
-              <span className="mt-1 block text-sm text-gray-500">{items.length} รายการในตะกร้า</span>
+              <span className="block text-xl font-semibold text-text-main">สรุปรายการ</span>
+              <span className="mt-1 block text-sm text-muted-text">{items.length} รายการในตะกร้า</span>
             </span>
-            <span className="font-bold text-pop-pink lg:hidden">{formatPrice(total)}</span>
+            <span className="font-bold text-brand-primary lg:hidden">{formatPrice(total)}</span>
           </button>
 
           <div className={`${summaryOpen ? 'block' : 'hidden'} mt-6 space-y-6 lg:block`}>
             <div className="space-y-4">
               {items.map((item) => (
                 <div key={item.cartItemId} className="flex gap-3">
-                  <div className="h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-pop-bg">
-                    <img
+                  <div className="relative h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-page">
+                    <Image
                       src={item.productImage || '/images/oil_ozone.png'}
                       alt={item.productName}
+                      fill
+                      unoptimized
                       className="h-full w-full object-cover"
                     />
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="text-sm font-bold text-pop-black">{item.productName}</p>
-                    <p className="mt-1 text-xs text-gray-500">{item.variantSize || 'Standard'} x {item.quantity}</p>
+                    <p className="text-sm font-bold text-text-main">{item.productName}</p>
+                    <p className="mt-1 text-xs text-muted-text">{item.variantSize || 'Standard'} x {item.quantity}</p>
                   </div>
-                  <p className="text-sm font-bold text-pop-pink">{formatPrice(item.price * item.quantity)}</p>
+                  <p className="text-sm font-bold text-brand-primary">{formatPrice(item.price * item.quantity)}</p>
                 </div>
               ))}
             </div>
 
-            <div className="border-t border-gray-100 pt-5">
+            <div className="border-t border-line-primary pt-5">
               {!appliedCoupon ? (
                 <div className="space-y-2">
-                  <label className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คูปองส่วนลด</label>
+                  <label className="ui-form-label">คูปองส่วนลด</label>
                   <div className="flex gap-2">
                     <input
                       value={couponCode}
                       onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
                       placeholder="COUPON"
-                      className="min-w-0 flex-1 rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm uppercase tracking-widest text-pop-black outline-none transition focus:border-pop-pink"
+                      className="ui-form-shell min-w-0 flex-1 uppercase tracking-widest"
                     />
                     <button
                       type="button"
                       onClick={applyCoupon}
                       disabled={couponLoading || !couponCode.trim()}
-                      className="rounded-2xl bg-pop-black px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink disabled:opacity-50"
+                      className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary disabled:opacity-50"
                     >
                       {couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
                     </button>
@@ -651,7 +654,7 @@ export default function CheckoutClient() {
                     <Ticket className="h-4 w-4" />
                     {appliedCoupon}
                   </span>
-                  <button type="button" onClick={removeCoupon} className="text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-rose-500">
+                  <button type="button" onClick={removeCoupon} className="text-xs font-bold uppercase tracking-widest text-muted-text hover:text-rose-500">
                     ลบ
                   </button>
                 </div>
@@ -659,12 +662,12 @@ export default function CheckoutClient() {
             </div>
 
             {customerPoints > 0 && (
-              <div className="space-y-3 border-t border-gray-100 pt-5">
+              <div className="space-y-3 border-t border-line-primary pt-5">
                 <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คะแนนสะสม</span>
-                  <span className="text-sm font-bold text-pop-black">{customerPoints} points</span>
+                  <span className="text-xs font-bold uppercase tracking-[0.18em] text-muted-text">คะแนนสะสม</span>
+                  <span className="text-sm font-bold text-text-main">{customerPoints} points</span>
                 </div>
-                <label className="flex items-center gap-3 rounded-2xl border border-gray-100 bg-pop-bg p-4 text-sm font-semibold text-pop-black">
+                <label className="flex items-center gap-3 rounded-2xl border border-line-primary bg-surface-page p-4 text-sm font-semibold text-text-main">
                   <input
                     type="checkbox"
                     checked={usePoints}
@@ -672,7 +675,7 @@ export default function CheckoutClient() {
                       setUsePoints(event.target.checked)
                       if (event.target.checked) setPointsToUse(maxRedeemablePoints)
                     }}
-                    className="accent-pop-pink"
+                    className="accent-brand-primary"
                     disabled={maxRedeemablePoints <= 0}
                   />
                   ใช้คะแนนเป็นส่วนลด
@@ -684,14 +687,14 @@ export default function CheckoutClient() {
                     max={maxRedeemablePoints}
                     value={visiblePointsToUse}
                     onChange={(event) => setPointsToUse(Math.min(Number(event.target.value), maxRedeemablePoints))}
-                    className="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
+                    className="ui-form-shell-light"
                   />
                 )}
               </div>
             )}
 
-            <div className="space-y-3 border-t border-gray-100 pt-5 text-sm">
-              <div className="flex justify-between text-gray-500">
+            <div className="space-y-3 border-t border-line-primary pt-5 text-sm">
+              <div className="flex justify-between text-muted-text">
                 <span>Subtotal</span>
                 <span>{formatPrice(subtotal)}</span>
               </div>
@@ -719,12 +722,12 @@ export default function CheckoutClient() {
                   <span>-{formatPrice(pointsDiscount)}</span>
                 </div>
               )}
-              <div className="flex justify-between text-gray-500">
+              <div className="flex justify-between text-muted-text">
                 <span>Shipping</span>
                 {loadingSettings ? (
                   <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (
-                  <span className={isFreeShipping ? 'text-gray-400 line-through' : ''}>{formatPrice(shippingFee)}</span>
+                  <span className={isFreeShipping ? 'text-muted-text/70 line-through' : ''}>{formatPrice(shippingFee)}</span>
                 )}
               </div>
               {isFreeShipping && (
@@ -733,9 +736,9 @@ export default function CheckoutClient() {
                   <span>-{formatPrice(shippingFee)}</span>
                 </div>
               )}
-              <div className="flex justify-between border-t border-gray-100 pt-4 text-lg font-bold text-pop-black">
+              <div className="flex justify-between border-t border-line-primary pt-4 text-lg font-bold text-text-main">
                 <span>Total</span>
-                <span className="text-pop-pink">{formatPrice(total)}</span>
+                <span className="text-brand-primary">{formatPrice(total)}</span>
               </div>
             </div>
 
@@ -752,7 +755,7 @@ export default function CheckoutClient() {
               type="submit"
               form="checkout-form"
               disabled={submitting || loadingSettings}
-              className="hidden w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
+              className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
             >
               <span className="flex items-center gap-2">
                 {submitting && <Loader2 className="h-5 w-5 animate-spin" />}
diff --git a/apps/website/src/components/ClientProviders.tsx b/apps/website/src/components/ClientProviders.tsx
index 0f2df7b..3bf939d 100644
--- a/apps/website/src/components/ClientProviders.tsx
+++ b/apps/website/src/components/ClientProviders.tsx
@@ -4,6 +4,9 @@ import CartDrawer from './CartDrawer';
 import ScrollToTop from './ScrollToTop';
 import { useEffect, type ReactNode } from 'react';
 import i18n from '../lib/i18n';
+import { useCartStore } from '../store/cartStore';
+import { useWishlistStore } from '../store/wishlistStore';
+import { useAuthStore } from '../store/authStore';
 
 export default function ClientProviders({ children }: { children: ReactNode }) {
   useEffect(() => {
@@ -17,6 +20,12 @@ export default function ClientProviders({ children }: { children: ReactNode }) {
     }
   }, [])
 
+  useEffect(() => {
+    void useCartStore.persist.rehydrate()
+    void useWishlistStore.persist.rehydrate()
+    void useAuthStore.persist.rehydrate()
+  }, [])
+
   return (
     <>
       <ScrollToTop />
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index c8d4387..069a824 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from 'next/image'
 import { useState, useEffect } from 'react'
 import Link from './LocalizedLink'
 import type { Category, MenuItem, StoreSettings } from '@homaroma/types'
@@ -55,15 +56,19 @@ export default function Footer({
   const brandName = settings?.brandName || ''
 
   return (
-    <footer className="border-t border-gray-200 bg-white px-6 py-20 text-pop-black">
+    <footer className="border-t border-line-primary/20 bg-surface-card px-6 py-20 text-text-main">
       <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
 
         {/* Col 1 — Brand */}
         <div className="space-y-6">
           <div className="text-2xl font-bold tracking-widest">
-            {settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
+            {settings?.logoUrl ? (
+              <Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
+            ) : (
+              brandName
+            )}
           </div>
-          <p className="text-sm leading-relaxed text-gray-600">
+          <p className="text-sm leading-relaxed ui-muted-text">
             {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
           </p>
           <div className="flex gap-4">
@@ -74,7 +79,7 @@ export default function Footer({
                     href={settings!.facebookUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white"
+                    className="ui-footer-social"
                   >
                     FB
                   </a>
@@ -84,7 +89,7 @@ export default function Footer({
                     href={settings!.instagramUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white"
+                    className="ui-footer-social"
                   >
                     IG
                   </a>
@@ -94,7 +99,7 @@ export default function Footer({
                     href={settings!.tiktokUrl}
                     target="_blank"
                     rel="noreferrer"
-                    className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white"
+                    className="ui-footer-social"
                   >
                     TT
                   </a>
@@ -105,7 +110,7 @@ export default function Footer({
                 <a
                   key={s}
                   href="#"
-                  className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white"
+                  className="ui-footer-social"
                 >
                   {s}
                 </a>
@@ -116,22 +121,22 @@ export default function Footer({
 
         {/* Col 2 — Explore */}
         <div className="space-y-4">
-          <h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
-          <div className="flex flex-col space-y-2 text-sm text-gray-600">
+          <h4 className="ui-menu-title">{t('footer.explore')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-muted-text">
             {exploreMenu.length > 0 ? (
               exploreMenu.map((item) => (
-                <Link key={item.id} href={item.url} className="transition-colors hover:text-pop-pink">
+                <Link key={item.id} href={item.url} className="ui-footer-link">
                   {translateMenuLabel(item)}
                 </Link>
               ))
             ) : (
               <>
-                <Link href="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link>
-                <Link href="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link>
-                <Link href="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link>
-                <Link href="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link>
-                <Link href="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link>
-                <Link href="/faq" className="transition-colors hover:text-pop-pink">{t('nav.faq')}</Link>
+                <Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
+                <Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
+                <Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
+                <Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
+                <Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
+                <Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
               </>
             )}
           </div>
@@ -139,10 +144,10 @@ export default function Footer({
 
         {/* Col 3 — Collections */}
         <div className="space-y-4">
-          <h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
-          <div className="flex flex-col space-y-2 text-sm text-gray-600">
+          <h4 className="ui-menu-title">{t('nav.collections')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-muted-text">
             {categories.map((c) => (
-              <Link key={c.id} href={`/category/${c.id}`} className="transition-colors hover:text-pop-pink">
+              <Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
                 {resolveLocalized(c.name, effectiveLang)}
               </Link>
             ))}
@@ -151,7 +156,7 @@ export default function Footer({
 
         {/* Col 4 — Support & Legal */}
         <div className="space-y-4">
-          <h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">
+          <h4 className="ui-menu-title">
             {settings?.footerSupportHeading
               ? (typeof settings.footerSupportHeading === 'string'
                 ? settings.footerSupportHeading
@@ -160,16 +165,16 @@ export default function Footer({
                   || 'Support & Legal')
               : t('footer.support', 'Support & Legal')}
           </h4>
-          <div className="flex flex-col space-y-2 text-sm text-gray-600">
+          <div className="flex flex-col space-y-2 text-sm text-muted-text">
             {supportMenu.map((item) => (
-              <Link key={item.id} href={item.url} className="transition-colors hover:text-pop-pink">
+              <Link key={item.id} href={item.url} className="ui-footer-link">
                 {translateMenuLabel(item)}
               </Link>
             ))}
           </div>
 
           <div className="pt-4">
-            <p className="text-[10px] uppercase tracking-widest text-gray-500">
+            <p className="text-[10px] uppercase tracking-widest text-muted-text">
               {settings?.footerCopyrightText
                 ? (typeof settings.footerCopyrightText === 'string'
                   ? settings.footerCopyrightText
diff --git a/apps/website/src/components/LocalizedNotFound.tsx b/apps/website/src/components/LocalizedNotFound.tsx
index 9fe7681..74358b4 100644
--- a/apps/website/src/components/LocalizedNotFound.tsx
+++ b/apps/website/src/components/LocalizedNotFound.tsx
@@ -86,33 +86,33 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
   const text = getCopy(lang)
 
   return (
-    <section className="min-h-[70vh] bg-pop-bg px-6 py-16 text-pop-black md:py-24">
+    <section className="min-h-[70vh] bg-surface-page px-6 py-16 text-text-main md:py-24">
       <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
         <div>
-          <div className="mb-8 inline-flex items-center gap-3 rounded-full border border-pop-pink/20 bg-white px-4 py-2 shadow-brutal">
+          <div className="ui-panel mb-8 inline-flex items-center gap-3 px-4 py-2">
             <Image src="/favicon.svg" alt="" width={28} height={28} aria-hidden="true" />
-            <span className="text-xs font-bold uppercase tracking-[0.2em] text-pop-pink">{text.eyebrow}</span>
+            <span className="ui-eyebrow">{text.eyebrow}</span>
           </div>
 
-          <p className="text-8xl font-black leading-none text-pop-pink/20 md:text-9xl">{text.hint}</p>
-          <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-pop-black md:text-6xl">
+          <p className="text-8xl font-black leading-none text-brand-primary/20 md:text-9xl">{text.hint}</p>
+          <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-text-main md:text-6xl">
             {text.title}
           </h1>
-          <p className="mt-6 max-w-2xl text-base leading-8 text-gray-600 md:text-lg">
+          <p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
             {text.description}
           </p>
 
           <div className="mt-10 flex flex-col gap-3 sm:flex-row">
             <Link
               href={getPathWithLocale('/', lang)}
-              className="inline-flex items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-3 text-sm font-bold text-white transition hover:bg-pop-pink"
+              className="ui-button-primary px-6 py-3"
             >
               <Home className="h-4 w-4" />
               {text.home}
             </Link>
             <Link
               href={getPathWithLocale('/shop', lang)}
-              className="inline-flex items-center justify-center gap-2 rounded-full border border-pop-pink/40 bg-white px-6 py-3 text-sm font-bold text-pop-black transition hover:border-pop-pink hover:text-pop-pink"
+              className="ui-button-brand bg-surface-card text-text-main hover:bg-surface-page hover:text-brand-primary"
             >
               <ShoppingBag className="h-4 w-4" />
               {text.shop}
@@ -120,36 +120,36 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
           </div>
         </div>
 
-        <div className="rounded-[2rem] border border-white bg-white/80 p-6 shadow-brutal backdrop-blur md:p-8">
-          <div className="rounded-[1.5rem] bg-pop-bg p-6">
-            <div className="flex items-center gap-3 border-b border-pop-black/10 pb-5">
-              <div className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-pop-pink shadow-sm">
+          <div className="ui-panel border border-white/80 bg-surface-card/80 p-6 backdrop-blur md:p-8">
+            <div className="rounded-[1.5rem] bg-surface-page p-6">
+              <div className="flex items-center gap-3 border-b border-text-main/10 pb-5">
+              <div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-sm">
                 <Search className="h-5 w-5" />
               </div>
               <div>
-                <p className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">{text.hint}</p>
-                <p className="mt-1 text-sm font-semibold text-pop-black">{text.search}</p>
+                <p className="text-xs font-bold uppercase tracking-[0.18em] text-muted-text">{text.hint}</p>
+                <p className="mt-1 text-sm font-semibold text-text-main">{text.search}</p>
               </div>
             </div>
 
             <div className="mt-6 grid gap-3">
               <Link
                 href={getPathWithLocale('/search', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink"
+                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
               >
                 <span>{text.search}</span>
                 <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
               </Link>
               <Link
                 href={getPathWithLocale('/scent-guide', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink"
+                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
               >
                 <span>{text.guide}</span>
                 <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
               </Link>
               <Link
                 href={getPathWithLocale('/contact', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink"
+                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
               >
                 <span>{text.contact}</span>
                 <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index e2a3c29..bf015db 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Image from 'next/image'
 import Link from './LocalizedLink'
 import { getPathWithoutLocale, getPathWithLocale } from '../lib/locales'
 import { useRouter, usePathname } from 'next/navigation'
@@ -176,7 +177,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
     }
   }
 
-  const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5'
+  const iconButtonClass = 'group ui-icon-button'
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
   const brandName = settings?.brandName || ''
 
@@ -187,8 +188,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
         data-scrolled={scrolled}
         className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
           scrolled
-            ? 'bg-white/95 shadow-lg shadow-black/5 backdrop-blur-xl'
-            : 'bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none'
+            ? 'bg-surface-page/95 shadow-lg shadow-black/5 backdrop-blur-xl'
+            : 'bg-surface-page/80 backdrop-blur-xl md:bg-surface-nav-rest md:backdrop-blur-none'
         }`}
       >
         <div className="flex w-full items-center justify-between gap-4">
@@ -196,9 +197,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             <Link
               href="/"
               onClick={() => setMobileOpen(false)}
-              className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl"
+              className="ui-brand-wordmark"
             >
-              {settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
+              {settings?.logoUrl ? (
+                <Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
+              ) : (
+                brandName
+              )}
             </Link>
           </div>
 
@@ -226,7 +231,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             >
               <Heart className="h-4 w-4 transition-colors" />
               {wishlistCount > 0 && (
-                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white">
+                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
                   {wishlistCount}
                 </span>
               )}
@@ -242,19 +247,19 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
             >
               <ShoppingBag className="h-4 w-4 transition-colors" />
               {cartCount > 0 && (
-                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white">
+                <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
                   {cartCount}
                 </span>
               )}
             </button>
 
             <div className="group relative hidden items-center md:flex">
-              <button className="flex items-center gap-1.5 rounded-full border border-pop-pink/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-pop-black transition-all hover:bg-pop-bg hover:text-pop-pink">
+              <button className="ui-nav-chip">
                 <Globe className="h-3.5 w-3.5" strokeWidth={1.5} />
                 {activeLanguage.short}
               </button>
               <div className="pointer-events-none absolute right-0 top-full w-36 pt-2 opacity-0 transition-all duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
-                <div className="space-y-0.5 overflow-hidden rounded-xl border border-pop-black/10 bg-white/95 p-1.5 shadow-2xl backdrop-blur-xl">
+                <div className="ui-nav-panel space-y-0.5 p-1.5">
                   {LANGUAGES.map((language) => {
                     const isActive = lang.startsWith(language.code) || language.code.startsWith(lang)
                     return (
@@ -262,7 +267,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                         key={language.code}
                         onClick={() => changeLanguage(language.code)}
                         className={`flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-xs font-medium transition-colors ${
-                          isActive ? 'bg-pop-bg font-bold text-pop-black' : 'text-pop-black/65 hover:bg-pop-bg hover:text-pop-pink'
+                          isActive ? 'bg-surface-page font-bold text-text-main' : 'text-text-main/65 hover:bg-surface-page hover:text-brand-primary'
                         }`}
                       >
                         <span>{language.label}</span>
@@ -278,13 +283,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
               {customer ? (
                 <Link href="/profile" className="ml-1">
                   {customer.pictureUrl ? (
-                    <img
+                    <Image
                       src={customer.pictureUrl}
                       alt={customer.displayName || 'Profile'}
-                      className="h-9 w-9 rounded-full border-2 border-pop-pink/30 object-cover"
+                      width={36}
+                      height={36}
+                      unoptimized
+                      className="h-9 w-9 rounded-full border-2 border-brand-primary/30 object-cover"
                     />
                   ) : (
-                    <span className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-pop-pink/30 text-pop-black/65">
+                    <span className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-brand-primary/30 text-text-main/65">
                       <User className="h-4 w-4" />
                     </span>
                   )}
@@ -292,7 +300,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
               ) : (
                 <button
                   onClick={loginWithLine}
-                  className="ml-2 rounded-full bg-[#00B900] px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-all duration-300 hover:bg-[#009900]"
+                  className="ui-button-line ml-2"
                 >
                   {t('nav.login', 'เข้าสู่ระบบด้วย LINE')}
                 </button>
@@ -323,36 +331,36 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
 
       {searchOpen && (
         <div
-          className="fixed inset-0 z-[100] flex flex-col items-center bg-pop-bg/95 px-4 pt-24 backdrop-blur-xl md:px-6 md:pt-32"
+          className="fixed inset-0 z-[100] flex flex-col items-center bg-surface-page/95 px-4 pt-24 backdrop-blur-xl md:px-6 md:pt-32"
           onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
         >
           <div className="w-full max-w-2xl space-y-6">
             <div className="flex items-center justify-between">
-              <p className="text-xs font-semibold uppercase tracking-widest text-pop-black/55">{t('nav.search.title')}</p>
-              <button onClick={() => setSearchOpen(false)} className="rounded-full bg-white p-2 text-pop-black/65 transition hover:text-pop-pink">
+              <p className="text-xs font-semibold uppercase tracking-widest text-text-main/55">{t('nav.search.title')}</p>
+              <button onClick={() => setSearchOpen(false)} className="rounded-full bg-surface-page p-2 text-text-main/65 transition hover:text-brand-primary">
                 <X className="h-4 w-4" />
               </button>
             </div>
 
             <form onSubmit={handleSearch}>
-              <div className="flex overflow-hidden rounded-2xl border-2 border-pop-black/10 bg-white shadow-sm transition-colors focus-within:border-pop-pink">
-                <Search className="m-4 h-5 w-5 shrink-0 text-pop-black/35" />
+              <div className="flex overflow-hidden rounded-2xl border-2 border-text-main/10 bg-surface-card shadow-sm transition-colors focus-within:border-brand-primary">
+                <Search className="m-4 h-5 w-5 shrink-0 text-text-main/35" />
                 <input
                   type="text"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
                   placeholder={t('nav.search.placeholder')}
-                  className="w-full border-none bg-transparent p-4 pl-0 text-lg text-pop-black outline-none placeholder:text-pop-black/35 md:text-xl"
+                  className="w-full border-none bg-transparent p-4 pl-0 text-lg text-text-main outline-none placeholder:text-text-main/35 md:text-xl"
                   autoFocus
                 />
-                <button type="submit" className="shrink-0 bg-pop-black px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-pop-pink md:px-6">
+                <button type="submit" className="shrink-0 bg-text-main px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary md:px-6">
                   Go
                 </button>
               </div>
             </form>
 
             <div>
-              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-pop-black/55">{t('nav.search.quickLinks')}</p>
+              <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-text-main/55">{t('nav.search.quickLinks')}</p>
               <div className="flex flex-wrap gap-2">
                 {[
                   ...categories.map((category) => ({ label: resolveLocalized(category.name, lang), to: `/category/${category.id}` })),
@@ -363,7 +371,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                     key={item.to}
                     href={item.to}
                     onClick={() => setSearchOpen(false)}
-                    className="rounded-full border border-pop-black/10 bg-white px-4 py-1.5 text-xs font-semibold text-pop-black/65 transition-all hover:border-pop-pink hover:text-pop-pink"
+                    className="rounded-full border border-text-main/10 bg-surface-card px-4 py-1.5 text-xs font-semibold text-text-main/65 transition-all hover:border-brand-primary hover:text-brand-primary"
                   >
                     {item.label}
                   </Link>
@@ -376,24 +384,24 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
 
       <div className={`fixed inset-0 z-[110] transition-all duration-300 md:hidden ${langSheetOpen ? 'visible' : 'invisible'}`}>
         <div
-          className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
+          className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
           onClick={() => setLangSheetOpen(false)}
         />
         <div
-          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl bg-white shadow-2xl transition-transform duration-300 ${
+          className={`absolute bottom-0 left-0 right-0 rounded-t-3xl bg-surface-card shadow-2xl transition-transform duration-300 ${
             langSheetOpen ? 'translate-y-0' : 'translate-y-full'
           }`}
         >
           <div className="flex justify-center pb-1 pt-3">
-            <div className="h-1.5 w-12 rounded-full bg-pop-black/15" />
+            <div className="h-1.5 w-12 rounded-full bg-text-main/15" />
           </div>
           <div className="px-6 pb-6 pt-2">
             <div className="mb-4 flex items-center justify-between">
-              <h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-pop-black">
+              <h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-text-main">
                 <Globe className="h-4 w-4" />
                 Select Language
               </h3>
-              <button onClick={() => setLangSheetOpen(false)} className="rounded-full p-2 text-pop-black/65 hover:bg-pop-bg">
+              <button onClick={() => setLangSheetOpen(false)} className="rounded-full p-2 text-text-main/65 hover:bg-surface-page">
                 <X className="h-4 w-4" />
               </button>
             </div>
@@ -405,7 +413,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
                     key={language.code}
                     onClick={() => changeLanguage(language.code)}
                     className={`flex w-full items-center justify-between rounded-xl border border-transparent px-4 py-4 font-medium transition-colors ${
-                      isActive ? 'border-pop-pink/20 bg-pop-bg font-bold text-pop-black' : 'bg-pop-bg/40 text-pop-black/65 hover:bg-pop-bg'
+                      isActive ? 'border-brand-primary/20 bg-surface-page font-bold text-text-main' : 'bg-surface-page/40 text-text-main/65 hover:bg-surface-page'
                     }`}
                   >
                     <span className="text-base">{language.label}</span>
diff --git a/apps/website/src/components/ProductCard.tsx b/apps/website/src/components/ProductCard.tsx
index d681779..4bd356f 100644
--- a/apps/website/src/components/ProductCard.tsx
+++ b/apps/website/src/components/ProductCard.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Image from 'next/image'
 import Link from './LocalizedLink'
 import type { Product } from '@homaroma/types'
 import { getCategoryImage, formatPrice } from '@homaroma/types'
@@ -19,17 +20,19 @@ export default function ProductCard({ product }: ProductCardProps) {
   const firstPrice = product.variants[0]?.price ?? product.price
 
   return (
-    <article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-brutal transition duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
-      <div className="relative aspect-[4/3] overflow-hidden bg-pop-bg">
+    <article className="ui-card ui-card-hover group flex h-full flex-col overflow-hidden">
+      <div className="relative aspect-[4/3] overflow-hidden bg-surface-page">
         <WishlistButton product={product} />
         <Link href={`/products/${product.id}`} className="block h-full w-full">
-          <img
+          <Image
             src={imageUrl}
-            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
             alt={productName}
+            fill
+            unoptimized
+            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
           />
           {categoryName && (
-            <span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-pop-black shadow-sm">
+            <span className="ui-status-badge absolute left-4 top-4 border-line-primary/20 bg-surface-card/90 px-3 py-1 text-[10px] uppercase tracking-widest text-text-main shadow-sm">
               {categoryName}
             </span>
           )}
@@ -38,13 +41,13 @@ export default function ProductCard({ product }: ProductCardProps) {
 
       <div className="flex flex-1 flex-col gap-4 p-5">
         <div className="space-y-1">
-          <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black">
-            <Link href={`/products/${product.id}`} className="transition hover:text-pop-pink">
+          <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-text-main">
+            <Link href={`/products/${product.id}`} className="transition hover:text-brand-primary">
               {productName}
             </Link>
           </h3>
           {product.scent.name && (
-            <p className="text-xs font-semibold uppercase tracking-widest text-gray-400">
+            <p className="text-xs font-semibold uppercase tracking-widest text-muted-text/70">
               {product.scent.name}
             </p>
           )}
@@ -53,7 +56,7 @@ export default function ProductCard({ product }: ProductCardProps) {
         {product.variants.length > 0 && (
           <div className="flex flex-wrap gap-2">
             {product.variants.slice(0, 3).map((variant) => (
-              <span key={variant.id} className="rounded-full bg-pop-bg px-3 py-1 text-xs font-semibold text-gray-600">
+              <span key={variant.id} className="rounded-full bg-surface-page px-3 py-1 text-xs font-semibold text-muted-text">
                 {variant.size}
               </span>
             ))}
@@ -61,10 +64,10 @@ export default function ProductCard({ product }: ProductCardProps) {
         )}
 
         <div className="mt-auto flex items-center justify-between gap-4">
-          <span className="text-lg font-bold text-pop-pink">{formatPrice(firstPrice)}</span>
+          <span className="text-lg font-bold text-brand-primary">{formatPrice(firstPrice)}</span>
           <Link
             href={`/products/${product.id}`}
-            className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
+            className="ui-button-primary px-4 py-2 text-[10px]"
           >
             View
           </Link>
diff --git a/apps/website/src/components/ProfileClient.tsx b/apps/website/src/components/ProfileClient.tsx
index ffddf84..646dbef 100644
--- a/apps/website/src/components/ProfileClient.tsx
+++ b/apps/website/src/components/ProfileClient.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from 'next/image'
 import Link from './LocalizedLink'
 import { useEffect, useState } from 'react'
 import {
@@ -78,7 +79,7 @@ function statusClass(status: string) {
   if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700'
   if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700'
   if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700'
-  return 'border-gray-100 bg-gray-50 text-gray-700'
+  return 'border-line-primary/20 bg-surface-page text-text-main/80'
 }
 
 function formatAddress(address: CustomerAddress) {
@@ -284,12 +285,12 @@ export default function ProfileClient() {
 
   if (!customer) {
     return (
-      <section className="mx-auto max-w-md rounded-3xl bg-white p-10 text-center shadow-brutal">
-        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
+      <section className="ui-panel mx-auto max-w-md p-10 text-center">
+        <div className="ui-avatar-shell mx-auto mb-6 text-brand-primary">
           <User className="h-10 w-10" />
         </div>
-        <h1 className="text-3xl font-semibold text-pop-black">เข้าสู่ระบบสมาชิก</h1>
-        <p className="mt-3 text-sm leading-relaxed text-gray-600">
+        <h1 className="text-3xl font-semibold text-text-main">เข้าสู่ระบบสมาชิก</h1>
+        <p className="mt-3 text-sm leading-relaxed text-muted-text">
           ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
         </p>
         {error && (
@@ -300,12 +301,12 @@ export default function ProfileClient() {
         <button
           type="button"
           onClick={handleLineLogin}
-          className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-[#00B900] px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-[#009900]"
+          className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-line-primary px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-line-primary-hover"
         >
           <Award className="h-5 w-5" />
           เข้าสู่ระบบผ่าน LINE
         </button>
-        <Link href="/shop" className="mt-5 inline-flex text-sm font-semibold text-pop-pink">
+        <Link href="/shop" className="mt-5 inline-flex text-sm font-semibold text-brand-primary">
           กลับไปเลือกซื้อสินค้า
         </Link>
       </section>
@@ -327,58 +328,58 @@ export default function ProfileClient() {
         </div>
       )}
 
-      <div className="relative overflow-hidden rounded-3xl bg-white p-6 shadow-brutal">
-        <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pop-pink via-pop-yellow to-pop-red" />
+      <div className="ui-panel relative overflow-hidden p-6">
+        <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-brand-primary via-brand-accent to-brand-primary-hover" />
         <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex min-w-0 items-center gap-4">
-            <div className="h-16 w-16 shrink-0 overflow-hidden rounded-full border border-pop-pink/20 bg-pop-bg">
-              <img
+            <div className="ui-avatar-shell-sm relative shrink-0">
+              <Image
                 src={displayCustomer.pictureUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayCustomer.displayName || 'HomAroma')}`}
                 alt={displayCustomer.displayName || 'LINE Profile'}
+                fill
+                unoptimized
                 className="h-full w-full object-cover"
               />
             </div>
             <div className="min-w-0">
-              <h1 className="truncate text-2xl font-semibold text-pop-black">{displayCustomer.displayName || 'HomAroma Member'}</h1>
-              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-gray-500">
+              <h1 className="truncate text-2xl font-semibold text-text-main">{displayCustomer.displayName || 'HomAroma Member'}</h1>
+              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-muted-text">
                 {displayCustomer.phone && <span className="inline-flex items-center gap-1"><Phone className="h-3 w-3" />{displayCustomer.phone}</span>}
                 {displayCustomer.email && <span className="inline-flex items-center gap-1"><Mail className="h-3 w-3" />{displayCustomer.email}</span>}
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-between gap-4 rounded-2xl bg-pop-bg px-4 py-3">
-            <Award className="h-6 w-6 text-pop-pink" />
+          <div className="ui-panel-muted flex items-center justify-between gap-4 px-4 py-3">
+            <Award className="h-6 w-6 text-brand-primary" />
             <div>
-              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">คะแนนสะสม</p>
-              <p className="text-xl font-black text-pop-black">{displayCustomer.points ?? 0} คะแนน</p>
+              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-text">คะแนนสะสม</p>
+              <p className="text-xl font-black text-text-main">{displayCustomer.points ?? 0} คะแนน</p>
             </div>
           </div>
         </div>
       </div>
 
-      <div className="flex gap-2 overflow-x-auto border-b border-gray-200">
+      <div className="flex gap-2 overflow-x-auto border-b border-line-primary/20">
         {tabs.map(({ tab, label, icon: Icon, count }) => (
           <button
             key={tab}
             type="button"
             onClick={() => setActiveTab(tab)}
-            className={`relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition ${
-              activeTab === tab ? 'text-pop-pink' : 'text-gray-500 hover:text-pop-black'
-            }`}
+            className={`ui-tab-button ${activeTab === tab ? 'ui-tab-button-active' : 'ui-tab-button-inactive'}`}
           >
             <Icon className="h-4 w-4" />
             {label}
             {typeof count === 'number' && (
-              <span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px]">{count}</span>
+              <span className="ui-tab-count">{count}</span>
             )}
-            {activeTab === tab && <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-pop-pink" />}
+            {activeTab === tab && <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-primary" />}
           </button>
         ))}
       </div>
 
       {loading ? (
-        <div className="flex items-center justify-center rounded-3xl bg-white py-24 shadow-brutal">
-          <Loader2 className="h-8 w-8 animate-spin text-pop-pink" />
+        <div className="ui-panel flex items-center justify-center py-24">
+          <Loader2 className="h-8 w-8 animate-spin text-brand-primary" />
         </div>
       ) : (
         <>
@@ -388,19 +389,19 @@ export default function ProfileClient() {
                 <EmptyPanel icon={Package} title="ไม่มีประวัติการสั่งซื้อ" description="คุณยังไม่ได้ทำการสั่งซื้อสินค้าใด ๆ กับ HomAroma" actionHref="/shop" actionText="ไปหน้าช้อปปิ้ง" />
               ) : (
                 orders.map((order) => (
-                  <article key={order.id} className="rounded-3xl bg-white p-6 shadow-brutal">
-                    <div className="flex flex-col gap-3 border-b border-gray-100 pb-4 md:flex-row md:items-center md:justify-between">
+                  <article key={order.id} className="ui-panel p-6">
+                    <div className="flex flex-col gap-3 border-b border-line-primary/20 pb-4 md:flex-row md:items-center md:justify-between">
                       <div>
-                        <p className="text-xs font-semibold text-gray-500">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
-                        <p className="mt-1 text-[11px] text-gray-400">
+                        <p className="text-xs font-semibold text-muted-text">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
+                        <p className="mt-1 text-[11px] text-muted-text/70">
                           สั่งเมื่อ {new Date(order.createdAt).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
                         </p>
                       </div>
                       <div className="flex items-center gap-3">
-                        <span className={`rounded-full border px-3 py-1 text-xs font-bold ${statusClass(order.status)}`}>
+                        <span className={`ui-status-badge ${statusClass(order.status)}`}>
                           {statusLabel(order.status)}
                         </span>
-                        <Link href={`/order/${order.id}`} className="rounded-full border border-gray-200 p-2 text-gray-500 transition hover:text-pop-pink">
+                        <Link href={`/order/${order.id}`} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition hover:text-brand-primary">
                           <ExternalLink className="h-4 w-4" />
                         </Link>
                       </div>
@@ -409,23 +410,23 @@ export default function ProfileClient() {
                     <div className="mt-4 space-y-3">
                       {order.items.map((item) => (
                         <div key={item.id} className="flex items-center gap-3 text-sm">
-                          <div className="h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-pop-bg">
-                            <img src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} className="h-full w-full object-cover" />
+                          <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-surface-page">
+                            <Image src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} fill unoptimized className="h-full w-full object-cover" />
                           </div>
                           <div className="min-w-0 flex-1">
-                            <p className="truncate font-semibold text-pop-black">{item.productName}</p>
-                            <p className="text-xs text-gray-500">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
+                            <p className="truncate font-semibold text-text-main">{item.productName}</p>
+                            <p className="text-xs text-muted-text">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
                           </div>
-                          <p className="font-bold text-pop-pink">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
+                          <p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
                         </div>
                       ))}
                     </div>
 
-                    <div className="mt-5 flex flex-col gap-3 border-t border-gray-100 pt-4 text-sm md:flex-row md:items-center md:justify-between">
-                      <p className="text-gray-500">
-                        {order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-pop-black">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
+                    <div className="mt-5 flex flex-col gap-3 border-t border-line-primary/20 pt-4 text-sm md:flex-row md:items-center md:justify-between">
+                      <p className="text-muted-text">
+                        {order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-text-main">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
                       </p>
-                      <p className="font-bold text-pop-black">ยอดรวมสุทธิ: <span className="text-pop-pink">{formatPrice(order.totalAmount)}</span></p>
+                      <p className="font-bold text-text-main">ยอดรวมสุทธิ: <span className="text-brand-primary">{formatPrice(order.totalAmount)}</span></p>
                     </div>
                   </article>
                 ))
@@ -435,13 +436,13 @@ export default function ProfileClient() {
 
           {activeTab === 'addresses' && (
             <div className="space-y-6">
-              <div className="flex flex-col gap-3 border-b border-gray-200 pb-4 sm:flex-row sm:items-center sm:justify-between">
-                <h2 className="flex items-center gap-2 text-xl font-semibold text-pop-black">
-                  <MapPin className="h-5 w-5 text-pop-pink" />
+              <div className="flex flex-col gap-3 border-b border-line-primary/20 pb-4 sm:flex-row sm:items-center sm:justify-between">
+                <h2 className="flex items-center gap-2 text-xl font-semibold text-text-main">
+                  <MapPin className="h-5 w-5 text-brand-primary" />
                   สมุดที่อยู่จัดส่ง
                 </h2>
                 {!showAddressForm && (
-                  <button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-pop-black px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink">
+                  <button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
                     <Plus className="h-4 w-4" />
                     เพิ่มที่อยู่ใหม่
                   </button>
@@ -449,8 +450,8 @@ export default function ProfileClient() {
               </div>
 
               {showAddressForm && (
-                <form onSubmit={handleAddressSubmit} className="space-y-5 rounded-3xl bg-white p-6 shadow-brutal">
-                  <h3 className="text-sm font-bold uppercase tracking-[0.2em] text-pop-pink">
+                <form onSubmit={handleAddressSubmit} className="ui-panel space-y-5 p-6">
+                  <h3 className="text-sm font-bold uppercase tracking-[0.2em] text-brand-primary">
                     {editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'}
                   </h3>
 
@@ -466,21 +467,21 @@ export default function ProfileClient() {
                     <TextInput label="รหัสไปรษณีย์" value={addressForm.zipcode} onChange={(value) => updateAddressForm('zipcode', value)} required />
                   </div>
 
-                  <label className="flex items-center gap-3 text-sm font-semibold text-gray-600">
+                  <label className="flex items-center gap-3 text-sm font-semibold text-muted-text">
                     <input
                       type="checkbox"
                       checked={addressForm.isDefault}
                       onChange={(event) => updateAddressForm('isDefault', event.target.checked)}
-                      className="h-4 w-4 rounded border-gray-300 text-pop-pink"
+                      className="ui-form-checkbox"
                     />
                     ตั้งเป็นที่อยู่จัดส่งเริ่มต้น
                   </label>
 
-                  <div className="flex justify-end gap-3 border-t border-gray-100 pt-4">
-                    <button type="button" onClick={resetAddressForm} className="rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600">
+                  <div className="flex justify-end gap-3 border-t border-line-primary/20 pt-4">
+                    <button type="button" onClick={resetAddressForm} className="ui-form-secondary-button">
                       ยกเลิก
                     </button>
-                    <button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-pop-pink px-5 py-2 text-sm font-semibold text-white disabled:opacity-60">
+                    <button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-brand-primary px-5 py-2 text-sm font-semibold text-white disabled:opacity-60">
                       {submittingAddress && <Loader2 className="h-4 w-4 animate-spin" />}
                       บันทึกที่อยู่
                     </button>
@@ -493,27 +494,27 @@ export default function ProfileClient() {
               ) : (
                 <div className="grid gap-4 md:grid-cols-2">
                   {addresses.map((address) => (
-                    <article key={address.id} className={`rounded-3xl bg-white p-5 shadow-brutal ${address.isDefault ? 'ring-2 ring-pop-pink/30' : ''}`}>
+                    <article key={address.id} className={`ui-panel p-5 ${address.isDefault ? 'ring-2 ring-brand-primary/30' : ''}`}>
                       <div className="flex items-start justify-between gap-4">
                         <div>
                           <div className="flex flex-wrap items-center gap-2">
-                            <p className="font-semibold text-pop-black">{address.recipientName}</p>
-                            {address.isDefault && <span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px] font-bold text-pop-pink">เริ่มต้น</span>}
+                            <p className="font-semibold text-text-main">{address.recipientName}</p>
+                            {address.isDefault && <span className="rounded-full bg-surface-page px-2 py-0.5 text-[10px] font-bold text-brand-primary">เริ่มต้น</span>}
                           </div>
-                          <p className="mt-1 text-xs font-semibold text-gray-500">{address.phone}</p>
+                          <p className="mt-1 text-xs font-semibold text-muted-text">{address.phone}</p>
                         </div>
                         <div className="flex gap-1">
-                          <button type="button" onClick={() => handleStartAddress(address)} className="rounded-full border border-gray-200 p-2 text-gray-500 hover:text-pop-pink">
+                          <button type="button" onClick={() => handleStartAddress(address)} className="rounded-full border border-line-primary/20 p-2 text-muted-text hover:text-brand-primary">
                             <Edit3 className="h-4 w-4" />
                           </button>
-                          <button type="button" onClick={() => void handleDeleteAddress(address.id)} className="rounded-full border border-rose-100 p-2 text-rose-500">
+                          <button type="button" onClick={() => void handleDeleteAddress(address.id)} className="ui-form-danger-button">
                             <Trash2 className="h-4 w-4" />
                           </button>
                         </div>
                       </div>
-                      <p className="mt-4 text-sm leading-relaxed text-gray-600">{formatAddress(address)}</p>
+                      <p className="mt-4 text-sm leading-relaxed text-muted-text">{formatAddress(address)}</p>
                       {!address.isDefault && (
-                        <button type="button" onClick={() => void handleSetDefaultAddress(address.id)} className="mt-4 w-full rounded-full border border-gray-200 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-gray-600 hover:text-pop-pink">
+                        <button type="button" onClick={() => void handleSetDefaultAddress(address.id)} className="mt-4 w-full rounded-full border border-line-primary/20 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-muted-text hover:text-brand-primary">
                           ตั้งเป็นที่อยู่เริ่มต้น
                         </button>
                       )}
@@ -526,12 +527,12 @@ export default function ProfileClient() {
 
           {activeTab === 'settings' && (
             <div className="space-y-6">
-              <h2 className="flex items-center gap-2 border-b border-gray-200 pb-4 text-xl font-semibold text-pop-black">
-                <Settings className="h-5 w-5 text-pop-pink" />
+              <h2 className="flex items-center gap-2 border-b border-line-primary/20 pb-4 text-xl font-semibold text-text-main">
+                <Settings className="h-5 w-5 text-brand-primary" />
                 ข้อมูลติดต่อสมาชิก
               </h2>
 
-              <form onSubmit={handleSettingsSubmit} className="max-w-xl space-y-5 rounded-3xl bg-white p-6 shadow-brutal">
+              <form onSubmit={handleSettingsSubmit} className="ui-panel max-w-xl space-y-5 p-6">
                 {settingsSuccess && (
                   <div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
                     <Check className="h-4 w-4" />
@@ -540,7 +541,7 @@ export default function ProfileClient() {
                 )}
                 <TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" />
                 <TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" />
-                <button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-pop-pink px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60">
+                <button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-primary px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60">
                   {submittingSettings ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
                   บันทึกข้อมูลติดต่อ
                 </button>
@@ -550,7 +551,7 @@ export default function ProfileClient() {
         </>
       )}
 
-      <button type="button" onClick={logout} className="inline-flex items-center gap-2 text-sm font-semibold text-gray-500 transition hover:text-rose-500">
+      <button type="button" onClick={logout} className="inline-flex items-center gap-2 text-sm font-semibold text-muted-text transition hover:text-rose-500">
         <LogOut className="h-4 w-4" />
         ออกจากระบบบนอุปกรณ์นี้
       </button>
@@ -573,13 +574,13 @@ function TextInput({
 }) {
   return (
     <label className="space-y-1.5">
-      <span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">{label}</span>
+      <span className="ui-form-label block text-[10px] tracking-[0.2em]">{label}</span>
       <input
         type={type}
         required={required}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
+        className="ui-form-shell"
       />
     </label>
   )
@@ -599,12 +600,12 @@ function EmptyPanel({
   actionText?: string
 }) {
   return (
-    <div className="rounded-3xl bg-white px-6 py-16 text-center shadow-brutal">
-      <Icon className="mx-auto mb-5 h-12 w-12 text-gray-300" />
-      <h3 className="text-xl font-semibold text-pop-black">{title}</h3>
-      <p className="mx-auto mt-2 max-w-md text-sm text-gray-500">{description}</p>
+    <div className="ui-empty-panel">
+      <Icon className="mx-auto mb-5 h-12 w-12 text-muted-text/40" />
+      <h3 className="text-xl font-semibold text-text-main">{title}</h3>
+      <p className="mx-auto mt-2 max-w-md text-sm text-muted-text">{description}</p>
       {actionHref && actionText && (
-        <Link href={actionHref} className="mt-6 inline-flex rounded-full bg-pop-pink px-6 py-3 text-sm font-bold text-white">
+        <Link href={actionHref} className="mt-6 inline-flex rounded-full bg-brand-primary px-6 py-3 text-sm font-bold text-white">
           {actionText}
         </Link>
       )}
diff --git a/apps/website/src/components/TrackOrderClient.tsx b/apps/website/src/components/TrackOrderClient.tsx
index 8732243..52e5686 100644
--- a/apps/website/src/components/TrackOrderClient.tsx
+++ b/apps/website/src/components/TrackOrderClient.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import Link from './LocalizedLink'
 import { useRouter } from 'next/navigation'
@@ -92,14 +92,14 @@ export default function TrackOrderClient() {
 
   return (
     <div className="grid gap-10 md:grid-cols-2">
-      <section className="self-start rounded-3xl bg-white p-8 shadow-brutal">
-        <div className="mb-6 flex items-center gap-3 border-b border-gray-100 pb-4">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
+      <section className="ui-panel self-start p-8">
+        <div className="mb-6 flex items-center gap-3 border-b border-line-primary/20 pb-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-brand-primary">
             <Search className="h-5 w-5" />
           </div>
           <div>
-            <p className="text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">Manual Search</p>
-            <h2 className="text-xl font-semibold text-pop-black">ค้นหาคำสั่งซื้อ</h2>
+            <p className="ui-eyebrow">Manual Search</p>
+            <h2 className="text-xl font-semibold text-text-main">ค้นหาคำสั่งซื้อ</h2>
           </div>
         </div>
 
@@ -111,7 +111,7 @@ export default function TrackOrderClient() {
           )}
 
           <div className="space-y-2">
-            <label htmlFor="orderId" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
+            <label htmlFor="orderId" className="ui-form-label">
               Order Number
             </label>
             <input
@@ -119,14 +119,14 @@ export default function TrackOrderClient() {
               required
               value={orderId}
               onChange={(event) => setOrderId(event.target.value)}
-              className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
+              className="ui-form-shell"
               placeholder="เช่น 1024"
               type="text"
             />
           </div>
 
           <div className="space-y-2">
-            <label htmlFor="phone" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
+            <label htmlFor="phone" className="ui-form-label">
               Phone Number
             </label>
             <input
@@ -134,7 +134,7 @@ export default function TrackOrderClient() {
               required
               value={phone}
               onChange={(event) => setPhone(event.target.value)}
-              className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
+              className="ui-form-shell"
               placeholder="เบอร์โทรที่ใช้ตอนสั่งซื้อ"
               type="tel"
             />
@@ -143,7 +143,7 @@ export default function TrackOrderClient() {
           <button
             type="submit"
             disabled={loading}
-            className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60"
+            className="ui-form-inline-button w-full"
           >
             {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Find Order'}
           </button>
@@ -151,15 +151,15 @@ export default function TrackOrderClient() {
       </section>
 
       <section className="space-y-6">
-        <div className="flex items-center gap-3 border-b border-gray-200 pb-4">
-          <Package className="h-5 w-5 text-pop-pink" />
-          <h2 className="text-xl font-semibold text-pop-black">Recent Device Orders</h2>
+        <div className="flex items-center gap-3 border-b border-line-primary/20 pb-4">
+          <Package className="h-5 w-5 text-brand-primary" />
+          <h2 className="text-xl font-semibold text-text-main">Recent Device Orders</h2>
         </div>
 
         {localOrders.length === 0 ? (
-          <div className="rounded-3xl border border-dashed border-gray-200 bg-white p-10 text-center shadow-brutal">
-            <p className="text-sm font-semibold text-gray-600">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
-            <p className="mt-2 text-xs uppercase tracking-[0.18em] text-gray-400">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
+          <div className="ui-empty-panel p-10 text-center">
+            <p className="text-sm font-semibold text-muted-text">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
+            <p className="mt-2 text-xs uppercase tracking-[0.18em] text-muted-text/70">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
           </div>
         ) : (
           <div className="space-y-3">
@@ -167,13 +167,13 @@ export default function TrackOrderClient() {
               <Link
                 key={id}
                 href={`/order/${id}`}
-                className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-brutal transition hover:-translate-y-0.5 hover:shadow-brutal-hover"
+                className="ui-card ui-card-hover group flex items-center justify-between p-5"
               >
                 <div>
-                  <p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Order</p>
-                  <p className="mt-1 font-mono text-2xl font-bold text-pop-black">{orderLabel(id)}</p>
+                  <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Order</p>
+                  <p className="mt-1 font-mono text-2xl font-bold text-text-main">{orderLabel(id)}</p>
                 </div>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-black transition group-hover:bg-pop-pink group-hover:text-white">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-text-main transition group-hover:bg-brand-primary group-hover:text-white">
                   <ChevronRight className="h-5 w-5" />
                 </div>
               </Link>
diff --git a/apps/website/src/components/WishlistButton.tsx b/apps/website/src/components/WishlistButton.tsx
index 64ab0b3..5124e95 100644
--- a/apps/website/src/components/WishlistButton.tsx
+++ b/apps/website/src/components/WishlistButton.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import { Heart } from 'lucide-react'
 import type { Product } from '@homaroma/types'
@@ -22,10 +22,10 @@ export default function WishlistButton({ product }: WishlistButtonProps) {
         toggleItem(product)
       }}
       aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
-      className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-white/90 shadow-sm backdrop-blur transition hover:scale-105 ${
+      className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-surface-card/90 shadow-sm backdrop-blur transition hover:scale-105 ${
         isInWishlist
           ? 'border-rose-200 text-rose-500'
-          : 'border-gray-200 text-pop-black hover:border-rose-200 hover:text-rose-500'
+          : 'border-line-primary/20 text-text-main hover:border-rose-200 hover:text-rose-500'
       }`}
     >
       <Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
diff --git a/apps/website/src/components/WishlistClient.tsx b/apps/website/src/components/WishlistClient.tsx
index 6cd0e40..a28bac9 100644
--- a/apps/website/src/components/WishlistClient.tsx
+++ b/apps/website/src/components/WishlistClient.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import Link from './LocalizedLink'
 import { Heart } from 'lucide-react'
@@ -11,17 +11,17 @@ export default function WishlistClient() {
 
   if (items.length === 0) {
     return (
-      <section className="mx-auto max-w-2xl rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
+      <section className="ui-panel mx-auto max-w-2xl px-6 py-20 text-center">
         <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50 text-rose-300">
           <Heart className="h-10 w-10" />
         </div>
-        <h2 className="text-2xl font-semibold text-pop-black">Your wishlist is empty</h2>
-        <p className="mx-auto mt-3 max-w-md text-gray-500">
+        <h2 className="text-2xl font-semibold text-text-main">Your wishlist is empty</h2>
+          <p className="mx-auto mt-3 max-w-md text-muted-text">
           Explore our products and tap the heart icon to save your favorites.
         </p>
         <Link
           href="/shop"
-          className="mt-8 inline-flex rounded-full bg-pop-pink px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-red"
+          className="mt-8 inline-flex rounded-full bg-brand-primary px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-brand-primary-hover"
         >
           Browse Shop
         </Link>
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index 95c9d02..1c7a706 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import Image from 'next/image'
 import Link from '../LocalizedLink'
 import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
 import type { Category, PageSection, Product } from '@homaroma/types'
@@ -38,7 +39,7 @@ function optionalText(value: unknown, lang: string) {
   return localizedValue(value, lang)
 }
 
-function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic') {
+function renderAccentTitle(text: string, accentClassName = 'ui-accent-text not-italic') {
   if (!text.includes('[') || !text.includes(']')) return text
 
   return text.split('[').map((part, index) => {
@@ -79,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
 
   return (
     <section 
-      className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
+      className={`announcement-bar absolute top-0 left-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-white'}`}
       style={{ backgroundColor, color: textColor }}
     >
       <Swiper
@@ -111,14 +112,16 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
 
   return (
-    <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-neutral-900 md:aspect-[21/9] md:min-h-0">
-      <img
+    <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-text-main md:aspect-[21/9] md:min-h-0">
+      <Image
         src={imageUrl}
         alt={title || 'HomAroma'}
+        fill
+        unoptimized
         className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
       />
-      <div className="absolute inset-0 bg-neutral-900/40" />
-      <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" />
+      <div className="absolute inset-0 bg-text-main/40" />
+      <div className="absolute inset-0 bg-gradient-to-t from-text-main/90 via-text-main/10 to-text-main/30" />
       <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
         <div className="space-y-6">
           {tagline && (
@@ -126,8 +129,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
               {tagline}
             </p>
           )}
-          <h1 className="font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
-            {renderAccentTitle(title || 'HomAroma', 'font-medium italic text-[#E4BC32]')}
+          <h1 className="font-display text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
+            {renderAccentTitle(title || 'HomAroma')}
           </h1>
           {description && (
             <p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
@@ -137,13 +140,13 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
           <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
             <Link
               href={buttonLink}
-              className="rounded-full bg-white px-8 py-4 text-sm font-bold uppercase tracking-widest text-pop-black transition-all duration-300 hover:bg-pop-bg hover:shadow-xl"
+              className="rounded-full bg-surface-card px-8 py-4 text-sm font-bold uppercase tracking-widest text-text-main transition-all duration-300 hover:bg-surface-page hover:shadow-xl"
             >
               {buttonText || 'Explore Collection'}
             </Link>
             <a
               href="#categories"
-              className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-[#E4BC32]"
+              className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-brand-accent"
             >
               {heroLearnMoreText(resolvedLang)}
               <span className="transition-transform group-hover:translate-x-1">→</span>
@@ -182,11 +185,11 @@ function CategoriesSection({
   }
 
   return (
-    <section id="categories" className="bg-white px-6 py-24">
-      <div className="mx-auto max-w-7xl space-y-14">
+    <section id="categories" className="bg-surface-page ui-section-band">
+      <div className="ui-section-shell space-y-14">
         <div className="mx-auto max-w-2xl space-y-4 text-center">
-          <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
-          {subtitle && <p className="text-gray-500">{subtitle}</p>}
+          <h2 className="ui-section-title">{title}</h2>
+          {subtitle && <p className="ui-section-subtitle">{subtitle}</p>}
         </div>
         <div className="grid grid-cols-2 gap-5 md:grid-cols-5">
           {displayed.map((category) => {
@@ -196,14 +199,16 @@ function CategoriesSection({
               <Link
                 key={category.id}
                 href={`/category/${category.id}`}
-                className="group relative h-72 overflow-hidden rounded-2xl shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
+                className="group relative h-72 overflow-hidden rounded-2xl shadow-card transition hover:-translate-y-1 hover:shadow-card-hover"
               >
-                <img
+                <Image
                   src={category.imageUrl || getCategoryImage(name)}
                   alt={name}
+                  fill
+                  unoptimized
                   className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
                 />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
+                <div className="absolute inset-0 bg-gradient-to-t from-text-main/65 to-transparent" />
                 <div className="absolute bottom-5 left-5 right-5 text-white">
                   <span className="block text-lg font-semibold">{name}</span>
                   {category._count && (
@@ -245,14 +250,14 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
   }
 
   return (
-    <section className="bg-pop-bg px-6 py-24">
-      <div className="mx-auto max-w-7xl space-y-10">
-        <div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
+    <section className="bg-surface-page ui-section-band">
+      <div className="ui-section-shell space-y-10">
+        <div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
           <div>
-            <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
-            {subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>}
+            <h2 className="ui-section-title">{title}</h2>
+            {subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
           </div>
-          <Link href="/shop" className="font-semibold text-pop-pink transition hover:text-pop-red">
+          <Link href="/shop" className="ui-section-link">
             {viewAllLabel[resolvedLang] ?? viewAllLabel.en}
           </Link>
         </div>
@@ -261,7 +266,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
             {products.map((product) => <ProductCard key={product.id} product={product} />)}
           </div>
         ) : (
-          <p className="rounded-2xl bg-white p-8 text-center text-gray-500 shadow-brutal">
+          <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
             {emptyLabel[resolvedLang] ?? emptyLabel.en}
           </p>
         )}
@@ -280,18 +285,18 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
   const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
 
   const content = (
-    <div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal">
-      <img src={imageUrl} alt={title || 'Banner'} className="absolute inset-0 h-full w-full object-cover" />
-      <div className="absolute inset-0 bg-gradient-to-r from-pop-black/75 via-pop-black/35 to-transparent" />
+    <div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-card">
+      <Image src={imageUrl} alt={title || 'Banner'} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
+      <div className="absolute inset-0 bg-gradient-to-r from-text-main/75 via-text-main/35 to-transparent" />
       <div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
         {title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
         {description && <p className="text-white/90">{description}</p>}
-        {buttonText && <span className="inline-flex rounded-full bg-white px-6 py-3 font-semibold text-pop-black">{buttonText}</span>}
+        {buttonText && <span className="inline-flex rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main">{buttonText}</span>}
       </div>
     </div>
   )
 
-  return <section className="bg-white px-6 py-16">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
+  return <section className="bg-surface-page ui-section-band">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
 }
 
 function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
@@ -306,10 +311,10 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
       : 'text-left'
 
   return (
-    <section className="bg-white px-6 py-16">
+    <section className="bg-surface-page ui-section-band">
       <div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
-        {title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>}
-        {content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />}
+        {title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
+        {content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
       </div>
     </section>
   )
@@ -324,15 +329,15 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
   const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
 
   return (
-    <section className="bg-pop-black px-6 py-20 text-white">
+    <section className="bg-text-main px-6 py-20 text-white">
       <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
         <div className="space-y-3">
           <h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
           {description && <p className="max-w-2xl text-white/75">{description}</p>}
         </div>
         <form className="flex flex-col gap-3 sm:flex-row">
-          <input className="min-w-0 rounded-full px-5 py-3 text-pop-black" placeholder={placeholder} type="email" />
-          <button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button">
+          <input className="min-w-0 rounded-full px-5 py-3 text-text-main" placeholder={placeholder} type="email" />
+          <button className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white" type="button">
             {buttonText}
           </button>
         </form>
@@ -354,27 +359,29 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
   const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
 
   return (
-    <section className="overflow-hidden bg-white px-6 py-20" style={{ backgroundColor, color: textColor }}>
+    <section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
       <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
         {imageUrl && (
-          <div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
-            <img
+          <div className={`group relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
+            <Image
               src={imageUrl}
               alt={title || 'Editorial'}
+              fill
+              unoptimized
               className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
             />
           </div>
         )}
         <div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
           {title && (
-            <h2 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl" style={{ color: textColor }}>
+            <h2 className="text-4xl font-semibold leading-tight text-text-main md:text-6xl" style={{ color: textColor }}>
               {renderAccentTitle(title)}
             </h2>
           )}
-          <div className="h-px w-14 bg-pop-pink" />
-          {description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>}
+          <div className="h-px w-14 bg-brand-primary" />
+          {description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
           {buttonText && buttonLink && (
-            <Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-pop-pink hover:text-white">
+            <Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-white">
               {buttonText}
             </Link>
           )}
@@ -392,12 +399,12 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
   if (!slides.length) return null
 
   return (
-    <section className="bg-pop-black px-6 py-20 text-white">
+    <section className="bg-text-main px-6 py-20 text-white">
       <div className="mx-auto max-w-7xl space-y-12">
         {title && (
           <div className="mx-auto max-w-3xl space-y-4 text-center">
-            <h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'text-pop-yellow italic')}</h2>
-            <div className="mx-auto h-px w-16 bg-pop-yellow" />
+            <h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'ui-accent-text not-italic')}</h2>
+            <div className="mx-auto h-px w-16 bg-brand-accent" />
           </div>
         )}
         <div className="grid gap-6 md:grid-cols-3">
@@ -410,18 +417,24 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
             const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
 
             return (
-              <article key={index} className="group overflow-hidden rounded-3xl border border-white/10 bg-white/5">
+              <article key={index} className="group overflow-hidden rounded-3xl border border-line-primary/10 bg-surface-card/60">
                 {imageUrl && (
-                  <div className="aspect-[4/3] overflow-hidden">
-                    <img src={imageUrl} alt={slideTitle || 'Editorial slide'} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" />
+                  <div className="relative aspect-[4/3] overflow-hidden">
+                    <Image
+                      src={imageUrl}
+                      alt={slideTitle || 'Editorial slide'}
+                      fill
+                      unoptimized
+                      className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
+                    />
                   </div>
                 )}
                 <div className="space-y-4 p-6">
-                  {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>}
-                  {slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>}
+                  {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent">{category}</p>}
+                  {slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle)}</h3>}
                   {description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
                   {buttonText && buttonLink && (
-                    <Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-pop-yellow transition hover:text-white">
+                    <Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-brand-accent transition hover:text-white">
                       {buttonText} &rarr;
                     </Link>
                   )}
@@ -462,15 +475,15 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
   }
 
   return (
-    <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-pop-black px-6 py-24 text-center text-white md:min-h-[76vh]">
+    <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-text-main px-6 py-24 text-center text-white md:min-h-[76vh]">
       {imageUrl && (
         <>
-          <img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" />
-          <div className="absolute inset-0 bg-pop-black/55" />
+          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
+          <div className="absolute inset-0 bg-text-main/55" />
         </>
       )}
       <div className="relative z-10 mx-auto max-w-4xl space-y-6">
-        {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-yellow">{category}</p>}
+        {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-accent">{category}</p>}
         <h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
         {subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
         {(author || date) && (
@@ -504,17 +517,17 @@ function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string,
   ]
 
   return (
-    <section className="bg-pop-bg px-6 py-20">
+    <section className="bg-surface-page ui-section-band">
       <div className="mx-auto max-w-6xl space-y-12 text-center">
         <div className="mx-auto max-w-3xl space-y-4">
-          <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
-          {description && <p className="text-gray-600">{description}</p>}
+          <h2 className="ui-section-title">{title}</h2>
+          {description && <p className="text-muted-text">{description}</p>}
         </div>
         <div className="grid gap-6 md:grid-cols-3">
           {notes.map(([label, value]) => (
-            <article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal">
-              <h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3>
-              <p className="leading-relaxed text-gray-600">{value}</p>
+            <article key={label} className="ui-section-card p-8 text-left">
+              <h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-brand-primary">{label}</h3>
+              <p className="leading-relaxed text-muted-text">{value}</p>
             </article>
           ))}
         </div>
@@ -532,14 +545,14 @@ function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknow
   if (!quote) return null
 
   return (
-    <section className="bg-white px-6 py-24">
+    <section className="bg-surface-page px-6 py-24">
       <div className="mx-auto max-w-4xl text-center">
-        <p className="mb-8 text-7xl leading-none text-pop-pink/25">&quot;</p>
-        <blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl">
+        <p className="mb-8 text-7xl leading-none text-brand-primary/25">&quot;</p>
+        <blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
           {quote}
         </blockquote>
         {(author || role) && (
-          <p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-gray-500">
+          <p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-muted-text">
             {[author, role].filter(Boolean).join(' / ')}
           </p>
         )}
@@ -556,9 +569,9 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
   const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang)
 
   return (
-    <section className="bg-pop-bg px-6 py-20">
+    <section className="bg-surface-page ui-section-band">
       <div className="mx-auto max-w-4xl space-y-10">
-        {sectionTitle && <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{sectionTitle}</h2>}
+        {sectionTitle && <h2 className="ui-section-title">{sectionTitle}</h2>}
         {categories.map((category, categoryIndex) => {
           const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
           const name = localizedFromRecord(category, 'name', resolvedLang)
@@ -567,8 +580,8 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
           return (
             <div key={categoryIndex} className="space-y-5">
               {name && (
-                <h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black">
-                  {icon && <span className="text-pop-pink">{icon}</span>}
+                <h2 className="flex items-center gap-3 text-2xl font-semibold text-text-main">
+                  {icon && <span className="text-brand-primary">{icon}</span>}
                   {name}
                 </h2>
               )}
@@ -579,11 +592,11 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
                   if (!question || !answer) return null
 
                   return (
-                    <details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal">
-                      <summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden">
+                    <details key={itemIndex} className="group rounded-2xl bg-surface-card p-5 shadow-card">
+                      <summary className="cursor-pointer list-none text-lg font-semibold text-text-main marker:hidden">
                         {question}
                       </summary>
-                      <p className="mt-4 whitespace-pre-wrap leading-relaxed text-gray-600">{answer}</p>
+                      <p className="mt-4 whitespace-pre-wrap leading-relaxed text-muted-text">{answer}</p>
                     </details>
                   )
                 })}
@@ -621,28 +634,28 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
   ] as const
 
   return (
-    <section className="bg-white px-6 py-20">
+    <section className="bg-surface-page ui-section-band">
       <div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
         {title && (
           <div className="col-span-full mb-2">
-            <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
+            <h2 className="ui-section-title">{title}</h2>
           </div>
         )}
         {items.map(({ key, label, value, Icon }) => {
           if (!value) return null
 
           return (
-            <article key={key} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink">
+            <article key={key} className="ui-section-card-muted p-6 text-center">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-card text-brand-primary">
                 <Icon className="h-6 w-6" />
               </div>
-              <h3 className="mb-2 text-lg font-semibold text-pop-black">{label}</h3>
+              <h3 className="mb-2 text-lg font-semibold text-text-main">{label}</h3>
               {key === 'email' ? (
-                <a className="break-words text-gray-600 transition hover:text-pop-pink" href={`mailto:${value}`}>
+                <a className="break-words text-muted-text transition hover:text-brand-primary" href={`mailto:${value}`}>
                   {value}
                 </a>
               ) : (
-                <p className="whitespace-pre-wrap break-words text-gray-600">{value}</p>
+                <p className="whitespace-pre-wrap break-words text-muted-text">{value}</p>
               )}
             </article>
           )
diff --git a/apps/website/src/components/navigation/DesktopMegaMenu.tsx b/apps/website/src/components/navigation/DesktopMegaMenu.tsx
index 3e6585a..e713cfe 100644
--- a/apps/website/src/components/navigation/DesktopMegaMenu.tsx
+++ b/apps/website/src/components/navigation/DesktopMegaMenu.tsx
@@ -43,8 +43,8 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
               href={item.url || '#'}
               className={`flex items-center gap-1 border-b py-2 transition-colors ${
                 isOpen || isActive
-                  ? 'border-pop-pink text-pop-black'
-                  : 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black'
+                  ? 'border-brand-primary text-text-main'
+                  : 'border-transparent text-text-main hover:border-brand-primary hover:text-text-main'
               }`}
             >
               {getLocalizedMenuText(item.label, lang)}
@@ -69,11 +69,11 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                 onMouseEnter={() => handleOpen(uniqueId)}
                 onMouseLeave={handleClose}
               >
-                <div className="w-full cursor-default border-b border-black/5 bg-white/95 shadow-brutal backdrop-blur-xl">
+                <div className="w-full cursor-default border-b border-black/5 bg-surface-card/95 shadow-card backdrop-blur-xl">
                   <div className="mx-auto flex max-w-7xl justify-center gap-16 px-6 py-10">
                     {item.columns!.map((column, columnIndex) => (
                       <div key={columnIndex} className="flex min-w-[140px] flex-col text-left">
-                        <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-pop-black/50">
+                        <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/50">
                           {getLocalizedMenuText(column.title, lang)}
                         </h4>
                         <ul className="space-y-3">
@@ -81,7 +81,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                             <li key={linkIndex}>
                               <Link
                                 href={link.url || '#'}
-                                className="block text-sm font-normal normal-case tracking-normal text-pop-black/65 transition-colors hover:text-pop-pink"
+                                className="block text-sm font-normal normal-case tracking-normal text-text-main/65 transition-colors hover:text-brand-primary"
                               >
                                 {getLocalizedMenuText(link.label, lang)}
                               </Link>
diff --git a/apps/website/src/components/navigation/MobileDrawer.tsx b/apps/website/src/components/navigation/MobileDrawer.tsx
index 2c8728e..6b135cd 100644
--- a/apps/website/src/components/navigation/MobileDrawer.tsx
+++ b/apps/website/src/components/navigation/MobileDrawer.tsx
@@ -57,22 +57,22 @@ export function MobileDrawer({
   const pushView = (node: MenuNode) => setStack((prev) => [...prev, node])
   const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev))
 
-  const linkClass = 'block w-full py-4 text-left text-sm font-medium uppercase tracking-wide text-pop-black/65 transition-colors hover:text-pop-pink'
-  const nestedLinkClass = 'block w-full py-2 text-left text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink'
+  const linkClass = 'ui-menu-link py-4'
+  const nestedLinkClass = 'ui-menu-link-compact py-2'
 
   const renderView = (view: MenuNode) => {
     if (view.type === 'root') {
       return (
         <div className="space-y-1 px-6 py-2">
           {view.data.map((item, index) => (
-            <div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-pop-black/10 last:border-0">
+            <div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-text-main/10 last:border-0">
               {item.columns?.length ? (
                 <button
                   onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })}
-                  className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-pop-black/65 transition-colors hover:text-pop-pink"
+                  className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary"
                 >
                   <span>{getLocalizedMenuText(item.label, lang)}</span>
-                  <ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" />
+                  <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
                 </button>
               ) : (
                 <Link href={item.url || '#'} onClick={onClose} className={linkClass}>
@@ -82,7 +82,7 @@ export function MobileDrawer({
             </div>
           ))}
           {customerName && (
-            <div className="border-b border-pop-black/10">
+            <div className="border-b border-text-main/10">
               <Link href="/profile" onClick={onClose} className={linkClass}>
                 My Profile
               </Link>
@@ -97,7 +97,7 @@ export function MobileDrawer({
         <div className="px-6 py-4">
           {view.data.map((column, columnIndex) => (
             <div key={columnIndex} className="mb-8 last:mb-0">
-              <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-pop-black/45">
+              <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/45">
                 {getLocalizedMenuText(column.title, lang)}
               </h4>
               <div className="space-y-2">
@@ -106,10 +106,10 @@ export function MobileDrawer({
                     {link.links?.length ? (
                       <button
                         onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
-                        className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink"
+                        className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
                       >
                         <span>{getLocalizedMenuText(link.label, lang)}</span>
-                        <ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" />
+                        <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
                       </button>
                     ) : (
                       <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -132,10 +132,10 @@ export function MobileDrawer({
             {link.links?.length ? (
               <button
                 onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
-                className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink"
+                className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
               >
                 <span>{getLocalizedMenuText(link.label, lang)}</span>
-                <ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" />
+                <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
               </button>
             ) : (
               <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -151,31 +151,31 @@ export function MobileDrawer({
   return (
     <div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
       <div
-        className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
+        className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
         onClick={onClose}
       />
       <div
-        className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-white shadow-2xl transition-transform duration-300 ${
+        className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-surface-card shadow-2xl transition-transform duration-300 ${
           isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
       >
-        <div className="z-10 flex shrink-0 items-center justify-between border-b border-pop-black/10 bg-white px-6 py-5">
-          <span className="text-sm font-bold uppercase tracking-widest text-pop-black">Menu</span>
+        <div className="z-10 flex shrink-0 items-center justify-between border-b border-text-main/10 bg-surface-card px-6 py-5">
+          <span className="text-sm font-bold uppercase tracking-widest text-text-main">Menu</span>
           <div className="flex items-center gap-3">
             <button
               onClick={onOpenLang}
-              className="flex shrink-0 items-center gap-1 rounded-md border border-pop-pink/30 bg-pop-bg px-2.5 py-1 text-[10px] font-bold uppercase text-pop-pink"
+              className="flex shrink-0 items-center gap-1 rounded-md border border-brand-primary/30 bg-surface-page px-2.5 py-1 text-[10px] font-bold uppercase text-brand-primary"
             >
               <Globe className="h-3 w-3" />
               {lang.toUpperCase()}
             </button>
-            <button onClick={onClose} className="rounded-full p-1.5 text-pop-black/65 transition hover:bg-pop-bg hover:text-pop-pink">
+            <button onClick={onClose} className="rounded-full p-1.5 text-text-main/65 transition hover:bg-surface-page hover:text-brand-primary">
               <X className="h-5 w-5" />
             </button>
           </div>
         </div>
 
-        <div className="relative flex-1 overflow-hidden bg-white">
+        <div className="relative flex-1 overflow-hidden bg-surface-card">
           {stack.map((view, index) => {
             const isCurrent = index === stack.length - 1
             const isPast = index < stack.length - 1
@@ -183,14 +183,14 @@ export function MobileDrawer({
             return (
               <div
                 key={index}
-                className={`absolute inset-0 flex flex-col bg-white transition-transform duration-300 ease-in-out ${
+                className={`absolute inset-0 flex flex-col bg-surface-card transition-transform duration-300 ease-in-out ${
                   isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full'
                 }`}
               >
                 {index > 0 && (
                   <button
                     onClick={popView}
-                    className="flex shrink-0 items-center border-b border-pop-black/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg"
+                    className="flex shrink-0 items-center border-b border-text-main/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page"
                   >
                     <ChevronLeft className="mr-2 h-4 w-4" />
                     Back to {getLocalizedMenuText(stack[index - 1].title, lang)}
@@ -199,7 +199,7 @@ export function MobileDrawer({
 
                 {index > 0 && (
                   <div className="shrink-0 px-6 py-5">
-                    <h3 className="text-lg font-bold uppercase tracking-widest text-pop-black">{getLocalizedMenuText(view.title, lang)}</h3>
+                    <h3 className="text-lg font-bold uppercase tracking-widest text-text-main">{getLocalizedMenuText(view.title, lang)}</h3>
                   </div>
                 )}
 
@@ -209,11 +209,11 @@ export function MobileDrawer({
           })}
         </div>
 
-        <div className="z-10 shrink-0 space-y-3 border-t border-pop-black/10 bg-white px-6 pb-8 pt-6">
+        <div className="z-10 shrink-0 space-y-3 border-t border-text-main/10 bg-surface-card px-6 pb-8 pt-6">
           <Link
             href="/shop"
             onClick={onClose}
-            className="block w-full rounded-xl bg-pop-black py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-pop-pink"
+            className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-brand-primary"
           >
             Shop Now
           </Link>
@@ -233,7 +233,7 @@ export function MobileDrawer({
                 onLogin()
                 onClose()
               }}
-              className="block w-full rounded-xl border border-[#00B900]/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-[#00B900] transition-colors hover:bg-[#00B900]/10"
+              className="block w-full rounded-xl border border-line-primary/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-line-primary transition-colors hover:bg-line-primary/10"
             >
               Login with LINE
             </button>
diff --git a/apps/website/src/store/authStore.ts b/apps/website/src/store/authStore.ts
index 5d1df21..8fb1586 100644
--- a/apps/website/src/store/authStore.ts
+++ b/apps/website/src/store/authStore.ts
@@ -29,6 +29,7 @@ export const useAuthStore = create<AuthState>()(
     {
       name: 'homaroma-auth-storage',
       partialize: (state) => ({ token: state.token, customer: state.customer }),
+      skipHydration: true,
     },
   ),
 )
diff --git a/apps/website/src/store/cartStore.ts b/apps/website/src/store/cartStore.ts
index fdb98ef..c622e3b 100644
--- a/apps/website/src/store/cartStore.ts
+++ b/apps/website/src/store/cartStore.ts
@@ -73,6 +73,7 @@ export const useCartStore = create<CartState>()(
     {
       name: 'homaroma-cart-storage',
       partialize: (state) => ({ items: state.items }), // Only persist items, not UI state
+      skipHydration: true,
     }
   )
 );
diff --git a/apps/website/src/store/wishlistStore.ts b/apps/website/src/store/wishlistStore.ts
index 7c085c7..a0b3a37 100644
--- a/apps/website/src/store/wishlistStore.ts
+++ b/apps/website/src/store/wishlistStore.ts
@@ -42,6 +42,7 @@ export const useWishlistStore = create<WishlistState>()(
     {
       name: 'homaroma-wishlist',
       partialize: (state) => ({ items: state.items }),
+      skipHydration: true,
     },
   ),
 )