diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index 4d0aa44..fec7227 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -17,11 +17,9 @@ $board-size: 90vmin;
   border-spacing: 1px;
   box-shadow: 0 ($board-size / 200) ($board-size / 40) $board-shadow-color;
   color: $white-square-color;
-  display: flex;
-  flex-direction: column;
   height: $board-size;
+  padding: $board-size / 20;
   position: relative;
-  table-layout: fixed;
   width: $board-size;
 
   &.white-to-move::before {
@@ -45,41 +43,13 @@ $board-size: 90vmin;
   }
 }
 
-.board-header,
-.board-footer {
-  display: flex;
-  flex-direction: row;
-}
-
-.board-border-bottom-middle {
-  flex: 1;
-}
-
 .board-body {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, 1fr);
 
-  .board-border-left,
-  .board-border-right {
-    height: 100%;
-  }
-}
-
-.board-ranks {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-
-.board-rank {
-  display: flex;
-  flex: 1;
-}
-
-.board-border-left,
-.board-border-right {
-  width: $board-size / 20;
+  height: 100%;
+  width: 100%;
 }
 
 .board-border-top,
@@ -87,30 +57,7 @@ $board-size: 90vmin;
   height: $board-size / 20;
 }
 
-.board-square {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  border-radius: 2%;
-  flex: 1;
-  margin: 0.5px;
-
-  // This is to ensure the squares can be clicked on in PhantomJS
-  // TODO: Figure out why we need this
-
-  min-height: 20px;
-  min-width: 20px;
-
-  @each $colour in $colours {
-    @each $piece in $pieces {
-      &.#{$colour}.#{$piece} {
-        background-image: url(/images/#{$piece}_#{$colour}.svg);
-      }
-    }
-  }
-}
-
-@mixin black-square {
+%black-square {
   background-color: $black-square-color;
 
   &.selected {
@@ -124,7 +71,7 @@ $board-size: 90vmin;
   }
 }
 
-@mixin white-square {
+%white-square {
   background-color: $white-square-color;
 
   &.selected {
@@ -138,25 +85,59 @@ $board-size: 90vmin;
   }
 }
 
-.board-rank:nth-child(odd) {
-  .board-square:nth-child(even) {
-    @include black-square;
-  }
+.board-square {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  border-radius: 2%;
+  margin: 0.5px;
 
-  .board-square:nth-child(odd) {
-    @include white-square;
+  // This is to ensure the squares can be clicked on in PhantomJS
+  // TODO: Figure out why we need this
+
+  min-height: 20px;
+  min-width: 20px;
+
+  @include odd-between(1, 8) { @extend %white-square; }
+  @include even-between(1, 8) { @extend %black-square; }
+
+  @include odd-between(9, 16) { @extend %black-square; }
+  @include even-between(9, 16) { @extend %white-square; }
+
+  @include odd-between(17, 24) { @extend %white-square; }
+  @include even-between(17, 24) { @extend %black-square; }
+
+  @include odd-between(25, 32) { @extend %black-square; }
+  @include even-between(25, 32) { @extend %white-square; }
+
+  @include odd-between(33, 40) { @extend %white-square; }
+  @include even-between(33, 40) { @extend %black-square; }
+
+  @include odd-between(41, 48) { @extend %black-square; }
+  @include even-between(41, 48) { @extend %white-square; }
+
+  @include odd-between(49, 56) { @extend %white-square; }
+  @include even-between(49, 56) { @extend %black-square; }
+
+  @include odd-between(57, 64) { @extend %black-square; }
+  @include even-between(57, 64) { @extend %white-square; }
+
+  @each $colour in $colours {
+    @each $piece in $pieces {
+      &.#{$colour}.#{$piece} {
+        background-image: url(/images/#{$piece}_#{$colour}.svg);
+      }
+    }
   }
 }
 
-.board-rank:nth-child(even) {
-  .board-square:nth-child(even) {
-    @include white-square;
-  }
+// .board-square:nth-child(even) {
+  // @include black-square;
+// }
 
-  .board-square:nth-child(odd) {
-    @include black-square;
-  }
-}
+// .board-square:nth-child(odd) {
+  // @include white-square;
+// }
 
 @media (min-width: 480px) {
   .board-square {
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 88f336f..9b6e84e 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,5 +1,6 @@
 @import "bourbon/bourbon";
 @import "base/base";
+@import "vendor/family";
 
 @import "variables";
 
diff --git a/assets/css/vendor/_family.scss b/assets/css/vendor/_family.scss
new file mode 100644
index 0000000..f5f65d6
--- /dev/null
+++ b/assets/css/vendor/_family.scss
@@ -0,0 +1,322 @@
+/// Select all children from the first to `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin first($num) {
+  @if $num == 1 {
+    &:first-child {
+      @content;
+    }
+  } @else {
+    &:nth-child(-n + #{$num}) {
+      @content;
+    }
+  }
+}
+
+/// Select all children from the last to `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin last($num) {
+  &:nth-last-child(-n + #{$num}) {
+    @content;
+  }
+}
+
+/// Select all children after the first to `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin after-first($num) {
+  &:nth-child(n + #{$num + 1}) {
+    @content;
+  }
+}
+
+/// Select all children before `$num` from the last.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin from-end($num) {
+  &:nth-last-child(#{$num}) {
+    @content;
+  }
+}
+
+/// Select all children between `$first` and `$last`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin between($first, $last) {
+  &:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+    @content;
+  }
+}
+
+/// Select all even children between `$first` and `$last`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin even-between($first, $last) {
+  &:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+    @content;
+  }
+}
+
+/// Select all odd children between `$first` and `$last`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin odd-between($first, $last) {
+  &:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+    @content;
+  }
+}
+
+/// Select all `$num` children between `$first` and `$last`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin n-between($num, $first, $last) {
+  &:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
+    @content;
+  }
+}
+
+
+/// Select all children but `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin all-but($num) {
+  &:not(:nth-child(#{$num})) {
+    @content;
+  }
+}
+
+/// Select children each `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+/// @alias every
+@mixin each($num) {
+  &:nth-child(#{$num}n) {
+    @content;
+  }
+}
+
+/// Select children each `$num`.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin every($num) {
+  &:nth-child(#{$num}n) {
+    @content;
+  }
+}
+
+/// Select the `$num` child from the start and the `$num` child from the last.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin from-first-last($num) {
+  &:nth-child(#{$num}),
+  &:nth-last-child(#{$num}) {
+    @content;
+  }
+}
+
+
+/// Select the item in the middle of `$num` child. Only works with odd number
+/// chain.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin middle($num) {
+  &:nth-child(#{round($num / 2)}) {
+    @content;
+  }
+}
+
+
+/// Select all children between the `$num` first and the `$num` last.
+/// @group with-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - id of the child
+@mixin all-but-first-last($num) {
+  &:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
+    @content;
+  }
+}
+
+
+/// This quantity-query mixin will only select the first of `$limit` items. It will not
+/// work if there is not as much as item as you set in `$limit`.
+/// @group Quantity queries
+/// @param {number} $limit
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin first-of($limit) {
+  &:nth-last-child(#{$limit}):first-child {
+    @content;
+  }
+}
+
+/// This quantity-query mixin will only select the last of `$limit` items. It will not
+/// if there is not as much as item as you set in `$limit`.
+/// @group Quantity queries
+/// @param {number} $limit
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin last-of($limit) {
+  &:nth-of-type(#{$limit}):nth-last-of-type(1) {
+    @content;
+  }
+}
+
+/// This quantity-query mixin will select every items if there is at least `$num` items. It will not
+/// if there is not as much as item as you set in `$num`.
+/// @group Quantity queries
+/// @param {number} $limit
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin at-least($num) {
+  $selector: &;
+  $child: nth(nth($selector, -1), -1);
+
+  &:nth-last-child(n + #{$num}),
+  &:nth-last-child(n + #{$num}) ~ #{$child} {
+    @content;
+  }
+}
+
+/// This quantity-query mixin will select every items if there is at most `$num` items. It will not
+/// if there is not as much as item as you set in `$num`.
+/// @group Quantity queries
+/// @param {number} $limit
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin at-most($num) {
+  $selector: &;
+  $child: nth(nth($selector, -1), -1);
+
+  &:nth-last-child(-n + #{$num}):first-child,
+  &:nth-last-child(-n + #{$num}):first-child ~ #{$child} {
+    @content;
+  }
+}
+
+/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
+/// @group Quantity queries
+/// @param {number} $limit
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin in-between($min, $max) {
+  $selector: &;
+  $child: nth(nth($selector, -1), -1);
+
+  &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child,
+  &:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} {
+    @content;
+  }
+}
+
+/// Select the first exact child
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin first-child() {
+  &:first-of-type {
+    @content
+  }
+}
+
+/// Select the last exact child
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin last-child() {
+  &:last-of-type {
+    @content
+  }
+}
+
+/// Select all even children.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin even() {
+  &:nth-child(even) {
+    @content;
+  }
+}
+
+/// Select all odd children.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin odd() {
+  &:nth-child(odd) {
+    @content;
+  }
+}
+
+/// Select only the first and last child.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin first-last() {
+  &:first-child,
+  &:last-child {
+    @content;
+  }
+}
+
+/// Will only select the child if it’s unique.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @alias only
+@mixin unique() {
+  &:only-child {
+    @content;
+  }
+}
+
+/// Will only select the child if it’s unique.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin only() {
+  &:only-child {
+    @content;
+  }
+}
+
+/// Will only select children if they are not unique. Meaning if there is at
+/// least 2 children, the style is applied.
+/// @group no-arguments
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+@mixin not-unique() {
+  &:not(:only-child) {
+    @content;
+  }
+}
+
+
+/// This mixin is used to automatically sort z-index in numerical order. But it
+/// can also sort them in anti-numerical order, depending the parameters you use.
+/// @group using functions
+/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
+/// @param {number} $num - Number of children
+/// @param {string} $direction [forward] - Direction of the sort
+/// @param {number} $index [0] - Index of the sorting
+@mixin child-index($num, $direction: 'forward', $index: 0) {
+  @for $i from 1 through $num {
+    @if ($direction == 'forward') {
+      &:nth-child(#{$i}) {
+        z-index: order-index($i, $index);
+        @content;
+      }
+    } @else if ($direction == 'backward') {
+      &:nth-last-child(#{$i}) {
+        z-index: order-index($i, $index);
+        @content;
+      }
+    }
+  }
+}
+
+/// Used by the child-index mixin. It will returned the proper sorted numbers
+/// depending on the `$index` value.
+/// @access private
+/// @param {number} $num - Number of children
+/// @param {number} $index - Index of the sorting
+@function order-index($i, $index) {
+  @return ($index + $i);
+}
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index dedc03b..8659f23 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -25,21 +25,25 @@ class ChessBoard extends React.Component {
     return store.getState().player;
   }
 
-  renderFiles(rankId) {
+  renderSquares() {
+    const board = this.getBoard();
     const { store, channel } = this.props;
-    const rank = this.getBoard()[rankId];
 
-    return _.map(this.files(rank), fileId => {
-      return (
-        <ChessBoardSquare
-          file={fileId}
-          key={fileId}
-          rank={rankId}
-          piece={rank[fileId]}
-          store={store}
-          channel={channel}
-        />
-      );
+    return _.map(this.ranks(), (rankId) => {
+      const rank = this.getBoard()[rankId];
+
+      return _.map(this.files(rank), (fileId) => {
+        return (
+          <ChessBoardSquare
+            file={fileId}
+            key={fileId}
+            rank={rankId}
+            piece={board[rankId][fileId]}
+            store={store}
+            channel={channel}
+          />
+        );
+      });
     });
   }
 
@@ -90,16 +94,8 @@ class ChessBoard extends React.Component {
   render() {
     return (
       <div className={this.boardClass}>
-        <div className="board-header">
-          <div className="board-border-top" />
-        </div>
         <div className="board-body">
-          <div className="board-border-left" />
-          <div className="board-ranks">{this.renderRanks()}</div>
-          <div className="board-border-right" />
-        </div>
-        <div className="board-footer">
-          <div className="board-border-bottom" />
+          {this.renderSquares()}
         </div>
       </div>
     );