From 122fd9e09fe0adb83de7204a21d9c5c01ca154c4 Mon Sep 17 00:00:00 2001
From: sabarishr-dev <sabarish.r@vinsinfo.com>
Date: Sun, 28 Sep 2025 11:39:00 +0530
Subject: [PATCH 1/4] feat: html build upload

---
 app/api/arena/games/[id]/route.ts    |   5 +-
 app/arena/[id]/page.tsx              |  22 +-
 app/arena/play-game/page.tsx         |  66 +++++-
 app/contribute/publish/page.tsx      | 303 +++++++++++++++++++++++++--
 components/html/html-game-view.tsx   | 110 ++++++++++
 components/html/html-game.module.css |  25 +++
 lib/db.ts                            |  36 +++-
 package-lock.json                    |  22 --
 pages/api/publish.ts                 | 145 +------------
 pages/api/publish/html.ts            | 158 ++++++++++++++
 pages/api/publish/unity.ts           | 147 +++++++++++++
 11 files changed, 847 insertions(+), 192 deletions(-)
 create mode 100644 components/html/html-game-view.tsx
 create mode 100644 components/html/html-game.module.css
 create mode 100644 pages/api/publish/html.ts
 create mode 100644 pages/api/publish/unity.ts

diff --git a/app/api/arena/games/[id]/route.ts b/app/api/arena/games/[id]/route.ts
index 958da7f..4f0e25c 100644
--- a/app/api/arena/games/[id]/route.ts
+++ b/app/api/arena/games/[id]/route.ts
@@ -3,10 +3,11 @@ import { getGameById } from '@/lib/db';
 
 export async function GET(
     req: Request,
-    context: Promise<{ params: { id: string } }>
+    context: Promise<{ params: Promise<{ id: string }> }>
 ) {
     try {
-        const { id } = (await context).params;
+        const params = await context;
+        const { id } = await params.params;
         const gameId = parseInt(id);
 
         if (isNaN(gameId)) {
diff --git a/app/arena/[id]/page.tsx b/app/arena/[id]/page.tsx
index 47f9fe6..94c0889 100644
--- a/app/arena/[id]/page.tsx
+++ b/app/arena/[id]/page.tsx
@@ -18,6 +18,7 @@ interface Game {
     details: string;
     category: string[];
     publisher: string;
+    type: string;
 }
 
 export default function GameDetailPage() {
@@ -96,14 +97,24 @@ export default function GameDetailPage() {
                                 alt={`${game.title} preview ${activeIndex + 1}`}
                                 className={styles.previewImage}
                             />
-                        ) : (
+                        ) : game.video ? (
                             <video
-                                src={game.video!}
+                                src={game.video}
                                 className={styles.previewVideo}
                                 autoPlay
                                 playsInline
                                 controls
                             />
+                        ) : (
+                            <div className={styles.previewImage} style={{ 
+                                display: 'flex', 
+                                alignItems: 'center', 
+                                justifyContent: 'center',
+                                backgroundColor: '#f8f9fa',
+                                color: '#666'
+                            }}>
+                                No video available
+                            </div>
                         )}
                     </div>
 
@@ -148,6 +159,13 @@ export default function GameDetailPage() {
                         <p className={styles.publisher}>{game.publisher}</p>
                     </div>
 
+                    <div>
+                        <h2 className={styles.sectionHeader}>Game Type</h2>
+                        <p className={styles.gameType}>
+                            {game.type === 'unity' ? '🎮 Unity WebGL' : '🌐 HTML Game'}
+                        </p>
+                    </div>
+
                     <div>
                         <h2 className={styles.sectionHeader}>Options</h2>
                         <div className={styles.controlButtonGroup}>
diff --git a/app/arena/play-game/page.tsx b/app/arena/play-game/page.tsx
index 770ca30..2f1bee0 100644
--- a/app/arena/play-game/page.tsx
+++ b/app/arena/play-game/page.tsx
@@ -1,24 +1,80 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 
-const GameView = dynamic(() => import("../../../components/unity/game-view"), { ssr: false });
+const UnityGameView = dynamic(() => import("../../../components/unity/game-view"), { ssr: false });
+const HTMLGameView = dynamic(() => import("../../../components/html/html-game-view"), { ssr: false });
 
-const UnityPage: React.FC = () => {
+interface Game {
+    id: number;
+    buildName: string;
+    title: string;
+    type: string;
+    folderName?: string;
+}
+
+const PlayGamePage: React.FC = () => {
     const searchParams = useSearchParams();
     const id = searchParams?.get("Id");
     const name = searchParams?.get("Name");
+    const [game, setGame] = useState<Game | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchGame = async () => {
+            try {
+                const res = await fetch(`/api/arena/games/${id}`);
+                if (!res.ok) throw new Error('Game not found');
+                const data = await res.json();
+                setGame(data);
+            } catch (err) {
+                console.error(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (id) {
+            fetchGame();
+        }
+    }, [id]);
+
+    if (loading) {
+        return (
+            <div
+                className="aspect-video bg-white rounded-lg flex items-center justify-center"
+                style={{ width: "100%", height: "100vh" }}
+            >
+                Loading game...
+            </div>
+        );
+    }
+
+    if (!game) {
+        return (
+            <div
+                className="aspect-video bg-white rounded-lg flex items-center justify-center"
+                style={{ width: "100%", height: "100vh" }}
+            >
+                Game not found
+            </div>
+        );
+    }
 
     return (
         <div
             className="aspect-video bg-white rounded-lg flex items-center justify-center"
             style={{ width: "100%", height: "100vh" }}
         >
-            <GameView Id={id!} Name={name!} />
+            {game.type === 'unity' ? (
+                <UnityGameView Id={id!} Name={name!} />
+            ) : (
+                <HTMLGameView gameId={id!} buildName={name!} folderName={game.folderName} />
+            )}
         </div>
     );
 };
 
-export default UnityPage;
+export default PlayGamePage;
diff --git a/app/contribute/publish/page.tsx b/app/contribute/publish/page.tsx
index 96e15ae..78f738e 100644
--- a/app/contribute/publish/page.tsx
+++ b/app/contribute/publish/page.tsx
@@ -8,6 +8,7 @@ import SignIn from '@/components/auth/SignIn';
 
 export default function Publish() {
     const [step, setStep] = useState(1);
+    const [gameType, setGameType] = useState<'unity' | 'html' | null>(null);
     const { data: session, status } = useSession();
 
     const [gameId, setGameId] = useState('');
@@ -25,6 +26,10 @@ export default function Publish() {
 
     const [hasStreamingAssets, setHasStreamingAssets] = useState(false);
     const [streamingAssetsFiles, setStreamingAssetsFiles] = useState<FileList | null>(null);
+    
+    // HTML game files
+    const [htmlFiles, setHtmlFiles] = useState<FileList | null>(null);
+    const [uploadType, setUploadType] = useState<'folder' | 'files'>('folder');
 
     const [uploaded, setUploaded] = useState(false);
     const [available, setAvailable] = useState<boolean | null>(null);
@@ -36,7 +41,12 @@ export default function Publish() {
     };
 
     const canSubmit = () => {
-        return dataFile !== null && wasmFile !== null && frameworkFile !== null && loaderFile !== null;
+        if (gameType === 'unity') {
+            return dataFile !== null && wasmFile !== null && frameworkFile !== null && loaderFile !== null;
+        } else if (gameType === 'html') {
+            return htmlFiles !== null && htmlFiles.length > 0;
+        }
+        return false;
     };
 
     const handleUpload = async (force = false) => {
@@ -57,7 +67,6 @@ export default function Publish() {
         formData.append('description', description);
         formData.append('details', details);
         formData.append('publisher', session?.user?.email || "magician");
-        formData.append('hasStreamingAssets', hasStreamingAssets ? 'true' : 'false');
 
         if (gameImages) {
             Array.from(gameImages).forEach((file) => formData.append('gameImages', file));
@@ -66,14 +75,21 @@ export default function Publish() {
             formData.append('gameVideo', gameVideo);
         }
 
-        formData.append('files', dataFile!);
-        formData.append('files', wasmFile!);
-        formData.append('files', frameworkFile!);
-        formData.append('files', loaderFile!);
-
-        if (hasStreamingAssets && streamingAssetsFiles) {
-            Array.from(streamingAssetsFiles).forEach((file) => {
-                formData.append('streamingAssetsFiles', file, file.webkitRelativePath);
+        if (gameType === 'unity') {
+            formData.append('hasStreamingAssets', hasStreamingAssets ? 'true' : 'false');
+            formData.append('files', dataFile!);
+            formData.append('files', wasmFile!);
+            formData.append('files', frameworkFile!);
+            formData.append('files', loaderFile!);
+
+            if (hasStreamingAssets && streamingAssetsFiles) {
+                Array.from(streamingAssetsFiles).forEach((file) => {
+                    formData.append('streamingAssetsFiles', file, file.webkitRelativePath);
+                });
+            }
+        } else if (gameType === 'html') {
+            Array.from(htmlFiles!).forEach((file) => {
+                formData.append('htmlFiles', file);
             });
         }
 
@@ -81,7 +97,8 @@ export default function Publish() {
             formData.append('force', 'true');
         }
 
-        const res = await fetch('/api/publish', {
+        const endpoint = gameType === 'unity' ? '/api/publish/unity' : '/api/publish/html';
+        const res = await fetch(endpoint, {
             method: 'POST',
             body: formData,
         });
@@ -131,13 +148,81 @@ export default function Publish() {
 
     return (
         <div className={styles.wrapper}>
-            <h1 className={styles.title}>Publish Unity WebGL Build</h1>
+            <h1 className={styles.title}>Publish Game</h1>
             <h6 className={styles.uploader}>Publisher : {session.user?.name}</h6>
 
             {!uploaded && (
                 <>
-                    {step === 1 && (
+                    {step === 1 && !gameType && (
+                        <>
+                            <h2>Choose Game Type</h2>
+                            <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
+                                <button
+                                    className={styles.gameTypeButton}
+                                    onClick={() => setGameType('unity')}
+                                    style={{
+                                        padding: '20px',
+                                        border: '2px solid #007bff',
+                                        borderRadius: '8px',
+                                        background: 'white',
+                                        cursor: 'pointer',
+                                        fontSize: '16px',
+                                        fontWeight: 'bold',
+                                        flex: 1
+                                    }}
+                                >
+                                    Unity WebGL Build
+                                    <br />
+                                    <small style={{ fontWeight: 'normal', color: '#666' }}>
+                                        Upload .data, .wasm, .framework.js, .loader.js files
+                                    </small>
+                                </button>
+                                <button
+                                    className={styles.gameTypeButton}
+                                    onClick={() => setGameType('html')}
+                                    style={{
+                                        padding: '20px',
+                                        border: '2px solid #28a745',
+                                        borderRadius: '8px',
+                                        background: 'white',
+                                        cursor: 'pointer',
+                                        fontSize: '16px',
+                                        fontWeight: 'bold',
+                                        flex: 1
+                                    }}
+                                >
+                                    HTML Game
+                                    <br />
+                                    <small style={{ fontWeight: 'normal', color: '#666' }}>
+                                        Upload index.html, CSS, JS, and assets
+                                    </small>
+                                </button>
+                            </div>
+                        </>
+                    )}
+
+                    {step === 1 && gameType && (
                         <>
+                            <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
+                                <button
+                                    onClick={() => {
+                                        setGameType(null);
+                                        setStep(1);
+                                    }}
+                                    style={{
+                                        padding: '5px 10px',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '4px',
+                                        background: 'white',
+                                        cursor: 'pointer'
+                                    }}
+                                >
+                                    ← Back to Game Type
+                                </button>
+                                <span style={{ fontWeight: 'bold' }}>
+                                    Publishing {gameType === 'unity' ? 'Unity WebGL' : 'HTML'} Game
+                                </span>
+                            </div>
                             <label>
                                 Game ID ❗️
                                 <input
@@ -241,7 +326,7 @@ export default function Publish() {
                         </>
                     )}
 
-                    {step === 2 && (
+                    {step === 2 && gameType === 'unity' && (
                         <>
                             <File label="DATA file (.data)*" accept=".data" onFileChange={setDataFile} />
                             <File label="WASM file (.wasm)*" accept=".wasm" onFileChange={setWasmFile} />
@@ -277,6 +362,192 @@ export default function Publish() {
                                 </div>
                             )} */}
 
+                            <div style={{ marginTop: '20px' }}>
+                                <button
+                                    className={styles.uploadBtn}
+                                    onClick={() => setStep(1)}
+                                    style={{ marginRight: '10px' }}
+                                >
+                                    Back
+                                </button>
+
+                                <button
+                                    className={styles.uploadBtn}
+                                    onClick={() => {
+                                        handleUpload();
+                                    }}
+                                    disabled={!canSubmit()}
+                                >
+                                    Upload Unity Build
+                                </button>
+                            </div>
+                        </>
+                    )}
+
+                    {step === 2 && gameType === 'html' && (
+                        <>
+                            <div style={{ marginBottom: '20px' }}>
+                                <h3>HTML Game Upload Options</h3>
+                                <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+                                    <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                                        <input
+                                            type="radio"
+                                            name="uploadType"
+                                            value="folder"
+                                            defaultChecked
+                                            onChange={() => setUploadType('folder')}
+                                        />
+                                        Upload Folder
+                                    </label>
+                                    <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                                        <input
+                                            type="radio"
+                                            name="uploadType"
+                                            value="files"
+                                            onChange={() => setUploadType('files')}
+                                        />
+                                        Upload Individual Files
+                                    </label>
+                                </div>
+                            </div>
+
+                            {uploadType === 'folder' && (
+                                <>
+                                    <label>
+                                        HTML Game Folder*
+                                        <input
+                                            type="file"
+                                            webkitdirectory="true"
+                                            directory="true"
+                                            multiple
+                                            onChange={(e) => setHtmlFiles(e.target.files)}
+                                            style={{ 
+                                                padding: '10px',
+                                                border: '2px dashed #ccc',
+                                                borderRadius: '8px',
+                                                width: '100%',
+                                                cursor: 'pointer'
+                                            }}
+                                        />
+                                        <small style={{ fontSize: 12, color: '#666', display: 'block', marginTop: '5px' }}>
+                                            Select your HTML game folder. All files and subfolders will be preserved.
+                                        </small>
+                                    </label>
+
+                                    {htmlFiles && htmlFiles.length > 0 && (
+                                        <div style={{ 
+                                            marginTop: '15px', 
+                                            padding: '15px', 
+                                            backgroundColor: '#f8f9fa', 
+                                            borderRadius: '8px',
+                                            border: '1px solid #e9ecef'
+                                        }}>
+                                            <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
+                                                📁 Uploaded Files ({htmlFiles.length} files)
+                                            </h4>
+                                            <div style={{ 
+                                                maxHeight: '200px', 
+                                                overflowY: 'auto',
+                                                fontSize: '12px',
+                                                fontFamily: 'monospace'
+                                            }}>
+                                                {Array.from(htmlFiles).map((file, index) => (
+                                                    <div key={index} style={{ 
+                                                        padding: '2px 0',
+                                                        color: file.name.endsWith('.html') ? '#007bff' : '#666'
+                                                    }}>
+                                                        {file.webkitRelativePath || file.name}
+                                                        {file.name === 'index.html' && ' ⭐'}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                            {!Array.from(htmlFiles).some(f => f.name === 'index.html') && (
+                                                <div style={{ 
+                                                    marginTop: '10px', 
+                                                    padding: '8px', 
+                                                    backgroundColor: '#fff3cd', 
+                                                    border: '1px solid #ffeaa7',
+                                                    borderRadius: '4px',
+                                                    fontSize: '12px',
+                                                    color: '#856404'
+                                                }}>
+                                                    ⚠️ Warning: No index.html file found. Make sure your main HTML file is named 'index.html'
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
+                                </>
+                            )}
+
+                            {uploadType === 'files' && (
+                                <>
+                                    <label>
+                                        HTML Game Files*
+                                        <input
+                                            type="file"
+                                            multiple
+                                            accept=".html,.htm,.css,.js,.png,.jpg,.jpeg,.gif,.svg,.wav,.mp3,.ogg,.webm,.mp4"
+                                            onChange={(e) => setHtmlFiles(e.target.files)}
+                                            style={{ 
+                                                padding: '10px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '8px',
+                                                width: '100%'
+                                            }}
+                                        />
+                                        <small style={{ fontSize: 12, color: '#666', display: 'block', marginTop: '5px' }}>
+                                            Upload all your HTML game files (index.html, CSS, JS, images, sounds, etc.)
+                                        </small>
+                                    </label>
+
+                                    {htmlFiles && htmlFiles.length > 0 && (
+                                        <div style={{ 
+                                            marginTop: '15px', 
+                                            padding: '15px', 
+                                            backgroundColor: '#f8f9fa', 
+                                            borderRadius: '8px',
+                                            border: '1px solid #e9ecef'
+                                        }}>
+                                            <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
+                                                📄 Selected Files ({htmlFiles.length} files)
+                                            </h4>
+                                            <div style={{ 
+                                                maxHeight: '150px', 
+                                                overflowY: 'auto',
+                                                fontSize: '12px'
+                                            }}>
+                                                {Array.from(htmlFiles).map((file, index) => (
+                                                    <div key={index} style={{ 
+                                                        padding: '2px 0',
+                                                        color: file.name.endsWith('.html') ? '#007bff' : '#666'
+                                                    }}>
+                                                        📄 {file.name}
+                                                        {file.name === 'index.html' && ' ⭐'}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </>
+                            )}
+
+                            <div style={{ 
+                                marginTop: '20px', 
+                                padding: '15px', 
+                                backgroundColor: '#e7f3ff', 
+                                borderRadius: '8px',
+                                border: '1px solid #b3d9ff'
+                            }}>
+                                <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
+                                    📋 HTML Game Requirements
+                                </h4>
+                                <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px', color: '#0066cc' }}>
+                                    <li>Must include index.html as the main entry point</li>
+                                    <li>All file paths should be relative (no absolute URLs)</li>
+                                    <li>Maximum total size: 50MB</li>
+                                    <li>Supported formats: HTML, CSS, JS, PNG, JPG, GIF, SVG, MP3, WAV, OGG</li>
+                                </ul>
+                            </div>
 
                             <div style={{ marginTop: '20px' }}>
                                 <button
@@ -294,7 +565,7 @@ export default function Publish() {
                                     }}
                                     disabled={!canSubmit()}
                                 >
-                                    Upload
+                                    Upload HTML Game
                                 </button>
                             </div>
                         </>
@@ -302,7 +573,7 @@ export default function Publish() {
                 </>
             )}
 
-            {uploaded && <p>Unity Build Uploaded! You can now preview the game.</p>}
+            {uploaded && <p>{gameType === 'unity' ? 'Unity Build' : 'HTML Game'} Uploaded! You can now preview the game.</p>}
         </div>
     );
 }
diff --git a/components/html/html-game-view.tsx b/components/html/html-game-view.tsx
new file mode 100644
index 0000000..c7cee2e
--- /dev/null
+++ b/components/html/html-game-view.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { AddArenaCoins, AddGamePlayedCount, AddTrophies } from '@/lib/playfab/playfab';
+import styles from './html-game.module.css';
+import { useUnitySession } from '@/context/UnitySessionContext';
+import { usePlayTimeSession } from '@/context/PlayTimeContext';
+
+interface HTMLGameProps {
+    gameId?: string;
+    buildName?: string;
+    folderName?: string;
+}
+
+interface Event {
+    eventName?: string;
+    rewards?: {
+        arenaCoins?: number;
+        trophies?: number;
+    };
+}
+
+const HTMLGameView: React.FC<HTMLGameProps> = ({ gameId, buildName, folderName }) => {
+    const router = useRouter();
+    const { setIsUnityLoaded } = useUnitySession();
+    const { isExpired } = usePlayTimeSession();
+
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            // Only handle messages from our game iframe
+            if (event.origin !== window.location.origin) return;
+            
+            try {
+                const data: Event = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+                const ticket = sessionStorage.getItem('playfabSessionTicket');
+                const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID ?? '';
+                if (!ticket || !titleId) return;
+
+                if (data.eventName === 'ended') {
+                    AddGamePlayedCount(ticket, titleId);
+                    AddTrophies(ticket, titleId, data.rewards?.trophies ?? 0);
+                    AddArenaCoins(ticket, titleId, data.rewards?.arenaCoins ?? 0);
+                }
+            } catch (error) {
+                console.error('Failed to parse HTML game message:', error);
+            }
+        };
+
+        const handleBlur = () => {
+            setIsUnityLoaded(false);
+        };
+        const handleFocus = () => {
+            setIsUnityLoaded(true);
+        };
+
+        if (isExpired) {
+            alert("Your daily playtime has expired. Please come back tomorrow!");
+            router.push('/dashboard');
+            return;
+        }
+
+        setIsUnityLoaded(true);
+
+        window.addEventListener('message', handleMessage);
+        window.addEventListener('focus', handleFocus);
+        window.addEventListener('blur', handleBlur);
+
+        return () => {
+            window.removeEventListener('message', handleMessage);
+            window.removeEventListener('blur', handleBlur);
+            window.removeEventListener('focus', handleFocus);
+            setIsUnityLoaded(false);
+        };
+    }, [isExpired, router, setIsUnityLoaded]);
+
+    const handleExit = () => {
+        setIsUnityLoaded(false);
+        router.push(`/arena/${gameId}`);
+    };
+
+    if (isExpired) {
+        return null;
+    }
+
+    // Construct the correct path for the HTML game
+    const getGameUrl = () => {
+        if (folderName) {
+            return `/games/${gameId}/${folderName}/index.html`;
+        }
+        return `/games/${gameId}/index.html`;
+    };
+
+    return (
+        <div style={{ width: '100%', height: '100vh', position: 'relative', backgroundColor: '#001f3f' }}>
+            <iframe
+                src={getGameUrl()}
+                className={styles.gameIframe}
+                title={buildName || 'HTML Game'}
+                allow="fullscreen; autoplay; microphone; camera; gamepad; payment"
+                sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+            />
+            <button className={styles.backButton} onClick={handleExit}>
+                ← Back
+            </button>
+        </div>
+    );
+};
+
+export default HTMLGameView;
\ No newline at end of file
diff --git a/components/html/html-game.module.css b/components/html/html-game.module.css
new file mode 100644
index 0000000..bb27d01
--- /dev/null
+++ b/components/html/html-game.module.css
@@ -0,0 +1,25 @@
+.gameIframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+}
+
+.backButton {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    z-index: 1000;
+    transition: background-color 0.3s ease;
+}
+
+.backButton:hover {
+    background: rgba(0, 0, 0, 0.9);
+}
\ No newline at end of file
diff --git a/lib/db.ts b/lib/db.ts
index eecf502..75a2914 100644
--- a/lib/db.ts
+++ b/lib/db.ts
@@ -28,7 +28,8 @@ export async function initDb() {
             description TEXT,
             video TEXT,
             details TEXT,
-            publisher TEXT
+            publisher TEXT,
+            folderName TEXT
         );
 
         CREATE TABLE IF NOT EXISTS game_images (
@@ -46,6 +47,22 @@ export async function initDb() {
         );
     `);
 
+    // Add type column if it doesn't exist (migration)
+    try {
+        await db.exec(`ALTER TABLE games ADD COLUMN type TEXT DEFAULT 'unity'`);
+    } catch (error) {
+        // Column already exists, ignore the error
+        console.log('Type column already exists or migration failed:', error);
+    }
+
+    // Add folderName column if it doesn't exist (migration)
+    try {
+        await db.exec(`ALTER TABLE games ADD COLUMN folderName TEXT`);
+    } catch (error) {
+        // Column already exists, ignore the error
+        console.log('FolderName column already exists or migration failed:', error);
+    }
+
     await db.close();
 }
 
@@ -59,12 +76,14 @@ export type Game = {
     image?: string[];
     category?: string[];
     publisher?: string;
+    type?: string;
+    folderName?: string;
 };
 
 export async function insertGame(game: Game): Promise<number> {
     const db = await getDb();
 
-    const { id, buildName, title, description, video, details, image = [], category = [], publisher } = game;
+    const { id, buildName, title, description, video, details, image = [], category = [], publisher, type = 'unity', folderName } = game;
 
     if (id !== undefined) {
         await db.run(`DELETE FROM games WHERE id = ?`, [id]);
@@ -73,8 +92,8 @@ export async function insertGame(game: Game): Promise<number> {
     }
 
     const result = await db.run(
-        `INSERT INTO games (id, buildName, title, description, video, details, publisher) VALUES (?, ?, ?, ?, ?, ?, ?)`,
-        [id ?? null, buildName, title, description, video, details, publisher]
+        `INSERT INTO games (id, buildName, title, description, video, details, publisher, type, folderName) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [id ?? null, buildName, title, description, video, details, publisher, type, folderName]
     );
 
     const gameId = id ?? result.lastID!;
@@ -114,6 +133,11 @@ export async function getAllGames(): Promise<Game[]> {
 
         game.image = images.map(i => i.image_path);
         game.category = categories.map(c => c.category);
+        
+        // Ensure type field exists, default to 'unity' for existing games
+        if (!game.type) {
+            game.type = 'unity';
+        }
     }
 
     await db.close();
@@ -125,7 +149,7 @@ export async function getGameById(id: number): Promise<Game | null> {
     const db = await getDb();
 
     const game = await db.get(
-        `SELECT id, buildName, title, description, video, details, publisher FROM games WHERE id = ?`,
+        `SELECT id, buildName, title, description, video, details, publisher, type, folderName FROM games WHERE id = ?`,
         [id]
     );
 
@@ -155,6 +179,8 @@ export async function getGameById(id: number): Promise<Game | null> {
         image: images.map(img => img.image_path),
         category: categories.map(cat => cat.category),
         publisher: game.publisher,
+        type: game.type || 'unity', // Default to 'unity' if type is null/undefined
+        folderName: game.folderName,
     };
 }
 
diff --git a/package-lock.json b/package-lock.json
index 8122e15..5f81e9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
         "@types/formidable": "^3.4.5",
         "@types/react-chartjs-2": "^2.5.7",
         "chart.js": "^4.4.9",
-        "cookie": "^1.0.2",
         "formidable": "^3.5.4",
         "gsap": "^3.13.0",
         "next": "15.3.3",
@@ -29,7 +28,6 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.11",
-        "@types/cookie": "^1.0.0",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -857,17 +855,6 @@
       "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
       "license": "MIT"
     },
-    "node_modules/@types/cookie": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-1.0.0.tgz",
-      "integrity": "sha512-mGFXbkDQJ6kAXByHS7QAggRXgols0mAdP4MuXgloGY1tXokvzaFFM4SMqWvf7AH0oafI7zlFJwoGWzmhDqTZ9w==",
-      "deprecated": "This is a stub types definition. cookie provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cookie": "*"
-      }
-    },
     "node_modules/@types/draco3d": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
@@ -1445,15 +1432,6 @@
       "license": "ISC",
       "optional": true
     },
-    "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
diff --git a/pages/api/publish.ts b/pages/api/publish.ts
index b9dcf7c..4f5e22f 100644
--- a/pages/api/publish.ts
+++ b/pages/api/publish.ts
@@ -1,149 +1,14 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import formidable, { IncomingForm } from 'formidable';
-import fs from 'fs/promises';
-import fssync from 'fs';
-import path from 'path';
-import { insertGame } from '@/lib/db';
-
-export const config = {
-    api: {
-        bodyParser: false,
-    },
-};
-
-interface FormidableFileWithRelativePath extends formidable.File {
-    webkitRelativePath?: string;
-}
-
 
+// Legacy endpoint - redirects to Unity endpoint for backward compatibility
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method !== 'POST') {
         return res.status(405).json({ error: 'Method not allowed' });
     }
 
-    const form = new IncomingForm({ multiples: true, keepExtensions: true });
-
-    form.parse(req, async (err, fields, files) => {
-        if (err) {
-            console.error('Form parse error:', err);
-            return res.status(500).json({ error: 'Failed to parse form' });
-        }
-
-        try {
-            const gameId = Array.isArray(fields.gameId) ? fields.gameId[0] : fields.gameId || '';
-            const gameName = Array.isArray(fields.gameName) ? fields.gameName[0] : fields.gameName || '';
-            const categoryStr = Array.isArray(fields.categories) ? fields.categories[0] : fields.categories || '';
-            const forceField = fields.force;
-            const force = Array.isArray(forceField) ? forceField[0] === 'true' : forceField === 'true';
-            const categories = categoryStr.split(',').map((c) => c.trim()).filter(Boolean);
-            const publisher = Array.isArray(fields.publisher) ? fields.publisher[0] : fields.publisher || '';
-                        
-            if (!gameId || !gameName) {
-                return res.status(400).json({ error: 'Missing required fields' });
-            }
-
-            const basePath = path.join(process.cwd(), 'public', 'games', gameId);
-            const buildPath = path.join(basePath, 'Build');
-            const previewPath = path.join(basePath, 'Previews');
-            const videoPath = path.join(basePath, 'Videos');
-            const streamingAssetsPath = path.join(basePath, 'StreamingAssets');
-
-            // Handle duplicate build
-            if (fssync.existsSync(basePath)) {
-                if (!force) {
-                    return res.status(409).json({ conflict: true, message: 'Build already exists' });
-                }
-
-                // Delete existing content
-                await fs.rm(basePath, { recursive: true, force: true });
-            }
-
-            // Recreate folders
-            for (const dir of [buildPath, previewPath, videoPath, streamingAssetsPath]) {
-                await fs.mkdir(dir, { recursive: true });
-            }
-
-            // Normalize files from form-data
-            const buildFiles = Array.isArray(files.files) ? files.files : files.files ? [files.files] : [];
-            const previewFiles = Array.isArray(files.gameImages) ? files.gameImages : files.gameImages ? [files.gameImages] : [];
-            const videoFile = Array.isArray(files.gameVideo) ? files.gameVideo[0] : files.gameVideo;
-
-            // StreamingAssets files — this is new
-            const streamingAssetsFiles = Array.isArray(files.streamingAssets)
-                ? files.streamingAssets
-                : files.streamingAssets
-                    ? [files.streamingAssets]
-                    : [];
-
-            let imageUrls: string[] = [];
-            let videoUrl = '';
-
-            // Save build files
-            for (const file of buildFiles) {
-                if (!file) continue;
-                const dest = path.join(buildPath, file.originalFilename || '');
-                await fs.copyFile(file.filepath, dest);
-            }
-
-            // Save preview images
-            for (let i = 0; i < previewFiles.length; i++) {
-                const file = previewFiles[i];
-                if (!file) continue;
-                const ext = path.extname(file.originalFilename || '.png');
-                const destPath = path.join(previewPath, `${i + 1}${ext}`);
-                await fs.copyFile(file.filepath, destPath);
-                imageUrls.push(`/games/${gameId}/Previews/${i + 1}${ext}`);
-            }
-
-            // Save video file
-            if (videoFile) {
-                const ext = path.extname(videoFile.originalFilename || '.mp4');
-                const filename = `${gameName.replace(/\s+/g, '')}${ext}`;
-                const dest = path.join(videoPath, filename);
-                await fs.copyFile(videoFile.filepath, dest);
-                videoUrl = `/games/${gameId}/Videos/${filename}`;
-            }
-
-            // Save StreamingAssets files preserving folder structure
-            for (const file of streamingAssetsFiles) {
-                if (!file) continue;
-
-                // webkitRelativePath example: "Audio/sound.wav"
-
-                const f = file as FormidableFileWithRelativePath;
-                const relativePath = f.webkitRelativePath || f.originalFilename || f.newFilename;
-                const dest = path.join(streamingAssetsPath, relativePath);
-
-                // Ensure directory exists
-                await fs.mkdir(path.dirname(dest), { recursive: true });
-
-                // Copy the file
-                await fs.copyFile(file.filepath, dest);
-            }
-
-            const buildFileNames = buildFiles.map((file) => file.originalFilename || '');
-            const buildName = buildFileNames.length > 0 ? buildFileNames[0].split('.')[0] : '';
-
-            const description = Array.isArray(fields.description) ? fields.description[0] : fields.description || '';
-            const details = Array.isArray(fields.details) ? fields.details[0] : fields.details || '';
-
-            // Insert or overwrite DB (no streamingAssets update here)
-            await insertGame({
-                id: parseInt(gameId),
-                buildName,
-                title: gameName,
-                description,
-                image: imageUrls,
-                category: categories,
-                video: videoUrl,
-                details,
-                publisher
-            });
-
-            return res.status(200).json({ success: true });
-        } catch (e) {
-            console.error('Error during upload:', e);
-            return res.status(500).json({ error: 'Upload failed' });
-        }
+    // Redirect to Unity endpoint for backward compatibility
+    return res.status(301).json({ 
+        message: 'This endpoint is deprecated. Please use /api/publish/unity for Unity builds or /api/publish/html for HTML games.',
+        redirect: '/api/publish/unity'
     });
 }
diff --git a/pages/api/publish/html.ts b/pages/api/publish/html.ts
new file mode 100644
index 0000000..1275206
--- /dev/null
+++ b/pages/api/publish/html.ts
@@ -0,0 +1,158 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import formidable, { IncomingForm } from 'formidable';
+import fs from 'fs/promises';
+import fssync from 'fs';
+import path from 'path';
+import { insertGame } from '@/lib/db';
+
+export const config = {
+    api: {
+        bodyParser: false,
+    },
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        return res.status(405).json({ error: 'Method not allowed' });
+    }
+
+    const form = new IncomingForm({ multiples: true, keepExtensions: true });
+
+    form.parse(req, async (err, fields, files) => {
+        if (err) {
+            console.error('Form parse error:', err);
+            return res.status(500).json({ error: 'Failed to parse form' });
+        }
+
+        try {
+            const gameId = Array.isArray(fields.gameId) ? fields.gameId[0] : fields.gameId || '';
+            const gameName = Array.isArray(fields.gameName) ? fields.gameName[0] : fields.gameName || '';
+            const categoryStr = Array.isArray(fields.categories) ? fields.categories[0] : fields.categories || '';
+            const forceField = fields.force;
+            const force = Array.isArray(forceField) ? forceField[0] === 'true' : forceField === 'true';
+            const categories = categoryStr.split(',').map((c) => c.trim()).filter(Boolean);
+            const publisher = Array.isArray(fields.publisher) ? fields.publisher[0] : fields.publisher || '';
+                        
+            if (!gameId || !gameName) {
+                return res.status(400).json({ error: 'Missing required fields' });
+            }
+
+            const basePath = path.join(process.cwd(), 'public', 'games', gameId);
+            const previewPath = path.join(basePath, 'Previews');
+            const videoPath = path.join(basePath, 'Videos');
+
+            // Handle duplicate build
+            if (fssync.existsSync(basePath)) {
+                if (!force) {
+                    return res.status(409).json({ conflict: true, message: 'Build already exists' });
+                }
+
+                // Delete existing content
+                await fs.rm(basePath, { recursive: true, force: true });
+            }
+
+            // Recreate folders
+            for (const dir of [basePath, previewPath, videoPath]) {
+                await fs.mkdir(dir, { recursive: true });
+            }
+
+            // Normalize files from form-data
+            const htmlFiles = Array.isArray(files.htmlFiles) ? files.htmlFiles : files.htmlFiles ? [files.htmlFiles] : [];
+            const previewFiles = Array.isArray(files.gameImages) ? files.gameImages : files.gameImages ? [files.gameImages] : [];
+            const videoFile = Array.isArray(files.gameVideo) ? files.gameVideo[0] : files.gameVideo;
+
+            let imageUrls: string[] = [];
+            let videoUrl = '';
+
+            // Validate that we have HTML files
+            if (htmlFiles.length === 0) {
+                return res.status(400).json({ error: 'No HTML game files provided' });
+            }
+
+            // Check if index.html exists
+            const hasIndexHtml = htmlFiles.some(file => {
+                const filename = file.originalFilename || file.newFilename || '';
+                return filename.endsWith('index.html') || filename.endsWith('/index.html');
+            });
+
+            if (!hasIndexHtml) {
+                return res.status(400).json({ 
+                    error: 'HTML game must include an index.html file as the entry point' 
+                });
+            }
+
+            // Detect folder name for HTML games
+            let folderName = null;
+            const firstFile = htmlFiles[0];
+            if (firstFile && firstFile.originalFilename && firstFile.originalFilename.includes('/')) {
+                const pathParts = firstFile.originalFilename.split('/');
+                folderName = pathParts[0]; // Get the root folder name
+            }
+
+            // Save HTML game files (index.html, CSS, JS, assets, etc.)
+            for (const file of htmlFiles) {
+                if (!file) continue;
+                
+                // For folder uploads, preserve the relative path structure
+                // For individual files, just use the filename
+                let relativePath = '';
+                
+                if (file.originalFilename && file.originalFilename.includes('/')) {
+                    // This is from a folder upload - preserve the full relative path
+                    relativePath = file.originalFilename;
+                } else {
+                    // This is an individual file upload
+                    relativePath = file.originalFilename || file.newFilename || '';
+                }
+                
+                const dest = path.join(basePath, relativePath);
+                
+                // Ensure directory exists
+                await fs.mkdir(path.dirname(dest), { recursive: true });
+                await fs.copyFile(file.filepath, dest);
+            }
+
+            // Save preview images
+            for (let i = 0; i < previewFiles.length; i++) {
+                const file = previewFiles[i];
+                if (!file) continue;
+                const ext = path.extname(file.originalFilename || '.png');
+                const destPath = path.join(previewPath, `${i + 1}${ext}`);
+                await fs.copyFile(file.filepath, destPath);
+                imageUrls.push(`/games/${gameId}/Previews/${i + 1}${ext}`);
+            }
+
+            // Save video file
+            if (videoFile) {
+                const ext = path.extname(videoFile.originalFilename || '.mp4');
+                const filename = `${gameName.replace(/\s+/g, '')}${ext}`;
+                const dest = path.join(videoPath, filename);
+                await fs.copyFile(videoFile.filepath, dest);
+                videoUrl = `/games/${gameId}/Videos/${filename}`;
+            }
+
+            const description = Array.isArray(fields.description) ? fields.description[0] : fields.description || '';
+            const details = Array.isArray(fields.details) ? fields.details[0] : fields.details || '';
+
+            // Insert or overwrite DB
+            await insertGame({
+                id: parseInt(gameId),
+                buildName: 'index', // HTML games use index.html as entry point
+                title: gameName,
+                description,
+                image: imageUrls,
+                category: categories,
+                video: videoUrl,
+                details,
+                publisher,
+                type: 'html',
+                folderName: folderName
+            });
+
+            return res.status(200).json({ success: true });
+        } catch (e) {
+            console.error('Error during upload:', e);
+            return res.status(500).json({ error: 'Upload failed' });
+        }
+    });
+}
\ No newline at end of file
diff --git a/pages/api/publish/unity.ts b/pages/api/publish/unity.ts
new file mode 100644
index 0000000..9cfea3e
--- /dev/null
+++ b/pages/api/publish/unity.ts
@@ -0,0 +1,147 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import formidable, { IncomingForm } from 'formidable';
+import fs from 'fs/promises';
+import fssync from 'fs';
+import path from 'path';
+import { insertGame } from '@/lib/db';
+
+export const config = {
+    api: {
+        bodyParser: false,
+    },
+};
+
+interface FormidableFileWithRelativePath extends formidable.File {
+    webkitRelativePath?: string;
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        return res.status(405).json({ error: 'Method not allowed' });
+    }
+
+    const form = new IncomingForm({ multiples: true, keepExtensions: true });
+
+    form.parse(req, async (err, fields, files) => {
+        if (err) {
+            console.error('Form parse error:', err);
+            return res.status(500).json({ error: 'Failed to parse form' });
+        }
+
+        try {
+            const gameId = Array.isArray(fields.gameId) ? fields.gameId[0] : fields.gameId || '';
+            const gameName = Array.isArray(fields.gameName) ? fields.gameName[0] : fields.gameName || '';
+            const categoryStr = Array.isArray(fields.categories) ? fields.categories[0] : fields.categories || '';
+            const forceField = fields.force;
+            const force = Array.isArray(forceField) ? forceField[0] === 'true' : forceField === 'true';
+            const categories = categoryStr.split(',').map((c) => c.trim()).filter(Boolean);
+            const publisher = Array.isArray(fields.publisher) ? fields.publisher[0] : fields.publisher || '';
+                        
+            if (!gameId || !gameName) {
+                return res.status(400).json({ error: 'Missing required fields' });
+            }
+
+            const basePath = path.join(process.cwd(), 'public', 'games', gameId);
+            const buildPath = path.join(basePath, 'Build');
+            const previewPath = path.join(basePath, 'Previews');
+            const videoPath = path.join(basePath, 'Videos');
+            const streamingAssetsPath = path.join(basePath, 'StreamingAssets');
+
+            // Handle duplicate build
+            if (fssync.existsSync(basePath)) {
+                if (!force) {
+                    return res.status(409).json({ conflict: true, message: 'Build already exists' });
+                }
+
+                // Delete existing content
+                await fs.rm(basePath, { recursive: true, force: true });
+            }
+
+            // Recreate folders
+            for (const dir of [buildPath, previewPath, videoPath, streamingAssetsPath]) {
+                await fs.mkdir(dir, { recursive: true });
+            }
+
+            // Normalize files from form-data
+            const buildFiles = Array.isArray(files.files) ? files.files : files.files ? [files.files] : [];
+            const previewFiles = Array.isArray(files.gameImages) ? files.gameImages : files.gameImages ? [files.gameImages] : [];
+            const videoFile = Array.isArray(files.gameVideo) ? files.gameVideo[0] : files.gameVideo;
+
+            // StreamingAssets files
+            const streamingAssetsFiles = Array.isArray(files.streamingAssets)
+                ? files.streamingAssets
+                : files.streamingAssets
+                    ? [files.streamingAssets]
+                    : [];
+
+            let imageUrls: string[] = [];
+            let videoUrl = '';
+
+            // Save build files
+            for (const file of buildFiles) {
+                if (!file) continue;
+                const dest = path.join(buildPath, file.originalFilename || '');
+                await fs.copyFile(file.filepath, dest);
+            }
+
+            // Save preview images
+            for (let i = 0; i < previewFiles.length; i++) {
+                const file = previewFiles[i];
+                if (!file) continue;
+                const ext = path.extname(file.originalFilename || '.png');
+                const destPath = path.join(previewPath, `${i + 1}${ext}`);
+                await fs.copyFile(file.filepath, destPath);
+                imageUrls.push(`/games/${gameId}/Previews/${i + 1}${ext}`);
+            }
+
+            // Save video file
+            if (videoFile) {
+                const ext = path.extname(videoFile.originalFilename || '.mp4');
+                const filename = `${gameName.replace(/\s+/g, '')}${ext}`;
+                const dest = path.join(videoPath, filename);
+                await fs.copyFile(videoFile.filepath, dest);
+                videoUrl = `/games/${gameId}/Videos/${filename}`;
+            }
+
+            // Save StreamingAssets files preserving folder structure
+            for (const file of streamingAssetsFiles) {
+                if (!file) continue;
+
+                const f = file as FormidableFileWithRelativePath;
+                const relativePath = f.webkitRelativePath || f.originalFilename || f.newFilename;
+                const dest = path.join(streamingAssetsPath, relativePath);
+
+                // Ensure directory exists
+                await fs.mkdir(path.dirname(dest), { recursive: true });
+
+                // Copy the file
+                await fs.copyFile(file.filepath, dest);
+            }
+
+            const buildFileNames = buildFiles.map((file) => file.originalFilename || '');
+            const buildName = buildFileNames.length > 0 ? buildFileNames[0].split('.')[0] : '';
+
+            const description = Array.isArray(fields.description) ? fields.description[0] : fields.description || '';
+            const details = Array.isArray(fields.details) ? fields.details[0] : fields.details || '';
+
+            // Insert or overwrite DB
+            await insertGame({
+                id: parseInt(gameId),
+                buildName,
+                title: gameName,
+                description,
+                image: imageUrls,
+                category: categories,
+                video: videoUrl,
+                details,
+                publisher,
+                type: 'unity'
+            });
+
+            return res.status(200).json({ success: true });
+        } catch (e) {
+            console.error('Error during upload:', e);
+            return res.status(500).json({ error: 'Upload failed' });
+        }
+    });
+}
\ No newline at end of file

From e955c13e23bdb20c9d89518c8c2e85075371d449 Mon Sep 17 00:00:00 2001
From: sabarishr-dev <sabarish.r@vinsinfo.com>
Date: Sun, 28 Sep 2025 18:17:47 +0530
Subject: [PATCH 2/4] ref: tailwind instead of css

---
 app/arena/[id]/page.tsx                    |  287 ++-
 app/arena/arena.module.css                 |  562 -----
 app/arena/page.tsx                         |  245 ++-
 app/arena/play-game/page.tsx               |   10 +-
 app/contribute/contibute.module.css        |  108 -
 app/contribute/page.tsx                    |  182 +-
 app/contribute/publish/page.tsx            |  967 ++++-----
 app/contribute/publish/publish.module.css  |  163 --
 app/coupon/redeem/coupon.module.css        |   72 -
 app/coupon/redeem/page.tsx                 |  374 ++--
 app/dashboard/dashboard.module.css         |  610 ------
 app/dashboard/page.tsx                     |  740 +++----
 app/globals.css                            |  116 +-
 app/layout.tsx                             |   12 +-
 app/leaderboard/leaderboard.module.css     |  138 --
 app/leaderboard/page.tsx                   |  222 +-
 app/page.tsx                               |   18 +-
 app/profile/page.tsx                       |  374 ++--
 app/profile/profile.module.css             |  319 ---
 components/Model.tsx                       |    2 +-
 components/auth/SignIn.tsx                 |   18 +-
 components/auth/auth.module.css            |   79 -
 components/dashboard/FriendsList.tsx       |   73 +
 components/dashboard/GoldenTickets.tsx     |   80 +
 components/dashboard/HeroSection.tsx       |   43 +
 components/dashboard/Inventory.tsx         |   69 +
 components/dashboard/PlayerStatsChart.tsx  |  180 ++
 components/dashboard/PlaytimeChart.tsx     |  119 ++
 components/dashboard/RecentActivity.tsx    |   70 +
 components/dashboard/Store.tsx             |  219 ++
 components/dashboard/VirtualCurrencies.tsx |  146 ++
 components/html/html-game-view.tsx         |   73 +-
 components/html/html-game.module.css       |   25 -
 components/popup/Popup.tsx                 |   47 +-
 components/popup/Timeout.tsx               |   19 +-
 components/publish/File.tsx                |   35 +-
 components/publish/Folder.tsx              |   39 +-
 components/publish/file.module.css         |   38 -
 components/sidebar/SideBar.tsx             |   24 +-
 components/sidebar/sidebar.module.css      |   95 -
 components/timer/PlayTimer.tsx             |   21 +-
 components/ui/SkeletonLoader.tsx           |  121 ++
 components/unity/game-view.tsx             |   13 +-
 components/unity/game.module.css           |   21 -
 lib/playfab/playfab.ts                     |   16 +-
 package-lock.json                          | 2152 +++++++++++++-------
 package.json                               |    5 +-
 postcss.config.js                          |    3 +-
 tailwind.config.js                         |   12 -
 tailwind.config.ts                         |   68 +
 50 files changed, 4771 insertions(+), 4673 deletions(-)
 delete mode 100644 app/arena/arena.module.css
 delete mode 100644 app/contribute/contibute.module.css
 delete mode 100644 app/contribute/publish/publish.module.css
 delete mode 100644 app/coupon/redeem/coupon.module.css
 delete mode 100644 app/dashboard/dashboard.module.css
 delete mode 100644 app/leaderboard/leaderboard.module.css
 delete mode 100644 app/profile/profile.module.css
 delete mode 100644 components/auth/auth.module.css
 create mode 100644 components/dashboard/FriendsList.tsx
 create mode 100644 components/dashboard/GoldenTickets.tsx
 create mode 100644 components/dashboard/HeroSection.tsx
 create mode 100644 components/dashboard/Inventory.tsx
 create mode 100644 components/dashboard/PlayerStatsChart.tsx
 create mode 100644 components/dashboard/PlaytimeChart.tsx
 create mode 100644 components/dashboard/RecentActivity.tsx
 create mode 100644 components/dashboard/Store.tsx
 create mode 100644 components/dashboard/VirtualCurrencies.tsx
 delete mode 100644 components/html/html-game.module.css
 delete mode 100644 components/publish/file.module.css
 delete mode 100644 components/sidebar/sidebar.module.css
 create mode 100644 components/ui/SkeletonLoader.tsx
 delete mode 100644 components/unity/game.module.css
 delete mode 100644 tailwind.config.js
 create mode 100644 tailwind.config.ts

diff --git a/app/arena/[id]/page.tsx b/app/arena/[id]/page.tsx
index 94c0889..40b3cdf 100644
--- a/app/arena/[id]/page.tsx
+++ b/app/arena/[id]/page.tsx
@@ -4,9 +4,8 @@ import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { useSession } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
-import styles from '../arena.module.css';
 import { usePlayTimeSession } from '@/context/PlayTimeContext';
-import Popup from '@/components/popup/Popup'; 
+import Popup from '@/components/popup/Popup';
 
 interface Game {
     id: number;
@@ -52,17 +51,6 @@ export default function GameDetailPage() {
         }
     }, [params?.id]);
 
-    if (status === 'loading' || loading) {
-        return (
-            <div className={styles.page}>
-                <header className={styles.pageHeader}>
-                    <h1 className={styles.pageTitle}>Loading Game</h1>
-                </header>
-                {/* ...loading skeleton UI... */}
-            </div>
-        );
-    }
-
     function handleOnClickPlay() {
         if (isExpired) {
             setPopup(true);
@@ -71,11 +59,72 @@ export default function GameDetailPage() {
         router.push(`/arena/play-game?Id=${game?.id}&Name=${game?.buildName}`);
     }
 
+    if (status === 'loading' || loading) {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+                {/* Header Skeleton */}
+                <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                        <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded w-1/3 animate-pulse"></div>
+                        <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-1/4 mt-2 animate-pulse"></div>
+                    </div>
+                </div>
+
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                        {/* Media Preview Skeleton */}
+                        <div className="lg:col-span-2">
+                            <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+                                <div className="aspect-video bg-slate-200 dark:bg-slate-700 rounded-lg animate-pulse mb-4"></div>
+                                <div className="flex space-x-2 justify-center">
+                                    {[...Array(3)].map((_, i) => (
+                                        <div key={i} className="w-3 h-3 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse"></div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Details Skeleton */}
+                        <div className="space-y-6">
+                            <div className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+                                <div className="space-y-4">
+                                    <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
+                                    <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4 animate-pulse"></div>
+                                    <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-1/2 animate-pulse"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     if (!session) return <SignIn />;
-    if (!game) return <div className={styles.page}>Game not found.</div>;
+
+    if (!game) {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="text-center">
+                    <div className="w-24 h-24 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <span className="text-4xl">😞</span>
+                    </div>
+                    <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">Game Not Found</h2>
+                    <p className="text-slate-600 dark:text-slate-400 mb-8">The game you're looking for doesn't exist or may have been removed.</p>
+                    <button
+                        onClick={() => router.push('/arena')}
+                        className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                    >
+                        Back to Arena
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className={styles.page}>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Popup */}
             {popup && (
                 <Popup
                     message="Your daily playtime has expired. Please come back tomorrow!"
@@ -84,97 +133,143 @@ export default function GameDetailPage() {
                 />
             )}
 
-            <header className={styles.pageHeader}>
-                <h1 className={styles.pageTitle}>{game.title}</h1>
-            </header>
-
-            <div className={styles.detailLayout}>
-                <div className={styles.previewContainer}>
-                    <div className={styles.previewMedia}>
-                        {activeIndex < game.image.length ? (
-                            <img
-                                src={game.image[activeIndex]}
-                                alt={`${game.title} preview ${activeIndex + 1}`}
-                                className={styles.previewImage}
-                            />
-                        ) : game.video ? (
-                            <video
-                                src={game.video}
-                                className={styles.previewVideo}
-                                autoPlay
-                                playsInline
-                                controls
-                            />
-                        ) : (
-                            <div className={styles.previewImage} style={{ 
-                                display: 'flex', 
-                                alignItems: 'center', 
-                                justifyContent: 'center',
-                                backgroundColor: '#f8f9fa',
-                                color: '#666'
-                            }}>
-                                No video available
-                            </div>
-                        )}
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">{game.title}</h1>
+                            <p className="text-slate-600 dark:text-slate-400 mt-2">by {game.publisher}</p>
+                        </div>
+                        <div className="flex items-center space-x-3">
+                            <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${game.type === 'unity'
+                                    ? 'bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300'
+                                    : 'bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300'
+                                }`}>
+                                {game.type === 'unity' ? 'Unity WebGL' : 'HTML Game'}
+                            </span>
+                        </div>
                     </div>
+                </div>
+            </div>
 
-                    <div className={styles.previewDots}>
-                        {game.image.map((_, index) => (
-                            <span
-                                key={`img-${index}`}
-                                className={`${styles.dot} ${activeIndex === index ? styles.activeDot : ''}`}
-                                onClick={() => setActiveIndex(index)}
-                            />
-                        ))}
-                        {game.video && (
-                            <span
-                                key="video"
-                                className={`${styles.dot} ${activeIndex === game.image.length ? styles.activeDot : ''}`}
-                                onClick={() => setActiveIndex(game.image.length)}
-                            />
-                        )}
-                    </div>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    {/* Media Preview */}
+                    <div className="lg:col-span-2">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <div className="aspect-video bg-slate-100 dark:bg-slate-700 rounded-lg overflow-hidden mb-4">
+                                {activeIndex < game.image.length ? (
+                                    <img
+                                        src={game.image[activeIndex]}
+                                        alt={`${game.title} preview ${activeIndex + 1}`}
+                                        className="w-full h-full object-cover"
+                                    />
+                                ) : game.video ? (
+                                    <video
+                                        src={game.video}
+                                        className="w-full h-full object-cover"
+                                        autoPlay
+                                        playsInline
+                                        controls
+                                    />
+                                ) : (
+                                    <div className="w-full h-full flex items-center justify-center text-slate-500 dark:text-slate-400">
+                                        <div className="text-center">
+                                            <span className="text-lg font-bold text-slate-500 dark:text-slate-400 mb-2 block">VIDEO</span>
+                                            <p>No video available</p>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
 
-                    <div>
-                        <h2 className={styles.sectionHeader}>Description</h2>
-                        <p>{game.description}</p>
-                    </div>
-                </div>
+                            {/* Media Navigation Dots */}
+                            <div className="flex justify-center space-x-2 mb-6">
+                                {game.image.map((_, index) => (
+                                    <button
+                                        key={`img-${index}`}
+                                        className={`w-3 h-3 rounded-full transition-colors duration-200 ${activeIndex === index
+                                                ? 'bg-blue-500'
+                                                : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
+                                            }`}
+                                        onClick={() => setActiveIndex(index)}
+                                    />
+                                ))}
+                                {game.video && (
+                                    <button
+                                        key="video"
+                                        className={`w-3 h-3 rounded-full transition-colors duration-200 ${activeIndex === game.image.length
+                                                ? 'bg-blue-500'
+                                                : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
+                                            }`}
+                                        onClick={() => setActiveIndex(game.image.length)}
+                                    />
+                                )}
+                            </div>
 
-                <div className={styles.detailsSection}>
-                    <h2 className={styles.sectionHeader}>Details</h2>
-                    <p>{game.details}</p>
-
-                    <h2 className={styles.sectionHeader}>Category</h2>
-                    <ul className={styles.categoryList}>
-                        {game.category.map((cat, index) => (
-                            <li key={index} className={styles.categoryItem}>
-                                {cat}
-                            </li>
-                        ))}
-                    </ul>
-
-                    <div>
-                        <h2 className={styles.sectionHeader}>Publisher</h2>
-                        <p className={styles.publisher}>{game.publisher}</p>
+                            {/* Game Description */}
+                            <div>
+                                <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-3">Description</h2>
+                                <p className="text-slate-600 dark:text-slate-400 leading-relaxed">{game.description}</p>
+                            </div>
+                        </div>
                     </div>
 
-                    <div>
-                        <h2 className={styles.sectionHeader}>Game Type</h2>
-                        <p className={styles.gameType}>
-                            {game.type === 'unity' ? '🎮 Unity WebGL' : '🌐 HTML Game'}
-                        </p>
-                    </div>
+                    {/* Game Details Sidebar */}
+                    <div className="space-y-6">
+                        {/* Play Button */}
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <button
+                                onClick={handleOnClickPlay}
+                                disabled={isExpired}
+                                className={`w-full py-4 rounded-lg font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg ${isExpired
+                                        ? 'bg-red-500 hover:bg-red-600 text-white cursor-not-allowed opacity-75'
+                                        : 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white'
+                                    }`}
+                            >
+                                {isExpired ? 'Playtime Expired' : 'Play Now'}
+                            </button>
 
-                    <div>
-                        <h2 className={styles.sectionHeader}>Options</h2>
-                        <div className={styles.controlButtonGroup}>
-                            <button className={styles.playButton} onClick={handleOnClickPlay}>Play ❌</button>
-                            <button className={styles.backButton} onClick={() => router.push('/arena')}>Back ⭕️</button>
+                            <button
+                                onClick={() => router.push('/arena')}
+                                className="w-full mt-3 py-3 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 rounded-lg font-medium transition-colors duration-200"
+                            >
+                                ← Back to Arena
+                            </button>
+                        </div>
+
+                        {/* Game Details */}
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Game Details</h2>
+                            <div className="space-y-4">
+                                <div>
+                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">Details</h3>
+                                    <p className="text-slate-700 dark:text-slate-300">{game.details}</p>
+                                </div>
+
+                                <div>
+                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Categories</h3>
+                                    <div className="flex flex-wrap gap-2">
+                                        {game.category.map((cat, index) => (
+                                            <span
+                                                key={index}
+                                                className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full text-sm font-medium"
+                                            >
+                                                {cat}
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">Publisher</h3>
+                                    <p className="text-slate-700 dark:text-slate-300 font-medium">{game.publisher}</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/arena/arena.module.css b/app/arena/arena.module.css
deleted file mode 100644
index 8001ac1..0000000
--- a/app/arena/arena.module.css
+++ /dev/null
@@ -1,562 +0,0 @@
-.page {
-    min-height: 100vh;
-    padding-left: 3rem;
-    padding-top: 2rem;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.pageTitle {
-    font-weight: 700;
-    color: #ffffff;
-    margin-bottom: .2rem;
-    user-select: none;
-}
-
-.info {
-    font-size: x-small;
-    color: rgba(255, 255, 255, 0.616);
-}
-
-.gamesList {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1.75rem;
-    overflow-y: auto;
-    max-height: 75vh;
-    padding-right: 0.5rem;
-}
-
-/* Updated game card layout */
-.gameCard {
-    position: relative;
-    height: 220px;
-    border-radius: 14px;
-    overflow: hidden;
-    cursor: pointer;
-    background-color: transparent;
-    user-select: none;
-}
-
-.imageWrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.gameImage {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-    filter: grayscale(.9) blur(1) brightness(0.5);
-    transition: filter 0.3s ease;
-}
-
-.gameCard:hover .gameImage {
-    filter: grayscale(0) blur(0) brightness(1);
-}
-
-.gameTitle {
-    position: absolute;
-    top: 70%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #e4e4e4;
-    text-align: center;
-    z-index: 2;
-    margin: 0;
-    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
-}
-
-.imageDots {
-    position: absolute;
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 6px;
-    z-index: 2;
-}
-
-.dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: #666;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.activeDot {
-    background-color: #8f67d9;
-}
-
-/* Loading skeletons */
-.skeletonCard {
-    background-color: #2a2a2a;
-    border-radius: 14px;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    cursor: default;
-    pointer-events: none;
-    user-select: none;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: -450px 0;
-    }
-
-    100% {
-        background-position: 450px 0;
-    }
-}
-
-.skeletonTitle,
-.skeletonImage {
-    background: linear-gradient(90deg,
-            #3a3a3a 25%,
-            #4b4b4b 37%,
-            #3a3a3a 63%);
-    background-size: 400% 100%;
-    animation: shimmer 1.4s ease infinite;
-    border-radius: 8px;
-}
-
-.skeletonTitle {
-    width: 60%;
-    height: 20px;
-    margin-bottom: 0.75rem;
-}
-
-.skeletonImage {
-    width: 100%;
-    height: 160px;
-    border-radius: 14px;
-}
-
-.gamesList::-webkit-scrollbar {
-    width: 8px;
-}
-
-.gamesList::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.gamesList::-webkit-scrollbar-thumb {
-    background-color: rgba(143, 103, 217, 0.6);
-    border-radius: 4px;
-}
-
-/* Optional focus styling */
-.gameCard:focus-visible {
-    outline: 3px solid #8f67d9;
-    outline-offset: 2px;
-}
-
-
-.detailImage {
-    width: 100%;
-    max-width: 600px;
-    border-radius: 14px;
-    margin: 1rem 0;
-    object-fit: cover;
-}
-
-.videoWrapper {
-    position: relative;
-    padding-bottom: 56.25%;
-    padding-top: 25px;
-    height: 0;
-    margin-top: 1rem;
-}
-
-.videoWrapper iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 14px;
-}
-
-.gamesList::-webkit-scrollbar {
-    width: 8px;
-}
-
-.gamesList::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.gamesList::-webkit-scrollbar-thumb {
-    background-color: rgba(143, 103, 217, 0.6);
-    border-radius: 4px;
-}
-
-.gameCard:focus-visible {
-    outline: 3px solid #8f67d9;
-    outline-offset: 2px;
-}
-
-
-.skeletonCard {
-    background-color: #2a2a2a;
-    border-radius: 14px;
-    padding: 1rem 1rem 1rem 1rem;
-    margin-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    cursor: default;
-    pointer-events: none;
-    user-select: none;
-}
-
-@keyframes shimmer {
-    0% {
-        background-position: -450px 0;
-    }
-
-    100% {
-        background-position: 450px 0;
-    }
-}
-
-.skeletonTitle,
-.skeletonDescription,
-.skeletonImage,
-.skeletonDetails,
-.skeletonVideo {
-    background: linear-gradient(90deg,
-            #3a3a3a 25%,
-            #4b4b4b 37%,
-            #3a3a3a 63%);
-    background-size: 400% 100%;
-    animation: shimmer 1.4s ease infinite;
-    border-radius: 8px;
-}
-
-.skeletonTitle {
-    width: 60%;
-    height: 20px;
-    margin-bottom: 0.75rem;
-}
-
-.skeletonDetails {
-    width: 90%;
-    height: 14px;
-    margin-bottom: 1.5rem;
-}
-
-.skeletonImage {
-    width: 100%;
-    height: 160px;
-    border-radius: 14px;
-}
-
-.skeletonVideo {
-    width: 100%;
-    height: 315px;
-    border-radius: 14px;
-    margin-top: 1rem;
-}
-
-
-.pageHeader {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-}
-
-
-.pageHeader .pageTitle {
-    font-weight: 700;
-    color: #ccc;
-    margin: 0;
-    flex-grow: 1;
-}
-
-.skeletonButton {
-    width: 150px;
-    height: 40px;
-    border-radius: 8px;
-    margin-bottom: 1rem;
-    background: linear-gradient(90deg, #3a3a3a 25%, #4b4b4b 37%, #3a3a3a 63%);
-    background-size: 400% 100%;
-    animation: shimmer 1.4s ease infinite;
-}
-
-
-.imageScroll {
-    display: flex;
-    overflow-x: auto;
-    gap: 1rem;
-    padding-bottom: 1rem;
-    margin-top: 1rem;
-}
-
-.previewImage {
-    flex: 0 0 auto;
-    width: 300px;
-    height: 180px;
-    object-fit: cover;
-    border-radius: 12px;
-    transition: transform 0.3s ease;
-}
-
-.previewImage:hover {
-    transform: scale(1.05);
-}
-
-.imageScroll::-webkit-scrollbar {
-    height: 8px;
-}
-
-.imageScroll::-webkit-scrollbar-thumb {
-    background-color: rgba(143, 103, 217, 0.6);
-    border-radius: 4px;
-}
-
-
-.imageDots {
-    display: flex;
-    justify-content: center;
-    gap: 6px;
-    margin-bottom: 0.5rem;
-}
-
-.dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: #666;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.activeDot {
-    background-color: #8f67d9;
-}
-
-.previewContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-    margin: 1rem 0;
-}
-
-.previewMedia {
-    width: 100%;
-    max-width: 600px;
-    height: 340px;
-    position: relative;
-    border-radius: 12px;
-    overflow: hidden;
-    background: black;
-}
-
-.previewImage,
-.previewVideo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 12px;
-}
-
-.previewDots {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-}
-
-.dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: #666;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.activeDot {
-    background-color: #8f67d9;
-}
-
-
-.pageHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.detailLayout {
-    display: flex;
-    flex-direction: row;
-    gap: 2rem;
-    flex-wrap: wrap;
-}
-
-.previewContainer {
-    flex: 1;
-    min-width: 300px;
-    max-width: 600px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.previewMedia {
-    width: 100%;
-    height: 340px;
-    position: relative;
-    border-radius: 12px;
-    overflow: hidden;
-    background: black;
-}
-
-.previewImage,
-.previewVideo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 12px;
-}
-
-.previewDots {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-}
-
-.dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: #666;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.activeDot {
-    background-color: #8f67d9;
-}
-
-.detailsSection {
-    flex: 1;
-    min-width: 300px;
-    max-width: 600px;
-    font-size: 1rem;
-    color: #ccc;
-    line-height: 1.6;
-}
-
-.sectionHeader {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #ffffff;
-    margin-top: 2rem;
-    margin-bottom: 0.5rem;
-}
-
-.categoryList {
-    list-style: none;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.categoryItem {
-    background-color: #2a2a2a;
-    padding: 0.4rem 0.75rem;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    color: #ccc;
-    border: 1px solid #444;
-}
-
-.publisher {
-    width: max-content;
-    background-color: #0245ff81;
-    padding: 0.4rem 0.75rem;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-weight: 700;
-    color: #ccc;
-    border: none;
-}
-
-.controlButtonGroup {
-    width: max-content;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    gap: 1rem;
-}
-
-.playButton {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: white;
-    background-color: #004aaa41;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.playButton:hover {
-    background-color: #004aaa;
-}
-
-.backButton {
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: white;
-    background-color: rgba(255, 0, 0, 0.151);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.backButton:hover {
-    color: #ffffff;
-    background-color: #aa002b;
-}
-
-
-.skeletonCategory {
-    width: 100px;
-    height: 24px;
-    border-radius: 8px;
-    background: linear-gradient(90deg, #3a3a3a 25%, #4b4b4b 37%, #3a3a3a 63%);
-    background-size: 400% 100%;
-    animation: shimmer 1.4s ease infinite;
-    margin-bottom: 0.5rem;
-}
-
-
-
-.skeletonPlayButton {
-    width: 120px;
-    height: 40px;
-    border-radius: 8px;
-    background: linear-gradient(90deg, #3a3a3a 25%, #4b4b4b 37%, #3a3a3a 63%);
-    background-size: 400% 100%;
-    animation: shimmer 1.4s ease infinite;
-    margin-top: 1.5rem;
-}
\ No newline at end of file
diff --git a/app/arena/page.tsx b/app/arena/page.tsx
index e99a6ec..af13e51 100644
--- a/app/arena/page.tsx
+++ b/app/arena/page.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import styles from './arena.module.css';
 import { useSession } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
 
@@ -20,9 +19,10 @@ export default function Arena() {
     const [games, setGames] = useState<Game[]>([]);
     const [loading, setLoading] = useState(true);
     const [activeImageIndex, setActiveImageIndex] = useState<{ [key: number]: number }>({});
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedCategory, setSelectedCategory] = useState<string>('all');
     const { data: session, status } = useSession();
 
-
     useEffect(() => {
         const fetchGames = async () => {
             try {
@@ -55,7 +55,7 @@ export default function Arena() {
                         ...prev,
                         [game.id]: (prev[game.id] + 1) % game.image.length,
                     }));
-                }, 3000); // Change image every 3 seconds
+                }, 3000);
             }
         });
 
@@ -68,74 +68,207 @@ export default function Arena() {
         setActiveImageIndex((prev) => ({ ...prev, [gameId]: index }));
     };
 
+    if (status === 'loading') {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Arena...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     if (!session) return <SignIn />;
 
+    // Get all unique categories
+    const allCategories = Array.from(new Set(games.flatMap(game => game.category)));
+    
+    // Filter games based on search and category
+    const filteredGames = games.filter(game => {
+        const matchesSearch = game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                            game.description.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesCategory = selectedCategory === 'all' || game.category.includes(selectedCategory);
+        return matchesSearch && matchesCategory;
+    });
 
     if (loading) {
         return (
-            <div className={styles.page}>
-                <h1 className={styles.pageTitle}>Arena</h1>
-                <div className={styles.gamesList}>
-                    {[...Array(1)].map((_, i) => (
-                        <div key={i} className={styles.skeletonCard}>
-                            <div className={styles.skeletonTitle}></div>
-                            <div className={styles.skeletonImage}></div>
-                        </div>
-                    ))}
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+                {/* Header */}
+                <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                        <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Arena</h1>
+                        <p className="text-slate-600 dark:text-slate-400 mt-2">Discover and play amazing games</p>
+                    </div>
+                </div>
+
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                        {[...Array(8)].map((_, i) => (
+                            <div key={i} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+                                <div className="h-48 bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
+                                <div className="p-4 space-y-3">
+                                    <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
+                                    <div className="h-3 bg-slate-200 dark:bg-slate-700 rounded w-3/4 animate-pulse"></div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             </div>
         );
     }
 
     return (
-        <div className={styles.page}>
-            <h1 className={styles.pageTitle}>Arena <p className={styles.info}># games</p> </h1>
-
-            <div className={styles.gamesList}>
-                {games.map((game) => {
-                    const images = Array.isArray(game.image) ? game.image : [game.image];
-                    const currentIndex = activeImageIndex[game.id] ?? 0;
-
-                    return (
-                        <div
-                            key={game.id}
-                            className={styles.gameCard}
-                            tabIndex={0}
-                            role="button"
-                            onClick={() => router.push(`/arena/${game.id}`)}
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                        <div>
+                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Arena</h1>
+                            <p className="text-slate-600 dark:text-slate-400 mt-2">
+                                Discover and play amazing games • {games.length} games available
+                            </p>
+                        </div>
+                        <div className="mt-4 sm:mt-0">
+                            <span className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full text-sm font-medium">
+                                Gaming Hub
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* Filters */}
+                <div className="flex flex-col sm:flex-row gap-4 mb-8">
+                    {/* Search */}
+                    <div className="flex-1">
+                        <input
+                            type="text"
+                            placeholder="Search games..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                        />
+                    </div>
+                    
+                    {/* Category Filter */}
+                    <div className="sm:w-48">
+                        <select
+                            value={selectedCategory}
+                            onChange={(e) => setSelectedCategory(e.target.value)}
+                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
                         >
+                            <option value="all">All Categories</option>
+                            {allCategories.map(category => (
+                                <option key={category} value={category}>{category}</option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+                {/* Games Grid */}
+                {filteredGames.length === 0 ? (
+                    <div className="text-center py-16">
+                        <div className="w-24 h-24 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-6">
+                                        <span className="text-xl font-bold text-slate-500 dark:text-slate-400">GAMES</span>
+                        </div>
+                        <h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                            {searchTerm || selectedCategory !== 'all' ? 'No games found' : 'No games available'}
+                        </h3>
+                        <p className="text-slate-600 dark:text-slate-400">
+                            {searchTerm || selectedCategory !== 'all' 
+                                ? 'Try adjusting your search or filter criteria'
+                                : 'Check back later for new games!'}
+                        </p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                        {filteredGames.map((game) => {
+                            const images = Array.isArray(game.image) ? game.image : [game.image];
+                            const currentIndex = activeImageIndex[game.id] ?? 0;
 
-                            <div key={game.id} className={styles.gameCard} onClick={() => router.push(`/arena/${game.id}`)} tabIndex={0}>
-                                <div className={styles.imageWrapper}>
-                                    <img
-                                        src={images[currentIndex]}
-                                        alt={`${game.title} preview`}
-                                        className={styles.gameImage}
-                                    />
-                                    <h3 className={styles.gameTitle}>{game.title}</h3>
-                                    <div className={styles.imageDots}>
-                                        {images.map((_, index) => (
-                                            <span
-                                                key={index}
-                                                className={`${styles.dot} ${currentIndex === index ? styles.activeDot : ''}`}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    handleDotClick(game.id, index);
-                                                }}
-                                            />
-                                        ))}
+                            return (
+                                <div
+                                    key={game.id}
+                                    className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-lg hover:border-slate-300 dark:hover:border-slate-600 transition-all duration-300 cursor-pointer group"
+                                    onClick={() => router.push(`/arena/${game.id}`)}
+                                >
+                                    {/* Game Image */}
+                                    <div className="relative h-48 overflow-hidden">
+                                        <img
+                                            src={images[currentIndex]}
+                                            alt={`${game.title} preview`}
+                                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                                        />
+                                        
+                                        {/* Image Indicators */}
+                                        {images.length > 1 && (
+                                            <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex gap-1">
+                                                {images.map((_, index) => (
+                                                    <button
+                                                        key={index}
+                                                        className={`w-2 h-2 rounded-full transition-colors duration-200 ${
+                                                            currentIndex === index 
+                                                                ? 'bg-white' 
+                                                                : 'bg-white/50 hover:bg-white/75'
+                                                        }`}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            handleDotClick(game.id, index);
+                                                        }}
+                                                    />
+                                                ))}
+                                            </div>
+                                        )}
+
+                                        {/* Play Overlay */}
+                                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300 flex items-center justify-center">
+                                            <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                                <div className="w-16 h-16 bg-white/90 dark:bg-slate-800/90 rounded-full flex items-center justify-center">
+                                                    <span className="text-2xl font-bold">PLAY</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    {/* Game Info */}
+                                    <div className="p-4">
+                                        <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-2 line-clamp-1">
+                                            {game.title}
+                                        </h3>
+                                        <p className="text-slate-600 dark:text-slate-400 text-sm mb-3 line-clamp-2">
+                                            {game.description}
+                                        </p>
+                                        
+                                        {/* Categories and Publisher */}
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex flex-wrap gap-1">
+                                                {game.category.slice(0, 2).map((cat, index) => (
+                                                    <span
+                                                        key={index}
+                                                        className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-medium"
+                                                    >
+                                                        {cat}
+                                                    </span>
+                                                ))}
+                                            </div>
+                                            <span className="text-xs text-slate-500 dark:text-slate-400">
+                                                by {game.publisher}
+                                            </span>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <img
-                                src={images[currentIndex]}
-                                alt={`${game.title} preview`}
-                                className={styles.gameImage}
-                            />
-                        </div>
-                    );
-                })}
+                            );
+                        })}
+                    </div>
+                )}
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/arena/play-game/page.tsx b/app/arena/play-game/page.tsx
index 2f1bee0..37978f4 100644
--- a/app/arena/play-game/page.tsx
+++ b/app/arena/play-game/page.tsx
@@ -43,10 +43,7 @@ const PlayGamePage: React.FC = () => {
 
     if (loading) {
         return (
-            <div
-                className="aspect-video bg-white rounded-lg flex items-center justify-center"
-                style={{ width: "100%", height: "100vh" }}
-            >
+            <div className="w-full h-screen bg-white rounded-lg flex items-center justify-center">
                 Loading game...
             </div>
         );
@@ -54,10 +51,7 @@ const PlayGamePage: React.FC = () => {
 
     if (!game) {
         return (
-            <div
-                className="aspect-video bg-white rounded-lg flex items-center justify-center"
-                style={{ width: "100%", height: "100vh" }}
-            >
+            <div className="w-full h-screen bg-white rounded-lg flex items-center justify-center">
                 Game not found
             </div>
         );
diff --git a/app/contribute/contibute.module.css b/app/contribute/contibute.module.css
deleted file mode 100644
index 4c4476b..0000000
--- a/app/contribute/contibute.module.css
+++ /dev/null
@@ -1,108 +0,0 @@
-.wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 90vh;
-    padding: 2rem;
-    gap: 2rem;
-    animation: fadeIn 1s ease-in-out;
-}
-
-.right {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.left {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-
-.content {
-    max-width: 500px;
-    text-align: left;
-}
-
-.heading {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-}
-
-.paragraph {
-    font-size: 0.9rem;
-    line-height: 1.6;
-    color: #444;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.logoContainer {
-    position: relative;
-    display: inline-block;
-}
-
-.logo {
-    max-height: 400px;
-    transition: transform 0.3s ease;
-}
-
-.logo:hover {
-    transform: scale(1.1) rotate(2deg);
-}
-
-.arenaLogo {
-    position: absolute;
-    bottom: 30px;
-    right: 30px;
-    max-width: 80px;
-    transition: transform 0.3s ease;
-}
-
-.arenaLogo:hover {
-    transform: scale(1.1) rotate(2deg);
-}
-
-.arenaLogo img {
-    width: 100%;
-    height: auto;
-}
-
-.addGame {
-    background-color: #a3a5b133;
-    color: #e6e6e6;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    font-size: .8rem;
-    font-weight: 800;
-    border-radius: 0.75rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
-}
-
-.addGame:hover {
-    background-color: #5334da;
-    box-shadow: 0 0 0.75rem rgba(170, 170, 163, 0.486);
-    transform: scale(1.05);
-}
-
-.addGame:active {
-    transform: scale(0.97);
-    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.4);
-    /* 2px 6px */
-}
\ No newline at end of file
diff --git a/app/contribute/page.tsx b/app/contribute/page.tsx
index 05a2064..848d547 100644
--- a/app/contribute/page.tsx
+++ b/app/contribute/page.tsx
@@ -1,9 +1,7 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import styles from './contibute.module.css';
 
 export default function Contribute() {
-
     const router = useRouter();
 
     const HandlePublish = () => {
@@ -11,60 +9,140 @@ export default function Contribute() {
     }
 
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.left}>
-                <a href="https://github.com/r-sabarish/Arena" target="_blank" rel="noopener noreferrer">
-                    <div className={styles.logoContainer}>
-                        <img className={styles.logo} src="/icons/logo.png" alt="Arena Logo" />
-                    </div>
-                </a>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Contribute</h1>
+                    <p className="text-slate-600 dark:text-slate-400 mt-2">Join our community and help build the future of Arena</p>
+                </div>
             </div>
 
-            <div className={styles.right}>
-                <div className={styles.content}>
-                    <h1 className={styles.heading}>Be a Contributer 🏅</h1>
-
-                    <p className={styles.paragraph}>
-                        <strong>Arena</strong> is an open-source platform that makes it easy and fun for office teams to play games together online.
-                    </p>
-
-                    <p className={styles.paragraph}>
-                        Combining robust backend services with engaging gameplay, Arena delivers a smooth, interactive experience directly in your browser.
-                    </p>
-
-                    <br />
-
-                    <p className={styles.paragraph}>
-                        🔹 <strong>Website & Authentication</strong>: Built with <strong>Next.js</strong>, featuring secure sign-in powered by <strong>NextAuth</strong> and <strong>Azure AD</strong> (via Azure Entra OpenID).
-                    </p>
-
-                    <p className={styles.paragraph}>
-                        🔹 <strong>Player Progress & Leaderboards</strong>: Managed through <strong>PlayFab</strong>, tracking stats, achievements, leaderboards, and virtual currencies.
-                    </p>
-
-                    <p className={styles.paragraph}>
-                        🔹 <strong>Game Experience</strong>: Developed in <strong>Unity WebGL</strong>, supporting both single-player and multiplayer game modes.
-                    </p>
-
-                    <p className={styles.paragraph}>
-                        🔹 <strong>Real-Time Multiplayer</strong>: Enabled by <strong>Photon Fusion 2</strong> for seamless multiplayer interactions.
-                    </p>
-
-                    <br />
-
-                    <p className={styles.paragraph}>
-                        Join the Arena community and be part of building a fun, open-source platform for team gaming.
-                    </p>
-
-                    <p className={styles.paragraph}>
-                        The project is open and maintained on <a href="https://github.com/r-sabarish/Arena" target="_blank" rel="noopener noreferrer"><u>GitHub</u></a>.
-                    </p>
-
-                    <br />
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    {/* Left Side - Logo and GitHub */}
+                    <div className="text-center lg:text-left">
+                        <a 
+                            href="https://github.com/r-sabarish/Arena" 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="inline-block"
+                        >
+                            <div className="group relative">
+                                <div className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-xl"></div>
+                                <div className="relative bg-white dark:bg-slate-800 p-8 rounded-full shadow-xl border border-slate-200 dark:border-slate-700 transition-all duration-300 group-hover:scale-105">
+                                    <img 
+                                        src="/icons/logo.png" 
+                                        alt="Arena Logo" 
+                                        className="w-32 h-32 mx-auto"
+                                    />
+                                </div>
+                            </div>
+                        </a>
+                        
+                        <div className="mt-8">
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+                                Open Source Project
+                            </h2>
+                            <a 
+                                href="https://github.com/r-sabarish/Arena" 
+                                target="_blank" 
+                                rel="noopener noreferrer"
+                                className="inline-flex items-center space-x-2 bg-gray-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-gray-200 text-white dark:text-gray-900 px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                            >
+                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
+                                </svg>
+                                <span>View on GitHub</span>
+                            </a>
+                        </div>
+                    </div>
 
-                    <button className={styles.addGame} onClick={() => HandlePublish()}>Publish a Game 🎯</button>
+                    {/* Right Side - Content */}
+                    <div className="space-y-6">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
+                                Be a Contributor
+                            </h1>
+
+                            <div className="space-y-4 text-slate-700 dark:text-slate-300">
+                                <p>
+                                    <strong className="text-slate-900 dark:text-slate-100">Arena</strong> is an open-source platform that makes it easy and fun for office teams to play games together online.
+                                </p>
+
+                                <p>
+                                    Combining robust backend services with engaging gameplay, Arena delivers a smooth, interactive experience directly in your browser.
+                                </p>
+                            </div>
+                        </div>
+
+                        {/* Tech Stack */}
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Tech Stack</h3>
+                            
+                            <div className="space-y-3">
+                                <div className="flex items-start space-x-3">
+                                    <span className="text-blue-500 mt-1 font-bold">•</span>
+                                    <div>
+                                        <strong className="text-slate-900 dark:text-slate-100">Website & Authentication:</strong>
+                                        <span className="text-slate-600 dark:text-slate-400"> Built with Next.js, featuring secure sign-in powered by NextAuth and Azure AD</span>
+                                    </div>
+                                </div>
+                                
+                                <div className="flex items-start space-x-3">
+                                    <span className="text-purple-500 mt-1 font-bold">•</span>
+                                    <div>
+                                        <strong className="text-slate-900 dark:text-slate-100">Player Progress & Leaderboards:</strong>
+                                        <span className="text-slate-600 dark:text-slate-400"> Managed through PlayFab, tracking stats, achievements, and virtual currencies</span>
+                                    </div>
+                                </div>
+                                
+                                <div className="flex items-start space-x-3">
+                                    <span className="text-green-500 mt-1 font-bold">•</span>
+                                    <div>
+                                        <strong className="text-slate-900 dark:text-slate-100">Game Experience:</strong>
+                                        <span className="text-slate-600 dark:text-slate-400"> Developed in Unity WebGL, supporting both single-player and multiplayer modes</span>
+                                    </div>
+                                </div>
+                                
+                                <div className="flex items-start space-x-3">
+                                    <span className="text-orange-500 mt-1 font-bold">•</span>
+                                    <div>
+                                        <strong className="text-slate-900 dark:text-slate-100">Real-Time Multiplayer:</strong>
+                                        <span className="text-slate-600 dark:text-slate-400"> Enabled by Photon Fusion 2 for seamless multiplayer interactions</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Call to Action */}
+                        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/50 dark:to-purple-950/50 rounded-xl border border-blue-200 dark:border-blue-800 p-6">
+                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Ready to Contribute?</h3>
+                            <p className="text-slate-600 dark:text-slate-400 mb-4">
+                                Whether you're a developer, designer, or game creator, there are many ways to contribute to Arena!
+                            </p>
+                            
+                            <div className="flex flex-col sm:flex-row gap-3">
+                                <button
+                                    onClick={HandlePublish}
+                                    className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg"
+                                >
+                                    Publish Your Game
+                                </button>
+                                
+                                <a
+                                    href="https://github.com/r-sabarish/Arena/issues"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex-1 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 px-6 py-3 rounded-lg font-medium transition-colors duration-200 text-center"
+                                >
+                                    Report Issues
+                                </a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/contribute/publish/page.tsx b/app/contribute/publish/page.tsx
index 78f738e..4321fa2 100644
--- a/app/contribute/publish/page.tsx
+++ b/app/contribute/publish/page.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { useState } from 'react';
-import styles from './publish.module.css';
 import File from '@/components/publish/File';
 import FolderUpload from '@/components/publish/Folder';
 import { useSession } from 'next-auth/react';
@@ -34,7 +33,9 @@ export default function Publish() {
     const [uploaded, setUploaded] = useState(false);
     const [available, setAvailable] = useState<boolean | null>(null);
     const [checking, setChecking] = useState(false);
-
+    const [uploading, setUploading] = useState(false);
+    const [previewing, setPreviewing] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
     const canGoNextStep1 = () => {
         return gameId.trim() !== '' && gameName.trim() !== '';
@@ -49,531 +50,585 @@ export default function Publish() {
         return false;
     };
 
-    const handleUpload = async (force = false) => {
-        if (!canSubmit()) {
-            alert('Please upload all required build files.');
-            return;
+    const handlePreview = () => {
+        if (gameType === 'html' && htmlFiles) {
+            setPreviewing(true);
+            // Find the main HTML file
+            const htmlFile = Array.from(htmlFiles).find(file => file.name.endsWith('.html'));
+            if (htmlFile) {
+                const url = URL.createObjectURL(htmlFile);
+                setPreviewUrl(url);
+            }
         }
+    };
 
-        if (hasStreamingAssets && (!streamingAssetsFiles || streamingAssetsFiles.length === 0)) {
-            alert('Please upload the StreamingAssets folder contents.');
-            return;
+    const closePreview = () => {
+        setPreviewing(false);
+        if (previewUrl) {
+            URL.revokeObjectURL(previewUrl);
+            setPreviewUrl(null);
         }
+    };
 
-        const formData = new FormData();
-        formData.append('gameId', gameId);
-        formData.append('gameName', gameName);
-        formData.append('categories', categories);
-        formData.append('description', description);
-        formData.append('details', details);
-        formData.append('publisher', session?.user?.email || "magician");
-
-        if (gameImages) {
-            Array.from(gameImages).forEach((file) => formData.append('gameImages', file));
-        }
-        if (gameVideo) {
-            formData.append('gameVideo', gameVideo);
+    const checkAvailability = async () => {
+        if (!gameId.trim()) return;
+        
+        setChecking(true);
+        try {
+            const response = await fetch(`/api/arena/games`);
+            const games = await response.json();
+            const exists = games.some((game: any) => game.id.toString() === gameId.trim());
+            setAvailable(!exists);
+        } catch (error) {
+            console.error('Error checking availability:', error);
+        } finally {
+            setChecking(false);
         }
+    };
 
-        if (gameType === 'unity') {
-            formData.append('hasStreamingAssets', hasStreamingAssets ? 'true' : 'false');
-            formData.append('files', dataFile!);
-            formData.append('files', wasmFile!);
-            formData.append('files', frameworkFile!);
-            formData.append('files', loaderFile!);
-
-            if (hasStreamingAssets && streamingAssetsFiles) {
-                Array.from(streamingAssetsFiles).forEach((file) => {
-                    formData.append('streamingAssetsFiles', file, file.webkitRelativePath);
+    const handleSubmit = async () => {
+        if (!canSubmit() || !session) return;
+
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            
+            // Add game info
+            formData.append('gameId', gameId);
+            formData.append('gameName', gameName);
+            formData.append('categories', categories);
+            formData.append('description', description);
+            formData.append('details', details);
+            formData.append('gameType', gameType!);
+            formData.append('publisher', session.user?.name || 'Anonymous');
+
+            // Add images
+            if (gameImages) {
+                Array.from(gameImages).forEach((file) => {
+                    formData.append('images', file);
                 });
             }
-        } else if (gameType === 'html') {
-            Array.from(htmlFiles!).forEach((file) => {
-                formData.append('htmlFiles', file);
-            });
-        }
 
-        if (force) {
-            formData.append('force', 'true');
-        }
-
-        const endpoint = gameType === 'unity' ? '/api/publish/unity' : '/api/publish/html';
-        const res = await fetch(endpoint, {
-            method: 'POST',
-            body: formData,
-        });
-
-        if (res.ok) {
-            setUploaded(true);
-        } else if (res.status === 409) {
-            const { message } = await res.json();
-            const confirmOverwrite = window.confirm(message);
-            if (confirmOverwrite) {
-                await handleUpload(true);
+            // Add video
+            if (gameVideo) {
+                formData.append('video', gameVideo);
             }
-        } else {
-            alert('Upload failed.');
-        }
-    };
 
-    const checkAvailability = async () => {
-        if (!gameId.trim()) return alert("Please enter a Game ID to check.");
+            // Add game files based on type
+            if (gameType === 'unity') {
+                if (dataFile) formData.append('dataFile', dataFile);
+                if (wasmFile) formData.append('wasmFile', wasmFile);
+                if (frameworkFile) formData.append('frameworkFile', frameworkFile);
+                if (loaderFile) formData.append('loaderFile', loaderFile);
+                
+                if (hasStreamingAssets && streamingAssetsFiles) {
+                    Array.from(streamingAssetsFiles).forEach((file) => {
+                        formData.append('streamingAssets', file);
+                    });
+                }
+            } else if (gameType === 'html' && htmlFiles) {
+                Array.from(htmlFiles).forEach((file) => {
+                    formData.append('htmlFiles', file);
+                });
+            }
 
-        setChecking(true);
-        setAvailable(null);
+            const endpoint = gameType === 'unity' ? '/api/publish/unity' : '/api/publish/html';
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                body: formData,
+            });
 
-        try {
-            const res = await fetch(`/api/arena/games/${gameId.trim()}`);
-
-            if (res.status === 200) {
-                // Game exists => Not available
-                setAvailable(false);
-            } else if (res.status === 404) {
-                // Game not found => Available
-                setAvailable(true);
+            if (response.ok) {
+                setUploaded(true);
+                setStep(4);
             } else {
-                throw new Error('Unexpected response');
+                throw new Error('Upload failed');
             }
-        } catch (err) {
-            console.error('Error checking game ID:', err);
-            alert('Error checking game ID. See console for details.');
-            setAvailable(null);
+        } catch (error) {
+            console.error('Error uploading game:', error);
+            alert('Failed to upload game. Please try again.');
         } finally {
-            setChecking(false);
+            setUploading(false);
         }
     };
 
-    if (!session) return <SignIn />;
+    const getStepIcon = (stepNumber: number) => {
+        if (stepNumber < step) return '✓';
+        if (stepNumber === step) return '●';
+        return '○';
+    };
 
+    if (status === 'loading') {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (!session) {
+        return <SignIn />;
+    }
 
     return (
-        <div className={styles.wrapper}>
-            <h1 className={styles.title}>Publish Game</h1>
-            <h6 className={styles.uploader}>Publisher : {session.user?.name}</h6>
-
-            {!uploaded && (
-                <>
-                    {step === 1 && !gameType && (
-                        <>
-                            <h2>Choose Game Type</h2>
-                            <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
-                                <button
-                                    className={styles.gameTypeButton}
-                                    onClick={() => setGameType('unity')}
-                                    style={{
-                                        padding: '20px',
-                                        border: '2px solid #007bff',
-                                        borderRadius: '8px',
-                                        background: 'white',
-                                        cursor: 'pointer',
-                                        fontSize: '16px',
-                                        fontWeight: 'bold',
-                                        flex: 1
-                                    }}
-                                >
-                                    Unity WebGL Build
-                                    <br />
-                                    <small style={{ fontWeight: 'normal', color: '#666' }}>
-                                        Upload .data, .wasm, .framework.js, .loader.js files
-                                    </small>
-                                </button>
-                                <button
-                                    className={styles.gameTypeButton}
-                                    onClick={() => setGameType('html')}
-                                    style={{
-                                        padding: '20px',
-                                        border: '2px solid #28a745',
-                                        borderRadius: '8px',
-                                        background: 'white',
-                                        cursor: 'pointer',
-                                        fontSize: '16px',
-                                        fontWeight: 'bold',
-                                        flex: 1
-                                    }}
-                                >
-                                    HTML Game
-                                    <br />
-                                    <small style={{ fontWeight: 'normal', color: '#666' }}>
-                                        Upload index.html, CSS, JS, and assets
-                                    </small>
-                                </button>
-                            </div>
-                        </>
-                    )}
-
-                    {step === 1 && gameType && (
-                        <>
-                            <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
-                                <button
-                                    onClick={() => {
-                                        setGameType(null);
-                                        setStep(1);
-                                    }}
-                                    style={{
-                                        padding: '5px 10px',
-                                        border: '1px solid #ccc',
-                                        borderRadius: '4px',
-                                        background: 'white',
-                                        cursor: 'pointer'
-                                    }}
-                                >
-                                    ← Back to Game Type
-                                </button>
-                                <span style={{ fontWeight: 'bold' }}>
-                                    Publishing {gameType === 'unity' ? 'Unity WebGL' : 'HTML'} Game
-                                </span>
-                            </div>
-                            <label>
-                                Game ID ❗️
-                                <input
-                                    type="text"
-                                    required
-                                    value={gameId}
-                                    onChange={(e) => setGameId(e.target.value)}
-                                    placeholder="Must be Unique, please check for availability "
-                                />
-                                <br />
-                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                                    <button
-                                        className={styles.checkForAvailability}
-                                        type="button"
-                                        onClick={checkAvailability}
-                                        disabled={checking}
-                                    >
-                                        {checking ? 'Checking...' : 'Check for Availability'}
-                                    </button>
-                                    {available !== null && (
-                                        <span style={{ fontSize: 14 }}>
-                                            {available ? '✅ Available' : '❌ Already Exists'}
-                                        </span>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Publish Game</h1>
+                    <p className="text-slate-600 dark:text-slate-400 mt-2">Share your game with the Arena community</p>
+                </div>
+            </div>
+
+            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {/* Progress Steps */}
+                <div className="mb-8">
+                    <div className="flex items-center justify-between mb-4">
+                        <div className="flex items-center space-x-4">
+                            {[1, 2, 3, 4].map((stepNumber) => (
+                                <div key={stepNumber} className="flex items-center">
+                                    <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-colors duration-200 ${
+                                        stepNumber <= step 
+                                            ? 'bg-blue-500 text-white' 
+                                            : 'bg-slate-200 dark:bg-slate-700 text-slate-500 dark:text-slate-400'
+                                    }`}>
+                                        {getStepIcon(stepNumber)}
+                                    </div>
+                                    {stepNumber < 4 && (
+                                        <div className={`w-16 h-1 mx-2 rounded transition-colors duration-200 ${
+                                            stepNumber < step 
+                                                ? 'bg-blue-500' 
+                                                : 'bg-slate-200 dark:bg-slate-700'
+                                        }`} />
                                     )}
                                 </div>
+                            ))}
+                        </div>
+                    </div>
+                    
+                    <div className="grid grid-cols-4 gap-4 text-center">
+                        <div className={`text-sm font-medium ${step >= 1 ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400'}`}>
+                            Game Info
+                        </div>
+                        <div className={`text-sm font-medium ${step >= 2 ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400'}`}>
+                            Game Type
+                        </div>
+                        <div className={`text-sm font-medium ${step >= 3 ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400'}`}>
+                            Upload Files
+                        </div>
+                        <div className={`text-sm font-medium ${step >= 4 ? 'text-blue-600 dark:text-blue-400' : 'text-slate-500 dark:text-slate-400'}`}>
+                            Complete
+                        </div>
+                    </div>
+                </div>
+
+                {/* Step Content */}
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-8 transition-colors duration-300">
+                    {step === 1 && (
+                        <div className="space-y-6">
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">Game Information</h2>
+                            
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                        Game ID *
+                                    </label>
+                                    <div className="space-y-2">
+                                        <input
+                                            type="text"
+                                            value={gameId}
+                                            onChange={(e) => setGameId(e.target.value)}
+                                            placeholder="e.g., my-awesome-game"
+                                            className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                        />
+                                        {gameId && (
+                                            <button
+                                                onClick={checkAvailability}
+                                                disabled={checking}
+                                                className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200"
+                                            >
+                                                {checking ? 'Checking...' : 'Check availability'}
+                                            </button>
+                                        )}
+                                        {available !== null && (
+                                            <p className={`text-sm ${available ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                                                {available ? 'Available' : 'Already taken'}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
 
-                            </label>
-
+                                <div>
+                                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                        Game Name *
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={gameName}
+                                        onChange={(e) => setGameName(e.target.value)}
+                                        placeholder="Enter your game name"
+                                        className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                    />
+                                </div>
+                            </div>
 
-                            <label>
-                                Game Name ❗️
+                            <div>
+                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                    Categories
+                                </label>
                                 <input
                                     type="text"
-                                    required
-                                    value={gameName}
-                                    onChange={(e) => setGameName(e.target.value)}
-                                    placeholder="Enter game name"
+                                    value={categories}
+                                    onChange={(e) => setCategories(e.target.value)}
+                                    placeholder="e.g., Action, Adventure, Puzzle"
+                                    className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
                                 />
-                            </label>
+                            </div>
 
-                            <label>
-                                Description
+                            <div>
+                                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                    Description
+                                </label>
                                 <textarea
                                     value={description}
                                     onChange={(e) => setDescription(e.target.value)}
-                                    rows={4}
-                                    placeholder="Enter game description"
-                                />
-                            </label>
-
-                            <label>
-                                Details
-                                <textarea
-                                    value={details}
-                                    onChange={(e) => setDetails(e.target.value)}
-                                    rows={4}
-                                    placeholder="Enter additional details ... ex: controls, how to play ?"
+                                    placeholder="Brief description of your game"
+                                    rows={3}
+                                    className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
                                 />
-                            </label>
-
-                            <label>
-                                Categories
-                                <input
-                                    type="text"
-                                    value={categories}
-                                    onChange={(e) => setCategories(e.target.value)}
-                                    placeholder="Comma separated"
-                                />
-                            </label>
-
-                            <label>
-                                Game Images (PNG, IMG):
-                                <input
-                                    type="file"
-                                    accept=".png, .img"
-                                    multiple
-                                    onChange={(e) => setGameImages(e.target.files)}
-                                />
-                            </label>
-
-                            <label>
-                                Game Video (MP4)*
-                                <input
-                                    type="file"
-                                    accept=".mp4"
-                                    onChange={(e) =>
-                                        setGameVideo(e.target.files ? e.target.files[0] : null)
-                                    }
-                                />
-                            </label>
+                            </div>
 
-                            <button
-                                className={styles.uploadBtn}
-                                onClick={() => {
-                                    if (canGoNextStep1()) setStep(2);
-                                    else alert('Please fill all required fields on this page.');
-                                }}
-                            >
-                                Next
-                            </button>
-                        </>
+                            <div className="flex justify-end">
+                                <button
+                                    onClick={() => setStep(2)}
+                                    disabled={!canGoNextStep1()}
+                                    className="bg-blue-500 hover:bg-blue-600 disabled:bg-slate-400 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 disabled:cursor-not-allowed"
+                                >
+                                    Next Step →
+                                </button>
+                            </div>
+                        </div>
                     )}
 
-                    {step === 2 && gameType === 'unity' && (
-                        <>
-                            <File label="DATA file (.data)*" accept=".data" onFileChange={setDataFile} />
-                            <File label="WASM file (.wasm)*" accept=".wasm" onFileChange={setWasmFile} />
-                            <File
-                                label="Framework JS (.framework.js)*"
-                                accept=".framework.js"
-                                onFileChange={setFrameworkFile}
-                            />
-                            <File label="Loader JS (.loader.js)*" accept=".loader.js" onFileChange={setLoaderFile} />
-
-                            {/* <label style={{ marginTop: '20px', display: 'block' }}>
-                                <input
-                                    type="checkbox"
-                                    checked={hasStreamingAssets}
-                                    onChange={(e) => {
-                                        setHasStreamingAssets(e.target.checked);
-                                        setStreamingAssetsFiles(null);
-                                    }}
-                                    style={{ marginRight: 6 }}
-                                />
-                                Has Streaming Assets?
-                            </label> */}
+                    {step === 2 && (
+                        <div className="space-y-6">
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">Select Game Type</h2>
+                            
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div
+                                    onClick={() => setGameType('unity')}
+                                    className={`p-6 border-2 rounded-xl cursor-pointer transition-all duration-200 ${
+                                        gameType === 'unity'
+                                            ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/50'
+                                            : 'border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500'
+                                    }`}
+                                >
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-purple-600 mb-4">UNITY</div>
+                                        <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Unity WebGL</h3>
+                                        <p className="text-slate-600 dark:text-slate-400 text-sm">
+                                            Upload Unity WebGL builds with .data, .wasm, .js files
+                                        </p>
+                                    </div>
+                                </div>
 
-                            {/* {hasStreamingAssets && (
-                                <div>
-                                    <label htmlFor="streaming-assets-upload">
-                                        Upload StreamingAssets Folder:
-                                    </label>
-                                    <FolderUpload />
-                                    <small style={{ fontSize: 12, color: '#666' }}>
-                                        Select the entire StreamingAssets folder to preserve structure
-                                    </small>
+                                <div
+                                    onClick={() => setGameType('html')}
+                                    className={`p-6 border-2 rounded-xl cursor-pointer transition-all duration-200 ${
+                                        gameType === 'html'
+                                            ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/50'
+                                            : 'border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500'
+                                    }`}
+                                >
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-orange-600 mb-4">HTML5</div>
+                                        <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">HTML5 Game</h3>
+                                        <p className="text-slate-600 dark:text-slate-400 text-sm">
+                                            Upload HTML5 games with HTML, CSS, JS files
+                                        </p>
+                                    </div>
                                 </div>
-                            )} */}
+                            </div>
 
-                            <div style={{ marginTop: '20px' }}>
+                            <div className="flex justify-between">
                                 <button
-                                    className={styles.uploadBtn}
                                     onClick={() => setStep(1)}
-                                    style={{ marginRight: '10px' }}
+                                    className="bg-slate-500 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
                                 >
-                                    Back
+                                    ← Previous
                                 </button>
-
                                 <button
-                                    className={styles.uploadBtn}
-                                    onClick={() => {
-                                        handleUpload();
-                                    }}
-                                    disabled={!canSubmit()}
+                                    onClick={() => setStep(3)}
+                                    disabled={!gameType}
+                                    className="bg-blue-500 hover:bg-blue-600 disabled:bg-slate-400 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 disabled:cursor-not-allowed"
                                 >
-                                    Upload Unity Build
+                                    Next Step →
                                 </button>
                             </div>
-                        </>
+                        </div>
                     )}
 
-                    {step === 2 && gameType === 'html' && (
-                        <>
-                            <div style={{ marginBottom: '20px' }}>
-                                <h3>HTML Game Upload Options</h3>
-                                <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
-                                    <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                                        <input
-                                            type="radio"
-                                            name="uploadType"
-                                            value="folder"
-                                            defaultChecked
-                                            onChange={() => setUploadType('folder')}
+                    {step === 3 && (
+                        <div className="space-y-6">
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">Upload Game Files</h2>
+                            
+                            {gameType === 'unity' ? (
+                                <div className="space-y-6">
+                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                        <File
+                                            title="Data File (.data)"
+                                            accept=".data"
+                                            onChange={setDataFile}
                                         />
-                                        Upload Folder
-                                    </label>
-                                    <label style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                                        <input
-                                            type="radio"
-                                            name="uploadType"
-                                            value="files"
-                                            onChange={() => setUploadType('files')}
+                                        <File
+                                            title="WASM File (.wasm)"
+                                            accept=".wasm"
+                                            onChange={setWasmFile}
                                         />
-                                        Upload Individual Files
-                                    </label>
-                                </div>
-                            </div>
-
-                            {uploadType === 'folder' && (
-                                <>
-                                    <label>
-                                        HTML Game Folder*
-                                        <input
-                                            type="file"
-                                            webkitdirectory="true"
-                                            directory="true"
-                                            multiple
-                                            onChange={(e) => setHtmlFiles(e.target.files)}
-                                            style={{ 
-                                                padding: '10px',
-                                                border: '2px dashed #ccc',
-                                                borderRadius: '8px',
-                                                width: '100%',
-                                                cursor: 'pointer'
-                                            }}
+                                        <File
+                                            title="Framework File (.js)"
+                                            accept=".js"
+                                            onChange={setFrameworkFile}
                                         />
-                                        <small style={{ fontSize: 12, color: '#666', display: 'block', marginTop: '5px' }}>
-                                            Select your HTML game folder. All files and subfolders will be preserved.
-                                        </small>
-                                    </label>
-
-                                    {htmlFiles && htmlFiles.length > 0 && (
-                                        <div style={{ 
-                                            marginTop: '15px', 
-                                            padding: '15px', 
-                                            backgroundColor: '#f8f9fa', 
-                                            borderRadius: '8px',
-                                            border: '1px solid #e9ecef'
-                                        }}>
-                                            <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
-                                                📁 Uploaded Files ({htmlFiles.length} files)
-                                            </h4>
-                                            <div style={{ 
-                                                maxHeight: '200px', 
-                                                overflowY: 'auto',
-                                                fontSize: '12px',
-                                                fontFamily: 'monospace'
-                                            }}>
-                                                {Array.from(htmlFiles).map((file, index) => (
-                                                    <div key={index} style={{ 
-                                                        padding: '2px 0',
-                                                        color: file.name.endsWith('.html') ? '#007bff' : '#666'
-                                                    }}>
-                                                        {file.webkitRelativePath || file.name}
-                                                        {file.name === 'index.html' && ' ⭐'}
-                                                    </div>
-                                                ))}
-                                            </div>
-                                            {!Array.from(htmlFiles).some(f => f.name === 'index.html') && (
-                                                <div style={{ 
-                                                    marginTop: '10px', 
-                                                    padding: '8px', 
-                                                    backgroundColor: '#fff3cd', 
-                                                    border: '1px solid #ffeaa7',
-                                                    borderRadius: '4px',
-                                                    fontSize: '12px',
-                                                    color: '#856404'
-                                                }}>
-                                                    ⚠️ Warning: No index.html file found. Make sure your main HTML file is named 'index.html'
-                                                </div>
-                                            )}
+                                        <File
+                                            title="Loader File (.js)"
+                                            accept=".js"
+                                            onChange={setLoaderFile}
+                                        />
+                                    </div>
+
+                                    <div>
+                                        <label className="flex items-center space-x-2">
+                                            <input
+                                                type="checkbox"
+                                                checked={hasStreamingAssets}
+                                                onChange={(e) => setHasStreamingAssets(e.target.checked)}
+                                                className="w-4 h-4 text-blue-600 bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 rounded focus:ring-blue-500"
+                                            />
+                                            <span className="text-slate-700 dark:text-slate-300">Has Streaming Assets</span>
+                                        </label>
+                                    </div>
+
+                                    {hasStreamingAssets && (
+                                        <FolderUpload
+                                            title="Streaming Assets"
+                                            onChange={setStreamingAssetsFiles}
+                                        />
+                                    )}
+                                </div>
+                            ) : gameType === 'html' ? (
+                                <div className="space-y-6">
+                                    {/* Upload Method Selection */}
+                                    <div>
+                                        <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Upload Method</h3>
+                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    setUploadType('folder');
+                                                    setHtmlFiles(null);
+                                                }}
+                                                className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
+                                                    uploadType === 'folder'
+                                                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/50'
+                                                        : 'border-slate-300 dark:border-slate-600 hover:border-blue-500'
+                                                }`}
+                                            >
+                                                <h4 className="font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                                                    Upload Folder
+                                                </h4>
+                                                <p className="text-sm text-slate-600 dark:text-slate-400">
+                                                    Upload entire game folder with all files and subfolders intact
+                                                </p>
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    setUploadType('files');
+                                                    setHtmlFiles(null);
+                                                }}
+                                                className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
+                                                    uploadType === 'files'
+                                                        ? 'border-blue-500 bg-blue-50 dark:bg-blue-950/50'
+                                                        : 'border-slate-300 dark:border-slate-600 hover:border-blue-500'
+                                                }`}
+                                            >
+                                                <h4 className="font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                                                    Upload Files
+                                                </h4>
+                                                <p className="text-sm text-slate-600 dark:text-slate-400">
+                                                    Select individual files manually (HTML, CSS, JS, images, etc.)
+                                                </p>
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    {/* Upload Interface */}
+                                    {uploadType === 'folder' ? (
+                                        <div>
+                                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                                Select Game Folder
+                                            </label>
+                                            <input
+                                                type="file"
+                                                {...({webkitdirectory: ""} as any)}
+                                                multiple
+                                                onChange={(e) => setHtmlFiles(e.target.files)}
+                                                className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                            />
+                                            <p className="text-slate-500 dark:text-slate-400 text-sm mt-2">
+                                                Select the entire folder containing your HTML5 game files
+                                            </p>
+                                        </div>
+                                    ) : (
+                                        <div>
+                                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                                Select Game Files
+                                            </label>
+                                            <input
+                                                type="file"
+                                                multiple
+                                                accept=".html,.htm,.js,.css,.json,.png,.jpg,.jpeg,.gif,.svg,.mp3,.wav,.ogg"
+                                                onChange={(e) => setHtmlFiles(e.target.files)}
+                                                className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                            />
+                                            <p className="text-slate-500 dark:text-slate-400 text-sm mt-2">
+                                                Select all files for your HTML5 game (HTML, CSS, JS, images, audio, etc.)
+                                            </p>
                                         </div>
                                     )}
-                                </>
-                            )}
-
-                            {uploadType === 'files' && (
-                                <>
-                                    <label>
-                                        HTML Game Files*
-                                        <input
-                                            type="file"
-                                            multiple
-                                            accept=".html,.htm,.css,.js,.png,.jpg,.jpeg,.gif,.svg,.wav,.mp3,.ogg,.webm,.mp4"
-                                            onChange={(e) => setHtmlFiles(e.target.files)}
-                                            style={{ 
-                                                padding: '10px',
-                                                border: '1px solid #ccc',
-                                                borderRadius: '8px',
-                                                width: '100%'
-                                            }}
-                                        />
-                                        <small style={{ fontSize: 12, color: '#666', display: 'block', marginTop: '5px' }}>
-                                            Upload all your HTML game files (index.html, CSS, JS, images, sounds, etc.)
-                                        </small>
-                                    </label>
 
+                                    {/* File List Preview */}
                                     {htmlFiles && htmlFiles.length > 0 && (
-                                        <div style={{ 
-                                            marginTop: '15px', 
-                                            padding: '15px', 
-                                            backgroundColor: '#f8f9fa', 
-                                            borderRadius: '8px',
-                                            border: '1px solid #e9ecef'
-                                        }}>
-                                            <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
-                                                📄 Selected Files ({htmlFiles.length} files)
+                                        <div className="bg-slate-50 dark:bg-slate-700 rounded-lg p-4">
+                                            <h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
+                                                Selected Files ({htmlFiles.length})
                                             </h4>
-                                            <div style={{ 
-                                                maxHeight: '150px', 
-                                                overflowY: 'auto',
-                                                fontSize: '12px'
-                                            }}>
-                                                {Array.from(htmlFiles).map((file, index) => (
-                                                    <div key={index} style={{ 
-                                                        padding: '2px 0',
-                                                        color: file.name.endsWith('.html') ? '#007bff' : '#666'
-                                                    }}>
-                                                        📄 {file.name}
-                                                        {file.name === 'index.html' && ' ⭐'}
+                                            <div className="max-h-32 overflow-y-auto space-y-1">
+                                                {Array.from(htmlFiles).slice(0, 10).map((file, index) => (
+                                                    <div key={index} className="text-sm text-slate-600 dark:text-slate-400">
+                                                        {uploadType === 'folder' && file.webkitRelativePath 
+                                                            ? file.webkitRelativePath 
+                                                            : file.name}
                                                     </div>
                                                 ))}
+                                                {htmlFiles.length > 10 && (
+                                                    <div className="text-sm text-slate-500 dark:text-slate-400 italic">
+                                                        ... and {htmlFiles.length - 10} more files
+                                                    </div>
+                                                )}
                                             </div>
                                         </div>
                                     )}
-                                </>
-                            )}
-
-                            <div style={{ 
-                                marginTop: '20px', 
-                                padding: '15px', 
-                                backgroundColor: '#e7f3ff', 
-                                borderRadius: '8px',
-                                border: '1px solid #b3d9ff'
-                            }}>
-                                <h4 style={{ margin: '0 0 10px 0', fontSize: '14px' }}>
-                                    📋 HTML Game Requirements
-                                </h4>
-                                <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px', color: '#0066cc' }}>
-                                    <li>Must include index.html as the main entry point</li>
-                                    <li>All file paths should be relative (no absolute URLs)</li>
-                                    <li>Maximum total size: 50MB</li>
-                                    <li>Supported formats: HTML, CSS, JS, PNG, JPG, GIF, SVG, MP3, WAV, OGG</li>
-                                </ul>
-                            </div>
 
-                            <div style={{ marginTop: '20px' }}>
+                                    {/* Requirements Info */}
+                                    <div className="bg-amber-50 dark:bg-amber-950/50 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
+                                        <h4 className="font-semibold text-amber-800 dark:text-amber-200 mb-2">HTML5 Game Requirements</h4>
+                                        <ul className="text-sm text-amber-700 dark:text-amber-300 space-y-1">
+                                            <li>• Must include at least one HTML file (index.html recommended)</li>
+                                            <li>• All assets should be relative paths (no absolute URLs)</li>
+                                            <li>• Game should work offline without external dependencies</li>
+                                            <li>• Maximum total size: 100MB</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            ) : null}
+
+                            <div className="flex justify-between">
                                 <button
-                                    className={styles.uploadBtn}
-                                    onClick={() => setStep(1)}
-                                    style={{ marginRight: '10px' }}
+                                    onClick={() => setStep(2)}
+                                    className="bg-slate-500 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
                                 >
-                                    Back
+                                    ← Previous
                                 </button>
+                                <div className="flex space-x-3">
+                                    {gameType === 'html' && canSubmit() && (
+                                        <button
+                                            onClick={handlePreview}
+                                            className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                                        >
+                                            Preview Game
+                                        </button>
+                                    )}
+                                    <button
+                                        onClick={handleSubmit}
+                                        disabled={!canSubmit() || uploading}
+                                        className="bg-green-500 hover:bg-green-600 disabled:bg-slate-400 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200 disabled:cursor-not-allowed"
+                                    >
+                                        {uploading ? (
+                                            <div className="flex items-center space-x-2">
+                                                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                                                <span>Publishing...</span>
+                                            </div>
+                                        ) : (
+                                            'Publish Game'
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
 
-                                <button
-                                    className={styles.uploadBtn}
-                                    onClick={() => {
-                                        handleUpload();
-                                    }}
-                                    disabled={!canSubmit()}
+                    {step === 4 && (
+                        <div className="text-center py-12">
+                            <div className="w-20 h-20 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6">
+                                <span className="text-2xl font-bold text-green-700 dark:text-green-300">DONE</span>
+                            </div>
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+                                Game Published Successfully!
+                            </h2>
+                            <p className="text-slate-600 dark:text-slate-400 mb-8">
+                                Your game "{gameName}" is now live in the Arena. Players can discover and play it!
+                            </p>
+                            <div className="space-x-4">
+                                <a
+                                    href={`/arena/${gameId}`}
+                                    className="inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
                                 >
-                                    Upload HTML Game
-                                </button>
+                                    View Game
+                                </a>
+                                <a
+                                    href="/arena"
+                                    className="inline-block bg-slate-500 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                                >
+                                    Browse Arena
+                                </a>
                             </div>
-                        </>
+                        </div>
                     )}
-                </>
+                </div>
+            </div>
+
+            {/* Preview Modal */}
+            {previewing && previewUrl && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div className="bg-white dark:bg-slate-800 rounded-lg p-6 max-w-4xl max-h-[90vh] w-full mx-4">
+                        <div className="flex justify-between items-center mb-4">
+                            <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">Game Preview</h3>
+                            <button
+                                onClick={closePreview}
+                                className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+                            >
+                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden" style={{ height: '70vh' }}>
+                            <iframe
+                                src={previewUrl}
+                                className="w-full h-full"
+                                title="Game Preview"
+                            />
+                        </div>
+                    </div>
+                </div>
             )}
-
-            {uploaded && <p>{gameType === 'unity' ? 'Unity Build' : 'HTML Game'} Uploaded! You can now preview the game.</p>}
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/contribute/publish/publish.module.css b/app/contribute/publish/publish.module.css
deleted file mode 100644
index 2a875ce..0000000
--- a/app/contribute/publish/publish.module.css
+++ /dev/null
@@ -1,163 +0,0 @@
-.wrapper {
-    max-width: 600px;
-    margin: 40px auto;
-    padding: 20px;
-    background-color: #1b1b1b85;
-    border-radius: 12px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    color: #f1f1f9;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    box-shadow: 0px 0px 10px #ffffff6c;
-}
-
-.wrapper .title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 30px;
-    text-align: center;
-    color: #ffffff;
-}
-
-.wrapper label {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 18px;
-    font-weight: 600;
-    font-size: 1rem;
-    color: #ffffffcb;
-}
-
-.uploader {
-    text-align: center;
-    font-weight: 600;
-    font-size: 14px;
-    color: rgb(255, 227, 66);
-}
-
-/* 
-.checkForAvailability {
-    width: max-content;
-    padding: 10px 10px;
-    background-color: rgb(255, 69, 69);
-    outline: none;
-    border: none;
-    color: rgb(255, 255, 255);
-    font-size: 14px;
-    font-weight: 700;
-    border-radius: 10px;
-    box-shadow: 0 0 5px rgb(255, 81, 81);
-} */
-
-.checkForAvailability {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    background: linear-gradient(135deg, #7e7473d2, #7e7473d2);
-    border: none;
-    padding: 10px 10px;
-    font-size: 14px;
-    font-weight: 700;
-    color: white;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.checkForAvailability:hover {
-    background: linear-gradient(135deg, #ff4a4a, #ff4a4a);
-    transform: scale(1.05);
-}
-
-.wrapper input[type='text'],
-.wrapper textarea,
-.wrapper input[type='file'] {
-    margin-top: 6px;
-    padding: 10px 12px;
-    border-radius: 6px;
-    border: 1px solid #ffffff;
-    background-color: #ffffff;
-    color: #000000;
-    font-size: 14px;
-    outline-offset: 2px;
-    transition: border-color 0.3s ease;
-}
-
-.wrapper input[type='text']:focus,
-.wrapper textarea:focus,
-.wrapper input[type='file']:focus {
-    border: 2px solid #0d6eff;
-    outline: #0d6eff;
-    font-weight: 700;
-}
-
-.wrapper textarea {
-    resize: vertical;
-    min-height: 80px;
-    max-height: 160px;
-    font-family: inherit;
-}
-
-.wrapper .buttonGroup {
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    margin-top: 20px;
-}
-
-.wrapper .backBtn {
-    background-color: #ef4444;
-    border: none;
-    border-radius: 6px;
-    color: white;
-    padding: 12px 24px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.wrapper .backBtn:hover {
-    background-color: #b91c1c;
-}
-
-/* .wrapper .uploadBtn {
-    background-color: #3b82f6;
-    border: none;
-    border-radius: 6px;
-    color: white;
-    padding: 12px 24px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.wrapper .uploadBtn:hover {
-    background-color: #2563eb;
-} */
-
-.wrapper p {
-    text-align: center;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #22c55e;
-}
-
-
-.uploadBtn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    background: linear-gradient(135deg, #65626d, #8e869b);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: white;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.uploadBtn:hover {
-    background: linear-gradient(135deg, #2f5988, #0c7dff);
-    transform: scale(1.05);
-}
\ No newline at end of file
diff --git a/app/coupon/redeem/coupon.module.css b/app/coupon/redeem/coupon.module.css
deleted file mode 100644
index 25bc35a..0000000
--- a/app/coupon/redeem/coupon.module.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    padding: 1rem;
-    user-select: none;
-    text-align: center;
-}
-
-.infoText {
-    margin-top: 2rem;
-    font-weight: 600;
-    color: #4a2503;
-}
-
-.couponWrapper {
-    position: relative;
-    width: 100%;
-    max-width: 500px;
-    border-radius: 16px;
-    box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
-    cursor: pointer;
-    touch-action: none;
-    user-select: none;
-}
-
-.couponWrapper.redeemed {
-    cursor: default;
-}
-
-.couponImage {
-    width: 100%;
-    border-radius: 16px;
-    user-select: none;
-    -webkit-user-drag: none;
-    filter: grayscale(100%);
-    transition: filter 0.4s ease;
-}
-
-.couponImage.redeemed {
-    filter: none;
-}
-
-.scratchCanvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 16px;
-    width: 100%;
-    height: 100%;
-    touch-action: none;
-    user-select: none;
-}
-
-.redeemingText {
-    margin-top: 20px;
-    font-weight: bold;
-    color: #4a2503;
-}
-
-.couponOverlay {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    color: #4a2503;
-    font-size: .7rem;
-    padding: 6px 12px;
-    pointer-events: none;
-    z-index: 2;
-}
\ No newline at end of file
diff --git a/app/coupon/redeem/page.tsx b/app/coupon/redeem/page.tsx
index 219078b..3d3be3d 100644
--- a/app/coupon/redeem/page.tsx
+++ b/app/coupon/redeem/page.tsx
@@ -6,7 +6,6 @@ import { useState, useRef, useEffect } from 'react';
 import { getUserDataFromPlayFab, updatePlayFabUserData } from '@/lib/playfab/playfab';
 import Popup from '@/components/popup/Popup';
 import { useSearchParams } from 'next/navigation';
-import styles from './coupon.module.css';
 
 export default function ScratchToRedeem() {
     const { data: session, status } = useSession();
@@ -50,180 +49,276 @@ export default function ScratchToRedeem() {
             noise.data[i + 3] = 255;
         }
         ctx.putImageData(noise, 0, 0);
-    }, [couponCode]);
-
-    const startDrawing = (e: React.MouseEvent | React.TouchEvent) => {
-        if (redeemed) return;
-        isDrawing.current = true;
-        draw(e);
+    }, []);
+
+    const getMousePos = (e: React.MouseEvent<HTMLCanvasElement>) => {
+        if (!canvasRef.current) return { x: 0, y: 0 };
+        const rect = canvasRef.current.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
     };
 
-    const stopDrawing = () => {
-        if (redeemed) return;
-        isDrawing.current = false;
-        checkScratchPercent();
+    const getTouchPos = (e: React.TouchEvent<HTMLCanvasElement>) => {
+        if (!canvasRef.current) return { x: 0, y: 0 };
+        const rect = canvasRef.current.getBoundingClientRect();
+        return {
+            x: e.touches[0].clientX - rect.left,
+            y: e.touches[0].clientY - rect.top
+        };
     };
 
-    const getPos = (e: React.MouseEvent | React.TouchEvent) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return null;
-        const rect = canvas.getBoundingClientRect();
-
-        if ('touches' in e && e.touches.length > 0) {
-            return {
-                x: e.touches[0].clientX - rect.left,
-                y: e.touches[0].clientY - rect.top,
-            };
-        } else if ('clientX' in e) {
-            return {
-                x: e.clientX - rect.left,
-                y: e.clientY - rect.top,
-            };
-        }
-        return null;
-    };
-
-    const draw = (e: React.MouseEvent | React.TouchEvent) => {
-        if (!isDrawing.current) return;
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
+    const startScratch = (pos: { x: number; y: number }) => {
+        if (!canvasRef.current) return;
+        isDrawing.current = true;
+        const ctx = canvasRef.current.getContext('2d');
         if (!ctx) return;
 
-        const pos = getPos(e);
-        if (!pos) return;
-
         ctx.globalCompositeOperation = 'destination-out';
         ctx.beginPath();
-        ctx.arc(pos.x, pos.y, 50, 0, Math.PI * 2, false); // brush radius 20px
+        ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
         ctx.fill();
     };
 
-    const checkScratchPercent = () => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
+    const scratch = (pos: { x: number; y: number }) => {
+        if (!isDrawing.current || !canvasRef.current) return;
+        const ctx = canvasRef.current.getContext('2d');
         if (!ctx) return;
 
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const pixels = imageData.data;
-        let transparentPixels = 0;
-
-        for (let i = 3; i < pixels.length; i += 4) {
-            if (pixels[i] === 0) transparentPixels++;
-        }
-
-        const scratchedPercent = (transparentPixels / (canvas.width * canvas.height)) * 100;
-
-        // Auto redeem if scratched more than 50%
-        if (scratchedPercent > 50 && !redeemed) {
-            redeemCoupon();
-        }
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
+        ctx.fill();
     };
 
-    const redeemCoupon = async () => {
-        setRedeemed(true);
+    const stopScratch = () => {
+        isDrawing.current = false;
+    };
 
-        // Clear scratch overlay fully
-        const canvas = canvasRef.current;
-        if (canvas) {
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-            }
-        }
+    const handleRedeem = async () => {
+        if (!couponCode || !session) return;
 
         setLoading(true);
+        try {
+            // Get user data
+            const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID!;
+            let sessionTicket = null;
+            if (typeof window !== 'undefined') {
+                sessionTicket = sessionStorage.getItem('playfabSessionTicket');
+            }
 
-        const sessionTicket = sessionStorage.getItem('playfabSessionTicket');
-        const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID;
-
-        if (!sessionTicket || !titleId) {
-            showPopup('Missing session ticket or title ID', 'error');
-            setLoading(false);
-            return;
-        }
+            if (!sessionTicket) {
+                setPopup({ message: 'Please log in to redeem coupons.', type: 'error' });
+                setLoading(false);
+                return;
+            }
 
-        try {
-            const userDataRes = await getUserDataFromPlayFab(sessionTicket, titleId);
-            const coupons = userDataRes?.data?.Data?.Coupons?.Value
-                ? JSON.parse(userDataRes.data.Data.Coupons.Value)
+            const userData = await getUserDataFromPlayFab(sessionTicket, titleId);
+            
+            // Parse existing coupons
+            const existingCoupons = userData?.UserData?.Coupons?.Value 
+                ? JSON.parse(userData.UserData.Coupons.Value) 
                 : [];
 
-            if (coupons.includes(couponCode)) {
-                const mailRes = await fetch('/api/send-coupon-mail', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ coupon: couponCode }),
-                });
-
-                if (mailRes.ok) {
-                    // Remove the used coupon from the array
-                    const updatedCoupons = coupons.filter((c: string) => c !== couponCode);
-                    // Update PlayFab UserData
-                    await updatePlayFabUserData(sessionTicket, titleId, { Coupons: JSON.stringify(updatedCoupons) });
-
-                    showPopup('Coupon verified! Please check your mail!', 'success');
-                } else {
-                    const errorText = await mailRes.text();
-                    showPopup('Coupon valid, but failed to send mail. ' + errorText, 'error');
-                }
-            } else {
-                showPopup('Invalid coupon code.', 'error');
+            // Check if coupon already redeemed
+            if (existingCoupons.includes(couponCode)) {
+                setPopup({ message: 'This coupon has already been redeemed!', type: 'error' });
+                setLoading(false);
+                return;
             }
-        } catch (err) {
-            showPopup('Error verifying coupon.', 'error');
+
+            // Add new coupon
+            const updatedCoupons = [...existingCoupons, couponCode];
+            
+            // Update user data
+            await updatePlayFabUserData(sessionTicket, titleId, {
+                Coupons: JSON.stringify(updatedCoupons)
+            });
+
+            setRedeemed(true);
+            setPopup({ message: 'Coupon redeemed successfully!', type: 'success' });
+        } catch (error) {
+            console.error('Error redeeming coupon:', error);
+            setPopup({ message: 'Failed to redeem coupon. Please try again.', type: 'error' });
         } finally {
             setLoading(false);
         }
     };
 
-
-    const showPopup = (message: string, type: 'success' | 'error' = 'success') => {
+    const showPopup = (message: string, type: 'success' | 'error') => {
         setPopup({ message, type });
         setTimeout(() => setPopup(null), 3000);
     };
 
-    if (status === 'loading') return <div style={{ textAlign: 'center', marginTop: 40 }}>Loading...</div>;
-    if (!session) return <SignIn />;
-
-    return (
-        <div className={styles.container} >
-
-            <div
-                className={`${styles.couponWrapper} ${redeemed ? styles.redeemed : ''}`}
-                onMouseDown={startDrawing}
-                onMouseMove={draw}
-                onMouseUp={stopDrawing}
-                onMouseLeave={stopDrawing}
-                onTouchStart={startDrawing}
-                onTouchMove={draw}
-                onTouchEnd={stopDrawing}
-                ref={containerRef}
-            >
-                <img
-                    src="/vgoldtickets.png"
-                    alt="Golden Ticket"
-                    className={`${styles.couponImage} ${redeemed ? styles.redeemed : ''}`}
-                    draggable={false}
-                />
-                {!redeemed && (
-                    <canvas
-                        ref={canvasRef}
-                        className={styles.scratchCanvas}
-                    />
-                )}
-                {(redeemed && couponCode) && (
-                    <div className={styles.couponOverlay}>
-                        {couponCode}
-                    </div>)}
+    if (status === 'loading') {
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading...</span>
+                    </div>
+                </div>
             </div>
+        );
+    }
 
-            <p className={styles.infoText}>(Scratch to Redeem)</p>
+    if (!session) {
+        return <SignIn />;
+    }
 
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Redeem Coupon</h1>
+                    <p className="text-slate-600 dark:text-slate-400 mt-2">Scratch to reveal and redeem your golden ticket</p>
+                </div>
+            </div>
 
-            {loading && <p className={styles.redeemingText}>Redeeming...</p>}
+            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                    {/* Left - Scratch Card */}
+                    <div className="order-2 lg:order-1">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-4 text-center">
+                                Golden Ticket
+                            </h2>
+                            
+                            {/* Scratch Area */}
+                            <div 
+                                ref={containerRef}
+                                className="relative bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 rounded-lg overflow-hidden"
+                                style={{ height: '300px' }}
+                            >
+                                {/* Hidden content behind scratch layer */}
+                                <div className="absolute inset-0 flex items-center justify-center">
+                                    <div className="text-center p-8">
+                                        <div className="text-4xl font-bold text-yellow-900 mb-4">SUCCESS</div>
+                                        <h3 className="text-2xl font-bold text-yellow-900 mb-2">Congratulations!</h3>
+                                        <p className="text-yellow-800 text-lg font-semibold">
+                                            Coupon Code: {couponCode || 'ARENA2024'}
+                                        </p>
+                                        <p className="text-yellow-700 text-sm mt-2">
+                                            Scratch off the silver layer to reveal
+                                        </p>
+                                    </div>
+                                </div>
+                                
+                                {/* Scratch layer */}
+                                <canvas
+                                    ref={canvasRef}
+                                    className="absolute inset-0 cursor-crosshair"
+                                    onMouseDown={(e) => startScratch(getMousePos(e))}
+                                    onMouseMove={(e) => scratch(getMousePos(e))}
+                                    onMouseUp={stopScratch}
+                                    onMouseLeave={stopScratch}
+                                    onTouchStart={(e) => {
+                                        e.preventDefault();
+                                        startScratch(getTouchPos(e));
+                                    }}
+                                    onTouchMove={(e) => {
+                                        e.preventDefault();
+                                        scratch(getTouchPos(e));
+                                    }}
+                                    onTouchEnd={(e) => {
+                                        e.preventDefault();
+                                        stopScratch();
+                                    }}
+                                />
+                            </div>
+                            
+                            <p className="text-slate-600 dark:text-slate-400 text-sm text-center mt-4">
+                                Tip: Use your mouse or finger to scratch off the silver layer
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Right - Redemption Form */}
+                    <div className="order-1 lg:order-2">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
+                                Redeem Your Ticket
+                            </h2>
+                            
+                            {redeemed ? (
+                                <div className="text-center py-8">
+                                    <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                                        <span className="text-lg font-bold text-green-700 dark:text-green-300">DONE</span>
+                                    </div>
+                                    <h3 className="text-lg font-semibold text-green-700 dark:text-green-400 mb-2">
+                                        Successfully Redeemed!
+                                    </h3>
+                                    <p className="text-slate-600 dark:text-slate-400">
+                                        Your golden ticket has been added to your account
+                                    </p>
+                                </div>
+                            ) : (
+                                <div className="space-y-6">
+                                    <div>
+                                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                                            Coupon Code
+                                        </label>
+                                        <input
+                                            type="text"
+                                            value={couponCode}
+                                            onChange={(e) => setCouponCode(e.target.value)}
+                                            placeholder="Enter your coupon code"
+                                            className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                        />
+                                    </div>
+                                    
+                                    <button
+                                        onClick={handleRedeem}
+                                        disabled={loading || !couponCode.trim()}
+                                        className="w-full bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 disabled:from-slate-400 disabled:to-slate-500 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 disabled:transform-none disabled:cursor-not-allowed shadow-lg"
+                                    >
+                                        {loading ? (
+                                            <div className="flex items-center justify-center space-x-2">
+                                                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                                                <span>Redeeming...</span>
+                                            </div>
+                                        ) : (
+                                            'Redeem Coupon'
+                                        )}
+                                    </button>
+                                </div>
+                            )}
+
+                            {/* Info Cards */}
+                            <div className="mt-8 space-y-3">
+                                <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                                    <div className="flex items-start space-x-3">
+                                        <span className="text-blue-500 text-lg font-bold">i</span>
+                                        <div>
+                                            <h4 className="font-semibold text-blue-700 dark:text-blue-300 text-sm">How it works</h4>
+                                            <p className="text-blue-600 dark:text-blue-400 text-xs">
+                                                Each golden ticket contains special rewards and bonuses for your Arena account.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div className="bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 rounded-lg p-4">
+                                    <div className="flex items-start space-x-3">
+                                        <span className="text-green-500 text-lg font-bold">!</span>
+                                        <div>
+                                            <h4 className="font-semibold text-green-700 dark:text-green-300 text-sm">One-time use</h4>
+                                            <p className="text-green-600 dark:text-green-400 text-xs">
+                                                Each coupon code can only be redeemed once per account.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
+            {/* Popup */}
             {popup && (
                 <Popup
                     message={popup.message}
@@ -232,6 +327,5 @@ export default function ScratchToRedeem() {
                 />
             )}
         </div>
-
     );
-}
+}
\ No newline at end of file
diff --git a/app/dashboard/dashboard.module.css b/app/dashboard/dashboard.module.css
deleted file mode 100644
index 784f412..0000000
--- a/app/dashboard/dashboard.module.css
+++ /dev/null
@@ -1,610 +0,0 @@
-.page {
-    min-height: 100vh;
-    padding: 2rem;
-    background: #121214;
-    color: #cfd8dc;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.tagline {
-    font-size: medium;
-    color: #e4d838;
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    user-select: none;
-    text-align: left;
-    width: 100%;
-}
-
-.header {
-    width: 100%;
-    margin-bottom: 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #222d38;
-    padding-bottom: 0.5rem;
-}
-
-.title {
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: #fcfcfc;
-    user-select: none;
-}
-
-.playfabId {
-    font-size: 1rem;
-    color: #ffffff71;
-    font-weight: 600;
-    user-select: text;
-    background: #08151c;
-    padding: 0.25rem 0.75rem;
-    border-radius: 12px;
-    letter-spacing: 0.05em;
-}
-
-.error {
-    margin: 1rem auto;
-    color: #ff5555;
-    background: #330000;
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
-    font-weight: 600;
-    text-align: center;
-    user-select: none;
-    box-shadow: 0 0 8px #ff5555;
-}
-
-.loading {
-    margin: 1rem auto;
-    color: #fcfcfc;
-    font-weight: 600;
-    user-select: none;
-    text-align: center;
-}
-
-.grid {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-}
-
-.card {
-    position: relative;
-    background: #0000006c;
-    border-radius: 12px;
-    padding: 1.5rem 2rem;
-    width: 100%;
-    max-width: 400px;
-    margin-bottom: 2rem;
-    z-index: 0;
-}
-
-.card:hover {
-    transition: all .3s ease;
-    background: linear-gradient(#3d3d3db9, #27272760);
-    box-shadow:
-        0 0 5px rgba(98, 171, 255, 0.15),
-        inset 0 0 15px rgba(19, 121, 255, 0.1);
-}
-
-.cardTitle {
-    margin-bottom: 1rem;
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: #fcfcfc;
-    border-bottom: 2px solid #ffffff71;
-    padding-bottom: 0.5rem;
-    user-select: none;
-}
-
-.empty {
-    color: #5c677d;
-    font-style: italic;
-    user-select: none;
-}
-
-.statList,
-.currencyList,
-.userDataList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    max-height: 180px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: #fcfcfc transparent;
-}
-
-.statItem,
-.currencyItem,
-.userDataItem {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.4rem 0;
-    border-bottom: 1px solid #222d38;
-    font-weight: 600;
-    user-select: text;
-}
-
-.statName,
-.currencyCode,
-.userDataKey {
-    color: #ffffff71;
-    letter-spacing: 0.05em;
-}
-
-.statValue,
-.currencyAmount,
-.userDataValue {
-    color: #cfd8dc;
-    font-weight: 700;
-}
-
-.statList::-webkit-scrollbar,
-.currencyList::-webkit-scrollbar,
-.userDataList::-webkit-scrollbar {
-    width: 8px;
-}
-
-.statList::-webkit-scrollbar-thumb,
-.currencyList::-webkit-scrollbar-thumb,
-.userDataList::-webkit-scrollbar-thumb {
-    background: #fcfcfc;
-    border-radius: 4px;
-}
-
-@media (max-width: 480px) {
-    .page {
-        padding: 1rem;
-    }
-
-    .title {
-        font-size: 2rem;
-    }
-}
-
-.skeleton {
-    background-color: #e0e0e0;
-    border-radius: 4px;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 8px;
-    min-height: 20px;
-}
-
-.skeleton::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -150px;
-    height: 100%;
-    width: 150px;
-    background: linear-gradient(90deg,
-            transparent,
-            rgba(255, 255, 255, 0.3),
-            transparent);
-    animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-    100% {
-        left: 100%;
-    }
-}
-
-.skeleton,
-.skeleton-title,
-.skeleton-item,
-.skeleton-chart {
-    position: relative;
-    overflow: hidden;
-    background-color: #868686;
-    border-radius: 4px;
-    user-select: none;
-    transition: background-color 0.3s ease;
-}
-
-.skeleton::after,
-.skeleton-title::after,
-.skeleton-item::after,
-.skeleton-chart::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -150px;
-    height: 100%;
-    width: 150px;
-    background: linear-gradient(90deg,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 0.4) 50%,
-            rgba(255, 255, 255, 0) 100%);
-    animation: shimmer 1.5s infinite;
-    will-change: left;
-}
-
-@keyframes shimmer {
-    0% {
-        left: -150px;
-    }
-
-    100% {
-        left: 100%;
-    }
-}
-
-.skeleton-title {
-    width: 60%;
-    height: 24px;
-    margin-bottom: 12px;
-}
-
-.skeleton-item {
-    width: 100%;
-    height: 18px;
-    margin-bottom: 8px;
-}
-
-.skeleton-chart {
-    width: 100%;
-    height: 200px;
-    border-radius: 8px;
-}
-
-@keyframes pulse {
-
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.6;
-    }
-}
-
-.skeleton,
-.skeleton-title,
-.skeleton-item,
-.skeleton-chart {
-    animation: pulse 1.5s ease-in-out infinite;
-}
-
-.friendPlayfabID {
-    color: rgb(110, 110, 110);
-}
-
-.inventoryList,
-.friendList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.inventoryItem,
-.friendItem {
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #222;
-    font-size: 0.9rem;
-}
-
-.inventoryItem:last-child,
-.friendItem:last-child {
-    border-bottom: none;
-}
-
-.inventoryList,
-.friendsList {
-    list-style: none;
-    padding-left: 0;
-}
-
-.inventoryItem,
-.friendItem {
-    padding: 6px 0;
-    border-bottom: 1px solid #ddd;
-}
-
-.status {
-    margin-top: 8px;
-    font-weight: 600;
-    color: green;
-}
-
-.copyButton {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1rem;
-    margin-left: 8px;
-    color: #0070f3;
-    transition: color 0.2s ease;
-}
-
-.copyButton:hover {
-    color: #0051a3;
-}
-
-.copiedText {
-    position: absolute;
-    margin-left: 10px;
-    color: green;
-    font-weight: 600;
-    font-size: 0.8rem;
-}
-
-.skeleton {
-    background-color: #ddd;
-    border-radius: 4px;
-    animation: pulse 1.5s ease-in-out infinite;
-    user-select: none;
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.4;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-.inventoryList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: 1rem;
-}
-
-.inventoryItem {
-  background: #121212;
-  border: 1px solid #2a2a2a;
-  padding: 1rem;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  transition: background 0.2s ease;
-}
-
-.inventoryItem:hover {
-  background: #1a1a1a;
-}
-
-.currencySelect {
-  background: #1f1f1f;
-  border: 1px solid #3a3a3a;
-  color: #fff;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  font-size: 0.6rem;
-  appearance: none;
-  outline: none;
-}
-
-.buyButton {
-  background-color: #720f28;
-  color: #ffffff;
-  padding: 0.45rem 1rem;
-  border-radius: 2px;
-  border: none;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.buyButton:hover {
-  background-color: #720f286b;
-}
-
-.skeleton-title {
-  height: 1.2rem;
-  width: 40%;
-  background: #2b2b2b;
-  border-radius: 6px;
-  margin-bottom: 1rem;
-}
-
-.skeleton-item {
-  height: 4rem;
-  background: #2b2b2b;
-  border-radius: 10px;
-  margin-bottom: 1rem;
-}
-
-
-/* Skeleton Loading for Store Cards */
-.storeCardSkeleton {
-    padding: 1.5rem 2rem;
-    border-radius: 12px;
-    background: #0000006c;
-}
-
-.skeletonTitle {
-    width: 60%;
-    height: 24px;
-    margin-bottom: 12px;
-    border-radius: 4px;
-    background-color: #868686;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-}
-
-.skeletonItem {
-    width: 100%;
-    height: 18px;
-    margin-bottom: 8px;
-    border-radius: 4px;
-    background-color: #868686;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-}
-
-.skeletonButton {
-    width: 100%;
-    height: 36px;
-    margin-top: 1rem;
-    border-radius: 12px;
-    background-color: #868686;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-}
-
-.skeletonTitle::after,
-.skeletonItem::after,
-.skeletonButton::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -150px;
-    height: 100%;
-    width: 150px;
-    background: linear-gradient(90deg,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 0.4) 50%,
-            rgba(255, 255, 255, 0) 100%);
-    animation: shimmer 1.5s infinite;
-    will-change: left;
-}
-
-@keyframes shimmer {
-    0% {
-        left: -150px;
-    }
-
-    100% {
-        left: 100%;
-    }
-}
-
-.useButton {
-    background-color: #ffb22c;
-    color: #222d38;
-    font-weight: 700;
-    padding: 0.4rem 1rem;
-    border-radius: 10px;
-    border: none;
-    cursor: pointer;
-    font-size: 1rem;
-    margin-left: 12px;
-    transition: background 0.2s, color 0.2s;
-    box-shadow: 0 2px 8px #0002;
-    user-select: none;
-}
-
-.useButton:hover:not(:disabled) {
-    background-color: #ff9500;
-    color: #fff;
-}
-
-.useButton:disabled {
-    background-color: #bdbdbd;
-    color: #888;
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.focusedOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.focusedCard {
-    background: #0e0d0d;
-    color: #222d38;
-    border-radius: 16px;
-    padding: 2.5rem 2rem 2rem 2rem;
-    min-width: 340px;
-    min-height: 240px;
-    max-width: 90vw;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 8px 32px #0004;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.focusedClose {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    background: none;
-    border: none;
-    font-size: 2rem;
-    cursor: pointer;
-    color: #222d38;
-    z-index: 10;
-    transition: color 0.2s;
-}
-
-.focusedClose:hover {
-    color: #ff073a;
-}
-
-.couponItem {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #121212;
-    border: 1px solid #2a2a2a;
-    padding: 0.75rem 1rem;
-    border-radius: 10px;
-    margin-bottom: 0.75rem;
-    transition: background 0.2s;
-}
-
-.couponItem:hover {
-    background: #1a1a1a;
-}
-
-.couponInfo {
-    display: flex;
-    flex-direction: column;
-}
-
-.couponLabel {
-    font-size: 0.7rem;
-    color: #aaa;
-    margin-bottom: 0.25rem;
-}
-
-.couponCode {
-    font-size: .5rem;
-    font-weight: 600;
-    color: #868686;
-}
-
-.redeemButton {
-    background: #592891;
-    color: #d8d8d8;
-    border: none;
-    padding: 0.3rem .5rem;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-
-.redeemButton:hover {
-    background: #331555;
-}
\ No newline at end of file
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index d4c18eb..c09b1f6 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -2,46 +2,39 @@
 
 import { useSession } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
-import styles from './dashboard.module.css';
 import { useEffect, useState, useRef } from 'react';
 import {
     playFabLoginWithAzureAD,
     getUserDataFromPlayFab,
-    getPlayerStatistics,
     getUserInventory,
-    getFriendsList,
     getStoreItems,
     purchaseStoreItem,
     useInventoryItem,
-    updatePlayFabUserData
+    updatePlayFabUserData,
+    getPlayerStatistics,
 } from '@/lib/playfab/playfab';
 import { generateCouponCode } from '@/lib/ticket/ticket';
-import { Bar, Pie } from 'react-chartjs-2';
 import Popup from '../../components/popup/Popup';
 import { useRouter } from 'next/navigation';
 
-import {
-    Chart as ChartJS,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    Title,
-    Tooltip,
-    Legend,
-    ArcElement,
-} from 'chart.js';
-import { Doughnut } from 'react-chartjs-2';
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);
+// Dashboard Components
+import HeroSection from '@/components/dashboard/HeroSection';
+import PlaytimeChart from '@/components/dashboard/PlaytimeChart';
+import Inventory from '@/components/dashboard/Inventory';
+import Store from '@/components/dashboard/Store';
+import GoldenTickets from '@/components/dashboard/GoldenTickets';
+import VirtualCurrencies from '@/components/dashboard/VirtualCurrencies';
+import PlayerStatsChart from '@/components/dashboard/PlayerStatsChart';
 
 const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID ?? '';
 
 interface PlayerStat {
     StatisticName: string;
-    Value: number;
+    Value: string;
     Version?: number;
 }
 
+
 interface UserDataRecord {
     Value: string;
     LastUpdated?: string;
@@ -58,11 +51,6 @@ interface InventoryItem {
     RemainingUses?: number;
 }
 
-interface Friend {
-    FriendPlayFabId: string;
-    Username?: string;
-    TitleDisplayName?: string;
-}
 
 interface StoreItem {
     ItemId: string;
@@ -71,7 +59,6 @@ interface StoreItem {
     VirtualCurrencyPrices?: { [currencyCode: string]: number };
 }
 
-
 const arenaTaglines = [
     "The Ultimate Coffee Break Showdown",
     "Where Office Legends Are Made",
@@ -99,8 +86,6 @@ export default function Dashboard() {
     const [virtualCurrency, setVirtualCurrency] = useState<VirtualCurrency>({});
     const [userData, setUserData] = useState<Record<string, string>>({});
     const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);
-    const [friends, setFriends] = useState<Friend[]>([]);
-    const [friendAddStatus, setFriendAddStatus] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [loading, setLoading] = useState<boolean>(false);
     const [sessionTicket, setSessionTicket] = useState<string | null>(null);
@@ -112,12 +97,9 @@ export default function Dashboard() {
     const [popup, setPopup] = useState<{ message: string, type: 'success' | 'error' } | null>(null);
     const popupTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-
     const catalogVersion = '1';
     const storeId = 'Ticket Store';
 
-
-
     useEffect(() => {
         if (status !== 'authenticated' || !session) return;
 
@@ -127,7 +109,6 @@ export default function Dashboard() {
         const loginAndLoadData = async () => {
             setLoading(true);
             setError(null);
-            setFriendAddStatus(null);
 
             try {
                 let _sessionTicket = null;
@@ -169,7 +150,6 @@ export default function Dashboard() {
                     }
                 }
 
-
                 setPlayFabId(_playFabId);
                 setSessionTicket(_sessionTicket);
 
@@ -191,11 +171,12 @@ export default function Dashboard() {
                     await handleUnAuthorized(userDataRes.error, loginAndLoadData);
                 }
 
-
-                // Player Stats
+                // Player Statistics
                 const statsRes = await getPlayerStatistics(_sessionTicket, titleId);
                 if (statsRes.data?.Statistics) {
                     setPlayerStats(statsRes.data.Statistics);
+                } else {
+                    setPlayerStats([]); // Set empty array if no stats
                 }
 
                 // Inventory & Virtual Currency
@@ -205,11 +186,6 @@ export default function Dashboard() {
                     setInventoryItems(inventoryRes.data.Inventory || []);
                 }
 
-                // Friends
-                const friendsRes = await getFriendsList(_sessionTicket, titleId);
-                if (friendsRes.data?.Friends) {
-                    setFriends(friendsRes.data.Friends);
-                }
 
                 // Store
                 const storeRes = await getStoreItems(_sessionTicket, titleId, storeId, catalogVersion);
@@ -217,7 +193,6 @@ export default function Dashboard() {
                     setStoreItems(storeRes.data.Store);
                 }
 
-
             } catch (err: any) {
                 console.log("UnAuthorized !");
                 const errorMessage = err?.message || 'Unknown error';
@@ -259,7 +234,14 @@ export default function Dashboard() {
     }
 
     if (status === 'loading') {
-        return <div className={styles.page}>Loading session...</div>;
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-16 h-16 border-4 border-slate-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+                    <p className="text-slate-700 text-lg font-medium">Loading your arena...</p>
+                </div>
+            </div>
+        );
     }
 
     if (!session) {
@@ -274,137 +256,10 @@ export default function Dashboard() {
         });
     };
 
-    const playerStatsChartData = {
-        labels: playerStats.map((stat) => stat.StatisticName),
-        datasets: [
-            {
-                label: 'Value',
-                data: playerStats.map((stat) => stat.Value),
-                backgroundColor: [
-                    '#ff073a',
-                    '#2655FF',
-                ],
-                borderColor: [
-                    '#ffff',
-                ],
-                borderWidth: 1,
-            },
-        ],
-    };
-
-
     const totalSeconds = parseInt(process.env.NEXT_PUBLIC_DAILY_PLAYTIME_LIMIT || '0');
-
     const playtimeSecondsStr = userData.playtime_seconds || '0';
     const playtimeSeconds = parseInt(playtimeSecondsStr, 10) || 0;
 
-    const data = {
-        labels: ['Played', 'Remaining'],
-        datasets: [
-            {
-                data: [playtimeSeconds, totalSeconds - playtimeSeconds],
-                backgroundColor: ['#1a73e8', '#e0e0e0'],
-                borderWidth: 0,
-                cutout: '80%',
-            },
-        ],
-    };
-
-    const options = {
-        responsive: true,
-        cutout: '80%',
-        plugins: {
-            legend: {
-                display: false,
-            },
-            tooltip: {
-                callbacks: {
-                    label: function (context: any) {
-                        const label = context.label || '';
-                        const value = context.parsed || 0;
-                        if (label === 'Played') {
-                            return `${label}: ${value} sec (${Math.floor(value / 60)} min)`;
-                        }
-                        if (label === 'Remaining') {
-                            return `${label}: ${value} sec (${Math.floor(value / 60)} min)`;
-                        }
-                        return `${label}: ${value}`;
-                    },
-                },
-            },
-        },
-    };
-
-
-
-
-    const virtualCurrencyLabels = Object.keys(virtualCurrency);
-    const virtualCurrencyValues = Object.values(virtualCurrency);
-    const virtualCurrencyChartData = {
-        labels: virtualCurrencyLabels,
-        datasets: [
-            {
-                label: 'Arena Economy',
-                data: virtualCurrencyValues,
-                backgroundColor: [
-                    '#FFB22C',
-                    '#ff073a',
-                ],
-                borderWidth: 1,
-            },
-        ],
-    };
-
-    const StatisticNameWithEmoji = (name: string): string => {
-        let prefix: string;
-        switch (name) {
-            case "Games Played":
-                prefix = "🎲 "
-                break;
-            case "Trophies":
-                prefix = "🏆 ";
-                break;
-            default:
-                prefix = ""
-                break;
-        }
-        return prefix + name;
-    }
-
-    const handleBuyStoreItem = async (item: StoreItem, price: number, selectedCurrency: string) => {
-        if (!sessionTicket) return;
-        setIsBuying(true);
-
-        try {
-            const res = await purchaseStoreItem(
-                sessionTicket,
-                titleId,
-                storeId,
-                catalogVersion,
-                item.ItemId,
-                price,
-                selectedCurrency
-            );
-
-            if (res?.error) {
-                showPopup(`Purchase failed: ${res.errorMessage || 'Unknown error'}`, 'error');
-            } else {
-                showPopup(`Purchased ${item.DisplayName || item.ItemId} with ${selectedCurrency}!`, 'success');
-
-                const refreshedInventory = await getUserInventory(sessionTicket, titleId);
-                if (refreshedInventory?.data) {
-                    setInventoryItems(refreshedInventory.data.Inventory || []);
-                    setVirtualCurrency(refreshedInventory.data.VirtualCurrency || {});
-                }
-            }
-        } catch (err) {
-            showPopup('Purchase failed due to a network or unexpected error.', 'error');
-            console.error(err);
-        } finally {
-            setIsBuying(false);
-        }
-    };
-
     const handleUseInventoryItem = async (item: InventoryItem) => {
         if (!sessionTicket) return;
         try {
@@ -451,8 +306,183 @@ export default function Dashboard() {
         popupTimeoutRef.current = setTimeout(() => setPopup(null), 3000);
     };
 
+    const handleRedeemCoupon = async (coupon: string) => {
+        try {
+            showPopup(`Redeeming golden ticket: ${coupon}`, 'success');
+
+            // Here you would typically send the coupon to your backend for processing
+            // For now, we'll just remove it from the local state
+            let coupons: string[] = [];
+            try {
+                coupons = userData.Coupons ? JSON.parse(userData.Coupons) : [];
+            } catch {
+                coupons = [];
+            }
+
+            // Remove the redeemed coupon
+            const updatedCoupons = coupons.filter(c => c !== coupon);
+
+            if (sessionTicket) {
+                await updatePlayFabUserData(sessionTicket, titleId, {
+                    Coupons: JSON.stringify(updatedCoupons)
+                });
+
+                // Update local state
+                setUserData((prev) => ({
+                    ...prev,
+                    Coupons: JSON.stringify(updatedCoupons)
+                }));
+            }
+
+            showPopup(`Golden ticket redeemed successfully! Check your email for details.`, 'success');
+        } catch (error) {
+            showPopup('Failed to redeem golden ticket. Please try again.', 'error');
+            console.error('Redeem error:', error);
+        }
+    };
+
+
+    const handlePurchaseItem = async (item: any, currency: string) => {
+        if (!sessionTicket) {
+            showPopup('Please log in to make purchases.', 'error');
+            return;
+        }
+
+        try {
+            setIsBuying(true);
+            console.log('Starting purchase process:', {
+                item: item.ItemId,
+                displayName: item.DisplayName,
+                currency,
+                storeId,
+                catalogVersion
+            });
+
+            showPopup(`Purchasing ${item.DisplayName || item.ItemId} with ${currency}...`, 'success');
+
+            // Calculate the price in the selected currency
+            const originalPrice = item.VirtualCurrencyPrices ? Object.values(item.VirtualCurrencyPrices)[0] || 0 : 0;
+            const originalCurrency = item.VirtualCurrencyPrices ? Object.keys(item.VirtualCurrencyPrices)[0] || 'AC' : 'AC';
+
+            console.log('Item price details:', {
+                itemId: item.ItemId,
+                virtualCurrencyPrices: item.VirtualCurrencyPrices,
+                originalPrice,
+                originalCurrency,
+                selectedCurrency: currency
+            });
+
+            let finalPrice = originalPrice;
+            let actualCurrency = currency;
+
+            // Check if the item actually supports the selected currency
+            if (item.VirtualCurrencyPrices && !item.VirtualCurrencyPrices[currency]) {
+                console.log('Item does not support selected currency, using conversion...');
+
+                // Apply conversion rate (you can customize these rates)
+                const conversionRates: { [key: string]: number } = {
+                    'AC': 1, 'GC': 0.1, 'TC': 5, 'SC': 1.5, 'BC': 2, 'PC': 0.05
+                };
+                const originalRate = Number(conversionRates[originalCurrency]) || 1;
+                const targetRate = Number(conversionRates[currency]) || 1;
+                const numericOriginalPrice = typeof originalPrice === 'number' ? originalPrice : Number(originalPrice) || 0;
+                finalPrice = Math.ceil(numericOriginalPrice * (originalRate / targetRate));
+
+                console.log('Currency conversion:', {
+                    originalPrice,
+                    originalCurrency,
+                    targetCurrency: currency,
+                    originalRate,
+                    targetRate,
+                    finalPrice
+                });
+            } else if (item.VirtualCurrencyPrices && item.VirtualCurrencyPrices[currency]) {
+                // Item natively supports this currency
+                finalPrice = item.VirtualCurrencyPrices[currency];
+                console.log('Using native currency price:', finalPrice, currency);
+            }
+
+            // Check if player has enough currency
+            const playerAmount = Number(virtualCurrency?.[currency]) || 0;
+            if (playerAmount < Number(finalPrice)) {
+                showPopup(`Insufficient ${currency}. You need ${finalPrice} but have ${playerAmount}.`, 'error');
+                return;
+            }
+
+            console.log('Making purchase request:', {
+                sessionTicket: sessionTicket ? 'present' : 'missing',
+                titleId,
+                storeId,
+                catalogVersion,
+                itemId: item.ItemId,
+                finalPrice,
+                currency
+            });
+
+            // For multi-currency purchases, we need to handle this differently
+            // If the item doesn't natively support the selected currency, we should:
+            // 1. First convert the player's currency to the item's native currency
+            // 2. Then purchase with the native currency
+
+            let purchaseResult;
+
+            if (item.VirtualCurrencyPrices && item.VirtualCurrencyPrices[currency]) {
+                // Item natively supports this currency - direct purchase
+                console.log('Direct purchase with native currency');
+                purchaseResult = await purchaseStoreItem(sessionTicket, titleId, storeId, catalogVersion, item.ItemId, Number(finalPrice), currency);
+            } else {
+                // Need to use original currency for purchase
+                console.log('Purchase requires currency conversion - using original currency for API call');
+
+                // For now, let's try purchasing with the original currency and original price
+                // In a real implementation, you might want to implement currency exchange first
+                purchaseResult = await purchaseStoreItem(sessionTicket, titleId, storeId, catalogVersion, item.ItemId, Number(originalPrice), originalCurrency);
+
+                // If successful, deduct the converted amount from player's selected currency
+                if (purchaseResult && !purchaseResult.error) {
+                    console.log('Purchase successful, need to handle currency conversion on backend');
+                    // Note: In a real implementation, you'd handle the currency conversion
+                    // through PlayFab's AddUserVirtualCurrency and SubtractUserVirtualCurrency APIs
+                }
+            }
+
+            console.log('Purchase result:', purchaseResult);
+
+            if (purchaseResult?.error) {
+                const errorMsg = purchaseResult.error.errorMessage || purchaseResult.errorMessage || 'Unknown error';
+                const errorCode = purchaseResult.error.code || purchaseResult.error || 'Unknown code';
+                showPopup(`Purchase failed: ${errorMsg} (Code: ${errorCode})`, 'error');
+                console.error('Purchase error details:', purchaseResult.error || purchaseResult);
+
+                // Add more specific error handling
+                if (errorMsg.toLowerCase().includes('item not found')) {
+                    showPopup(`Item "${item.ItemId}" not found in store "${storeId}". Please check PlayFab configuration.`, 'error');
+                } else if (errorMsg.toLowerCase().includes('insufficient')) {
+                    showPopup(`Insufficient ${currency}. You need ${finalPrice} but have ${playerAmount}.`, 'error');
+                }
+            } else {
+                showPopup(`Successfully purchased ${item.DisplayName || item.ItemId} for ${finalPrice} ${currency}!`, 'success');
+
+                // Refresh inventory and currency data
+                const refreshedInventory = await getUserInventory(sessionTicket, titleId);
+                if (refreshedInventory?.data) {
+                    setInventoryItems(refreshedInventory.data.Inventory || []);
+                    setVirtualCurrency(refreshedInventory.data.VirtualCurrency || {});
+                }
+            }
+        } catch (error) {
+            showPopup('Purchase failed due to a network error. Please try again.', 'error');
+            console.error('Purchase error:', error);
+        } finally {
+            setIsBuying(false);
+        }
+    };
+
     return (
-        <div className={styles.page}>
+        <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-slate-900 transition-colors duration-300 relative overflow-hidden">
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(139,92,246,0.1)_0%,transparent_60%)]"></div>
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(59,130,246,0.08)_0%,transparent_60%)]"></div>
+            <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
             {popup && (
                 <Popup
                     message={popup.message}
@@ -460,297 +490,91 @@ export default function Dashboard() {
                     onClose={() => setPopup(null)}
                 />
             )}
-            {tagline && <h1 className={styles.tagline}># Arena: {tagline}</h1>}
-            <div className={styles.header}>
-                <h1 className={styles.title}>Welcome 🎉, {session.user?.name ?? 'Player'}</h1>
-
-                {playFabId && (
-                    <span className={styles.playfabId}>
-                        ID: {playFabId}{' '}
-                        <button
-                            onClick={copyPlayFabId}
-                            className={styles.copyButton}
-                            aria-label="Copy PlayFab ID"
-                            type="button"
-                        >
-                            📋
-                        </button>
-                        {copied && <small className={styles.copiedText}>Copied!</small>}
-                    </span>
-                )}
+
+
+            {/* Hero Section */}
+            <div className="relative z-10">
+                <HeroSection
+                    tagline={tagline}
+                    playFabId={playFabId}
+                    onCopyId={copyPlayFabId}
+                    copied={copied}
+                />
             </div>
-            {error && <p className={styles.error}>Error: {error}</p>}
-
-            <div className={styles.grid}>
-                {/* Player Statistics Card */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>Statistics</h2>
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(1)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                            <div className={styles['skeleton-chart']}></div>
-                        </>
-                    ) : playerStats.length === 0 ? (
-                        <p className={styles.empty}>No statistics available.</p>
-                    ) : (
-                        <>
-                            <ul className={styles.statList}>
-                                {playerStats.map(({ StatisticName, Value }) => (
-                                    <li key={StatisticName} className={styles.statItem}>
-                                        <span className={styles.statName}>{StatisticNameWithEmoji(StatisticName)}</span>
-                                        <span className={styles.statValue}>{Value}</span>
-                                    </li>
-                                ))}
-                            </ul>
-                            <Bar
-                                data={playerStatsChartData}
-                                options={{
-                                    responsive: true,
-                                    plugins:
-                                    {
-                                        legend: { display: false },
-                                        title: { display: true, text: 'Player Statistics Chart' },
-                                    },
-                                    scales: {
-                                        y: { beginAtZero: true },
-                                    },
-                                }}
-                            />
-                        </>
-                    )}
-                </section>
-
-                {/* Inventory Card */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>Inventory</h2>
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(1)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                        </>
-                    ) : inventoryItems.length === 0 ? (
-                        <p className={styles.empty}>No items in inventory.</p>
-                    ) : (
-                        <ul className={styles.inventoryList}>
-                            {inventoryItems.map((item) => (
-                                <li key={item.ItemInstanceId} className={styles.inventoryItem}>
-                                    <strong>{item.DisplayName || item.ItemId}</strong> - Qty: {item.RemainingUses ?? 1}
-                                    <button
-                                        className={styles.useButton}
-                                        style={{ marginLeft: 12, padding: '0.3rem 0.8rem', fontSize: '0.95rem' }}
-                                        onClick={() => handleUseInventoryItem(item)}
-                                        disabled={isBuying}
-                                    >
-                                        Use
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </section>
-
-                {/* Friends Card */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>Friends</h2>
-
-                    {friendAddStatus && <p className={styles.status}>{friendAddStatus}</p>}
-
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(1)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                        </>
-                    ) : friends.length === 0 ? (
-                        <p className={styles.empty}>No friends found.</p>
-                    ) : (
-                        <ul className={styles.friendsList}>
-                            {friends.map((friend) => (
-                                <li key={friend.FriendPlayFabId} className={styles.friendItem}>
-                                    <p> <b>{friend.TitleDisplayName}</b> <span className={styles.friendPlayfabID}>{friend.FriendPlayFabId}</span></p>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </section>
-
-                {/* Playtime Card */}
-                <section className={styles.card}>
-                    <h2 className={styles.cardTitle}>Playtime</h2>
-
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(1)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                            <div className={styles['skeleton-chart']}></div>
-                        </>
-                    ) : (
-                        <>
-                            <Doughnut data={data} options={options} />
-                            <p style={{ textAlign: 'center', marginTop: '1rem', fontWeight: 'bold' }}>
-                                {`Played: ${Math.floor(playtimeSeconds / 60)} min / ${Math.floor(totalSeconds / 60)} min`}
-                            </p>
-                        </>)}
-                </section>
-
-
-                {/* Virtual Currency Card */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>Economy</h2>
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(1)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                            <div className={styles['skeleton-chart']}></div>
-                        </>
-                    ) : virtualCurrencyLabels.length === 0 ? (
-                        <p className={styles.empty}>No economy available.</p>
-                    ) : (
-                        <>
-                            <ul className={styles.currencyList}>
-                                {virtualCurrencyLabels.map((currency) => (
-                                    <li key={currency} className={styles.currencyItem}>
-                                        <span className={styles.currencyCode}>{currency}</span>
-                                        <span className={styles.currencyAmount}>
-                                            {virtualCurrency[currency].toLocaleString('en-IN')}
-                                        </span>
-                                    </li>
-                                ))}
-                            </ul>
-                            <Pie
-                                data={virtualCurrencyChartData}
-                                options={{
-                                    responsive: true,
-                                    plugins: {
-                                        legend: { position: 'bottom' },
-                                        title: { display: true, text: 'Arena economy distribution' },
-                                    },
-                                }}
-                            />
-                        </>
-                    )}
-                </section>
-
-                {/* Store */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>Store</h2>
-
-                    {loading ? (
-                        <>
-                            <div className={styles['skeleton-title']}></div>
-                            {[...Array(3)].map((_, i) => (
-                                <div key={i} className={styles['skeleton-item']}></div>
-                            ))}
-                        </>
-                    ) : storeItems.length === 0 ? (
-                        <p className={styles.empty}>No store items available.</p>
-                    ) : (
-                        <ul className={styles.inventoryList}>
-                            {storeItems.map((item) => {
-                                const prices = item.VirtualCurrencyPrices || {};
-                                const itemCurrencies = Object.keys(prices);
-                                const selectedCurrency = currencySelections[item.ItemId] || itemCurrencies[0];
-                                const price = prices[selectedCurrency];
-
-                                return (
-                                    <li key={item.ItemId} className={styles.inventoryItem}>
-                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                            <strong>{item.DisplayName || item.ItemId}</strong>
-                                            {/* <small>Catalog: {item.CatalogVersion || catalogVersion}</small> */}
-
-                                            {/* Currency selector */}
-                                            <select
-                                                className={styles.currencySelect}
-                                                value={selectedCurrency}
-                                                onChange={(e) =>
-                                                    setCurrencySelections((prev) => ({
-                                                        ...prev,
-                                                        [item.ItemId]: e.target.value,
-                                                    }))
-                                                }
-                                                style={{ maxWidth: '120px' }}
-                                            >
-                                                {itemCurrencies.map((cur) => (
-                                                    <option key={cur} value={cur}>
-                                                        {cur} ({prices[cur]})
-                                                    </option>
-                                                ))}
-                                            </select>
-                                        </div>
-
-                                        <div style={{ marginTop: '0.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                            <span style={{ fontSize: '1rem', color: '#888' }}>
-                                                Price: {price.toLocaleString('en-IN')} {selectedCurrency}
-                                            </span>
-                                            <button
-                                                className={styles.buyButton}
-                                                onClick={() => { handleBuyStoreItem(item, price, selectedCurrency) }}
-                                            >
-                                                Buy
-                                            </button>
-                                        </div>
-                                    </li>
-                                );
-                            })}
-                        </ul>
-                    )}
-                </section>
-
-                {/* Coupons Section */}
-                <section
-                    className={styles.card}
-                    style={{ cursor: 'pointer' }}
-                >
-                    <h2 className={styles.cardTitle}>My Coupons</h2>
-                    {userData.Coupons && JSON.parse(userData.Coupons).length > 0 ? (
-                        <ul className={styles.userDataList}>
-                            {JSON.parse(userData.Coupons).map((code: string, idx: number) => (
-                                <li key={idx} className={styles.couponItem}>
-                                    <div className={styles.couponInfo}>
-                                        <span className={styles.couponLabel}>Coupon:</span>
-                                        <span className={styles.couponCode}>{code}</span>
-                                    </div>
-                                    <button
-                                        className={styles.redeemButton}
-                                        onClick={() => router.push(`coupon/redeem?code=${code}`)}
-                                    >
-                                        Redeem
-                                    </button>
-                                </li>
-                            ))}
-                        </ul>
-
-                    ) : (
-                        <p className={styles.empty}>No coupons yet.</p>
-                    )}
-                </section>
+
+            {/* Main Content */}
+            <div className="relative z-10 max-w-7xl mx-auto px-2 sm:px-3 lg:px-4 pb-2">
+                {error && (
+                    <div className="mb-2 bg-red-900/20 border border-red-500/30 text-red-300 px-2 py-1 rounded-lg shadow-lg backdrop-blur-sm">
+                        <div className="flex items-center space-x-2">
+                            <svg className="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                            </svg>
+                            <span className="font-medium text-xs text-red-200">Error: {error}</span>
+                        </div>
+                    </div>
+                )}
+
+
+                {/* Player Statistics Chart */}
+                <div className="mb-2">
+                    <PlayerStatsChart
+                        gamesPlayed={parseInt(playerStats.find(s => ['Games Played', 'GamesPlayed', 'Games', 'TotalGames', 'GameCount', 'Matches', 'MatchesPlayed'].includes(s.StatisticName))?.Value || '0')}
+                        trophies={parseInt(playerStats.find(s => ['Trophies', 'Achievements', 'Awards'].includes(s.StatisticName))?.Value || '0')}
+                        loading={loading}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
+                    {/* Playtime Chart */}
+                    <PlaytimeChart
+                        playtimeSeconds={playtimeSeconds}
+                        totalSeconds={totalSeconds}
+                        loading={loading}
+                    />
+
+                    {/* Virtual Currencies */}
+                    <VirtualCurrencies
+                        virtualCurrency={virtualCurrency}
+                        loading={loading}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
+                    {/* Inventory */}
+                    <Inventory
+                        inventoryItems={inventoryItems}
+                        loading={loading}
+                        onUseItem={handleUseInventoryItem}
+                        isBuying={isBuying}
+                    />
+
+                    {/* Golden Tickets */}
+                    <GoldenTickets
+                        coupons={(() => {
+                            try {
+                                return userData.Coupons ? JSON.parse(userData.Coupons) : [];
+                            } catch {
+                                return [];
+                            }
+                        })()}
+                        loading={loading}
+                        onRedeem={handleRedeemCoupon}
+                    />
+                </div>
+
+                {/* Content Grid */}
+                <div className="mt-2">
+                    {/* Store */}
+                    <Store
+                        storeItems={storeItems}
+                        loading={loading}
+                        virtualCurrency={virtualCurrency}
+                        onPurchase={handlePurchaseItem}
+                    />
+                </div>
 
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index b49cb36..2ddb5f7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,21 +1,77 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  /* Modern Light Theme Colors - Neutral Palette Updated */
+  --color-primary-50: #f8fafc;
+  --color-primary-100: #f1f5f9;
+  --color-primary-200: #e2e8f0;
+  --color-primary-300: #cbd5e1;
+  --color-primary-400: #94a3b8;
+  --color-primary-500: #64748b;
+  --color-primary-600: #475569;
+  --color-primary-700: #334155;
+  --color-primary-800: #1e293b;
+  --color-primary-900: #0f172a;
+  --color-primary-950: #020617;
 
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-400: #94a3b8;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  --color-secondary-950: #020617;
 
-:root {
-  /* #121214 */
-  /* 1A1A1E */
-  --background: #121214;
-  --foreground: #ffffff;
-}
+  --color-accent-50: #f0fdf4;
+  --color-accent-100: #dcfce7;
+  --color-accent-200: #bbf7d0;
+  --color-accent-300: #86efac;
+  --color-accent-400: #4ade80;
+  --color-accent-500: #22c55e;
+  --color-accent-600: #16a34a;
+  --color-accent-700: #15803d;
+  --color-accent-800: #166534;
+  --color-accent-900: #14532d;
+  --color-accent-950: #052e16;
+
+  /* Light Theme Backgrounds */
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f8fafc;
+  --color-background-tertiary: #f1f5f9;
+  --color-background-card: #ffffff;
+  --color-background-muted: #f8fafc;
+
+  /* Light Theme Text */
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #64748b;
+  --color-text-accent: #475569;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  /* Borders and Shadows */
+  --color-border-light: #e2e8f0;
+  --color-border-medium: #cbd5e1;
+  --color-border-accent: #64748b;
+
+  /* Shadow Definitions */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Success, Warning, Error Colors */
+  --color-success: #22c55e;
+  --color-success-bg: #f0fdf4;
+  --color-warning: #f59e0b;
+  --color-warning-bg: #fffbeb;
+  --color-error: #ef4444;
+  --color-error-bg: #fef2f2;
 }
 
 html,
@@ -25,11 +81,12 @@ body {
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 * {
@@ -43,8 +100,31 @@ a {
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-primary-400);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary-500);
+}
+
+/* Selection colors */
+::selection {
+  background: var(--color-primary-100);
+  color: var(--color-text-primary);
+}
+
+::-moz-selection {
+  background: var(--color-primary-100);
+  color: var(--color-text-primary);
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index e41d62f..74aaf46 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,21 +32,23 @@ export default async function RootLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+    <html lang="en" className="dark">
+      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
         <SessionProvider session={session}>
           <UnitySessionProvider>
             <PlayTimeProvider>
               <PlayTimer />
-              <div style={{ display: 'flex', minHeight: '100vh' }}>
+               <div className="flex h-screen bg-gradient-to-br from-black via-gray-900 to-slate-900 transition-colors duration-300 relative overflow-hidden">
+                 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(139,92,246,0.1)_0%,transparent_60%)]"></div>
+                 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(59,130,246,0.08)_0%,transparent_60%)]"></div>
+                 <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
                 <SideBar />
-                <main style={{ flex: 1, paddingLeft: '5rem' }}>
+                <main className="flex-1 pl-20 overflow-y-auto">
                   {children}
                 </main>
               </div>
             </PlayTimeProvider>
           </UnitySessionProvider>
-
         </SessionProvider>
       </body>
     </html>
diff --git a/app/leaderboard/leaderboard.module.css b/app/leaderboard/leaderboard.module.css
deleted file mode 100644
index bb79f4e..0000000
--- a/app/leaderboard/leaderboard.module.css
+++ /dev/null
@@ -1,138 +0,0 @@
-.page {
-    height: 90vh;
-    /* full viewport height */
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 2rem;
-    background-color: #121212;
-    color: white;
-    box-sizing: border-box;
-}
-
-.info {
-    font-size: x-small;
-    color: rgba(255, 255, 255, 0.616);
-}
-
-.heading {
-    text-align: left;
-    margin: 0;
-    padding-left: 16px;
-    font-size: 2rem;
-    font-weight: bold;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
-.splitLayout {
-    flex: 1;
-    /* take remaining vertical space */
-    display: flex;
-    gap: 1rem;
-    overflow: hidden;
-}
-
-.leftPanel {
-    flex: 1;
-    /* half screen */
-    background-color: transparent;
-    border-radius: 8px;
-    overflow: hidden;
-    /* Ensure canvas fills this div */
-    display: flex;
-}
-
-.rightPanel {
-    flex: 1;
-    /* half screen */
-    display: flex;
-    flex-direction: column;
-    background-color: #1f1f1f;
-    border-radius: 8px;
-    padding: 1rem;
-    overflow-y: auto;
-}
-
-/* Sort controls */
-.sortControls {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-.sortControls label {
-    font-weight: 500;
-}
-
-.sortControls select {
-    background: #333;
-    border: none;
-    color: white;
-    padding: 0.3rem 0.6rem;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-/* Table styles */
-.table {
-    flex: 1;
-    overflow-y: auto;
-}
-
-.row {
-    display: grid;
-    grid-template-columns: 1fr 3fr 2fr;
-    padding: 0.5rem 1rem;
-    gap: 1.5rem;
-    border-bottom: 1px solid #333;
-    align-items: center;
-}
-
-.rowHeader {
-    color: #ffffff;
-}
-
-.header {
-    font-weight: 700;
-    border-bottom: 2px solid #555;
-}
-
-.skeletonRow {
-    animation: pulse 1.5s infinite ease-in-out;
-}
-
-.skeletonBox {
-    height: 1rem;
-    background: #444;
-    border-radius: 4px;
-}
-
-.animatedRow:hover {
-    background-color: #333;
-    transition: background-color 0.3s ease;
-}
-
-/* Pulse animation for skeleton */
-@keyframes pulse {
-
-    0%,
-    100% {
-        background-color: #444;
-    }
-
-    50% {
-        background-color: #555;
-    }
-}
-
-.playerinfo {
-    color: rgba(255, 255, 255, 0.555);
-    font-size: .8rem;
-    font-weight: 700;
-}
-
-.sortOptions {
-    color: rgb(255, 255, 255);
-    font-size: .8rem;
-}
\ No newline at end of file
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 783f42b..eadc40c 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -2,7 +2,6 @@
 
 import { useSession } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
-import styles from './leaderboard.module.css';
 import { useEffect, useState } from 'react';
 import {
     getLeaderboard,
@@ -97,8 +96,35 @@ export default function LeaderBoard() {
             (b[sortFieldMap[sortBy]] as number) - (a[sortFieldMap[sortBy]] as number)
     );
 
+    const getRankIcon = (rank: number) => {
+        switch (rank) {
+            case 1: return '1st';
+            case 2: return '2nd';
+            case 3: return '3rd';
+            default: return `#${rank}`;
+        }
+    };
+
+    const getRankStyle = (rank: number) => {
+        switch (rank) {
+            case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white';
+            case 2: return 'bg-gradient-to-r from-gray-400 to-gray-600 text-white';
+            case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white';
+            default: return 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300';
+        }
+    };
+
     if (status === 'loading') {
-        return <div className={styles.page}>Loading session...</div>;
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Leaderboard...</span>
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     if (!session) {
@@ -106,61 +132,157 @@ export default function LeaderBoard() {
     }
 
     return (
-        <div className={styles.page}>
-            <h1 className={styles.heading}>Leaderboard <p className={styles.info}># weekly</p></h1>
-
-            {/* Split container */}
-            <div className={styles.splitLayout}>
-                {/* Left: 3D Model */}
-                <div className={styles.leftPanel}>
-                    {leaders[0] && <Model name={leaders[0].name.split(' ')[0]} />}
-                </div>
-
-                {/* Right: Leaderboard Table */}
-                <div className={styles.rightPanel}>
-                    <div className={styles.sortControls}>
-                        <label htmlFor="sort-select">Sort by:</label>
-                        <select
-                            id="sort-select"
-                            value={sortBy}
-                            onChange={(e) => setSortBy(e.target.value as SortOption)}
-                        >
-                            <option value="Trophies" className={styles.sortOptions}>Trophies</option>
-                            <option value="Games Played" className={styles.sortOptions}>Games Played</option>
-                        </select>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Leaderboard</h1>
+                            <p className="text-slate-600 dark:text-slate-400 mt-2">Weekly competition rankings</p>
+                        </div>
+                        <div>
+                            <span className="inline-block bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 px-3 py-1 rounded-full text-sm font-medium">
+                                Top Players
+                            </span>
+                        </div>
                     </div>
+                </div>
+            </div>
 
-                    <div className={styles.table}>
-                        <div className={`${styles.row} ${styles.header}`}>
-                            <div className={styles.rowHeader}>Rank</div>
-                            <div className={styles.rowHeader}>Player</div>
-                            <div className={styles.rowHeader}>{sortBy}</div>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    {/* Champion Showcase */}
+                    <div className="lg:col-span-1">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 text-center">
+                                Current Champion
+                            </h2>
+                            
+                            {leaders[0] ? (
+                                <div className="text-center">
+                                    {/* 3D Model */}
+                                    <div className="h-64 mb-4 bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-800 rounded-lg overflow-hidden">
+                                        <Model name={leaders[0].name.split(' ')[0]} />
+                                    </div>
+                                    
+                                    <div className="space-y-2">
+                                        <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                                            {leaders[0].name}
+                                        </h3>
+                                        <div className="flex justify-center space-x-4 text-sm">
+                                            <div className="bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 px-3 py-1 rounded-full">
+                                                {leaders[0].trophies} trophies
+                                            </div>
+                                            <div className="bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full">
+                                                {leaders[0].gamesPlayed} games
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className="text-center py-8">
+                                    <div className="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
+                                        <span className="text-xl font-bold">1st</span>
+                                    </div>
+                                    <p className="text-slate-500 dark:text-slate-400">No champion yet</p>
+                                </div>
+                            )}
                         </div>
+                    </div>
 
-                        {loading
-                            ? Array.from({ length: 5 }).map((_, i) => (
-                                <div
-                                    key={i}
-                                    className={`${styles.row} ${styles.skeletonRow}`}
-                                >
-                                    <div className={styles.skeletonBox} />
-                                    <div className={styles.skeletonBox} />
-                                    <div className={styles.skeletonBox} />
+                    {/* Leaderboard Table */}
+                    <div className="lg:col-span-2">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                            {/* Controls */}
+                            <div className="p-6 border-b border-slate-200 dark:border-slate-700">
+                                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 sm:mb-0">
+                                        Rankings
+                                    </h2>
+                                    <div className="flex items-center space-x-3">
+                                        <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                                            Sort by:
+                                        </label>
+                                        <select
+                                            value={sortBy}
+                                            onChange={(e) => setSortBy(e.target.value as SortOption)}
+                                            className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 text-sm focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                        >
+                                            <option value="Trophies">Trophies</option>
+                                            <option value="Games Played">Games Played</option>
+                                        </select>
+                                    </div>
                                 </div>
-                            ))
-                            : sortedLeaders.map((player) => (
-                                <div
-                                    key={player.rank}
-                                    className={`${styles.row} ${styles.animatedRow}`}
-                                >
-                                    <div className={styles.playerinfo}>{player.rank}</div>
-                                    <div className={styles.playerinfo}>{player.name}</div>
-                                    <div className={styles.playerinfo}>{player[sortFieldMap[sortBy]]}</div>
-                                </div>
-                            ))}
+                            </div>
+
+                            {/* Table */}
+                            <div className="overflow-x-auto">
+                                <table className="w-full">
+                                    <thead>
+                                        <tr className="border-b border-slate-200 dark:border-slate-700">
+                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">Rank</th>
+                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">Player</th>
+                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">{sortBy}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {loading ? (
+                                            [...Array(5)].map((_, i) => (
+                                                <tr key={i} className="border-b border-slate-100 dark:border-slate-700">
+                                                    <td className="py-4 px-6">
+                                                        <div className="w-8 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
+                                                    </td>
+                                                    <td className="py-4 px-6">
+                                                        <div className="w-32 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
+                                                    </td>
+                                                    <td className="py-4 px-6">
+                                                        <div className="w-16 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                        ) : sortedLeaders.length === 0 ? (
+                                            <tr>
+                                                <td colSpan={3} className="py-12 text-center">
+                                                    <div className="w-12 h-12 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-3">
+                                                        <span className="text-lg font-bold">Stats</span>
+                                                    </div>
+                                                    <p className="text-slate-500 dark:text-slate-400">No leaderboard data available</p>
+                                                </td>
+                                            </tr>
+                                        ) : (
+                                            sortedLeaders.map((player, index) => (
+                                                <tr key={player.rank} className="border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors duration-200">
+                                                    <td className="py-4 px-6">
+                                                        <div className={`inline-flex items-center justify-center w-10 h-8 rounded-lg font-bold text-sm ${getRankStyle(player.rank)}`}>
+                                                            {getRankIcon(player.rank)}
+                                                        </div>
+                                                    </td>
+                                                    <td className="py-4 px-6">
+                                                        <div className="flex items-center space-x-3">
+                                                            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
+                                                                {player.name.charAt(0).toUpperCase()}
+                                                            </div>
+                                                            <span className="font-medium text-slate-900 dark:text-slate-100">
+                                                                {player.name}
+                                                            </span>
+                                                        </div>
+                                                    </td>
+                                                    <td className="py-4 px-6">
+                                                        <span className="font-semibold text-slate-900 dark:text-slate-100">
+                                                            {player[sortFieldMap[sortBy]].toLocaleString()}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            ))
+                                        )}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 9584e42..61cba1f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,8 +17,13 @@ export default function Home() {
 
   if (status === 'loading') {
     return (
-      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-16 px-8 sm:px-20 py-20">
-        Loading...
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+          <div className="flex items-center space-x-3">
+            <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+            <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Arena...</span>
+          </div>
+        </div>
       </div>
     );
   }
@@ -28,8 +33,13 @@ export default function Home() {
   }
 
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen gap-16 px-8 sm:px-20 py-20">
-      Redirecting...
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3">
+          <div className="w-6 h-6 border-4 border-green-500 border-t-transparent rounded-full animate-spin"></div>
+          <span className="text-slate-700 dark:text-slate-300 font-medium">Redirecting to Dashboard...</span>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 4152c79..883e2e8 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -2,7 +2,6 @@
 
 import { useSession, signOut } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
-import styles from './profile.module.css';
 import { useEffect, useState } from 'react';
 import { addFriend } from '@/lib/playfab/playfab';
 import { Game } from '@/lib/db';
@@ -17,8 +16,23 @@ export default function Profile() {
     const [myGames, setMyGames] = useState<Game[]>([]);
     const [gamesLoading, setGamesLoading] = useState(true);
 
+    useEffect(() => {
+        if (session) {
+            fetchMyGames();
+        }
+    }, [session]);
+
     if (status === 'loading') {
-        return <div className={styles.page}>Loading...</div>;
+        return (
+            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Profile...</span>
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     if (!session) {
@@ -50,186 +64,230 @@ export default function Profile() {
             } else {
                 alert('Failed to delete game.');
             }
-        } catch (err) {
-            console.error(err);
-            alert('Error deleting game.');
+        } catch (e) {
+            console.error(e);
         }
     };
 
-
     const handleAddFriend = async () => {
-        const sessionTicket = sessionStorage.getItem('playfabSessionTicket');
-        const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID;
-
-        if (!sessionTicket || !titleId) {
-            setFeedback('Missing session ticket or title ID');
+        if (!inputValue.trim()) {
+            setFeedback('Please enter a value.');
             return;
         }
 
         try {
-            let res;
-
-            if (method === 'id') {
-                res = await addFriend(sessionTicket, titleId, inputValue);
-            } else if (method === 'email') {
-                res = await addFriend(sessionTicket, titleId, undefined, inputValue);
-            } else {
-                res = await addFriend(sessionTicket, titleId, undefined, undefined, inputValue);
-            }
-
-            if (res.code === 200) {
-                setFeedback('Friend added successfully!');
+            const result = await addFriend(method, inputValue);
+            if (result.success) {
+                setFeedback('Friend request sent successfully!');
                 setInputValue('');
             } else {
-                setFeedback(res.errorMessage || 'Could not add friend.');
+                setFeedback(result.message || 'Failed to send friend request.');
             }
-        } catch (err: any) {
-            setFeedback(err?.errorMessage || 'Error occurred while adding friend.');
+        } catch (error) {
+            setFeedback('An error occurred while sending the friend request.');
         }
     };
 
-    useEffect(() => {
-        fetchMyGames();
-    }, []);
+    const getPlaceholder = () => {
+        switch (method) {
+            case 'id': return 'Enter PlayFab ID';
+            case 'username': return 'Enter username';
+            case 'email': return 'Enter email address';
+            default: return '';
+        }
+    };
 
     return (
-        <div className={styles.page}>
-            <header className={styles.pageHeader}>
-                <h2>Profile</h2>
-            </header>
-
-            <div className={styles.profileLayout}>
-                {session.user?.image && (
-                    <img
-                        src={session.user.image}
-                        alt="Profile"
-                        className={styles.avatar}
-                    />
-                )}
-                <div className={styles.details}>
-                    <h1 className={styles.name}>{session.user?.name ?? ''}</h1>
-                    <p className={styles.email}>{session.user?.email ?? ''}</p>
-                    <button
-                        className={styles.signOutButton}
-                        onClick={() => {
-                            sessionStorage.removeItem('playfabSessionTicket');
-                            signOut();
-                        }}
-                    >
-                        Sign Out
-                    </button>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Profile</h1>
+                    <p className="text-slate-600 dark:text-slate-400 mt-2">Manage your account and game preferences</p>
                 </div>
             </div>
 
-            <div className={styles.addFriendsContainer}>
-                <h1>Add Friends</h1>
-                <br />
-                <br />
-
-                <div className={styles.methodTabs}>
-                    <button
-                        className={`${styles.methodTab} ${method === 'id' ? styles.active : ''}`}
-                        onClick={() => setMethod('id')}
-                    >
-                        ID
-                    </button>
-                    <button
-                        className={`${styles.methodTab} ${method === 'username' ? styles.active : ''}`}
-                        onClick={() => setMethod('username')}
-                        disabled={true}
-                    >
-                        Username
-                    </button>
-                    <button
-                        className={`${styles.methodTab} ${method === 'email' ? styles.active : ''}`}
-                        onClick={() => setMethod('email')}
-                        disabled={true}
-                    >
-                        Email
-                    </button>
-                </div>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    {/* Profile Information */}
+                    <div className="lg:col-span-1">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <div className="text-center">
+                                <div className="relative inline-block">
+                                    <img 
+                                        src={session.user?.image || '/icons/user.png'} 
+                                        alt="Profile" 
+                                        className="w-20 h-20 rounded-full border-4 border-slate-200 dark:border-slate-600"
+                                    />
+                                    <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-2 border-white dark:border-slate-800 rounded-full"></div>
+                                </div>
+                                <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mt-4">
+                                    {session.user?.name ?? 'Anonymous'}
+                                </h2>
+                                <p className="text-slate-500 dark:text-slate-400 mt-1">
+                                    {session.user?.email ?? 'No email'}
+                                </p>
+                                <button 
+                                    onClick={() => signOut()}
+                                    className="mt-6 w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200"
+                                >
+                                    Sign Out
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Add Friends Section */}
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 mt-6 transition-colors duration-300">
+                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Add Friends</h3>
+                            
+                            {/* Method Selection */}
+                            <div className="flex space-x-2 mb-4">
+                                {(['id', 'username', 'email'] as const).map((m) => (
+                                    <button
+                                        key={m}
+                                        onClick={() => setMethod(m)}
+                                        className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200 ${
+                                            method === m
+                                                ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-700'
+                                                : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600'
+                                        }`}
+                                    >
+                                        {m.charAt(0).toUpperCase() + m.slice(1)}
+                                    </button>
+                                ))}
+                            </div>
 
-                <div className={styles.AddFriends}>
-                    <label className={styles.inputLabel}>
-                        {method === 'id' && 'ID'}
-                        {method === 'username' && 'Username'}
-                        {method === 'email' && 'Email'}
-                    </label>
-                    <input
-                        type="text"
-                        className={styles.AddFriendsInput}
-                        placeholder={`Enter ${method}`}
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                    />
-                    <button className={styles.AddFriendsButton} onClick={handleAddFriend}>
-                        Add
-                    </button>
-                    <div className={styles.tooltipWrapper}>
-                        <button
-                            className={styles.AddFriendsHelp}
-                            onMouseEnter={() => setShowHelp(true)}
-                            onMouseLeave={() => setShowHelp(false)}
-                        >
-                            ?
-                        </button>
-                        {showHelp && (
-                            <div className={styles.tooltip}>
-                                <p>Select how you'd like to search for your friend - you can get the info on their dashboard.</p>
+                            {/* Input */}
+                            <div className="space-y-3">
+                                <input
+                                    type="text"
+                                    value={inputValue}
+                                    onChange={(e) => setInputValue(e.target.value)}
+                                    placeholder={getPlaceholder()}
+                                    className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                />
+                                <button 
+                                    onClick={handleAddFriend}
+                                    className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200"
+                                >
+                                    Send Friend Request
+                                </button>
+                                
+                                {/* Help Button */}
+                                <div className="relative">
+                                    <button 
+                                        onClick={() => setShowHelp(!showHelp)}
+                                        className="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 text-sm transition-colors duration-200"
+                                    >
+                                        Need help?
+                                    </button>
+                                    
+                                    {showHelp && (
+                                        <div className="absolute top-full mt-2 left-0 right-0 bg-blue-50 dark:bg-blue-900/50 border border-blue-200 dark:border-blue-700 rounded-lg p-3 text-xs text-blue-700 dark:text-blue-300 z-10">
+                                            <p><strong>PlayFab ID:</strong> Found in user's dashboard</p>
+                                            <p><strong>Username:</strong> Display name in the game</p>
+                                            <p><strong>Email:</strong> Account email address</p>
+                                        </div>
+                                    )}
+                                </div>
+                                
+                                {feedback && (
+                                    <p className={`text-sm ${
+                                        feedback.includes('successfully') 
+                                            ? 'text-green-600 dark:text-green-400' 
+                                            : 'text-red-600 dark:text-red-400'
+                                    }`}>
+                                        {feedback}
+                                    </p>
+                                )}
                             </div>
-                        )}
+                        </div>
                     </div>
-                </div>
 
-                {feedback && <p style={{ marginTop: '1rem', color: '#3b82f6' }}>{feedback}</p>}
-            </div>
+                    {/* My Games */}
+                    <div className="lg:col-span-2">
+                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                            <div className="flex items-center justify-between mb-6">
+                                <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">My Published Games</h3>
+                                <span className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-3 py-1 rounded-full text-sm font-medium">
+                                    {myGames.length} Games
+                                </span>
+                            </div>
 
-            <div className={styles.myGamesContainer}>
-                <h1>My Publishings</h1>
-                <br />
-
-                {gamesLoading ? (
-                    <p>Loading...</p>
-                ) : myGames.length === 0 ? (
-                    <p>You haven't published any games yet.</p>
-                ) : (
-                    <table className={styles.gamesTable}>
-                        <thead>
-                            <tr>
-                                <th>Title</th>
-                                <th>Description</th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {myGames.map((game) => (
-                                <tr key={game.id}>
-                                    <td>{game.title}</td>
-                                    <td>{game.description?.slice(0, 90)}...</td>
-                                    <td>
-                                        <button
-                                            onClick={() => window.location.href = `/arena/${game.id}`}
-                                            className={styles.viewButton}
-                                        >
-                                            View
-                                        </button>
-                                        <button
-                                            onClick={() => handleDelete(game.id!)}
-                                            className={styles.deleteButton}
-                                        >
-                                            Delete
-                                        </button>
-                                    </td>
-
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                )}
+                            {gamesLoading ? (
+                                <div className="space-y-4">
+                                    {[...Array(3)].map((_, i) => (
+                                        <div key={i} className="h-16 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse"></div>
+                                    ))}
+                                </div>
+                            ) : myGames.length === 0 ? (
+                                <div className="text-center py-12">
+                                    <div className="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
+                                        <span className="text-2xl">Games</span>
+                                    </div>
+                                    <h4 className="text-slate-900 dark:text-slate-100 font-medium mb-2">No games published yet</h4>
+                                    <p className="text-slate-500 dark:text-slate-400 text-sm">Start creating and publishing your games!</p>
+                                </div>
+                            ) : (
+                                <div className="overflow-x-auto">
+                                    <table className="w-full">
+                                        <thead>
+                                            <tr className="border-b border-slate-200 dark:border-slate-600">
+                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Game Name</th>
+                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Type</th>
+                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Status</th>
+                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {myGames.map((game) => (
+                                                <tr key={game.id} className="border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors duration-200">
+                                                    <td className="py-4 px-4">
+                                                        <div>
+                                                            <p className="font-medium text-slate-900 dark:text-slate-100">{game.name}</p>
+                                                            <p className="text-sm text-slate-500 dark:text-slate-400">{game.description}</p>
+                                                        </div>
+                                                    </td>
+                                                    <td className="py-4 px-4">
+                                                        <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
+                                                            game.type === 'html' 
+                                                                ? 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300'
+                                                                : 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300'
+                                                        }`}>
+                                                            {game.type.toUpperCase()}
+                                                        </span>
+                                                    </td>
+                                                    <td className="py-4 px-4">
+                                                        <span className="inline-block px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300">
+                                                            Published
+                                                        </span>
+                                                    </td>
+                                                    <td className="py-4 px-4">
+                                                        <div className="flex space-x-2">
+                                                            <a
+                                                                href={`/arena/${game.id}`}
+                                                                className="px-3 py-1 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-800/50 text-blue-700 dark:text-blue-300 rounded-md text-sm font-medium transition-colors duration-200"
+                                                            >
+                                                                View
+                                                            </a>
+                                                            <button
+                                                                onClick={() => handleDelete(game.id)}
+                                                                className="px-3 py-1 bg-red-100 dark:bg-red-900/50 hover:bg-red-200 dark:hover:bg-red-800/50 text-red-700 dark:text-red-300 rounded-md text-sm font-medium transition-colors duration-200"
+                                                            >
+                                                                Delete
+                                                            </button>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
             </div>
-            <br />
-            <br />
-
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/profile/profile.module.css b/app/profile/profile.module.css
deleted file mode 100644
index 74cfc44..0000000
--- a/app/profile/profile.module.css
+++ /dev/null
@@ -1,319 +0,0 @@
-.page {
-    min-height: 100vh;
-    background: #0e0e10;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    padding-left: 3rem;
-    padding-top: 2rem;
-}
-
-.pageHeader {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-
-.pageHeader h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    color: #ffffff;
-    margin: 0;
-}
-
-.profileLayout {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-    flex-wrap: wrap;
-    max-width: 900px;
-    width: 100%;
-    padding: 2rem;
-    animation: fadeIn 0.4s ease-in-out;
-    justify-content: flex-start;
-}
-
-.avatar {
-    border-radius: 50%;
-    object-fit: cover;
-    width: 120px;
-    height: 120px;
-    border: 3px solid #7a71ff;
-    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
-    transition: transform 0.3s ease, filter 0.3s ease;
-}
-
-.avatar:hover {
-    transform: scale(1.05);
-    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
-}
-
-
-.details {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.5rem;
-    text-align: left;
-}
-
-.name {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: #ffffffad;
-}
-
-.email {
-    font-size: .8rem;
-    color: #bbbbbb;
-}
-
-.signOutButton {
-    margin-top: 1rem;
-    background: linear-gradient(135deg, #b96666, #d43737);
-    color: #fff;
-    border: none;
-    padding: 0.6rem 1.25rem;
-    border-radius: 8px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    width: fit-content;
-    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
-}
-
-.signOutButton:hover {
-    background: linear-gradient(135deg, #ef4444, #b91c1c);
-    color: #fff;
-    box-shadow: 0 0 12px rgba(185, 28, 28, 0.6);
-    transform: scale(1.05);
-}
-
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.addFriendsContainer {
-    animation: fadeIn 0.4s ease-in-out;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.AddFriends {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-    padding: 1rem;
-    background-color: #1e1e1e;
-    border-radius: 5px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    width: fit-content;
-}
-
-.AddFriendsInput {
-    width: 250px;
-    padding: 10px 14px;
-    border: none;
-    border-radius: 10px;
-    outline: none;
-    background-color: #2c2c2e;
-    color: #b6b6b6;
-    font-size: 13px;
-}
-
-.AddFriendsInput::placeholder {
-    color: #b6b6b6;
-    font-size: 13px;
-}
-
-.AddFriendsButton {
-    padding: 10px 20px;
-    background: #3b82f6;
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all .3s ease;
-    filter: grayscale(1);
-}
-
-.AddFriendsButton:hover {
-    transition: all .3s ease;
-    background: #3b82f6;
-    filter: grayscale(0);
-}
-
-.AddFriendsHelp {
-    padding: 5px 5px;
-    background: #ffe600;
-    color: #000000;
-    border: none;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: all .3s ease;
-}
-
-.AddFriendsHelp:hover {
-    transition: all .3s ease;
-    background: #ffe600;
-    box-shadow: 0px 0px 10px rgb(255, 255, 255);
-}
-
-
-.tooltipWrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.tooltip {
-    position: absolute;
-    top: -60px;
-    left: 50%;
-    transform: translateX(-50%) scale(0.9);
-    background-color: #2d2d30;
-    color: #ffffff;
-    padding: 12px 16px;
-    border-radius: 8px;
-    white-space: nowrap;
-    font-size: 0.85rem;
-    font-weight: 500;
-    opacity: 0;
-    animation: fadeInTooltip 0.3s ease forwards;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 20;
-    width: max-content;
-    text-align: center;
-    line-height: 1.4;
-}
-
-@keyframes fadeInTooltip {
-    0% {
-        opacity: 0;
-        transform: translateX(-50%) scale(0.9);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1);
-    }
-}
-
-.methodTabs {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 1rem;
-}
-
-.methodTab {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 20px;
-    background-color: #2c2c2e;
-    color: white;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 0.85rem;
-    font-weight: 600;
-}
-
-.methodTab:hover {
-    background-color: #3b3b3e;
-}
-
-.methodTab.active {
-    background-color: #3b82f6;
-    color: #fff;
-}
-
-.inputLabel {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: #bfbfbf;
-    margin-right: 8px;
-    white-space: nowrap;
-}
-
-.myGamesContainer {
-    animation: fadeIn 0.4s ease-in-out;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.gamesTable {
-    width: max-content;
-    border-collapse: collapse;
-    background-color: #1e1e1e;
-    border-radius: 8px;
-    overflow: hidden;
-    font-size: 0.9rem;
-}
-
-.gamesTable th,
-.gamesTable td {
-    padding: 12px 16px;
-    text-align: left;
-    border-bottom: 1px solid #333;
-}
-
-.gamesTable th {
-    background-color: #2c2c2e;
-    color: #ffffff;
-    font-weight: 600;
-}
-
-.gamesTable td {
-    color: #bbbbbb;
-}
-
-.gamesTable tr:hover {
-    background-color: #2e2e30;
-}
-
-.viewButton {
-    background-color: #3b82f6;
-    border: none;
-    color: white;
-    padding: 6px 12px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: background-color 0.3s ease;
-}
-
-.viewButton:hover {
-    background-color: #2563eb;
-}
-
-.deleteButton {
-    margin-left: 0.5rem;
-    padding: 6px 12px;
-    background-color: #ef4444;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.85rem;
-    transition: background-color 0.2s;
-}
-
-.deleteButton:hover {
-    background-color: #dc2626;
-}
\ No newline at end of file
diff --git a/components/Model.tsx b/components/Model.tsx
index f67030d..bf7e8fd 100644
--- a/components/Model.tsx
+++ b/components/Model.tsx
@@ -165,7 +165,7 @@ function SpaceModel() {
 
 export default function SceneWithCanvasTextAndModel({ name = '' }) {
     return (
-        <div style={{ width: '100%', height: '100vh' }}>
+        <div className="w-full h-screen">
             <Canvas camera={{ position: [0, 0, 30], fov: 50 }} shadows>
                 <ambientLight intensity={1.5} />
                 <directionalLight position={[10, 10, 10]} intensity={2} castShadow />
diff --git a/components/auth/SignIn.tsx b/components/auth/SignIn.tsx
index d31385f..b50f552 100644
--- a/components/auth/SignIn.tsx
+++ b/components/auth/SignIn.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { signIn } from 'next-auth/react';
-import styles from './auth.module.css';
 import Image from 'next/image';
 import microsoftLogo from '../../public/icons/msoft.png';
 
@@ -31,21 +30,24 @@ export default function SignIn() {
     };
 
     return (
-        <div className={styles.container}>
-            <div className={styles.card}>
-                {/* <h1 className={styles.tagline}>Arena: {tagline}</h1> */}
-                <h3 className={styles.heading}>Please sign in to continue 🚀</h3>
-                <button className={styles.signInButton} onClick={handleSignIn}>
+        <div className="flex justify-center items-center min-h-screen p-4 animate-fade-in">
+            <div className="bg-white/4 backdrop-blur-lg rounded-3xl p-20 text-center shadow-2xl shadow-black/20 max-w-lg w-full animate-fade-in">
+                {/* <h1 className="text-base text-white/63 mb-2">Arena: {tagline}</h1> */}
+                <h3 className="text-3xl font-semibold text-white mb-8">Please sign in to continue 🚀</h3>
+                <button 
+                    className="inline-flex items-center gap-3 bg-gradient-to-br from-secondary-700 to-primary-600 border-0 py-3 px-6 text-base font-semibold text-white rounded-xl cursor-pointer shadow-lg shadow-primary-500/20 transition-all duration-300 hover:scale-105 hover:bg-gradient-to-br hover:from-primary-700 hover:to-accent-600 hover:shadow-xl hover:shadow-primary-500/30" 
+                    onClick={handleSignIn}
+                >
                     <Image
                         alt="Microsoft logo"
                         src={microsoftLogo}
                         width={20}
                         height={20}
-                        className={styles.logo}
+                        className="w-5 h-5"
                     />
                     <span>Continue with Microsoft</span>
                 </button>
-                <p className={styles.info}>
+                <p className="mt-8 text-gray-400 text-sm leading-relaxed">
                     Sign in with your work account to participate, save your progress, and maintain a fair competitive environment.
                 </p>
             </div>
diff --git a/components/auth/auth.module.css b/components/auth/auth.module.css
deleted file mode 100644
index 65fd53d..0000000
--- a/components/auth/auth.module.css
+++ /dev/null
@@ -1,79 +0,0 @@
-.container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    padding: 1rem;
-    animation: fadeIn 0.8s ease-in-out;
-}
-
-.card {
-    background-color: rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 5rem 2rem;
-    text-align: center;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    max-width: 500px;
-    width: 100%;
-    animation: fadeIn 0.8s ease;
-}
-
-.heading {
-    font-size: 1.75rem;
-    font-weight: 600;
-    color: #ffffff;
-    margin: 1rem 0 2rem;
-}
-
-.signInButton {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    background: linear-gradient(135deg, #2d2c30, #8e869b);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: white;
-    border-radius: 12px;
-    cursor: pointer;
-    box-shadow: 0 0px 10px rgba(59, 130, 246, 0.2);
-    transition: all 0.3s ease;
-}
-
-.signInButton:hover {
-    transform: scale(1.05);
-    background: linear-gradient(135deg, #292668, #8c4bf3);
-    box-shadow: 0 0 12px rgba(133, 112, 209, 0.527);
-}
-
-.logo {
-    width: 20px;
-    height: 20px;
-}
-
-.tagline {
-    font-size: 1rem;
-    color: rgba(255, 255, 255, 0.63);
-    margin-bottom: 0.5rem;
-}
-
-.info {
-    margin-top: 2rem;
-    color: rgb(150, 150, 150);
-    font-size: 0.7rem;
-    line-height: 1.4;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
\ No newline at end of file
diff --git a/components/dashboard/FriendsList.tsx b/components/dashboard/FriendsList.tsx
new file mode 100644
index 0000000..0a58a34
--- /dev/null
+++ b/components/dashboard/FriendsList.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+interface Friend {
+    FriendPlayFabId: string;
+    Username?: string;
+    TitleDisplayName?: string;
+}
+
+interface FriendsListProps {
+    friends: Friend[];
+    loading: boolean;
+    friendAddStatus: string | null;
+}
+
+export default function FriendsList({ friends, loading, friendAddStatus }: FriendsListProps) {
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-slate-900">Friends</h3>
+                <button className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 shadow-sm flex items-center">
+                    <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    Add Friend
+                </button>
+            </div>
+            
+            {friendAddStatus && (
+                <div className="mb-4 p-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl text-sm">
+                    {friendAddStatus}
+                </div>
+            )}
+            
+            {loading ? (
+                <div className="space-y-4">
+                    {[...Array(3)].map((_, i) => (
+                        <div key={i} className="h-16 bg-slate-100 rounded-xl animate-pulse"></div>
+                    ))}
+                </div>
+            ) : friends.length === 0 ? (
+                <div className="text-center py-6">
+                    <div className="w-12 h-12 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-xl">👥</span>
+                    </div>
+                    <p className="text-slate-700 font-medium text-sm">No friends yet</p>
+                    <p className="text-slate-500 text-xs">Start connecting with other players!</p>
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {friends.slice(0, 5).map((friend: Friend) => (
+                        <div key={friend.FriendPlayFabId} className="bg-slate-50 border border-slate-200 rounded-lg p-3 hover:bg-slate-100 hover:border-slate-300 transition-all duration-200">
+                            <div className="flex items-center space-x-3">
+                                <div className="w-8 h-8 bg-gradient-to-br from-gray-500 to-gray-600 rounded-full flex items-center justify-center shadow-sm">
+                                    <span className="text-white font-bold text-sm">
+                                        {friend.TitleDisplayName?.charAt(0) || 'U'}
+                                    </span>
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <p className="text-slate-900 font-medium truncate text-sm">{friend.TitleDisplayName}</p>
+                                    <p className="text-slate-500 text-xs font-mono truncate">{friend.FriendPlayFabId.slice(0, 12)}...</p>
+                                </div>
+                                <div className="flex items-center space-x-1">
+                                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                                    <span className="text-green-600 text-xs font-medium">Online</span>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/GoldenTickets.tsx b/components/dashboard/GoldenTickets.tsx
new file mode 100644
index 0000000..6ae82aa
--- /dev/null
+++ b/components/dashboard/GoldenTickets.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+
+interface GoldenTicketsProps {
+    coupons: string[];
+    loading: boolean;
+    onRedeem?: (coupon: string) => void;
+}
+
+export default function GoldenTickets({ coupons, loading, onRedeem }: GoldenTicketsProps) {
+    const [redeeming, setRedeeming] = useState<string | null>(null);
+
+    const handleRedeem = async (coupon: string) => {
+        if (!onRedeem) return;
+        
+        setRedeeming(coupon);
+        try {
+            await onRedeem(coupon);
+        } finally {
+            setRedeeming(null);
+        }
+    };
+
+    return (
+        <div className="bg-gradient-to-br from-yellow-900/30 via-slate-800/40 to-orange-900/30 backdrop-blur-sm border border-yellow-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/20">
+            <div className="flex items-center justify-between mb-2">
+                <h3 className="text-lg font-bold text-white">Golden Tickets</h3>
+                <div className="bg-amber-500/20 border border-amber-500/30 px-2 py-1 rounded-md">
+                        <span className="text-amber-300 font-medium text-xs">TICKETS {coupons.length}</span>
+                </div>
+            </div>
+            
+            {loading ? (
+                <ListSkeleton count={3} />
+            ) : coupons.length === 0 ? (
+                <div className="text-center py-6">
+                    <div className="w-12 h-12 bg-amber-50 border-2 border-dashed border-amber-300 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold">TICKET</span>
+                    </div>
+                    <p className="text-slate-700 font-medium text-sm">No tickets yet</p>
+                    <p className="text-slate-500 text-xs">Use inventory items to earn golden tickets!</p>
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {coupons.slice(0, 5).map((coupon, index) => (
+                        <div key={index} className="bg-gradient-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-3 hover:from-amber-100 hover:to-yellow-100 transition-all duration-200">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-8 h-8 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center shadow-sm">
+                                        <span className="text-xs font-bold">TICKET</span>
+                                    </div>
+                                    <div>
+                                        <p className="text-slate-900 font-medium text-sm font-mono">{coupon}</p>
+                                        <p className="text-amber-600 text-xs font-medium">Golden Ticket #{index + 1}</p>
+                                    </div>
+                                </div>
+                                <button
+                                    onClick={() => handleRedeem(coupon)}
+                                    disabled={redeeming === coupon}
+                                    className="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                                >
+                                    {redeeming === coupon ? 'Redeeming...' : 'Redeem'}
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                    {coupons.length > 5 && (
+                        <div className="text-center pt-2">
+                            <button className="text-amber-600 hover:text-amber-700 text-xs font-medium">
+                                View {coupons.length - 5} more tickets
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/HeroSection.tsx b/components/dashboard/HeroSection.tsx
new file mode 100644
index 0000000..9f3d13c
--- /dev/null
+++ b/components/dashboard/HeroSection.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+interface HeroSectionProps {
+    tagline: string;
+    playFabId: string | null;
+    onCopyId: () => void;
+    copied: boolean;
+}
+
+export default function HeroSection({ tagline, playFabId, onCopyId, copied }: HeroSectionProps) {
+    return (
+        <div className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-slate-800 to-black transition-colors duration-300">
+            <div className="absolute inset-0 bg-gradient-to-r from-purple-900/10 via-blue-900/10 to-indigo-900/10"></div>
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(120,119,198,0.1)_0%,transparent_70%)]"></div>
+            <div className="relative max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-4">
+                <div className="text-center">
+                    <h1 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent mb-2">
+                        Welcome to the Arena
+                    </h1>
+                    <p className="text-sm text-slate-300 mb-3 max-w-2xl mx-auto leading-relaxed">
+                        {tagline || "Where champions are made and legends are born"}
+                    </p>
+                    <div className="flex items-center justify-center">
+                        <div className="flex items-center space-x-2 bg-gradient-to-r from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/30 rounded-lg px-3 py-1 shadow-lg">
+                            <span className="text-slate-300 text-xs font-medium">Player ID:</span>
+                            <code className="text-white font-mono text-xs bg-slate-900/50 px-1 py-0.5 rounded border border-slate-600/30">{playFabId?.slice(0, 8)}...</code>
+                            <button
+                                onClick={onCopyId}
+                                className="text-slate-400 hover:text-slate-200 transition-colors p-1 hover:bg-slate-700/50 rounded"
+                                aria-label="Copy PlayFab ID"
+                            >
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                </svg>
+                            </button>
+                            {copied && <span className="text-green-400 text-xs font-medium">Copied!</span>}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/Inventory.tsx b/components/dashboard/Inventory.tsx
new file mode 100644
index 0000000..d46bdec
--- /dev/null
+++ b/components/dashboard/Inventory.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+
+interface InventoryItem {
+    ItemInstanceId: string;
+    ItemId: string;
+    DisplayName?: string;
+    RemainingUses?: number;
+}
+
+interface InventoryProps {
+    inventoryItems: InventoryItem[];
+    loading: boolean;
+    onUseItem: (item: InventoryItem) => void;
+    isBuying: boolean;
+}
+
+export default function Inventory({ inventoryItems, loading, onUseItem, isBuying }: InventoryProps) {
+    return (
+        <div className="bg-gradient-to-br from-emerald-900/30 via-slate-800/40 to-green-900/30 backdrop-blur-sm border border-emerald-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-green-500/20">
+            <div className="flex items-center justify-between mb-2">
+                <h3 className="text-lg font-bold text-white">Inventory</h3>
+                <button className="text-slate-400 hover:text-slate-200 transition-colors font-medium text-xs flex items-center">
+                    View All 
+                    <svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+            </div>
+            {loading ? (
+                <ListSkeleton count={3} />
+            ) : inventoryItems.length === 0 ? (
+                <div className="text-center py-6">
+                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold">BAG</span>
+                    </div>
+                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No items yet</p>
+                    <p className="text-slate-500 dark:text-slate-400 text-xs">Visit the store to get started!</p>
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {inventoryItems.slice(0, 3).map((item) => (
+                        <div key={item.ItemInstanceId} className="bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg p-3 hover:bg-slate-100 dark:hover:bg-slate-600 hover:border-slate-300 dark:hover:border-slate-500 transition-all duration-200">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center space-x-3">
+                                    <div className="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-600 rounded-lg flex items-center justify-center shadow-sm">
+                                        <span className="text-sm">📦</span>
+                                    </div>
+                                    <div>
+                                        <p className="text-slate-900 dark:text-slate-100 font-medium text-sm">{item.DisplayName || item.ItemId}</p>
+                                        <p className="text-slate-500 dark:text-slate-400 text-xs">Qty: {item.RemainingUses ?? 1}</p>
+                                    </div>
+                                </div>
+                                <button
+                                    onClick={() => onUseItem(item)}
+                                    disabled={isBuying}
+                                    className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                                >
+                                    {isBuying ? 'Using...' : 'Use'}
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/PlayerStatsChart.tsx b/components/dashboard/PlayerStatsChart.tsx
new file mode 100644
index 0000000..96c19f8
--- /dev/null
+++ b/components/dashboard/PlayerStatsChart.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import { Bar } from 'react-chartjs-2';
+import { ChartSkeleton } from '@/components/ui/SkeletonLoader';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+interface PlayerStatsChartProps {
+    gamesPlayed: number;
+    trophies: number;
+    loading: boolean;
+}
+
+export default function PlayerStatsChart({ gamesPlayed, trophies, loading }: PlayerStatsChartProps) {
+    const chartData = {
+        labels: ['Games Played', 'Trophies'],
+        datasets: [
+            {
+                label: 'Player Statistics',
+                data: [gamesPlayed, trophies],
+                backgroundColor: ['rgba(59, 130, 246, 0.6)', 'rgba(16, 185, 129, 0.6)'], // Blue and Green with transparency
+                borderColor: ['#3b82f6', '#10b981'], // Solid colors for borders
+                borderWidth: 2,
+                borderRadius: 8,
+                borderSkipped: false,
+            },
+        ],
+    };
+
+    const chartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false, // Hide legend since we show labels on x-axis
+            },
+            title: {
+                display: false,
+            },
+            tooltip: {
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                borderColor: '#374151',
+                borderWidth: 1,
+                cornerRadius: 8,
+                displayColors: false,
+                callbacks: {
+                    title: function(context: any) {
+                        return context[0].label;
+                    },
+                    label: function(context: any) {
+                        return `Count: ${context.parsed.y.toLocaleString()}`;
+                    }
+                }
+            },
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                grid: {
+                    color: 'rgba(148, 163, 184, 0.1)', // Very light grid lines
+                    drawBorder: false,
+                },
+                ticks: {
+                    color: '#64748b',
+                    font: {
+                        size: 12,
+                    },
+                    callback: function(value: any) {
+                        return value.toLocaleString();
+                    }
+                },
+            },
+            x: {
+                grid: {
+                    display: false,
+                },
+                ticks: {
+                    color: '#64748b',
+                    font: {
+                        size: 12,
+                        weight: 500,
+                    },
+                    maxRotation: 0,
+                },
+            },
+        },
+        interaction: {
+            intersect: false,
+            mode: 'index' as const,
+        },
+        animation: {
+            duration: 1000,
+            easing: 'easeOutQuart' as const,
+        },
+    };
+
+    if (loading) {
+        return (
+            <div className="bg-gradient-to-br from-purple-900/30 via-slate-800/40 to-indigo-900/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-lg font-bold text-white">Player Statistics</h3>
+                    <div className="bg-purple-500/20 border border-purple-500/30 px-2 py-1 rounded-md">
+                        <span className="text-purple-300 font-medium text-xs">Loading...</span>
+                    </div>
+                </div>
+                <ChartSkeleton />
+            </div>
+        );
+    }
+
+    const hasData = gamesPlayed > 0 || trophies > 0;
+
+    return (
+        <div className="bg-gradient-to-br from-purple-900/30 via-slate-800/40 to-indigo-900/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-bold text-white">Player Statistics</h3>
+                <div className="bg-purple-500/20 border border-purple-500/30 px-2 py-1 rounded-md">
+                    <span className="text-purple-300 font-medium text-xs">Games & Trophies</span>
+                </div>
+            </div>
+            
+            {!hasData ? (
+                <div className="text-center py-8">
+                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold text-slate-500 dark:text-slate-400">STATS</span>
+                    </div>
+                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No statistics yet</p>
+                    <p className="text-slate-500 dark:text-slate-400 text-xs">Start playing games to see your progress</p>
+                </div>
+            ) : (
+                <div>
+                    {/* Chart Container */}
+                    <div className="relative h-32 mb-2">
+                        <Bar data={chartData} options={chartOptions} />
+                    </div>
+
+                    {/* Statistics Summary Cards */}
+                    <div className="grid grid-cols-2 gap-2">
+                        <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-2 text-center border border-blue-200 dark:border-blue-700">
+                            <div className="w-3 h-3 bg-blue-500 rounded-full mx-auto mb-1"></div>
+                            <p className="text-xs font-medium text-blue-700 dark:text-blue-300 mb-1">Games Played</p>
+                            <p className="text-lg font-bold text-blue-900 dark:text-blue-100">
+                                {gamesPlayed.toLocaleString()}
+                            </p>
+                        </div>
+                        
+                        <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-2 text-center border border-green-200 dark:border-green-700">
+                            <div className="w-3 h-3 bg-green-500 rounded-full mx-auto mb-1"></div>
+                            <p className="text-xs font-medium text-green-700 dark:text-green-300 mb-1">Trophies</p>
+                            <p className="text-lg font-bold text-green-900 dark:text-green-100">
+                                {trophies.toLocaleString()}
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* Total Summary */}
+                    <div className="mt-2 pt-2 border-t border-slate-200 dark:border-slate-600">
+                        <div className="flex justify-between items-center">
+                            <span className="text-slate-600 dark:text-slate-400 text-xs">Total Achievement Score:</span>
+                            <span className="font-bold text-slate-900 dark:text-slate-100 text-sm">
+                                {(gamesPlayed + trophies).toLocaleString()}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/PlaytimeChart.tsx b/components/dashboard/PlaytimeChart.tsx
new file mode 100644
index 0000000..2acf608
--- /dev/null
+++ b/components/dashboard/PlaytimeChart.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { Doughnut } from 'react-chartjs-2';
+import SkeletonLoader from '@/components/ui/SkeletonLoader';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+} from 'chart.js';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);
+
+interface PlaytimeChartProps {
+    playtimeSeconds: number;
+    totalSeconds: number;
+    loading: boolean;
+}
+
+export default function PlaytimeChart({ playtimeSeconds, totalSeconds, loading }: PlaytimeChartProps) {
+    const playtimeData = {
+        labels: ['Played', 'Remaining'],
+        datasets: [
+            {
+                data: [playtimeSeconds, totalSeconds - playtimeSeconds],
+                backgroundColor: ['#64748b', '#e2e8f0'],
+                borderWidth: 0,
+                cutout: '75%',
+            },
+        ],
+    };
+
+    const options = {
+        responsive: true,
+        cutout: '80%',
+        plugins: {
+            legend: {
+                display: false,
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (context: any) {
+                        const label = context.label || '';
+                        const value = context.parsed || 0;
+                        if (label === 'Played') {
+                            return `${label}: ${value} sec (${Math.floor(value / 60)} min)`;
+                        }
+                        if (label === 'Remaining') {
+                            return `${label}: ${value} sec (${Math.floor(value / 60)} min)`;
+                        }
+                        return `${label}: ${value}`;
+                    },
+                },
+            },
+        },
+    };
+
+    return (
+        <div className="bg-gradient-to-br from-blue-900/30 via-slate-800/40 to-cyan-900/30 backdrop-blur-sm border border-blue-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20">
+            <div className="flex items-center justify-between mb-2">
+                <h3 className="text-lg font-bold text-white">Playtime Analytics</h3>
+                <div className="px-2 py-1 bg-blue-500/20 text-blue-300 text-xs font-medium rounded-full border border-blue-500/30">
+                    Daily Limit: {Math.floor(totalSeconds / 60)}min
+                </div>
+            </div>
+            {loading ? (
+                <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                        <SkeletonLoader width="w-32" height="h-6" />
+                        <SkeletonLoader width="w-20" height="h-6" />
+                    </div>
+                    <div className="flex items-center justify-between h-32">
+                        <div className="flex flex-col items-center space-y-3">
+                            <SkeletonLoader variant="rectangular" width="w-16" height="h-24" />
+                            <SkeletonLoader width="w-12" />
+                        </div>
+                        <div className="flex flex-col items-center space-y-3">
+                            <SkeletonLoader variant="rectangular" width="w-16" height="h-16" />
+                            <SkeletonLoader width="w-12" />
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <div className="flex flex-col lg:flex-row items-center justify-between">
+                    <div className="w-24 h-24 mb-2 lg:mb-0">
+                        <Doughnut data={playtimeData} options={options} />
+                    </div>
+                    <div className="lg:ml-3 space-y-2">
+                        <div className="space-y-1">
+                            <div className="flex items-center space-x-2">
+                                <div className="w-3 h-3 bg-slate-500 rounded-full"></div>
+                                <div>
+                                    <span className="text-slate-900 font-medium text-sm">Played: {Math.floor(playtimeSeconds / 60)}min</span>
+                                    <p className="text-slate-500 text-xs">{playtimeSeconds} seconds</p>
+                                </div>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <div className="w-3 h-3 bg-slate-300 rounded-full"></div>
+                                <div>
+                                    <span className="text-slate-900 font-medium text-sm">Remaining: {Math.floor((totalSeconds - playtimeSeconds) / 60)}min</span>
+                                    <p className="text-slate-500 text-xs">{totalSeconds - playtimeSeconds} seconds</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
+                            <p className="text-slate-600 text-xs">
+                                You've used <span className="font-semibold text-slate-700">{Math.round((playtimeSeconds / totalSeconds) * 100)}%</span> of your daily playtime
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/RecentActivity.tsx b/components/dashboard/RecentActivity.tsx
new file mode 100644
index 0000000..5d9fa1f
--- /dev/null
+++ b/components/dashboard/RecentActivity.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+export default function RecentActivity() {
+    const activities = [
+        {
+            icon: '🎮',
+            title: 'Game Completed',
+            time: '2 hours ago',
+            color: 'from-slate-500 to-slate-600',
+            bgColor: 'bg-slate-50',
+            borderColor: 'border-slate-200',
+            textColor: 'text-slate-700'
+        },
+        {
+            icon: '🏆',
+            title: 'Trophy Earned',
+            time: '5 hours ago',
+            color: 'from-amber-500 to-amber-600',
+            bgColor: 'bg-amber-50',
+            borderColor: 'border-amber-200',
+            textColor: 'text-amber-700'
+        },
+        {
+            icon: '👥',
+            title: 'Friend Added',
+            time: '1 day ago',
+            color: 'from-gray-500 to-gray-600',
+            bgColor: 'bg-gray-50',
+            borderColor: 'border-gray-200',
+            textColor: 'text-gray-700'
+        }
+    ];
+
+    return (
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-slate-900">Recent Activity</h3>
+                <button className="text-slate-600 hover:text-slate-700 transition-colors font-medium text-xs">
+                    View All
+                </button>
+            </div>
+            <div className="space-y-3">
+                {activities.map((activity, index) => (
+                    <div key={index} className="flex items-center space-x-3 p-3 bg-slate-50 border border-slate-200 rounded-lg hover:bg-slate-100 hover:border-slate-300 transition-all duration-200">
+                        <div className={`w-8 h-8 ${activity.bgColor} border ${activity.borderColor} rounded-lg flex items-center justify-center flex-shrink-0`}>
+                            <span className="text-lg">{activity.icon}</span>
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <p className="text-slate-900 font-medium text-sm">{activity.title}</p>
+                            <p className="text-slate-500 text-xs">{activity.time}</p>
+                        </div>
+                        <div className="flex items-center">
+                            <div className={`w-2 h-2 ${activity.textColor.replace('text-', 'bg-')} rounded-full`}></div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className="mt-4 pt-4 border-t border-slate-200">
+                <div className="flex items-center justify-center">
+                    <button className="text-slate-500 hover:text-slate-700 text-xs font-medium flex items-center">
+                        <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                        </svg>
+                        Load More Activities
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/Store.tsx b/components/dashboard/Store.tsx
new file mode 100644
index 0000000..71b80e6
--- /dev/null
+++ b/components/dashboard/Store.tsx
@@ -0,0 +1,219 @@
+'use client';
+
+import { useState } from 'react';
+import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+
+interface StoreItem {
+    ItemId: string;
+    DisplayName?: string;
+    CatalogVersion?: string;
+    VirtualCurrencyPrices?: { [currencyCode: string]: number };
+}
+
+interface StoreProps {
+    storeItems: StoreItem[];
+    loading: boolean;
+    virtualCurrency: { [currencyCode: string]: number };
+    onPurchase?: (item: StoreItem, currency: string) => void;
+}
+
+// Currency conversion rates (base currency: first available currency)
+const getCurrencyConversionRates = (currencies: string[]) => {
+    // Example conversion rates - you can customize these based on your game economy
+    const rates: { [key: string]: number } = {
+        'AC': 1,     // Arena Coins (base)
+        'GC': 0.1,   // Gold Coins (1 GC = 10 AC)
+        'TC': 5,     // Tickets (1 TC = 0.2 AC)
+        'SC': 1.5,   // Silver Coins  
+        'BC': 2,     // Bronze Coins
+        'PC': 0.05,  // Premium Coins (1 PC = 20 AC)
+        'Coins': 1,
+        'Gems': 0.1,
+        'Tickets': 5,
+        'Credits': 1,
+        'Points': 10,
+    };
+    
+    return rates;
+};
+
+// Get currency icon
+const getCurrencyIcon = (currency: string): string => {
+    const icons: { [key: string]: string } = {
+        'AC': '🪙', 'GC': '💎', 'TC': '🎫', 'SC': '🥈', 'BC': '🥉', 'PC': '🏆',
+        'Coins': '🪙', 'Gems': '💎', 'Tickets': '🎫', 'Credits': '💳', 'Points': '⭐'
+    };
+    return icons[currency] || '💰';
+};
+
+export default function Store({ storeItems, loading, virtualCurrency, onPurchase }: StoreProps) {
+    // Get all available currencies
+    const currencies = Object.entries(virtualCurrency);
+    const totalCurrencies = currencies.length;
+    const currencyKeys = Object.keys(virtualCurrency);
+    const conversionRates = getCurrencyConversionRates(currencyKeys);
+    
+    // State for selected currency for each item
+    const [selectedCurrencies, setSelectedCurrencies] = useState<{ [itemId: string]: string }>({});
+
+    return (
+        <div className="bg-gradient-to-br from-teal-900/30 via-slate-800/40 to-emerald-900/30 backdrop-blur-sm border border-teal-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/20">
+            <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center space-x-3">
+                    <div className="w-8 h-8 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-sm">
+                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 className="text-white font-semibold text-base">Premium Store</h3>
+                        <p className="text-slate-300 text-xs">Buy items with multiple currencies</p>
+                    </div>
+                </div>
+                <span className="inline-block px-2 py-1 bg-emerald-500/20 text-emerald-300 text-xs font-semibold rounded-full border border-emerald-500/30">
+                    {storeItems.length} Items
+                </span>
+            </div>
+            
+            {/* Currency Info */}
+            {totalCurrencies > 1 && (
+                <div className="mb-6 p-4 bg-gradient-to-r from-emerald-50 to-blue-50 border border-emerald-200 rounded-xl">
+                    <div className="flex items-start space-x-3">
+                        <div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                            <svg className="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h4 className="text-emerald-800 font-semibold text-sm">Flexible Payment Options</h4>
+                            <p className="text-emerald-700 text-xs mt-1">
+                                Choose from {totalCurrencies} different currencies. Smart conversion rates ensure fair pricing across all payment methods.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
+            
+            {loading ? (
+                <ListSkeleton count={3} />
+            ) : storeItems.length === 0 ? (
+                <div className="text-center py-6">
+                    <div className="w-12 h-12 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                    </div>
+                    <p className="text-slate-700 font-medium text-sm">Store is empty</p>
+                    <p className="text-slate-500 text-xs">No items available for purchase</p>
+                </div>
+            ) : (
+                <div className="space-y-4">
+                    {storeItems.slice(0, 4).map((item) => {
+                        const originalPrice = item.VirtualCurrencyPrices ? Object.values(item.VirtualCurrencyPrices)[0] || 0 : 0;
+                        const originalCurrency = item.VirtualCurrencyPrices ? Object.keys(item.VirtualCurrencyPrices)[0] || 'AC' : 'AC';
+                        
+                        // Get selected currency for this item (default to original)
+                        const selectedCurrency = selectedCurrencies[item.ItemId] || originalCurrency;
+                        
+                        // Calculate price in selected currency
+                        const calculatePrice = (targetCurrency: string): number => {
+                            if (targetCurrency === originalCurrency) return originalPrice;
+                            
+                            const originalRate = conversionRates[originalCurrency] || 1;
+                            const targetRate = conversionRates[targetCurrency] || 1;
+                            
+                            return Math.ceil(originalPrice * (originalRate / targetRate));
+                        };
+                        
+                        const price = calculatePrice(selectedCurrency);
+                        const playerCurrencyAmount = virtualCurrency[selectedCurrency] || 0;
+                        const canAfford = playerCurrencyAmount >= price;
+                        
+                        return (
+                            <div key={item.ItemId} className="bg-white border border-slate-200 rounded-xl p-4 hover:shadow-md hover:border-slate-300 transition-all duration-300">
+                                {/* Item Header */}
+                                <div className="flex items-center justify-between mb-3">
+                                    <div className="flex items-center space-x-3">
+                                        <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-sm">
+                                            <span className="text-xl">🎁</span>
+                                        </div>
+                                        <div>
+                                            <h4 className="text-slate-900 font-semibold text-sm">{item.DisplayName || item.ItemId}</h4>
+                                            <p className="text-slate-500 text-xs">Premium Store Item</p>
+                                        </div>
+                                    </div>
+                                    <div className="text-right">
+                                        <div className="text-lg font-bold text-slate-900">
+                                            {price} {getCurrencyIcon(selectedCurrency)}
+                                        </div>
+                                        <div className="text-xs text-slate-500">{selectedCurrency}</div>
+                                    </div>
+                                </div>
+                                
+                                {/* Currency Selector - Clean Pills Design */}
+                                <div className="mb-3">
+                                    <p className="text-xs font-medium text-slate-700 mb-2">Payment Method:</p>
+                                    <div className="flex flex-wrap gap-2">
+                                        {currencyKeys.slice(0, 3).map(currency => {
+                                            const currencyPrice = calculatePrice(currency);
+                                            const playerAmount = virtualCurrency[currency] || 0;
+                                            const affordable = playerAmount >= currencyPrice;
+                                            const isSelected = selectedCurrency === currency;
+                                            
+                                            return (
+                                                <button
+                                                    key={currency}
+                                                    onClick={() => setSelectedCurrencies(prev => ({
+                                                        ...prev,
+                                                        [item.ItemId]: currency
+                                                    }))}
+                                                    className={`px-3 py-1 rounded-full text-xs font-medium transition-all duration-200 border ${
+                                                        isSelected
+                                                            ? affordable
+                                                                ? 'bg-emerald-100 border-emerald-300 text-emerald-700'
+                                                                : 'bg-red-100 border-red-300 text-red-700'
+                                                            : affordable
+                                                                ? 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'
+                                                                : 'bg-slate-50 border-slate-200 text-slate-400 opacity-50'
+                                                    }`}
+                                                    disabled={!affordable}
+                                                >
+                                                    {getCurrencyIcon(currency)} {currencyPrice}
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                    {selectedCurrency !== originalCurrency && (
+                                        <p className="text-xs text-slate-500 mt-1">
+                                            Original: {originalPrice} {getCurrencyIcon(originalCurrency)} {originalCurrency}
+                                        </p>
+                                    )}
+                                </div>
+                                
+                                {/* Purchase Button */}
+                                <button
+                                    onClick={() => onPurchase && onPurchase(item, selectedCurrency)}
+                                    disabled={!canAfford || !onPurchase}
+                                    className={`w-full py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-[1.02] disabled:transform-none ${
+                                        canAfford 
+                                            ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white shadow-sm hover:shadow-md'
+                                            : 'bg-slate-100 text-slate-400 cursor-not-allowed'
+                                    }`}
+                                >
+                                    {canAfford ? 'Purchase Now' : `Need ${price - playerCurrencyAmount} more ${selectedCurrency}`}
+                                </button>
+                            </div>
+                        );
+                    })}
+                    {storeItems.length > 4 && (
+                        <div className="text-center pt-4">
+                            <button className="px-4 py-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-600 hover:text-slate-700 text-sm font-medium rounded-lg transition-all duration-200">
+                                View {storeItems.length - 4} more items →
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/VirtualCurrencies.tsx b/components/dashboard/VirtualCurrencies.tsx
new file mode 100644
index 0000000..2d3065d
--- /dev/null
+++ b/components/dashboard/VirtualCurrencies.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+
+interface VirtualCurrency {
+    [currencyCode: string]: number;
+}
+
+interface VirtualCurrenciesProps {
+    virtualCurrency: VirtualCurrency;
+    loading: boolean;
+}
+
+// Currency labels mapping
+const getCurrencyLabel = (currencyCode: string): string => {
+    const labelMap: { [key: string]: string } = {
+        'AC': 'AC', // Arena Coins
+        'GC': 'GC', // Gems/Gold Coins
+        'TC': 'TC', // Tickets
+        'SC': 'SC', // Silver Coins  
+        'BC': 'BC', // Bronze Coins
+        'PC': 'PC', // Premium Coins
+        'Coins': 'COINS',
+        'Gems': 'GEMS',
+        'Tickets': 'TICKETS',
+        'Gold': 'GOLD',
+        'Silver': 'SILVER',
+        'Bronze': 'BRONZE',
+        'Credits': 'CREDITS',
+        'Points': 'POINTS',
+        'Energy': 'ENERGY',
+        'XP': 'XP',
+        'VT': 'VT', // Virtual Tickets
+        'VP': 'VP', // Virtual Points
+        'default': 'COIN'
+    };
+    
+    return labelMap[currencyCode] || labelMap['default'];
+};
+
+// Currency color themes
+const getCurrencyTheme = (currencyCode: string, index: number) => {
+    const themes = [
+        {
+            gradient: 'from-emerald-500 to-emerald-600',
+            bgColor: 'bg-emerald-50',
+            borderColor: 'border-emerald-200',
+            textColor: 'text-emerald-700',
+            hoverShadow: 'hover:shadow-emerald-100'
+        },
+        {
+            gradient: 'from-blue-500 to-blue-600',
+            bgColor: 'bg-blue-50',
+            borderColor: 'border-blue-200',
+            textColor: 'text-blue-700',
+            hoverShadow: 'hover:shadow-blue-100'
+        },
+        {
+            gradient: 'from-purple-500 to-purple-600',
+            bgColor: 'bg-purple-50',
+            borderColor: 'border-purple-200',
+            textColor: 'text-purple-700',
+            hoverShadow: 'hover:shadow-purple-100'
+        },
+        {
+            gradient: 'from-amber-500 to-amber-600',
+            bgColor: 'bg-amber-50',
+            borderColor: 'border-amber-200',
+            textColor: 'text-amber-700',
+            hoverShadow: 'hover:shadow-amber-100'
+        },
+        {
+            gradient: 'from-rose-500 to-rose-600',
+            bgColor: 'bg-rose-50',
+            borderColor: 'border-rose-200',
+            textColor: 'text-rose-700',
+            hoverShadow: 'hover:shadow-rose-100'
+        }
+    ];
+    
+    return themes[index % themes.length];
+};
+
+export default function VirtualCurrencies({ virtualCurrency, loading }: VirtualCurrenciesProps) {
+    const currencies = Object.entries(virtualCurrency);
+
+    return (
+        <div className="bg-gradient-to-br from-amber-900/30 via-slate-800/40 to-yellow-900/30 backdrop-blur-sm border border-amber-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/20">
+            <div className="flex items-center justify-between mb-2">
+                <h3 className="text-lg font-bold text-white">Virtual Currencies</h3>
+                <div className="bg-amber-500/20 border border-amber-500/30 px-2 py-1 rounded-md">
+                    <span className="text-amber-300 font-medium text-xs">{currencies.length} currencies</span>
+                </div>
+            </div>
+            
+            {loading ? (
+                <ListSkeleton count={3} />
+            ) : currencies.length === 0 ? (
+                <div className="text-center py-6">
+                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold">COINS</span>
+                    </div>
+                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No currencies</p>
+                    <p className="text-slate-500 dark:text-slate-400 text-xs">Virtual currencies will appear here</p>
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {currencies.map(([currencyCode, amount], index) => {
+                        const theme = getCurrencyTheme(currencyCode, index);
+                        const label = getCurrencyLabel(currencyCode);
+                        
+                        return (
+                            <div key={currencyCode} className={`bg-white dark:bg-slate-700 border ${theme.borderColor} dark:border-slate-600 rounded-lg p-3 hover:bg-slate-50 dark:hover:bg-slate-600 transition-all duration-200 ${theme.hoverShadow}`}>
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-3">
+                                        <div className={`w-10 h-10 ${theme.bgColor} dark:bg-opacity-20 border ${theme.borderColor} dark:border-slate-600 rounded-lg flex items-center justify-center`}>
+                                            <span className="text-xs font-bold">{label}</span>
+                                        </div>
+                                        <div>
+                                            <p className="text-slate-900 dark:text-slate-100 font-medium text-sm">{currencyCode}</p>
+                                            <p className={`text-xs ${theme.textColor} dark:text-slate-400`}>Virtual Currency</p>
+                                        </div>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="text-slate-900 dark:text-slate-100 font-bold text-lg leading-none">{amount.toLocaleString()}</p>
+                                        <p className="text-slate-500 dark:text-slate-400 text-xs">balance</p>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+            
+            {currencies.length > 0 && (
+                <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-600">
+                    <div className="text-center">
+                        <p className="text-slate-500 dark:text-slate-400 text-xs">
+                            Total Value: {currencies.reduce((sum, [_, amount]) => sum + amount, 0).toLocaleString()} units
+                        </p>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/html/html-game-view.tsx b/components/html/html-game-view.tsx
index c7cee2e..7496269 100644
--- a/components/html/html-game-view.tsx
+++ b/components/html/html-game-view.tsx
@@ -3,7 +3,6 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { AddArenaCoins, AddGamePlayedCount, AddTrophies } from '@/lib/playfab/playfab';
-import styles from './html-game.module.css';
 import { useUnitySession } from '@/context/UnitySessionContext';
 import { usePlayTimeSession } from '@/context/PlayTimeContext';
 
@@ -92,17 +91,67 @@ const HTMLGameView: React.FC<HTMLGameProps> = ({ gameId, buildName, folderName }
     };
 
     return (
-        <div style={{ width: '100%', height: '100vh', position: 'relative', backgroundColor: '#001f3f' }}>
-            <iframe
-                src={getGameUrl()}
-                className={styles.gameIframe}
-                title={buildName || 'HTML Game'}
-                allow="fullscreen; autoplay; microphone; camera; gamepad; payment"
-                sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
-            />
-            <button className={styles.backButton} onClick={handleExit}>
-                ← Back
-            </button>
+        <div className="relative w-full h-screen bg-background-primary overflow-hidden">
+            {/* Game Container */}
+            <div className="relative w-full h-full">
+                <iframe
+                    src={getGameUrl()}
+                    className="w-full h-full border-0 outline-none"
+                    title={buildName || 'HTML Game'}
+                    allow="fullscreen; autoplay; microphone; camera; gamepad; payment"
+                    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
+                />
+            </div>
+
+            {/* Modern Control Panel */}
+            <div className="absolute top-0 left-0 right-0 z-50">
+                <div className="flex items-center justify-between p-4 bg-gradient-to-r from-background-secondary/95 to-background-tertiary/95 backdrop-blur-sm border-b border-primary-500/20">
+                    {/* Game Info */}
+                    <div className="flex items-center space-x-3">
+                        <div className="w-3 h-3 rounded-full bg-accent-500 animate-pulse"></div>
+                        <div className="text-text-primary font-medium text-sm">
+                            {buildName || 'HTML Game'}
+                        </div>
+                    </div>
+
+                    {/* Controls */}
+                    <div className="flex items-center space-x-2">
+                        {/* Back Button */}
+                        <button 
+                            onClick={handleExit}
+                            className="group relative px-4 py-2 bg-primary-600 hover:bg-primary-700 text-text-primary font-medium text-sm rounded-lg transition-all duration-200 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-primary-500/25 border border-primary-500/30"
+                        >
+                            <div className="flex items-center space-x-2">
+                                <svg 
+                                    className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-0.5" 
+                                    fill="none" 
+                                    stroke="currentColor" 
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path 
+                                        strokeLinecap="round" 
+                                        strokeLinejoin="round" 
+                                        strokeWidth={2} 
+                                        d="M10 19l-7-7m0 0l7-7m-7 7h18" 
+                                    />
+                                </svg>
+                                <span>Exit</span>
+                            </div>
+                            
+                            {/* Hover Effect */}
+                            <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-primary-500/20 to-accent-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Loading Overlay */}
+            <div className="absolute inset-0 bg-background-primary/50 backdrop-blur-sm flex items-center justify-center z-40 opacity-0 pointer-events-none transition-opacity duration-300" id="loading-overlay">
+                <div className="flex flex-col items-center space-y-4">
+                    <div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
+                    <div className="text-text-secondary text-sm font-medium">Loading Game...</div>
+                </div>
+            </div>
         </div>
     );
 };
diff --git a/components/html/html-game.module.css b/components/html/html-game.module.css
deleted file mode 100644
index bb27d01..0000000
--- a/components/html/html-game.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.gameIframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    outline: none;
-}
-
-.backButton {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-    z-index: 1000;
-    transition: background-color 0.3s ease;
-}
-
-.backButton:hover {
-    background: rgba(0, 0, 0, 0.9);
-}
\ No newline at end of file
diff --git a/components/popup/Popup.tsx b/components/popup/Popup.tsx
index 43fe39a..1c9bf25 100644
--- a/components/popup/Popup.tsx
+++ b/components/popup/Popup.tsx
@@ -9,54 +9,21 @@ export default function Popup({
     type?: 'success' | 'error';
     onClose: () => void;
 }) {
-    const styles = {
-        base: {
-            position: 'fixed' as const,
-            top: '2rem',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 9999,
-            padding: '1rem 2rem',
-            borderRadius: '12px',
-            fontWeight: 700,
-            boxShadow: '0 4px 24px #0008',
-            minWidth: '220px',
-            textAlign: 'center' as const,
-            animation: 'fadeIn 0.3s ease-in-out',
-        },
-        success: {
-            background: '#079486',
-            color: '#fff',
-        },
-        error: {
-            background: '#330000',
-            color: '#ff5555',
-        },
-        closeButton: {
-            marginLeft: 16,
-            background: 'none',
-            border: 'none',
-            color: '#ff5555',
-            fontWeight: 700,
-            cursor: 'pointer',
-            fontSize: '1.1rem',
-        },
-    };
-
-    const typeStyles = type === 'success' ? styles.success : styles.error;
+    const baseClasses = "fixed top-8 left-1/2 transform -translate-x-1/2 z-50 p-4 rounded-xl font-bold shadow-2xl shadow-black/30 min-w-56 text-center animate-fade-in";
+    
+    const typeClasses = type === 'success' 
+        ? "bg-green-600 text-white" 
+        : "bg-red-900 text-red-400";
 
     return (
         <div
-            style={{
-                ...styles.base,
-                ...typeStyles,
-            }}
+            className={`${baseClasses} ${typeClasses}`}
             role="alert"
         >
             {message}
             <button
                 onClick={onClose}
-                style={styles.closeButton}
+                className="ml-4 bg-transparent border-0 text-red-400 font-bold cursor-pointer text-lg hover:text-red-300 transition-colors duration-200"
                 aria-label="Close"
             >
                 ✖
diff --git a/components/popup/Timeout.tsx b/components/popup/Timeout.tsx
index 15f5e37..f69ae34 100644
--- a/components/popup/Timeout.tsx
+++ b/components/popup/Timeout.tsx
@@ -6,23 +6,8 @@ interface TimeoutProps {
 
 export default function Timeout({ message }: TimeoutProps) {
     return (
-        <div style={{
-            position: 'fixed',
-            top: '20px',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            backgroundColor: '#ff4d4f',
-            color: 'white',
-            padding: '12px 24px',
-            borderRadius: '8px',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
-            zIndex: 9999,
-            fontWeight: 'bold',
-            fontSize: '16px',
-            userSelect: 'none',
-            textAlign: 'center',
-        }}>
-            {message || "Hey! Your playtime for today is over. We’ll be looking forward to seeing you again tomorrow!"}
+        <div className="fixed top-5 left-1/2 transform -translate-x-1/2 bg-red-500 text-white p-3 rounded-lg shadow-lg shadow-black/20 z-50 font-bold text-base select-none text-center">
+            {message || "Hey! Your playtime for today is over. We'll be looking forward to seeing you again tomorrow!"}
         </div>
     );
 }
diff --git a/components/publish/File.tsx b/components/publish/File.tsx
index 2a81609..7405213 100644
--- a/components/publish/File.tsx
+++ b/components/publish/File.tsx
@@ -1,39 +1,42 @@
 'use client';
 import React, { useState } from 'react';
-import styles from './file.module.css';
 
 interface FileProps {
-    label: string;
+    title: string;
     accept?: string;
-    onFileChange: (file: File | null) => void;
+    onChange: (file: File | null) => void;
 }
 
-export default function File({ label, accept, onFileChange }: FileProps) {
+export default function File({ title, accept, onChange }: FileProps) {
     const [fileName, setFileName] = useState<string | null>(null);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const files = e.target.files;
         if (files && files.length > 0) {
             setFileName(files[0].name);
-            onFileChange(files[0]);
+            onChange(files[0]);
         } else {
             setFileName(null);
-            onFileChange(null);
+            onChange(null);
         }
     };
 
     return (
-        <div className={styles.fileInputWrapper}>
-            <label className={styles.fileLabel}>
-                {label}
-                <input
-                    type="file"
-                    accept={accept}
-                    onChange={handleChange}
-                    className={styles.fileInput}
-                />
+        <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-4 transition-colors duration-300">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                {title}
             </label>
-            {fileName && <p className={styles.fileName}>Selected: {fileName}</p>}
+            <input
+                type="file"
+                accept={accept}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+            />
+            {fileName && (
+                <p className="text-slate-500 dark:text-slate-400 text-sm mt-2">
+                    Selected: {fileName}
+                </p>
+            )}
         </div>
     );
 }
diff --git a/components/publish/Folder.tsx b/components/publish/Folder.tsx
index 5a09366..fc09e88 100644
--- a/components/publish/Folder.tsx
+++ b/components/publish/Folder.tsx
@@ -1,30 +1,31 @@
 import React, { ChangeEvent } from 'react';
 
-interface FolderInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    webkitdirectory?: string;
-    directory?: string;
+interface FolderUploadProps {
+    title: string;
+    onChange: (files: FileList | null) => void;
 }
 
-export function FolderInput(props: FolderInputProps) {
-    return <input {...props} type="file" />;
-}
-
-export default function FolderUpload() {
+export default function FolderUpload({ title, onChange }: FolderUploadProps) {
     const handleFolderChange = (e: ChangeEvent<HTMLInputElement>) => {
         const files = e.target.files;
-        if (!files) return;
-        for (let i = 0; i < files.length; i++) {
-            console.log(files[i].name, files[i].webkitRelativePath);
-        }
+        onChange(files);
     };
 
     return (
-        <FolderInput
-            webkitdirectory=""
-            directory=""
-            multiple
-            onChange={handleFolderChange}
-            style={{ display: 'block', marginTop: 10 }}
-        />
+        <div className="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-4 transition-colors duration-300">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
+                {title}
+            </label>
+            <input
+                type="file"
+                {...({webkitdirectory: ""} as any)}
+                multiple
+                onChange={handleFolderChange}
+                className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+            />
+            <p className="text-slate-500 dark:text-slate-400 text-sm mt-2">
+                Select a folder containing all your files
+            </p>
+        </div>
     );
 }
diff --git a/components/publish/file.module.css b/components/publish/file.module.css
deleted file mode 100644
index 26051d8..0000000
--- a/components/publish/file.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* File.module.css */
-
-.fileInputWrapper {
-    margin-bottom: 20px;
-}
-
-.fileLabel {
-    display: block;
-    font-weight: 600;
-    color: #333;
-    cursor: pointer;
-    user-select: none;
-    margin-bottom: 6px;
-}
-
-.fileInput {
-    display: block;
-    margin-top: 6px;
-    width: 100%;
-    padding: 10px 12px;
-    font-size: 1rem;
-    border-radius: 6px;
-    border: 1.8px solid #ccc;
-    transition: border-color 0.25s ease;
-}
-
-.fileInput:focus {
-    outline: none;
-    border-color: #0070f3;
-    box-shadow: 0 0 5px #0070f3;
-}
-
-.fileName {
-    font-size: 0.9rem;
-    color: #555;
-    margin-top: 4px;
-    font-style: italic;
-}
\ No newline at end of file
diff --git a/components/sidebar/SideBar.tsx b/components/sidebar/SideBar.tsx
index 87f4dbe..052a739 100644
--- a/components/sidebar/SideBar.tsx
+++ b/components/sidebar/SideBar.tsx
@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import styles from './sidebar.module.css';
 
 export default function SideBar() {
     const pathname = usePathname();
@@ -17,24 +16,35 @@ export default function SideBar() {
     ];
 
     return (
-        <div className={styles.sidebar}>
-            <ul className={styles.navList}>
+        <div className="fixed top-0 left-0 w-20 h-screen bg-white dark:bg-slate-900 p-4 shadow-lg flex flex-col items-center z-20 border-r border-slate-200 dark:border-slate-700">
+            {/* Navigation Items */}
+            <ul className="list-none p-0 m-0 flex flex-col gap-6">
                 {list.map((item) => {
                     const isSelected = pathname === item.url;
                     return (
                         <li
                             key={item.url}
-                            className={`${styles.navItem} ${isSelected ? styles.selected : ''}`}
+                            className={`relative flex justify-center items-center cursor-pointer rounded-xl p-2 w-12 h-12 transition-all duration-300 ${
+                                isSelected 
+                                    ? 'bg-blue-100 dark:bg-blue-900 shadow-lg shadow-blue-500/20' 
+                                    : 'hover:bg-slate-100 dark:hover:bg-slate-800'
+                            }`}
                         >
-                            <Link href={item.url} className={styles.navLink}>
+                            <Link href={item.url} className="flex justify-center items-center w-full h-full rounded-xl text-decoration-none text-inherit group">
                                 <Image
                                     src={item.icon}
                                     alt={`${item.name} icon`}
                                     width={24}
                                     height={24}
-                                    className={styles.icon}
+                                    className={`transition-all duration-300 ${
+                                        isSelected 
+                                            ? 'filter-none scale-110' 
+                                            : 'grayscale brightness-70 group-hover:filter-none group-hover:scale-110'
+                                    }`}
                                 />
-                                <span className={styles.tooltip}>{item.name}</span>
+                                <span className="absolute top-1/2 left-full ml-4 transform -translate-y-1/2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 py-2 rounded-lg whitespace-nowrap text-sm font-medium opacity-0 pointer-events-none transition-all duration-300 shadow-lg z-10 group-hover:opacity-100 group-hover:pointer-events-auto">
+                                    {item.name}
+                                </span>
                             </Link>
                         </li>
                     );
diff --git a/components/sidebar/sidebar.module.css b/components/sidebar/sidebar.module.css
deleted file mode 100644
index d947d0d..0000000
--- a/components/sidebar/sidebar.module.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.sidebar {
-    background-color: #121214;
-    padding: 1rem;
-    width: 80px;
-    height: 100vh; 
-    position: fixed; 
-    top: 0;
-    left: 0;
-    box-shadow: 0.1px 0 15px rgba(255, 255, 255, 0.1);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    z-index: 2;
-}
-
-.navList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.navItem {
-    position: relative;
-    /* for tooltip positioning */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    border-radius: 10px;
-    padding: 0.5rem;
-    width: 48px;
-    height: 48px;
-    transition: background-color 0.3s ease;
-}
-
-
-.navLink {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    border-radius: 10px;
-    text-decoration: none;
-    color: inherit;
-}
-
-.icon {
-    filter: grayscale(100%) brightness(70%);
-    transition: transform 0.3s ease, filter 0.3s ease;
-}
-
-.navItem:hover .icon,
-.navItem:focus .icon {
-    filter: none;
-    transform: scale(1.5);
-}
-
-.selected {
-    background-color: #ffffff21;
-}
-
-.selected .icon {
-    filter: none;
-    transform: scale(1.5);
-}
-
-.tooltip {
-    position: absolute;
-    top: 50%;
-    left: 110%;
-    transform: translateY(-50%);
-    background: linear-gradient(135deg, #818181, #252e55);
-    color: #fff;
-    padding: 15px 20px;
-    border-radius: 6px;
-    white-space: nowrap;
-    font-size: 0.85rem;
-    font-weight: 700;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    z-index: 10;
-    outline: .05px solid #ffffff9d;
-}
-
-.navItem:hover .tooltip,
-.navItem:focus .tooltip {
-    opacity: 1;
-    pointer-events: auto;
-}
\ No newline at end of file
diff --git a/components/timer/PlayTimer.tsx b/components/timer/PlayTimer.tsx
index 70a74f4..a4dcd40 100644
--- a/components/timer/PlayTimer.tsx
+++ b/components/timer/PlayTimer.tsx
@@ -12,25 +12,6 @@ function formatTime(seconds: number) {
     return `${h}:${m}:${s}`;
 }
 
-const styles = {
-    position: 'fixed' as const,
-    top: 10,
-    left: 100,
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    color: 'white',
-    padding: '8px 14px',
-    borderRadius: '8px',
-    fontWeight: 'bold',
-    fontFamily: 'monospace',
-    zIndex: 9999,
-    userSelect: 'none' as const,
-    pointerEvents: 'none' as const,
-    minWidth: '160px',
-    textAlign: 'left' as const,
-    fontSize: '14px',
-    lineHeight: 1.4,
-    whiteSpace: 'pre-line' as const,
-};
 
 export default function PlayTimer() {
     const { isUnityLoaded } = useUnitySession();
@@ -45,7 +26,7 @@ export default function PlayTimer() {
     if (!isUnityLoaded) return null;
 
     return (
-        <div style={styles}>
+        <div className="fixed top-2.5 left-25 bg-black/70 text-white p-2 rounded-lg font-bold font-mono z-50 select-none pointer-events-none min-w-40 text-left text-sm leading-relaxed whitespace-pre-line">
             Elapsed: {formatTime(elapsedTime)}
             {'\n'}
             Remaining: {formatTime(remainingDisplay)}
diff --git a/components/ui/SkeletonLoader.tsx b/components/ui/SkeletonLoader.tsx
new file mode 100644
index 0000000..65eb7fb
--- /dev/null
+++ b/components/ui/SkeletonLoader.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+interface SkeletonLoaderProps {
+    className?: string;
+    count?: number;
+    height?: string;
+    width?: string;
+    variant?: 'text' | 'circular' | 'rectangular' | 'card';
+}
+
+export default function SkeletonLoader({ 
+    className = '', 
+    count = 1, 
+    height = 'h-4', 
+    width = 'w-full',
+    variant = 'text'
+}: SkeletonLoaderProps) {
+    const baseClasses = 'bg-slate-700/50 animate-pulse rounded';
+    
+    const variantClasses = {
+        text: 'h-4',
+        circular: 'rounded-full aspect-square',
+        rectangular: 'h-20',
+        card: 'h-32'
+    };
+
+    const skeletonClasses = `${baseClasses} ${variantClasses[variant]} ${height} ${width} ${className}`;
+
+    return (
+        <>
+            {Array.from({ length: count }).map((_, index) => (
+                <div key={index} className={skeletonClasses} />
+            ))}
+        </>
+    );
+}
+
+// Specific skeleton components for common use cases
+export function CardSkeleton() {
+    return (
+        <div className="bg-gradient-to-br from-slate-800/30 via-slate-700/40 to-slate-900/30 backdrop-blur-sm border border-slate-600/20 rounded-lg p-4 shadow-lg">
+            <div className="flex items-center space-x-3 mb-4">
+                <SkeletonLoader variant="circular" width="w-8" height="h-8" />
+                <div className="flex-1">
+                    <SkeletonLoader className="mb-2" width="w-3/4" />
+                    <SkeletonLoader width="w-1/2" />
+                </div>
+            </div>
+            <SkeletonLoader variant="rectangular" className="mb-3" />
+            <div className="space-y-2">
+                <SkeletonLoader width="w-full" />
+                <SkeletonLoader width="w-5/6" />
+                <SkeletonLoader width="w-4/6" />
+            </div>
+        </div>
+    );
+}
+
+export function ListSkeleton({ count = 3 }: { count?: number }) {
+    return (
+        <div className="space-y-3">
+            {Array.from({ length: count }).map((_, index) => (
+                <div key={index} className="flex items-center space-x-3 p-3 bg-gradient-to-r from-slate-800/20 to-slate-700/20 backdrop-blur-sm border border-slate-600/10 rounded-lg">
+                    <SkeletonLoader variant="circular" width="w-10" height="h-10" />
+                    <div className="flex-1 space-y-2">
+                        <SkeletonLoader width="w-3/4" />
+                        <SkeletonLoader width="w-1/2" />
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export function ChartSkeleton() {
+    return (
+        <div className="bg-gradient-to-br from-slate-800/30 via-slate-700/40 to-slate-900/30 backdrop-blur-sm border border-slate-600/20 rounded-lg p-4 shadow-lg">
+            <div className="flex items-center justify-between mb-4">
+                <SkeletonLoader width="w-32" height="h-6" />
+                <SkeletonLoader width="w-20" height="h-6" />
+            </div>
+            <div className="flex items-center justify-between h-48">
+                <div className="flex flex-col items-center space-y-4">
+                    <SkeletonLoader variant="rectangular" width="w-16" height="h-32" />
+                    <SkeletonLoader width="w-12" />
+                </div>
+                <div className="flex flex-col items-center space-y-4">
+                    <SkeletonLoader variant="rectangular" width="w-16" height="h-24" />
+                    <SkeletonLoader width="w-12" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function TableSkeleton({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+    return (
+        <div className="bg-gradient-to-br from-slate-800/30 via-slate-700/40 to-slate-900/30 backdrop-blur-sm border border-slate-600/20 rounded-lg overflow-hidden shadow-lg">
+            {/* Header */}
+            <div className="border-b border-slate-600/30 p-4">
+                <div className="flex space-x-4">
+                    {Array.from({ length: columns }).map((_, index) => (
+                        <SkeletonLoader key={index} width="w-24" />
+                    ))}
+                </div>
+            </div>
+            {/* Rows */}
+            <div className="divide-y divide-slate-600/30">
+                {Array.from({ length: rows }).map((_, rowIndex) => (
+                    <div key={rowIndex} className="p-4">
+                        <div className="flex space-x-4">
+                            {Array.from({ length: columns }).map((_, colIndex) => (
+                                <SkeletonLoader key={colIndex} width="w-20" />
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/unity/game-view.tsx b/components/unity/game-view.tsx
index 3866fb0..c830ab6 100644
--- a/components/unity/game-view.tsx
+++ b/components/unity/game-view.tsx
@@ -4,7 +4,6 @@ import dynamic from 'next/dynamic';
 import { useEffect } from 'react';
 import { useUnityContext, Unity } from 'react-unity-webgl';
 import { AddArenaCoins, AddGamePlayedCount, AddTrophies } from '@/lib/playfab/playfab';
-import styles from './game.module.css';
 import { useRouter } from 'next/navigation';
 import { useUnitySession } from '@/context/UnitySessionContext';
 import { usePlayTimeSession } from '@/context/PlayTimeContext';
@@ -96,15 +95,15 @@ const GameView: React.FC<PlayGameProps> = ({ Id, Name }) => {
     };
 
     return (
-        <div style={{ width: '100%', height: '100vh', position: 'relative', backgroundColor: '#001f3f' }}>
+        <div className="relative w-full h-screen bg-background-primary">
             <Unity
                 unityProvider={unityProvider}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
+                className="w-full h-full"
             />
-            <button className={styles.backButton} onClick={handleExit}>
+            <button 
+                className="absolute top-4 right-4 z-10 bg-gradient-to-br from-accent-600 to-accent-700 text-white border-0 py-2 px-5 text-base font-semibold rounded-lg cursor-pointer mb-6 transition-all duration-300 select-none hover:bg-gradient-to-br hover:from-accent-700 hover:to-accent-800 hover:shadow-lg hover:shadow-accent-500/25" 
+                onClick={handleExit}
+            >
                 ← Back
             </button>
         </div>
diff --git a/components/unity/game.module.css b/components/unity/game.module.css
deleted file mode 100644
index 7366d31..0000000
--- a/components/unity/game.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.backButton {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    z-index: 10;
-    background: linear-gradient(135deg, #af1f32, #913737);
-    color: white;
-    border: none;
-    padding: 0.5rem 1.25rem;
-    font-size: 1rem;
-    border-radius: 8px;
-    font-weight: 600;
-    cursor: pointer;
-    margin-bottom: 1.5rem;
-    transition: background 0.3s ease;
-    user-select: none;
-}
-
-.backButton:hover {
-    background: linear-gradient(135deg, rgb(187, 6, 30), #df1e4e);
-}
\ No newline at end of file
diff --git a/lib/playfab/playfab.ts b/lib/playfab/playfab.ts
index e75c759..c34d681 100644
--- a/lib/playfab/playfab.ts
+++ b/lib/playfab/playfab.ts
@@ -184,7 +184,7 @@ export async function updatePlayFabUserData(
     }
 }
 
-async function updatePlayerStatistics(
+export async function updatePlayerStatistics(
     sessionTicket: string,
     titleId: string,
     statistics: Statistics[]
@@ -524,6 +524,15 @@ export async function getStoreItems(sessionTicket: string, titleId: string, stor
 }
 
 export async function purchaseStoreItem(sessionTicket: string, titleId: string, storeId: string, catalogVersion: string, itemId: string, price: number, currencyCode = 'AC') {
+    console.log('PlayFab Purchase Request:', {
+        endpoint: `https://${titleId}.playfabapi.com/Client/PurchaseItem`,
+        storeId,
+        catalogVersion,
+        itemId,
+        price,
+        currencyCode
+    });
+    
     const res = await fetch(`https://${titleId}.playfabapi.com/Client/PurchaseItem`, {
         method: 'POST',
         headers: {
@@ -539,7 +548,10 @@ export async function purchaseStoreItem(sessionTicket: string, titleId: string,
         }),
     });
 
-    return res.json();
+    const result = await res.json();
+    console.log('PlayFab Purchase Response:', result);
+    
+    return result;
 }
 
 export async function useInventoryItem(
diff --git a/package-lock.json b/package-lock.json
index 5f81e9d..bcd25d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,14 +27,15 @@
         "three": "^0.177.0"
       },
       "devDependencies": {
-        "@tailwindcss/postcss": "^4.1.11",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.19",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/sqlite3": "^5.1.0",
         "autoprefixer": "^10.4.21",
         "postcss": "^8.5.6",
-        "tailwindcss": "^4.1.11",
+        "tailwindcss": "^3.4.17",
         "typescript": "^5"
       }
     },
@@ -51,20 +52,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
@@ -106,33 +93,82 @@
         "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "minipass": "^7.0.4"
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=18.0.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@isaacs/fs-minipass/node_modules/minipass": {
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
-      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -151,16 +187,16 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
-      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.29",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -331,6 +367,44 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@npmcli/fs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
@@ -375,6 +449,17 @@
         "@noble/hashes": "^1.1.5"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@react-three/drei": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.1.2.tgz",
@@ -486,473 +571,146 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
-      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
+      "integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "enhanced-resolve": "^5.18.1",
-        "jiti": "^2.4.2",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.11"
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
       }
     },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
-      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
       "dev": true,
-      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
-      "engines": {
-        "node": ">= 10"
+        "postcss-selector-parser": "6.0.10"
       },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-x64": "4.1.11",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
-      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
       }
     },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
-      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@tootallnate/once": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
+      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "license": "MIT",
       "optional": true,
-      "os": [
-        "darwin"
-      ],
       "engines": {
-        "node": ">= 10"
+        "node": ">= 6"
       }
     },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
-      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/formidable": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/@types/formidable/-/formidable-3.4.5.tgz",
+      "integrity": "sha512-s7YPsNVfnsng5L8sKnG/Gbb2tiwwJTY1conOkJzTMRvJAlLFW1nEua+ADsJQu8N1c0oTHx9+d5nqg10WuT9gHQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@types/node": "*"
       }
     },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
-      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@types/node": {
+      "version": "20.19.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.0.tgz",
+      "integrity": "sha512-hfrc+1tud1xcdVTABC2JiomZJEklMcXYNTVtZLAeqTVWD+qL5jkHKT+1lOtqDdGxt+mB53DTtiz673vfjU8D1Q==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
-      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
+      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "csstype": "^3.0.2"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
-      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@types/react-chartjs-2": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/@types/react-chartjs-2/-/react-chartjs-2-2.5.7.tgz",
+      "integrity": "sha512-waqYqiNULIVUqaKO7MGUpFmWrVtH7gVPOzqwV4y4zgUyu/JiDwC005PpveO442HKnby9kLgp3t1SB2sld+ACLw==",
+      "deprecated": "This is a stub types definition for react-chartjs-2 (https://github.com/gor181/react-chartjs-2). react-chartjs-2 provides its own type definitions, so you don't need @types/react-chartjs-2 installed!",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "react-chartjs-2": "*"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
-      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@types/react-dom": {
+      "version": "19.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
+      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
-      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "@types/react": "*"
       }
     },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
-      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@types/sqlite3": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@types/sqlite3/-/sqlite3-5.1.0.tgz",
+      "integrity": "sha512-w25Gd6OzcN0Sb6g/BO7cyee0ugkiLgonhgGYfG+H0W9Ub6PUsC2/4R+KXy2tc80faPIWO3Qytbvr8gP1fU4siA==",
+      "deprecated": "This is a stub types definition. sqlite3 provides its own type definitions, so you do not need this installed.",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "sqlite3": "*"
       }
     },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
-      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.177.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.177.0.tgz",
+      "integrity": "sha512-/ZAkn4OLUijKQySNci47lFO+4JLE1TihEjsGWPUT+4jWqxtwOPPEwJV1C3k5MEx0mcBPCdkFjzRzDOnHEI1R+A==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.3",
-        "@emnapi/runtime": "^1.4.3",
-        "@emnapi/wasi-threads": "^1.0.2",
-        "@napi-rs/wasm-runtime": "^0.2.11",
-        "@tybys/wasm-util": "^0.9.0",
-        "tslib": "^2.8.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
-      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
-      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide/node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
-      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.11",
-        "@tailwindcss/oxide": "4.1.11",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.11"
-      }
-    },
-    "node_modules/@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.3",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
-      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/draco3d": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
-      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/formidable": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/@types/formidable/-/formidable-3.4.5.tgz",
-      "integrity": "sha512-s7YPsNVfnsng5L8sKnG/Gbb2tiwwJTY1conOkJzTMRvJAlLFW1nEua+ADsJQu8N1c0oTHx9+d5nqg10WuT9gHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "20.19.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.0.tgz",
-      "integrity": "sha512-hfrc+1tud1xcdVTABC2JiomZJEklMcXYNTVtZLAeqTVWD+qL5jkHKT+1lOtqDdGxt+mB53DTtiz673vfjU8D1Q==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~6.21.0"
-      }
-    },
-    "node_modules/@types/offscreencanvas": {
-      "version": "2019.7.3",
-      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
-      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
-      "license": "MIT"
-    },
-    "node_modules/@types/react": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
-      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-chartjs-2": {
-      "version": "2.5.7",
-      "resolved": "https://registry.npmjs.org/@types/react-chartjs-2/-/react-chartjs-2-2.5.7.tgz",
-      "integrity": "sha512-waqYqiNULIVUqaKO7MGUpFmWrVtH7gVPOzqwV4y4zgUyu/JiDwC005PpveO442HKnby9kLgp3t1SB2sld+ACLw==",
-      "deprecated": "This is a stub types definition for react-chartjs-2 (https://github.com/gor181/react-chartjs-2). react-chartjs-2 provides its own type definitions, so you don't need @types/react-chartjs-2 installed!",
-      "license": "MIT",
-      "dependencies": {
-        "react-chartjs-2": "*"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "19.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
-      "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.0.0"
-      }
-    },
-    "node_modules/@types/react-reconciler": {
-      "version": "0.28.9",
-      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
-      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/sqlite3": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@types/sqlite3/-/sqlite3-5.1.0.tgz",
-      "integrity": "sha512-w25Gd6OzcN0Sb6g/BO7cyee0ugkiLgonhgGYfG+H0W9Ub6PUsC2/4R+KXy2tc80faPIWO3Qytbvr8gP1fU4siA==",
-      "deprecated": "This is a stub types definition. sqlite3 provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "sqlite3": "*"
-      }
-    },
-    "node_modules/@types/stats.js": {
-      "version": "0.17.4",
-      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
-      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/three": {
-      "version": "0.177.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.177.0.tgz",
-      "integrity": "sha512-/ZAkn4OLUijKQySNci47lFO+4JLE1TihEjsGWPUT+4jWqxtwOPPEwJV1C3k5MEx0mcBPCdkFjzRzDOnHEI1R+A==",
-      "license": "MIT",
-      "dependencies": {
-        "@dimforge/rapier3d-compat": "~0.12.0",
-        "@tweenjs/tween.js": "~23.1.3",
-        "@types/stats.js": "*",
-        "@types/webxr": "*",
-        "@webgpu/types": "*",
-        "fflate": "~0.8.2",
-        "meshoptimizer": "~0.18.1"
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
       }
     },
     "node_modules/@types/webxr": {
@@ -1036,12 +794,46 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -1064,6 +856,13 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -1112,8 +911,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT",
-      "optional": true
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -1144,6 +943,19 @@
         "require-from-string": "^2.0.2"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -1199,6 +1011,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -1297,6 +1122,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camera-controls": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
@@ -1338,12 +1173,50 @@
         "pnpm": ">=8"
       }
     },
-    "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "license": "ISC",
-      "engines": {
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "license": "ISC",
+      "engines": {
         "node": ">=10"
       }
     },
@@ -1381,8 +1254,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1394,8 +1267,8 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT",
-      "optional": true
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/color-string": {
       "version": "1.9.1",
@@ -1418,6 +1291,16 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1464,6 +1347,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1547,12 +1443,33 @@
         "wrappy": "1"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/draco3d": {
       "version": "1.5.7",
       "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
       "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.178",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.178.tgz",
@@ -1564,8 +1481,8 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT",
-      "optional": true
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/encoding": {
       "version": "0.1.13",
@@ -1586,20 +1503,6 @@
         "once": "^1.4.0"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
-      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -1636,6 +1539,46 @@
         "node": ">=6"
       }
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -1648,6 +1591,49 @@
       "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
       "license": "MIT"
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/formidable": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/formidable/-/formidable-3.5.4.tgz",
@@ -1704,6 +1690,31 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
@@ -1753,6 +1764,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/glsl-noise": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
@@ -1763,8 +1787,8 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "devOptional": true,
-      "license": "ISC"
+      "license": "ISC",
+      "optional": true
     },
     "node_modules/gsap": {
       "version": "3.13.0",
@@ -1779,6 +1803,19 @@
       "license": "ISC",
       "optional": true
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hls.js": {
       "version": "1.6.5",
       "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.5.tgz",
@@ -1942,16 +1979,68 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "devOptional": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
@@ -1959,6 +2048,16 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -1980,283 +2079,80 @@
         "@types/react-reconciler": "^0.28.9"
       },
       "peerDependencies": {
-        "react": "^19.0.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
-      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
-    "node_modules/jose": {
-      "version": "4.15.9",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
-      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
-    "node_modules/jsbn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
-      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
-    "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
+      "license": "MIT",
       "engines": {
-        "node": ">= 12.0.0"
+        "node": ">=14"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -2279,16 +2175,6 @@
         "three": ">=0.134.0"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
-      }
-    },
     "node_modules/make-fetch-happen": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz",
@@ -2317,6 +2203,16 @@
         "node": ">= 10"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/meshline": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
@@ -2332,6 +2228,20 @@
       "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
       "license": "MIT"
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mimic-response": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
@@ -2344,6 +2254,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2486,6 +2406,18 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2709,6 +2641,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -2742,6 +2684,16 @@
       "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==",
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -2800,6 +2752,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2819,12 +2778,86 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/path-scurry/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/playfab-sdk": {
       "version": "2.174.250526",
       "resolved": "https://registry.npmjs.org/playfab-sdk/-/playfab-sdk-2.174.250526.tgz",
@@ -2860,6 +2893,104 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -2968,6 +3099,27 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -3069,6 +3221,16 @@
         }
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -3083,6 +3245,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3092,6 +3267,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
@@ -3102,6 +3298,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -3119,6 +3326,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3443,8 +3674,24 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -3458,8 +3705,22 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -3499,6 +3760,99 @@
         }
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/suspend-react": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
@@ -3509,20 +3863,101 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
-      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
     },
-    "node_modules/tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+    "node_modules/tailwindcss/node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
     "node_modules/tar": {
@@ -3585,6 +4020,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/three": {
       "version": "0.177.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.177.0.tgz",
@@ -3623,6 +4081,19 @@
       "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
       "license": "MIT"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/troika-three-text": {
       "version": "0.52.4",
       "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
@@ -3653,6 +4124,13 @@
       "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
       "license": "MIT"
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -3848,6 +4326,113 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -3860,6 +4445,19 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/zustand": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
diff --git a/package.json b/package.json
index f5a6eba..421030d 100644
--- a/package.json
+++ b/package.json
@@ -31,14 +31,15 @@
     "three": "^0.177.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/sqlite3": "^5.1.0",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 137b4ed..33ad091 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,6 @@
-// postcss.config.js
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index e0a691d..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-    "./app/**/*.{js,ts,jsx,tsx}", // optional, for app directory
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..b1b50a3
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,68 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: 'var(--color-primary-50)',
+          100: 'var(--color-primary-100)',
+          200: 'var(--color-primary-200)',
+          300: 'var(--color-primary-300)',
+          400: 'var(--color-primary-400)',
+          500: 'var(--color-primary-500)',
+          600: 'var(--color-primary-600)',
+          700: 'var(--color-primary-700)',
+          800: 'var(--color-primary-800)',
+          900: 'var(--color-primary-900)',
+          950: 'var(--color-primary-950)',
+        },
+        secondary: {
+          50: 'var(--color-secondary-50)',
+          100: 'var(--color-secondary-100)',
+          200: 'var(--color-secondary-200)',
+          300: 'var(--color-secondary-300)',
+          400: 'var(--color-secondary-400)',
+          500: 'var(--color-secondary-500)',
+          600: 'var(--color-secondary-600)',
+          700: 'var(--color-secondary-700)',
+          800: 'var(--color-secondary-800)',
+          900: 'var(--color-secondary-900)',
+          950: 'var(--color-secondary-950)',
+        },
+        accent: {
+          50: 'var(--color-accent-50)',
+          100: 'var(--color-accent-100)',
+          200: 'var(--color-accent-200)',
+          300: 'var(--color-accent-300)',
+          400: 'var(--color-accent-400)',
+          500: 'var(--color-accent-500)',
+          600: 'var(--color-accent-600)',
+          700: 'var(--color-accent-700)',
+          800: 'var(--color-accent-800)',
+          900: 'var(--color-accent-900)',
+          950: 'var(--color-accent-950)',
+        },
+        background: {
+          primary: 'var(--color-background-primary)',
+          secondary: 'var(--color-background-secondary)',
+          tertiary: 'var(--color-background-tertiary)',
+        },
+        text: {
+          primary: 'var(--color-text-primary)',
+          secondary: 'var(--color-text-secondary)',
+          accent: 'var(--color-text-accent)',
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config

From 0a2f80eae8e5efd9cbf0c6c97a4b5f4fafd53130 Mon Sep 17 00:00:00 2001
From: sabarishr-dev <sabarish.r@vinsinfo.com>
Date: Mon, 29 Sep 2025 09:15:55 +0530
Subject: [PATCH 3/4] ref: pages

---
 app/arena/[id]/page.tsx                    | 101 +++--
 app/arena/page.tsx                         |  81 ++--
 app/contribute/page.tsx                    | 164 ++++---
 app/coupon/redeem/page.tsx                 | 473 ++++++++++++---------
 app/dashboard/page.tsx                     |  59 +--
 app/globals.css                            | 212 ++++++++-
 app/layout.tsx                             |   7 +-
 app/leaderboard/page.tsx                   | 236 +++++-----
 app/page.tsx                               |  12 +-
 app/profile/page.tsx                       | 329 +++++++-------
 components/dashboard/GoldenTickets.tsx     |  54 ++-
 components/dashboard/HeroSection.tsx       |  22 +-
 components/dashboard/Inventory.tsx         |  34 +-
 components/dashboard/LeaderboardChart.tsx  | 206 +++++++++
 components/dashboard/PlayerStatsChart.tsx  |  63 ++-
 components/dashboard/PlaytimeChart.tsx     |  36 +-
 components/dashboard/Store.tsx             | 215 ++++------
 components/dashboard/VirtualCurrencies.tsx | 105 +----
 components/sidebar/SideBar.tsx             |  16 +-
 package-lock.json                          |   8 +-
 package.json                               |   2 +-
 tailwind.config.ts                         |  11 +
 22 files changed, 1389 insertions(+), 1057 deletions(-)
 create mode 100644 components/dashboard/LeaderboardChart.tsx

diff --git a/app/arena/[id]/page.tsx b/app/arena/[id]/page.tsx
index 40b3cdf..83a509c 100644
--- a/app/arena/[id]/page.tsx
+++ b/app/arena/[id]/page.tsx
@@ -61,9 +61,9 @@ export default function GameDetailPage() {
 
     if (status === 'loading' || loading) {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            <div className="min-h-screen bg-background-primary transition-colors duration-300">
                 {/* Header Skeleton */}
-                <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="bg-card border-b border-border-light transition-colors duration-300">
                     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                         <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded w-1/3 animate-pulse"></div>
                         <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-1/4 mt-2 animate-pulse"></div>
@@ -104,13 +104,13 @@ export default function GameDetailPage() {
 
     if (!game) {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
+            <div className="min-h-screen bg-background-primary flex items-center justify-center transition-colors duration-300">
                 <div className="text-center">
-                    <div className="w-24 h-24 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
                         <span className="text-4xl">😞</span>
                     </div>
-                    <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">Game Not Found</h2>
-                    <p className="text-slate-600 dark:text-slate-400 mb-8">The game you're looking for doesn't exist or may have been removed.</p>
+                    <h2 className="text-2xl font-bold text-primary mb-4">Game Not Found</h2>
+                    <p className="text-secondary mb-8">The game you're looking for doesn't exist or may have been removed.</p>
                     <button
                         onClick={() => router.push('/arena')}
                         className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors duration-200"
@@ -123,7 +123,7 @@ export default function GameDetailPage() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+        <div className="min-h-screen bg-background-primary transition-colors duration-300">
             {/* Popup */}
             {popup && (
                 <Popup
@@ -134,17 +134,17 @@ export default function GameDetailPage() {
             )}
 
             {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+            <div className="bg-gradient-to-r from-slate-900/80 to-gray-900/80 backdrop-blur-md">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">{game.title}</h1>
-                            <p className="text-slate-600 dark:text-slate-400 mt-2">by {game.publisher}</p>
+                            <h1 className="text-3xl font-bold text-white">{game.title}</h1>
+                            <p className="text-gray-300 mt-2">by {game.publisher}</p>
                         </div>
                         <div className="flex items-center space-x-3">
                             <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${game.type === 'unity'
-                                    ? 'bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300'
-                                    : 'bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300'
+                                ? 'bg-white/20 text-white backdrop-blur-sm'
+                                : 'bg-white/20 text-white backdrop-blur-sm'
                                 }`}>
                                 {game.type === 'unity' ? 'Unity WebGL' : 'HTML Game'}
                             </span>
@@ -157,7 +157,7 @@ export default function GameDetailPage() {
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Media Preview */}
                     <div className="lg:col-span-2">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
+                        <div className="bg-gray-800/40 backdrop-blur-sm rounded-xl shadow-lg p-6 transition-colors duration-300">
                             <div className="aspect-video bg-slate-100 dark:bg-slate-700 rounded-lg overflow-hidden mb-4">
                                 {activeIndex < game.image.length ? (
                                     <img
@@ -189,8 +189,8 @@ export default function GameDetailPage() {
                                     <button
                                         key={`img-${index}`}
                                         className={`w-3 h-3 rounded-full transition-colors duration-200 ${activeIndex === index
-                                                ? 'bg-blue-500'
-                                                : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
+                                            ? 'bg-blue-500'
+                                            : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
                                             }`}
                                         onClick={() => setActiveIndex(index)}
                                     />
@@ -199,61 +199,41 @@ export default function GameDetailPage() {
                                     <button
                                         key="video"
                                         className={`w-3 h-3 rounded-full transition-colors duration-200 ${activeIndex === game.image.length
-                                                ? 'bg-blue-500'
-                                                : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
+                                            ? 'bg-blue-500'
+                                            : 'bg-slate-300 dark:bg-slate-600 hover:bg-slate-400 dark:hover:bg-slate-500'
                                             }`}
                                         onClick={() => setActiveIndex(game.image.length)}
                                     />
                                 )}
                             </div>
 
-                            {/* Game Description */}
-                            <div>
-                                <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-3">Description</h2>
-                                <p className="text-slate-600 dark:text-slate-400 leading-relaxed">{game.description}</p>
-                            </div>
+                             {/* Game Description */}
+                             <div>
+                                 <h2 className="text-lg font-semibold text-white mb-3">Description</h2>
+                                 <p className="text-gray-300 leading-relaxed">{game.description}</p>
+                             </div>
                         </div>
                     </div>
 
                     {/* Game Details Sidebar */}
                     <div className="space-y-6">
-                        {/* Play Button */}
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <button
-                                onClick={handleOnClickPlay}
-                                disabled={isExpired}
-                                className={`w-full py-4 rounded-lg font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg ${isExpired
-                                        ? 'bg-red-500 hover:bg-red-600 text-white cursor-not-allowed opacity-75'
-                                        : 'bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white'
-                                    }`}
-                            >
-                                {isExpired ? 'Playtime Expired' : 'Play Now'}
-                            </button>
-
-                            <button
-                                onClick={() => router.push('/arena')}
-                                className="w-full mt-3 py-3 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 rounded-lg font-medium transition-colors duration-200"
-                            >
-                                ← Back to Arena
-                            </button>
-                        </div>
 
                         {/* Game Details */}
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Game Details</h2>
+                        <div className="bg-gray-800/40 backdrop-blur-sm rounded-xl shadow-lg p-6 transition-colors duration-300">
+                            <h2 className="text-lg font-semibold text-white mb-4">Game Details</h2>
                             <div className="space-y-4">
                                 <div>
-                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">Details</h3>
-                                    <p className="text-slate-700 dark:text-slate-300">{game.details}</p>
+                                    <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wide mb-1">Details</h3>
+                                    <p className="text-gray-300">{game.details}</p>
                                 </div>
 
                                 <div>
-                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-2">Categories</h3>
+                                    <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wide mb-2">Categories</h3>
                                     <div className="flex flex-wrap gap-2">
                                         {game.category.map((cat, index) => (
                                             <span
                                                 key={index}
-                                                className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full text-sm font-medium"
+                                                className="inline-block bg-gray-700/50 backdrop-blur-sm text-gray-300 px-3 py-1 rounded-full text-sm font-medium shadow-sm"
                                             >
                                                 {cat}
                                             </span>
@@ -261,12 +241,29 @@ export default function GameDetailPage() {
                                     </div>
                                 </div>
 
-                                <div>
-                                    <h3 className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-1">Publisher</h3>
-                                    <p className="text-slate-700 dark:text-slate-300 font-medium">{game.publisher}</p>
-                                </div>
                             </div>
                         </div>
+
+                        {/* Play Button */}
+                        <div className="bg-gray-800/40 backdrop-blur-sm rounded-xl shadow-lg p-6 transition-colors duration-300">
+                            <button
+                                onClick={handleOnClickPlay}
+                                disabled={isExpired}
+                                className={`w-full py-4 rounded-lg font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg ${isExpired
+                                    ? 'bg-red-600 hover:bg-red-700 text-white cursor-not-allowed opacity-75'
+                                    : 'bg-green-600 hover:bg-green-700 text-white'
+                                    }`}
+                            >
+                                {isExpired ? 'Playtime Expired' : 'Play ❌ '}
+                            </button>
+
+                            <button
+                                onClick={() => router.push('/arena')}
+                                className="w-full mt-3 py-3 bg-gray-700/50 backdrop-blur-sm hover:bg-gray-600/50 text-gray-300 rounded-lg font-medium transition-all duration-200 shadow-sm"
+                            >
+                                Back ⭕
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/app/arena/page.tsx b/app/arena/page.tsx
index af13e51..2ee4a22 100644
--- a/app/arena/page.tsx
+++ b/app/arena/page.tsx
@@ -85,30 +85,30 @@ export default function Arena() {
 
     // Get all unique categories
     const allCategories = Array.from(new Set(games.flatMap(game => game.category)));
-    
+
     // Filter games based on search and category
     const filteredGames = games.filter(game => {
         const matchesSearch = game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                            game.description.toLowerCase().includes(searchTerm.toLowerCase());
+            game.description.toLowerCase().includes(searchTerm.toLowerCase());
         const matchesCategory = selectedCategory === 'all' || game.category.includes(selectedCategory);
         return matchesSearch && matchesCategory;
     });
 
     if (loading) {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+            <div className="min-h-screen bg-background-primary transition-colors duration-300">
                 {/* Header */}
-                <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+                <div className="bg-card border-b border-border-light transition-colors duration-300">
                     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                        <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Arena</h1>
-                        <p className="text-slate-600 dark:text-slate-400 mt-2">Discover and play amazing games</p>
+                        <h1 className="text-3xl font-bold text-primary">Arena</h1>
+                        <p className="text-secondary mt-2">Discover and play games</p>
                     </div>
                 </div>
 
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                         {[...Array(8)].map((_, i) => (
-                            <div key={i} className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+                            <div key={i} className="bg-card rounded-xl border border-border-light overflow-hidden">
                                 <div className="h-48 bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
                                 <div className="p-4 space-y-3">
                                     <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
@@ -123,19 +123,19 @@ export default function Arena() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+        <div className="min-h-screen bg-background-primary transition-colors duration-300">
             {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
+            <div className="bg-gradient-to-r from-slate-900/80 to-gray-900/80 backdrop-blur-md">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                     <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                         <div>
-                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Arena</h1>
-                            <p className="text-slate-600 dark:text-slate-400 mt-2">
-                                Discover and play amazing games • {games.length} games available
+                            <h1 className="text-3xl font-bold text-white">Arena</h1>
+                            <p className="text-gray-300 mt-2">
+                                Discover and play games • {games.length} games available
                             </p>
                         </div>
                         <div className="mt-4 sm:mt-0">
-                            <span className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full text-sm font-medium">
+                            <span className="inline-block bg-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
                                 Gaming Hub
                             </span>
                         </div>
@@ -153,16 +153,16 @@ export default function Arena() {
                             placeholder="Search games..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
-                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                            className="w-full px-4 py-2 rounded-lg bg-gray-900/50 backdrop-blur-sm text-white placeholder-gray-400 focus:ring-2 focus:ring-gray-500 focus:outline-none transition-all duration-200 shadow-lg"
                         />
                     </div>
-                    
+
                     {/* Category Filter */}
                     <div className="sm:w-48">
                         <select
                             value={selectedCategory}
                             onChange={(e) => setSelectedCategory(e.target.value)}
-                            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                            className="w-full px-4 py-2 bg-gray-900/50 backdrop-blur-sm text-white border-none outline-none focus:outline-none focus:ring-2 focus:ring-gray-500 transition-all duration-200 shadow-lg rounded-lg"
                         >
                             <option value="all">All Categories</option>
                             {allCategories.map(category => (
@@ -175,14 +175,14 @@ export default function Arena() {
                 {/* Games Grid */}
                 {filteredGames.length === 0 ? (
                     <div className="text-center py-16">
-                        <div className="w-24 h-24 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-6">
-                                        <span className="text-xl font-bold text-slate-500 dark:text-slate-400">GAMES</span>
+                        <div className="w-24 h-24 bg-gray-800/60 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                            <span className="text-gray-300 text-xl font-bold">GAMES</span>
                         </div>
                         <h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
                             {searchTerm || selectedCategory !== 'all' ? 'No games found' : 'No games available'}
                         </h3>
                         <p className="text-slate-600 dark:text-slate-400">
-                            {searchTerm || selectedCategory !== 'all' 
+                            {searchTerm || selectedCategory !== 'all'
                                 ? 'Try adjusting your search or filter criteria'
                                 : 'Check back later for new games!'}
                         </p>
@@ -196,7 +196,7 @@ export default function Arena() {
                             return (
                                 <div
                                     key={game.id}
-                                    className="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-lg hover:border-slate-300 dark:hover:border-slate-600 transition-all duration-300 cursor-pointer group"
+                                    className="bg-gray-800/40 backdrop-blur-sm rounded-xl overflow-hidden hover:shadow-xl hover:scale-105 transition-all duration-300 cursor-pointer group shadow-lg"
                                     onClick={() => router.push(`/arena/${game.id}`)}
                                 >
                                     {/* Game Image */}
@@ -206,18 +206,17 @@ export default function Arena() {
                                             alt={`${game.title} preview`}
                                             className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                         />
-                                        
+
                                         {/* Image Indicators */}
                                         {images.length > 1 && (
                                             <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex gap-1">
                                                 {images.map((_, index) => (
                                                     <button
                                                         key={index}
-                                                        className={`w-2 h-2 rounded-full transition-colors duration-200 ${
-                                                            currentIndex === index 
-                                                                ? 'bg-white' 
-                                                                : 'bg-white/50 hover:bg-white/75'
-                                                        }`}
+                                                        className={`w-2 h-2 rounded-full transition-colors duration-200 ${currentIndex === index
+                                                            ? 'bg-white'
+                                                            : 'bg-white/50 hover:bg-white/75'
+                                                            }`}
                                                         onClick={(e) => {
                                                             e.stopPropagation();
                                                             handleDotClick(game.id, index);
@@ -226,42 +225,16 @@ export default function Arena() {
                                                 ))}
                                             </div>
                                         )}
-
-                                        {/* Play Overlay */}
-                                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300 flex items-center justify-center">
-                                            <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                                <div className="w-16 h-16 bg-white/90 dark:bg-slate-800/90 rounded-full flex items-center justify-center">
-                                                    <span className="text-2xl font-bold">PLAY</span>
-                                                </div>
-                                            </div>
-                                        </div>
                                     </div>
 
                                     {/* Game Info */}
                                     <div className="p-4">
-                                        <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-2 line-clamp-1">
+                                        <h3 className="font-semibold text-white mb-2 line-clamp-1">
                                             {game.title}
                                         </h3>
-                                        <p className="text-slate-600 dark:text-slate-400 text-sm mb-3 line-clamp-2">
+                                        <p className="text-gray-300 text-sm mb-3 line-clamp-2">
                                             {game.description}
                                         </p>
-                                        
-                                        {/* Categories and Publisher */}
-                                        <div className="flex items-center justify-between">
-                                            <div className="flex flex-wrap gap-1">
-                                                {game.category.slice(0, 2).map((cat, index) => (
-                                                    <span
-                                                        key={index}
-                                                        className="inline-block bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-medium"
-                                                    >
-                                                        {cat}
-                                                    </span>
-                                                ))}
-                                            </div>
-                                            <span className="text-xs text-slate-500 dark:text-slate-400">
-                                                by {game.publisher}
-                                            </span>
-                                        </div>
                                     </div>
                                 </div>
                             );
diff --git a/app/contribute/page.tsx b/app/contribute/page.tsx
index 848d547..1376e1d 100644
--- a/app/contribute/page.tsx
+++ b/app/contribute/page.tsx
@@ -9,12 +9,24 @@ export default function Contribute() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
             {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Contribute</h1>
-                    <p className="text-slate-600 dark:text-slate-400 mt-2">Join our community and help build the future of Arena</p>
+            <div className="relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-pink-600/10"></div>
+                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-10 h-10 bg-gradient-to-r from-green-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg">
+                            <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h1 className="text-3xl font-bold bg-gradient-to-r from-white via-green-100 to-blue-200 bg-clip-text text-transparent">
+                                Contribute
+                            </h1>
+                            <p className="text-slate-300 mt-1">Join our community and help build the future of Arena</p>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -30,7 +42,7 @@ export default function Contribute() {
                         >
                             <div className="group relative">
                                 <div className="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-xl"></div>
-                                <div className="relative bg-white dark:bg-slate-800 p-8 rounded-full shadow-xl border border-slate-200 dark:border-slate-700 transition-all duration-300 group-hover:scale-105">
+                                <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl p-8 rounded-full shadow-2xl transition-all duration-300 group-hover:scale-105">
                                     <img 
                                         src="/icons/logo.png" 
                                         alt="Arena Logo" 
@@ -41,14 +53,14 @@ export default function Contribute() {
                         </a>
                         
                         <div className="mt-8">
-                            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+                            <h2 className="text-2xl font-bold text-white mb-4">
                                 Open Source Project
                             </h2>
                             <a 
                                 href="https://github.com/r-sabarish/Arena" 
                                 target="_blank" 
                                 rel="noopener noreferrer"
-                                className="inline-flex items-center space-x-2 bg-gray-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-gray-200 text-white dark:text-gray-900 px-6 py-3 rounded-lg font-medium transition-colors duration-200"
+                                className="inline-flex items-center space-x-2 bg-gradient-to-r from-slate-800 to-slate-700 hover:from-slate-700 hover:to-slate-600 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 shadow-lg"
                             >
                                 <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                     <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
@@ -60,84 +72,100 @@ export default function Contribute() {
 
                     {/* Right Side - Content */}
                     <div className="space-y-6">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-6">
-                                Be a Contributor
-                            </h1>
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-purple-500/5 rounded-2xl"></div>
+                            <div className="relative">
+                                <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-6">
+                                    Be a Contributor
+                                </h1>
 
-                            <div className="space-y-4 text-slate-700 dark:text-slate-300">
-                                <p>
-                                    <strong className="text-slate-900 dark:text-slate-100">Arena</strong> is an open-source platform that makes it easy and fun for office teams to play games together online.
-                                </p>
+                                <div className="space-y-4 text-slate-300">
+                                    <p>
+                                        <strong className="text-white">Arena</strong> is an open-source platform that makes it easy and fun for office teams to play games together online.
+                                    </p>
 
-                                <p>
-                                    Combining robust backend services with engaging gameplay, Arena delivers a smooth, interactive experience directly in your browser.
-                                </p>
+                                    <p>
+                                        Combining robust backend services with engaging gameplay, Arena delivers a smooth, interactive experience directly in your browser.
+                                    </p>
+                                </div>
                             </div>
                         </div>
 
                         {/* Tech Stack */}
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Tech Stack</h3>
-                            
-                            <div className="space-y-3">
-                                <div className="flex items-start space-x-3">
-                                    <span className="text-blue-500 mt-1 font-bold">•</span>
-                                    <div>
-                                        <strong className="text-slate-900 dark:text-slate-100">Website & Authentication:</strong>
-                                        <span className="text-slate-600 dark:text-slate-400"> Built with Next.js, featuring secure sign-in powered by NextAuth and Azure AD</span>
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-green-500/5 via-transparent to-blue-500/5 rounded-2xl"></div>
+                            <div className="relative">
+                                <div className="flex items-center mb-4">
+                                    <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-600 rounded-full flex items-center justify-center mr-3 shadow-lg">
+                                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+                                        </svg>
                                     </div>
+                                    <h3 className="text-lg font-semibold text-white">Tech Stack</h3>
                                 </div>
                                 
-                                <div className="flex items-start space-x-3">
-                                    <span className="text-purple-500 mt-1 font-bold">•</span>
-                                    <div>
-                                        <strong className="text-slate-900 dark:text-slate-100">Player Progress & Leaderboards:</strong>
-                                        <span className="text-slate-600 dark:text-slate-400"> Managed through PlayFab, tracking stats, achievements, and virtual currencies</span>
+                                <div className="space-y-3">
+                                    <div className="flex items-start space-x-3">
+                                        <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
+                                        <div>
+                                            <strong className="text-white">Website & Authentication:</strong>
+                                            <span className="text-slate-300"> Built with Next.js, featuring secure sign-in powered by NextAuth and Azure AD</span>
+                                        </div>
                                     </div>
-                                </div>
-                                
-                                <div className="flex items-start space-x-3">
-                                    <span className="text-green-500 mt-1 font-bold">•</span>
-                                    <div>
-                                        <strong className="text-slate-900 dark:text-slate-100">Game Experience:</strong>
-                                        <span className="text-slate-600 dark:text-slate-400"> Developed in Unity WebGL, supporting both single-player and multiplayer modes</span>
+                                    
+                                    <div className="flex items-start space-x-3">
+                                        <div className="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
+                                        <div>
+                                            <strong className="text-white">Player Progress & Leaderboards:</strong>
+                                            <span className="text-slate-300"> Managed through PlayFab, tracking stats, achievements, and virtual currencies</span>
+                                        </div>
                                     </div>
-                                </div>
-                                
-                                <div className="flex items-start space-x-3">
-                                    <span className="text-orange-500 mt-1 font-bold">•</span>
-                                    <div>
-                                        <strong className="text-slate-900 dark:text-slate-100">Real-Time Multiplayer:</strong>
-                                        <span className="text-slate-600 dark:text-slate-400"> Enabled by Photon Fusion 2 for seamless multiplayer interactions</span>
+                                    
+                                    <div className="flex items-start space-x-3">
+                                        <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
+                                        <div>
+                                            <strong className="text-white">Game Experience:</strong>
+                                            <span className="text-slate-300"> Developed in Unity WebGL, supporting both single-player and multiplayer modes</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <div className="flex items-start space-x-3">
+                                        <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
+                                        <div>
+                                            <strong className="text-white">Real-Time Multiplayer:</strong>
+                                            <span className="text-slate-300"> Enabled by Photon Fusion 2 for seamless multiplayer interactions</span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
 
                         {/* Call to Action */}
-                        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/50 dark:to-purple-950/50 rounded-xl border border-blue-200 dark:border-blue-800 p-6">
-                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Ready to Contribute?</h3>
-                            <p className="text-slate-600 dark:text-slate-400 mb-4">
-                                Whether you're a developer, designer, or game creator, there are many ways to contribute to Arena!
-                            </p>
-                            
-                            <div className="flex flex-col sm:flex-row gap-3">
-                                <button
-                                    onClick={HandlePublish}
-                                    className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg"
-                                >
-                                    Publish Your Game
-                                </button>
+                        <div className="relative bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-purple-500/5 rounded-2xl"></div>
+                            <div className="relative">
+                                <h3 className="text-lg font-semibold text-white mb-4">Ready to Contribute?</h3>
+                                <p className="text-slate-300 mb-4">
+                                    Whether you're a developer, designer, or game creator, there are many ways to contribute to Arena!
+                                </p>
                                 
-                                <a
-                                    href="https://github.com/r-sabarish/Arena/issues"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex-1 bg-white dark:bg-slate-700 hover:bg-slate-50 dark:hover:bg-slate-600 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 px-6 py-3 rounded-lg font-medium transition-colors duration-200 text-center"
-                                >
-                                    Report Issues
-                                </a>
+                                <div className="flex flex-col sm:flex-row gap-3">
+                                    <button
+                                        onClick={HandlePublish}
+                                        className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg"
+                                    >
+                                        Publish Your Game
+                                    </button>
+                                    
+                                    <a
+                                        href="https://github.com/r-sabarish/Arena/issues"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="flex-1 bg-slate-700/50 hover:bg-slate-600/50 text-slate-300 px-6 py-3 rounded-lg font-medium transition-all duration-200 text-center backdrop-blur-sm"
+                                    >
+                                        Report Issues
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/app/coupon/redeem/page.tsx b/app/coupon/redeem/page.tsx
index 3d3be3d..20c8043 100644
--- a/app/coupon/redeem/page.tsx
+++ b/app/coupon/redeem/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useSession } from 'next-auth/react';
+import { useSession, signOut, signIn } from 'next-auth/react';
 import SignIn from '@/components/auth/SignIn';
 import { useState, useRef, useEffect } from 'react';
-import { getUserDataFromPlayFab, updatePlayFabUserData } from '@/lib/playfab/playfab';
+import { getUserDataFromPlayFab, updatePlayFabUserData, playFabLoginWithAzureAD } from '@/lib/playfab/playfab';
 import Popup from '@/components/popup/Popup';
 import { useSearchParams } from 'next/navigation';
 
@@ -25,13 +25,23 @@ export default function ScratchToRedeem() {
     }, [searchParams]);
 
     useEffect(() => {
+        const initializeCanvas = () => {
         if (!canvasRef.current || !containerRef.current) return;
+            
         const canvas = canvasRef.current;
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
         // Set canvas size to container size
         const rect = containerRef.current.getBoundingClientRect();
+            
+            // Check if dimensions are valid
+            if (rect.width <= 0 || rect.height <= 0) {
+                console.log('Container not ready, retrying...');
+                setTimeout(initializeCanvas, 100);
+                return;
+            }
+
         canvas.width = rect.width;
         canvas.height = rect.height;
 
@@ -49,116 +59,263 @@ export default function ScratchToRedeem() {
             noise.data[i + 3] = 255;
         }
         ctx.putImageData(noise, 0, 0);
-    }, []);
+        };
 
-    const getMousePos = (e: React.MouseEvent<HTMLCanvasElement>) => {
-        if (!canvasRef.current) return { x: 0, y: 0 };
-        const rect = canvasRef.current.getBoundingClientRect();
-        return {
-            x: e.clientX - rect.left,
-            y: e.clientY - rect.top
+        // Initialize canvas after a short delay to ensure DOM is ready
+        const timer = setTimeout(initializeCanvas, 100);
+        
+        // Handle window resize
+        const handleResize = () => {
+            setTimeout(initializeCanvas, 50);
+        };
+        
+        window.addEventListener('resize', handleResize);
+        
+        return () => {
+            clearTimeout(timer);
+            window.removeEventListener('resize', handleResize);
         };
+    }, [couponCode]);
+
+    const startDrawing = (e: React.MouseEvent | React.TouchEvent) => {
+        if (redeemed) return;
+        isDrawing.current = true;
+        draw(e);
     };
 
-    const getTouchPos = (e: React.TouchEvent<HTMLCanvasElement>) => {
-        if (!canvasRef.current) return { x: 0, y: 0 };
-        const rect = canvasRef.current.getBoundingClientRect();
+    const stopDrawing = () => {
+        if (redeemed) return;
+        isDrawing.current = false;
+        checkScratchPercent();
+    };
+
+    const getPos = (e: React.MouseEvent | React.TouchEvent) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return null;
+        const rect = canvas.getBoundingClientRect();
+
+        if ('touches' in e && e.touches.length > 0) {
         return {
             x: e.touches[0].clientX - rect.left,
-            y: e.touches[0].clientY - rect.top
-        };
+                y: e.touches[0].clientY - rect.top,
+            };
+        } else if ('clientX' in e) {
+            return {
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            };
+        }
+        return null;
     };
 
-    const startScratch = (pos: { x: number; y: number }) => {
-        if (!canvasRef.current) return;
-        isDrawing.current = true;
-        const ctx = canvasRef.current.getContext('2d');
+    const draw = (e: React.MouseEvent | React.TouchEvent) => {
+        if (!isDrawing.current) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
+        const pos = getPos(e);
+        if (!pos) return;
+
         ctx.globalCompositeOperation = 'destination-out';
         ctx.beginPath();
-        ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
+        ctx.arc(pos.x, pos.y, 50, 0, Math.PI * 2, false); // brush radius 50px
         ctx.fill();
     };
 
-    const scratch = (pos: { x: number; y: number }) => {
-        if (!isDrawing.current || !canvasRef.current) return;
-        const ctx = canvasRef.current.getContext('2d');
+    const checkScratchPercent = () => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
-        ctx.globalCompositeOperation = 'destination-out';
-        ctx.beginPath();
-        ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
-        ctx.fill();
+        // Check if canvas has valid dimensions
+        if (canvas.width <= 0 || canvas.height <= 0) return;
+
+        try {
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const pixels = imageData.data;
+            let transparentPixels = 0;
+
+            for (let i = 3; i < pixels.length; i += 4) {
+                if (pixels[i] === 0) transparentPixels++;
+            }
+
+            const scratchedPercent = (transparentPixels / (canvas.width * canvas.height)) * 100;
+
+            // Auto redeem if scratched more than 50%
+            if (scratchedPercent > 50 && !redeemed) {
+                redeemCoupon();
+            }
+        } catch (error) {
+            console.error('Error checking scratch percent:', error);
+        }
     };
 
-    const stopScratch = () => {
-        isDrawing.current = false;
+    const refreshPlayFabSession = async () => {
+        if (!session) throw new Error('No session available');
+        
+        const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID;
+        if (!titleId) throw new Error('Title ID not found');
+
+        console.log('Refreshing PlayFab session...');
+        const loginResult = await playFabLoginWithAzureAD(titleId, session);
+        
+        if (loginResult.error) throw new Error(`Failed to refresh session: ${loginResult.error.errorMessage}`);
+        
+        return loginResult.data?.SessionTicket;
     };
 
-    const handleRedeem = async () => {
-        if (!couponCode || !session) return;
+    const refreshUserSession = async () => {
+        console.log('Mail sending failed, refreshing session...');
+        try {
+            await signOut({ redirect: false });
+            console.log('Signed out successfully');
+            
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            
+            const signInResult = await signIn('azure-ad', { 
+                redirect: false,
+                callbackUrl: window.location.href 
+            });
+            
+            return signInResult?.ok;
+        } catch (error) {
+            console.error('Sign out/re-sign in error:', error);
+            return false;
+        }
+    };
 
-        setLoading(true);
+    const sendMailAndUpdatePlayFab = async (sessionTicket: string, coupons: string[], couponCode: string, titleId: string) => {
+        const mailRes = await fetch('/api/send-coupon-mail', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ coupon: couponCode }),
+        });
+
+        if (mailRes.ok) {
+            console.log('Mail sent successfully, updating PlayFab data...');
+            const updatedCoupons = coupons.filter((c: string) => c !== couponCode);
+            await updatePlayFabUserData(sessionTicket, titleId, { Coupons: JSON.stringify(updatedCoupons) });
+            console.log('Coupon removed from PlayFab inventory');
+            return { success: true, message: 'Coupon verified and mail sent! Please check your email!' };
+        } else {
+            const errorText = await mailRes.text();
+            console.error('Mail sending failed:', errorText);
+            return { success: false, error: errorText };
+        }
+    };
+
+    const clearScratchOverlay = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext('2d');
+            if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    };
+
+    const getSessionTicket = async () => {
+        let sessionTicket = sessionStorage.getItem('playfabSessionTicket');
+        if (!sessionTicket) {
+            console.log('No session ticket found, refreshing...');
+            const newTicket = await refreshPlayFabSession();
+            if (!newTicket) throw new Error('Failed to get new session ticket');
+            sessionTicket = newTicket;
+        }
+        return sessionTicket;
+    };
+
+    const getUserDataWithRetry = async (sessionTicket: string, titleId: string) => {
         try {
-            // Get user data
-            const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID!;
-            let sessionTicket = null;
-            if (typeof window !== 'undefined') {
-                sessionTicket = sessionStorage.getItem('playfabSessionTicket');
+            return await getUserDataFromPlayFab(sessionTicket, titleId);
+        } catch (error: any) {
+            if (error.message?.includes('expired') || error.message?.includes('invalid')) {
+                console.log('Session expired, refreshing...');
+                const newTicket = await refreshPlayFabSession();
+                if (!newTicket) throw new Error('Failed to refresh session ticket');
+                return await getUserDataFromPlayFab(newTicket, titleId);
             }
+            throw error;
+        }
+    };
 
-            if (!sessionTicket) {
-                setPopup({ message: 'Please log in to redeem coupons.', type: 'error' });
-                setLoading(false);
-                return;
-            }
+    const handleRetryAfterSessionRefresh = async (coupons: string[], couponCode: string, titleId: string) => {
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        console.log('Retrying mail sending after session refresh...');
+        
+        const freshSessionTicket = sessionStorage.getItem('playfabSessionTicket');
+        if (!freshSessionTicket) {
+            showPopup('Mail sent but failed to update inventory. Please contact support.', 'error');
+            return;
+        }
+
+        const result = await sendMailAndUpdatePlayFab(freshSessionTicket, coupons, couponCode, titleId);
+        if (result.success) {
+            showPopup('Session refreshed and coupon redeemed successfully! Please check your email!', 'success');
+        } else {
+            showPopup('Mail sending failed even after session refresh. Please try again later.', 'error');
+        }
+    };
+
+    const redeemCoupon = async () => {
+        setRedeemed(true);
+        clearScratchOverlay();
+        setLoading(true);
+
+        const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID;
+        if (!titleId) {
+            showPopup('Title ID not configured', 'error');
+            setLoading(false);
+            return;
+        }
 
-            const userData = await getUserDataFromPlayFab(sessionTicket, titleId);
+        try {
+            const sessionTicket = await getSessionTicket();
+            const userDataRes = await getUserDataWithRetry(sessionTicket, titleId);
             
-            // Parse existing coupons
-            const existingCoupons = userData?.UserData?.Coupons?.Value 
-                ? JSON.parse(userData.UserData.Coupons.Value) 
+            const coupons = userDataRes?.data?.Data?.Coupons?.Value
+                ? JSON.parse(userDataRes.data.Data.Coupons.Value)
                 : [];
 
-            // Check if coupon already redeemed
-            if (existingCoupons.includes(couponCode)) {
-                setPopup({ message: 'This coupon has already been redeemed!', type: 'error' });
-                setLoading(false);
+            if (!coupons.includes(couponCode)) {
+                console.log('Coupon not found in user inventory:', couponCode);
+                showPopup('Invalid coupon code or already used.', 'error');
                 return;
             }
 
-            // Add new coupon
-            const updatedCoupons = [...existingCoupons, couponCode];
+            console.log('Coupon verified in PlayFab, sending mail...');
+            const result = await sendMailAndUpdatePlayFab(sessionTicket, coupons, couponCode, titleId);
             
-            // Update user data
-            await updatePlayFabUserData(sessionTicket, titleId, {
-                Coupons: JSON.stringify(updatedCoupons)
-            });
-
-            setRedeemed(true);
-            setPopup({ message: 'Coupon redeemed successfully!', type: 'success' });
-        } catch (error) {
-            console.error('Error redeeming coupon:', error);
-            setPopup({ message: 'Failed to redeem coupon. Please try again.', type: 'error' });
+            if (result.success) {
+                showPopup(result.message!, 'success');
+            } else {
+                const sessionRefreshed = await refreshUserSession();
+                if (sessionRefreshed) {
+                    await handleRetryAfterSessionRefresh(coupons, couponCode, titleId);
+                } else {
+                    showPopup('Session refresh failed. Please try logging in again.', 'error');
+                }
+            }
+        } catch (err: any) {
+            console.error('Redeem error:', err);
+            showPopup(`Error verifying coupon: ${err.message}`, 'error');
         } finally {
             setLoading(false);
         }
     };
 
-    const showPopup = (message: string, type: 'success' | 'error') => {
+    const showPopup = (message: string, type: 'success' | 'error' = 'success') => {
         setPopup({ message, type });
         setTimeout(() => setPopup(null), 3000);
     };
 
     if (status === 'loading') {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
-                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
-                    <div className="flex items-center space-x-3">
-                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading...</span>
-                    </div>
+            <div className="min-h-screen bg-background-primary flex items-center justify-center">
+                <div className="text-center">
+                    <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+                    <p className="text-secondary">Loading...</p>
                 </div>
             </div>
         );
@@ -169,154 +326,58 @@ export default function ScratchToRedeem() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
-            {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Redeem Coupon</h1>
-                    <p className="text-slate-600 dark:text-slate-400 mt-2">Scratch to reveal and redeem your golden ticket</p>
-                </div>
-            </div>
-
-            <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-                    {/* Left - Scratch Card */}
-                    <div className="order-2 lg:order-1">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-4 text-center">
-                                Golden Ticket
-                            </h2>
-                            
-                            {/* Scratch Area */}
-                            <div 
+        <div className="min-h-screen bg-background-primary flex flex-col items-center justify-center p-4">
+            {/* Coupon Container */}
+            <div className="relative">
+                <div
+                    className={`relative inline-block ${redeemed ? 'opacity-100' : 'opacity-100'}`}
+                    onMouseDown={startDrawing}
+                    onMouseMove={draw}
+                    onMouseUp={stopDrawing}
+                    onMouseLeave={stopDrawing}
+                    onTouchStart={startDrawing}
+                    onTouchMove={draw}
+                    onTouchEnd={stopDrawing}
                                 ref={containerRef}
-                                className="relative bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 rounded-lg overflow-hidden"
-                                style={{ height: '300px' }}
-                            >
-                                {/* Hidden content behind scratch layer */}
-                                <div className="absolute inset-0 flex items-center justify-center">
-                                    <div className="text-center p-8">
-                                        <div className="text-4xl font-bold text-yellow-900 mb-4">SUCCESS</div>
-                                        <h3 className="text-2xl font-bold text-yellow-900 mb-2">Congratulations!</h3>
-                                        <p className="text-yellow-800 text-lg font-semibold">
-                                            Coupon Code: {couponCode || 'ARENA2024'}
-                                        </p>
-                                        <p className="text-yellow-700 text-sm mt-2">
-                                            Scratch off the silver layer to reveal
-                                        </p>
-                                    </div>
-                                </div>
-                                
-                                {/* Scratch layer */}
+                >
+                    <img
+                        src="/vgoldtickets.png"
+                        alt="Golden Ticket"
+                        className={`w-full max-w-sm h-auto select-none ${redeemed ? 'opacity-100' : 'opacity-100'}`}
+                        draggable={false}
+                    />
+                    {!redeemed && (
                                 <canvas
                                     ref={canvasRef}
                                     className="absolute inset-0 cursor-crosshair"
-                                    onMouseDown={(e) => startScratch(getMousePos(e))}
-                                    onMouseMove={(e) => scratch(getMousePos(e))}
-                                    onMouseUp={stopScratch}
-                                    onMouseLeave={stopScratch}
-                                    onTouchStart={(e) => {
-                                        e.preventDefault();
-                                        startScratch(getTouchPos(e));
-                                    }}
-                                    onTouchMove={(e) => {
-                                        e.preventDefault();
-                                        scratch(getTouchPos(e));
-                                    }}
-                                    onTouchEnd={(e) => {
-                                        e.preventDefault();
-                                        stopScratch();
-                                    }}
-                                />
+                            style={{ pointerEvents: 'auto' }}
+                        />
+                    )}
+                    {redeemed && couponCode && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-yellow-100/90 rounded-lg">
+                            <div className="text-center p-4">
+                                <div className="text-2xl font-bold text-yellow-900 mb-2">SUCCESS!</div>
+                                <div className="text-lg font-semibold text-yellow-800">
+                                    {couponCode}
+                                </div>
                             </div>
-                            
-                            <p className="text-slate-600 dark:text-slate-400 text-sm text-center mt-4">
-                                Tip: Use your mouse or finger to scratch off the silver layer
-                            </p>
+                            </div>
+                    )}
                         </div>
                     </div>
 
-                    {/* Right - Redemption Form */}
-                    <div className="order-1 lg:order-2">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
-                                Redeem Your Ticket
-                            </h2>
-                            
-                            {redeemed ? (
-                                <div className="text-center py-8">
-                                    <div className="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
-                                        <span className="text-lg font-bold text-green-700 dark:text-green-300">DONE</span>
-                                    </div>
-                                    <h3 className="text-lg font-semibold text-green-700 dark:text-green-400 mb-2">
-                                        Successfully Redeemed!
-                                    </h3>
-                                    <p className="text-slate-600 dark:text-slate-400">
-                                        Your golden ticket has been added to your account
-                                    </p>
-                                </div>
-                            ) : (
-                                <div className="space-y-6">
-                                    <div>
-                                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-                                            Coupon Code
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={couponCode}
-                                            onChange={(e) => setCouponCode(e.target.value)}
-                                            placeholder="Enter your coupon code"
-                                            className="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
-                                        />
-                                    </div>
-                                    
-                                    <button
-                                        onClick={handleRedeem}
-                                        disabled={loading || !couponCode.trim()}
-                                        className="w-full bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 disabled:from-slate-400 disabled:to-slate-500 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 disabled:transform-none disabled:cursor-not-allowed shadow-lg"
-                                    >
-                                        {loading ? (
-                                            <div className="flex items-center justify-center space-x-2">
-                                                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
-                                                <span>Redeeming...</span>
-                                            </div>
-                                        ) : (
-                                            'Redeem Coupon'
-                                        )}
-                                    </button>
-                                </div>
-                            )}
+            {/* Info Text */}
+            <p className="text-secondary text-sm text-center mt-4">
+                (Scratch to Redeem)
+            </p>
 
-                            {/* Info Cards */}
-                            <div className="mt-8 space-y-3">
-                                <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                                    <div className="flex items-start space-x-3">
-                                        <span className="text-blue-500 text-lg font-bold">i</span>
-                                        <div>
-                                            <h4 className="font-semibold text-blue-700 dark:text-blue-300 text-sm">How it works</h4>
-                                            <p className="text-blue-600 dark:text-blue-400 text-xs">
-                                                Each golden ticket contains special rewards and bonuses for your Arena account.
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <div className="bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 rounded-lg p-4">
-                                    <div className="flex items-start space-x-3">
-                                        <span className="text-green-500 text-lg font-bold">!</span>
-                                        <div>
-                                            <h4 className="font-semibold text-green-700 dark:text-green-300 text-sm">One-time use</h4>
-                                            <p className="text-green-600 dark:text-green-400 text-xs">
-                                                Each coupon code can only be redeemed once per account.
-                                            </p>
-                                        </div>
-                                    </div>
+            {/* Loading Text */}
+            {loading && (
+                <div className="mt-4 text-center">
+                    <div className="w-6 h-6 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
+                    <p className="text-secondary text-sm">Redeeming...</p>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                            )}
 
             {/* Popup */}
             {popup && (
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index c09b1f6..c64f9d4 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -235,10 +235,10 @@ export default function Dashboard() {
 
     if (status === 'loading') {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 flex items-center justify-center">
+            <div className="min-h-screen bg-background-primary flex items-center justify-center">
                 <div className="text-center">
-                    <div className="w-16 h-16 border-4 border-slate-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-                    <p className="text-slate-700 text-lg font-medium">Loading your arena...</p>
+                    <div className="w-16 h-16 bg-muted animate-spin mx-auto mb-4"></div>
+                    <p className="text-primary text-lg font-medium">Loading your arena...</p>
                 </div>
             </div>
         );
@@ -479,10 +479,7 @@ export default function Dashboard() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-black via-gray-900 to-slate-900 transition-colors duration-300 relative overflow-hidden">
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(139,92,246,0.1)_0%,transparent_60%)]"></div>
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(59,130,246,0.08)_0%,transparent_60%)]"></div>
-            <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
+        <div className="min-h-screen bg-background-primary transition-colors duration-300">
             {popup && (
                 <Popup
                     message={popup.message}
@@ -493,7 +490,7 @@ export default function Dashboard() {
 
 
             {/* Hero Section */}
-            <div className="relative z-10">
+            <div>
                 <HeroSection
                     tagline={tagline}
                     playFabId={playFabId}
@@ -503,29 +500,25 @@ export default function Dashboard() {
             </div>
 
             {/* Main Content */}
-            <div className="relative z-10 max-w-7xl mx-auto px-2 sm:px-3 lg:px-4 pb-2">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-6">
                 {error && (
-                    <div className="mb-2 bg-red-900/20 border border-red-500/30 text-red-300 px-2 py-1 rounded-lg shadow-lg backdrop-blur-sm">
-                        <div className="flex items-center space-x-2">
-                            <svg className="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="mb-4 bg-error text-text-primary px-4 py-3 rounded-lg">
+                        <div className="flex items-center space-x-3">
+                            <svg className="w-5 h-5 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                             </svg>
-                            <span className="font-medium text-xs text-red-200">Error: {error}</span>
+                            <span className="font-medium text-sm text-text-primary">Error: {error}</span>
                         </div>
                     </div>
                 )}
 
 
-                {/* Player Statistics Chart */}
-                <div className="mb-2">
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
                     <PlayerStatsChart
                         gamesPlayed={parseInt(playerStats.find(s => ['Games Played', 'GamesPlayed', 'Games', 'TotalGames', 'GameCount', 'Matches', 'MatchesPlayed'].includes(s.StatisticName))?.Value || '0')}
                         trophies={parseInt(playerStats.find(s => ['Trophies', 'Achievements', 'Awards'].includes(s.StatisticName))?.Value || '0')}
                         loading={loading}
                     />
-                </div>
-
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
                     {/* Playtime Chart */}
                     <PlaytimeChart
                         playtimeSeconds={playtimeSeconds}
@@ -540,14 +533,8 @@ export default function Dashboard() {
                     />
                 </div>
 
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-2">
-                    {/* Inventory */}
-                    <Inventory
-                        inventoryItems={inventoryItems}
-                        loading={loading}
-                        onUseItem={handleUseInventoryItem}
-                        isBuying={isBuying}
-                    />
+                {/* Content Grid */}
+                <div className="mt-4">
 
                     {/* Golden Tickets */}
                     <GoldenTickets
@@ -561,19 +548,33 @@ export default function Dashboard() {
                         loading={loading}
                         onRedeem={handleRedeemCoupon}
                     />
+
                 </div>
 
-                {/* Content Grid */}
-                <div className="mt-2">
-                    {/* Store */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
+
                     <Store
                         storeItems={storeItems}
                         loading={loading}
                         virtualCurrency={virtualCurrency}
                         onPurchase={handlePurchaseItem}
                     />
+                    
+                    {/* Inventory */}
+                    <Inventory
+                        inventoryItems={inventoryItems}
+                        loading={loading}
+                        onUseItem={handleUseInventoryItem}
+                        isBuying={isBuying}
+                    />
+
+
+
+
                 </div>
 
+
+
             </div>
         </div>
     );
diff --git a/app/globals.css b/app/globals.css
index 2ddb5f7..0078e6a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,7 +4,7 @@
 @tailwind utilities;
 
 :root {
-  /* Modern Light Theme Colors - Neutral Palette Updated */
+  /* Light Theme Colors */
   --color-primary-50: #f8fafc;
   --color-primary-100: #f1f5f9;
   --color-primary-200: #e2e8f0;
@@ -50,14 +50,14 @@
 
   /* Light Theme Text */
   --color-text-primary: #0f172a;
-  --color-text-secondary: #475569;
+  --color-text-secondary: #334155;
   --color-text-muted: #64748b;
   --color-text-accent: #475569;
 
   /* Borders and Shadows */
   --color-border-light: #e2e8f0;
   --color-border-medium: #cbd5e1;
-  --color-border-accent: #64748b;
+  --color-border-accent: #94a3b8;
 
   /* Shadow Definitions */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -74,6 +74,126 @@
   --color-error-bg: #fef2f2;
 }
 
+/* Dark Theme Colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary-50: #020617;
+    --color-primary-100: #0f172a;
+    --color-primary-200: #1e293b;
+    --color-primary-300: #334155;
+    --color-primary-400: #475569;
+    --color-primary-500: #64748b;
+    --color-primary-600: #94a3b8;
+    --color-primary-700: #cbd5e1;
+    --color-primary-800: #e2e8f0;
+    --color-primary-900: #f1f5f9;
+    --color-primary-950: #f8fafc;
+
+    --color-secondary-50: #020617;
+    --color-secondary-100: #0f172a;
+    --color-secondary-200: #1e293b;
+    --color-secondary-300: #334155;
+    --color-secondary-400: #475569;
+    --color-secondary-500: #64748b;
+    --color-secondary-600: #94a3b8;
+    --color-secondary-700: #cbd5e1;
+    --color-secondary-800: #e2e8f0;
+    --color-secondary-900: #f1f5f9;
+    --color-secondary-950: #f8fafc;
+
+    /* Dark Theme Backgrounds */
+    --color-background-primary: #0f172a;
+    --color-background-secondary: #1e293b;
+    --color-background-tertiary: #334155;
+    --color-background-card: #1e293b;
+    --color-background-muted: #334155;
+
+    /* Dark Theme Text */
+    --color-text-primary: #f8fafc;
+    --color-text-secondary: #cbd5e1;
+    --color-text-muted: #94a3b8;
+    --color-text-accent: #64748b;
+
+    /* Dark Theme Borders */
+    --color-border-light: #334155;
+    --color-border-medium: #475569;
+    --color-border-accent: #64748b;
+
+    /* Dark Theme Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+
+    /* Dark Theme Success, Warning, Error Colors */
+    --color-success: #4ade80;
+    --color-success-bg: #14532d;
+    --color-warning: #fbbf24;
+    --color-warning-bg: #92400e;
+    --color-error: #f87171;
+    --color-error-bg: #991b1b;
+  }
+}
+
+/* Dark mode class for manual toggle */
+.dark {
+  --color-primary-50: #020617;
+  --color-primary-100: #0f172a;
+  --color-primary-200: #1e293b;
+  --color-primary-300: #334155;
+  --color-primary-400: #475569;
+  --color-primary-500: #64748b;
+  --color-primary-600: #94a3b8;
+  --color-primary-700: #cbd5e1;
+  --color-primary-800: #e2e8f0;
+  --color-primary-900: #f1f5f9;
+  --color-primary-950: #f8fafc;
+
+  --color-secondary-50: #020617;
+  --color-secondary-100: #0f172a;
+  --color-secondary-200: #1e293b;
+  --color-secondary-300: #334155;
+  --color-secondary-400: #475569;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #94a3b8;
+  --color-secondary-700: #cbd5e1;
+  --color-secondary-800: #e2e8f0;
+  --color-secondary-900: #f1f5f9;
+  --color-secondary-950: #f8fafc;
+
+  /* Dark Theme Backgrounds */
+  --color-background-primary: #0e0e0e;
+  --color-background-secondary: #2b2b2f;
+  --color-background-tertiary: #2d3032;
+  --color-background-card: #292626;
+  --color-background-muted: #3c3c47;
+
+  /* Dark Theme Text */
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted: #94a3b8;
+  --color-text-accent: #64748b;
+
+  /* Dark Theme Borders */
+  --color-border-light: #334155;
+  --color-border-medium: #475569;
+  --color-border-accent: #64748b;
+
+  /* Dark Theme Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+
+  /* Dark Theme Success, Warning, Error Colors */
+  --color-success: #4ade80;
+  --color-success-bg: #14532d;
+  --color-warning: #fbbf24;
+  --color-warning-bg: #92400e;
+  --color-error: #f87171;
+  --color-error-bg: #991b1b;
+}
+
 html,
 body {
   max-width: 100vw;
@@ -120,11 +240,93 @@ a {
 
 /* Selection colors */
 ::selection {
-  background: var(--color-primary-100);
+  background: var(--color-accent-200);
   color: var(--color-text-primary);
 }
 
 ::-moz-selection {
-  background: var(--color-primary-100);
+  background: var(--color-accent-200);
+  color: var(--color-text-primary);
+}
+
+/* Dark mode selection colors */
+@media (prefers-color-scheme: dark) {
+  ::selection {
+    background: var(--color-accent-700);
+    color: var(--color-text-primary);
+  }
+
+  ::-moz-selection {
+    background: var(--color-accent-700);
+    color: var(--color-text-primary);
+  }
+}
+
+.dark ::selection {
+  background: var(--color-accent-700);
+  color: var(--color-text-primary);
+}
+
+.dark ::-moz-selection {
+  background: var(--color-accent-700);
   color: var(--color-text-primary);
+}
+
+/* Utility classes for theme-aware components */
+.bg-primary {
+  background-color: var(--color-background-primary);
+}
+
+.bg-secondary {
+  background-color: var(--color-background-secondary);
+}
+
+.bg-card {
+  background-color: var(--color-background-card);
+}
+
+.text-primary {
+  color: var(--color-text-primary);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.border-light {
+  border-color: var(--color-border-light);
+}
+
+.border-medium {
+  border-color: var(--color-border-medium);
+}
+
+.border-accent {
+  border-color: var(--color-border-accent);
+}
+
+/* Focus styles for better accessibility */
+*:focus-visible {
+  outline: 2px solid var(--color-accent-500);
+  outline-offset: 2px;
+}
+
+/* Smooth transitions for theme changes */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* Dark mode specific focus styles */
+@media (prefers-color-scheme: dark) {
+  *:focus-visible {
+    outline-color: var(--color-accent-400);
+  }
+}
+
+.dark *:focus-visible {
+  outline-color: var(--color-accent-400);
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 74aaf46..05969f9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -38,12 +38,9 @@ export default async function RootLayout({
           <UnitySessionProvider>
             <PlayTimeProvider>
               <PlayTimer />
-               <div className="flex h-screen bg-gradient-to-br from-black via-gray-900 to-slate-900 transition-colors duration-300 relative overflow-hidden">
-                 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(139,92,246,0.1)_0%,transparent_60%)]"></div>
-                 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(59,130,246,0.08)_0%,transparent_60%)]"></div>
-                 <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
+              <div className="flex min-h-screen bg-background-primary transition-colors duration-300">
                 <SideBar />
-                <main className="flex-1 pl-20 overflow-y-auto">
+                <main className="flex-1 pl-20 min-h-screen">
                   {children}
                 </main>
               </div>
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index eadc40c..94a0d5f 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -8,6 +8,7 @@ import {
     playFabLoginWithAzureAD,
 } from '@/lib/playfab/playfab';
 import dynamic from 'next/dynamic';
+import LeaderboardChart from '@/components/dashboard/LeaderboardChart';
 
 const Model = dynamic(() => import('@/components/Model'), {
     ssr: false,
@@ -96,31 +97,15 @@ export default function LeaderBoard() {
             (b[sortFieldMap[sortBy]] as number) - (a[sortFieldMap[sortBy]] as number)
     );
 
-    const getRankIcon = (rank: number) => {
-        switch (rank) {
-            case 1: return '1st';
-            case 2: return '2nd';
-            case 3: return '3rd';
-            default: return `#${rank}`;
-        }
-    };
-
-    const getRankStyle = (rank: number) => {
-        switch (rank) {
-            case 1: return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white';
-            case 2: return 'bg-gradient-to-r from-gray-400 to-gray-600 text-white';
-            case 3: return 'bg-gradient-to-r from-orange-400 to-orange-600 text-white';
-            default: return 'bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300';
-        }
-    };
 
     if (status === 'loading') {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
-                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
-                    <div className="flex items-center space-x-3">
-                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Leaderboard...</span>
+            <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 flex items-center justify-center">
+                <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-12 shadow-2xl">
+                    <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl"></div>
+                    <div className="relative flex items-center space-x-4">
+                        <div className="w-8 h-8 border-4 border-gradient-to-r from-blue-500 to-purple-600 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-white font-medium text-lg">Loading Leaderboard...</span>
                     </div>
                 </div>
             </div>
@@ -132,17 +117,21 @@ export default function LeaderBoard() {
     }
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
             {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-pink-600/10"></div>
+                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Leaderboard</h1>
-                            <p className="text-slate-600 dark:text-slate-400 mt-2">Weekly competition rankings</p>
+                            <h1 className="text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent">
+                                Leaderboard
+                            </h1>
+                            <p className="text-slate-300 mt-2 text-base">Weekly competition rankings</p>
                         </div>
-                        <div>
-                            <span className="inline-block bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 px-3 py-1 rounded-full text-sm font-medium">
+                        <div className="flex items-center space-x-3">
+                            <div className="w-2 h-2 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full animate-pulse"></div>
+                            <span className="inline-block bg-gradient-to-r from-purple-500/20 to-pink-500/20 backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm font-medium border border-purple-500/30">
                                 Top Players
                             </span>
                         </div>
@@ -154,132 +143,99 @@ export default function LeaderBoard() {
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Champion Showcase */}
                     <div className="lg:col-span-1">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 text-center">
-                                Current Champion
-                            </h2>
-                            
-                            {leaders[0] ? (
-                                <div className="text-center">
-                                    {/* 3D Model */}
-                                    <div className="h-64 mb-4 bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-700 dark:to-slate-800 rounded-lg overflow-hidden">
-                                        <Model name={leaders[0].name.split(' ')[0]} />
-                                    </div>
-                                    
-                                    <div className="space-y-2">
-                                        <h3 className="text-xl font-bold text-slate-900 dark:text-slate-100">
-                                            {leaders[0].name}
-                                        </h3>
-                                        <div className="flex justify-center space-x-4 text-sm">
-                                            <div className="bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 px-3 py-1 rounded-full">
-                                                {leaders[0].trophies} trophies
-                                            </div>
-                                            <div className="bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full">
-                                                {leaders[0].gamesPlayed} games
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-8 shadow-2xl">
+                            <div className="relative">
+                                
+                                {leaders[0] ? (
+                                    <div className="text-center">
+                                        {/* 3D Model */}
+                                        <div className="relative h-96 bg-gradient-to-b from-slate-700/50 to-slate-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-inner">
+                                            <div className="relative h-full">
+                                                <Model name={leaders[0].name.split(' ')[0]} />
                                             </div>
                                         </div>
+                                        
                                     </div>
-                                </div>
-                            ) : (
-                                <div className="text-center py-8">
-                                    <div className="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
-                                        <span className="text-xl font-bold">1st</span>
+                                ) : (
+                                    <div className="text-center py-12">
+                                        <div className="w-20 h-20 bg-gradient-to-r from-slate-700 to-slate-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                                            <svg className="w-8 h-8 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
+                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                            </svg>
+                                        </div>
+                                        <p className="text-slate-400">No champion yet</p>
                                     </div>
-                                    <p className="text-slate-500 dark:text-slate-400">No champion yet</p>
-                                </div>
-                            )}
+                                )}
+                            </div>
                         </div>
                     </div>
 
-                    {/* Leaderboard Table */}
+                    {/* Leaderboard Chart */}
                     <div className="lg:col-span-2">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 transition-colors duration-300">
-                            {/* Controls */}
-                            <div className="p-6 border-b border-slate-200 dark:border-slate-700">
-                                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                                    <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 sm:mb-0">
-                                        Rankings
+                        {/* Controls */}
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 mb-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 rounded-2xl"></div>
+                            <div className="relative flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                                <div className="flex items-center mb-4 sm:mb-0">
+                                    <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-3 shadow-lg">
+                                        <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                            <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+                                        </svg>
+                                    </div>
+                                    <h2 className="text-xl font-bold bg-gradient-to-r from-white to-slate-200 bg-clip-text text-transparent">
+                                        Rankings Visualization
                                     </h2>
-                                    <div className="flex items-center space-x-3">
-                                        <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-                                            Sort by:
-                                        </label>
-                                        <select
-                                            value={sortBy}
-                                            onChange={(e) => setSortBy(e.target.value as SortOption)}
-                                            className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 text-sm focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
+                                </div>
+                                <div className="flex items-center space-x-4">
+                                    <label className="text-sm font-medium text-slate-300">
+                                        View by:
+                                    </label>
+                                    <div className="flex bg-slate-700/50 backdrop-blur-sm rounded-xl p-1">
+                                        <button
+                                            onClick={() => setSortBy('Trophies')}
+                                            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center space-x-2 ${
+                                                sortBy === 'Trophies'
+                                                    ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-lg'
+                                                    : 'text-slate-400 hover:text-white hover:bg-slate-600/50'
+                                            }`}
                                         >
-                                            <option value="Trophies">Trophies</option>
-                                            <option value="Games Played">Games Played</option>
-                                        </select>
+                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                                            </svg>
+                                            <span>Trophies</span>
+                                        </button>
+                                        <button
+                                            onClick={() => setSortBy('Games Played')}
+                                            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 flex items-center space-x-2 ${
+                                                sortBy === 'Games Played'
+                                                    ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg'
+                                                    : 'text-slate-400 hover:text-white hover:bg-slate-600/50'
+                                            }`}
+                                        >
+                                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                                <path fillRule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd" />
+                                            </svg>
+                                            <span>Games Played</span>
+                                        </button>
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            {/* Table */}
-                            <div className="overflow-x-auto">
-                                <table className="w-full">
-                                    <thead>
-                                        <tr className="border-b border-slate-200 dark:border-slate-700">
-                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">Rank</th>
-                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">Player</th>
-                                            <th className="text-left py-4 px-6 font-medium text-slate-900 dark:text-slate-100">{sortBy}</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {loading ? (
-                                            [...Array(5)].map((_, i) => (
-                                                <tr key={i} className="border-b border-slate-100 dark:border-slate-700">
-                                                    <td className="py-4 px-6">
-                                                        <div className="w-8 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
-                                                    </td>
-                                                    <td className="py-4 px-6">
-                                                        <div className="w-32 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
-                                                    </td>
-                                                    <td className="py-4 px-6">
-                                                        <div className="w-16 h-6 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"></div>
-                                                    </td>
-                                                </tr>
-                                            ))
-                                        ) : sortedLeaders.length === 0 ? (
-                                            <tr>
-                                                <td colSpan={3} className="py-12 text-center">
-                                                    <div className="w-12 h-12 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-3">
-                                                        <span className="text-lg font-bold">Stats</span>
-                                                    </div>
-                                                    <p className="text-slate-500 dark:text-slate-400">No leaderboard data available</p>
-                                                </td>
-                                            </tr>
-                                        ) : (
-                                            sortedLeaders.map((player, index) => (
-                                                <tr key={player.rank} className="border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors duration-200">
-                                                    <td className="py-4 px-6">
-                                                        <div className={`inline-flex items-center justify-center w-10 h-8 rounded-lg font-bold text-sm ${getRankStyle(player.rank)}`}>
-                                                            {getRankIcon(player.rank)}
-                                                        </div>
-                                                    </td>
-                                                    <td className="py-4 px-6">
-                                                        <div className="flex items-center space-x-3">
-                                                            <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
-                                                                {player.name.charAt(0).toUpperCase()}
-                                                            </div>
-                                                            <span className="font-medium text-slate-900 dark:text-slate-100">
-                                                                {player.name}
-                                                            </span>
-                                                        </div>
-                                                    </td>
-                                                    <td className="py-4 px-6">
-                                                        <span className="font-semibold text-slate-900 dark:text-slate-100">
-                                                            {player[sortFieldMap[sortBy]].toLocaleString()}
-                                                        </span>
-                                                    </td>
-                                                </tr>
-                                            ))
-                                        )}
-                                    </tbody>
-                                </table>
+                        {/* Chart */}
+                        {loading ? (
+                            <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 rounded-2xl"></div>
+                                <div className="relative h-96 flex items-center justify-center">
+                                    <div className="text-center">
+                                        <div className="w-12 h-12 border-4 border-gradient-to-r from-blue-500 to-purple-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+                                        <p className="text-slate-300 text-lg">Loading chart...</p>
+                                    </div>
+                                </div>
                             </div>
-                        </div>
+                        ) : (
+                            <LeaderboardChart players={sortedLeaders} sortBy={sortBy} />
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/app/page.tsx b/app/page.tsx
index 61cba1f..182ad5a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,11 +17,11 @@ export default function Home() {
 
   if (status === 'loading') {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
-        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+      <div className="min-h-screen bg-background-primary flex items-center justify-center transition-colors duration-300">
+        <div className="bg-card rounded-xl shadow-lg p-8 border border-border-light">
           <div className="flex items-center space-x-3">
             <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-            <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Arena...</span>
+            <span className="text-secondary font-medium">Loading Arena...</span>
           </div>
         </div>
       </div>
@@ -33,11 +33,11 @@ export default function Home() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
-      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
+    <div className="min-h-screen bg-background-primary flex items-center justify-center transition-colors duration-300">
+      <div className="bg-card rounded-xl shadow-lg p-8 border border-border-light">
         <div className="flex items-center space-x-3">
           <div className="w-6 h-6 border-4 border-green-500 border-t-transparent rounded-full animate-spin"></div>
-          <span className="text-slate-700 dark:text-slate-300 font-medium">Redirecting to Dashboard...</span>
+          <span className="text-secondary font-medium">Redirecting to Dashboard...</span>
         </div>
       </div>
     </div>
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 883e2e8..f2ff74d 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -24,11 +24,12 @@ export default function Profile() {
 
     if (status === 'loading') {
         return (
-            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 flex items-center justify-center transition-colors duration-300">
-                <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-8 border border-slate-200 dark:border-slate-700">
-                    <div className="flex items-center space-x-3">
-                        <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-                        <span className="text-slate-700 dark:text-slate-300 font-medium">Loading Profile...</span>
+            <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 flex items-center justify-center">
+                <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-12 shadow-2xl">
+                    <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl"></div>
+                    <div className="relative flex items-center space-x-4">
+                        <div className="w-8 h-8 border-4 border-gradient-to-r from-blue-500 to-purple-600 border-t-transparent rounded-full animate-spin"></div>
+                        <span className="text-white font-medium text-lg">Loading Profile...</span>
                     </div>
                 </div>
             </div>
@@ -98,12 +99,24 @@ export default function Profile() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-gray-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-300">
+        <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
             {/* Header */}
-            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Profile</h1>
-                    <p className="text-slate-600 dark:text-slate-400 mt-2">Manage your account and game preferences</p>
+            <div className="relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-pink-600/10"></div>
+                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <div className="flex items-center space-x-3">
+                        <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg">
+                            <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h1 className="text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-purple-200 bg-clip-text text-transparent">
+                                Profile
+                            </h1>
+                            <p className="text-slate-300 mt-1">Manage your account and game preferences</p>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -111,25 +124,26 @@ export default function Profile() {
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Profile Information */}
                     <div className="lg:col-span-1">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <div className="text-center">
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-purple-500/10 rounded-2xl"></div>
+                            <div className="relative text-center">
                                 <div className="relative inline-block">
                                     <img 
                                         src={session.user?.image || '/icons/user.png'} 
                                         alt="Profile" 
-                                        className="w-20 h-20 rounded-full border-4 border-slate-200 dark:border-slate-600"
+                                        className="w-20 h-20 rounded-full shadow-lg"
                                     />
-                                    <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-2 border-white dark:border-slate-800 rounded-full"></div>
+                                    <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full shadow-lg"></div>
                                 </div>
-                                <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100 mt-4">
+                                <h2 className="text-xl font-semibold text-white mt-4">
                                     {session.user?.name ?? 'Anonymous'}
                                 </h2>
-                                <p className="text-slate-500 dark:text-slate-400 mt-1">
+                                <p className="text-slate-300 mt-1">
                                     {session.user?.email ?? 'No email'}
                                 </p>
                                 <button 
                                     onClick={() => signOut()}
-                                    className="mt-6 w-full bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200"
+                                    className="mt-6 w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-lg"
                                 >
                                     Sign Out
                                 </button>
@@ -137,153 +151,174 @@ export default function Profile() {
                         </div>
 
                         {/* Add Friends Section */}
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 mt-6 transition-colors duration-300">
-                            <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Add Friends</h3>
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 mt-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-green-500/5 via-transparent to-blue-500/5 rounded-2xl"></div>
+                            <div className="relative">
+                                <div className="flex items-center mb-4">
+                                    <div className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-600 rounded-full flex items-center justify-center mr-3 shadow-lg">
+                                        <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
+                                        </svg>
+                                    </div>
+                                    <h3 className="text-lg font-semibold text-white">Add Friends</h3>
+                                </div>
                             
-                            {/* Method Selection */}
-                            <div className="flex space-x-2 mb-4">
-                                {(['id', 'username', 'email'] as const).map((m) => (
-                                    <button
-                                        key={m}
-                                        onClick={() => setMethod(m)}
-                                        className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors duration-200 ${
-                                            method === m
-                                                ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-700'
-                                                : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600'
-                                        }`}
-                                    >
-                                        {m.charAt(0).toUpperCase() + m.slice(1)}
-                                    </button>
-                                ))}
-                            </div>
+                                {/* Method Selection */}
+                                <div className="flex space-x-2 mb-4">
+                                    {(['id', 'username', 'email'] as const).map((m) => (
+                                        <button
+                                            key={m}
+                                            onClick={() => setMethod(m)}
+                                            className={`px-3 py-1 rounded-lg text-sm font-medium transition-all duration-200 ${
+                                                method === m
+                                                    ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg'
+                                                    : 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50 hover:text-white'
+                                            }`}
+                                        >
+                                            {m.charAt(0).toUpperCase() + m.slice(1)}
+                                        </button>
+                                    ))}
+                                </div>
 
-                            {/* Input */}
-                            <div className="space-y-3">
-                                <input
-                                    type="text"
-                                    value={inputValue}
-                                    onChange={(e) => setInputValue(e.target.value)}
-                                    placeholder={getPlaceholder()}
-                                    className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-colors duration-200"
-                                />
-                                <button 
-                                    onClick={handleAddFriend}
-                                    className="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200"
-                                >
-                                    Send Friend Request
-                                </button>
-                                
-                                {/* Help Button */}
-                                <div className="relative">
+                                {/* Input */}
+                                <div className="space-y-3">
+                                    <input
+                                        type="text"
+                                        value={inputValue}
+                                        onChange={(e) => setInputValue(e.target.value)}
+                                        placeholder={getPlaceholder()}
+                                        className="w-full px-3 py-2 rounded-lg bg-slate-700/50 backdrop-blur-sm text-white placeholder-slate-400 focus:bg-slate-600/50 focus:outline-none transition-all duration-200"
+                                    />
                                     <button 
-                                        onClick={() => setShowHelp(!showHelp)}
-                                        className="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 text-sm transition-colors duration-200"
+                                        onClick={handleAddFriend}
+                                        className="w-full bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-lg"
                                     >
-                                        Need help?
+                                        Send Friend Request
                                     </button>
                                     
-                                    {showHelp && (
-                                        <div className="absolute top-full mt-2 left-0 right-0 bg-blue-50 dark:bg-blue-900/50 border border-blue-200 dark:border-blue-700 rounded-lg p-3 text-xs text-blue-700 dark:text-blue-300 z-10">
-                                            <p><strong>PlayFab ID:</strong> Found in user's dashboard</p>
-                                            <p><strong>Username:</strong> Display name in the game</p>
-                                            <p><strong>Email:</strong> Account email address</p>
-                                        </div>
+                                    {/* Help Button */}
+                                    <div className="relative">
+                                        <button 
+                                            onClick={() => setShowHelp(!showHelp)}
+                                            className="text-slate-400 hover:text-white text-sm transition-colors duration-200"
+                                        >
+                                            Need help?
+                                        </button>
+                                        
+                                        {showHelp && (
+                                            <div className="absolute top-full mt-2 left-0 right-0 bg-slate-800/90 backdrop-blur-sm rounded-lg p-3 text-xs text-slate-300 z-10 shadow-lg">
+                                                <p><strong className="text-white">PlayFab ID:</strong> Found in user's dashboard</p>
+                                                <p><strong className="text-white">Username:</strong> Display name in the game</p>
+                                                <p><strong className="text-white">Email:</strong> Account email address</p>
+                                            </div>
+                                        )}
+                                    </div>
+                                    
+                                    {feedback && (
+                                        <p className={`text-sm ${
+                                            feedback.includes('successfully') 
+                                                ? 'text-green-400' 
+                                                : 'text-red-400'
+                                        }`}>
+                                            {feedback}
+                                        </p>
                                     )}
                                 </div>
-                                
-                                {feedback && (
-                                    <p className={`text-sm ${
-                                        feedback.includes('successfully') 
-                                            ? 'text-green-600 dark:text-green-400' 
-                                            : 'text-red-600 dark:text-red-400'
-                                    }`}>
-                                        {feedback}
-                                    </p>
-                                )}
                             </div>
                         </div>
                     </div>
 
                     {/* My Games */}
                     <div className="lg:col-span-2">
-                        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 transition-colors duration-300">
-                            <div className="flex items-center justify-between mb-6">
-                                <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">My Published Games</h3>
-                                <span className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-3 py-1 rounded-full text-sm font-medium">
-                                    {myGames.length} Games
-                                </span>
-                            </div>
-
-                            {gamesLoading ? (
-                                <div className="space-y-4">
-                                    {[...Array(3)].map((_, i) => (
-                                        <div key={i} className="h-16 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse"></div>
-                                    ))}
-                                </div>
-                            ) : myGames.length === 0 ? (
-                                <div className="text-center py-12">
-                                    <div className="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
-                                        <span className="text-2xl">Games</span>
+                        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                            <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 via-transparent to-pink-500/5 rounded-2xl"></div>
+                            <div className="relative">
+                                <div className="flex items-center justify-between mb-6">
+                                    <div className="flex items-center">
+                                        <div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center mr-3 shadow-lg">
+                                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                                                <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <h3 className="text-lg font-semibold text-white">My Published Games</h3>
                                     </div>
-                                    <h4 className="text-slate-900 dark:text-slate-100 font-medium mb-2">No games published yet</h4>
-                                    <p className="text-slate-500 dark:text-slate-400 text-sm">Start creating and publishing your games!</p>
+                                    <span className="bg-gradient-to-r from-slate-700/50 to-slate-600/50 backdrop-blur-sm text-slate-300 px-3 py-1 rounded-full text-sm font-medium">
+                                        {myGames.length} Games
+                                    </span>
                                 </div>
-                            ) : (
-                                <div className="overflow-x-auto">
-                                    <table className="w-full">
-                                        <thead>
-                                            <tr className="border-b border-slate-200 dark:border-slate-600">
-                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Game Name</th>
-                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Type</th>
-                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Status</th>
-                                                <th className="text-left py-3 px-4 font-medium text-slate-900 dark:text-slate-100">Actions</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {myGames.map((game) => (
-                                                <tr key={game.id} className="border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors duration-200">
-                                                    <td className="py-4 px-4">
-                                                        <div>
-                                                            <p className="font-medium text-slate-900 dark:text-slate-100">{game.name}</p>
-                                                            <p className="text-sm text-slate-500 dark:text-slate-400">{game.description}</p>
-                                                        </div>
-                                                    </td>
-                                                    <td className="py-4 px-4">
-                                                        <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
-                                                            game.type === 'html' 
-                                                                ? 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300'
-                                                                : 'bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300'
-                                                        }`}>
-                                                            {game.type.toUpperCase()}
-                                                        </span>
-                                                    </td>
-                                                    <td className="py-4 px-4">
-                                                        <span className="inline-block px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300">
-                                                            Published
-                                                        </span>
-                                                    </td>
-                                                    <td className="py-4 px-4">
-                                                        <div className="flex space-x-2">
-                                                            <a
-                                                                href={`/arena/${game.id}`}
-                                                                className="px-3 py-1 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-800/50 text-blue-700 dark:text-blue-300 rounded-md text-sm font-medium transition-colors duration-200"
-                                                            >
-                                                                View
-                                                            </a>
-                                                            <button
-                                                                onClick={() => handleDelete(game.id)}
-                                                                className="px-3 py-1 bg-red-100 dark:bg-red-900/50 hover:bg-red-200 dark:hover:bg-red-800/50 text-red-700 dark:text-red-300 rounded-md text-sm font-medium transition-colors duration-200"
-                                                            >
-                                                                Delete
-                                                            </button>
-                                                        </div>
-                                                    </td>
+
+                                {gamesLoading ? (
+                                    <div className="space-y-4">
+                                        {[...Array(3)].map((_, i) => (
+                                            <div key={i} className="h-16 bg-slate-700/50 rounded-lg animate-pulse"></div>
+                                        ))}
+                                    </div>
+                                ) : myGames.length === 0 ? (
+                                    <div className="text-center py-12">
+                                        <div className="w-16 h-16 bg-gradient-to-r from-slate-700 to-slate-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                                            <svg className="w-8 h-8 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
+                                                <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
+                                            </svg>
+                                        </div>
+                                        <h4 className="text-white font-medium mb-2">No games published yet</h4>
+                                        <p className="text-slate-400 text-sm">Start creating and publishing your games!</p>
+                                    </div>
+                                ) : (
+                                    <div className="overflow-x-auto">
+                                        <table className="w-full">
+                                            <thead>
+                                                <tr className="border-b border-slate-600/50">
+                                                    <th className="text-left py-3 px-4 font-medium text-white">Game Name</th>
+                                                    <th className="text-left py-3 px-4 font-medium text-white">Type</th>
+                                                    <th className="text-left py-3 px-4 font-medium text-white">Status</th>
+                                                    <th className="text-left py-3 px-4 font-medium text-white">Actions</th>
                                                 </tr>
-                                            ))}
-                                        </tbody>
-                                    </table>
-                                </div>
-                            )}
+                                            </thead>
+                                            <tbody>
+                                                {myGames.map((game) => (
+                                                    <tr key={game.id} className="border-b border-slate-700/50 hover:bg-slate-700/30 transition-colors duration-200">
+                                                        <td className="py-4 px-4">
+                                                            <div>
+                                                                <p className="font-medium text-white">{game.title}</p>
+                                                            </div>
+                                                        </td>
+                                                        <td className="py-4 px-4">
+                                                            <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
+                                                                game.type === 'html' 
+                                                                    ? 'bg-gradient-to-r from-orange-500/20 to-orange-600/20 text-orange-300'
+                                                                    : 'bg-gradient-to-r from-purple-500/20 to-purple-600/20 text-purple-300'
+                                                            }`}>
+                                                                {game.type!.toUpperCase()}
+                                                            </span>
+                                                        </td>
+                                                        <td className="py-4 px-4">
+                                                            <span className="inline-block px-2 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-green-500/20 to-green-600/20 text-green-300">
+                                                                Published
+                                                            </span>
+                                                        </td>
+                                                        <td className="py-4 px-4">
+                                                            <div className="flex space-x-2">
+                                                                <a
+                                                                    href={`/arena/${game.id}`}
+                                                                    className="px-3 py-1 bg-gradient-to-r from-blue-500/20 to-blue-600/20 hover:from-blue-500/30 hover:to-blue-600/30 text-blue-300 rounded-md text-sm font-medium transition-all duration-200"
+                                                                >
+                                                                    View
+                                                                </a>
+                                                                <button
+                                                                    onClick={() => handleDelete(game.id!)}
+                                                                    className="px-3 py-1 bg-gradient-to-r from-red-500/20 to-red-600/20 hover:from-red-500/30 hover:to-red-600/30 text-red-300 rounded-md text-sm font-medium transition-all duration-200"
+                                                                >
+                                                                    Delete
+                                                                </button>
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/components/dashboard/GoldenTickets.tsx b/components/dashboard/GoldenTickets.tsx
index 6ae82aa..9249810 100644
--- a/components/dashboard/GoldenTickets.tsx
+++ b/components/dashboard/GoldenTickets.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { ListSkeleton } from '@/components/ui/SkeletonLoader';
 
 interface GoldenTicketsProps {
@@ -11,55 +12,52 @@ interface GoldenTicketsProps {
 
 export default function GoldenTickets({ coupons, loading, onRedeem }: GoldenTicketsProps) {
     const [redeeming, setRedeeming] = useState<string | null>(null);
+    const router = useRouter();
 
     const handleRedeem = async (coupon: string) => {
-        if (!onRedeem) return;
-        
-        setRedeeming(coupon);
-        try {
-            await onRedeem(coupon);
-        } finally {
-            setRedeeming(null);
-        }
+        // Navigate to coupon redeem page with the coupon code as a parameter
+        router.push(`/coupon/redeem?code=${encodeURIComponent(coupon)}`);
     };
 
     return (
-        <div className="bg-gradient-to-br from-yellow-900/30 via-slate-800/40 to-orange-900/30 backdrop-blur-sm border border-yellow-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/20">
-            <div className="flex items-center justify-between mb-2">
-                <h3 className="text-lg font-bold text-white">Golden Tickets</h3>
-                <div className="bg-amber-500/20 border border-amber-500/30 px-2 py-1 rounded-md">
-                        <span className="text-amber-300 font-medium text-xs">TICKETS {coupons.length}</span>
+        <div className="bg-gradient-to-br from-amber-50 to-yellow-100 dark:from-amber-900/30 dark:to-yellow-800/30 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-primary">Golden Tickets</h3>
+                <div className="bg-gradient-to-r from-yellow-400 to-amber-500 text-white px-3 py-2 rounded-md shadow-sm">
+                    <span className="text-white font-medium text-sm">TICKETS {coupons.length}</span>
                 </div>
             </div>
-            
+
             {loading ? (
                 <ListSkeleton count={3} />
             ) : coupons.length === 0 ? (
                 <div className="text-center py-6">
-                    <div className="w-12 h-12 bg-amber-50 border-2 border-dashed border-amber-300 rounded-xl flex items-center justify-center mx-auto mb-3">
-                        <span className="text-lg font-bold">TICKET</span>
+                    <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <svg className="w-6 h-6 text-muted" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M2 9a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm2 1v4h16v-4H4zm2 2h4v2H6v-2zm6 0h4v2h-4v-2z" />
+                        </svg>
                     </div>
-                    <p className="text-slate-700 font-medium text-sm">No tickets yet</p>
-                    <p className="text-slate-500 text-xs">Use inventory items to earn golden tickets!</p>
+                    <p className="text-secondary font-medium text-sm">No tickets yet</p>
+                    <p className="text-muted text-xs">Use inventory items to earn golden tickets!</p>
                 </div>
             ) : (
-                <div className="space-y-2">
+                <div className="space-y-3">
                     {coupons.slice(0, 5).map((coupon, index) => (
-                        <div key={index} className="bg-gradient-to-r from-amber-50 to-yellow-50 border border-amber-200 rounded-lg p-3 hover:from-amber-100 hover:to-yellow-100 transition-all duration-200">
+                        <div key={index} className="bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 rounded-lg p-4 shadow-md">
                             <div className="flex items-center justify-between">
                                 <div className="flex items-center space-x-3">
-                                    <div className="w-8 h-8 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center shadow-sm">
-                                        <span className="text-xs font-bold">TICKET</span>
-                                    </div>
+                                    <svg className="w-6 h-6 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M2 9a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm2 1v4h16v-4H4zm2 2h4v2H6v-2zm6 0h4v2h-4v-2z" />
+                                    </svg>
                                     <div>
-                                        <p className="text-slate-900 font-medium text-sm font-mono">{coupon}</p>
-                                        <p className="text-amber-600 text-xs font-medium">Golden Ticket #{index + 1}</p>
+                                        <p className="text-primary font-medium text-base font-mono">{coupon}</p>
+                                        <p className="text-accent text-sm font-medium">Golden Ticket #{index + 1}</p>
                                     </div>
                                 </div>
                                 <button
                                     onClick={() => handleRedeem(coupon)}
                                     disabled={redeeming === coupon}
-                                    className="bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                                    className="bg-accent-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-accent-600 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                                 >
                                     {redeeming === coupon ? 'Redeeming...' : 'Redeem'}
                                 </button>
@@ -67,8 +65,8 @@ export default function GoldenTickets({ coupons, loading, onRedeem }: GoldenTick
                         </div>
                     ))}
                     {coupons.length > 5 && (
-                        <div className="text-center pt-2">
-                            <button className="text-amber-600 hover:text-amber-700 text-xs font-medium">
+                        <div className="text-center pt-4">
+                            <button className="text-accent-500 text-sm font-medium hover:text-accent-600 cursor-pointer transition-colors">
                                 View {coupons.length - 5} more tickets
                             </button>
                         </div>
diff --git a/components/dashboard/HeroSection.tsx b/components/dashboard/HeroSection.tsx
index 9f3d13c..fa54343 100644
--- a/components/dashboard/HeroSection.tsx
+++ b/components/dashboard/HeroSection.tsx
@@ -9,31 +9,29 @@ interface HeroSectionProps {
 
 export default function HeroSection({ tagline, playFabId, onCopyId, copied }: HeroSectionProps) {
     return (
-        <div className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-slate-800 to-black transition-colors duration-300">
-            <div className="absolute inset-0 bg-gradient-to-r from-purple-900/10 via-blue-900/10 to-indigo-900/10"></div>
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(120,119,198,0.1)_0%,transparent_70%)]"></div>
-            <div className="relative max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-4">
+        <div className="relative overflow-hidden">
+            <div className="relative max-w-6xl mx-auto px-6 sm:px-8 lg:px-12 py-8">
                 <div className="text-center">
-                    <h1 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-purple-100 bg-clip-text text-transparent mb-2">
+                    <h1 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">
                         Welcome to the Arena
                     </h1>
-                    <p className="text-sm text-slate-300 mb-3 max-w-2xl mx-auto leading-relaxed">
+                    <p className="text-base text-text-secondary mb-6 max-w-2xl mx-auto leading-relaxed">
                         {tagline || "Where champions are made and legends are born"}
                     </p>
                     <div className="flex items-center justify-center">
-                        <div className="flex items-center space-x-2 bg-gradient-to-r from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/30 rounded-lg px-3 py-1 shadow-lg">
-                            <span className="text-slate-300 text-xs font-medium">Player ID:</span>
-                            <code className="text-white font-mono text-xs bg-slate-900/50 px-1 py-0.5 rounded border border-slate-600/30">{playFabId?.slice(0, 8)}...</code>
+                        <div className="flex items-center space-x-3 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-lg px-4 py-2 shadow-md">
+                            <span className="text-text-secondary text-sm font-medium">Player ID:</span>
+                            <code className="text-text-primary font-mono text-sm bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 px-2 py-1 rounded">{playFabId?.slice(0, 8)}...</code>
                             <button
                                 onClick={onCopyId}
-                                className="text-slate-400 hover:text-slate-200 transition-colors p-1 hover:bg-slate-700/50 rounded"
+                                className="text-text-muted p-2 rounded hover:text-text-secondary cursor-pointer transition-colors"
                                 aria-label="Copy PlayFab ID"
                             >
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                 </svg>
                             </button>
-                            {copied && <span className="text-green-400 text-xs font-medium">Copied!</span>}
+                            {copied && <span className="text-success text-sm font-medium">Copied!</span>}
                         </div>
                     </div>
                 </div>
diff --git a/components/dashboard/Inventory.tsx b/components/dashboard/Inventory.tsx
index d46bdec..60fdd0c 100644
--- a/components/dashboard/Inventory.tsx
+++ b/components/dashboard/Inventory.tsx
@@ -18,44 +18,38 @@ interface InventoryProps {
 
 export default function Inventory({ inventoryItems, loading, onUseItem, isBuying }: InventoryProps) {
     return (
-        <div className="bg-gradient-to-br from-emerald-900/30 via-slate-800/40 to-green-900/30 backdrop-blur-sm border border-emerald-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-green-500/20">
-            <div className="flex items-center justify-between mb-2">
-                <h3 className="text-lg font-bold text-white">Inventory</h3>
-                <button className="text-slate-400 hover:text-slate-200 transition-colors font-medium text-xs flex items-center">
-                    View All 
-                    <svg className="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                    </svg>
-                </button>
+        <div className="bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-900/30 dark:to-pink-800/30 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-primary">Inventory</h3>
             </div>
             {loading ? (
                 <ListSkeleton count={3} />
             ) : inventoryItems.length === 0 ? (
                 <div className="text-center py-6">
-                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                    <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
                         <span className="text-lg font-bold">BAG</span>
                     </div>
-                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No items yet</p>
-                    <p className="text-slate-500 dark:text-slate-400 text-xs">Visit the store to get started!</p>
+                    <p className="text-secondary font-medium text-sm">No items yet</p>
+                    <p className="text-muted text-xs">Visit the store to get started!</p>
                 </div>
             ) : (
-                <div className="space-y-2">
+                <div className="space-y-3">
                     {inventoryItems.slice(0, 3).map((item) => (
-                        <div key={item.ItemInstanceId} className="bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg p-3 hover:bg-slate-100 dark:hover:bg-slate-600 hover:border-slate-300 dark:hover:border-slate-500 transition-all duration-200">
+                        <div key={item.ItemInstanceId} className="bg-gradient-to-r from-white to-purple-50 dark:from-gray-800 dark:to-purple-900/20 rounded-lg p-4 shadow-md">
                             <div className="flex items-center justify-between">
                                 <div className="flex items-center space-x-3">
-                                    <div className="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-600 rounded-lg flex items-center justify-center shadow-sm">
-                                        <span className="text-sm">📦</span>
-                                    </div>
+                                    <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                                        <path d="M2 9a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm2 1v4h16v-4H4zm2 2h4v2H6v-2zm6 0h4v2h-4v-2z" />
+                                    </svg>
                                     <div>
-                                        <p className="text-slate-900 dark:text-slate-100 font-medium text-sm">{item.DisplayName || item.ItemId}</p>
-                                        <p className="text-slate-500 dark:text-slate-400 text-xs">Qty: {item.RemainingUses ?? 1}</p>
+                                        <p className="text-primary font-medium text-base">{item.DisplayName || item.ItemId}</p>
+                                        <p className="text-muted text-sm">Qty: {item.RemainingUses ?? 1}</p>
                                     </div>
                                 </div>
                                 <button
                                     onClick={() => onUseItem(item)}
                                     disabled={isBuying}
-                                    className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white px-3 py-1 rounded-md text-xs font-medium transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                                    className="bg-primary-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-600 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                                 >
                                     {isBuying ? 'Using...' : 'Use'}
                                 </button>
diff --git a/components/dashboard/LeaderboardChart.tsx b/components/dashboard/LeaderboardChart.tsx
new file mode 100644
index 0000000..cce32c3
--- /dev/null
+++ b/components/dashboard/LeaderboardChart.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+import { Bar } from 'react-chartjs-2';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+interface Player {
+    name: string;
+    trophies: number;
+    gamesPlayed: number;
+    rank: number;
+}
+
+interface LeaderboardChartProps {
+    players: Player[];
+    sortBy: 'Trophies' | 'Games Played';
+}
+
+export default function LeaderboardChart({ players, sortBy }: LeaderboardChartProps) {
+    // Get top 10 players for better chart readability
+    const topPlayers = players.slice(0, 10);
+    
+    const getRankColor = (rank: number) => {
+        switch (rank) {
+            case 1: return 'rgba(255, 215, 0, 0.8)'; // Gold
+            case 2: return 'rgba(192, 192, 192, 0.8)'; // Silver
+            case 3: return 'rgba(205, 127, 50, 0.8)'; // Bronze
+            default: return 'rgba(59, 130, 246, 0.8)'; // Blue
+        }
+    };
+
+    const data = {
+        labels: topPlayers.map(player => player.name.length > 12 ? player.name.substring(0, 12) + '...' : player.name),
+        datasets: [
+            {
+                label: sortBy,
+                data: topPlayers.map(player => 
+                    sortBy === 'Trophies' ? player.trophies : player.gamesPlayed
+                ),
+                backgroundColor: topPlayers.map(player => getRankColor(player.rank)),
+                borderColor: topPlayers.map(player => {
+                    switch (player.rank) {
+                        case 1: return 'rgba(255, 215, 0, 1)';
+                        case 2: return 'rgba(192, 192, 192, 1)';
+                        case 3: return 'rgba(205, 127, 50, 1)';
+                        default: return 'rgba(59, 130, 246, 1)';
+                    }
+                }),
+                borderWidth: 2,
+                borderRadius: 8,
+                borderSkipped: false,
+            },
+        ],
+    };
+
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top' as const,
+                labels: {
+                    color: 'rgb(203, 213, 225)', // slate-300
+                    font: {
+                        size: 14,
+                        weight: '500' as const,
+                    },
+                },
+            },
+            title: {
+                display: true,
+                text: `Top 10 Players - ${sortBy}`,
+                color: 'rgb(255, 255, 255)', // white
+                font: {
+                    size: 18,
+                    weight: 'bold' as const,
+                },
+            },
+            tooltip: {
+                backgroundColor: 'rgba(15, 23, 42, 0.9)',
+                titleColor: 'rgb(255, 255, 255)',
+                bodyColor: 'rgb(255, 255, 255)',
+                borderColor: 'rgb(71, 85, 105)',
+                borderWidth: 1,
+                cornerRadius: 8,
+                displayColors: true,
+                callbacks: {
+                    title: function(context: any) {
+                        const player = topPlayers[context[0].dataIndex];
+                        return `#${player.rank} ${player.name}`;
+                    },
+                    label: function(context: any) {
+                        const value = context.parsed.y;
+                        return `${sortBy}: ${value.toLocaleString()}`;
+                    },
+                },
+            },
+        },
+        scales: {
+            y: {
+                beginAtZero: true,
+                grid: {
+                    color: 'rgba(148, 163, 184, 0.2)', // slate-300 with lower opacity
+                    drawBorder: false,
+                },
+                ticks: {
+                    color: 'rgb(203, 213, 225)', // slate-300
+                    font: {
+                        size: 12,
+                    },
+                },
+                title: {
+                    display: true,
+                    text: sortBy,
+                    color: 'rgb(203, 213, 225)', // slate-300
+                    font: {
+                        size: 14,
+                        weight: '600' as const,
+                    },
+                },
+            },
+            x: {
+                grid: {
+                    display: false,
+                },
+                ticks: {
+                    color: 'rgb(203, 213, 225)', // slate-300
+                    font: {
+                        size: 11,
+                        weight: '500' as const,
+                    },
+                    maxRotation: 45,
+                },
+            },
+        },
+        animation: {
+            duration: 1000,
+            easing: 'easeInOutQuart' as const,
+        },
+    };
+
+    if (topPlayers.length === 0) {
+        return (
+            <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 rounded-2xl"></div>
+                <div className="relative h-96 flex items-center justify-center">
+                    <div className="text-center">
+                        <div className="w-20 h-20 bg-gradient-to-r from-slate-700 to-slate-600 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
+                            <svg className="w-8 h-8 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
+                                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+                            </svg>
+                        </div>
+                        <p className="text-slate-300 font-medium text-lg">No data available for chart</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-6 shadow-2xl">
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-purple-500/5 to-pink-500/5 rounded-2xl"></div>
+            <div className="relative">
+                <div className="h-96">
+                    <Bar data={data} options={options} />
+                </div>
+                
+                {/* Legend for rank colors */}
+                <div className="mt-6 flex flex-wrap justify-center gap-6 text-sm">
+                    <div className="flex items-center space-x-3 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 backdrop-blur-sm px-4 py-2 rounded-full">
+                        <div className="w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full shadow-lg"></div>
+                        <span className="text-yellow-200 font-medium">1st Place</span>
+                    </div>
+                    <div className="flex items-center space-x-3 bg-gradient-to-r from-gray-500/20 to-gray-600/20 backdrop-blur-sm px-4 py-2 rounded-full">
+                        <div className="w-4 h-4 bg-gradient-to-r from-gray-400 to-gray-600 rounded-full shadow-lg"></div>
+                        <span className="text-gray-200 font-medium">2nd Place</span>
+                    </div>
+                    <div className="flex items-center space-x-3 bg-gradient-to-r from-orange-500/20 to-orange-600/20 backdrop-blur-sm px-4 py-2 rounded-full">
+                        <div className="w-4 h-4 bg-gradient-to-r from-orange-400 to-orange-600 rounded-full shadow-lg"></div>
+                        <span className="text-orange-200 font-medium">3rd Place</span>
+                    </div>
+                    <div className="flex items-center space-x-3 bg-gradient-to-r from-blue-500/20 to-blue-600/20 backdrop-blur-sm px-4 py-2 rounded-full">
+                        <div className="w-4 h-4 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full shadow-lg"></div>
+                        <span className="text-blue-200 font-medium">Other Ranks</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/dashboard/PlayerStatsChart.tsx b/components/dashboard/PlayerStatsChart.tsx
index 96c19f8..27238bc 100644
--- a/components/dashboard/PlayerStatsChart.tsx
+++ b/components/dashboard/PlayerStatsChart.tsx
@@ -27,9 +27,8 @@ export default function PlayerStatsChart({ gamesPlayed, trophies, loading }: Pla
             {
                 label: 'Player Statistics',
                 data: [gamesPlayed, trophies],
-                backgroundColor: ['rgba(59, 130, 246, 0.6)', 'rgba(16, 185, 129, 0.6)'], // Blue and Green with transparency
-                borderColor: ['#3b82f6', '#10b981'], // Solid colors for borders
-                borderWidth: 2,
+                backgroundColor: ['rgba(59, 130, 246, 0.6)', 'rgba(16, 185, 129, 0.6)'],
+                borderWidth: 0,
                 borderRadius: 8,
                 borderSkipped: false,
             },
@@ -107,13 +106,10 @@ export default function PlayerStatsChart({ gamesPlayed, trophies, loading }: Pla
 
     if (loading) {
         return (
-            <div className="bg-gradient-to-br from-purple-900/30 via-slate-800/40 to-indigo-900/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20">
-                <div className="flex items-center justify-between mb-2">
-                    <h3 className="text-lg font-bold text-white">Player Statistics</h3>
-                    <div className="bg-purple-500/20 border border-purple-500/30 px-2 py-1 rounded-md">
-                        <span className="text-purple-300 font-medium text-xs">Loading...</span>
-                    </div>
-                </div>
+            <div className="bg-card rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-primary">Player Statistics</h3>
+            </div>
                 <ChartSkeleton />
             </div>
         );
@@ -122,53 +118,50 @@ export default function PlayerStatsChart({ gamesPlayed, trophies, loading }: Pla
     const hasData = gamesPlayed > 0 || trophies > 0;
 
     return (
-        <div className="bg-gradient-to-br from-purple-900/30 via-slate-800/40 to-indigo-900/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20">
-            <div className="flex items-center justify-between mb-4">
-                <h3 className="text-lg font-bold text-white">Player Statistics</h3>
-                <div className="bg-purple-500/20 border border-purple-500/30 px-2 py-1 rounded-md">
-                    <span className="text-purple-300 font-medium text-xs">Games & Trophies</span>
-                </div>
+        <div className="bg-gradient-to-br from-orange-50 to-red-100 dark:from-orange-900/30 dark:to-red-800/30 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-6">
+                <h3 className="text-xl font-bold text-primary">Player Statistics</h3>
             </div>
             
             {!hasData ? (
-                <div className="text-center py-8">
-                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg flex items-center justify-center mx-auto mb-3">
-                        <span className="text-lg font-bold text-slate-500 dark:text-slate-400">STATS</span>
-                    </div>
-                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No statistics yet</p>
-                    <p className="text-slate-500 dark:text-slate-400 text-xs">Start playing games to see your progress</p>
+                    <div className="text-center py-8">
+                        <div className="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center mx-auto mb-3 shadow-md">
+                            <span className="text-white text-lg font-bold">STATS</span>
+                        </div>
+                    <p className="text-secondary font-medium text-sm">No statistics yet</p>
+                    <p className="text-muted text-xs">Start playing games to see your progress</p>
                 </div>
             ) : (
                 <div>
                     {/* Chart Container */}
-                    <div className="relative h-32 mb-2">
+                    <div className="relative h-40 mb-4">
                         <Bar data={chartData} options={chartOptions} />
                     </div>
 
                     {/* Statistics Summary Cards */}
-                    <div className="grid grid-cols-2 gap-2">
-                        <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-2 text-center border border-blue-200 dark:border-blue-700">
-                            <div className="w-3 h-3 bg-blue-500 rounded-full mx-auto mb-1"></div>
-                            <p className="text-xs font-medium text-blue-700 dark:text-blue-300 mb-1">Games Played</p>
-                            <p className="text-lg font-bold text-blue-900 dark:text-blue-100">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="bg-gradient-to-br from-white to-orange-50 dark:from-gray-800 dark:to-orange-900/20 rounded-lg p-3 text-center shadow-md">
+                            <div className="w-4 h-4 bg-gradient-to-br from-orange-500 to-red-500 rounded-full mx-auto mb-2"></div>
+                            <p className="text-sm font-medium text-secondary mb-2">Games Played</p>
+                            <p className="text-xl font-bold text-primary">
                                 {gamesPlayed.toLocaleString()}
                             </p>
                         </div>
                         
-                        <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-2 text-center border border-green-200 dark:border-green-700">
-                            <div className="w-3 h-3 bg-green-500 rounded-full mx-auto mb-1"></div>
-                            <p className="text-xs font-medium text-green-700 dark:text-green-300 mb-1">Trophies</p>
-                            <p className="text-lg font-bold text-green-900 dark:text-green-100">
+                        <div className="bg-gradient-to-br from-white to-red-50 dark:from-gray-800 dark:to-red-900/20 rounded-lg p-3 text-center shadow-md">
+                            <div className="w-4 h-4 bg-gradient-to-br from-red-500 to-pink-500 rounded-full mx-auto mb-2"></div>
+                            <p className="text-sm font-medium text-secondary mb-2">Trophies</p>
+                            <p className="text-xl font-bold text-primary">
                                 {trophies.toLocaleString()}
                             </p>
                         </div>
                     </div>
 
                     {/* Total Summary */}
-                    <div className="mt-2 pt-2 border-t border-slate-200 dark:border-slate-600">
+                    <div className="mt-4 pt-4">
                         <div className="flex justify-between items-center">
-                            <span className="text-slate-600 dark:text-slate-400 text-xs">Total Achievement Score:</span>
-                            <span className="font-bold text-slate-900 dark:text-slate-100 text-sm">
+                            <span className="text-muted text-sm">Total Achievement Score:</span>
+                            <span className="font-bold text-primary text-base">
                                 {(gamesPlayed + trophies).toLocaleString()}
                             </span>
                         </div>
diff --git a/components/dashboard/PlaytimeChart.tsx b/components/dashboard/PlaytimeChart.tsx
index 2acf608..69ab66f 100644
--- a/components/dashboard/PlaytimeChart.tsx
+++ b/components/dashboard/PlaytimeChart.tsx
@@ -60,10 +60,10 @@ export default function PlaytimeChart({ playtimeSeconds, totalSeconds, loading }
     };
 
     return (
-        <div className="bg-gradient-to-br from-blue-900/30 via-slate-800/40 to-cyan-900/30 backdrop-blur-sm border border-blue-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/20">
-            <div className="flex items-center justify-between mb-2">
-                <h3 className="text-lg font-bold text-white">Playtime Analytics</h3>
-                <div className="px-2 py-1 bg-blue-500/20 text-blue-300 text-xs font-medium rounded-full border border-blue-500/30">
+        <div className="bg-gradient-to-br from-cyan-50 to-blue-100 dark:from-cyan-900/30 dark:to-blue-800/30 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-primary">Playtime Analytics</h3>
+                <div className="px-3 py-2 bg-gradient-to-r from-cyan-400 to-blue-500 text-white text-sm font-medium rounded-full shadow-sm">
                     Daily Limit: {Math.floor(totalSeconds / 60)}min
                 </div>
             </div>
@@ -85,30 +85,30 @@ export default function PlaytimeChart({ playtimeSeconds, totalSeconds, loading }
                     </div>
                 </div>
             ) : (
-                <div className="flex flex-col lg:flex-row items-center justify-between">
-                    <div className="w-24 h-24 mb-2 lg:mb-0">
+                <div className="flex flex-col lg:flex-column items-center">
+                    <div className="w-32 h-32 mb-4">
                         <Doughnut data={playtimeData} options={options} />
                     </div>
-                    <div className="lg:ml-3 space-y-2">
+                    <div className="lg:ml-6 space-y-3">
                         <div className="space-y-1">
-                            <div className="flex items-center space-x-2">
-                                <div className="w-3 h-3 bg-slate-500 rounded-full"></div>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-4 h-4 bg-slate-500 rounded-full"></div>
                                 <div>
-                                    <span className="text-slate-900 font-medium text-sm">Played: {Math.floor(playtimeSeconds / 60)}min</span>
-                                    <p className="text-slate-500 text-xs">{playtimeSeconds} seconds</p>
+                                    <span className="text-primary font-medium text-base">Played: {Math.floor(playtimeSeconds / 60)}min</span>
+                                    <p className="text-muted text-sm">{playtimeSeconds} seconds</p>
                                 </div>
                             </div>
-                            <div className="flex items-center space-x-2">
-                                <div className="w-3 h-3 bg-slate-300 rounded-full"></div>
+                            <div className="flex items-center space-x-3">
+                                <div className="w-4 h-4 bg-slate-300 rounded-full"></div>
                                 <div>
-                                    <span className="text-slate-900 font-medium text-sm">Remaining: {Math.floor((totalSeconds - playtimeSeconds) / 60)}min</span>
-                                    <p className="text-slate-500 text-xs">{totalSeconds - playtimeSeconds} seconds</p>
+                                    <span className="text-primary font-medium text-base">Remaining: {Math.floor((totalSeconds - playtimeSeconds) / 60)}min</span>
+                                    <p className="text-muted text-sm">{totalSeconds - playtimeSeconds} seconds</p>
                                 </div>
                             </div>
                         </div>
-                        <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
-                            <p className="text-slate-600 text-xs">
-                                You've used <span className="font-semibold text-slate-700">{Math.round((playtimeSeconds / totalSeconds) * 100)}%</span> of your daily playtime
+                            <div className="bg-gradient-to-r from-white to-cyan-50 dark:from-gray-800 dark:to-cyan-900/20 p-4 rounded-lg shadow-md">
+                            <p className="text-muted text-sm">
+                                You've used <span className="font-semibold text-secondary">{Math.round((playtimeSeconds / totalSeconds) * 100)}%</span> of your daily playtime
                             </p>
                         </div>
                     </div>
diff --git a/components/dashboard/Store.tsx b/components/dashboard/Store.tsx
index 71b80e6..baab8d3 100644
--- a/components/dashboard/Store.tsx
+++ b/components/dashboard/Store.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useState } from 'react';
 import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+import { useState } from 'react';
 
 interface StoreItem {
     ItemId: string;
@@ -17,197 +17,144 @@ interface StoreProps {
     onPurchase?: (item: StoreItem, currency: string) => void;
 }
 
-// Currency conversion rates (base currency: first available currency)
-const getCurrencyConversionRates = (currencies: string[]) => {
-    // Example conversion rates - you can customize these based on your game economy
-    const rates: { [key: string]: number } = {
-        'AC': 1,     // Arena Coins (base)
-        'GC': 0.1,   // Gold Coins (1 GC = 10 AC)
-        'TC': 5,     // Tickets (1 TC = 0.2 AC)
-        'SC': 1.5,   // Silver Coins  
-        'BC': 2,     // Bronze Coins
-        'PC': 0.05,  // Premium Coins (1 PC = 20 AC)
-        'Coins': 1,
-        'Gems': 0.1,
-        'Tickets': 5,
-        'Credits': 1,
-        'Points': 10,
-    };
-    
-    return rates;
-};
 
-// Get currency icon
-const getCurrencyIcon = (currency: string): string => {
-    const icons: { [key: string]: string } = {
-        'AC': '🪙', 'GC': '💎', 'TC': '🎫', 'SC': '🥈', 'BC': '🥉', 'PC': '🏆',
-        'Coins': '🪙', 'Gems': '💎', 'Tickets': '🎫', 'Credits': '💳', 'Points': '⭐'
-    };
-    return icons[currency] || '💰';
-};
 
 export default function Store({ storeItems, loading, virtualCurrency, onPurchase }: StoreProps) {
     // Get all available currencies
     const currencies = Object.entries(virtualCurrency);
-    const totalCurrencies = currencies.length;
-    const currencyKeys = Object.keys(virtualCurrency);
-    const conversionRates = getCurrencyConversionRates(currencyKeys);
-    
+
     // State for selected currency for each item
     const [selectedCurrencies, setSelectedCurrencies] = useState<{ [itemId: string]: string }>({});
 
     return (
-        <div className="bg-gradient-to-br from-teal-900/30 via-slate-800/40 to-emerald-900/30 backdrop-blur-sm border border-teal-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/20">
+        <div className="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-800/30 rounded-lg p-4">
             <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center space-x-3">
-                    <div className="w-8 h-8 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-sm">
-                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-lg flex items-center justify-center shadow-md">
+                        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                         </svg>
                     </div>
                     <div>
-                        <h3 className="text-white font-semibold text-base">Premium Store</h3>
-                        <p className="text-slate-300 text-xs">Buy items with multiple currencies</p>
+                        <h3 className="text-primary font-semibold text-lg">Arena Store</h3>
+                        <p className="text-secondary text-sm">Purchase Items</p>
                     </div>
                 </div>
-                <span className="inline-block px-2 py-1 bg-emerald-500/20 text-emerald-300 text-xs font-semibold rounded-full border border-emerald-500/30">
+                <span className="inline-block px-3 py-2 bg-muted text-secondary text-sm font-semibold rounded-full">
                     {storeItems.length} Items
                 </span>
             </div>
-            
-            {/* Currency Info */}
-            {totalCurrencies > 1 && (
-                <div className="mb-6 p-4 bg-gradient-to-r from-emerald-50 to-blue-50 border border-emerald-200 rounded-xl">
-                    <div className="flex items-start space-x-3">
-                        <div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center flex-shrink-0">
-                            <svg className="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                            </svg>
-                        </div>
-                        <div>
-                            <h4 className="text-emerald-800 font-semibold text-sm">Flexible Payment Options</h4>
-                            <p className="text-emerald-700 text-xs mt-1">
-                                Choose from {totalCurrencies} different currencies. Smart conversion rates ensure fair pricing across all payment methods.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            )}
-            
+
+
+
             {loading ? (
                 <ListSkeleton count={3} />
             ) : storeItems.length === 0 ? (
                 <div className="text-center py-6">
-                    <div className="w-12 h-12 bg-slate-50 border-2 border-dashed border-slate-300 rounded-xl flex items-center justify-center mx-auto mb-3">
+                    <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
                         <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                         </svg>
                     </div>
-                    <p className="text-slate-700 font-medium text-sm">Store is empty</p>
-                    <p className="text-slate-500 text-xs">No items available for purchase</p>
+                    <p className="text-secondary font-medium text-sm">Store is empty</p>
+                    <p className="text-muted text-xs">No items available for purchase</p>
                 </div>
             ) : (
-                <div className="space-y-4">
+                <div className="space-y-5">
                     {storeItems.slice(0, 4).map((item) => {
-                        const originalPrice = item.VirtualCurrencyPrices ? Object.values(item.VirtualCurrencyPrices)[0] || 0 : 0;
-                        const originalCurrency = item.VirtualCurrencyPrices ? Object.keys(item.VirtualCurrencyPrices)[0] || 'AC' : 'AC';
-                        
-                        // Get selected currency for this item (default to original)
-                        const selectedCurrency = selectedCurrencies[item.ItemId] || originalCurrency;
-                        
-                        // Calculate price in selected currency
-                        const calculatePrice = (targetCurrency: string): number => {
-                            if (targetCurrency === originalCurrency) return originalPrice;
-                            
-                            const originalRate = conversionRates[originalCurrency] || 1;
-                            const targetRate = conversionRates[targetCurrency] || 1;
-                            
-                            return Math.ceil(originalPrice * (originalRate / targetRate));
-                        };
-                        
-                        const price = calculatePrice(selectedCurrency);
-                        const playerCurrencyAmount = virtualCurrency[selectedCurrency] || 0;
-                        const canAfford = playerCurrencyAmount >= price;
-                        
+                        const availableCurrencies = item.VirtualCurrencyPrices ? Object.keys(item.VirtualCurrencyPrices) : [];
+                        const selectedCurrency = selectedCurrencies[item.ItemId] || availableCurrencies[0];
+                        const selectedPrice = item.VirtualCurrencyPrices![selectedCurrency] || 0;
+                        const playerAmount = virtualCurrency[selectedCurrency] || 0;
+                        const canAfford = playerAmount >= selectedPrice;
+
                         return (
-                            <div key={item.ItemId} className="bg-white border border-slate-200 rounded-xl p-4 hover:shadow-md hover:border-slate-300 transition-all duration-300">
+                            <div key={item.ItemId} className="bg-gradient-to-r from-white to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-xl p-5 shadow-lg">
                                 {/* Item Header */}
-                                <div className="flex items-center justify-between mb-3">
+                                <div className="flex items-center justify-between mb-4">
                                     <div className="flex items-center space-x-3">
-                                        <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-sm">
-                                            <span className="text-xl">🎁</span>
+                                        <div className="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
+                                            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                                                <path d="M2 9a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm2 1v4h16v-4H4zm2 2h4v2H6v-2zm6 0h4v2h-4v-2z" />
+                                            </svg>
                                         </div>
                                         <div>
-                                            <h4 className="text-slate-900 font-semibold text-sm">{item.DisplayName || item.ItemId}</h4>
-                                            <p className="text-slate-500 text-xs">Premium Store Item</p>
-                                        </div>
-                                    </div>
-                                    <div className="text-right">
-                                        <div className="text-lg font-bold text-slate-900">
-                                            {price} {getCurrencyIcon(selectedCurrency)}
+                                            <h4 className="text-primary font-semibold text-base">{item.DisplayName || item.ItemId}</h4>
                                         </div>
-                                        <div className="text-xs text-slate-500">{selectedCurrency}</div>
                                     </div>
                                 </div>
-                                
-                                {/* Currency Selector - Clean Pills Design */}
-                                <div className="mb-3">
-                                    <p className="text-xs font-medium text-slate-700 mb-2">Payment Method:</p>
-                                    <div className="flex flex-wrap gap-2">
-                                        {currencyKeys.slice(0, 3).map(currency => {
-                                            const currencyPrice = calculatePrice(currency);
+
+                                {/* Currency Selection (Radio Buttons) */}
+                                <div className="mb-4">
+                                    <p className="text-sm font-medium text-secondary mb-3">Buy using</p>
+                                    <div className="space-y-2">
+                                        {availableCurrencies.map((currency) => {
+                                            const price = item.VirtualCurrencyPrices![currency];
                                             const playerAmount = virtualCurrency[currency] || 0;
-                                            const affordable = playerAmount >= currencyPrice;
+                                            const canAffordCurrency = playerAmount >= price;
                                             const isSelected = selectedCurrency === currency;
-                                            
+
                                             return (
-                                                <button
+                                                <label
                                                     key={currency}
-                                                    onClick={() => setSelectedCurrencies(prev => ({
-                                                        ...prev,
-                                                        [item.ItemId]: currency
-                                                    }))}
-                                                    className={`px-3 py-1 rounded-full text-xs font-medium transition-all duration-200 border ${
-                                                        isSelected
-                                                            ? affordable
-                                                                ? 'bg-emerald-100 border-emerald-300 text-emerald-700'
-                                                                : 'bg-red-100 border-red-300 text-red-700'
-                                                            : affordable
-                                                                ? 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'
-                                                                : 'bg-slate-50 border-slate-200 text-slate-400 opacity-50'
-                                                    }`}
-                                                    disabled={!affordable}
+                                                    className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${isSelected
+                                                            ? canAffordCurrency
+                                                                ? 'bg-blue-500 text-white'
+                                                                : 'bg-red-500 text-white'
+                                                            : canAffordCurrency
+                                                                ? 'bg-background-card text-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/20 cursor-pointer'
+                                                                : 'bg-background-muted text-text-muted opacity-50 cursor-not-allowed'
+                                                        }`}
                                                 >
-                                                    {getCurrencyIcon(currency)} {currencyPrice}
-                                                </button>
+                                                    <div className="flex items-center gap-3">
+                                                        <input
+                                                            type="radio"
+                                                            name={`currency-${item.ItemId}`}
+                                                            value={currency}
+                                                            checked={isSelected}
+                                                            onChange={(e) => setSelectedCurrencies(prev => ({
+                                                                ...prev,
+                                                                [item.ItemId]: e.target.value
+                                                            }))}
+                                                            className="w-4 h-4 text-blue-500 bg-background-card border-border-medium focus:ring-blue-500"
+                                                            disabled={!canAffordCurrency}
+                                                        />
+                                                        <span className="flex items-center gap-2">
+                                                            <span className="font-medium">{currency}</span>
+                                                        </span>
+                                                    </div>
+                                                    <div className="text-right">
+                                                        <div className="font-bold text-lg">{price} ₹</div>
+                                                        <div className="text-xs opacity-75">
+                                                            Balance: ₹ {playerAmount}
+                                                        </div>
+                                                    </div>
+                                                </label>
                                             );
                                         })}
                                     </div>
-                                    {selectedCurrency !== originalCurrency && (
-                                        <p className="text-xs text-slate-500 mt-1">
-                                            Original: {originalPrice} {getCurrencyIcon(originalCurrency)} {originalCurrency}
-                                        </p>
-                                    )}
                                 </div>
-                                
+
                                 {/* Purchase Button */}
                                 <button
                                     onClick={() => onPurchase && onPurchase(item, selectedCurrency)}
                                     disabled={!canAfford || !onPurchase}
-                                    className={`w-full py-2 rounded-lg text-sm font-semibold transition-all duration-200 transform hover:scale-[1.02] disabled:transform-none ${
-                                        canAfford 
-                                            ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white shadow-sm hover:shadow-md'
-                                            : 'bg-slate-100 text-slate-400 cursor-not-allowed'
-                                    }`}
+                                    className={`w-full py-3 px-4 rounded-lg text-base font-semibold flex items-center justify-center gap-2 transition-colors ${canAfford
+                                            ? 'bg-blue-600 text-white hover:bg-blue-700 cursor-pointer'
+                                            : 'bg-background-muted text-text-muted cursor-not-allowed'
+                                        }`}
                                 >
-                                    {canAfford ? 'Purchase Now' : `Need ${price - playerCurrencyAmount} more ${selectedCurrency}`}
+                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m6-5v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6m8 0V9a2 2 0 00-2-2H9a2 2 0 00-2 2v4.01" />
+                                    </svg>
+                                    {canAfford ? 'Purchase Now' : `Need ${selectedPrice - playerAmount} more ${selectedCurrency}`}
                                 </button>
                             </div>
                         );
                     })}
                     {storeItems.length > 4 && (
-                        <div className="text-center pt-4">
-                            <button className="px-4 py-2 bg-slate-50 hover:bg-slate-100 border border-slate-200 text-slate-600 hover:text-slate-700 text-sm font-medium rounded-lg transition-all duration-200">
+                        <div className="text-center pt-5">
+                            <button className="px-5 py-3 bg-background-card text-text-secondary text-base font-medium rounded-lg hover:bg-background-tertiary cursor-pointer transition-colors">
                                 View {storeItems.length - 4} more items →
                             </button>
                         </div>
diff --git a/components/dashboard/VirtualCurrencies.tsx b/components/dashboard/VirtualCurrencies.tsx
index 2d3065d..c8c171b 100644
--- a/components/dashboard/VirtualCurrencies.tsx
+++ b/components/dashboard/VirtualCurrencies.tsx
@@ -14,116 +14,53 @@ interface VirtualCurrenciesProps {
 // Currency labels mapping
 const getCurrencyLabel = (currencyCode: string): string => {
     const labelMap: { [key: string]: string } = {
-        'AC': 'AC', // Arena Coins
-        'GC': 'GC', // Gems/Gold Coins
-        'TC': 'TC', // Tickets
-        'SC': 'SC', // Silver Coins  
-        'BC': 'BC', // Bronze Coins
-        'PC': 'PC', // Premium Coins
-        'Coins': 'COINS',
-        'Gems': 'GEMS',
-        'Tickets': 'TICKETS',
-        'Gold': 'GOLD',
-        'Silver': 'SILVER',
-        'Bronze': 'BRONZE',
-        'Credits': 'CREDITS',
-        'Points': 'POINTS',
-        'Energy': 'ENERGY',
-        'XP': 'XP',
-        'VT': 'VT', // Virtual Tickets
-        'VP': 'VP', // Virtual Points
+        'AC': 'ArenaCoins', // Arena Coins
+        'PR': 'Prize Money', // Prize Money
         'default': 'COIN'
     };
-    
+
     return labelMap[currencyCode] || labelMap['default'];
 };
 
-// Currency color themes
-const getCurrencyTheme = (currencyCode: string, index: number) => {
-    const themes = [
-        {
-            gradient: 'from-emerald-500 to-emerald-600',
-            bgColor: 'bg-emerald-50',
-            borderColor: 'border-emerald-200',
-            textColor: 'text-emerald-700',
-            hoverShadow: 'hover:shadow-emerald-100'
-        },
-        {
-            gradient: 'from-blue-500 to-blue-600',
-            bgColor: 'bg-blue-50',
-            borderColor: 'border-blue-200',
-            textColor: 'text-blue-700',
-            hoverShadow: 'hover:shadow-blue-100'
-        },
-        {
-            gradient: 'from-purple-500 to-purple-600',
-            bgColor: 'bg-purple-50',
-            borderColor: 'border-purple-200',
-            textColor: 'text-purple-700',
-            hoverShadow: 'hover:shadow-purple-100'
-        },
-        {
-            gradient: 'from-amber-500 to-amber-600',
-            bgColor: 'bg-amber-50',
-            borderColor: 'border-amber-200',
-            textColor: 'text-amber-700',
-            hoverShadow: 'hover:shadow-amber-100'
-        },
-        {
-            gradient: 'from-rose-500 to-rose-600',
-            bgColor: 'bg-rose-50',
-            borderColor: 'border-rose-200',
-            textColor: 'text-rose-700',
-            hoverShadow: 'hover:shadow-rose-100'
-        }
-    ];
-    
-    return themes[index % themes.length];
-};
 
 export default function VirtualCurrencies({ virtualCurrency, loading }: VirtualCurrenciesProps) {
     const currencies = Object.entries(virtualCurrency);
 
     return (
-        <div className="bg-gradient-to-br from-amber-900/30 via-slate-800/40 to-yellow-900/30 backdrop-blur-sm border border-amber-500/20 rounded-lg p-2 shadow-lg transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/20">
-            <div className="flex items-center justify-between mb-2">
-                <h3 className="text-lg font-bold text-white">Virtual Currencies</h3>
-                <div className="bg-amber-500/20 border border-amber-500/30 px-2 py-1 rounded-md">
-                    <span className="text-amber-300 font-medium text-xs">{currencies.length} currencies</span>
-                </div>
+        <div className="bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-emerald-900/30 dark:to-teal-800/30 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+                <h3 className="text-xl font-bold text-primary">Arena Economy</h3>
             </div>
-            
+
             {loading ? (
                 <ListSkeleton count={3} />
             ) : currencies.length === 0 ? (
                 <div className="text-center py-6">
-                    <div className="w-12 h-12 bg-slate-50 dark:bg-slate-700 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-xl flex items-center justify-center mx-auto mb-3">
+                    <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
                         <span className="text-lg font-bold">COINS</span>
                     </div>
-                    <p className="text-slate-700 dark:text-slate-300 font-medium text-sm">No currencies</p>
-                    <p className="text-slate-500 dark:text-slate-400 text-xs">Virtual currencies will appear here</p>
+                    <p className="text-secondary font-medium text-sm">No currencies</p>
+                    <p className="text-muted text-xs">Virtual currencies will appear here</p>
                 </div>
             ) : (
-                <div className="space-y-2">
+                <div className="space-y-3">
                     {currencies.map(([currencyCode, amount], index) => {
-                        const theme = getCurrencyTheme(currencyCode, index);
                         const label = getCurrencyLabel(currencyCode);
-                        
+
                         return (
-                            <div key={currencyCode} className={`bg-white dark:bg-slate-700 border ${theme.borderColor} dark:border-slate-600 rounded-lg p-3 hover:bg-slate-50 dark:hover:bg-slate-600 transition-all duration-200 ${theme.hoverShadow}`}>
+                            <div key={currencyCode} className={`bg-gradient-to-r from-white to-emerald-50 dark:from-gray-800 dark:to-emerald-900/20 rounded-lg p-4 shadow-md`}>
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center space-x-3">
-                                        <div className={`w-10 h-10 ${theme.bgColor} dark:bg-opacity-20 border ${theme.borderColor} dark:border-slate-600 rounded-lg flex items-center justify-center`}>
-                                            <span className="text-xs font-bold">{label}</span>
+                                        <div className={`w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg flex items-center justify-center shadow-md`}>
+                                            <span className="text-white text-sm font-bold">{currencyCode}</span>
                                         </div>
                                         <div>
-                                            <p className="text-slate-900 dark:text-slate-100 font-medium text-sm">{currencyCode}</p>
-                                            <p className={`text-xs ${theme.textColor} dark:text-slate-400`}>Virtual Currency</p>
+                                            <p className="text-primary font-medium text-base">{label}</p>
                                         </div>
                                     </div>
                                     <div className="text-right">
-                                        <p className="text-slate-900 dark:text-slate-100 font-bold text-lg leading-none">{amount.toLocaleString()}</p>
-                                        <p className="text-slate-500 dark:text-slate-400 text-xs">balance</p>
+                                        <p className="text-primary font-bold text-xl leading-none">{amount.toLocaleString()} ₹</p>
+                                        <p className="text-muted text-sm">balance</p>
                                     </div>
                                 </div>
                             </div>
@@ -131,11 +68,11 @@ export default function VirtualCurrencies({ virtualCurrency, loading }: VirtualC
                     })}
                 </div>
             )}
-            
+
             {currencies.length > 0 && (
-                <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-600">
+                <div className="mt-6 pt-4">
                     <div className="text-center">
-                        <p className="text-slate-500 dark:text-slate-400 text-xs">
+                        <p className="text-muted text-sm">
                             Total Value: {currencies.reduce((sum, [_, amount]) => sum + amount, 0).toLocaleString()} units
                         </p>
                     </div>
diff --git a/components/sidebar/SideBar.tsx b/components/sidebar/SideBar.tsx
index 052a739..a82396e 100644
--- a/components/sidebar/SideBar.tsx
+++ b/components/sidebar/SideBar.tsx
@@ -16,7 +16,7 @@ export default function SideBar() {
     ];
 
     return (
-        <div className="fixed top-0 left-0 w-20 h-screen bg-white dark:bg-slate-900 p-4 shadow-lg flex flex-col items-center z-20 border-r border-slate-200 dark:border-slate-700">
+        <div className="fixed top-0 left-0 w-20 h-screen bg-background-primary p-4 shadow-lg flex flex-col items-center z-20">
             {/* Navigation Items */}
             <ul className="list-none p-0 m-0 flex flex-col gap-6">
                 {list.map((item) => {
@@ -24,11 +24,10 @@ export default function SideBar() {
                     return (
                         <li
                             key={item.url}
-                            className={`relative flex justify-center items-center cursor-pointer rounded-xl p-2 w-12 h-12 transition-all duration-300 ${
-                                isSelected 
-                                    ? 'bg-blue-100 dark:bg-blue-900 shadow-lg shadow-blue-500/20' 
+                            className={`relative flex justify-center items-center cursor-pointer rounded-xl p-2 w-12 h-12 transition-all duration-300 ${isSelected
+                                    ? 'bg-blue-100 dark:bg-blue-900 shadow-lg shadow-blue-500/20'
                                     : 'hover:bg-slate-100 dark:hover:bg-slate-800'
-                            }`}
+                                }`}
                         >
                             <Link href={item.url} className="flex justify-center items-center w-full h-full rounded-xl text-decoration-none text-inherit group">
                                 <Image
@@ -36,11 +35,10 @@ export default function SideBar() {
                                     alt={`${item.name} icon`}
                                     width={24}
                                     height={24}
-                                    className={`transition-all duration-300 ${
-                                        isSelected 
-                                            ? 'filter-none scale-110' 
+                                    className={`transition-all duration-300 ${isSelected
+                                            ? 'filter-none scale-110'
                                             : 'grayscale brightness-70 group-hover:filter-none group-hover:scale-110'
-                                    }`}
+                                        }`}
                                 />
                                 <span className="absolute top-1/2 left-full ml-4 transform -translate-y-1/2 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 px-3 py-2 rounded-lg whitespace-nowrap text-sm font-medium opacity-0 pointer-events-none transition-all duration-300 shadow-lg z-10 group-hover:opacity-100 group-hover:pointer-events-auto">
                                     {item.name}
diff --git a/package-lock.json b/package-lock.json
index bcd25d4..34db19a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@react-three/fiber": "^9.1.2",
         "@types/formidable": "^3.4.5",
         "@types/react-chartjs-2": "^2.5.7",
-        "chart.js": "^4.4.9",
+        "chart.js": "^4.5.0",
         "formidable": "^3.5.4",
         "gsap": "^3.13.0",
         "next": "15.3.3",
@@ -1162,9 +1162,9 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chart.js": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
-      "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
       "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
diff --git a/package.json b/package.json
index 421030d..a6d32b6 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@react-three/fiber": "^9.1.2",
     "@types/formidable": "^3.4.5",
     "@types/react-chartjs-2": "^2.5.7",
-    "chart.js": "^4.4.9",
+    "chart.js": "^4.5.0",
     "formidable": "^3.5.4",
     "gsap": "^3.13.0",
     "next": "15.3.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b1b50a3..ead1911 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -53,12 +53,23 @@ const config: Config = {
           primary: 'var(--color-background-primary)',
           secondary: 'var(--color-background-secondary)',
           tertiary: 'var(--color-background-tertiary)',
+          card: 'var(--color-background-card)',
+          muted: 'var(--color-background-muted)',
         },
         text: {
           primary: 'var(--color-text-primary)',
           secondary: 'var(--color-text-secondary)',
+          muted: 'var(--color-text-muted)',
           accent: 'var(--color-text-accent)',
         },
+        border: {
+          light: 'var(--color-border-light)',
+          medium: 'var(--color-border-medium)',
+          accent: 'var(--color-border-accent)',
+        },
+        success: 'var(--color-success)',
+        warning: 'var(--color-warning)',
+        error: 'var(--color-error)',
       },
     },
   },

From 75dd39808ee315eca729ec3eb0c7b2d266da4d77 Mon Sep 17 00:00:00 2001
From: sabarishr-dev <sabarish.r@vinsinfo.com>
Date: Mon, 29 Sep 2025 09:19:50 +0530
Subject: [PATCH 4/4] chore: upstream test

---
 app/leaderboard/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 94a0d5f..f9e397f 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -142,6 +142,7 @@ export default function LeaderBoard() {
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                 <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                     {/* Champion Showcase */}
+                    
                     <div className="lg:col-span-1">
                         <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl rounded-2xl p-8 shadow-2xl">
                             <div className="relative">