diff --git a/css-grid/index.html b/css-grid/index.html
index 4cac0f43..237049f4 100644
--- a/css-grid/index.html
+++ b/css-grid/index.html
@@ -14,15 +14,33 @@ <h1 class="puzzle-title">CSS Grid Paradise Puzzle</h1>
 				<a href="#playing-the-game" class="button button--primary">How to play</a>
 			</header>
 			<div class="puzzle-game">
-				<img tabindex=0 id="piece-1" src="./images/grid_1.png" class="puzzle-game-image" aria-label="The">
-				<img tabindex=0 id="piece-2" src="./images/grid_2.png" class="puzzle-game-image" aria-label="only">
-				<img tabindex=0 id="piece-3" src="./images/grid_3.png" class="puzzle-game-image" aria-label="disability">
-				<img tabindex=0 id="piece-4" src="./images/grid_4.png" class="puzzle-game-image" aria-label="in">
-				<img tabindex=0 id="piece-5" src="./images/grid_5.png" class="puzzle-game-image" aria-label="life">
-				<img tabindex=0 id="piece-6" src="./images/grid_6.png" class="puzzle-game-image" aria-label="is">
-				<img tabindex=0 id="piece-7" src="./images/grid_7.png" class="puzzle-game-image" aria-label="a">
-				<img tabindex=0 id="piece-8" src="./images/grid_8.png" class="puzzle-game-image" aria-label="bad">
-				<img tabindex=0 id="piece-9" src="./images/grid_9.png" class="puzzle-game-image" aria-label="attitude">
+				<button id="piece-1" class="puzzle-game-image" aria-label="The" type="button">
+					<img src="./images/grid_1.png">
+				</button>
+				<button id="piece-2" class="puzzle-game-image" aria-label="only" type="button">
+					<img src="./images/grid_2.png">
+				</button>
+				<button id="piece-3" class="puzzle-game-image" aria-label="disability" type="button">
+					<img src="./images/grid_3.png">
+				</button>
+				<button id="piece-4" class="puzzle-game-image" aria-label="in" type="button">
+					<img src="./images/grid_4.png">
+				</button>
+				<button id="piece-5" class="puzzle-game-image" aria-label="life" type="button">
+					<img src="./images/grid_5.png">
+				</button>
+				<button id="piece-6" class="puzzle-game-image" aria-label="is" type="button">
+					<img src="./images/grid_6.png">
+				</button>
+				<button id="piece-7" class="puzzle-game-image" aria-label="a" type="button">
+					<img src="./images/grid_7.png">
+				</button>
+				<button id="piece-8" class="puzzle-game-image" aria-label="bad" type="button">
+					<img src="./images/grid_8.png">
+				</button>
+				<button id="piece-9" class="puzzle-game-image" aria-label="attitude" type="button">
+					<img src="./images/grid_9.png">
+				</button>
 			</div>
 			<aside class="puzzle-score">
 				Clicks: <span id="clicks">0</span>
diff --git a/css-grid/scripts/grid.js b/css-grid/scripts/grid.js
index 21008833..c733a8dd 100644
--- a/css-grid/scripts/grid.js
+++ b/css-grid/scripts/grid.js
@@ -1,7 +1,7 @@
 (function () {
 	'use strict';
 
-	const pieces = [...document.querySelectorAll('.puzzle-game > img')];
+	const pieces = [...document.querySelectorAll('.puzzle-game > button')];
 	const clickScore = document.getElementById('clicks');
 	const soundButton = document.getElementById('toggle-audio');
 	const congratulations = document.getElementsByClassName('congratulations')[0];
diff --git a/css-grid/styles/style.css b/css-grid/styles/style.css
index ac46b40b..529b389f 100644
--- a/css-grid/styles/style.css
+++ b/css-grid/styles/style.css
@@ -38,6 +38,7 @@ body {
 	margin: 0;
 	outline: 1px solid #000;
 	outline-offset: -1px;
+	padding: 0;
 }
 
 .hidden-piece {