diff --git a/apps/website/src/components/LocalizedNotFound.tsx b/apps/website/src/components/LocalizedNotFound.tsx
index 1d10313..74358b4 100644
--- a/apps/website/src/components/LocalizedNotFound.tsx
+++ b/apps/website/src/components/LocalizedNotFound.tsx
@@ -1,6 +1,6 @@
-'use client'
-
+import Image from 'next/image'
 import Link from 'next/link'
+import { ArrowRight, Home, Search, ShoppingBag } from 'lucide-react'
 import { getPathWithLocale, type Locale } from '@/lib/locales'
 
 const copy = {
@@ -13,6 +13,7 @@ const copy = {
     search: 'ค้นหาสินค้า',
     guide: 'คู่มือเลือกกลิ่น',
     contact: 'ติดต่อเรา',
+    hint: '404',
   },
   en: {
     eyebrow: 'Page not found',
@@ -23,6 +24,7 @@ const copy = {
     search: 'Search products',
     guide: 'Scent Guide',
     contact: 'Contact',
+    hint: '404',
   },
   ja: {
     eyebrow: 'ページが見つかりません',
@@ -33,6 +35,7 @@ const copy = {
     search: '商品を検索',
     guide: '香りガイド',
     contact: 'お問い合わせ',
+    hint: '404',
   },
   zh: {
     eyebrow: '页面未找到',
@@ -43,6 +46,7 @@ const copy = {
     search: '搜索商品',
     guide: '香氛指南',
     contact: '联系我们',
+    hint: '404',
   },
   vi: {
     eyebrow: 'Không tìm thấy trang',
@@ -53,6 +57,7 @@ const copy = {
     search: 'Tìm sản phẩm',
     guide: 'Hướng dẫn mùi hương',
     contact: 'Liên hệ',
+    hint: '404',
   },
   ko: {
     eyebrow: '페이지를 찾을 수 없습니다',
@@ -63,6 +68,7 @@ const copy = {
     search: '상품 검색',
     guide: '향 가이드',
     contact: '문의하기',
+    hint: '404',
   },
 } as const
 
@@ -80,105 +86,78 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
   const text = getCopy(lang)
 
   return (
-    <div className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden bg-text-main">
-
-      {/* Atmospheric glow background */}
-      <div className="absolute inset-0 pointer-events-none">
-        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[40rem] bg-brand-primary/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-warm/10 rounded-full blur-3xl" />
-        <div className="absolute top-10 left-10 w-32 h-32 bg-brand-accent/5 rounded-full blur-2xl" />
-      </div>
-
-      {/* Grain texture overlay */}
-      <div
-        className="absolute inset-0 opacity-[0.03] pointer-events-none"
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")`,
-        }}
-      />
-
-      <div className="relative z-10 text-center space-y-8 max-w-xl w-full">
-
-        {/* 404 Large number with layered effect */}
-        <div className="relative select-none">
-          <p
-            className="text-[10rem] md:text-[14rem] font-black leading-none"
-            style={{
-              background: 'linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.03))',
-              WebkitBackgroundClip: 'text',
-              WebkitTextFillColor: 'transparent',
-              backgroundClip: 'text',
-            }}
-          >
-            404
-          </p>
-
-          {/* Floating emoji center */}
-          <div
-            className="absolute inset-0 flex items-center justify-center"
-            style={{ animation: 'float 4s ease-in-out infinite' }}
-          >
-            <span className="text-5xl md:text-6xl drop-shadow-2xl">🌿</span>
+    <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="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="ui-eyebrow">{text.eyebrow}</span>
           </div>
-        </div>
 
-        {/* Eyebrow badge */}
-        <div className="flex justify-center">
-          <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-[10px] font-bold uppercase tracking-[0.25em] text-brand-primary backdrop-blur-sm">
-            {text.eyebrow}
-          </span>
-        </div>
-
-        {/* Copy */}
-        <div className="space-y-4">
-          <h1 className="font-serif text-2xl font-light leading-relaxed tracking-wide text-white/90 md:text-3xl">
+          <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="text-sm font-light leading-relaxed text-white/50 mx-auto max-w-sm">
+          <p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
             {text.description}
           </p>
-        </div>
 
-        {/* Primary actions */}
-        <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
-          <Link
-            href={getPathWithLocale('/', lang)}
-            className="inline-flex items-center justify-center gap-2 rounded-full bg-brand-primary px-8 py-3.5 text-xs font-bold uppercase tracking-widest text-white transition-all duration-300 hover:bg-brand-primary-hover hover:shadow-[0_0_30px_rgba(255,107,107,0.4)] hover:-translate-y-0.5"
-          >
-            {text.home}
-          </Link>
-          <Link
-            href={getPathWithLocale('/shop', lang)}
-            className="inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-8 py-3.5 text-xs font-bold uppercase tracking-widest text-white/80 backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/30 hover:-translate-y-0.5"
-          >
-            {text.shop}
-          </Link>
-        </div>
-
-        {/* Divider + quick links */}
-        <div className="pt-4 border-t border-white/10">
-          <div className="flex justify-center gap-6 text-xs text-white/30">
-            <Link href={getPathWithLocale('/scent-guide', lang)} className="hover:text-white/70 transition-colors duration-300">
-              {text.guide}
+          <div className="mt-10 flex flex-col gap-3 sm:flex-row">
+            <Link
+              href={getPathWithLocale('/', lang)}
+              className="ui-button-primary px-6 py-3"
+            >
+              <Home className="h-4 w-4" />
+              {text.home}
             </Link>
-            <Link href={getPathWithLocale('/search', lang)} className="hover:text-white/70 transition-colors duration-300">
-              {text.search}
-            </Link>
-            <Link href={getPathWithLocale('/contact', lang)} className="hover:text-white/70 transition-colors duration-300">
-              {text.contact}
+            <Link
+              href={getPathWithLocale('/shop', lang)}
+              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}
             </Link>
           </div>
         </div>
 
-      </div>
+          <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-muted-text">{text.hint}</p>
+                <p className="mt-1 text-sm font-semibold text-text-main">{text.search}</p>
+              </div>
+            </div>
 
-      {/* Float keyframe via inline style */}
-      <style>{`
-        @keyframes float {
-          0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(-14px); }
-        }
-      `}</style>
-    </div>
+            <div className="mt-6 grid gap-3">
+              <Link
+                href={getPathWithLocale('/search', lang)}
+                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-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-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" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   )
 }