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..83a509c 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;
@@ -18,6 +17,7 @@ interface Game {
     details: string;
     category: string[];
     publisher: string;
+    type: string;
 }
 
 export default function GameDetailPage() {
@@ -51,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);
@@ -70,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-background-primary transition-colors duration-300">
+                {/* Header Skeleton */}
+                <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>
+                    </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-background-primary flex items-center justify-center transition-colors duration-300">
+                <div className="text-center">
+                    <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-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"
+                    >
+                        Back to Arena
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
     return (
-        <div className={styles.page}>
+        <div className="min-h-screen bg-background-primary transition-colors duration-300">
+            {/* Popup */}
             {popup && (
                 <Popup
                     message="Your daily playtime has expired. Please come back tomorrow!"
@@ -83,80 +133,140 @@ 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}
-                            />
-                        ) : (
-                            <video
-                                src={game.video!}
-                                className={styles.previewVideo}
-                                autoPlay
-                                playsInline
-                                controls
-                            />
-                        )}
+            {/* Header */}
+            <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-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-white/20 text-white backdrop-blur-sm'
+                                : 'bg-white/20 text-white backdrop-blur-sm'
+                                }`}>
+                                {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-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
+                                        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-white mb-3">Description</h2>
+                                 <p className="text-gray-300 leading-relaxed">{game.description}</p>
+                             </div>
+                        </div>
                     </div>
 
-                    <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>
+                    {/* Game Details Sidebar */}
+                    <div className="space-y-6">
+
+                        {/* Game Details */}
+                        <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-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-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-gray-700/50 backdrop-blur-sm text-gray-300 px-3 py-1 rounded-full text-sm font-medium shadow-sm"
+                                            >
+                                                {cat}
+                                            </span>
+                                        ))}
+                                    </div>
+                                </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>
         </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..2ee4a22 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,180 @@ 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-background-primary transition-colors duration-300">
+                {/* Header */}
+                <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-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-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>
+                                    <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-background-primary transition-colors duration-300">
+            {/* Header */}
+            <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-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-white/20 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
+                                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 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 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 => (
+                                <option key={category} value={category}>{category}</option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
 
-                            <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);
-                                                }}
-                                            />
-                                        ))}
+                {/* Games Grid */}
+                {filteredGames.length === 0 ? (
+                    <div className="text-center py-16">
+                        <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'
+                                ? '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;
+
+                            return (
+                                <div
+                                    key={game.id}
+                                    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 */}
+                                    <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>
+                                        )}
+                                    </div>
+
+                                    {/* Game Info */}
+                                    <div className="p-4">
+                                        <h3 className="font-semibold text-white mb-2 line-clamp-1">
+                                            {game.title}
+                                        </h3>
+                                        <p className="text-gray-300 text-sm mb-3 line-clamp-2">
+                                            {game.description}
+                                        </p>
                                     </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 770ca30..37978f4 100644
--- a/app/arena/play-game/page.tsx
+++ b/app/arena/play-game/page.tsx
@@ -1,24 +1,74 @@
 "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="w-full h-screen bg-white rounded-lg flex items-center justify-center">
+                Loading game...
+            </div>
+        );
+    }
+
+    if (!game) {
+        return (
+            <div className="w-full h-screen bg-white rounded-lg flex items-center justify-center">
+                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/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..1376e1d 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,168 @@ 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 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="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>
-                </a>
+                </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-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" 
+                                        className="w-32 h-32 mx-auto"
+                                    />
+                                </div>
+                            </div>
+                        </a>
+                        
+                        <div className="mt-8">
+                            <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-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" />
+                                </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="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-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>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Tech Stack */}
+                        <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="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 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 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="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>
+                                
+                                <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>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/contribute/publish/page.tsx b/app/contribute/publish/page.tsx
index 96e15ae..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';
@@ -8,6 +7,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,284 +25,610 @@ 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);
     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() !== '';
     };
 
     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) => {
-        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");
-        formData.append('hasStreamingAssets', hasStreamingAssets ? 'true' : 'false');
-
-        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);
         }
+    };
 
-        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;
 
-        if (force) {
-            formData.append('force', 'true');
-        }
+        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);
+                });
+            }
 
-        const res = await fetch('/api/publish', {
-            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 Unity WebGL Build</h1>
-            <h6 className={styles.uploader}>Publisher : {session.user?.name}</h6>
-
-            {!uploaded && (
-                <>
-                    {step === 1 && (
-                        <>
-                            <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 ?"
-                                />
-                            </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)
-                                    }
+                                    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>
+                            </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 && (
-                        <>
-                            <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> */}
-
-                            {/* {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 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>
-                            )} */}
 
+                                <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
+                                    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"
+                                >
+                                    Next Step →
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {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}
+                                        />
+                                        <File
+                                            title="WASM File (.wasm)"
+                                            accept=".wasm"
+                                            onChange={setWasmFile}
+                                        />
+                                        <File
+                                            title="Framework File (.js)"
+                                            accept=".js"
+                                            onChange={setFrameworkFile}
+                                        />
+                                        <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>
+                                    )}
 
+                                    {/* File List Preview */}
+                                    {htmlFiles && htmlFiles.length > 0 && (
+                                        <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 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>
+                                    )}
+
+                                    {/* 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={() => {
-                                        handleUpload();
-                                    }}
-                                    disabled={!canSubmit()}
+                                    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"
                                 >
-                                    Upload
+                                    ← 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>
                     )}
-                </>
-            )}
 
-            {uploaded && <p>Unity Build Uploaded! You can now preview the game.</p>}
+                    {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"
+                                >
+                                    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>
+            )}
         </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..20c8043 100644
--- a/app/coupon/redeem/page.tsx
+++ b/app/coupon/redeem/page.tsx
@@ -1,12 +1,11 @@
 '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';
-import styles from './coupon.module.css';
 
 export default function ScratchToRedeem() {
     const { data: session, status } = useSession();
@@ -26,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;
 
@@ -50,6 +59,22 @@ export default function ScratchToRedeem() {
             noise.data[i + 3] = 255;
         }
         ctx.putImageData(noise, 0, 0);
+        };
+
+        // 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) => {
@@ -70,8 +95,8 @@ export default function ScratchToRedeem() {
         const rect = canvas.getBoundingClientRect();
 
         if ('touches' in e && e.touches.length > 0) {
-            return {
-                x: e.touches[0].clientX - rect.left,
+        return {
+            x: e.touches[0].clientX - rect.left,
                 y: e.touches[0].clientY - rect.top,
             };
         } else if ('clientX' in e) {
@@ -95,7 +120,7 @@ export default function ScratchToRedeem() {
 
         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, 50, 0, Math.PI * 2, false); // brush radius 50px
         ctx.fill();
     };
 
@@ -105,125 +130,256 @@ export default function ScratchToRedeem() {
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
 
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const pixels = imageData.data;
-        let transparentPixels = 0;
+        // 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;
 
-        for (let i = 3; i < pixels.length; i += 4) {
-            if (pixels[i] === 0) transparentPixels++;
+            // Auto redeem if scratched more than 50%
+            if (scratchedPercent > 50 && !redeemed) {
+                redeemCoupon();
+            }
+        } catch (error) {
+            console.error('Error checking scratch percent:', error);
         }
+    };
 
-        const scratchedPercent = (transparentPixels / (canvas.width * canvas.height)) * 100;
+    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;
+    };
 
-        // Auto redeem if scratched more than 50%
-        if (scratchedPercent > 50 && !redeemed) {
-            redeemCoupon();
+    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;
         }
     };
 
-    const redeemCoupon = async () => {
-        setRedeemed(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 };
+        }
+    };
 
-        // Clear scratch overlay fully
+    const clearScratchOverlay = () => {
         const canvas = canvasRef.current;
         if (canvas) {
             const ctx = canvas.getContext('2d');
-            if (ctx) {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            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 {
+            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;
         }
+    };
+
+    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 sessionTicket = sessionStorage.getItem('playfabSessionTicket');
         const titleId = process.env.NEXT_PUBLIC_PLAYFAB_TITLE_ID;
-
-        if (!sessionTicket || !titleId) {
-            showPopup('Missing session ticket or title ID', 'error');
+        if (!titleId) {
+            showPopup('Title ID not configured', 'error');
             setLoading(false);
             return;
         }
 
         try {
-            const userDataRes = await getUserDataFromPlayFab(sessionTicket, titleId);
+            const sessionTicket = await getSessionTicket();
+            const userDataRes = await getUserDataWithRetry(sessionTicket, titleId);
+            
             const coupons = userDataRes?.data?.Data?.Coupons?.Value
                 ? JSON.parse(userDataRes.data.Data.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) });
+            if (!coupons.includes(couponCode)) {
+                console.log('Coupon not found in user inventory:', couponCode);
+                showPopup('Invalid coupon code or already used.', 'error');
+                return;
+            }
 
-                    showPopup('Coupon verified! Please check your mail!', 'success');
+            console.log('Coupon verified in PlayFab, sending mail...');
+            const result = await sendMailAndUpdatePlayFab(sessionTicket, coupons, couponCode, titleId);
+            
+            if (result.success) {
+                showPopup(result.message!, 'success');
+            } else {
+                const sessionRefreshed = await refreshUserSession();
+                if (sessionRefreshed) {
+                    await handleRetryAfterSessionRefresh(coupons, couponCode, titleId);
                 } else {
-                    const errorText = await mailRes.text();
-                    showPopup('Coupon valid, but failed to send mail. ' + errorText, 'error');
+                    showPopup('Session refresh failed. Please try logging in again.', 'error');
                 }
-            } else {
-                showPopup('Invalid coupon code.', 'error');
             }
-        } catch (err) {
-            showPopup('Error verifying coupon.', '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' = 'success') => {
         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-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>
+        );
+    }
 
-            <p className={styles.infoText}>(Scratch to Redeem)</p>
-
-
-            {loading && <p className={styles.redeemingText}>Redeeming...</p>}
+    if (!session) {
+        return <SignIn />;
+    }
 
+    return (
+        <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}
+                >
+                    <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"
+                            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>
+                            </div>
+                    )}
+                        </div>
+                    </div>
+
+            {/* Info Text */}
+            <p className="text-secondary text-sm text-center mt-4">
+                (Scratch to Redeem)
+            </p>
+
+            {/* 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>
+                            )}
+
+            {/* Popup */}
             {popup && (
                 <Popup
                     message={popup.message}
@@ -232,6 +388,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..c64f9d4 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-background-primary flex items-center justify-center">
+                <div className="text-center">
+                    <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>
+        );
     }
 
     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,180 @@ 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-background-primary transition-colors duration-300">
             {popup && (
                 <Popup
                     message={popup.message}
@@ -460,297 +487,95 @@ 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>
+                <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-6">
+                {error && (
+                    <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-sm text-text-primary">Error: {error}</span>
+                        </div>
+                    </div>
+                )}
+
+
+                <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}
+                    />
+                    {/* Playtime Chart */}
+                    <PlaytimeChart
+                        playtimeSeconds={playtimeSeconds}
+                        totalSeconds={totalSeconds}
+                        loading={loading}
+                    />
+
+                    {/* Virtual Currencies */}
+                    <VirtualCurrencies
+                        virtualCurrency={virtualCurrency}
+                        loading={loading}
+                    />
+                </div>
+
+                {/* Content Grid */}
+                <div className="mt-4">
+
+                    {/* Golden Tickets */}
+                    <GoldenTickets
+                        coupons={(() => {
+                            try {
+                                return userData.Coupons ? JSON.parse(userData.Coupons) : [];
+                            } catch {
+                                return [];
+                            }
+                        })()}
+                        loading={loading}
+                        onRedeem={handleRedeemCoupon}
+                    />
+
+                </div>
+
+                <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>
     );
-}
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index b49cb36..0078e6a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,23 +1,199 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  /* Light Theme Colors */
+  --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: #334155;
+  --color-text-muted: #64748b;
+  --color-text-accent: #475569;
+
+  /* Borders and Shadows */
+  --color-border-light: #e2e8f0;
+  --color-border-medium: #cbd5e1;
+  --color-border-accent: #94a3b8;
+
+  /* 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;
 }
 
+/* Dark Theme Colors */
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --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;
@@ -25,11 +201,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 +220,113 @@ a {
   text-decoration: none;
 }
 
+/* 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-accent-200);
+  color: var(--color-text-primary);
+}
+
+::-moz-selection {
+  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) {
-  html {
-    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 e41d62f..05969f9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,21 +32,20 @@ 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 min-h-screen bg-background-primary transition-colors duration-300">
                 <SideBar />
-                <main style={{ flex: 1, paddingLeft: '5rem' }}>
+                <main className="flex-1 pl-20 min-h-screen">
                   {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..f9e397f 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -2,13 +2,13 @@
 
 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,
     playFabLoginWithAzureAD,
 } from '@/lib/playfab/playfab';
 import dynamic from 'next/dynamic';
+import LeaderboardChart from '@/components/dashboard/LeaderboardChart';
 
 const Model = dynamic(() => import('@/components/Model'), {
     ssr: false,
@@ -97,8 +97,19 @@ export default function LeaderBoard() {
             (b[sortFieldMap[sortBy]] as number) - (a[sortFieldMap[sortBy]] as number)
     );
 
+
     if (status === 'loading') {
-        return <div className={styles.page}>Loading session...</div>;
+        return (
+            <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>
+        );
     }
 
     if (!session) {
@@ -106,61 +117,129 @@ 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 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="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 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 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>
+                    </div>
                 </div>
+            </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="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">
+                                
+                                {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 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>
+                                )}
+                            </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>
+                    {/* Leaderboard Chart */}
+                    <div className="lg:col-span-2">
+                        {/* 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>
+                                <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'
+                                            }`}
+                                        >
+                                            <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>
 
-                        {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} />
-                                </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>
+                        {/* 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>
+                        ) : (
+                            <LeaderboardChart players={sortedLeaders} sortBy={sortBy} />
+                        )}
                     </div>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 9584e42..182ad5a 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-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-secondary 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-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-secondary font-medium">Redirecting to Dashboard...</span>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 4152c79..f2ff74d 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,24 @@ 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-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>
+        );
     }
 
     if (!session) {
@@ -50,186 +65,264 @@ 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-slate-900 via-slate-800 to-slate-900 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+            {/* Header */}
+            <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>
 
-            <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={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>
+            <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="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 shadow-lg"
+                                    />
+                                    <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-white mt-4">
+                                    {session.user?.name ?? 'Anonymous'}
+                                </h2>
+                                <p className="text-slate-300 mt-1">
+                                    {session.user?.email ?? 'No email'}
+                                </p>
+                                <button 
+                                    onClick={() => signOut()}
+                                    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>
                             </div>
-                        )}
-                    </div>
-                </div>
-
-                {feedback && <p style={{ marginTop: '1rem', color: '#3b82f6' }}>{feedback}</p>}
-            </div>
+                        </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>
+                        {/* Add Friends Section */}
+                        <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
-                                            onClick={() => window.location.href = `/arena/${game.id}`}
-                                            className={styles.viewButton}
+                                            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'
+                                            }`}
                                         >
-                                            View
+                                            {m.charAt(0).toUpperCase() + m.slice(1)}
                                         </button>
-                                        <button
-                                            onClick={() => handleDelete(game.id!)}
-                                            className={styles.deleteButton}
+                                    ))}
+                                </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 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={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"
+                                    >
+                                        Send Friend Request
+                                    </button>
+                                    
+                                    {/* Help Button */}
+                                    <div className="relative">
+                                        <button 
+                                            onClick={() => setShowHelp(!showHelp)}
+                                            className="text-slate-400 hover:text-white text-sm transition-colors duration-200"
                                         >
-                                            Delete
+                                            Need help?
                                         </button>
-                                    </td>
+                                        
+                                        {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>
+                            </div>
+                        </div>
+                    </div>
 
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                )}
-            </div>
-            <br />
-            <br />
+                    {/* My Games */}
+                    <div className="lg:col-span-2">
+                        <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>
+                                    <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>
 
+                                {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>
+                                            </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>
+            </div>
         </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..9249810
--- /dev/null
+++ b/components/dashboard/GoldenTickets.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+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 router = useRouter();
+
+    const handleRedeem = async (coupon: string) => {
+        // 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-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-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-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-3">
+                    {coupons.slice(0, 5).map((coupon, index) => (
+                        <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">
+                                    <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-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-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>
+                            </div>
+                        </div>
+                    ))}
+                    {coupons.length > 5 && (
+                        <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>
+                    )}
+                </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..fa54343
--- /dev/null
+++ b/components/dashboard/HeroSection.tsx
@@ -0,0 +1,41 @@
+'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">
+            <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-3xl md:text-4xl font-bold text-text-primary mb-4">
+                        Welcome to the Arena
+                    </h1>
+                    <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-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-text-muted p-2 rounded hover:text-text-secondary cursor-pointer transition-colors"
+                                aria-label="Copy PlayFab ID"
+                            >
+                                <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-success text-sm 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..60fdd0c
--- /dev/null
+++ b/components/dashboard/Inventory.tsx
@@ -0,0 +1,63 @@
+'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-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-muted rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold">BAG</span>
+                    </div>
+                    <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-3">
+                    {inventoryItems.slice(0, 3).map((item) => (
+                        <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">
+                                    <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-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-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>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
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
new file mode 100644
index 0000000..27238bc
--- /dev/null
+++ b/components/dashboard/PlayerStatsChart.tsx
@@ -0,0 +1,173 @@
+'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)'],
+                borderWidth: 0,
+                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-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>
+        );
+    }
+
+    const hasData = gamesPlayed > 0 || trophies > 0;
+
+    return (
+        <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-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-40 mb-4">
+                        <Bar data={chartData} options={chartOptions} />
+                    </div>
+
+                    {/* Statistics Summary Cards */}
+                    <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-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-4 pt-4">
+                        <div className="flex justify-between items-center">
+                            <span className="text-muted text-sm">Total Achievement Score:</span>
+                            <span className="font-bold text-primary text-base">
+                                {(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..69ab66f
--- /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-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>
+            {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-column items-center">
+                    <div className="w-32 h-32 mb-4">
+                        <Doughnut data={playtimeData} options={options} />
+                    </div>
+                    <div className="lg:ml-6 space-y-3">
+                        <div className="space-y-1">
+                            <div className="flex items-center space-x-3">
+                                <div className="w-4 h-4 bg-slate-500 rounded-full"></div>
+                                <div>
+                                    <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-3">
+                                <div className="w-4 h-4 bg-slate-300 rounded-full"></div>
+                                <div>
+                                    <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-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>
+                </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..baab8d3
--- /dev/null
+++ b/components/dashboard/Store.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import { ListSkeleton } from '@/components/ui/SkeletonLoader';
+import { useState } from 'react';
+
+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;
+}
+
+
+
+export default function Store({ storeItems, loading, virtualCurrency, onPurchase }: StoreProps) {
+    // Get all available currencies
+    const currencies = Object.entries(virtualCurrency);
+
+    // State for selected currency for each item
+    const [selectedCurrencies, setSelectedCurrencies] = useState<{ [itemId: string]: string }>({});
+
+    return (
+        <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-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-primary font-semibold text-lg">Arena Store</h3>
+                        <p className="text-secondary text-sm">Purchase Items</p>
+                    </div>
+                </div>
+                <span className="inline-block px-3 py-2 bg-muted text-secondary text-sm font-semibold rounded-full">
+                    {storeItems.length} Items
+                </span>
+            </div>
+
+
+
+            {loading ? (
+                <ListSkeleton count={3} />
+            ) : storeItems.length === 0 ? (
+                <div className="text-center py-6">
+                    <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-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-5">
+                    {storeItems.slice(0, 4).map((item) => {
+                        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-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-4">
+                                    <div className="flex items-center space-x-3">
+                                        <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-primary font-semibold text-base">{item.DisplayName || item.ItemId}</h4>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* 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 canAffordCurrency = playerAmount >= price;
+                                            const isSelected = selectedCurrency === currency;
+
+                                            return (
+                                                <label
+                                                    key={currency}
+                                                    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'
+                                                        }`}
+                                                >
+                                                    <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>
+                                </div>
+
+                                {/* Purchase Button */}
+                                <button
+                                    onClick={() => onPurchase && onPurchase(item, selectedCurrency)}
+                                    disabled={!canAfford || !onPurchase}
+                                    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'
+                                        }`}
+                                >
+                                    <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-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>
+                    )}
+                </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..c8c171b
--- /dev/null
+++ b/components/dashboard/VirtualCurrencies.tsx
@@ -0,0 +1,83 @@
+'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': 'ArenaCoins', // Arena Coins
+        'PR': 'Prize Money', // Prize Money
+        'default': 'COIN'
+    };
+
+    return labelMap[currencyCode] || labelMap['default'];
+};
+
+
+export default function VirtualCurrencies({ virtualCurrency, loading }: VirtualCurrenciesProps) {
+    const currencies = Object.entries(virtualCurrency);
+
+    return (
+        <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-muted rounded-xl flex items-center justify-center mx-auto mb-3">
+                        <span className="text-lg font-bold">COINS</span>
+                    </div>
+                    <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-3">
+                    {currencies.map(([currencyCode, amount], index) => {
+                        const label = getCurrencyLabel(currencyCode);
+
+                        return (
+                            <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-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-primary font-medium text-base">{label}</p>
+                                        </div>
+                                    </div>
+                                    <div className="text-right">
+                                        <p className="text-primary font-bold text-xl leading-none">{amount.toLocaleString()} ₹</p>
+                                        <p className="text-muted text-sm">balance</p>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {currencies.length > 0 && (
+                <div className="mt-6 pt-4">
+                    <div className="text-center">
+                        <p className="text-muted text-sm">
+                            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
new file mode 100644
index 0000000..7496269
--- /dev/null
+++ b/components/html/html-game-view.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { AddArenaCoins, AddGamePlayedCount, AddTrophies } from '@/lib/playfab/playfab';
+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 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>
+    );
+};
+
+export default HTMLGameView;
\ 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..a82396e 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,33 @@ 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-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) => {
                     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/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/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 c1e9888..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",
@@ -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,484 +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/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",
-      "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": {
@@ -1047,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",
@@ -1075,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",
@@ -1123,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",
@@ -1155,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",
@@ -1210,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",
@@ -1308,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,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"
@@ -1349,6 +1173,44 @@
         "pnpm": ">=8"
       }
     },
+    "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",
@@ -1392,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"
       },
@@ -1405,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",
@@ -1429,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",
@@ -1443,15 +1315,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",
@@ -1484,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",
@@ -1567,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",
@@ -1584,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",
@@ -1606,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",
@@ -1656,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",
@@ -1668,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",
@@ -1724,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",
@@ -1773,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",
@@ -1783,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",
@@ -1799,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",
@@ -1962,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",
@@ -1979,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",
@@ -2000,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",
@@ -2299,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",
@@ -2337,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",
@@ -2352,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",
@@ -2364,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",
@@ -2506,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",
@@ -2729,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",
@@ -2762,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",
@@ -2820,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",
@@ -2839,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",
@@ -2880,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",
@@ -2988,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",
@@ -3089,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",
@@ -3103,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",
@@ -3112,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",
@@ -3122,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",
@@ -3139,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",
@@ -3463,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",
@@ -3478,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"
       },
@@ -3519,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",
@@ -3529,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": {
@@ -3605,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",
@@ -3643,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",
@@ -3673,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",
@@ -3868,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",
@@ -3880,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..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",
@@ -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/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
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..ead1911
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,79 @@
+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)',
+          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)',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config