diff --git a/typescript-frontend-katas/minesweeper/src/assets/game-over.png b/typescript-frontend-katas/minesweeper/src/assets/game-over.png
new file mode 100644
index 0000000..8ff66eb
Binary files /dev/null and b/typescript-frontend-katas/minesweeper/src/assets/game-over.png differ
diff --git a/typescript-frontend-katas/minesweeper/src/components/MinesweeperCell.vue b/typescript-frontend-katas/minesweeper/src/components/MinesweeperCell.vue
new file mode 100644
index 0000000..3b0c3d1
--- /dev/null
+++ b/typescript-frontend-katas/minesweeper/src/components/MinesweeperCell.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="cell" :class="{ 'unexplored': value === '.' }" @click="$emit('click')">
+    <div v-if="value === '0'"></div>
+    <div v-else-if="value === '*'" class="bomb">*</div>
+    <div v-else-if="value === '.'" class="unexplored"></div>
+    <div v-else :class="`cell-${value}`">{{ value }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "MinesweeperCell",
+  setup() {},
+  props: {
+    value: { type: String, required: true },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.cell {
+  width: 30px;
+  height: 30px;
+  font-size: 24px;
+  border-top: 1px solid grey;
+  border-left: 1px solid grey;
+  .bomb {
+    color: red;
+  }
+  .cell-1 {
+    color: blue;
+  }
+  .cell-2 {
+    color: green;
+  }
+  .cell-3 {
+    color: red;
+  }
+  .cell-4 {
+    color: darkblue;
+  }
+  .cell-5 {
+    color: rebeccapurple;
+  }
+  .cell-6 {
+    color: teal;
+  }
+  .cell-7 {
+    color: teal;
+  }
+  .cell-8 {
+    color: black;
+  }
+}
+.unexplored {
+  background-color: rgb(200, 200, 200);
+}
+
+</style>
diff --git a/typescript-frontend-katas/minesweeper/src/components/MinesweeperProgram.vue b/typescript-frontend-katas/minesweeper/src/components/MinesweeperProgram.vue
index 81a33dc..e23e773 100644
--- a/typescript-frontend-katas/minesweeper/src/components/MinesweeperProgram.vue
+++ b/typescript-frontend-katas/minesweeper/src/components/MinesweeperProgram.vue
@@ -1,20 +1,109 @@
 <template>
-  <div class="minesweeper-program">
-    <!-- Add the minefield here -->
+  <div>
+    <div class="minesweeper-header">
+      <button @click="clickReset">reset</button>
+    </div>
+    <hr />
+    <div class="minesweeper-program">
+      <div v-if="gameStatus !== Status.IN_PROGRESS" class="message-container">
+        <img v-if="gameStatus === Status.LOST" src="~src/assets/game-over.png" height="160" width="160"/>
+        <h2 v-else-if="gameStatus === Status.WIN" class="win">CONGRATS!</h2>
+      </div>
+
+      <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="row">
+        <div v-for="(cell, cellIndex) in row" :key="cellIndex">
+          <MinesweeperCell :value="cell" @click="play(rowIndex, cellIndex)" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
+
+import { Minesweeper, GameOver, Win } from "src/game/Minesweeper";
+import MinesweeperCell from "src/components/MinesweeperCell.vue";
 
-import { Minesweeper } from "src/game/Minesweeper";
+enum Status {
+  WIN,
+  LOST,
+  IN_PROGRESS,
+}
 
 export default defineComponent({
   name: "MinesweeperProgram",
+  components: { MinesweeperCell },
   setup() {
+    let game = new Minesweeper(10, 10, [
+      [0, 1],
+      [2, 1],
+      [5, 5],
+    ]);
+
+    const grid = ref(game.getPlayerGrid());
+    const gameStatus = ref(Status.IN_PROGRESS);
+
+    const play = (rowIndex: number, cellIndex: number) => {
+      try {
+        grid.value = game.play(rowIndex, cellIndex);
+      } catch (e: unknown) {
+        if (e instanceof GameOver) {
+          gameStatus.value = Status.LOST;
+        } else if (e instanceof Win) {
+          gameStatus.value = Status.WIN;
+        } else {
+          throw e;
+        }
+      }
+    };
+
+    const clickReset = () => {
+      game = new Minesweeper(10, 10, [
+        [0, 1],
+        [2, 1],
+        [5, 5],
+      ]);
+      grid.value = game.getPlayerGrid();
+      gameStatus.value = Status.IN_PROGRESS;
+    };
+
+    return { grid, gameStatus, play, Status, clickReset };
   },
 });
 </script>
 
 <style lang="scss" scoped>
+.row {
+  display: flex;
+}
+.game-over {
+  color: red;
+}
+.win {
+  color: green;
+}
+
+.minesweeper-header {
+  display: flex;
+  align-items: center;
+
+  button {
+    margin: 4px;
+  }
+}
+
+.minesweeper-program {
+  position: relative;
+
+  .message-container {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(40, 40, 40, 0.2);
+  }
+}
 </style>