diff --git a/secret/endlessRunner/index.html b/secret/endlessRunner/index.html
index b03b530..c2feb26 100644
--- a/secret/endlessRunner/index.html
+++ b/secret/endlessRunner/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Endless runner</title>
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -23,5 +23,11 @@
     />
     <link rel="manifest" href="../../favicon_io/site.webmanifest" />
   </head>
-  <body></body>
+  <body>
+    <div class="game-container">
+      <canvas id="gameCanvas"></canvas>
+      <button id="restartBtn" onclick="restartGame()">Restart</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
 </html>
diff --git a/secret/endlessRunner/script.js b/secret/endlessRunner/script.js
index e69de29..c1f200f 100644
--- a/secret/endlessRunner/script.js
+++ b/secret/endlessRunner/script.js
@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function EndlessRunner() {
+    const canvasRef = useRef(null);
+    const [running, setRunning] = useState(true);
+    const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
+    const gravity = 0.5;
+    let obstacles = [];
+    let score = 0;
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        canvas.width = window.innerWidth;
+        canvas.height = 300;
+
+        function update() {
+            if (!running) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Player physics
+            player.dy += gravity;
+            player.y += player.dy;
+            if (player.y > 150) {
+                player.y = 150;
+                player.dy = 0;
+            }
+
+            // Draw player
+            ctx.fillStyle = "blue";
+            ctx.fillRect(player.x, player.y, player.width, player.height);
+
+            // Obstacles
+            if (Math.random() < 0.02) {
+                obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
+            }
+            obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 }));
+            obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);
+
+            obstacles.forEach(obstacle => {
+                ctx.fillStyle = "red";
+                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+
+                // Collision detection
+                if (
+                    player.x < obstacle.x + obstacle.width &&
+                    player.x + player.width > obstacle.x &&
+                    player.y < obstacle.y + obstacle.height &&
+                    player.y + player.height > obstacle.y
+                ) {
+                    setRunning(false);
+                }
+            });
+
+            // Score
+            score++;
+            ctx.fillStyle = "black";
+            ctx.fillText("Score: " + score, 10, 20);
+
+            requestAnimationFrame(update);
+        }
+
+        update();
+    }, [running]);
+
+    function jump() {
+        if (player.y >= 150) {
+            player.dy = -10;
+        }
+    }
+
+    return (
+        <div className="flex flex-col items-center">
+            <canvas ref={canvasRef} className="border" onClick={jump}></canvas>
+            {!running && <button onClick={() => window.location.reload()} className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Restart</button>}
+        </div>
+    );
+}
diff --git a/secret/endlessRunner/styles.css b/secret/endlessRunner/styles.css
index e69de29..b8850fc 100644
--- a/secret/endlessRunner/styles.css
+++ b/secret/endlessRunner/styles.css
@@ -0,0 +1,34 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f4f4f4;
+}
+
+.game-container {
+  position: relative;
+  text-align: center;
+}
+
+canvas {
+  border: 2px solid black;
+  background-color: white;
+  display: block;
+}
+
+#restartBtn {
+  margin-top: 10px;
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: none;
+}
+
+#restartBtn:hover {
+  background-color: #0056b3;
+}
