diff --git a/src/components/OXCell.vue b/src/components/OXCell.vue
index 9e717023a138faadbb58f11733bf62821d363886..5e4b49a108495f12b1427eef3fb0e4baac043489 100644
--- a/src/components/OXCell.vue
+++ b/src/components/OXCell.vue
@@ -1,5 +1,10 @@
 <template>
-  <div @click="clickCell">{{ player }}</div>
+  <div
+    @click="clickCell"
+    :class="{ cell: true, cellX: player === 'X', cellO: player === 'O' }"
+  >
+    {{ player }}
+  </div>
 </template>
 <script>
 export default {
@@ -14,4 +19,14 @@ export default {
   }
 }
 </script>
-<style></style>
+<style>
+.cell {
+  font-size: 30pt;
+}
+.cellX {
+  color: blue;
+}
+.cellO {
+  color: red;
+}
+</style>
diff --git a/src/components/OXTable.vue b/src/components/OXTable.vue
index 9f761878b5e9f7740e481f6d6913567ef7d65665..4250fa142dae1e2dd64cda5ec8721f28e114fa71 100644
--- a/src/components/OXTable.vue
+++ b/src/components/OXTable.vue
@@ -149,4 +149,10 @@ table {
   margin-right: auto;
   border: 1px solid black;
 }
+td {
+  text-align: center;
+  vertical-align: middle;
+  width: 50pt;
+  height: 50pt;
+}
 </style>