diff --git a/server b/server
index 37e5349..a4228cc 160000
--- a/server
+++ b/server
@@ -1 +1 @@
-Subproject commit 37e5349f5bcd28672070079a246a1dcb3d9fdaa4
+Subproject commit a4228ccfa781c5c2c0cf5a6b9a02eeb5590e0800
diff --git a/src/App.vue b/src/App.vue
index 54a6d34..64fa47f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@ export default {
 body{
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-weight: 500;
+    font-size: 16px;
 }
 #app {
   -webkit-font-smoothing: antialiased;
diff --git a/src/components/Board.vue b/src/components/Board.vue
index 9c2be52..3c367fd 100644
--- a/src/components/Board.vue
+++ b/src/components/Board.vue
@@ -1,14 +1,6 @@
 <template>
   <div>
     <div class="container" :class="{ active: activeBlock !== false}">
-
-      <!-- Player information -->
-      <div class="player-info">
-        Player ID: {{ player.id }} <br />
-        Team: {{ player.team }} <br />
-        <button @click="leaveRoom()">leave game</button>
-      </div>
-
       <!-- Click Overlay -->
       <div class="click-overlay" v-if="activeBlock" @click="unselect()">
       </div>
@@ -39,7 +31,7 @@
 import intersectionWith from 'lodash/intersectionWith'
 import isEqual from 'lodash/isEqual'
 import cursorPosition from '../utilities/cursorPosition'
-import roomService from '../services/room.service'
+// import roomService from '../services/room.service'
 import block from './block'
 import { GRID_SIZE } from '../../config'
 const userId = window.localStorage.getItem('userId')
@@ -51,12 +43,6 @@ export default {
     block
   },
   sockets: {
-    connected: function () {
-      console.log('socket connected')
-    },
-    disconnected: function () {
-      console.log('socket disconnected')
-    },
     blockMove: function (res) {
       console.log('SOCKET SERVER BLOCK MOVE', res)
       this.moveBlock(res.block)
@@ -65,6 +51,13 @@ export default {
       const blockToEdit = this.blocks.find(x => x._id === res.block._id)
       blockToEdit.grid = res.block.grid
       blockToEdit.pieces = res.block.pieces
+    },
+    playerJoined: function (res) {
+      console.log('played joined board!', res)
+      this.blocks = res.room.blocks
+    },
+    roomJoined: function (res) {
+      this.blocks = res.room.blocks
     }
   },
   data () {
@@ -73,12 +66,10 @@ export default {
       blocks: [],
       rows: Array.apply(null, Array(20)).map(function (x, i) { return i }),
       cols: Array.apply(null, Array(20)).map(function (x, i) { return i }),
-      activeBlock: false,
-      player: {}
+      activeBlock: false
     }
   },
   mounted () {
-    this.joinRoom()
     document.addEventListener('mousemove', (e) => {
       this.mouseController(e)
     }, false)
@@ -160,29 +151,6 @@ export default {
         })
       }
     },
-    joinRoom: function () {
-      roomService.join({
-        roomId: this.roomId,
-        userId: window.localStorage.getItem('userId')
-      }).then(res => {
-        window.localStorage.setItem('userId', res.data.player._id)
-        this.player = {
-          id: res.data.player._id,
-          team: res.data.player.team
-        }
-        this.blocks = res.data.room.blocks
-      })
-    },
-    leaveRoom: async function () {
-      await this.$confirm('Are you sure you want to leave?', 'Warning', {
-        confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
-        type: 'warning',
-        center: true
-      }).then(() => {
-        this.$router.push({ path: `/` })
-      })
-    },
     findNearbyBlocks: function (block) {
       const areaRadius = 1
       const area = {
@@ -277,15 +245,6 @@ $block-size: 20px;
   }
 }
 
-.player-info {
-  position: fixed;
-  right: 0;
-  text-align: right;
-  bottom: 0px;
-  text-transform: capitalize;
-  font-size: 12px;
-}
-
 .dragging .piece, .block:hover {
   opacity: 1;
 }
diff --git a/src/components/Lobby.vue b/src/components/Lobby.vue
index 553f964..c9db0e2 100644
--- a/src/components/Lobby.vue
+++ b/src/components/Lobby.vue
@@ -64,7 +64,7 @@
 
 <script>
 import RoomService from '../services/room.service'
-import { setItem, getItem } from '../utilities/localStorage'
+import { setItem } from '../utilities/localStorage'
 import { distanceInWordsStrict } from 'date-fns'
 
 export default {
@@ -81,13 +81,14 @@ export default {
       return distanceInWordsStrict(date, new Date())
     },
     joinRoom: function (id) {
-      RoomService.join({roomId: id, userId: getItem('userId')}).then(res => {
-        setItem('userId', res.data.player._id)
-        this.$message({ type: 'success', message: 'You have joined a room' })
-        this.$router.push({ path: `/room/${res.data.room._id}` })
-      }).catch(e => {
-        this.$message({ type: 'error', message: e })
-      })
+      this.$router.push({ path: `/room/${id}` })
+      // RoomService.join({roomId: id, userId: getItem('userId')}).then(res => {
+      //   setItem('userId', res.data.player._id)
+      //   this.$message({ type: 'success', message: 'You have joined a room' })
+      //   this.$router.push({ path: `/room/${res.data.room._id}` })
+      // }).catch(e => {
+      //   this.$message({ type: 'error', message: e })
+      // })
     },
     createRoom: function (roomName) {
       RoomService.create(roomName).then(res => {
diff --git a/src/components/Room.vue b/src/components/Room.vue
index de7f60c..2ebdd2f 100644
--- a/src/components/Room.vue
+++ b/src/components/Room.vue
@@ -1,17 +1,103 @@
 <template>
   <div>
-    <Board :roomId="$route.params.id" />
+    <Board :roomId="$route.params.id" :player="player" />
+      <!-- Player information -->
+      <div class="player-info">
+        Player ID: {{ player.id }} <br />
+        Team: {{ player.team }} <br />
+        <button @click="leaveRoom()">leave game</button>
+      </div>
   </div>
 </template>
 <script>
 import Board from './Board'
+const userId = window.localStorage.getItem('userId')
 
 export default {
   components: {
     Board
+  },
+  sockets: {
+    connected: function () {
+      console.log('socket connected')
+    },
+    disconnected: function () {
+      console.log('socket disconnected')
+    },
+    roomJoined: function (res) {
+      console.log('room joined', res)
+
+      this.player = res.player
+      window.localStorage.setItem('userId', this.player._id)
+      switch (res.status) {
+        case 'select': this.playerSelect(); break
+        case 'joined': this.joinGame(); break
+        case 'full': this.spectate(); break
+        default: this.kick()
+      }
+    }
+  },
+  data () {
+    return {
+      player: {},
+      players: []
+    }
+  },
+  mounted () {
+    this.joinRoom()
+  },
+  methods: {
+    joinRoom: function () {
+      // connect to the room
+      this.$socket.emit('room_connect', { roomId: this.$route.params.id, userId })
+      // roomService.join({
+      //   roomId: this.roomId,
+      //   userId: window.localStorage.getItem('userId')
+      // }).then(res => {
+      //   window.localStorage.setItem('userId', res.data.player._id)
+      //   this.player = {
+      //     id: res.data.player._id,
+      //     team: res.data.player.team
+      //   }
+      //   this.blocks = res.data.room.blocks
+      // })
+    },
+    playerSelect: function () {
+      // window.localStorage.setItem('userId', this.player.id)
+      console.log('playerselect')
+      this.$confirm('Team Selection here', 'Info', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        center: true
+      }).then(() => {
+        // choose nickname and colour here
+        this.$socket.emit('player_connect', { roomId: this.$route.params.id, userId, colour: 'red', nickName: 'Cain' })
+      })
+    },
+    leaveRoom: async function () {
+      await this.$confirm('Are you sure you want to leave?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        center: true
+      }).then(() => {
+        this.$router.push({ path: `/` })
+      })
+    },
+    joinGame: function (room) {
+
+    }
   }
 }
-
 </script>
 <style lang="scss">
+.player-info {
+  position: fixed;
+  right: 0;
+  text-align: right;
+  bottom: 0px;
+  text-transform: capitalize;
+  font-size: 12px;
+}
 </style>
diff --git a/src/components/block.vue b/src/components/block.vue
index 93eeeef..a86c75a 100644
--- a/src/components/block.vue
+++ b/src/components/block.vue
@@ -56,9 +56,9 @@ export default {
   }
   .helper {
     position: absolute;
-    // outline: 1px solid rgba(255,0,0,0.2);
+    outline: 1px solid rgba(255,0,0,0.2);
     background-size: 20px 20px;
-    // background-image: linear-gradient(to right, #e7e7e7 1px, transparent 1px), linear-gradient(to bottom, #e7e7e7 1px, transparent 1px);
+    background-image: linear-gradient(to right, #e7e7e7 1px, transparent 1px), linear-gradient(to bottom, #e7e7e7 1px, transparent 1px);
   }
   .block-id {
     position: absolute;