diff --git a/images/png/game_overlay.png b/images/png/game_overlay.png
new file mode 100644
index 0000000..7a969da
Binary files /dev/null and b/images/png/game_overlay.png differ
diff --git a/public/global.css b/public/global.css
index 0eabebf..fed0084 100644
--- a/public/global.css
+++ b/public/global.css
@@ -11,6 +11,8 @@ body {
 	box-sizing: border-box;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	position: relative;
+	font-family: 'Times New Roman W', 'Times New Roman', Times, serif;
+	user-select: none;
 }
 
 @font-face {
diff --git a/public/sprite/game_overlay.webp b/public/sprite/game_overlay.webp
new file mode 100644
index 0000000..1281682
Binary files /dev/null and b/public/sprite/game_overlay.webp differ
diff --git a/src/App.svelte b/src/App.svelte
index f64e02a..435df5e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,6 +4,7 @@
 	import Overlay from "./pages/overlay.svelte";
 	import { characters } from "./stores/characters.js";
 	import { dialog } from "./stores/dialog.js";
+import Game from "./pages/game.svelte";
 
 	var page = "game";
 	var current = localStorage.getItem("dialog-page") || 0;
@@ -45,6 +46,8 @@
 	<title>Heaventaker</title>
 </svelte:head>
 
+<Game />
+
 <Overlay active={gameActive}>
 	<Dialog bind:current {characters} bind:page />
 </Overlay>
diff --git a/src/pages/game.svelte b/src/pages/game.svelte
new file mode 100644
index 0000000..10d4d92
--- /dev/null
+++ b/src/pages/game.svelte
@@ -0,0 +1,7 @@
+<script>
+import GameOverlay from "./gameOverlay.svelte";
+
+</script>
+
+
+<GameOverlay steps={11} chapter={"I"} />
\ No newline at end of file
diff --git a/src/pages/gameOverlay.svelte b/src/pages/gameOverlay.svelte
new file mode 100644
index 0000000..6b9a506
--- /dev/null
+++ b/src/pages/gameOverlay.svelte
@@ -0,0 +1,45 @@
+<script>
+    export var steps;
+    export var chapter;
+</script>
+
+<div class="overlay">
+    <img src="/sprite/game_overlay.webp" alt="" class="left" draggable={false}>
+    <div class="left-info">{steps}</div>
+    <img src="/sprite/game_overlay.webp" alt="" class="right" draggable={false}>
+    <div class="right-info">{chapter}</div>
+</div>
+
+<style>
+    .left {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        transform: scaleX(-1);
+    }
+    .left-info {
+        position: fixed;
+        top: 72vh;
+        font-size: 13vh;
+        left: 16vh;
+        color: white;
+        width: 24vh;
+        text-align: center;
+    }
+    .right {
+        position: fixed;
+        top: 0;
+        right: 0;
+        height: 100vh;
+    }
+    .right-info {
+        position: fixed;
+        top: 72vh;
+        font-size: 13vh;
+        right: 16vh;
+        color: white;
+        width: 24vh;
+        text-align: center;
+    }
+</style>
\ No newline at end of file