diff --git a/frontend/app/puzzles/roadmap/app.tsx b/frontend/app/puzzles/roadmap/app.tsx
new file mode 100644
index 00000000..8193ebde
--- /dev/null
+++ b/frontend/app/puzzles/roadmap/app.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import PuzzleTimeline from '@/components/puzzles/roadmap/PuzzleTimeline';
+import { puzzleRoadmap } from '@/components/puzzles/roadmap/puzzleRoadmapData';
+
+export default function PuzzleRoadmapPage() {
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-[#0f0c29] via-[#302b63] to-[#24243e] text-white py-12 px-4 md:px-16">
+      <h1 className="text-4xl md:text-5xl font-bold text-center mb-12">
+        Puzzle Roadmap
+      </h1>
+      <PuzzleTimeline puzzles={puzzleRoadmap} />
+    </main>
+  );
+}
diff --git a/frontend/components/puzzles/roadmap/PuzzleCard.tsx b/frontend/components/puzzles/roadmap/PuzzleCard.tsx
new file mode 100644
index 00000000..836b34a8
--- /dev/null
+++ b/frontend/components/puzzles/roadmap/PuzzleCard.tsx
@@ -0,0 +1,33 @@
+import Image from 'next/image';
+import { format } from 'date-fns';
+import { Puzzle } from './PuzzleTimeline';
+
+type Props = {
+  puzzle: Puzzle;
+};
+
+export default function PuzzleCard({ puzzle }: Props) {
+  const { title, description, imageUrl, releaseDate } = puzzle;
+  const isUpcoming = new Date(releaseDate) > new Date();
+
+  return (
+    <div className="bg-white text-gray-900 rounded-2xl shadow-lg w-[280px] md:w-[320px] p-4 flex flex-col items-center hover:scale-105 transition-transform duration-300">
+      <div className="relative w-full h-40 mb-4 rounded-xl overflow-hidden">
+        <Image
+          src={imageUrl}
+          alt={title}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-xl"
+        />
+      </div>
+      <h2 className="text-xl font-semibold mb-1 text-center">{title}</h2>
+      <p className="text-sm text-center mb-2">{description}</p>
+      <div className="text-xs text-gray-600">
+        {isUpcoming
+          ? `Coming on ${format(new Date(releaseDate), 'PPP')}`
+          : 'Released'}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/puzzles/roadmap/PuzzleTimeline.tsx b/frontend/components/puzzles/roadmap/PuzzleTimeline.tsx
new file mode 100644
index 00000000..0d0cb636
--- /dev/null
+++ b/frontend/components/puzzles/roadmap/PuzzleTimeline.tsx
@@ -0,0 +1,27 @@
+import PuzzleCard from './PuzzleCard';
+
+export type Puzzle = {
+  id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  releaseDate: string;
+};
+
+type Props = {
+  puzzles: Puzzle[];
+};
+
+export default function PuzzleTimeline({ puzzles }: Props) {
+  return (
+    <section className="overflow-x-auto">
+      <div className="flex gap-6 snap-x snap-mandatory overflow-x-scroll pb-4 px-2 md:px-0">
+        {puzzles.map((puzzle) => (
+          <div key={puzzle.id} className="snap-start shrink-0">
+            <PuzzleCard puzzle={puzzle} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/puzzles/roadmap/puzzleRoadmapData.ts b/frontend/components/puzzles/roadmap/puzzleRoadmapData.ts
new file mode 100644
index 00000000..2c801ea4
--- /dev/null
+++ b/frontend/components/puzzles/roadmap/puzzleRoadmapData.ts
@@ -0,0 +1,23 @@
+export const puzzleRoadmap = [
+  {
+    id: '1',
+    title: 'Genesis Puzzle',
+    description: 'Start your journey into puzzles.',
+    imageUrl: '/images/genesis.png',
+    releaseDate: '2025-08-01',
+  },
+  {
+    id: '2',
+    title: 'Cipher Cave',
+    description: 'Decrypt hidden secrets in this thrilling challenge.',
+    imageUrl: '/images/cipher.png',
+    releaseDate: '2025-08-15',
+  },
+  {
+    id: '3',
+    title: 'Maze of Mind',
+    description: 'A psychological twist awaits.',
+    imageUrl: '/images/maze.png',
+    releaseDate: '2025-09-01',
+  },
+];
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 15859123..03c3aeac 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,12 +17,13 @@
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "formik": "^2.4.6",
         "get-starknet": "^3.3.3",
         "lucide-react": "^0.474.0",
-        "next": "14.2.23",
-        "react": "^18",
-        "react-dom": "^18",
+        "next": "^14.2.23",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "starknet": "^6.23.1",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
@@ -2370,6 +2371,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 58827cde..d27c45ec 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,12 +18,13 @@
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "formik": "^2.4.6",
     "get-starknet": "^3.3.3",
     "lucide-react": "^0.474.0",
-    "next": "14.2.23",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "^14.2.23",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "starknet": "^6.23.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",