diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index 807ab12..fa3d761 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -1,15 +1,23 @@
 .board {
-  border: 0.3vmin solid $board-border-color;
+  background: lighten($black-square-color, 7%);
+  border-collapse: unset;
+  color: $white-square-color;
+  border-radius: 2vmin;
+  box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
   height: 80vmin;
   margin: 0 auto;
   width: 80vmin;
+
+  th {
+    color: darken($black-square-color, 10%);
+  }
 }
 
 .board-square {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 100%;
-  border: 0.2vmin solid $square-outline-color;
+  border-radius: 0.25vmin;
 
   @each $colour in $colours {
     @each $piece in $pieces {
@@ -20,6 +28,26 @@
   }
 }
 
+.board-border-top,
+.board-border-bottom {
+  height: 4vmin;
+
+  th {
+    padding: 0;
+    vertical-align: middle;
+    text-align: center;
+  }
+}
+
+.board-border-left,
+.board-border-right {
+  width: 4vmin;
+
+  padding: 0;
+  vertical-align: middle;
+  text-align: center;
+}
+
 @mixin black-square {
   background-color: $black-square-color;
 
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index 66467eb..25927a4 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -61,7 +61,9 @@ class ChessBoard extends React.Component {
     return _.map(this.ranks(), (rankId) => {
       return (
         <tr className="board-rank" key={rankId}>
+          <th class="board-border-left">{rankId}</th>
           {this.renderFiles(rankId)}
+          <td class="board-border-left"></td>
         </tr>
       );
     });
@@ -92,8 +94,29 @@ class ChessBoard extends React.Component {
 
   render() {
     return (
-      <table className="board">
+      <table class="board">
+        <thead>
+          <tr class="board-border-top">
+            <th class="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 class="board-border-left"></th>
+          </tr>
+        </thead>
         <tbody>{this.renderRanks()}</tbody>
+        <tfoot>
+          <tr class="board-border-bottom">
+            <th class="board-border-left"></th>
+            <th colspan="8"></th>
+            <th class="board-border-left"></th>
+          </tr>
+        </tfoot>
       </table>
     );
   }