diff --git a/app/globals.css b/app/globals.css
index d740fcc..4ced902 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,19 +1,14 @@
 @import "tailwindcss";
 
 :root {
-  --bg-base: #09090b;
-  --bg-surface: #18181b;
-  --bg-elevated: #27272a;
-  --text-primary: #fafafa;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --border-default: #3f3f46;
-  --border-subtle: #27272a;
-  --accent-blue: #3b82f6;
-  --accent-blue-hover: #2563eb;
-  --accent-blue-active: #1d4ed8;
-  --accent-violet: #8b5cf6;
-  --focus-ring: #60a5fa;
+  --bg-base: #0a0a0f;
+  --bg-surface: rgba(255, 255, 255, 0.05);
+  --bg-card: rgba(255, 255, 255, 0.08);
+  --text-primary: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-hover: rgba(255, 255, 255, 0.2);
+  --focus-ring: rgba(255, 255, 255, 0.5);
 }
 
 * {
@@ -22,10 +17,15 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
 html {
   background-color: var(--bg-base);
   color-scheme: dark;
-  scroll-behavior: smooth;
 }
 
 body {
@@ -45,159 +45,190 @@ body {
 }
 
 /* ========================================
-   TYPOGRAPHY HIERARCHY
+   ANIMATED GRADIENT BACKGROUND
    ======================================== */
 
-h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  line-height: 1.2;
-  color: var(--text-primary);
-}
-
-@media (min-width: 640px) {
-  h1 {
-    font-size: 2.5rem;
+.animated-gradient {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(
+    135deg,
+    #0a0a0f 0%,
+    #1a1a2e 25%,
+    #16213e 50%,
+    #0f3460 75%,
+    #0a0a0f 100%
+  );
+  background-size: 400% 400%;
+  animation: gradientShift 15s ease infinite;
+}
+
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
   }
 }
 
-h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-  color: var(--text-primary);
+/* Subtle overlay for depth */
+.animated-gradient::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse at center,
+    transparent 0%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
+  pointer-events: none;
 }
 
-h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--text-primary);
+/* ========================================
+   CARD STYLING
+   ======================================== */
+
+.coming-soon-card {
+  position: relative;
+  background: var(--bg-card);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--border-default);
+  border-radius: 1.5rem;
+  padding: 3rem 4rem;
+  text-align: center;
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
 }
 
-p {
-  color: var(--text-secondary);
-  line-height: 1.65;
+@media (max-width: 640px) {
+  .coming-soon-card {
+    padding: 2rem 1.5rem;
+    margin: 0 1rem;
+    border-radius: 1rem;
+  }
 }
 
 /* ========================================
-   FOCUS & ACCESSIBILITY
+   TYPOGRAPHY
    ======================================== */
 
-:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+.coming-soon-title {
+  font-size: 3rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
 }
 
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+@media (max-width: 640px) {
+  .coming-soon-title {
+    font-size: 2rem;
+  }
+}
+
+.coming-soon-subtitle {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+@media (max-width: 640px) {
+  .coming-soon-subtitle {
+    font-size: 1rem;
+  }
 }
 
 /* ========================================
-   INTERACTIVE ELEMENTS
+   LANGUAGE SELECTOR
    ======================================== */
 
-button,
-a,
-input,
-select,
-textarea {
-  transition: all 0.15s ease-in-out;
+.language-selector {
+  position: relative;
+  display: inline-block;
 }
 
-/* Primary Button Base */
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: white;
-  background-color: var(--accent-blue);
-  border: none;
+.language-selector select {
+  appearance: none;
+  background: var(--bg-surface);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-default);
   border-radius: 0.5rem;
+  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
   cursor: pointer;
   transition: all 0.15s ease-in-out;
+  min-width: 100px;
 }
 
-.btn-primary:hover {
-  background-color: var(--accent-blue-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+.language-selector select:hover {
+  border-color: var(--border-hover);
+  background: rgba(255, 255, 255, 0.08);
 }
 
-.btn-primary:active {
-  background-color: var(--accent-blue-active);
-  transform: translateY(0);
-  box-shadow: none;
+.language-selector select:focus {
+  outline: none;
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
-.btn-primary:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+.language-selector select:focus-visible {
+  outline: none;
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
-/* ========================================
-   CARD / PANEL STYLING
-   ======================================== */
-
-.card {
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: 0.75rem;
-  overflow: hidden;
-  transition: all 0.2s ease-in-out;
-}
-
-.card:hover {
-  border-color: var(--border-default);
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-  transform: translateY(-2px);
+.language-selector::after {
+  content: "";
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--text-secondary);
+  pointer-events: none;
 }
 
 /* ========================================
-   HEADER / NAVIGATION
+   VERSION LABEL
    ======================================== */
 
-.site-header {
-  background-color: rgba(24, 24, 27, 0.85);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border-subtle);
-  position: sticky;
-  top: 0;
-  z-index: 50;
+.version-label {
+  position: fixed;
+  bottom: 1.25rem;
+  right: 1.5rem;
+  z-index: 10;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #ffffff;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 /* ========================================
-   BADGE / TAG STYLING
+   FOCUS & ACCESSIBILITY
    ======================================== */
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  border-radius: 0.375rem;
-  background-color: var(--accent-violet);
-  color: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
 }
 
 /* ========================================
-   SKIP LINK (Accessibility)
+   SKIP LINK
    ======================================== */
 
 .skip-link {
@@ -208,7 +239,7 @@ textarea {
   padding: 0.75rem 1rem;
   font-weight: 600;
   color: white;
-  background-color: var(--accent-blue);
+  background-color: #3b82f6;
   border-radius: 0.5rem;
   text-decoration: none;
 }
@@ -216,27 +247,3 @@ textarea {
 .skip-link:focus {
   top: 1rem;
 }
-
-/* ========================================
-   UTILITY CLASSES
-   ======================================== */
-
-.text-muted {
-  color: var(--text-secondary);
-}
-
-.text-subtle {
-  color: var(--text-muted);
-}
-
-.bg-base {
-  background-color: var(--bg-base);
-}
-
-.bg-surface {
-  background-color: var(--bg-surface);
-}
-
-.bg-elevated {
-  background-color: var(--bg-elevated);
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index d628f0d..8f8ee1b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata, Viewport } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Game Collection",
-  description: "Discover our selection of fun and challenging games to play",
+  title: "Coming Soon",
+  description: "Something amazing is on the way",
 };
 
 export const viewport: Viewport = {
diff --git a/app/page.tsx b/app/page.tsx
index 9420343..fd760a5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,104 +1,68 @@
-import GameCard from "@/components/GameCard";
+"use client";
 
-const games = [
-  {
-    id: 1,
-    title: "Chess Master",
-    description: "Play chess against AI or friends online in real time.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Strategy",
-  },
-  {
-    id: 2,
-    title: "Quick Quiz",
-    description: "Test your knowledge with fun trivia questions.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Trivia",
-  },
-  {
-    id: 3,
-    title: "Memory Match",
-    description: "Challenge your memory with this classic card-matching game.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Puzzle",
-  },
-  {
-    id: 4,
-    title: "Snake Game",
-    description: "Eat food, grow longer, and avoid running into yourself.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Arcade",
-  },
-  {
-    id: 5,
-    title: "Word Builder",
-    description: "Create as many words as you can from scrambled letters.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Word",
+import { useState } from "react";
+
+const translations = {
+  en: {
+    title: "Coming Soon",
+    subtitle: "Something amazing is on the way",
+    language: "English",
   },
-  {
-    id: 6,
-    title: "Puzzle Solver",
-    description: "Solve challenging jigsaw puzzles of increasing difficulty.",
-    image: "/placeholder.svg?height=200&width=300",
-    category: "Puzzle",
+  zh: {
+    title: "即将上线",
+    subtitle: "精彩内容即将呈现",
+    language: "中文",
   },
-];
+};
+
+type Language = keyof typeof translations;
 
 export default function Home() {
+  const [lang, setLang] = useState<Language>("en");
+  const t = translations[lang];
+
   return (
     <>
-      <a href="#game-list" className="skip-link">
-        Skip to game list
+      <a href="#main-content" className="skip-link">
+        Skip to main content
       </a>
 
-      <header className="site-header">
-        <div className="max-w-6xl mx-auto px-6 py-8">
-          <h1 className="text-balance">Game Collection</h1>
-          <p className="mt-3 text-base text-muted max-w-xl">
-            Discover our selection of fun and challenging games to play
-          </p>
-        </div>
-      </header>
-
-      <main id="main-content" className="bg-base min-h-screen">
-        <div className="max-w-6xl mx-auto px-6 py-10">
-          <section aria-labelledby="games-heading">
-            <div className="flex items-center justify-between mb-8">
-              <h2 id="games-heading" className="text-xl font-semibold">
-                All Games
-              </h2>
-              <span className="text-sm text-subtle">
-                {games.length} games available
-              </span>
-            </div>
+      {/* Animated gradient background */}
+      <div className="animated-gradient" aria-hidden="true" />
 
-            <ul
-              id="game-list"
-              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
-              aria-label="Available games"
-              style={{ listStyle: "none", padding: 0, margin: 0 }}
-            >
-              {games.map((game) => (
-                <li key={game.id}>
-                  <GameCard game={game} />
-                </li>
-              ))}
-            </ul>
-          </section>
+      {/* Language selector - top right */}
+      <div className="fixed top-4 right-4 z-20 sm:top-6 sm:right-6">
+        <div className="language-selector">
+          <label htmlFor="language-select" className="sr-only">
+            Select language
+          </label>
+          <select
+            id="language-select"
+            value={lang}
+            onChange={(e) => setLang(e.target.value as Language)}
+            aria-label="Select language"
+          >
+            <option value="en">English</option>
+            <option value="zh">中文</option>
+          </select>
         </div>
-      </main>
+      </div>
 
-      <footer
-        className="bg-surface border-t"
-        style={{ borderColor: "var(--border-subtle)" }}
+      {/* Main content - centered card */}
+      <main
+        id="main-content"
+        className="relative z-10 flex min-h-screen items-center justify-center px-4"
       >
-        <div className="max-w-6xl mx-auto px-6 py-6">
-          <p className="text-sm text-subtle text-center">
-            Game Collection - Built with Next.js
-          </p>
+        <div className="coming-soon-card">
+          <h1 className="coming-soon-title">{t.title}</h1>
+          <p className="coming-soon-subtitle">{t.subtitle}</p>
         </div>
-      </footer>
+      </main>
+
+      {/* Version label - bottom right */}
+      <div className="version-label" aria-label="Version 0.1 Beta">
+        Version: 0.1 Beta
+      </div>
     </>
   );
 }