diff --git a/docs/architecture.md b/docs/architecture.md
index 3103cff0..8f120285 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,28 +1,27 @@
-# Architecture Principles
-
-## Separation of Concerns
-
-Keep business logic, presentation, and data access separated.
-
-## Single Source of Truth
-
-Avoid duplicating ownership of the same data.
-
-## Predictability
-
-Prefer explicit flows over hidden side effects.
-
-## Backward Compatibility
-
-Consider impact on existing users and integrations before making breaking changes.
-
-## Security First
-
-Validate all external input.
-
-Never trust client-provided data.
-
-## Reuse Existing Patterns
-
-Before introducing a new pattern, evaluate whether an existing project pattern already solves the problem.
-
+# Architecture Principles
+
+## Separation of Concerns
+
+Keep business logic, presentation, and data access separated.
+
+## Single Source of Truth
+
+Avoid duplicating ownership of the same data.
+
+## Predictability
+
+Prefer explicit flows over hidden side effects.
+
+## Backward Compatibility
+
+Consider impact on existing users and integrations before making breaking changes.
+
+## Security First
+
+Validate all external input.
+
+Never trust client-provided data.
+
+## Reuse Existing Patterns
+
+Before introducing a new pattern, evaluate whether an existing project pattern already solves the problem.
diff --git a/docs/coding-guidelines.md b/docs/coding-guidelines.md
index ad91f538..67722f85 100644
--- a/docs/coding-guidelines.md
+++ b/docs/coding-guidelines.md
@@ -1,72 +1,72 @@
-# Coding Guidelines
-
-## Naming
-
-- Use meaningful and descriptive names.
-- Avoid abbreviations unless commonly understood.
-- Functions should describe actions.
-- Variables should describe data.
-
-## Functions
-
-- Keep functions focused on a single responsibility.
-- Prefer small, composable functions.
-- Avoid deeply nested conditions.
-- Reuse existing utilities where possible.
-
-## Comments
-
-- Explain why, not what.
-- Remove outdated comments.
-- Avoid commenting obvious code.
-
-## Error Handling
-
-- Handle errors explicitly.
-- Provide actionable error messages.
-- Never silently ignore failures.
-
-## Dependencies
-
-- Introduce new dependencies only when justified.
-- Prefer platform-native solutions when practical.
-
-## Code Reviews
-
-- Optimize for readability.
-- Avoid unnecessary complexity.
-- Follow existing project conventions.
-
-## Development Environment
-
-### Use the Workspace File
-
-Always open the project using the provided VS Code workspace file (`*.code-workspace`).
-
-Benefits:
-
-- Consistent settings
-- Recommended extensions
-- Shared tasks and debugging configuration
-- Reduced environment-related issues
-
-Open the workspace:
-
-```bash
-code project.code-workspace
-```
-
-### Recommended Extensions
-
-Install all workspace-recommended extensions.
-
-These help maintain:
-
-- Formatting consistency
-- Linting standards
-- Import organization
-- Code quality checks
-
-### Workspace Files
-
-Do not commit personal workspace modifications unless they benefit the entire team.
+# Coding Guidelines
+
+## Naming
+
+- Use meaningful and descriptive names.
+- Avoid abbreviations unless commonly understood.
+- Functions should describe actions.
+- Variables should describe data.
+
+## Functions
+
+- Keep functions focused on a single responsibility.
+- Prefer small, composable functions.
+- Avoid deeply nested conditions.
+- Reuse existing utilities where possible.
+
+## Comments
+
+- Explain why, not what.
+- Remove outdated comments.
+- Avoid commenting obvious code.
+
+## Error Handling
+
+- Handle errors explicitly.
+- Provide actionable error messages.
+- Never silently ignore failures.
+
+## Dependencies
+
+- Introduce new dependencies only when justified.
+- Prefer platform-native solutions when practical.
+
+## Code Reviews
+
+- Optimize for readability.
+- Avoid unnecessary complexity.
+- Follow existing project conventions.
+
+## Development Environment
+
+### Use the Workspace File
+
+Always open the project using the provided VS Code workspace file (`*.code-workspace`).
+
+Benefits:
+
+- Consistent settings
+- Recommended extensions
+- Shared tasks and debugging configuration
+- Reduced environment-related issues
+
+Open the workspace:
+
+```bash
+code project.code-workspace
+```
+
+### Recommended Extensions
+
+Install all workspace-recommended extensions.
+
+These help maintain:
+
+- Formatting consistency
+- Linting standards
+- Import organization
+- Code quality checks
+
+### Workspace Files
+
+Do not commit personal workspace modifications unless they benefit the entire team.
diff --git a/docs/git-workflow.md b/docs/git-workflow.md
index 7bf4efe5..fbcd0643 100644
--- a/docs/git-workflow.md
+++ b/docs/git-workflow.md
@@ -1,172 +1,173 @@
-# Git Workflow
-
-## Branch Creation
-
-### Step 1: Create an Issue
-
-Create a GitHub issue describing the work.
-
-### Step 2: Wait for Issue ID Assignment
-
-An automated workflow will assign an issue identifier.
-
-Example:
-
-```text
-RZA-260001
-```
-
-Wait for the identifier before creating a branch.
-
-### Step 3: Create a Branch
-
-Valid examples:
-
-```text
-feature/RZA-260001
-feature/RZA-260002
-
-bugfix/RZA-260003
-bugfix/RZA-260004
-```
-
-Rules:
-
-- Use only `feature/` or `bugfix/`
-- Use the generated issue ID exactly as assigned
-- Do not add descriptions, names, dates, or suffixes
-
-Invalid examples:
-
-```text
-feature/login-screen
-feature/RZA-260001-login
-feature/john-RZA-260001
-bugfix/RZA-260001-test
-```
-
----
-
-## Back Merge
-
-Regularly merge the latest `develop` branch into your working branch.
-
-### Update develop
-
-```bash
-git checkout develop
-git pull origin develop
-```
-
-### Switch to your branch
-
-```bash
-git checkout feature/RZA-260001
-```
-
-### Merge develop
-
-```bash
-git merge develop --no-commit
-```
-
-### Why --no-commit
-
-This allows you to:
-
-- Review incoming changes
-- Resolve conflicts
-- Test the application
-- Create the merge commit only after verification
-
-### Complete merge
-
-```bash
-git add .
-git commit
-git push origin feature/RZA-260001
-```
-
----
-
-## Resolving Conflicts
-
-If conflicts occur:
-
-1. Open the project in VS Code.
-2. Review conflicting sections.
-3. Use:
-   - Accept Current Change
-   - Accept Incoming Change
-   - Accept Both Changes
-   - Compare Changes
-
-4. Verify the application works correctly.
-
-Complete the merge:
-
-```bash
-git add .
-git commit
-git push
-```
-
----
-
-## Renaming a Branch
-
-Rename local branch:
-
-```bash
-git branch -m feature/RZA-260001
-```
-
-Push renamed branch:
-
-```bash
-git push origin -u feature/RZA-260001
-```
-
-Delete old remote branch:
-
-```bash
-git push origin --delete old-branch-name
-```
-
-Verify:
-
-- New branch exists on GitHub
-- Old branch is removed
-- Open PRs are updated if necessary
-
----
-
-## Pull Requests
-
-Every Pull Request should include:
-
-### Summary
-
-Clearly explain:
-
-- What was changed
-- Why it was changed
-- Any limitations or considerations
-
-### Evidence
-
-Provide one or more of the following:
-
-- Screenshots
-- Screen recordings
-- API examples
-- Before/After comparisons
-
-### Before Requesting Review
-
-- Latest develop branch merged
-- Conflicts resolved
-- Changes tested
-- Screenshots attached
-- Documentation updated if required
-- No debug code remains
+# Git Workflow
+
+## Branch Creation
+
+### Step 1: Create an Issue
+
+Create a GitHub issue describing the work.
+
+### Step 2: Wait for Issue ID Assignment
+
+An automated workflow will assign an issue identifier.
+
+Example:
+
+```text
+RZA-260001
+```
+
+Wait for the identifier before creating a branch.
+
+### Step 3: Create a Branch
+
+Valid examples:
+
+```text
+feature/RZA-260001
+feature/RZA-260002
+
+bugfix/RZA-260003
+bugfix/RZA-260004
+```
+
+Rules:
+
+- Use only `feature/` or `bugfix/`
+- Use the generated issue ID exactly as assigned
+- Do not add descriptions, names, dates, or suffixes
+
+Invalid examples:
+
+```text
+feature/login-screen
+feature/RZA-260001-login
+feature/john-RZA-260001
+bugfix/RZA-260001-test
+```
+
+---
+
+## Back Merge
+
+Regularly merge the latest `develop` branch into your working branch.
+
+### Update develop
+
+```bash
+git checkout develop
+git pull origin develop
+```
+
+### Switch to your branch
+
+```bash
+git checkout feature/RZA-260001
+```
+
+### Merge develop
+
+```bash
+git merge develop --no-commit
+```
+
+### Why --no-commit
+
+This allows you to:
+
+- Review incoming changes
+- Resolve conflicts
+- Test the application
+- Create the merge commit only after verification
+
+### Complete merge
+
+```bash
+git add .
+git commit
+git push origin feature/RZA-260001
+```
+
+---
+
+## Resolving Conflicts
+
+If conflicts occur:
+
+1. Open the project in VS Code.
+2. Review conflicting sections.
+3. Use:
+
+   - Accept Current Change
+   - Accept Incoming Change
+   - Accept Both Changes
+   - Compare Changes
+
+4. Verify the application works correctly.
+
+Complete the merge:
+
+```bash
+git add .
+git commit
+git push
+```
+
+---
+
+## Renaming a Branch
+
+Rename local branch:
+
+```bash
+git branch -m feature/RZA-260001
+```
+
+Push renamed branch:
+
+```bash
+git push origin -u feature/RZA-260001
+```
+
+Delete old remote branch:
+
+```bash
+git push origin --delete old-branch-name
+```
+
+Verify:
+
+- New branch exists on GitHub
+- Old branch is removed
+- Open PRs are updated if necessary
+
+---
+
+## Pull Requests
+
+Every Pull Request should include:
+
+### Summary
+
+Clearly explain:
+
+- What was changed
+- Why it was changed
+- Any limitations or considerations
+
+### Evidence
+
+Provide one or more of the following:
+
+- Screenshots
+- Screen recordings
+- API examples
+- Before/After comparisons
+
+### Before Requesting Review
+
+- Latest develop branch merged
+- Conflicts resolved
+- Changes tested
+- Screenshots attached
+- Documentation updated if required
+- No debug code remains
diff --git a/docs/philosophy.md b/docs/philosophy.md
index c0fd0de8..169cf360 100644
--- a/docs/philosophy.md
+++ b/docs/philosophy.md
@@ -1,34 +1,34 @@
-# Engineering Philosophy
-
-## Build for the next developer
-
-Code is read more often than it is written. Prioritize clarity, maintainability, and consistency.
-
-## Prefer simplicity
-
-Choose the simplest solution that solves the problem. Avoid unnecessary abstractions and premature optimization.
-
-## Fix root causes
-
-Do not patch symptoms. Understand why an issue occurred and address the underlying cause.
-
-## Consistency matters
-
-Follow existing project patterns unless there is a strong reason to introduce a new approach.
-
-## Performance is a feature
-
-Consider performance, scalability, and user experience during implementation.
-
-## Document important decisions
-
-Future team members should understand why a decision was made, not just what was implemented.
-
-## Team Expectations
-
-- Ask questions early.
-- Raise risks as soon as they are identified.
-- Do not assume requirements.
-- Communicate trade-offs clearly.
-- Leave the codebase better than you found it.
-- Focus on solving business problems, not showing technical cleverness.
+# Engineering Philosophy
+
+## Build for the next developer
+
+Code is read more often than it is written. Prioritize clarity, maintainability, and consistency.
+
+## Prefer simplicity
+
+Choose the simplest solution that solves the problem. Avoid unnecessary abstractions and premature optimization.
+
+## Fix root causes
+
+Do not patch symptoms. Understand why an issue occurred and address the underlying cause.
+
+## Consistency matters
+
+Follow existing project patterns unless there is a strong reason to introduce a new approach.
+
+## Performance is a feature
+
+Consider performance, scalability, and user experience during implementation.
+
+## Document important decisions
+
+Future team members should understand why a decision was made, not just what was implemented.
+
+## Team Expectations
+
+- Ask questions early.
+- Raise risks as soon as they are identified.
+- Do not assume requirements.
+- Communicate trade-offs clearly.
+- Leave the codebase better than you found it.
+- Focus on solving business problems, not showing technical cleverness.
diff --git a/docs/review-checklist.md b/docs/review-checklist.md
index a8226b5c..1d7d7311 100644
--- a/docs/review-checklist.md
+++ b/docs/review-checklist.md
@@ -1,17 +1,16 @@
-# Review Checklist
-
-Before approving a Pull Request, verify:
-
-- Requirements are satisfied.
-- Code follows project conventions.
-- No unnecessary complexity introduced.
-- Error handling is present.
-- Security implications considered.
-- Existing functionality remains unaffected.
-- Documentation updated if necessary.
-- No dead code or debug code remains.
-- Screenshots or testing evidence provided.
-- Performance impact considered.
-
-If something is unclear, request clarification rather than making assumptions.
-
+# Review Checklist
+
+Before approving a Pull Request, verify:
+
+- Requirements are satisfied.
+- Code follows project conventions.
+- No unnecessary complexity introduced.
+- Error handling is present.
+- Security implications considered.
+- Existing functionality remains unaffected.
+- Documentation updated if necessary.
+- No dead code or debug code remains.
+- Screenshots or testing evidence provided.
+- Performance impact considered.
+
+If something is unclear, request clarification rather than making assumptions.
diff --git a/public/assets/images/game-placeholder.svg b/public/assets/images/game-placeholder.svg
new file mode 100644
index 00000000..807466d3
--- /dev/null
+++ b/public/assets/images/game-placeholder.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="225" viewBox="0 0 400 225">
+  <rect width="400" height="225" fill="#f0eeff"/>
+  <rect x="150" y="60" width="100" height="70" fill="#d2caff" rx="12"/>
+  <circle cx="175" cy="88" r="8" fill="#a78bfa"/>
+  <circle cx="225" cy="88" r="8" fill="#a78bfa"/>
+  <rect x="192" y="105" width="16" height="10" fill="#a78bfa" rx="3"/>
+  <rect x="165" y="98" width="10" height="16" fill="#a78bfa" rx="3"/>
+  <text x="200" y="162" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#9c7dda" font-weight="600">No Preview</text>
+</svg>
\ No newline at end of file
diff --git a/public/assets/images/Number.png b/public/assets/images/games/Number.png
similarity index 100%
rename from public/assets/images/Number.png
rename to public/assets/images/games/Number.png
diff --git a/public/assets/images/OurIndia.png b/public/assets/images/games/OurIndia.png
similarity index 100%
rename from public/assets/images/OurIndia.png
rename to public/assets/images/games/OurIndia.png
diff --git a/public/assets/images/games/Stories.avif b/public/assets/images/games/Stories.avif
new file mode 100644
index 00000000..2395600f
Binary files /dev/null and b/public/assets/images/games/Stories.avif differ
diff --git a/public/assets/images/games/akshar.avif b/public/assets/images/games/akshar.avif
new file mode 100644
index 00000000..09bdd8a9
Binary files /dev/null and b/public/assets/images/games/akshar.avif differ
diff --git a/public/assets/images/games/alphabet.webp b/public/assets/images/games/alphabet.webp
new file mode 100644
index 00000000..ba806289
Binary files /dev/null and b/public/assets/images/games/alphabet.webp differ
diff --git a/public/assets/images/games/canva.avif b/public/assets/images/games/canva.avif
new file mode 100644
index 00000000..ffbf0299
Binary files /dev/null and b/public/assets/images/games/canva.avif differ
diff --git a/public/assets/images/games/capital.jpg b/public/assets/images/games/capital.jpg
new file mode 100644
index 00000000..9d19d05f
Binary files /dev/null and b/public/assets/images/games/capital.jpg differ
diff --git a/public/assets/images/games/crossword.webp b/public/assets/images/games/crossword.webp
new file mode 100644
index 00000000..6837a134
Binary files /dev/null and b/public/assets/images/games/crossword.webp differ
diff --git a/public/assets/images/games/draw.avif b/public/assets/images/games/draw.avif
new file mode 100644
index 00000000..5504a6bd
Binary files /dev/null and b/public/assets/images/games/draw.avif differ
diff --git a/public/assets/images/games/gallery.avif b/public/assets/images/games/gallery.avif
new file mode 100644
index 00000000..18c91877
Binary files /dev/null and b/public/assets/images/games/gallery.avif differ
diff --git a/public/assets/images/glossary.png b/public/assets/images/games/glossary.png
similarity index 100%
rename from public/assets/images/glossary.png
rename to public/assets/images/games/glossary.png
diff --git a/public/assets/images/games/hide.avif b/public/assets/images/games/hide.avif
new file mode 100644
index 00000000..3e05726b
Binary files /dev/null and b/public/assets/images/games/hide.avif differ
diff --git a/public/assets/images/knplay.png b/public/assets/images/games/knplay.png
similarity index 100%
rename from public/assets/images/knplay.png
rename to public/assets/images/games/knplay.png
diff --git a/public/assets/images/games/math.avif b/public/assets/images/games/math.avif
new file mode 100644
index 00000000..269bd5a0
Binary files /dev/null and b/public/assets/images/games/math.avif differ
diff --git a/public/assets/images/games/nakshatra.avif b/public/assets/images/games/nakshatra.avif
new file mode 100644
index 00000000..56e6665b
Binary files /dev/null and b/public/assets/images/games/nakshatra.avif differ
diff --git a/public/assets/images/games/ourindia.avif b/public/assets/images/games/ourindia.avif
new file mode 100644
index 00000000..30ae709f
Binary files /dev/null and b/public/assets/images/games/ourindia.avif differ
diff --git a/public/assets/images/games/panel.avif b/public/assets/images/games/panel.avif
new file mode 100644
index 00000000..85849a50
Binary files /dev/null and b/public/assets/images/games/panel.avif differ
diff --git a/public/assets/images/games/poems.jpg b/public/assets/images/games/poems.jpg
new file mode 100644
index 00000000..fc57e34a
Binary files /dev/null and b/public/assets/images/games/poems.jpg differ
diff --git a/public/assets/images/stories.webp b/public/assets/images/games/stories.webp
similarity index 100%
rename from public/assets/images/stories.webp
rename to public/assets/images/games/stories.webp
diff --git a/public/assets/images/games/vedic.png b/public/assets/images/games/vedic.png
new file mode 100644
index 00000000..4631b7e8
Binary files /dev/null and b/public/assets/images/games/vedic.png differ
diff --git a/public/assets/images/games/vernmala.jpg b/public/assets/images/games/vernmala.jpg
new file mode 100644
index 00000000..b991ae75
Binary files /dev/null and b/public/assets/images/games/vernmala.jpg differ
diff --git a/public/assets/images/games/zodiac.jpg b/public/assets/images/games/zodiac.jpg
new file mode 100644
index 00000000..3a42257b
Binary files /dev/null and b/public/assets/images/games/zodiac.jpg differ
diff --git a/src/assets/styles/coming-soon.css b/src/assets/styles/coming-soon.css
index 4c324235..06b5789d 100644
--- a/src/assets/styles/coming-soon.css
+++ b/src/assets/styles/coming-soon.css
@@ -1,6 +1,7 @@
 .page-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 2.5rem;
   margin: 2rem 0;
 }
@@ -9,6 +10,11 @@
   background: var(--bg-secondary);
   text-align: center;
   border-radius: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  width: 100%;
 }
 
 .logo {
@@ -32,4 +38,4 @@ h1 {
   max-width: 500px;
   margin: 0 auto;
   line-height: 1.6;
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
index 0111aed6..fad1f4cf 100644
--- a/src/assets/styles/footer.css
+++ b/src/assets/styles/footer.css
@@ -366,4 +366,4 @@
   .sep {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 38001447..31bf8b49 100644
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -23,6 +23,7 @@ html[data-theme="light"] {
 body {
   background-color: transparent !important;
   background-image: none !important;
+  font-family: 'Roboto', 'Noto Sans Devanagari', 'Mangal', 'Arial Unicode MS', sans-serif;
 }
 
 @layer base {
@@ -187,20 +188,16 @@ body {
     left: 0;
     pointer-events: none;
     z-index: 0;
-    background-image: repeating-linear-gradient(
-        60deg,
+    background-image: repeating-linear-gradient(60deg,
         transparent,
         transparent 28px,
         rgba(34, 211, 238, 0.03) 28px,
-        rgba(34, 211, 238, 0.03) 29px
-      ),
-      repeating-linear-gradient(
-        -40deg,
+        rgba(34, 211, 238, 0.03) 29px),
+      repeating-linear-gradient(-40deg,
         transparent,
         transparent 34px,
         rgba(34, 211, 238, 0.02) 34px,
-        rgba(34, 211, 238, 0.02) 35px
-      );
+        rgba(34, 211, 238, 0.02) 35px);
   }
 
   [data-theme="light"] body::before {
@@ -526,6 +523,7 @@ body {
   }
 
   @media (hover: none) and (pointer: coarse) {
+
     button,
     a,
     [role="button"] {
@@ -537,4 +535,4 @@ body {
       transform: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/keyboard-ninja.css b/src/assets/styles/keyboard-ninja.css
index 6d41068c..43ebf43a 100644
--- a/src/assets/styles/keyboard-ninja.css
+++ b/src/assets/styles/keyboard-ninja.css
@@ -1162,4 +1162,4 @@ body.kn-fullscreen .kn-achievement-toast {
 
 .kn-titlebar {
   display: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/landing.css b/src/assets/styles/landing.css
index 23ef136a..21b8a1d6 100644
--- a/src/assets/styles/landing.css
+++ b/src/assets/styles/landing.css
@@ -285,13 +285,13 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.5rem;
-  padding: 0.5rem 0;
+  padding: 0.5rem 4rem;
 }
 
 .games-grid--centered .game-card {
-  width: 380px;
-  flex: 0 0 380px;
+  flex: 0 0 calc(33.33% - 1rem);
   max-width: calc(33.33% - 1rem);
+  min-width: 260px;
 }
 
 .games-grid--full {
diff --git a/src/components/Categories.astro b/src/components/Categories.astro
index 1df6f5ca..9e01b33c 100644
--- a/src/components/Categories.astro
+++ b/src/components/Categories.astro
@@ -80,7 +80,7 @@
   @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
 
   .age-section {
-    padding: 3rem 2rem 4rem;
+    padding: 0.5rem 2rem 4rem;
     text-align: center;
     background: transparent;
     font-family: "Nunito", sans-serif;
@@ -443,15 +443,14 @@
       0 0 22px rgba(34, 211, 238, 0.12);
   }
 
-  :global([data-theme="dark"]) .age-label,
-  :global([data-theme="dark"]) .age-badge {
+  :global([data-theme="dark"]) .age-label {
     color: #7dd3fc !important;
   }
 
   :global([data-theme="dark"]) .age-badge {
-    background: rgba(34, 211, 238, 0.15) !important;
+    color: #ffffff !important;
+    background: #3fabc8 !important;
   }
-
   /* ── Responsive ── */
   @media (max-width: 900px) {
     .age-grid {
diff --git a/src/components/FeaturedGames.astro b/src/components/FeaturedGames.astro
index 97bcb92e..4ab5a1be 100644
--- a/src/components/FeaturedGames.astro
+++ b/src/components/FeaturedGames.astro
@@ -63,7 +63,7 @@ const featured = featuredGames
                 alt={game.title}
                 class="fg-thumb"
                 loading="lazy"
-                onerror="this.src='/assets/images/game-placeholder.png'"
+                onerror="if(this.dataset.errored)return;this.dataset.errored='1';this.onerror=null;this.src='/assets/images/game-placeholder.svg'"
               />
               <div class="fg-thumb-overlay" />
             </div>
@@ -148,9 +148,9 @@ const featured = featuredGames
   /* ── Grid ── */
   .fg-grid {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 18px;
-    max-width: 1200px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    max-width: 980px;
     margin: 0 auto;
   }
 
@@ -379,7 +379,7 @@ const featured = featuredGames
   /* 4 cards on medium screens */
   @media (max-width: 1100px) {
     .fg-grid {
-      grid-template-columns: repeat(4, 1fr);
+      grid-template-columns: repeat(3, 1fr);
     }
   }
   /* 2 columns on tablet */
diff --git a/src/components/GamesGrid.astro b/src/components/GamesGrid.astro
index f332736a..42a30a6f 100644
--- a/src/components/GamesGrid.astro
+++ b/src/components/GamesGrid.astro
@@ -6,16 +6,9 @@ interface Props {
 }
 
 const { games } = Astro.props;
-const isCentered = games.length <= 3;
 ---
 
-<style>
-  h3 {
-    color: green;
-  }
-</style>
-
-<div class={`games-grid ${isCentered ? "games-grid--centered" : "games-grid--full"}`}>
+<div class="games-grid">
   {
     games.map((game) => (
       <div class="game-card">
@@ -36,3 +29,148 @@ const isCentered = games.length <= 3;
     ))
   }
 </div>
+
+<style>
+  .games-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+
+  /* Sirf 2 cards hain toh center karo */
+  .games-grid:has(.game-card:last-child:nth-child(2)) {
+    grid-template-columns: repeat(2, minmax(0, 360px));
+    justify-content: center;
+  }
+
+  /* Sirf 1 card hai toh center karo */
+  .games-grid:has(.game-card:last-child:nth-child(1)) {
+    grid-template-columns: minmax(0, 360px);
+    justify-content: center;
+  }
+
+  .game-card {
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 2px solid #e8e8f0;
+    display: flex;
+    flex-direction: column;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+  .game-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
+    border-color: #c8b8ff;
+  }
+
+  .game-image {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background-size: cover;
+    background-position: center;
+    background-color: #f0eeff;
+    flex-shrink: 0;
+  }
+
+  .game-content {
+    padding: 1rem 1.2rem 1.2rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 0.4rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    font-weight: 800;
+    color: #1a1a40;
+    margin: 0;
+  }
+
+  p {
+    font-size: 0.82rem;
+    color: #666;
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .game-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 2px;
+  }
+
+  .game-tag {
+    background: #f0eeff;
+    color: #7048c0;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 50px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+  }
+
+  .game-button {
+    margin-top: auto;
+    padding-top: 0.75rem;
+    display: block;
+    text-align: center;
+    background: #5c6bc0;
+    color: #fff;
+    font-size: 0.85rem;
+    font-weight: 700;
+    padding: 0.6rem 1.2rem;
+    border-radius: 50px;
+    text-decoration: none;
+    transition:
+      background 0.2s ease,
+      transform 0.2s ease;
+  }
+  .game-button:hover {
+    background: #7048c0;
+    transform: scale(1.03);
+  }
+
+  /* Dark mode */
+  :global([data-theme="dark"]) .game-card {
+    background: rgba(3, 26, 32, 0.72);
+    border-color: rgba(34, 211, 238, 0.12);
+  }
+  :global([data-theme="dark"]) .game-card:hover {
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+  :global([data-theme="dark"]) h3 {
+    color: #7dd3fc;
+  }
+  :global([data-theme="dark"]) p {
+    color: #94a3b8;
+  }
+  :global([data-theme="dark"]) .game-tag {
+    background: rgba(34, 211, 238, 0.12);
+    color: #7dd3fc;
+  }
+
+  /* Responsive */
+  @media (max-width: 900px) {
+    .games-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (max-width: 560px) {
+    .games-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/components/home/Countdown.astro b/src/components/home/Countdown.astro
index ff1e26f0..c105bdd8 100644
--- a/src/components/home/Countdown.astro
+++ b/src/components/home/Countdown.astro
@@ -35,7 +35,7 @@ const { date } = Astro.props;
       const diff = launch - now;
 
       if (diff < 0) {
-        countdownElement.innerHTML = "<h2>We've Launched!</h2>";
+        countdownElement.innerHTML = "<h2></h2>";
         clearInterval(interval);
         return;
       }
diff --git a/src/data/FeaturedGames.ts b/src/data/FeaturedGames.ts
index 00a07c02..2a250ea3 100644
--- a/src/data/FeaturedGames.ts
+++ b/src/data/FeaturedGames.ts
@@ -13,8 +13,9 @@ export const featuredGames: string[] = [
   "crossword", // 6-8  → /crossword
   "math", // 6-8  → /math
   "map", // Adults → /Our India
-  "varnmala" // 6-8  → /varnmala
+  "varnmala", // 6-8  → /varnmala
+  "play" // 6-8  → /varnmala
 ];
 
 // Maximum number of featured games to display at once.
-export const FEATURED_MAX = 5;
+export const FEATURED_MAX = 6;
diff --git a/src/data/gamesData.ts b/src/data/gamesData.ts
index 53f72d9b..b4133f78 100644
--- a/src/data/gamesData.ts
+++ b/src/data/gamesData.ts
@@ -15,8 +15,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Draw",
       description: "A fun game that helps toddlers learn alphabets and improve memory.",
       // child sitting at table drawing with crayons — Tim Mossholder
-      image:
-        "https://images.unsplash.com/photo-1513364776144-60967b0f800f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/draw.avif",
       tags: ["Educational", "Memory", "alphabet"],
       link: "/draw"
     },
@@ -24,8 +23,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Hide N Seek",
       description: "Match animals with their sounds in this engaging audio game.",
       // children playing hide and seek outdoors
-      image:
-        "https://images.unsplash.com/photo-1472162072942-cd5147eb3902?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/hide.avif",
       tags: ["Alphabet", "Fun"],
       link: "/hidenseek"
     },
@@ -33,8 +31,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Alphabets",
       description: "Learn basic alphabets and improve vocabulary skills.",
       // colorful alphabet wooden blocks — Susan Holt Simpson
-      image:
-        "https://play-lh.googleusercontent.com/7TNnBrInykWUjDpuSNstTYdy5iuLuqz7z4Gt3O9R_KteTk2og68UtcDWCXA_I_xqmis=w526-h296-rw",
+      image: "/assets/images/games/alphabet.webp",
       tags: ["Education", "Alphabet"],
       link: "/alphabets"
     },
@@ -42,8 +39,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Panel",
       description: "Learn basic alphabets and improve vocabulary skills.",
       // colorful jigsaw puzzle pieces
-      image:
-        "https://images.unsplash.com/photo-1611532736597-de2d4265fba3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/panel.avif",
       tags: ["Education", "Alphabet"],
       link: "/panel"
     },
@@ -51,8 +47,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Gallery",
       description: "Learn basic alphabets and improve vocabulary skills.",
       // portrait of mother and little girl playing together — Vivek Kumar
-      image:
-        "https://images.unsplash.com/photo-1476703993599-0035a21b17a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/gallery.avif",
       tags: ["Education", "Alphabet"],
       link: "/gallery"
     }
@@ -62,7 +57,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Varnmala",
       description: "Learn varnmala of hindi.",
 
-      image: "https://m.media-amazon.com/images/I/91yXKcuCEwL._SX445_.jpg",
+      image: "/assets/images/games/vernmala.jpg",
       tags: ["vocab", "Educational"],
       link: "/varnmala"
     },
@@ -70,7 +65,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Number System",
       description: "Learn Number System of word.",
       // colorful plastic numbers on mint green background — Kaboompics (Pexels)
-      image: "/assets/images/Number.png",
+      image: "/assets/images/games/Number.png",
       tags: ["vocab", "maths"],
       link: "/numbers"
     },
@@ -78,8 +73,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Math Adventure",
       description: "Solve math problems to advance through an exciting adventure world.",
       // colorful math equations / geometry
-      image:
-        "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/math.avif",
       tags: ["Math", "Adventure", "Educational"],
       link: "/math"
     },
@@ -87,8 +81,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Cross Word",
       description: "Create words from letter tiles to earn points and unlock levels.",
       // wooden scrabble letter tiles on surface — Brett Jordan (Unsplash)
-      image:
-        "https://play-lh.googleusercontent.com/uz7mICzdnxxkVgTlJM5RRD6Y8F5M5kzu4syQKJruZ-8G7nqcsLeKjAuocxNJEaqFu7o=w526-h296-rw",
+      image: "/assets/images/games/crossword.webp",
       tags: ["Language", "Spelling", "Fun"],
       link: "/crossword"
     },
@@ -96,8 +89,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Akshar",
       description: "Learn local language basics",
       // pen writing letters on paper — handwriting closeup
-      image:
-        "https://images.twinkl.co.uk/tw1n/image/private/s--aTNc3kQp--/e_sharpen:100,q_auto:eco,w_1260/image_repo/18/b1/in-hi-1732165038-hindi-vowel-alphabet-flashcards-with-words-i-hindi-varnamala-phlaisakarda_ver_2.avif",
+      image: "/assets/images/games/akshar.avif",
       tags: ["Language", "Educational"],
       link: "/akshar"
     },
@@ -105,8 +97,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Stories",
       description: "Our stories",
       // open storybook with magical fairy lights — Nong
-      image:
-        "https://images.unsplash.com/photo-1512820790803-83ca734da794?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/Stories.avif",
       tags: ["story"],
       link: "/story"
     },
@@ -114,14 +105,14 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Capital",
       description: "Our State and Capital",
       // India map photo — Gayatri Malhotra (actual India map with states)
-      image: "https://www.mapsofindia.com/images2/india-map.jpg",
+      image: "/assets/images/games/capital.jpg",
       tags: ["geography", "gk"],
       link: "/capital"
     },
     {
       title: "Play",
       description: "Master keyboard skills by slicing falling letters and pressing the correct keys",
-      image: "/assets/images/knplay.png",
+      image: "/assets/images/games/knplay.png",
       tags: ["Keyboard", "Typing", "Educational"],
       link: "/play"
     }
@@ -131,8 +122,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Canvas",
       description: "Learn basic programming concepts through a fun puzzle game.",
       // graphic drawing tablet with stylus pen — digital art canvas tool
-      image:
-        "https://images.unsplash.com/photo-1609921212029-bb5a28e60960?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/canva.avif",
       tags: ["Programming", "Logic", "Puzzle"],
       link: "/canvas"
     },
@@ -140,7 +130,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Our India",
       description: "Learn about india state by dance.",
       // India map / tricolor flag
-      image: "https://images.pexels.com/photos/7235907/pexels-photo-7235907.jpeg?auto=compress&cs=tinysrgb&w=600",
+      image: "/assets/images/games/ourindia.avif",
       tags: ["History", "Mystery", "Research"],
       link: "/map"
     },
@@ -148,7 +138,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Nakshtra",
       description: "Learn about environmental science while protecting virtual ecosystems.",
       // milky way stars constellation night sky — Tobias Rademacher
-      image: "https://images.unsplash.com/photo-1532968961962-8a0cb3a2d4f5?auto=format&fit=crop&w=600&q=80",
+      image: "/assets/images/games/nakshatra.avif",
       tags: ["Environment", "Science", "Strategy"],
       link: "/nakshtra"
     }
@@ -158,7 +148,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Stories",
       description: "A complex strategy game that challenges critical thinking and planning.",
       // person reading a book dramatically lit — emotional / teen vibe
-      image: "/assets/images/stories.webp",
+      image: "/assets/images/games/stories.webp",
       tags: ["Strategy", "Critical Thinking", "Multiplayer"],
       link: "/stories"
     },
@@ -166,8 +156,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Poems",
       description: "Design and create digital art, music, and animations.",
       // open poetry book, person reading — Toa Heftiba (poetry aesthetic)
-      image:
-        "https://media.slidesgo.com/storage/52467183/responsive-images/0-short-poems-for-kids___media_library_original_1600_900.jpg",
+      image: "/assets/images/games/poems.jpg",
       tags: ["Creative", "Art", "Music"],
       link: "/poems"
     },
@@ -175,7 +164,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Glossary",
       description: "Team-based challenges that promote collaboration and communication.",
       // magnifying glass on text / dictionary close-up
-      image: "/assets/images/glossary.png",
+      image: "/assets/images/games/glossary.png",
       tags: ["Social", "Teamwork", "Communication"],
       link: "/glossary"
     }
@@ -185,7 +174,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Our India",
       description: "Test your knowledge across various parts of indian state.",
       // India map / tricolor flag
-      image: "/assets/images/OurIndia.png",
+      image: "/assets/images/games/OurIndia.png",
       tags: ["Trivia", "Knowledge", "Multiplayer"],
       link: "/map"
     },
@@ -193,8 +182,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Vedic",
       description: "Work together to solve puzzles and escape before time runs out.",
       // ancient manuscript / old parchment handwritten text
-      image:
-        "https://ljfotzyzgckshahjzkya.supabase.co/storage/v1/object/public/site-assets/work/covers/1771405921711.png",
+      image: "/assets/images/games/vedic.png",
       tags: ["Puzzle", "Teamwork", "Mystery"],
       link: "/vedic"
     },
@@ -202,8 +190,7 @@ export const gamesData: Record<AgeKey, Game[]> = {
       title: "Zodiac",
       description: "Ancient Indian Zodiac Signs.",
       // zodiac astrological wheel with celestial signs — historical illustration
-      image:
-        "https://media.istockphoto.com/id/1532619550/vector/cute-signs-zodiac-flat-style-adorable-characters-with-lettering.jpg?s=612x612&w=0&k=20&c=vHhOs9wHHce5tauJMUYfhNbG6WjUPzCsU5jb_so9xCs=",
+      image: "/assets/images/games/zodiac.jpg",
       tags: ["Strategy", "Classic", "Multiplayer"],
       link: "/zodiac"
     }
diff --git a/src/layouts/TitleLayout.astro b/src/layouts/TitleLayout.astro
index 1352c65a..997666b2 100644
--- a/src/layouts/TitleLayout.astro
+++ b/src/layouts/TitleLayout.astro
@@ -8,7 +8,7 @@ const { title, description = "" } = Astro.props;
 
 <style>
   .title {
-    @apply mt-3 p-2 text-center text-2xl font-bold md:text-3xl;
+    @apply mt-0 p-2 text-center text-2xl font-bold md:text-3xl;
   }
 </style>
 <h1 class="title">
diff --git a/src/pages/coming-soon.astro b/src/pages/coming-soon.astro
index 608518b4..0471f611 100644
--- a/src/pages/coming-soon.astro
+++ b/src/pages/coming-soon.astro
@@ -15,9 +15,9 @@ const meta = {
   <div class="page-container">
     <!-- Section 1: Heading -->
     <div class="heading-container">
-      <Picture src={logoImage} formats={["png", "webp"]} alt={APP_NAME} class="logo" />
       <h1>Something Amazing is Coming</h1>
       <p class="subtitle">We're working hard to bring you the best experience.</p>
+      <Picture src={logoImage} formats={["png", "webp"]} alt={APP_NAME} class="logo" />
     </div>
     <!-- Section 2: Countdown -->
     <Countdown date="2025-08-15" />
diff --git a/src/pages/featured.astro b/src/pages/featured.astro
new file mode 100644
index 00000000..64774963
--- /dev/null
+++ b/src/pages/featured.astro
@@ -0,0 +1,305 @@
+---
+// src/pages/featured.astro
+import Base from "../layouts/Base.astro";
+import { featuredGames, FEATURED_MAX } from "../data/FeaturedGames";
+import { gamesData } from "../data/gamesData";
+import type { Game } from "../data/gamesData";
+
+const allGames: Array<Game & { id: string }> = Object.values(gamesData)
+  .flat()
+  .map((game) => ({
+    ...game,
+    id: game.link.replace(/^\//, "").toLowerCase()
+  }));
+
+const featured = featuredGames
+  .slice(0, FEATURED_MAX)
+  .map((id) => allGames.find((g) => g.id === id))
+  .filter((g): g is Game & { id: string } => g !== undefined);
+---
+
+<Base meta={{ title: "Featured Games" }}>
+  <div class="fp-wrap">
+    <div class="fp-hdr">
+      <h1 class="fp-title">Featured Games <span class="fp-spark">🌟</span></h1>
+      <p class="fp-sub">Hand-picked activities your kids will love right now 🎮</p>
+    </div>
+
+    {
+      featured.length === 0 ? (
+        <div class="fp-empty">
+          <span>🎲</span>
+          <p>No featured games configured yet.</p>
+        </div>
+      ) : (
+        <div class="fp-grid">
+          {featured.map((game) => (
+            <a href={game.link} class="fp-card" aria-label={`Play ${game.title}`}>
+              <div class="fp-badge">⭐ Featured</div>
+              <div class="fp-thumb-wrap">
+                <img
+                  src={game.image}
+                  alt={game.title}
+                  class="fp-thumb"
+                  loading="lazy"
+                  onerror="if(this.dataset.errored)return;this.dataset.errored='1';this.onerror=null;this.src='/assets/images/game-placeholder.svg'"
+                />
+                <div class="fp-overlay" />
+              </div>
+              <div class="fp-body">
+                <div class="fp-tags">
+                  {game.tags.slice(0, 2).map((tag) => (
+                    <span class="fp-tag">{tag}</span>
+                  ))}
+                </div>
+                <h3 class="fp-game-title">{game.title}</h3>
+                <p class="fp-desc">{game.description}</p>
+                <div class="fp-footer">
+                  <span class="fp-play-btn">
+                    <span>▶</span> Play Now
+                  </span>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      )
+    }
+  </div>
+</Base>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
+
+  .fp-wrap {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 3rem 2rem 5rem;
+    font-family: "Nunito", sans-serif;
+  }
+
+  .fp-hdr {
+    text-align: center;
+    margin-bottom: 2.5rem;
+  }
+  .fp-title {
+    font-size: 2rem;
+    font-weight: 900;
+    color: #1a1a40;
+    margin: 0 0 6px;
+  }
+  .fp-spark {
+    font-size: 1.6rem;
+  }
+  .fp-sub {
+    font-size: 14px;
+    color: #888;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  /* Same grid layout as category tiles */
+  .fp-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin: 0 auto;
+  }
+
+  /* Card — mirrors .fg-card exactly */
+  .fp-card {
+    border-radius: 20px;
+    overflow: hidden;
+    background: #fff;
+    border: 2px solid #e8e8f0;
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    position: relative;
+    transition:
+      transform 0.22s ease,
+      box-shadow 0.22s ease,
+      border-color 0.22s ease;
+  }
+  .fp-card:hover {
+    transform: translateY(-7px);
+    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.13);
+    border-color: #c8b8ff;
+  }
+
+  .fp-badge {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 3;
+    background: linear-gradient(135deg, #7048c0, #d03070);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 800;
+    padding: 4px 10px;
+    border-radius: 50px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    box-shadow: 0 2px 8px rgba(112, 72, 192, 0.35);
+  }
+
+  .fp-thumb-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    background: #f0eeff;
+    flex-shrink: 0;
+  }
+  .fp-thumb {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    display: block;
+  }
+  .fp-card:hover .fp-thumb {
+    transform: scale(1.06);
+  }
+  .fp-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent 50%, rgba(10, 5, 30, 0.35) 100%);
+    pointer-events: none;
+  }
+
+  .fp-body {
+    padding: 12px 14px 14px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 6px;
+  }
+  .fp-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+  .fp-tag {
+    background: #f0eeff;
+    color: #7048c0;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 50px;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+  }
+  .fp-game-title {
+    font-size: 15px;
+    font-weight: 900;
+    color: #1a1a40;
+    margin: 0;
+    line-height: 1.25;
+  }
+  .fp-desc {
+    font-size: 12px;
+    color: #666;
+    font-weight: 600;
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .fp-footer {
+    margin-top: auto;
+    padding-top: 8px;
+  }
+  .fp-play-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, #7048c0, #d03070);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 800;
+    padding: 7px 16px;
+    border-radius: 50px;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+  .fp-card:hover .fp-play-btn {
+    opacity: 0.92;
+    transform: scale(1.04);
+  }
+
+  .fp-empty {
+    text-align: center;
+    padding: 3rem;
+    background: #f9f7ff;
+    border-radius: 20px;
+    border: 2px dashed #d2caff;
+  }
+  .fp-empty span {
+    font-size: 3rem;
+    display: block;
+    margin-bottom: 12px;
+  }
+  .fp-empty p {
+    color: #7048c0;
+    font-weight: 700;
+  }
+
+  /* Dark mode */
+  :global([data-theme="dark"]) .fp-title {
+    color: #e0f7fa;
+  }
+  :global([data-theme="dark"]) .fp-sub {
+    color: #aaa;
+  }
+  :global([data-theme="dark"]) .fp-card {
+    background: rgba(3, 26, 32, 0.72);
+    border-color: rgba(34, 211, 238, 0.12);
+    backdrop-filter: blur(10px);
+  }
+  :global([data-theme="dark"]) .fp-card:hover {
+    border-color: rgba(34, 211, 238, 0.3);
+    box-shadow:
+      0 12px 30px rgba(0, 0, 0, 0.45),
+      0 0 22px rgba(34, 211, 238, 0.12);
+  }
+  :global([data-theme="dark"]) .fp-game-title {
+    color: #7dd3fc;
+  }
+  :global([data-theme="dark"]) .fp-desc {
+    color: #94a3b8;
+  }
+  :global([data-theme="dark"]) .fp-tag {
+    background: rgba(34, 211, 238, 0.12);
+    color: #7dd3fc;
+  }
+  :global([data-theme="dark"]) .fp-thumb-wrap {
+    background: rgba(112, 72, 192, 0.2);
+  }
+
+  /* Responsive */
+  @media (max-width: 1100px) {
+    .fp-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+  @media (max-width: 860px) {
+    .fp-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (max-width: 520px) {
+    .fp-wrap {
+      padding: 2rem 1rem 3rem;
+    }
+    .fp-grid {
+      grid-template-columns: 1fr;
+    }
+    .fp-title {
+      font-size: 1.6rem;
+    }
+  }
+</style>
diff --git a/src/pages/games/[age].astro b/src/pages/games/[age].astro
index 2e1fc52b..63d1752b 100644
--- a/src/pages/games/[age].astro
+++ b/src/pages/games/[age].astro
@@ -47,11 +47,13 @@ const meta = {
     gap: 1rem;
     padding: 1rem 0;
     margin-bottom: 1.5rem;
+    justify-content: center;
   }
   .page-header h2 {
     font-size: 1.5rem;
     font-weight: 800;
     color: #1a3353;
+    text-align: center;
   }
   :global([data-theme="dark"]) .page-header h2 {
     color: #e2f0ff;