diff --git a/src/main.ts b/src/main.ts
index 17c8053..84570e6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -143,11 +143,11 @@ function render(): void {
   ` : '';
 
   app.innerHTML = `
+    <button class="info-btn" id="infoBtn" title="How to play">?</button>
     <div class="game-container">
       <header class="header">
         <h1>Pokemon Type Quiz</h1>
         <div class="header-actions">
-          <button class="info-btn" id="infoBtn" title="How to play">?</button>
           <div class="stats">
             <span class="stat">Streak: ${state.streak}</span>
             <span class="stat">Accuracy: ${stats.accuracy.toFixed(1)}%</span>
diff --git a/src/style.css b/src/style.css
index fd7ffef..724aba0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -665,17 +665,21 @@ body {
 
 /* Info Button */
 .info-btn {
-  width: 32px;
-  height: 32px;
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
   background: var(--bg-accent);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   color: var(--text-primary);
   font-family: 'Outfit', sans-serif;
-  font-size: 1rem;
+  font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
+  z-index: 100;
 }
 
 .info-btn:hover {
@@ -685,9 +689,11 @@ body {
 
 .header-actions {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  gap: 12px;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
 }
 
 /* Info Screen */