diff --git a/game.js b/game.js
index 650b432..af2f24e 100644
--- a/game.js
+++ b/game.js
@@ -7,13 +7,16 @@ const word = wordlist[Math.floor(Math.random()*wordlist.length)];
 var gameCompleted = null
 
 // HTML items
-const gameContainer = document.getElementById("game_container")
 const body = document.getElementsByTagName("body")[0]
 const endScreen = document.getElementById("end_screen")
 const endScreenGuesses = document.getElementById("end_screen_guesses")
 const endScreenMessage = document.getElementById("end_screen_message")
 const endScreenTime = document.getElementById("end_screen_time")
+const gameContainer = document.getElementById("game_container")
 const gridItems = []
+const kbLetters = Array.from(document.getElementsByClassName("kb_letter")).filter(kbl => kbl.id === '')
+const kbEnter = document.getElementById("kb_enter")
+const kbBackspace = document.getElementById("kb_backspace")
 
 // helper functions
 const gridItemId = (row, column) => "grid_item_" + row + "_" + column
@@ -168,17 +171,33 @@ function endGame(won) {
         endScreenMessage.innerHTML = "damn. better luck nex time"
     }
 
-    endScreenGuesses.innerHTML = `guesses: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
+    endScreenGuesses.innerHTML = `guesses used: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
     endScreen.style.display = "";
 }
 
 
+function runClickAnimation(el) {
+    console.log(el)
+    el.classList.add("clicked")
+    setTimeout(() => el.classList.remove("clicked"), 500)
+}
 // create event listeners
-document.addEventListener('keyup', (e) => {
-    console.log(e)
-    setNextLetter(e)
+document.addEventListener('keyup', e => setNextLetter(e))
+kbBackspace.addEventListener('click', () => {
+    runClickAnimation(kbBackspace)
+    setNextLetter({code: "Backspace", key: "Backspace"})
+})
+kbEnter.addEventListener('click', () => {
+    runClickAnimation(kbEnter)
+    setNextLetter({code: "Enter", key: "Enter"})
+})
+kbLetters.forEach(kbl => {
+    kbl.addEventListener('click', () => {
+        runClickAnimation(kbl) 
+        setNextLetter({code: kbl.innerHTML, key: kbl.innerHTML })
+    })
 })
 
-
+// start game
 init()
-console.log(word)
\ No newline at end of file
+console.log(word)
diff --git a/index.html b/index.html
index 80d2e72..4c5f673 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <title>words by alv</title>
 </head>
 <body>
-    <h1>words by alv</h1>
+    <h1 style="text-align: center">words by alv</h1>
     
     <div id="game_container">
     </div>
@@ -42,7 +42,7 @@
             <p class="kb_letter">l</p>
         </div>
         <div class="kb_row" id="kb_row3">
-            <p class="kb_letter"><i class="fas fa-sign-in-alt"></i></p>
+            <p class="kb_letter" id="kb_enter"><i class="fas fa-sign-in-alt"></i></p>
             <p class="kb_letter">z</p>
             <p class="kb_letter">x</p>
             <p class="kb_letter">c</p>
@@ -50,12 +50,13 @@
             <p class="kb_letter">b</p>
             <p class="kb_letter">n</p>
             <p class="kb_letter">m</p>
-            <p class="kb_letter"><i class="fas fa-backspace"></i></p>
+            <p class="kb_letter" id="kb_backspace"><i class="fas fa-backspace"></i></p>
         </div>
     </div>
-    
+    <div id="footer">
     <p>built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
-    <p>thanks to Lancaster University for the wordlist and you can find it <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a></p>
+    <p>thanks to Lancaster University for the wordlist, which you can find <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a> </p>
+    </div>
     
     <script type="application/javascript" src="wordlist.js"></script>
     <script type="application/javascript" src="game.js"></script>
diff --git a/styles.css b/styles.css
index c0e5e46..d840de6 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,11 @@
   --brown: #a16946;
 }
 
+body {
+    font-family: monospace;
+    margin-top: 0;
+}
+
 #game_container {
     display: flex;
     align-items: center;
@@ -26,19 +31,23 @@
     margin: 0 auto;
 }
 
+#footer { margin-top: 4em; }
+
 .grid_row {
     display: flex;
     flex-direction: row;
 }
 
 .grid_item {
-    width: 3em;
-    height: 3em;
+    width: 8vw;
+    max-width: 3em;
+    height: 8vw;
+    max-height: 3em;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 0.2em solid var(--default-fg);
-    margin: 1em;
+    margin: 3vw;
     text-transform: uppercase;
     font-weight: 800;
     transition: 0.5s;
@@ -61,6 +70,10 @@
   animation: incorrect 0.5s;
 }
 
+.clicked {
+    animation: clicked 0.5s;
+}
+
 @keyframes correct {
   0% {
     background: var(--default-bg);
@@ -85,6 +98,18 @@
   }
 }
 
+@keyframes clicked {
+  0% {
+    background: var(--default-bg);
+  }
+  50% {
+    background: var(--dark-bg);
+  }
+  100% {
+    background: var(--default-bg);
+  }
+}
+
 #end_screen {
     position: fixed;
     height: 100vh;
@@ -102,18 +127,28 @@
     width: fit-content;
 }
 
+#keyboard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .kb_row {
     display: flex;
 }
 
 .kb_row * {
-    width: 3em;
-    height: 3em;
+    width: min(10vw, 3em);
+    height: min(10vw, 3em);
     text-align: center;
     margin: 0;
 }
 
-.kb_row .kb_filler {
-    width: 1.5em;
+.kb_filler {
+    width: min(5vw, 1.5em);
 }
 
+.kb_letter {
+    line-height: min(10vw, 3em)
+}
