diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index 18ea24b..05d7dfd 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -11,19 +11,17 @@
 .board {
   background: lighten($black-square-color, 7%);
   border-collapse: unset;
-  border-spacing: 1px;
-  color: $white-square-color;
   border-radius: 2vmin;
+  border-spacing: 1px;
   box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
-  position: relative;
+  color: $white-square-color;
+  display: flex;
+  flex-direction: column;
   height: 90vmin;
+  position: relative;
+  table-layout: fixed;
   width: 90vmin;
 
-  th {
-    font-size: 0.6rem;
-    color: darken($black-square-color, 10%);
-  }
-
   &.white-to-move:before {
     @include move-indicator;
     background: #fff;
@@ -45,24 +43,46 @@
   }
 }
 
-@media (min-width: 480px) {
-  .board {
-    border-spacing: 2px;
+.board-header,
+.board-footer {
+  display: flex;
+  flex-direction: row;
+}
 
-    th {
-      font-size: 0.8rem;
-    }
+.board-border-bottom-middle {
+  flex: 1;
+}
+
+.board-body {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+
+  .board-border-left,
+  .board-border-right {
+    height: 100%;
   }
 }
 
-@media (min-width: 768px) {
-  .board {
-    border-spacing: 3px;
+.board-ranks {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 
-    th {
-      font-size: 1rem;
-    }
-  }
+.board-rank {
+  flex: 1;
+  display: flex;
+}
+
+.board-border-left,
+.board-border-right {
+  width: 5vmin;
+}
+
+.board-border-top,
+.board-border-bottom {
+  height: 5vmin;
 }
 
 .board-square {
@@ -70,6 +90,8 @@
   background-repeat: no-repeat;
   background-size: 100%;
   border-radius: 0.25vmin;
+  flex: 1;
+  margin: 0.5px;
 
   @each $colour in $colours {
     @each $piece in $pieces {
@@ -80,26 +102,6 @@
   }
 }
 
-.board-border-top,
-.board-border-bottom {
-  height: 5%;
-
-  th {
-    padding: 0;
-    vertical-align: middle;
-    text-align: center;
-  }
-}
-
-.board-border-left,
-.board-border-right {
-  width: 5%;
-
-  padding: 0;
-  vertical-align: middle;
-  text-align: center;
-}
-
 @mixin black-square {
   background-color: $black-square-color;
 
@@ -137,3 +139,23 @@
     @include black-square;
   }
 }
+
+@media (min-width: 480px) {
+  .board-square {
+    margin: 1px;
+  }
+
+  .board-label {
+    font-size: 0.8rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .board-square {
+    margin: 1.5px;
+  }
+
+  .board-label {
+    font-size: 1rem;
+  }
+}
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index ebe9158..f15c6e7 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -69,11 +69,9 @@ class ChessBoard extends React.Component {
 
     return _.map(this.ranks(), (rankId) => {
       return (
-        <tr className="board-rank" key={rankId}>
-          <th className="board-border-left">{rankId}</th>
+        <div className="board-rank" key={rankId}>
           {this.renderFiles(rankId)}
-          <td className="board-border-left"></td>
-        </tr>
+        </div>
       );
     });
   }
@@ -114,30 +112,19 @@ class ChessBoard extends React.Component {
 
   render() {
     return (
-      <table className={this.boardClass()}>
-        <thead>
-          <tr className="board-border-top">
-            <th className="board-border-left"></th>
-            <th>a</th>
-            <th>b</th>
-            <th>c</th>
-            <th>d</th>
-            <th>e</th>
-            <th>f</th>
-            <th>g</th>
-            <th>h</th>
-            <th className="board-border-left"></th>
-          </tr>
-        </thead>
-        <tbody>{this.renderRanks()}</tbody>
-        <tfoot>
-          <tr className="board-border-bottom">
-            <th className="board-border-left"></th>
-            <th colSpan="8"></th>
-            <th className="board-border-left"></th>
-          </tr>
-        </tfoot>
-      </table>
+      <div className={this.boardClass()}>
+        <div className="board-header">
+          <div className="board-border-top"></div>
+        </div>
+        <div className="board-body">
+          <div className="board-border-left"></div>
+          <div className="board-ranks">{this.renderRanks()}</div>
+          <div className="board-border-right"></div>
+        </div>
+        <div className="board-footer">
+          <div className="board-border-bottom"></div>
+        </div>
+      </div>
     );
   }
 }