implement generic score viewer and import deduplication

10 files changed, 955 insertions, 197 deletions

diff --git a/backend/src/config/constants.ts b/backend/src/config/constants.ts
new file mode 100644
index 0000000..45d559e
--- /dev/null
+++ b/backend/src/config/constants.ts
@@ -0,0 +1 @@
+export const PAGE_SIZE = 25;
diff --git a/backend/src/index.ts b/backend/src/index.ts
index 4a63c41..ec38ee6 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -54,6 +54,7 @@ app.get('/api/session', userRoutes.handleGetCurrentSession);
 app.get('/api/supportedGames', gameRoutes.handleGetSupportedGames);
 
 app.post('/api/uploadScore', requireAuth, scoreRoutes.handleScoreUpload);
+app.get('/api/scores', scoreRoutes.handleGetScores);
 
 app.listen(port, () => {
   console.log(`Server listening on port ${port}`);
diff --git a/backend/src/routes/score.ts b/backend/src/routes/score.ts
index 9e9c597..4bbedb4 100644
--- a/backend/src/routes/score.ts
+++ b/backend/src/routes/score.ts
@@ -1,6 +1,6 @@
 import express from 'express';
 import { prisma } from '../config/db';
-import { timeStamp } from 'node:console';
+import { PAGE_SIZE } from '../config/constants';
 
 export const handleScoreUpload = async (req: express.Request, res: express.Response) => {
   try {
@@ -28,21 +28,46 @@ export const handleScoreUpload = async (req: express.Request, res: express.Respo
     const internalGameName = game.internalName;
     const scoresArray = Array.isArray(scores) ? scores : [scores];
 
-    // Create score records
-    const createdScores = await prisma.score.createMany({
-      data: scoresArray.map(scoreData => ({
-        gameInternalName: internalGameName,
-        userId: userId,
-        timestamp: scoreData.timestamp,
-        data: scoreData
-      }))
-    });
+    const scoresToCreate = [];
+    let skippedCount = 0;
+
+    for (const scoreData of scoresArray) {
+      // Check if exact same score data already exists
+      const existingScore = await prisma.score.findFirst({
+        where: {
+          gameInternalName: internalGameName,
+          userId: userId,
+          data: {
+            equals: scoreData
+          }
+        }
+      });
+
+      if (existingScore) {
+        skippedCount++;
+      } else {
+        scoresToCreate.push({
+          gameInternalName: internalGameName,
+          userId: userId,
+          timestamp: scoreData.timestamp,
+          data: scoreData
+        });
+      }
+    }
+
+    const createdScores = scoresToCreate.length > 0
+      ? await prisma.score.createMany({
+          data: scoresToCreate
+        })
+      : { count: 0 };
 
     res.status(200).json({
-      message: 'Score upload received successfully',
+      message: 'Score upload processed successfully',
       game: meta.game,
       service: meta.service,
-      scoreCount: createdScores.count
+      scoreCount: createdScores.count,
+      skippedCount: skippedCount,
+      totalProcessed: scoresArray.length
     });
 
   } catch (error) {
@@ -50,3 +75,49 @@ export const handleScoreUpload = async (req: express.Request, res: express.Respo
     res.status(500).json({ error: 'Internal server error. Unable to process score upload' });
   }
 }
+
+export const handleGetScores = async (req: express.Request, res: express.Response) => {
+  try {
+    const { userId, internalGameName, pageNum } = req.query;
+    if (!userId || !internalGameName || !pageNum) {
+      return res.status(400).json({ error: 'Missing required parameters' });
+    }
+    const pageNumber = parseInt(pageNum as string);
+    const gameInternalName = internalGameName as string;
+    const userIdNumber = parseInt(userId as string);
+
+    const num_pages = Math.ceil(await prisma.score.count({
+      where: {
+        gameInternalName: gameInternalName,
+        userId: userIdNumber
+      }
+    }) / PAGE_SIZE);
+
+    const scores = await prisma.score.findMany({
+      where: {
+        gameInternalName: gameInternalName,
+        userId: userIdNumber
+      },
+      orderBy: {
+        timestamp: 'desc'
+      },
+      skip: (pageNumber - 1) * PAGE_SIZE,
+      take: PAGE_SIZE
+    });
+
+    const safeScores = scores.map(score => ({
+      ...score,
+      timestamp: typeof score.timestamp === 'bigint'
+        ? Number(score.timestamp)
+        : score.timestamp
+    }));
+
+    res.status(200).json({
+      scores: safeScores,
+      num_pages
+    });
+  } catch (error) {
+    console.error('Failed to fetch scores:', error);
+    res.status(500).json({ error: 'Internal server error. Unable to process score upload' });
+  }
+};
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 65f3355..f6fffca 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,11 @@
-import { Routes, Route } from 'react-router';
-import { AuthProvider } from './contexts/AuthContext';
-import Landing from './pages/Landing';
-import Login from './pages/Login';
-import Register from './pages/Register';
-import Import from './pages/Import';
-import Home from './pages/Home';
+import { Routes, Route } from "react-router";
+import { AuthProvider } from "./contexts/AuthContext";
+import Landing from "./pages/Landing";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Import from "./pages/Import";
+import Home from "./pages/Home";
+import Score from "./pages/Score";
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
         <Route path="/register" element={<Register />} />
         <Route path="/import" element={<Import />} />
         <Route path="/home" element={<Home />} />
+        <Route path="/score" element={<Score />} />
       </Routes>
     </AuthProvider>
   );
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
new file mode 100644
index 0000000..7e111d0
--- /dev/null
+++ b/frontend/src/components/NavBar.tsx
@@ -0,0 +1,90 @@
+import { Link } from "react-router";
+
+export const NavBar = ({ currentPage, user, handleLogout }: {
+  currentPage: string;
+  user: { username: string };
+  handleLogout: () => void;
+}) => {
+  const getMenuOptions = () => {
+    switch (currentPage) {
+      case 'dashboard':
+        return (
+          <>
+            <Link
+              to="/import"
+              className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+            >
+              Import Data
+            </Link>
+          </>
+        );
+      case 'import':
+        return (
+          <>
+            <Link
+              to="/home"
+              className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+            >
+              Home
+            </Link>
+          </>
+        );
+      case 'score':
+        return (
+          <>
+            <Link
+              to="/home"
+              className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+            >
+              Home
+            </Link>
+            <Link
+              to="/import"
+              className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+            >
+              Import Data
+            </Link>
+          </>
+        );
+      default:
+        return (
+          <Link
+            to="/import"
+            className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+          >
+            Import Data
+          </Link>
+        );
+    }
+  };
+
+  return (
+    <nav className="border-b border-slate-800/50 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-gradient-to-r from-violet-600 to-violet-700 rounded-lg flex items-center justify-center shadow-lg">
+              <span className="text-white font-bold text-sm">M</span>
+            </div>
+            <span className="text-white font-semibold text-lg">Mirage</span>
+          </div>
+          <div className="flex items-center space-x-4">
+            {getMenuOptions()}
+            <span className="text-slate-300 text-sm">
+              Welcome back,{" "}
+              <span className="text-violet-400 font-medium">
+                {user.username}
+              </span>
+            </span>
+            <button
+              onClick={handleLogout}
+              className="text-slate-300 hover:text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-slate-800/50"
+            >
+              Sign Out
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
diff --git a/frontend/src/components/SessionExpiredPopup.tsx b/frontend/src/components/SessionExpiredPopup.tsx
new file mode 100644
index 0000000..625d97d
--- /dev/null
+++ b/frontend/src/components/SessionExpiredPopup.tsx
@@ -0,0 +1,32 @@
+import { Link } from "react-router";
+
+export default function SessionExpiredPopup() {
+  return (
+    <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+      <div className="text-center max-w-md mx-auto px-6">
+        <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
+          <h2 className="text-2xl font-bold text-white mb-4">
+            Session Expired
+          </h2>
+          <p className="text-slate-300 mb-6">
+            Please sign in to import your data.
+          </p>
+          <div className="space-y-3">
+            <Link
+              to="/login"
+              className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              to="/"
+              className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
+            >
+              Back to Home
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/tables/GenericScoreTable.tsx b/frontend/src/components/tables/GenericScoreTable.tsx
new file mode 100644
index 0000000..f82e1ff
--- /dev/null
+++ b/frontend/src/components/tables/GenericScoreTable.tsx
@@ -0,0 +1,421 @@
+import React from "react";
+
+interface Score {
+  [key: string]: any;
+  timestamp: string | number;
+}
+
+interface ScoreDisplayProps {
+  scores: Score[];
+  viewMode: "cards" | "table";
+  sortField: string;
+  sortDirection: "asc" | "desc";
+  onSort: (field: string) => void;
+}
+
+const ScoreDisplay: React.FC<ScoreDisplayProps> = ({
+  scores,
+  viewMode,
+  sortField,
+  sortDirection,
+  onSort,
+}) => {
+  // Key mappings for better display names. Hit or miss
+  const keyDisplayNames: Record<string, string> = {
+    title: "Title",
+    artist: "Artist",
+    score: "Score",
+    difficulty: "Difficulty",
+    lamp: "Lamp",
+    diff_lamp: "Lamp",
+    timestamp: "Date",
+    judgements: "Judgements",
+    maxCombo: "Max Combo",
+    perfect: "Perfect",
+    great: "Great",
+    good: "Good",
+    bad: "Bad",
+    miss: "Miss",
+    rating: "Rating",
+    percent: "Percent",
+    chart: "Chart",
+    song: "Song",
+    ranking: "Ranking",
+    combo: "Combo",
+    grade: "Grade",
+    level: "Level",
+    bpm: "BPM",
+    notes: "Notes",
+    duration: "Duration",
+    playcount: "Play Count",
+    date: "Date",
+    time: "Time",
+  };
+
+  const skipKeys = [
+    "id",
+    "internalname",
+    "internalName",
+    "gameInternalName",
+    "userId",
+  ];
+  const primaryKeys = ["title", "artist", "song"];
+  const mainStatKeys = [
+    "score",
+    "difficulty",
+    "lamp",
+    "diff_lamp",
+    "percent",
+    "rating",
+    "grade",
+  ];
+  const expandableKeys = ["judgements", "optional"];
+
+  const formatValue = (value: any, key: string): string => {
+    if (value === null || value === undefined) return "N/A";
+
+    // Handle timestamps
+    if (key === "timestamp" || key === "date") {
+      const date = new Date(typeof value === "number" ? value : value);
+      return date.toLocaleDateString();
+    }
+
+    if (typeof value === "number") {
+      if (key === "score" || key === "maxCombo" || key === "combo") {
+        return value.toLocaleString();
+      }
+      return value.toString();
+    }
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+
+    if (Array.isArray(value)) {
+      return value.join(", ");
+    }
+
+    return String(value);
+  };
+
+  const getDisplayName = (key: string): string => {
+    return keyDisplayNames[key] || key.charAt(0).toUpperCase() + key.slice(1);
+  };
+
+  const renderValue = (
+    value: any,
+    key: string,
+    compact: boolean = false,
+  ): JSX.Element => {
+    if (value === null || value === undefined)
+      return <span className="text-slate-500">N/A</span>;
+
+    // Handle judgements specially
+    if (key === "judgements" && typeof value === "object") {
+      const judgementEntries = Object.entries(value);
+
+      if (compact) {
+        return (
+          <div className="text-xs text-slate-300 space-y-1">
+            {judgementEntries.map(([jKey, jValue]) => (
+              <div key={jKey} className="flex justify-between">
+                <span className="text-slate-400 capitalize">
+                  {getDisplayName(jKey)}:
+                </span>
+                <span className="font-medium">{formatValue(jValue, jKey)}</span>
+              </div>
+            ))}
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex flex-wrap gap-1 text-xs">
+          {judgementEntries.map(([jKey, jValue]) => (
+            <span
+              key={jKey}
+              className="bg-slate-700/50 text-slate-200 px-2 py-1 rounded-full border border-slate-600"
+            >
+              <span className="capitalize">{getDisplayName(jKey)}</span>:{" "}
+              {formatValue(jValue, jKey)}
+            </span>
+          ))}
+        </div>
+      );
+    }
+
+    if (typeof value === "object" && !Array.isArray(value)) {
+      return (
+        <div className="space-y-1">
+          {Object.entries(value).map(([subKey, subValue]) => (
+            <div key={subKey} className="flex justify-between text-xs">
+              <span className="text-slate-400">{getDisplayName(subKey)}:</span>
+              <span className="font-medium">
+                {formatValue(subValue, subKey)}
+              </span>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return <span>{formatValue(value, key)}</span>;
+  };
+
+  const getScoreEntries = (score: Score) => {
+    const entries = Object.entries(score).filter(
+      ([key]) => !skipKeys.includes(key),
+    );
+
+    const primary = entries.filter(([key]) => primaryKeys.includes(key));
+    const mainStats = entries.filter(([key]) => mainStatKeys.includes(key));
+    const expandable = entries.filter(([key]) => expandableKeys.includes(key));
+    const others = entries.filter(
+      ([key]) =>
+        !primaryKeys.includes(key) &&
+        !mainStatKeys.includes(key) &&
+        !expandableKeys.includes(key) &&
+        key !== "timestamp",
+    );
+
+    return {
+      primary,
+      mainStats,
+      expandable,
+      others,
+      timestamp: score.timestamp,
+    };
+  };
+
+  const SortIcon = ({ field }: { field: string }) => {
+    if (sortField !== field) {
+      return <span className="text-slate-500">↕</span>;
+    }
+    return sortDirection === "asc" ? (
+      <span className="text-violet-400">↑</span>
+    ) : (
+      <span className="text-violet-400">↓</span>
+    );
+  };
+
+  const sortedScores = [...scores].sort((a, b) => {
+    const aVal = a[sortField];
+    const bVal = b[sortField];
+
+    if (aVal === undefined || aVal === null) return 1;
+    if (bVal === undefined || bVal === null) return -1;
+
+    let comparison = 0;
+
+    if (typeof aVal === "string" && typeof bVal === "string") {
+      comparison = aVal.localeCompare(bVal);
+    } else if (typeof aVal === "number" && typeof bVal === "number") {
+      comparison = aVal - bVal;
+    } else if (aVal instanceof Date && bVal instanceof Date) {
+      comparison = aVal.getTime() - bVal.getTime();
+    } else {
+      comparison = String(aVal).localeCompare(String(bVal));
+    }
+
+    return sortDirection === "asc" ? comparison : -comparison;
+  });
+
+  // Get all possible keys for table headers
+  const allKeys = Array.from(
+    new Set(scores.flatMap((score) => Object.keys(score))),
+  ).filter((key) => !skipKeys.includes(key));
+
+  // Prioritize important keys for table display
+  const tableKeys = [
+    "title",
+    "song",
+    "artist",
+    "score",
+    "difficulty",
+    "lamp",
+    "diff_lamp",
+    "rating",
+    "percent",
+    "grade",
+    "judgements",
+    "maxCombo",
+    "combo",
+    "timestamp",
+  ].filter((key) => allKeys.includes(key));
+
+  if (scores.length === 0) {
+    return (
+      <div className="text-center py-16">
+        <div className="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-6">
+          <span className="text-slate-400 text-2xl">🎵</span>
+        </div>
+        <h3 className="text-xl font-semibold text-slate-300 mb-2">
+          No scores found
+        </h3>
+        <p className="text-slate-500">Import some score data to get started!</p>
+      </div>
+    );
+  }
+
+  if (viewMode === "cards") {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+        {sortedScores.map((score, index) => {
+          const { primary, mainStats, expandable, others, timestamp } =
+            getScoreEntries(score);
+
+          return (
+            <div
+              key={score.id || index}
+              className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/50 rounded-xl p-6 hover:border-violet-500/30 transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/10"
+            >
+              {/* Primary Info */}
+              <div className="flex items-start justify-between mb-4">
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-lg font-semibold text-white mb-1 break-words leading-tight">
+                    {score.title || score.song || "Unknown Title"}
+                  </h3>
+                  {score.artist && (
+                    <p className="text-slate-400 text-sm break-words leading-tight">
+                      {score.artist}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Main Stats */}
+              {mainStats.length > 0 && (
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  {mainStats.slice(0, 4).map(([key, value]) => (
+                    <div key={key} className="bg-slate-800/50 rounded-lg p-3">
+                      <p className="text-slate-400 text-xs uppercase tracking-wide mb-1">
+                        {getDisplayName(key)}
+                      </p>
+                      <p className="text-white font-semibold text-lg">
+                        {renderValue(value, key)}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Expandable sections (judgements, optional) */}
+              {expandable.map(([key, value]) => (
+                <div key={key} className="mb-4">
+                  <p className="text-slate-400 text-xs uppercase tracking-wide mb-2">
+                    {getDisplayName(key)}
+                  </p>
+                  {renderValue(value, key)}
+                </div>
+              ))}
+
+              {/* Other fields */}
+              {others.length > 0 && (
+                <div className="mb-4">
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    {others.map(([key, value]) => (
+                      <div key={key} className="flex justify-between">
+                        <span className="text-slate-400">
+                          {getDisplayName(key)}:
+                        </span>
+                        <span className="text-white font-medium">
+                          {renderValue(value, key)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Timestamp */}
+              <div className="pt-4 border-t border-slate-800/50">
+                <p className="text-slate-500 text-xs">
+                  {new Date(
+                    typeof timestamp === "number" ? timestamp : timestamp,
+                  ).toLocaleDateString()}{" "}
+                  •{" "}
+                  {new Date(
+                    typeof timestamp === "number" ? timestamp : timestamp,
+                  ).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800/50 rounded-xl overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm min-w-[1000px]">
+          <thead className="bg-slate-800/50 border-b border-slate-700/50">
+            <tr>
+              {tableKeys.map((key) => (
+                <th
+                  key={key}
+                  className="px-4 py-3 text-left text-slate-300 font-medium"
+                >
+                  {key === "judgements" ? (
+                    <span>{getDisplayName(key)}</span>
+                  ) : (
+                    <button
+                      onClick={() => onSort(key)}
+                      className="flex items-center space-x-2 hover:text-white transition-colors"
+                    >
+                      <span>{getDisplayName(key)}</span>
+                      <SortIcon field={key} />
+                    </button>
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-800/50">
+            {sortedScores.map((score, index) => (
+              <tr
+                key={score.id || index}
+                className="hover:bg-slate-800/30 transition-colors"
+              >
+                {tableKeys.map((key) => (
+                  <td key={key} className="px-4 py-3">
+                    {key === "lamp" || key === "diff_lamp" ? (
+                      <div className="flex items-center space-x-2">
+                        <span className="inline-block bg-slate-800/50 text-slate-200 px-2 py-1 rounded text-xs border border-slate-600">
+                          {score[key] || "No Clear"}
+                        </span>
+                      </div>
+                    ) : key === "judgements" ? (
+                      <div className="w-32">
+                        {renderValue(score[key], key, true)}
+                      </div>
+                    ) : key === "timestamp" ? (
+                      <span className="text-slate-400 text-xs">
+                        {new Date(
+                          typeof score[key] === "number"
+                            ? score[key]
+                            : score[key],
+                        ).toLocaleDateString()}
+                      </span>
+                    ) : (
+                      <span
+                        className={`${key === "title" || key === "song" ? "text-white font-medium" : key === "score" ? "text-white font-medium" : "text-slate-300"}`}
+                      >
+                        {renderValue(score[key], key)}
+                      </span>
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default ScoreDisplay;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 0ee6862..0aba7f0 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,9 +1,11 @@
-import { Link, useNavigate } from 'react-router';
-import { useAuth } from '../contexts/AuthContext';
-import type { SupportedGame } from '../types/game';
-import { useState, useEffect } from 'react';
+import { useNavigate } from "react-router";
+import { NavBar } from "../components/NavBar";
+import { useAuth } from "../contexts/AuthContext";
+import type { SupportedGame } from "../types/game";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import { useState, useEffect } from "react";
 
-import dancerushImage from '../assets/games/dancerush.webp';
+import dancerushImage from "../assets/games/dancerush.webp";
 
 const Home = () => {
   const { user, isLoading, logout } = useAuth();
@@ -14,36 +16,38 @@ const Home = () => {
   const handleLogout = async () => {
     try {
       await logout();
-      navigate('/');
+      navigate("/");
     } catch (error) {
-      console.error('Logout failed:', error);
-      alert('Network error during logout. Please try again.');
+      console.error("Logout failed:", error);
+      alert("Network error during logout. Please try again.");
     }
   };
 
   const getGameImage = (internalName: string) => {
-    switch(internalName){
+    switch (internalName) {
       case "dancerush": {
         return dancerushImage;
       }
-       default: {
-         return null
+      default: {
+        return null;
       }
     }
-  }
+  };
 
   useEffect(() => {
     const fetchSupportedGames = async () => {
       try {
-        const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+        const response = await fetch(
+          import.meta.env.VITE_API_URL + "/supportedGames",
+        );
         if (!response.ok) {
-          throw new Error('Failed to fetch supported games');
+          throw new Error("Failed to fetch supported games");
         }
         const data = await response.json();
         setSupportedGames(data);
       } catch (error) {
-        console.error('Failed to fetch supported games:', error);
-        alert('Failed to load supported games. Please refresh the page.');
+        console.error("Failed to fetch supported games:", error);
+        alert("Failed to load supported games. Please refresh the page.");
       } finally {
         setGamesLoading(false);
       }
@@ -63,69 +67,21 @@ const Home = () => {
   }
 
   if (!user) {
-    return (
-      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
-        <div className="text-center max-w-md mx-auto px-6">
-          <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
-            <h2 className="text-2xl font-bold text-white mb-4">Session Expired</h2>
-            <p className="text-slate-300 mb-6">Please sign in to access your dashboard.</p>
-            <div className="space-y-3">
-              <Link
-                to="/login"
-                className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
-              >
-                Sign In
-              </Link>
-              <Link
-                to="/"
-                className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
-              >
-                Back to Home
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <SessionExpiredPopup />;
   }
 
   return (
     <div className="min-h-screen bg-slate-950">
-      {/* Navigation */}
-      <nav className="border-b border-slate-800 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16">
-            <div className="flex items-center space-x-3">
-              <div className="w-8 h-8 bg-violet-600 rounded-md flex items-center justify-center">
-                <span className="text-white font-bold text-sm">M</span>
-              </div>
-              <span className="text-white font-semibold text-lg">Mirage</span>
-            </div>
-            <div className="flex items-center space-x-4">
-              <Link
-                to="/import"
-                className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              >
-                Import Data
-              </Link>
-              <span className="text-slate-300 text-sm">Welcome back, {user.username}</span>
-              <button
-                onClick={handleLogout}
-                className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-      </nav>
+      <NavBar user={user} handleLogout={handleLogout} currentPage="import"/>
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white mb-2">Dashboard</h1>
-          <p className="text-slate-400">Track your rhythm game progress and performance</p>
+          <p className="text-slate-400">
+            Track your rhythm game progress and performance
+          </p>
         </div>
 
         {/* Supported Games */}
@@ -134,34 +90,48 @@ const Home = () => {
             {supportedGames.map((game) => (
               <div
                 key={game.internalName}
-                className="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-300 group"
+                className="bg-slate-900 rounded-xl border border-slate-700 overflow-hidden hover:border-violet-500 hover:shadow-lg hover:shadow-violet-500/10 transition-all duration-300 group cursor-pointer"
+                onClick={() => navigate(`/score?game=${game.internalName}`)}
               >
                 <div className="aspect-video bg-slate-800 relative overflow-hidden">
                   {getGameImage(game.internalName) !== null ? (
                     <img
-                    src={getGameImage(game.internalName) || undefined}
+                      src={getGameImage(game.internalName) || undefined}
                       alt={game.formattedName}
                       className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                     />
                   ) : (
                     <div className="w-full h-full flex items-center justify-center">
                       <div className="text-slate-600">
-                        <svg className="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        <svg
+                          className="w-16 h-16"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={1.5}
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
                         </svg>
                       </div>
                     </div>
                   )}
                 </div>
                 <div className="p-6">
-                  <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-violet-400 transition-colors">{game.formattedName}</h3>
-                  <p className="text-slate-400 text-sm leading-relaxed">{game.description}</p>
+                  <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-violet-400 transition-colors">
+                    {game.formattedName}
+                  </h3>
+                  <p className="text-slate-400 text-sm leading-relaxed">
+                    {game.description}
+                  </p>
                 </div>
               </div>
             ))}
           </div>
         </div>
-
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Import.tsx b/frontend/src/pages/Import.tsx
index efd1d03..fe2501f 100644
--- a/frontend/src/pages/Import.tsx
+++ b/frontend/src/pages/Import.tsx
@@ -1,40 +1,42 @@
-import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router';
-import { useAuth } from '../contexts/AuthContext';
-import JsonUploadModal from '../components/modals/JsonUploadModal';
-import EamusementModal from '../components/modals/EamusementModal';
-import type { SupportedGame } from '../types/game';
-import { uploadScore } from '../utils/scoreUpload';
-
-
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
+import { useAuth } from "../contexts/AuthContext";
+import JsonUploadModal from "../components/modals/JsonUploadModal";
+import EamusementModal from "../components/modals/EamusementModal";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import type { SupportedGame } from "../types/game";
+import { uploadScore } from "../utils/scoreUpload";
+import { NavBar } from "../components/NavBar";
 
 const Import = () => {
   const { user, isLoading, logout } = useAuth();
   const navigate = useNavigate();
-  const [selectedGame, setSelectedGame] = useState('');
+  const [selectedGame, setSelectedGame] = useState("");
   const [isJsonModalOpen, setIsJsonModalOpen] = useState(false);
   const [isEamusementModalOpen, setIsEamusementModalOpen] = useState(false);
   const [supportedGames, setSupportedGames] = useState<SupportedGame[]>([]);
   const [gamesLoading, setGamesLoading] = useState(true);
   const [uploadStatus, setUploadStatus] = useState<{
-    type: 'success' | 'error' | null;
+    type: "success" | "error" | null;
     message: string;
-  }>({ type: null, message: '' });
+  }>({ type: null, message: "" });
 
   useEffect(() => {
     const fetchSupportedGames = async () => {
       try {
-        const response = await fetch(import.meta.env.VITE_API_URL+'/supportedGames');
+        const response = await fetch(
+          import.meta.env.VITE_API_URL + "/supportedGames",
+        );
         if (!response.ok) {
-          throw new Error('Failed to fetch supported games');
+          throw new Error("Failed to fetch supported games");
         }
         const data = await response.json();
         setSupportedGames(data);
       } catch (error) {
-        console.error('Failed to fetch supported games:', error);
+        console.error("Failed to fetch supported games:", error);
         setUploadStatus({
-          type: 'error',
-          message: 'Failed to load supported games. Please refresh the page.'
+          type: "error",
+          message: "Failed to load supported games. Please refresh the page.",
         });
       } finally {
         setGamesLoading(false);
@@ -47,10 +49,10 @@ const Import = () => {
   const handleLogout = async () => {
     try {
       await logout();
-      navigate('/');
+      navigate("/");
     } catch (error) {
-      console.error('Logout failed:', error);
-      alert('Network error during logout. Please try again.');
+      console.error("Logout failed:", error);
+      alert("Network error during logout. Please try again.");
     }
   };
 
@@ -58,30 +60,33 @@ const Import = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleJsonUpload = async (data: any) => {
     try {
-      console.log('Uploading data for game:', selectedGame, data);
+      console.log("Uploading data for game:", selectedGame, data);
 
       const result = await uploadScore({
         meta: {
           game: data.meta.game,
           service: data.meta.service,
-          playtype: data.meta.playtype
+          playtype: data.meta.playtype,
         },
-        scores: data.scores
+        scores: data.scores,
       });
 
       setUploadStatus({
-        type: 'success',
-        message: `Successfully imported ${result.scoreCount} score(s) for ${supportedGames.find(g => g.internalName === data.meta.game)?.formattedName || data.meta.game}`
+        type: "success",
+        message: `Successfully imported ${result.scoreCount} score(s) for ${supportedGames.find((g) => g.internalName === data.meta.game)?.formattedName || data.meta.game}`,
       });
 
       setTimeout(() => {
-        setUploadStatus({ type: null, message: '' });
+        setUploadStatus({ type: null, message: "" });
       }, 5000);
     } catch (error) {
-      console.error('Upload failed:', error);
+      console.error("Upload failed:", error);
       setUploadStatus({
-        type: 'error',
-        message: error instanceof Error ? error.message : 'Failed to import data. Please try again.'
+        type: "error",
+        message:
+          error instanceof Error
+            ? error.message
+            : "Failed to import data. Please try again.",
       });
     }
   };
@@ -89,8 +94,18 @@ const Import = () => {
   const JsonUploadCard = () => (
     <div className="bg-slate-800 rounded-lg border border-slate-700 p-6 hover:border-violet-500 transition-colors">
       <div className="w-12 h-12 bg-violet-600/20 rounded-lg flex items-center justify-center mb-4">
-        <svg className="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+        <svg
+          className="w-6 h-6 text-violet-400"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+          />
         </svg>
       </div>
       <h4 className="text-white font-semibold mb-2">Batch-Manual Upload</h4>
@@ -111,11 +126,23 @@ const Import = () => {
       {/* e-amusement Card */}
       <div className="bg-slate-800 rounded-lg border border-slate-700 p-6 hover:border-violet-500 transition-colors">
         <div className="w-12 h-12 bg-blue-600/20 rounded-lg flex items-center justify-center mb-4">
-          <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+          <svg
+            className="w-6 h-6 text-blue-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
           </svg>
         </div>
-        <h4 className="text-white font-semibold mb-2">e-amusement Play History</h4>
+        <h4 className="text-white font-semibold mb-2">
+          e-amusement Play History
+        </h4>
         <p className="text-slate-400 text-sm mb-4">
           Import via scraping your playdata from KONAMI e-amusement
         </p>
@@ -131,12 +158,12 @@ const Import = () => {
 
   const renderImportOptions = () => {
     switch (selectedGame) {
-      case 'dancerush':
+      case "dancerush":
         return (
           <>
             {/* JSON Upload Card */}
             <JsonUploadCard />
-            <EamusementScrapeUploadCard/>
+            <EamusementScrapeUploadCard />
           </>
         );
 
@@ -157,83 +184,40 @@ const Import = () => {
   }
 
   if (!user) {
-    return (
-      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
-        <div className="text-center max-w-md mx-auto px-6">
-          <div className="bg-slate-900 rounded-lg p-8 border border-slate-700">
-            <h2 className="text-2xl font-bold text-white mb-4">Session Expired</h2>
-            <p className="text-slate-300 mb-6">Please sign in to import your data.</p>
-            <div className="space-y-3">
-              <Link
-                to="/login"
-                className="block w-full bg-violet-600 hover:bg-violet-700 text-white py-3 rounded-md font-medium transition-colors"
-              >
-                Sign In
-              </Link>
-              <Link
-                to="/"
-                className="block w-full border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white py-3 rounded-md font-medium transition-colors"
-              >
-                Back to Home
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <SessionExpiredPopup />;
   }
 
   return (
     <div className="min-h-screen bg-slate-950">
       {/* Navigation */}
-      <nav className="border-b border-slate-800 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16">
-            <div className="flex items-center space-x-3">
-              <Link to="/home" className="flex items-center space-x-3 group">
-                <div className="w-8 h-8 bg-violet-600 rounded-md flex items-center justify-center group-hover:bg-violet-700 transition-colors">
-                  <span className="text-white font-bold text-sm">M</span>
-                </div>
-                <span className="text-white font-semibold text-lg">Mirage</span>
-              </Link>
-            </div>
-            <div className="flex items-center space-x-4">
-              <Link
-                to="/home"
-                className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              >
-                Dashboard
-              </Link>
-              <span className="text-slate-300 text-sm">Welcome back, {user.username}</span>
-              <button
-                onClick={handleLogout}
-                className="text-slate-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-      </nav>
+      <NavBar user={user} handleLogout={handleLogout} currentPage="import"/>
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-3xl font-bold text-white mb-2">Import Data</h1>
-          <p className="text-slate-400">Import your game scores and progress from various sources</p>
+          <p className="text-slate-400">
+            Import your game scores and progress from various sources
+          </p>
         </div>
 
         {/* Status Message */}
         {uploadStatus.type && (
-          <div className={`mb-6 rounded-md p-4 ${
-            uploadStatus.type === 'success'
-              ? 'bg-green-500/10 border border-green-500/20'
-              : 'bg-red-500/10 border border-red-500/20'
-          }`}>
-            <p className={`text-sm ${
-              uploadStatus.type === 'success' ? 'text-green-400' : 'text-red-400'
-            }`}>
+          <div
+            className={`mb-6 rounded-md p-4 ${
+              uploadStatus.type === "success"
+                ? "bg-green-500/10 border border-green-500/20"
+                : "bg-red-500/10 border border-red-500/20"
+            }`}
+          >
+            <p
+              className={`text-sm ${
+                uploadStatus.type === "success"
+                  ? "text-green-400"
+                  : "text-red-400"
+              }`}
+            >
               {uploadStatus.message}
             </p>
           </div>
@@ -262,7 +246,11 @@ const Import = () => {
               >
                 <option value="">Select a game</option>
                 {supportedGames.map((game) => (
-                  <option key={game.internalName} value={game.internalName} title={game.description}>
+                  <option
+                    key={game.internalName}
+                    value={game.internalName}
+                    title={game.description}
+                  >
                     {game.formattedName}
                   </option>
                 ))}
@@ -273,7 +261,9 @@ const Import = () => {
           {/* Import Options */}
           {selectedGame && (
             <div className="space-y-6 mt-8">
-              <h3 className="text-lg font-semibold text-white">Import Options</h3>
+              <h3 className="text-lg font-semibold text-white">
+                Import Options
+              </h3>
 
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 {renderImportOptions()}
@@ -288,14 +278,20 @@ const Import = () => {
         isOpen={isJsonModalOpen}
         onClose={() => setIsJsonModalOpen(false)}
         onUpload={handleJsonUpload}
-        game={supportedGames.find(g => g.internalName === selectedGame)?.formattedName || ''}
+        game={
+          supportedGames.find((g) => g.internalName === selectedGame)
+            ?.formattedName || ""
+        }
       />
 
       {/* Eamusement Modal */}
       <EamusementModal
         isOpen={isEamusementModalOpen}
         onClose={() => setIsEamusementModalOpen(false)}
-        game={supportedGames.find(g => g.internalName === selectedGame) || undefined}
+        game={
+          supportedGames.find((g) => g.internalName === selectedGame) ||
+          undefined
+        }
       />
     </div>
   );
diff --git a/frontend/src/pages/Score.tsx b/frontend/src/pages/Score.tsx
new file mode 100644
index 0000000..e9feecd
--- /dev/null
+++ b/frontend/src/pages/Score.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useState, useCallback } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { useNavigate } from "react-router";
+import { NavBar } from "../components/NavBar";
+import SessionExpiredPopup from "../components/SessionExpiredPopup";
+import ScoreDisplay from "../components/tables/GenericScoreTable";
+
+type SortField = string;
+type SortDirection = "asc" | "desc";
+
+const Score = () => {
+  const { user, isLoading, logout } = useAuth();
+  const navigate = useNavigate();
+  const [scores, setScores] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [numPages, setNumPages] = useState(1);
+  const [viewMode, setViewMode] = useState<"cards" | "table">("cards");
+  const [sortField, setSortField] = useState<SortField>("timestamp");
+  const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
+
+  const gameName =
+    new URLSearchParams(window.location.search).get("game") || "dancerush";
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate("/");
+    } catch (error) {
+      console.error("Logout failed:", error);
+      alert("Network error during logout. Please try again.");
+    }
+  };
+
+  const flattenScoreData = (score: any) => {
+    const flat = { ...score, ...score.data };
+    delete flat.data;
+    delete flat.gameInternalName;
+    return flat;
+  };
+
+  const fetchScores = useCallback(
+    async (pageNum: number) => {
+      if (!user) return;
+
+      setLoading(true);
+      try {
+        const url = new URL(import.meta.env.VITE_API_URL + "/scores");
+        url.searchParams.append("userId", user.id);
+        url.searchParams.append("internalGameName", gameName);
+        url.searchParams.append("pageNum", pageNum.toString());
+
+        const response = await fetch(url.toString());
+        if (!response.ok) throw new Error("Failed to fetch scores");
+        const data = await response.json();
+        const flattened = data.scores.map(flattenScoreData);
+        setScores(flattened);
+        setNumPages(data.num_pages);
+        setCurrentPage(pageNum);
+      } catch (error) {
+        console.error("Failed to load scores:", error);
+        alert("Failed to load scores. Please refresh the page.");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [user],
+  );
+
+  useEffect(() => {
+    if (user) fetchScores(1);
+  }, [user, fetchScores]);
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("desc");
+    }
+  };
+
+  if (!user) {
+    return <SessionExpiredPopup />;
+  }
+
+  if (isLoading || loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center">
+        <div className="text-center">
+          <div className="w-12 h-12 border-4 border-violet-500 border-t-transparent rounded-full animate-spin mx-auto mb-6"></div>
+          <p className="text-slate-300 text-lg">Loading your scores...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
+      <NavBar user={user} handleLogout={handleLogout} currentPage="score"/>
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="mb-12">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-violet-400 to-violet-600 bg-clip-text text-transparent">
+              Your Scores
+            </h1>
+            <div className="flex items-center space-x-2 bg-slate-900/50 backdrop-blur-sm rounded-xl p-1 border border-slate-800/50">
+              <button
+                onClick={() => setViewMode("cards")}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  viewMode === "cards"
+                    ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+                    : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+                }`}
+              >
+                Cards
+              </button>
+              <button
+                onClick={() => setViewMode("table")}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                  viewMode === "table"
+                    ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+                    : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+                }`}
+              >
+                Table
+              </button>
+            </div>
+          </div>
+          <p className="text-slate-400 text-lg">
+            Displaying {scores.length} scores • Page {currentPage} of {numPages}
+          </p>
+        </div>
+
+        {(() => {
+          switch (viewMode) {
+            default:
+              return (
+                <ScoreDisplay
+                  scores={scores}
+                  viewMode={viewMode}
+                  sortField={sortField}
+                  sortDirection={sortDirection}
+                  onSort={handleSort}
+                />
+              );
+          }
+        })()}
+
+        {numPages > 1 && (
+          <div className="flex justify-center mt-12">
+            <div className="flex space-x-2 bg-slate-900/50 backdrop-blur-sm rounded-xl p-2 border border-slate-800/50">
+              {[...Array(numPages)].map((_, i) => (
+                <button
+                  key={i}
+                  onClick={() => fetchScores(i + 1)}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                    currentPage === i + 1
+                      ? "bg-violet-600 text-white shadow-lg shadow-violet-500/25"
+                      : "text-slate-300 hover:text-white hover:bg-slate-800/50"
+                  }`}
+                >
+                  {i + 1}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};
+
+export default Score;