diff --git a/src/components/App.jsx b/src/components/App.jsx
index 067b2f1..e409c43 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -75,7 +75,7 @@ export default function App() {
       updatedAt: new Date().toISOString()
     };
     setGames(g => [newGame, ...g]);
-    setScreen('game-list');
+    return newGame.id;
   }
 
   // Score update
@@ -156,6 +156,11 @@ export default function App() {
                 onCreateGame={handleCreateGame}
                 playerNameHistory={playerNameHistory}
                 onCancel={showGameList}
+                onGameCreated={id => {
+                  setCurrentGameId(id);
+                  setScreen('game-detail');
+                }}
+                initialValues={games[0]}
               />
             </div>
           </div>
diff --git a/src/components/NewGame.jsx b/src/components/NewGame.jsx
index e3bf7f4..bbc87a2 100644
--- a/src/components/NewGame.jsx
+++ b/src/components/NewGame.jsx
@@ -1,34 +1,57 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
+import { useState, useEffect } from 'preact/hooks';
 import styles from './NewGame.module.css';
 
-export default function NewGame({ onCreateGame, playerNameHistory, onCancel }) {
-  const [player1, setPlayer1] = useState('');
-  const [player2, setPlayer2] = useState('');
-  const [player3, setPlayer3] = useState('');
-  const [gameType, setGameType] = useState('8-Ball');
-  const [raceTo, setRaceTo] = useState('');
+export default function NewGame({ onCreateGame, playerNameHistory, onCancel, onGameCreated, initialValues }) {
+  const [player1, setPlayer1] = useState(initialValues?.player1 || '');
+  const [player2, setPlayer2] = useState(initialValues?.player2 || '');
+  const [player3, setPlayer3] = useState(initialValues?.player3 || '');
+  const [gameType, setGameType] = useState(initialValues?.gameType || '8-Ball');
+  const [raceTo, setRaceTo] = useState(initialValues?.raceTo ? String(initialValues.raceTo) : '');
   const [error, setError] = useState(null);
 
+  useEffect(() => {
+    setPlayer1(initialValues?.player1 || '');
+    setPlayer2(initialValues?.player2 || '');
+    setPlayer3(initialValues?.player3 || '');
+    setGameType(initialValues?.gameType || '8-Ball');
+    setRaceTo(initialValues?.raceTo ? String(initialValues.raceTo) : '');
+    setError(null);
+  }, [initialValues]);
+
   function handleSubmit(e) {
     e.preventDefault();
     if (!player1.trim() || !player2.trim()) {
       setError('Bitte Namen für beide Spieler eingeben');
       return;
     }
-    onCreateGame({
+    const id = onCreateGame({
       player1: player1.trim(),
       player2: player2.trim(),
       player3: player3.trim() || null,
       gameType,
       raceTo: raceTo ? parseInt(raceTo) : null
     });
-    setPlayer1(''); setPlayer2(''); setPlayer3(''); setGameType('8-Ball'); setRaceTo(''); setError(null);
+    if (onGameCreated && id) {
+      onGameCreated(id);
+    }
+  }
+
+  function handleClear() {
+    setPlayer1('');
+    setPlayer2('');
+    setPlayer3('');
+    setGameType('8-Ball');
+    setRaceTo('');
+    setError(null);
   }
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit}>
       <div className={styles['screen-title']}>Neues Spiel</div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
+        <button type="button" className={styles['btn']} onClick={handleClear}>Felder leeren</button>
+      </div>
       <div className={styles['player-inputs']}>
         <div className={styles['player-input']}>
           <label>Spieler 1</label>