diff --git a/.DS_Store b/.DS_Store
index c62eebc..615406a 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/src/components/TopLevel.component.js b/src/components/TopLevel.component.js
index 1ae7313..7127d40 100644
--- a/src/components/TopLevel.component.js
+++ b/src/components/TopLevel.component.js
@@ -5,13 +5,16 @@ import game_service from '../services/GameState.service.js'
 const template = `
 <div class="top-level-component">
     <div v-if="current_state === GameState.ChoosingNumberOfShips">
-        Choose number of ships
+        Choose number of ships:
         <button @click="ship1" class="shipBtn">1 ship</button>
         <button @click="ship2" class="shipBtn">2 ships</button>
         <button @click="ship3" class="shipBtn">3 ships</button>
         <button @click="ship4" class="shipBtn">4 ships</button>
         <button @click="ship5" class="shipBtn">5 ships</button>
+<<<<<<< HEAD
+=======
 
+>>>>>>> 19aa3733d0604f37e6875b825eb51ccd4092d4c4
     </div>
     <div v-if="current_state !== GameState.ChoosingNumberOfShips" class="game-boards-container">
         <!-- Opponent's board -->
@@ -79,3 +82,7 @@ export default class TopLevelComponent extends Component {
     }
 }
 
+<<<<<<< HEAD
+}
+=======
+>>>>>>> 19aa3733d0604f37e6875b825eb51ccd4092d4c4
diff --git a/src/style/components.css b/src/style/components.css
index 9afd3f5..9b2e5e1 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -16,6 +16,16 @@
     padding-top: 10px;
 }
 
+.shipBtn{
+  background-color: #327da8;
+  color: white;
+  padding: 5px 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 12px;
+}
+
 /* Styles for the various grid cell states. */
 
 .game-board-cell-component {
@@ -25,11 +35,11 @@
 }
 
 .game-board-cell-component.available {
-    background: #eeeeee;
+    background: #327da8;
 }
 
 .game-board-cell-component.available:hover {
-    background: #cccccc;
+    background: #3261a8;
 }
 
 .game-board-cell-component.disabled {