diff --git a/public/fonts/Athelas-Bold.ttf b/public/fonts/Athelas-Bold.ttf
new file mode 100644
index 00000000..ec990694
Binary files /dev/null and b/public/fonts/Athelas-Bold.ttf differ
diff --git a/public/fonts/Athelas-BoldItalic.ttf b/public/fonts/Athelas-BoldItalic.ttf
new file mode 100644
index 00000000..6a66f43b
Binary files /dev/null and b/public/fonts/Athelas-BoldItalic.ttf differ
diff --git a/public/fonts/Athelas-Regular.ttf b/public/fonts/Athelas-Regular.ttf
new file mode 100644
index 00000000..4e4dc310
Binary files /dev/null and b/public/fonts/Athelas-Regular.ttf differ
diff --git a/public/images/auth/bg-login.png b/public/images/auth/bg-login.png
new file mode 100644
index 00000000..c0f41606
Binary files /dev/null and b/public/images/auth/bg-login.png differ
diff --git a/public/images/auth/bg-login@2x.png b/public/images/auth/bg-login@2x.png
new file mode 100644
index 00000000..b334ec62
Binary files /dev/null and b/public/images/auth/bg-login@2x.png differ
diff --git a/public/images/auth/bg-login@3x.png b/public/images/auth/bg-login@3x.png
new file mode 100644
index 00000000..d0ad877b
Binary files /dev/null and b/public/images/auth/bg-login@3x.png differ
diff --git a/public/images/chat/bg-chatpage.png b/public/images/chat/bg-chatpage.png
new file mode 100644
index 00000000..a601d1f7
Binary files /dev/null and b/public/images/chat/bg-chatpage.png differ
diff --git a/public/images/chat/bg-chatpage@2x.png b/public/images/chat/bg-chatpage@2x.png
new file mode 100644
index 00000000..4c7268bf
Binary files /dev/null and b/public/images/chat/bg-chatpage@2x.png differ
diff --git a/public/images/chat/bg-chatpage@3x.png b/public/images/chat/bg-chatpage@3x.png
new file mode 100644
index 00000000..757e2968
Binary files /dev/null and b/public/images/chat/bg-chatpage@3x.png differ
diff --git a/public/images/chat/pic-chat-elio.png b/public/images/chat/pic-chat-elio.png
new file mode 100644
index 00000000..bef165af
Binary files /dev/null and b/public/images/chat/pic-chat-elio.png differ
diff --git a/public/images/chat/pic-chat-elio@2x.png b/public/images/chat/pic-chat-elio@2x.png
new file mode 100644
index 00000000..1241d49f
Binary files /dev/null and b/public/images/chat/pic-chat-elio@2x.png differ
diff --git a/public/images/chat/pic-chat-elio@3x.png b/public/images/chat/pic-chat-elio@3x.png
new file mode 100644
index 00000000..57e5833a
Binary files /dev/null and b/public/images/chat/pic-chat-elio@3x.png differ
diff --git a/public/images/chat/pic-chat-guest.png b/public/images/chat/pic-chat-guest.png
new file mode 100644
index 00000000..db11c15c
Binary files /dev/null and b/public/images/chat/pic-chat-guest.png differ
diff --git a/public/images/chat/pic-chat-guest@2x.png b/public/images/chat/pic-chat-guest@2x.png
new file mode 100644
index 00000000..c315eaf8
Binary files /dev/null and b/public/images/chat/pic-chat-guest@2x.png differ
diff --git a/public/images/chat/pic-chat-guest@3x.png b/public/images/chat/pic-chat-guest@3x.png
new file mode 100644
index 00000000..0647382a
Binary files /dev/null and b/public/images/chat/pic-chat-guest@3x.png differ
diff --git a/public/images/icons/ic-loading.png b/public/images/icons/ic-loading.png
new file mode 100644
index 00000000..d1428a1c
Binary files /dev/null and b/public/images/icons/ic-loading.png differ
diff --git a/public/images/icons/ic-loading@2x.png b/public/images/icons/ic-loading@2x.png
new file mode 100644
index 00000000..b95742eb
Binary files /dev/null and b/public/images/icons/ic-loading@2x.png differ
diff --git a/public/images/icons/ic-loading@3x.png b/public/images/icons/ic-loading@3x.png
new file mode 100644
index 00000000..97aa0df7
Binary files /dev/null and b/public/images/icons/ic-loading@3x.png differ
diff --git a/public/images/icons/icon-add-to-home.png b/public/images/icons/icon-add-to-home.png
new file mode 100644
index 00000000..3f1a7ce6
Binary files /dev/null and b/public/images/icons/icon-add-to-home.png differ
diff --git a/public/images/icons/icon-add-to-home@2x.png b/public/images/icons/icon-add-to-home@2x.png
new file mode 100644
index 00000000..4d4f53b1
Binary files /dev/null and b/public/images/icons/icon-add-to-home@2x.png differ
diff --git a/public/images/icons/icon-add-to-home@3x.png b/public/images/icons/icon-add-to-home@3x.png
new file mode 100644
index 00000000..7bf37e60
Binary files /dev/null and b/public/images/icons/icon-add-to-home@3x.png differ
diff --git a/public/images/icons/icon-navigation-guest.png b/public/images/icons/icon-navigation-guest.png
new file mode 100644
index 00000000..879fca6d
Binary files /dev/null and b/public/images/icons/icon-navigation-guest.png differ
diff --git a/public/images/icons/icon-navigation-guest@2x.png b/public/images/icons/icon-navigation-guest@2x.png
new file mode 100644
index 00000000..9e14f6ee
Binary files /dev/null and b/public/images/icons/icon-navigation-guest@2x.png differ
diff --git a/public/images/icons/icon-navigation-guest@3x.png b/public/images/icons/icon-navigation-guest@3x.png
new file mode 100644
index 00000000..5be825d7
Binary files /dev/null and b/public/images/icons/icon-navigation-guest@3x.png differ
diff --git a/public/images/splash/ic-logo-home.png b/public/images/splash/ic-logo-home.png
new file mode 100644
index 00000000..5bf3fa0d
Binary files /dev/null and b/public/images/splash/ic-logo-home.png differ
diff --git a/public/images/splash/ic-logo-home@2x.png b/public/images/splash/ic-logo-home@2x.png
new file mode 100644
index 00000000..b6340a0e
Binary files /dev/null and b/public/images/splash/ic-logo-home@2x.png differ
diff --git a/public/images/splash/ic-logo-home@3x.png b/public/images/splash/ic-logo-home@3x.png
new file mode 100644
index 00000000..09d8247e
Binary files /dev/null and b/public/images/splash/ic-logo-home@3x.png differ
diff --git a/public/images/splash/pic-bg-home.png b/public/images/splash/pic-bg-home.png
new file mode 100644
index 00000000..8079c6ab
Binary files /dev/null and b/public/images/splash/pic-bg-home.png differ
diff --git a/public/images/splash/pic-bg-home@2x.png b/public/images/splash/pic-bg-home@2x.png
new file mode 100644
index 00000000..053e9ad6
Binary files /dev/null and b/public/images/splash/pic-bg-home@2x.png differ
diff --git a/public/images/splash/pic-bg-home@3x.png b/public/images/splash/pic-bg-home@3x.png
new file mode 100644
index 00000000..37377076
Binary files /dev/null and b/public/images/splash/pic-bg-home@3x.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 399bf303..d107fb14 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import Script from "next/script";
 import "./globals.css";
 
@@ -15,6 +16,39 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+/**
+ * Athelas 字体加载
+ * 原始资源：/Users/chase/Documents/cozsweet/fonts/Athelas-*.ttf
+ * 放置位置：/public/fonts/Athelas-*.ttf
+ *
+ * 路径计算（`next/font/local` 要求相对路径从调用文件出发）：
+ *   src/app/layout.tsx → ../../public/fonts/...
+ *
+ * 通过 `next/font/local` 自动 preload、压缩、inline。
+ * 输出 CSS 变量 `--font-athelas`，由 `globals.css` 桥接到 Tailwind `font-athelas`。
+ */
+const athelas = localFont({
+  src: [
+    {
+      path: "../../public/fonts/Athelas-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Athelas-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../../public/fonts/Athelas-BoldItalic.ttf",
+      weight: "700",
+      style: "italic",
+    },
+  ],
+  variable: "--font-athelas",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "cozsweet",
   description: "cozsweet frontend (Next.js)",
@@ -31,7 +65,7 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} ${athelas.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
         {/* Facebook SDK JS（auth + splash 入口会用到 FB.login） */}
diff --git a/src/app/splash/components/splash-background.module.css b/src/app/splash/components/splash-background.module.css
index 585271e6..7e78896f 100644
--- a/src/app/splash/components/splash-background.module.css
+++ b/src/app/splash/components/splash-background.module.css
@@ -1,8 +1,12 @@
 .bg {
   position: absolute;
   inset: 0;
-  background:
-    radial-gradient(circle at 80% 20%, rgba(248, 77, 150, 0.25), transparent 60%),
-    linear-gradient(180deg, #1a0f2a 0%, #0d0b14 100%);
   z-index: 0;
+  background: var(--color-sidebar-background);
+  overflow: hidden;
+}
+
+.image {
+  object-fit: cover;
+  object-position: center;
 }
diff --git a/src/app/splash/components/splash-background.tsx b/src/app/splash/components/splash-background.tsx
index 9920d1d3..9dcd1190 100644
--- a/src/app/splash/components/splash-background.tsx
+++ b/src/app/splash/components/splash-background.tsx
@@ -1,14 +1,18 @@
 "use client";
-/**
- * Splash 背景
- *
- * 原始 Dart: lib/ui/splash/widgets/splash_background.dart
- *   使用 `Assets.images.picBgHome.image(fit: BoxFit.cover)` 渲染全屏背景图。
- *
- * 当前实现：纯色 + CSS 渐变占位（待 `public/splash/bg.png` 资源到位后可切换为 `<Image>`）。
- */
+import Image from "next/image";
 import styles from "./splash-background.module.css";
 
 export function SplashBackground() {
-  return <div className={styles.bg} aria-hidden="true" />;
+  return (
+    <div className={styles.bg}>
+      <Image
+        src="/images/splash/pic-bg-home.png"
+        alt=""
+        fill
+        priority
+        sizes="100vw"
+        className={styles.image}
+      />
+    </div>
+  );
 }
diff --git a/src/app/splash/components/splash-button.module.css b/src/app/splash/components/splash-button.module.css
index 6af579e6..d4b9921c 100644
--- a/src/app/splash/components/splash-button.module.css
+++ b/src/app/splash/components/splash-button.module.css
@@ -1,7 +1,61 @@
 .wrapper {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-26);
   width: 100%;
   z-index: 2;
 }
+
+.skip {
+  font-family: var(--font-athelas);
+  font-size: var(--font-size-xxl);
+  font-weight: 700;
+  color: #ffffff;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+.skip:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.separator {
+  width: var(--spacing-26);
+  height: 1px;
+}
+
+.facebookButton {
+  height: 48px;
+  padding: 0 30px;
+  border: 0;
+  border-radius: 24px;
+  background: linear-gradient(
+    to right,
+    #fff96ade,
+    #fff657a0
+  );
+  color: #ffffff;
+  font-weight: 700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 10px rgba(248, 89, 168, 0.3);
+}
+
+.facebookButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.facebookLabel {
+  font-family: var(--font-athelas);
+  font-size: var(--font-size-xxl);
+  font-weight: 700;
+  color: #ffffff;
+}
diff --git a/src/app/splash/components/splash-button.tsx b/src/app/splash/components/splash-button.tsx
index ef3e9043..8b966955 100644
--- a/src/app/splash/components/splash-button.tsx
+++ b/src/app/splash/components/splash-button.tsx
@@ -1,35 +1,63 @@
 "use client";
 /**
- * Splash 底部按钮组（Skip + Facebook 登录）
+ * Splash 底部按钮组
  *
  * 原始 Dart: lib/ui/splash/widgets/splash_button.dart
+ *   `Row(children: [Skip 文本, SizedBox 26, Facebook 登录按钮])`
+ *
+ * 关键对齐点：
+ *   - 仅两个元素：Skip 文本 + Facebook 登录按钮
+ *   - 居中布局 (MainAxisAlignment.center)
+ *   - Facebook 按钮：带渐变（primaryGradient）+ 圆角 24 + 高度 48
+ *   - 加载中：按钮内显示 spinner
  */
-import { useAuthState } from "@/contexts/auth/auth-context";
-
-import { AuthSocialButtons } from "@/app/auth/components/auth-social-buttons";
-import { AuthPrimaryButton } from "@/app/auth/components/auth-primary-button";
-import { AuthDivider } from "@/app/auth/components/auth-divider";
-import { useAuthDispatch } from "@/contexts/auth/auth-context";
+import { useAuthState, useAuthDispatch } from "@/contexts/auth/auth-context";
+import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
 import styles from "./splash-button.module.css";
 
 export interface SplashButtonProps {
   onSkip: () => void;
+  onFacebookLogin: () => void;
 }
 
-export function SplashButton({ onSkip }: SplashButtonProps) {
+export function SplashButton({
+  onSkip,
+  onFacebookLogin,
+}: SplashButtonProps) {
   const state = useAuthState();
   const dispatch = useAuthDispatch();
+  const isLoading = state.isLoading;
+
   return (
     <div className={styles.wrapper}>
-      <AuthSocialButtons
-        loadingProvider={state.isLoading ? "facebook" : null}
-        onFacebook={() => dispatch({ type: "AuthFacebookLoginSubmitted" })}
-        onGoogle={() => dispatch({ type: "AuthGoogleLoginSubmitted" })}
-      />
-      <AuthDivider label="or" />
-      <AuthPrimaryButton onClick={onSkip} variant="primary">
-        Skip — Continue as Guest
-      </AuthPrimaryButton>
+      {/* Skip 文本按钮 */}
+      <button
+        type="button"
+        onClick={onSkip}
+        className={styles.skip}
+        disabled={isLoading}
+      >
+        Skip
+      </button>
+
+      <div className={styles.separator} aria-hidden="true" />
+
+      {/* Facebook 登录按钮（带渐变） */}
+      <button
+        type="button"
+        onClick={() => {
+          dispatch({ type: "AuthFacebookLoginSubmitted" });
+          onFacebookLogin();
+        }}
+        disabled={isLoading}
+        className={styles.facebookButton}
+      >
+        {isLoading ? (
+          <LoadingIndicator color="#ffffff" />
+        ) : (
+          <span className={styles.facebookLabel}>Login with Facebook</span>
+        )}
+      </button>
     </div>
   );
 }
diff --git a/src/app/splash/components/splash-content.module.css b/src/app/splash/components/splash-content.module.css
index 70d7bbcd..1058b26c 100644
--- a/src/app/splash/components/splash-content.module.css
+++ b/src/app/splash/components/splash-content.module.css
@@ -2,21 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  color: var(--color-text-primary);
   z-index: 2;
 }
 
 .title {
-  margin: 0;
   font-family: var(--font-athelas);
-  font-size: var(--font-size-26);
-  font-weight: 600;
-  line-height: 1.3;
-}
-
-.subtitle {
+  font-size: var(--font-size-title);
+  font-weight: 700;
+  font-style: italic;
+  line-height: 1.4;
+  color: #ffffff;
+  text-align: left;
+  white-space: pre-line;
   margin: 0;
-  font-size: var(--font-size-md);
-  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.8);
 }
diff --git a/src/app/splash/components/splash-content.tsx b/src/app/splash/components/splash-content.tsx
index 1fe9338c..65c2c397 100644
--- a/src/app/splash/components/splash-content.tsx
+++ b/src/app/splash/components/splash-content.tsx
@@ -1,18 +1,27 @@
 "use client";
 /**
- * Splash 内容文案
+ * Splash 主内容文案
  *
  * 原始 Dart: lib/ui/splash/widgets/splash_content.dart
+ *
+ * 关键差异：
+ *   - 使用 Athelas 字体（衬线体）
+ *   - 标题加粗 + 斜体（与原 Dart 一致）
+ *   - 颜色：白色（背景图上需高对比度）
  */
 import styles from "./splash-content.module.css";
 
+const APOSTROPHE = "&#39;";
+
 export function SplashContent() {
   return (
     <div className={styles.content}>
-      <h1 className={styles.title}>Chat with Elio, anytime, anywhere</h1>
-      <p className={styles.subtitle}>
-        A safe, private space to talk, share, and unwind — your AI companion who&apos;s always there.
-      </p>
+      <h1 className={styles.title}>
+        Welcome to my secret hideout~
+        {"\n"}It{APOSTROPHE}s just the two of us now.
+        {"\n"}Feel free to whisper your
+        {"\n"}little secrets.
+      </h1>
     </div>
   );
 }
diff --git a/src/app/splash/components/splash-logo.module.css b/src/app/splash/components/splash-logo.module.css
index 39cbe2bf..8e9829dd 100644
--- a/src/app/splash/components/splash-logo.module.css
+++ b/src/app/splash/components/splash-logo.module.css
@@ -1,20 +1,12 @@
 .logo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  color: var(--color-text-primary);
+  display: inline-flex;
   z-index: 2;
 }
 
-.brand {
-  font-family: var(--font-athelas);
-  font-size: var(--font-size-title-x-large);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1;
-}
-
-.tagline {
-  font-size: var(--font-size-md);
-  color: var(--color-text-secondary);
+.image {
+  display: block;
+  width: auto;
+  height: auto;
+  /* Apple 平台 Athelas 渲染时仍可能需要 fallback */
+  font-family: var(--font-athelas, serif);
 }
diff --git a/src/app/splash/components/splash-logo.tsx b/src/app/splash/components/splash-logo.tsx
index 5f856fcb..9a1c2105 100644
--- a/src/app/splash/components/splash-logo.tsx
+++ b/src/app/splash/components/splash-logo.tsx
@@ -3,17 +3,24 @@
  * Splash Logo
  *
  * 原始 Dart: lib/ui/splash/widgets/splash_logo.dart
- *
- * 当前实现：纯文字 logo（"cozsweet" + tagline）。
- * 资源：`Assets.images.icLogoHome`（待替换为 `<Image src="/splash/logo.svg" />`）。
+ * 资源: /public/images/splash/ic-logo-home.png (kebab-case 重命名后)
+ *       原名: ic_logo_home.png (snake_case)
+ * 渲染: Assets.images.icLogoHome.image() → next/image <Image>
  */
+import Image from "next/image";
 import styles from "./splash-logo.module.css";
 
 export function SplashLogo() {
   return (
     <div className={styles.logo}>
-      <span className={styles.brand}>cozsweet</span>
-      <span className={styles.tagline}>Your exclusive AI boyfriend</span>
+      <Image
+        src="/images/splash/ic-logo-home.png"
+        alt="cozsweet"
+        width={120}
+        height={40}
+        priority
+        className={styles.image}
+      />
     </div>
   );
 }
diff --git a/src/app/splash/components/splash-screen.module.css b/src/app/splash/components/splash-screen.module.css
index 838d3b8c..4ab83499 100644
--- a/src/app/splash/components/splash-screen.module.css
+++ b/src/app/splash/components/splash-screen.module.css
@@ -8,6 +8,7 @@
   overflow: hidden;
 }
 
+/* 渐变：accent (bottom-left) → transparent (center-right) */
 .gradientOverlay {
   position: absolute;
   inset: 0;
@@ -16,7 +17,7 @@
     var(--color-accent),
     transparent 60%
   );
-  opacity: 0.4;
+  opacity: 0.5;
   z-index: 1;
   pointer-events: none;
 }
@@ -40,7 +41,9 @@
 
 .bottom {
   margin: var(--spacing-xxxl) 0 0 0;
+  font-family: var(--font-athelas);
   font-size: var(--font-size-md);
+  font-weight: 400;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.9);
   text-align: center;
diff --git a/src/app/splash/components/splash-screen.tsx b/src/app/splash/components/splash-screen.tsx
index d6d65f59..740ba2c2 100644
--- a/src/app/splash/components/splash-screen.tsx
+++ b/src/app/splash/components/splash-screen.tsx
@@ -42,13 +42,19 @@ export function SplashScreen() {
     <MobileShell background="var(--color-sidebar-background)">
       <div className={styles.wrapper}>
         <SplashBackground />
+        {/* 渐变叠加层：accent → transparent (bottom-left → center-right) */}
         <div className={styles.gradientOverlay} aria-hidden="true" />
         <div className={styles.content}>
           <SplashLogo />
           <div className={styles.spacer} />
           <SplashContent />
           <div className={styles.buttonArea}>
-            <SplashButton onSkip={() => router.push(ROUTES.chat)} />
+            <SplashButton
+              onSkip={() => router.push(ROUTES.chat)}
+              onFacebookLogin={() => {
+                /* Facebook 登录触发由 SplashButton 内部 dispatch */
+              }}
+            />
           </div>
           <p className={styles.bottom}>
             Elio Silvestri, Your exclusive AI boyfriend