diff --git a/.env b/.env
index 18422d3..ebd9e54 100644
--- a/.env
+++ b/.env
@@ -1,8 +1,10 @@
 NODE_ENV=development
-VUE_APP_MS_SOCK=localhost:4000
-VUE_APP_MS_AUTH=https://auth.eu.gametactic.eu
-VUE_APP_MS_MAPS=https://maps.eu.gametactic.eu
-VUE_APP_MS_USER=https://user.eu.gametactic.eu
+VUE_APP_MS_SOCK=https://socket.gametactic.eu
+# VUE_APP_MS_SOCK=http://localhost:3000
+VUE_APP_MS_AUTH=https://authentication.gametactic.eu
+VUE_APP_MS_MAPS=https://maps.gametactic.eu
+VUE_APP_MS_USER=https://user.gametactic.eu
+VUE_APP_MS_WG_API=https://wg-api.gametactic.eu
 VUE_APP_ROOM_PRIMARY_COLOUR=#004e8c
 VUE_APP_DEFAULT_LOCALE=en
 VUE_APP_LOCALE=en
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
index cdff589..0ffb055 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,6 +13,7 @@ module.exports = {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-this-alias": "off",
     semi: ["error", "never"]
   },
   parser: "vue-eslint-parser",
diff --git a/src/App.vue b/src/App.vue
index aaef3ce..6f3fca3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,40 +7,51 @@
 <script lang="ts">
 import Component from 'vue-class-component'
 import Vue from 'vue'
-import { Action } from 'vuex-class'
-import { RoomAction, Game, Locale, GameName, Ship } from '@/store/modules/room'
-import { WowsShipsApiResponse, WowsShipInfoApiResponse } from '@/types/Games/Wows'
-import axios from 'axios'
+import { Action, namespace, Getter } from 'vuex-class'
+import { RoomAction, Locale, GameName, RoomGetters } from '@/store/modules/room'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, AuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/authentication'
+import { Api } from './store/modules/types'
+import { getWowsApiData } from '@/games/wows/api'
+
+const authNamespace = namespace(Namespaces.AUTH)
 
 @Component({
   name: 'TheApp'
 })
 export default class TheApp extends Vue {
-  @Action(`room/${RoomAction.SET_GAME}`) setGame!: (game: Game) => void
+  @Action(`room/${RoomAction.SET_GAME_NAME}`) setGameName!: (name: string) => void
+  @Action(`room/${RoomAction.SET_GAME_API}`) setGameApi!: (api: Api) => void
   @Action(`room/${RoomAction.SET_LOCALE}`) setLocale!: (locale: Locale) => void
+  @Getter(`room/${RoomGetters.GAME_NAME}`) game!: GameName
+  @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
+  @authNamespace.Action(AuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
+  @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
+  @authNamespace.Getter(AuthenticationGetters.JWT) jwt!: ExtendedJWT
+
   async created () {
-    this.setGame({ name: GameName['WOWS'], ships: [], gameInfo: undefined })
-    this.setLocale(Locale['ENUK'])
-    this.setGame(await this.getWowsApiData())
+    this.setGameName(GameName['WOWS'])
+    this.setLocale(Locale['EN'])
+    this.initAuthentication()
   }
 
-  async getWowsApiData (): Promise<Game> {
-    const response: WowsShipsApiResponse = await axios.get('https://api.worldofwarships.eu/wows/encyclopedia/ships/?application_id=d84a218b4fec37003e799f13777bf880')
-    const pageTotal = response.data.meta.page_total
-    let ships: Ship[] = []
-    ships = ships.concat(Object.values(response.data.data))
-    if (pageTotal > 1) {
-      for (let i = 2; i <= pageTotal; i++) {
-        const response: WowsShipsApiResponse = await axios.get(`https://api.worldofwarships.eu/wows/encyclopedia/ships/?page_no=${i}&application_id=d84a218b4fec37003e799f13777bf880`)
-        ships = ships.concat(Object.values(response.data.data))
-      }
-    }
-    const gameInfo: WowsShipInfoApiResponse = await axios.get('https://api.worldofwarships.eu/wows/encyclopedia/info/?application_id=d84a218b4fec37003e799f13777bf880')
+  async initAuthentication () {
+    const localToken = localStorage.getItem(JWT_KEY)
 
-    return {
-      name: GameName['WOWS'],
-      ships: ships,
-      gameInfo: gameInfo.data.data
+    if (this.checkTokenExpiry()) {
+      if (this.$route?.query?.code) {
+        this.authenticate(this.$route.query.code as string).then(jwt => this.storeToken(jwt.encoded))
+      } else if (localToken !== null) {
+        this.authenticate(localToken)
+      }
+      if (localToken) {
+        switch (this.game) {
+          case 'wows':
+            await getWowsApiData(localToken, this.setGameApi)
+            break
+          default: break
+        }
+      }
     }
   }
 }
diff --git a/src/components/TheCanvas.vue b/src/components/TheCanvas.vue
index 2628ee6..333ba52 100644
--- a/src/components/TheCanvas.vue
+++ b/src/components/TheCanvas.vue
@@ -26,7 +26,7 @@ import { Action, Getter, namespace } from 'vuex-class'
 import { ToolGetters, ToolsAction } from '@/store/modules/tools'
 import { CanvasAction, CanvasGetters, HideCanvasElementInterface } from '@/store/modules/canvas'
 import Konva from 'konva'
-import { SocketActions, SocketGetters } from '@/store/modules/socket'
+import { SocketActions } from '@/store/modules/socket'
 import { EventBus } from '@/event-bus'
 import PointerEventMapper, { CustomStageConfig, CustomStageEvent } from '@/util/PointerEventMapper'
 import { KonvaPointerEvent } from 'konva/types/PointerEvents'
@@ -53,8 +53,8 @@ export default class TheCanvas extends Vue {
   @Getter(`tools/${ToolGetters.ENABLED_TOOL}`) enabledTool!: Tool
   @Getter(`tools/${ToolGetters.ENABLED}`) enabled!: boolean
   @Getter(`tools/${ToolGetters.TOOLS}`) tools!: Tool[]
-  @Sockets.Getter(SocketGetters.SOCKET) socket!: WebSocket
-  @Sockets.Action(SocketActions.SEND_IF_OPEN) send!: (message: string) => void
+  // @Sockets.Getter(SocketGetters.SOCKET) socket!: WebSocket
+  // @Sockets.Action(SocketActions.SEND_IF_OPEN) send!: (message: string) => void
   @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT}`) addCanvasElement!: (canvasElement: CanvasElement) => void
   @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`) addCanvasElementHistory!: (canvasElement: CanvasElement) => void
   @Action(`canvas/${CanvasAction.HIDE_CANVAS_ELEMENT}`) hideCanvasElement!: (payload: HideCanvasElementInterface) => void
@@ -135,7 +135,7 @@ export default class TheCanvas extends Vue {
       const response = handleUndoRedo.handleUndoRedo(undoRedo)
       if (response) {
         this.addCanvasElementHistory(response.addToHistory)
-        this.socket.send(JSON.stringify(response.returnElement))
+        // this.socket.send(JSON.stringify(response.returnElement))
         this.renderShapes()
       }
     })
@@ -144,7 +144,7 @@ export default class TheCanvas extends Vue {
       if (this.canvasElement.tool.textString && this.canvasElement.tool.textString?.length > 0) {
         this.addCanvasElement({ ...canvasElement })
         this.addCanvasElementHistory(canvasElement)
-        this.socket.send(JSON.stringify(this.canvasElement))
+        // this.socket.send(JSON.stringify(this.canvasElement))
         this.renderShapes()
       }
     })
@@ -174,32 +174,32 @@ export default class TheCanvas extends Vue {
       this.onTouchUpHandler(e)
     })
 
-    this.socket.onmessage = (data: MessageEvent) => {
-      const stageEvent: CustomStageEvent = {
-        stage: this.stageNode,
-        stageConfig: this.stageConfig,
-        zoom: this.stageZoom
-      }
-      const socketMessageHandler = new HandleSocketMessage(
-        JSON.parse(data.data).payload,
-        this.$data.canvasElement,
-        this.tools,
-        this.layerNode,
-        this.canvasElements,
-        stageEvent
-      )
-      const response = socketMessageHandler.handle()
-      if (response) {
-        if (response.change === SocketHandlerChange.ADD && response.payload.canvasElement) {
-          this.addCanvasElement(response.payload.canvasElement)
-        } else if (response.change === SocketHandlerChange.HIDE && response.payload.groupIds) {
-          response.payload.groupIds.forEach((groupId: string) => {
-            this.hideCanvasElement({ fromSocket: true, id: groupId })
-          })
-        }
-      }
-      this.renderShapes()
-    }
+    // this.socket.onmessage = (data: MessageEvent) => {
+    //   const stageEvent: CustomStageEvent = {
+    //     stage: this.stageNode,
+    //     stageConfig: this.stageConfig,
+    //     zoom: this.stageZoom
+    //   }
+    //   const socketMessageHandler = new HandleSocketMessage(
+    //     JSON.parse(data.data).payload,
+    //     this.$data.canvasElement,
+    //     this.tools,
+    //     this.layerNode,
+    //     this.canvasElements,
+    //     stageEvent
+    //   )
+    //   const response = socketMessageHandler.handle()
+    //   if (response) {
+    //     if (response.change === SocketHandlerChange.ADD && response.payload.canvasElement) {
+    //       this.addCanvasElement(response.payload.canvasElement)
+    //     } else if (response.change === SocketHandlerChange.HIDE && response.payload.groupIds) {
+    //       response.payload.groupIds.forEach((groupId: string) => {
+    //         this.hideCanvasElement({ fromSocket: true, id: groupId })
+    //       })
+    //     }
+    //   }
+    //   this.renderShapes()
+    // }
   }
 
   beforeDestroy () {
diff --git a/src/components/TheEntityPanel.vue b/src/components/TheEntityPanel.vue
index 420eeb7..e2afb39 100644
--- a/src/components/TheEntityPanel.vue
+++ b/src/components/TheEntityPanel.vue
@@ -9,8 +9,8 @@
           tile
           class="custom-entity-panel"
         >
-          <wows-panel v-if="roomState.game.name === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
-          <wot-panel v-if="roomState.game.name === 'wot'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wows-panel v-if="gameName === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wot-panel v-if="gameName === 'wot'" :clickedItemKey="clickedItemKey" :teams="teams" />
         </v-card>
       </v-col>
       <v-col class="pt-1">
@@ -23,7 +23,7 @@
           <div>
             <v-list-item class="px-2">
               <v-list-item-avatar>
-                <v-img :src="images[roomState.game.name]"></v-img>
+                <v-img :src="images[gameName]"></v-img>
               </v-list-item-avatar>
             </v-list-item>
             <v-divider></v-divider>
@@ -82,7 +82,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { RoomGetters, RoomState } from '@/store/modules/room'
+import { RoomGetters, GameName } from '@/store/modules/room'
 import { Getter } from 'vuex-class'
 import { WowsPanel, WotPanel } from './entity-panel'
 
@@ -103,7 +103,7 @@ export interface MenuItem {
 })
 export default class MapButtons extends Vue {
   @Prop() private id!: string;
-  @Getter(`room/${RoomGetters.ROOM_STATE}`) private readonly roomState!: RoomState;
+  @Getter(`room/${RoomGetters.GAME_NAME}`) private readonly gameName!: GameName;
 
   show = true
 
diff --git a/src/components/entity-panel/games/Wows.vue b/src/components/entity-panel/games/Wows.vue
index 089aada..f7e8f70 100644
--- a/src/components/entity-panel/games/Wows.vue
+++ b/src/components/entity-panel/games/Wows.vue
@@ -20,12 +20,15 @@
 <script lang="ts">
 import axios from 'axios'
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { RoomGetters, RoomState, Ship } from '@/store/modules/room'
+import { RoomGetters, GameName } from '@/store/modules/room'
 import { Getter } from 'vuex-class'
 import { MenuItem } from '@/components/TheEntityPanel.vue'
-import { Field } from '@/types/Games/Index.ts'
+import { Field, ApiHeader } from '@/types/Games/Index.ts'
 import { Item } from '@/types/Games/Index'
 import TheCreateEntity from '@/components/entity-panel/sections/TheCreateEntity.vue'
+import { Api, Entity } from '../../../store/modules/types'
+import { Ship } from '../../../types/Games/Wows'
+import { AuthenticationGetters, ExtendedJWT } from '../../../store/modules/authentication'
 
 @Component({
   name: 'WOWS',
@@ -36,9 +39,10 @@ import TheCreateEntity from '@/components/entity-panel/sections/TheCreateEntity.
 export default class Wows extends Vue {
   @Prop() private clickedItemKey!: number;
   @Prop() private teams!: MenuItem[];
-  @Getter(`room/${RoomGetters.ROOM_STATE}`) roomState!: RoomState;
+  @Getter(`room/${RoomGetters.GAME_API}`) gameApi!: Api[];
+  @Getter(`authentication/${AuthenticationGetters.JWT}`) jwt!: ExtendedJWT;
 
-  entities: Item[] = []
+  entities: Entity[] = []
 
   fields: Field[] = [{
     id: 'shipMainBatteryRange',
@@ -90,57 +94,61 @@ export default class Wows extends Vue {
     suffix: 'entity.wows.hydroRange.suffix'
   }]
 
-  get shipsData (): Item[] {
-    const roomStateGameInfo = this.roomState.game.gameInfo
-    if (roomStateGameInfo) {
-      if (this.roomState.game?.ships) {
-        return [{
-          text: 'Aircraft Carrier (CV)',
-          shortText: 'CV',
-          value: 1,
-          image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/AirCarrier/standard_84f55678325d4b492215390a7f0b43008f3947ab201502cd979dcf4c37633cf3.png',
-          tier: 0,
-          data: {}
-        }, {
-          text: 'Battleship (BB)',
-          shortText: 'BB',
-          value: 2,
-          image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Battleship/standard_01624cacb82f39f77a4e677a7b9fdf4df20dafd61f971f4b2d3e54c3065e2892.png',
-          tier: 0,
-          data: {}
-        }, {
-          text: 'Cruiser (CA)',
-          shortText: 'CA',
-          value: 3,
-          image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Cruiser/standard_874a3bdc3134b8da4fd6f52186f1b2b682f13ef78688732d3016785c0649a424.png',
-          tier: 0,
-          data: {}
-        }, {
-          text: 'Destroyer (DD)',
-          shortText: 'DD',
-          value: 4,
-          image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Destroyer/standard_357acc9fc0e2f7d98f047c99edffad359a8c45f2093024400fef2b9abbaf3a59.png',
-          tier: 0,
-          data: {}
-        }, ...this.roomState.game?.ships.map((ship: Ship) => ({
-          text: `${ship.name} (${ship.tier})`,
-          shortText: ship.name,
-          value: ship.ship_id,
-          image: roomStateGameInfo.ship_type_images[ship.type][ship.is_special ? 'image_elite' : ship.is_premium ? 'image_premium' : 'image'],
-          tier: ship.tier,
-          data: {}
-        })).sort((x: Item, y: Item) => x.text > y.text ? 1 : -1)]
-      }
+  get shipsData (): Entity[] {
+    const gameInfo = this.gameApi.find((api: Api) => api.name === 'wows.encyclopedia.info')
+    const gameShips = this.gameApi.find((api: Api) => api.name === 'wows.encyclopedia.ships')
+    if (gameInfo?.data && gameShips?.data) {
+      return [{
+        text: 'Aircraft Carrier (CV)',
+        shortText: 'CV',
+        value: 1,
+        image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/AirCarrier/standard_84f55678325d4b492215390a7f0b43008f3947ab201502cd979dcf4c37633cf3.png',
+        tier: 0,
+        data: {}
+      }, {
+        text: 'Battleship (BB)',
+        shortText: 'BB',
+        value: 2,
+        image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Battleship/standard_01624cacb82f39f77a4e677a7b9fdf4df20dafd61f971f4b2d3e54c3065e2892.png',
+        tier: 0,
+        data: {}
+      }, {
+        text: 'Cruiser (CA)',
+        shortText: 'CA',
+        value: 3,
+        image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Cruiser/standard_874a3bdc3134b8da4fd6f52186f1b2b682f13ef78688732d3016785c0649a424.png',
+        tier: 0,
+        data: {}
+      }, {
+        text: 'Destroyer (DD)',
+        shortText: 'DD',
+        value: 4,
+        image: 'https://glossary-wows-global.gcdn.co/icons/vehicle/types/Destroyer/standard_357acc9fc0e2f7d98f047c99edffad359a8c45f2093024400fef2b9abbaf3a59.png',
+        tier: 0,
+        data: {}
+      }, ...gameShips.data.map((ship: Ship) => ({
+        text: `${ship.name} (${ship.tier})`,
+        shortText: ship.name,
+        value: ship.ship_id,
+        image: gameInfo.data.ship_type_images[ship.type][ship.is_special ? 'image_elite' : ship.is_premium ? 'image_premium' : 'image'],
+        tier: ship.tier,
+        data: {}
+      })).sort((x: Item, y: Item) => x.text > y.text ? 1 : -1)]
     }
     return []
   }
 
-  async autoCompleteOnChangeHandler (shipItem: Item) {
-    if (shipItem && !this.entities.find((entity: Item) => entity.value === shipItem.value)) {
+  async autoCompleteOnChangeHandler (shipItem: Entity) {
+    if (shipItem && !this.entities.find((entity: Entity) => entity.value === shipItem.value)) {
       this.entities.unshift(shipItem)
-      const response = await axios.get(`https://api.worldofwarships.eu/wows/encyclopedia/shipprofile/?ship_id=${shipItem.value}&application_id=d84a218b4fec37003e799f13777bf880`)
+      const headers: ApiHeader = {
+        'Authorization': this.jwt.encoded,
+        'X-Region': this.jwt.region,
+        'X-Game': GameName['WOWS']
+      }
+      const response = await axios.get(`${process.env.VUE_APP_MS_WG_API}/wows/encyclopedia/shipprofile/?ship_id=${shipItem.value}`, { headers })
       const shipData = response.data.data[shipItem.value]
-      const foundNewEntity = this.entities.find((entity: Item) => entity.value === shipItem.value)
+      const foundNewEntity = this.entities.find((entity: Entity) => entity.value === shipItem.value)
       if (foundNewEntity) {
         foundNewEntity.data = shipData
       }
diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
new file mode 100644
index 0000000..3715fa7
--- /dev/null
+++ b/src/components/navigation/LoginCard.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-card>
+    <v-card-title>Login</v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h4>Please select a realm to log in with</h4>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn color="primary" @click="authEU" depressed>
+        EU
+      </v-btn>
+      <v-btn color="primary" @click="authNA" depressed>
+        NA
+      </v-btn>
+      <v-btn color="primary" @click="authASIA" depressed>
+        ASIA
+      </v-btn>
+      <v-btn color="primary" @click="authRU" depressed>
+        CIS
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, JWTRegion } from '@/store/modules/authentication'
+const authNamespace = namespace(Namespaces.AUTH)
+  @Component({
+    name: 'g-login-card'
+  })
+export default class extends Vue {
+  @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+  authEU () {
+    this.authenticate(JWTRegion.EU)
+  }
+  authNA () {
+    this.authenticate(JWTRegion.NA)
+  }
+  authASIA () {
+    this.authenticate(JWTRegion.SA)
+  }
+  authRU () {
+    this.authenticate(JWTRegion.RU)
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 7a459fc..88fdcfc 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -16,6 +16,15 @@
       </v-tooltip>
     </template>
     <v-list>
+      <v-list-item v-if="isAuth" @click="logout">
+        <v-list-item-title>Logout</v-list-item-title>
+      </v-list-item>
+      <v-list-item v-else @click="doOpen">
+        <v-list-item-title>Login</v-list-item-title>
+        <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" max-width="300px">
+          <g-login-card></g-login-card>
+        </v-dialog>
+      </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
         :key="index"
@@ -28,6 +37,15 @@
   </v-menu>
   <v-list v-else dense style="width: 100%;">
     <v-subheader>User Profile</v-subheader>
+    <v-list-item v-if="isAuth" @click="logout">
+      <v-list-item-title>Logout</v-list-item-title>
+    </v-list-item>
+    <v-list-item v-else @click="doOpen">
+      <v-list-item-title>Login</v-list-item-title>
+      <v-dialog v-model="dialogOpen" @click:outside="dialogOpen = false" fullscreen>
+        <g-login-card></g-login-card>
+      </v-dialog>
+    </v-list-item>
     <v-list-item
       v-for="item in userMenuItems"
       :key="item.text"
@@ -41,26 +59,34 @@
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { Namespaces } from '@/store'
+import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
+import GLoginCard from '@/components/navigation/LoginCard.vue'
 
 interface UserMenuItem {
   text: string;
   title: string;
 }
 
+const authNamespace = namespace(Namespaces.AUTH)
+
 @Component({
-  name: 'TheUserMenu'
+  name: 'TheUserMenu',
+  components: { GLoginCard }
 })
 export default class TheUserMenu extends Vue {
   @Prop() private mobile!: boolean;
-  userMenuItems: UserMenuItem[] = [{
-    text: 'Login',
-    title: 'Login to save your progress'
-  }, {
-    text: 'Logout',
-    title: 'Logout of your logged in account'
-  }]
+  @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
+  @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+  @authNamespace.Action(AuthenticationActions.LOGOUT) logout!: () => void
+
+  dialogOpen = false
+  doOpen () {
+    setTimeout(() => { this.dialogOpen = true })
+  }
+  userMenuItems: UserMenuItem[] = []
 
   // eslint-disable-next-line
   userMenuItemsClickHandler (item: UserMenuItem) {
diff --git a/src/games/wows/api.ts b/src/games/wows/api.ts
new file mode 100644
index 0000000..72b9890
--- /dev/null
+++ b/src/games/wows/api.ts
@@ -0,0 +1,34 @@
+import { ApiHeader } from '@/types/Games/Index'
+import { WowsShipsApiResponse, Ship, WowsShipInfoApiResponse } from '@/types/Games/Wows'
+import axios from 'axios'
+import { Api } from '@/store/modules/types'
+import { JWTRegion } from '@/store/modules/authentication'
+import { GameName } from '@/store/modules/room'
+
+export const getWowsApiData = async (token: string, setGameApi: (api: Api) => void): Promise<void> => {
+  const headers: ApiHeader = {
+    'Authorization': token,
+    'X-Region': JWTRegion['EU'],
+    'X-Game': GameName['WOWS']
+  }
+  const response: WowsShipsApiResponse = await axios.get(`${process.env.VUE_APP_MS_WG_API}/wows/encyclopedia/ships/`, { headers })
+  const pageTotal = response.data.meta.page_total
+  let ships: Ship[] = []
+  ships = ships.concat(Object.values(response.data.data))
+  if (pageTotal > 1) {
+    for (let i = 2; i <= pageTotal; i++) {
+      const response: WowsShipsApiResponse = await axios.get(`${process.env.VUE_APP_MS_WG_API}/wows/encyclopedia/ships/?page_no=${i}`, { headers })
+      ships = ships.concat(Object.values(response.data.data))
+    }
+  }
+  const gameInfo: WowsShipInfoApiResponse = await axios.get(`${process.env.VUE_APP_MS_WG_API}/wows/encyclopedia/info/`, { headers })
+
+  setGameApi({
+    name: 'wows.encyclopedia.ships',
+    data: ships
+  })
+  setGameApi({
+    name: 'wows.encyclopedia.info',
+    data: gameInfo.data.data
+  })
+}
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index f557557..52d71d6 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -43,7 +43,10 @@ import Vuetify, {
   VTextField,
   VChipGroup,
   VChip,
-  VSkeletonLoader
+  VSkeletonLoader,
+  VDialog,
+  VCardText,
+  VCardTitle
 } from 'vuetify/lib'
 
 Vue.use(Vuetify, {
@@ -87,7 +90,10 @@ Vue.use(Vuetify, {
     VTextField,
     VChipGroup,
     VChip,
-    VSkeletonLoader
+    VSkeletonLoader,
+    VCardText,
+    VCardTitle,
+    VDialog
   },
   directives: { }
 })
diff --git a/src/store/index.ts b/src/store/index.ts
index 23631a6..aba675f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,34 +1,34 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import ToolModule from '@/store/modules/tools'
+import AuthenticationModule from '@/store/modules/authentication'
+import CanvasModule from '@/store/modules/canvas'
 import CursorModule from '@/store/modules/cursor'
+import RoomModule from '@/store/modules/room'
 import SocketModule from '@/store/modules/socket'
-import CanvasModule from '@/store/modules/canvas'
 import StageModule from '@/store/modules/stage'
-import RoomModule from '@/store/modules/room'
-import AuthenticationModule from '@/store/modules/authentication'
+import ToolModule from '@/store/modules/tools'
 
 Vue.use(Vuex)
 
 export enum Namespaces {
-  TOOLS = 'tools',
-  CURSOR = 'cursor',
-  SOCKET = 'socket',
+  AUTH = 'authentication',
   CANVAS = 'canvas',
+  CURSOR = 'cursor',
   ROOM = 'room',
-  AUTH = 'authentication',
-  STAGE = 'stage'
+  SOCKET = 'socket',
+  STAGE = 'stage',
+  TOOLS = 'tools'
 }
 
 // eslint-disable-next-line
 export default new Vuex.Store<any>({
   modules: {
-    [Namespaces.TOOLS]: ToolModule,
-    [Namespaces.CURSOR]: CursorModule,
-    [Namespaces.SOCKET]: SocketModule,
+    [Namespaces.AUTH]: AuthenticationModule,
     [Namespaces.CANVAS]: CanvasModule,
+    [Namespaces.CURSOR]: CursorModule,
     [Namespaces.ROOM]: RoomModule,
-    [Namespaces.AUTH]: AuthenticationModule,
-    [Namespaces.STAGE]: StageModule
+    [Namespaces.SOCKET]: SocketModule,
+    [Namespaces.STAGE]: StageModule,
+    [Namespaces.TOOLS]: ToolModule
   }
 })
diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts
index 395bf0d..530d64b 100644
--- a/src/store/modules/authentication.ts
+++ b/src/store/modules/authentication.ts
@@ -2,6 +2,8 @@ import { ActionContext, Module } from 'vuex'
 import axios from 'axios'
 import { verify } from 'jsonwebtoken'
 
+export const JWT_KEY = 'jsonwebtoken'
+
 // Possible regions in the JWT token.
 export enum JWTRegion {
   EU = 'eu',
@@ -10,6 +12,19 @@ export enum JWTRegion {
   SA = 'sa',
 }
 
+export function regionDomain (region: JWTRegion): string {
+  switch (region) {
+    case JWTRegion.EU:
+      return 'eu'
+    case JWTRegion.NA:
+      return 'na'
+    case JWTRegion.RU:
+      return 'ru'
+    case JWTRegion.SA:
+      return 'asia'
+  }
+}
+
 export interface JWT {
   iss: string; // Who issued it. Example: GameTactic.
   aud: string; // For what. Example: GameTactic.
@@ -31,7 +46,10 @@ export interface AuthenticationState {
 
 export enum AuthenticationActions {
   AUTHENTICATE = 'authenticate',
+  CHECK_TOKEN_EXPIRY = 'checkTokenExpiry',
   LOGIN_WG = 'auth_wg',
+  LOGOUT = 'logout',
+  STORE_TOKEN = 'storeToken'
 }
 
 export enum AuthenticationMutation {
@@ -76,10 +94,42 @@ const AuthenticationModule: Module<AuthenticationState, {}> = {
       // TODO: You probably want put this into the `state`. -Niko
       // Im not sure how this should be done, so I did it as I know.
       context.commit('SET_AUTHENTICATION_TOKEN', extended)
+      return extended
+    },
+    async [AuthenticationActions.CHECK_TOKEN_EXPIRY] (context: AuthenticationActionContext) {
+      const response = await axios.get((process.env.VUE_APP_MS_AUTH as string))
+      let isTokenValid = true
+      if (response.status !== 200) {
+        throw Error('Could not reach authentication server.')
+      }
+      const stateJwt = context.state.jwt
+      if (stateJwt) {
+        try {
+          const verifiedToken = verify(stateJwt.encoded, response.data.publicKey) as JWT
+          // eslint-disable-next-line
+          console.log('verifiedToken', verifiedToken)
+          isTokenValid = true
+          // Need to handle tokens that are nearly expired - Sam
+        } catch (error) {
+          // Placeholder until modal has been created - Sam
+          isTokenValid = false
+          context.dispatch(AuthenticationActions.LOGOUT)
+          alert('Your session has expired and you have been logged out. Please login again/')
+        }
+      }
+      return isTokenValid
+    },
+    [AuthenticationActions.STORE_TOKEN] (context: AuthenticationActionContext, token: string) {
+      localStorage.setItem(JWT_KEY, token)
     },
-    async [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: string) {
+    [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, region: JWTRegion) {
       // TODO: This is just placeholder logic. Please check it works. -Niko
-      location.replace(process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${region}/${window.location.href}`)
+      const returnUrl = process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${regionDomain(region)}/${window.location.href}`
+      location.assign(returnUrl)
+    },
+    [AuthenticationActions.LOGOUT] (context: AuthenticationActionContext) {
+      localStorage.removeItem(JWT_KEY)
+      context.commit(AuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
     }
   }
 }
diff --git a/src/store/modules/canvas.ts b/src/store/modules/canvas.ts
index f30352e..f311618 100644
--- a/src/store/modules/canvas.ts
+++ b/src/store/modules/canvas.ts
@@ -2,7 +2,6 @@ import { ActionContext, Module } from 'vuex'
 import { CanvasElement } from '@/types/Canvas'
 import { Tool, Tracker } from '@/tools/Tool'
 import { CursorState } from './cursor'
-import { SocketState } from './socket'
 import { ToolState } from './tools'
 import { StageState } from './stage'
 
@@ -40,7 +39,6 @@ interface CanvasState {
 interface RootState extends CanvasElement {
   canvas: CanvasState;
   cursor: CursorState;
-  socket: SocketState;
   tools: ToolState;
   stage: StageState;
 }
diff --git a/src/store/modules/room.ts b/src/store/modules/room.ts
index 17e9af1..e5f6988 100644
--- a/src/store/modules/room.ts
+++ b/src/store/modules/room.ts
@@ -1,4 +1,5 @@
 import { ActionContext, Module } from 'vuex'
+import { Game, Collection, Tactic, User, PresentationPayload, Api } from './types'
 
 export enum GameName {
   NONE = '',
@@ -7,165 +8,93 @@ export enum GameName {
 }
 
 export enum Locale {
-  ENUK = 'en-uk'
+  CS = 'cs',
+  DA = 'da',
+  DE = 'de',
+  EL = 'el',
+  EN = 'en',
+  ES = 'es',
+  FI = 'fi',
+  FR = 'fr',
+  HU = 'hu',
+  IT = 'it',
+  NL = 'nl',
+  NO = 'no',
+  PL = 'pl',
+  RO = 'ro',
+  RU = 'ru',
+  SR = 'sr',
+  SV = 'sv',
+  TR = 'tr',
+  UK = 'uk',
+  ZH = 'zh'
 }
 
 export enum RoomAction {
-  SET_GAME = 'setGame',
-  SET_LOCALE = 'setLocale'
+  SET_LOCALE = 'setLocale',
+  SET_GAME_NAME = 'setGameName',
+  SET_GAME_API = 'setGameApi',
+  DELETE_GAME_API = 'deleteGameApi',
+  SET_COLLECTIONS = 'setCollections',
+  SET_COLLECTION = 'setCollection',
+  UPDATE_COLLECTION = 'updateCollection',
+  DELETE_COLLECTION = 'deleteCollection',
+  SET_TACTICS = 'setTactics',
+  SET_TACTIC = 'setTactic',
+  UPDATE_TACTIC = 'updateTactic',
+  DELETE_TACTIC = 'deleteTactic',
+  SET_USERS = 'setUsers',
+  SET_USER = 'setUser',
+  UPDATE_USER = 'updateUser',
+  DELETE_USER = 'deleteUser',
+  SET_PRESENTATION = 'setPresentation',
+  SET_IS_PRIVATE = 'setIsPrivate'
 }
 
 export enum RoomMutation {
-  SET_GAME = 'SET_GAME',
-  SET_LOCALE = 'SET_LOCALE'
+  SET_LOCALE = 'SET_LOCALE',
+  SET_GAME_NAME = 'SET_GAME_NAME',
+  SET_GAME_API = 'SET_GAME_API',
+  DELETE_GAME_API = 'DELETE_GAME_API',
+  SET_COLLECTIONS = 'SET_COLLECTIONS',
+  SET_COLLECTION = 'SET_COLLECTION',
+  UPDATE_COLLECTION = 'UPDATE_COLLECTION',
+  DELETE_COLLECTION = 'DELETE_COLLECTION',
+  SET_TACTICS = 'SET_TACTICS',
+  SET_TACTIC = 'SET_TACTIC',
+  UPDATE_TACTIC = 'UPDATE_TACTIC',
+  DELETE_TACTIC = 'DELETE_TACTIC',
+  SET_USERS = 'SET_USERS',
+  SET_USER = 'SET_USER',
+  UPDATE_USER = 'UPDATE_USER',
+  DELETE_USER = 'DELETE_USER',
+  SET_PRESENTATION = 'SET_PRESENTATION',
+  SET_IS_PRIVATE = 'SET_IS_PRIVATE'
 }
 
 export enum RoomGetters {
-  ROOM_STATE = 'roomState',
-}
-
-export interface ShipData {
-  engine: {
-    engine_id_str: string;
-    max_speed: number;
-    engine_id: number;
-  };
-  anti_aircraft: {
-    slots: {
-      distance: number;
-      avg_damage: number;
-      caliber: number;
-      name: string;
-      guns: number;
-    }[];
-  };
-  mobility: {
-    rudder_time: number;
-    total: number;
-    turning_radius: number;
-    max_speed: number;
-  };
-  hull: {
-    hull_id: number;
-    hull_id_str: string;
-    torpedoes_barrels: number;
-    anti_aircraft_barrels: number;
-  };
-  atbas: {
-    distance: number;
-  };
-  artillery: {
-    max_dispersion: number;
-    shot_delay: number;
-    rotation_time: number;
-    distance: number;
-  };
-  torpedoes: {
-    visibility_dist: number;
-    distance: number;
-    torpedoes_id: number;
-    torpedo_name: string;
-    reload_time: number;
-    torpedo_speed: number;
-    rotation_time: number;
-    torpedoes_id_str: string;
-    max_damage: number;
-  };
-  ship_id: number;
-  fire_control: {
-    fire_control_id: number;
-    distance: number;
-    distance_increase: number;
-    fire_control_id_str: string;
-  };
-  weaponry: {
-    anti_aircraft: number;
-    aircraft: number;
-    artillery: number;
-    torpedoes: number;
-  };
-  battle_level_range_max: number;
-  battle_level_range_min: number;
-  flight_control: null;
-  concealment: {
-    total: number;
-    detect_distance_by_plane: number;
-    detect_distance_by_ship: number;
-  };
-  armour: {
-    casemate: {
-      max: number;
-      min: number;
-    };
-  };
-}
-
-export interface Ship {
-  description: string;
-  price_gold: number;
-  ship_id_str: string;
-  has_demo_profile: boolean;
-  images: {
-    small: string;
-    medium: string;
-    large: string;
-    contour: string;
-  };
-  modules: string;
-  modules_tree: string;
-  nation: string;
-  is_premium: boolean;
-  ship_id: number;
-  price_credit: 0;
-  default_profile: string;
-  upgrades: number[];
-  tier: number;
-  next_ships: string;
-  mod_slots: number;
-  type: string;
-  is_special: boolean;
-  name: string;
-}
-
-type ShipTypeImages = {
-  image_premium: string;
-  image: string;
-  image_elite: string;
-}
-
-export interface GameInfo {
-  ships_updated_at: number;
-  ship_types: {
-    [key: string]: string;
-  };
-  languages: {
-    [key: string]: string;
-  };
-  ship_modifications: {
-    [key: string]: string;
-  };
-  ship_modules: {
-    [key: string]: string;
-  };
-  ship_type_images: {
-    [key: string]: ShipTypeImages;
-  };
-  ship_nations: {
-    [key: string]: string;
-  };
-  game_version: string;
-  [key: string]: string | number | { [key: string]: string } | { [key: string]: ShipTypeImages };
-}
-
-export interface Game {
-  name: GameName;
-  ships: Ship[];
-  gameInfo: GameInfo | undefined;
+  LOCALE = 'locale',
+  GAME_NAME = 'gameName',
+  GAME_API = 'gameApi',
+  COLLECTIONS = 'collections',
+  COLLECTION = 'collection',
+  TACTICS = 'tactics',
+  TACTIC = 'tactic',
+  USERS = 'users',
+  USER = 'user',
+  PRESENTATION = 'presentation',
+  IS_PRIVATE = 'isPrivate'
 }
 
 export interface RoomState {
-  game: Game;
   locale: Locale;
+  game: Game;
+  collections: Collection[];
+  tactics: Tactic[];
+  users: User[];
+  isPresentationEnabled: boolean;
+  presentationEnabledBy: string | undefined;
+  isPrivate: boolean;
 }
 
 type CursorActionContext = ActionContext<RoomState, {}>
@@ -174,31 +103,144 @@ const RoomModule: Module<RoomState, {}> = {
   namespaced: true,
   state () {
     return {
+      locale: Locale['EN'],
       game: {
         name: GameName['NONE'],
-        ships: [],
-        gameInfo: undefined
+        api: []
       },
-      locale: Locale['ENUK']
+      collections: [],
+      tactics: [],
+      users: [],
+      isPresentationEnabled: false,
+      presentationEnabledBy: undefined,
+      isPrivate: false
     }
   },
   getters: {
-    [RoomGetters.ROOM_STATE]: state => ({ game: state.game, locale: state.locale })
+    [RoomGetters.LOCALE]: state => state.locale,
+    [RoomGetters.GAME_NAME]: state => state.game.name,
+    [RoomGetters.GAME_API]: state => state.game.api,
+    [RoomGetters.COLLECTIONS]: state => state.collections,
+    [RoomGetters.COLLECTION]: (state) => (id: string) => state.collections.find((collection: Collection) => collection.id === id),
+    [RoomGetters.TACTICS]: state => state.tactics,
+    [RoomGetters.TACTIC]: (state) => (id: string) => state.tactics.find((tactic: Tactic) => tactic.id === id),
+    [RoomGetters.USERS]: state => state.users,
+    [RoomGetters.USER]: (state) => (jti: string) => state.users.find((user: User) => user.jti === jti),
+    [RoomGetters.PRESENTATION]: state => ({ isPresentationEnabled: state.isPresentationEnabled, presentationEnabledBy: state.presentationEnabledBy }),
+    [RoomGetters.IS_PRIVATE]: state => state.isPrivate
   },
   mutations: {
-    [RoomMutation.SET_GAME] (state: RoomState, payload: Game) {
-      state.game = payload
-    },
     [RoomMutation.SET_LOCALE] (state: RoomState, payload: Locale) {
       state.locale = payload
+    },
+    [RoomMutation.SET_GAME_NAME] (state: RoomState, name: GameName) {
+      state.game.name = name
+    },
+    [RoomMutation.SET_GAME_API] (state: RoomState, payload: Api) {
+      state.game.api.push(payload)
+    },
+    [RoomMutation.DELETE_GAME_API] (state: RoomState) {
+      state.game.api = []
+    },
+    [RoomMutation.SET_COLLECTIONS] (state: RoomState, payload: Collection[]) {
+      state.collections = payload
+    },
+    [RoomMutation.SET_COLLECTION] (state: RoomState, payload: Collection) {
+      state.collections.push(payload)
+    },
+    [RoomMutation.UPDATE_COLLECTION] (state: RoomState, payload: Collection) {
+      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === payload.id), 1, payload)
+    },
+    [RoomMutation.DELETE_COLLECTION] (state: RoomState, id: string) {
+      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === id), 1)
+    },
+    [RoomMutation.SET_TACTICS] (state: RoomState, payload: Tactic[]) {
+      state.tactics = payload
+    },
+    [RoomMutation.SET_TACTIC] (state: RoomState, payload: Tactic) {
+      state.tactics.push(payload)
+    },
+    [RoomMutation.UPDATE_TACTIC] (state: RoomState, payload: Tactic) {
+      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === payload.id), 1, payload)
+    },
+    [RoomMutation.DELETE_TACTIC] (state: RoomState, id: string) {
+      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === id), 1)
+    },
+    [RoomMutation.SET_USERS] (state: RoomState, payload: User[]) {
+      state.users = payload
+    },
+    [RoomMutation.SET_USER] (state: RoomState, payload: User) {
+      state.users.push(payload)
+    },
+    [RoomMutation.UPDATE_USER] (state: RoomState, payload: User) {
+      state.users.splice(state.users.findIndex((user: User) => user.jti === payload.jti), 1, payload)
+    },
+    [RoomMutation.DELETE_USER] (state: RoomState, jti: string) {
+      state.users.splice(state.users.findIndex((user: User) => user.jti === jti), 1)
+    },
+    [RoomMutation.SET_PRESENTATION] (state: RoomState, payload: PresentationPayload) {
+      state.isPresentationEnabled = payload.isPresentationEnabled
+      state.presentationEnabledBy = payload.presentationEnabledBy
+    },
+    [RoomMutation.SET_IS_PRIVATE] (state: RoomState, isPrivate: boolean) {
+      state.isPrivate = isPrivate
     }
   },
   actions: {
-    [RoomAction.SET_GAME] (context: CursorActionContext, payload: Game) {
-      context.commit('SET_GAME', payload)
-    },
     [RoomAction.SET_LOCALE] (context: CursorActionContext, payload: Locale) {
       context.commit('SET_LOCALE', payload)
+    },
+    [RoomAction.SET_GAME_NAME] (context: CursorActionContext, name: GameName) {
+      context.commit('SET_GAME_NAME', name)
+    },
+    // eslint-disable-next-line
+    [RoomAction.SET_GAME_API] (context: CursorActionContext, payload: any) {
+      context.commit('SET_GAME_API', payload)
+    },
+    [RoomAction.DELETE_GAME_API] (context: CursorActionContext) {
+      context.commit('DELETE_GAME_API')
+    },
+    [RoomAction.SET_COLLECTIONS] (context: CursorActionContext, payload: Collection[]) {
+      context.commit('SET_COLLECTIONS', payload)
+    },
+    [RoomAction.SET_COLLECTION] (context: CursorActionContext, payload: Collection) {
+      context.commit('SET_COLLECTION', payload)
+    },
+    [RoomAction.UPDATE_COLLECTION] (context: CursorActionContext, payload: Collection) {
+      context.commit('UPDATE_COLLECTION', payload)
+    },
+    [RoomAction.DELETE_COLLECTION] (context: CursorActionContext, id: string) {
+      context.commit('DELETE_COLLECTION', id)
+    },
+    [RoomAction.SET_TACTICS] (context: CursorActionContext, payload: Tactic[]) {
+      context.commit('SET_TACTICS', payload)
+    },
+    [RoomAction.SET_TACTIC] (context: CursorActionContext, payload: Tactic) {
+      context.commit('SET_TACTIC', payload)
+    },
+    [RoomAction.UPDATE_TACTIC] (context: CursorActionContext, payload: Tactic) {
+      context.commit('UPDATE_TACTIC', payload)
+    },
+    [RoomAction.DELETE_TACTIC] (context: CursorActionContext, id: string) {
+      context.commit('DELETE_TACTIC', id)
+    },
+    [RoomAction.SET_USERS] (context: CursorActionContext, payload: User[]) {
+      context.commit('SET_USERS', payload)
+    },
+    [RoomAction.SET_USER] (context: CursorActionContext, payload: User) {
+      context.commit('SET_USER', payload)
+    },
+    [RoomAction.UPDATE_USER] (context: CursorActionContext, payload: User) {
+      context.commit('UPDATE_USER', payload)
+    },
+    [RoomAction.DELETE_USER] (context: CursorActionContext, jti: string) {
+      context.commit('DELETE_USER', jti)
+    },
+    [RoomAction.SET_PRESENTATION] (context: CursorActionContext, payload: PresentationPayload) {
+      context.commit('SET_PRESENTATION', payload)
+    },
+    [RoomAction.SET_IS_PRIVATE] (context: CursorActionContext, isPrivate: boolean) {
+      context.commit('SET_IS_PRIVATE', isPrivate)
     }
   }
 }
diff --git a/src/store/modules/socket.ts b/src/store/modules/socket.ts
index 56101ed..8b09d22 100644
--- a/src/store/modules/socket.ts
+++ b/src/store/modules/socket.ts
@@ -1,36 +1,22 @@
-import { Module } from 'vuex'
-
-export interface SocketState {
-  socket: WebSocket;
-}
+import { Module, ActionContext } from 'vuex'
 
 export enum SocketActions {
-  SEND_MESSAGE = 'sendMessage',
-  SEND_IF_OPEN = 'sendIfOpen'
+  EMIT_MESSAGE = 'emitMessage',
+  JOIN_ROOM = 'joinRoom'
 }
 
-export enum SocketGetters {
-  SOCKET = 'socket',
-  IS_OPEN = 'isOpen'
-}
+type SocketActionContext = ActionContext<{}, {}>;
 
-const SocketModule: Module<SocketState, {}> = {
+const SocketModule: Module<{}, {}> = {
   namespaced: true,
-  state () {
-    return {
-      socket: new WebSocket(process.env.ECHO_SERVER || 'wss://echo.eu.gametactic.eu')
-    }
-  },
-  getters: {
-    [SocketGetters.SOCKET]: state => state.socket,
-    [SocketGetters.IS_OPEN]: state => state.socket.readyState === WebSocket.OPEN
-  },
   actions: {
-    [SocketActions.SEND_MESSAGE]: ({ state }) => (message: string) => state.socket.send(message),
-    [SocketActions.SEND_IF_OPEN]: ({ getters, dispatch }) => async (message: string) => {
-      if (getters.isOpen) {
-        await dispatch(SocketActions.SEND_MESSAGE, message)
-      }
+    [SocketActions.EMIT_MESSAGE] (_context: SocketActionContext, message: string) {
+      const vm: any = this
+      vm._vm.$socket.client.emit('auth', message)
+    },
+    [SocketActions.JOIN_ROOM] (_context: SocketActionContext, id: string) {
+      const vm: any = this
+      vm._vm.$socket.client.emit('join', id)
     }
   }
 }
diff --git a/src/store/modules/types.d.ts b/src/store/modules/types.d.ts
new file mode 100644
index 0000000..097f4dc
--- /dev/null
+++ b/src/store/modules/types.d.ts
@@ -0,0 +1,56 @@
+import { GameName } from './room';
+
+export interface Api {
+  name: string;
+  data: any;
+}
+
+export interface Entity {
+  id: number;
+  text: string;
+  shortText: string;
+  value: string;
+  image: string | undefined;
+  data: any;
+}
+
+export interface Game {
+  name: GameName;
+  api: Api[];
+}
+
+export interface User {
+  jti: string;
+  isRoomOwner: boolean;
+  isAuthN: boolean;
+}
+
+export interface Map {
+  name: string;
+  image: string;
+  description: string;
+  ratio: number;
+}
+
+export interface Tactic {
+  id: string;
+  collectionId: boolean;
+  isLocked: boolean;
+  lockedBy: string | undefined;
+  map: Map;
+  entities: Entity[];
+  createdBy: string;
+}
+
+export interface Collection {
+  id: string;
+  collectionId: string;
+  isLocked: boolean;
+  lockedBy: string | undefined;
+  createdBy: string;
+}
+
+export interface PresentationPayload { 
+  isPresentationEnabled: boolean; 
+  presentationEnabledBy: string; 
+}
\ No newline at end of file
diff --git a/src/tools/Circle.ts b/src/tools/Circle.ts
index 0a06fb5..f08e2b2 100644
--- a/src/tools/Circle.ts
+++ b/src/tools/Circle.ts
@@ -112,6 +112,6 @@ export default class Circle implements CircleInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Erase.ts b/src/tools/Erase.ts
index 79837b2..a2c1302 100644
--- a/src/tools/Erase.ts
+++ b/src/tools/Erase.ts
@@ -73,6 +73,6 @@ export default class Erase implements EraseInterface {
       hasMoved: true,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/FreeDraw.ts b/src/tools/FreeDraw.ts
index 30dcce8..f5d0079 100644
--- a/src/tools/FreeDraw.ts
+++ b/src/tools/FreeDraw.ts
@@ -93,6 +93,6 @@ export default class FreeDraw implements FreeDrawInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Line.ts b/src/tools/Line.ts
index af907cc..9b793c7 100644
--- a/src/tools/Line.ts
+++ b/src/tools/Line.ts
@@ -103,6 +103,6 @@ export default class Line implements LineInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Move.ts b/src/tools/Move.ts
index 763dab9..964fbe7 100644
--- a/src/tools/Move.ts
+++ b/src/tools/Move.ts
@@ -78,6 +78,6 @@ export default class Move implements MoveInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Ping.ts b/src/tools/Ping.ts
index 15ac59a..617daa5 100644
--- a/src/tools/Ping.ts
+++ b/src/tools/Ping.ts
@@ -73,6 +73,6 @@ export default class Ping implements PingInterface {
       hasMoved: true,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Ruler.ts b/src/tools/Ruler.ts
index 1babea5..8cf1f87 100644
--- a/src/tools/Ruler.ts
+++ b/src/tools/Ruler.ts
@@ -100,6 +100,6 @@ export default class Ruler implements RulerInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/tools/Text.ts b/src/tools/Text.ts
index 598b547..d7dcece 100644
--- a/src/tools/Text.ts
+++ b/src/tools/Text.ts
@@ -113,6 +113,6 @@ export default class Text implements TextInterface {
       hasMoved: canvasElement.hasMoved,
       position: canvasElement.position
     }
-    socket.send(JSON.stringify(data))
+    // socket.send(JSON.stringify(data))
   }
 }
diff --git a/src/types/Games/Index.ts b/src/types/Games/Index.ts
index 40f0b20..e0deb07 100644
--- a/src/types/Games/Index.ts
+++ b/src/types/Games/Index.ts
@@ -1,4 +1,7 @@
-interface Item {
+import { JWTRegion } from '@/store/modules/authentication';
+import { GameName } from '@/store/modules/room';
+
+export interface Item {
   text: string;
   shortText: string;
   value: number;
@@ -7,7 +10,7 @@ interface Item {
   data: any;
 }
 
-interface Field {
+export interface Field {
   id: string;
   path: string;
   value: string;
@@ -17,4 +20,8 @@ interface Field {
   suffix: string;
 }
 
-export { Item, Field }
\ No newline at end of file
+export interface ApiHeader {
+  Authorization: string;
+  'X-Region': JWTRegion;
+  'X-Game': GameName;
+}
\ No newline at end of file
diff --git a/src/types/Games/Wows.ts b/src/types/Games/Wows.ts
index 73dbdec..fb3a05f 100644
--- a/src/types/Games/Wows.ts
+++ b/src/types/Games/Wows.ts
@@ -1,6 +1,6 @@
-import { GameInfo, Ship } from '@/store/modules/room';
+import { GameName } from '@/store/modules/room';
 
-interface WowsShipsApiResponse {
+export interface WowsShipsApiResponse {
   data: {
     status: string;
     meta: {
@@ -16,7 +16,7 @@ interface WowsShipsApiResponse {
   };
 }
 
-interface WowsShipInfoApiResponse {
+export interface WowsShipInfoApiResponse {
   data: {
     status: string;
     meta: {
@@ -26,4 +26,136 @@ interface WowsShipInfoApiResponse {
   };
 }
 
-export { WowsShipsApiResponse, WowsShipInfoApiResponse }
\ No newline at end of file
+
+export interface ShipData {
+  engine: {
+    engine_id_str: string;
+    max_speed: number;
+    engine_id: number;
+  };
+  anti_aircraft: {
+    slots: {
+      distance: number;
+      avg_damage: number;
+      caliber: number;
+      name: string;
+      guns: number;
+    }[];
+  };
+  mobility: {
+    rudder_time: number;
+    total: number;
+    turning_radius: number;
+    max_speed: number;
+  };
+  hull: {
+    hull_id: number;
+    hull_id_str: string;
+    torpedoes_barrels: number;
+    anti_aircraft_barrels: number;
+  };
+  atbas: {
+    distance: number;
+  };
+  artillery: {
+    max_dispersion: number;
+    shot_delay: number;
+    rotation_time: number;
+    distance: number;
+  };
+  torpedoes: {
+    visibility_dist: number;
+    distance: number;
+    torpedoes_id: number;
+    torpedo_name: string;
+    reload_time: number;
+    torpedo_speed: number;
+    rotation_time: number;
+    torpedoes_id_str: string;
+    max_damage: number;
+  };
+  ship_id: number;
+  fire_control: {
+    fire_control_id: number;
+    distance: number;
+    distance_increase: number;
+    fire_control_id_str: string;
+  };
+  weaponry: {
+    anti_aircraft: number;
+    aircraft: number;
+    artillery: number;
+    torpedoes: number;
+  };
+  battle_level_range_max: number;
+  battle_level_range_min: number;
+  flight_control: null;
+  concealment: {
+    total: number;
+    detect_distance_by_plane: number;
+    detect_distance_by_ship: number;
+  };
+  armour: {
+    casemate: {
+      max: number;
+      min: number;
+    };
+  };
+}
+
+export interface Ship {
+  description: string;
+  price_gold: number;
+  ship_id_str: string;
+  has_demo_profile: boolean;
+  images: {
+    small: string;
+    medium: string;
+    large: string;
+    contour: string;
+  };
+  modules: string;
+  modules_tree: string;
+  nation: string;
+  is_premium: boolean;
+  ship_id: number;
+  price_credit: 0;
+  default_profile: string;
+  upgrades: number[];
+  tier: number;
+  next_ships: string;
+  mod_slots: number;
+  type: string;
+  is_special: boolean;
+  name: string;
+}
+
+type ShipTypeImages = {
+  image_premium: string;
+  image: string;
+  image_elite: string;
+}
+
+export interface GameInfo {
+  ships_updated_at: number;
+  ship_types: {
+    [key: string]: string;
+  };
+  languages: {
+    [key: string]: string;
+  };
+  ship_modifications: {
+    [key: string]: string;
+  };
+  ship_modules: {
+    [key: string]: string;
+  };
+  ship_type_images: {
+    [key: string]: ShipTypeImages;
+  };
+  ship_nations: {
+    [key: string]: string;
+  };
+  game_version: string;
+  [key: string]: string | number | { [key: string]: string } | { [key: string]: ShipTypeImages };
+}
diff --git a/src/views/Room.vue b/src/views/Room.vue
index 2423f1e..643b4e3 100644
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@@ -20,14 +20,16 @@ import TheToolPanel from '@/components/TheToolPanel.vue'
 import TheCanvas from '@/components/TheCanvas.vue'
 import TheEntityPanel from '@/components/TheEntityPanel.vue'
 import Component from 'vue-class-component'
-import { Prop } from 'vue-property-decorator'
+import { Prop, Watch } from 'vue-property-decorator'
 import Vue from 'vue'
-import { namespace } from 'vuex-class'
+import { namespace, Action } from 'vuex-class'
 import { Namespaces } from '@/store'
 import { EventBus } from '@/event-bus'
 import { VueKonvaStage } from '@/types/Canvas'
+import { AuthenticationGetters, ExtendedJWT } from '@/store/modules/authentication'
+import { Socket } from 'vue-socket.io-extended'
 
-const Socket = namespace(Namespaces.SOCKET)
+const authNamespace = namespace(Namespaces.AUTH)
 
   @Component({
     name: 'Room',
@@ -41,7 +43,15 @@ const Socket = namespace(Namespaces.SOCKET)
   })
 export default class extends Vue {
   @Prop() id!: string
-  @Socket.Getter('socket') socket!: WebSocket
+  @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
+  @authNamespace.Getter(AuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @Action('socket/joinRoom') joinRoom!: (id: string) => void
+  @Socket() // --> listens to the event by method name, e.g. `connect`
+  connect () {
+    // eslint-disable-next-line
+    console.log('connection established')
+    this.joinRoom(this.id)
+  }
 
   $refs!: {
     app: HTMLDivElement;
@@ -49,9 +59,21 @@ export default class extends Vue {
   }
 
   created () {
-    this.socket.onopen = () => {
-      // eslint-disable-next-line @typescript-eslint/camelcase
-      this.socket.send(JSON.stringify({ join_room: this.id }))
+    this.initialiseSocketIO(this.isAuth)
+  }
+
+  @Watch('isAuth')
+  onPropertyChanged (isAuth: boolean) {
+    this.initialiseSocketIO(isAuth)
+  }
+
+  initialiseSocketIO (isAuth?: boolean) {
+    if (isAuth) {
+      // start socket.io with registered user
+      this.$socket.client.io.opts.query = { Authorization: this.jwt.encoded } // First set the token.
+      this.$socket.client.open() // Then open the socket and use it anywhere else.
+    } else {
+      // start socket.io with anonymous user
     }
   }