diff --git a/html/word-guesser/css/styles.css b/html/word-guesser/css/styles.css
index 5140a4e..c7d03a2 100644
--- a/html/word-guesser/css/styles.css
+++ b/html/word-guesser/css/styles.css
@@ -167,3 +167,90 @@
 .error-msg {
   color: #c62828;
 }
+
+/* Mobile Optimizations */
+@media (max-width: 600px) {
+  .form_container {
+    padding: 1rem;
+    margin: 0.5rem;
+  }
+
+  /* Shrink the tiles so long words don't wrap awkwardly */
+  #current_word {
+    gap: 4px;
+    padding: 0.5rem 0;
+  }
+
+  #current_word li {
+    width: 30px; /* Reduced from 45px */
+    height: 40px; /* Reduced from 60px */
+    font-size: 1.2rem; /* Reduced from 2rem */
+    border-width: 1px;
+  }
+
+  /* Stack the form fields vertically instead of 2-columns */
+  .formField {
+    grid-template-columns: 1fr;
+    gap: 5px;
+    text-align: center;
+  }
+
+  /* Make the Alphabet Grid look like a keypad */
+  .alphabet-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
+    gap: 5px;
+    margin-top: 1.5rem;
+  }
+
+  .letter-btn {
+    padding: 10px 0;
+    font-family: "Roboto Mono", monospace;
+    font-weight: bold;
+    background: var(--bg-tag);
+    border: 1px solid var(--border-medium);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .letter-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.alphabet-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    9,
+    1fr
+  ); /* 9 columns fits 26 letters in ~3 rows */
+  gap: 8px;
+  margin-top: 2rem;
+  padding: 10px;
+  background: var(--bg-tag);
+  border-radius: 8px;
+}
+
+.letter-btn {
+  background: #fff;
+  border: 1px solid var(--border-medium);
+  padding: 12px 0;
+  font-family: "Roboto Mono", monospace;
+  font-weight: bold;
+  font-size: 1.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.letter-btn:active {
+  background: var(--accent-primary);
+  color: #fff;
+}
+
+.letter-btn:disabled {
+  background: #e9ecef;
+  color: #adb5bd;
+  cursor: not-allowed;
+}
diff --git a/html/word-guesser/index.html b/html/word-guesser/index.html
index 19b57b2..eb40e3e 100644
--- a/html/word-guesser/index.html
+++ b/html/word-guesser/index.html
@@ -8,6 +8,8 @@
     <div class="formField word-display-field">
       <ul id="current_word"></ul>
     </div>
+    <div id="alphabet_container" class="alphabet-grid">
+      </div>
     <div class="formField">
       <p>Guess what the word is</p>
       <input
diff --git a/html/word-guesser/scripts/script.js b/html/word-guesser/scripts/script.js
index ddfb17f..f90de94 100644
--- a/html/word-guesser/scripts/script.js
+++ b/html/word-guesser/scripts/script.js
@@ -12,7 +12,25 @@
   }
   return indexes.length == 0 ? false : indexes;
 }
+function createAlphabetGrid(gameInstance) {
+  const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+  const container = document.createElement("div");
+  container.className = "alphabet-grid";
 
+  alphabet.forEach((char) => {
+    const btn = document.createElement("button");
+    btn.innerText = char.toUpperCase();
+    btn.className = "letter-btn";
+    btn.onclick = () => {
+      gameInstance.fields.guessLetter.value = char;
+      gameInstance.handleGuessedLetter();
+      btn.disabled = true; // Prevent double-clicking
+    };
+    container.appendChild(btn);
+  });
+
+  document.getElementById("gameForm").appendChild(container);
+}
 function updateLetters(chars) {
   const letters = document.createElement("ul");
   // create a DOM element for each letter
@@ -218,10 +236,27 @@
     this.gameForm.onsubmit = eventHandler;
     this.guessButton.onclick = eventHandler;
   }
+  renderAlphabet() {
+    const container = document.getElementById("alphabet_container");
+    container.innerHTML = ""; // Clear for new game
+
+    "abcdefghijklmnopqrstuvwxyz".split("").forEach((char) => {
+      const btn = document.createElement("button");
+      btn.innerText = char.toUpperCase();
+      btn.className = "letter-btn";
+      btn.onclick = () => {
+        this.guessLetter.value = char;
+        this.handleGuessedLetter();
+        btn.disabled = true;
+      };
+      container.appendChild(btn);
+    });
+  }
   reset() {
     reset(this);
   }
   newGame() {
+    this.renderAlphabet();
     this.reset();
     this.game = new WordGuesser(this.wordChoices);
   }