From 9dc3873981ba89490e87a0be2bb4966c34b81530 Mon Sep 17 00:00:00 2001
From: samuel_bryan <bryan.samuel1@hotmail.co.uk>
Date: Mon, 25 May 2020 11:32:16 +0100
Subject: [PATCH 1/2] 207 - Set up state ready for sockets

---
 src/App.vue                                   | 102 +++++-----
 src/components/TheCanvas.vue                  |  44 ++--
 src/components/TheEntityPanel.vue             |  19 +-
 src/components/TheToolPanel.vue               |  10 +-
 src/components/canvas-tools/RedoContainer.vue |  23 ++-
 src/components/canvas-tools/ToolContainer.vue |  57 +++---
 src/components/canvas-tools/UndoContainer.vue |  61 +++---
 .../canvas-tools/templates/Circle.vue         |  18 +-
 .../canvas-tools/templates/FreeDraw.vue       |  11 +-
 .../canvas-tools/templates/Line.vue           |  17 +-
 .../canvas-tools/templates/Ruler.vue          |  13 +-
 .../canvas-tools/templates/Text.vue           |  11 +-
 .../templates/template-tools/ColourPicker.vue |   1 +
 .../games/{Wot.vue => TheWot.vue}             |   4 +-
 .../games/{Wows.vue => TheWows.vue}           |  30 +--
 src/components/entity-panel/index.ts          |   4 +-
 .../entity-panel/sections/TheCreateEntity.vue |   8 +-
 src/components/navigation/LoginCard.vue       |  50 -----
 src/components/navigation/TheCanvasTools.vue  |  37 ++--
 src/components/navigation/TheLoginCard.vue    |  54 +++++
 src/components/navigation/TheNavLarge.vue     |  14 +-
 src/components/navigation/TheNavSmall.vue     |  14 +-
 src/components/navigation/TheUserMenu.vue     |  86 ++++----
 .../navigation/buttons/TheManageRoom.vue      |   9 +-
 .../buttons/ThePresentationMode.vue           |   9 +-
 .../navigation/buttons/TheRoomSave.vue        |   9 +-
 .../overlays/TheCreateNewTacticOverlay.vue    |  71 ++++---
 .../overlays/TheUpdateTacticOverlay.vue       |  26 ++-
 .../tactic-selector/TheTacticSelector.vue     |  24 ++-
 src/games/wows/api.ts                         |  14 +-
 src/main.ts                                   |  12 +-
 src/mixins/CanvasSockets.ts                   |  32 +--
 src/mixins/RoomSockets.ts                     |  22 +-
 src/mixins/StageWatcher.ts                    |  29 +--
 src/mixins/TacticWatcher.ts                   |  42 ++--
 src/router/index.ts                           |   8 +-
 src/store/index.ts                            |  60 +++---
 src/store/modules/app/authentication.ts       | 137 +++++++++++++
 src/store/modules/app/canvasEntity.ts         |  95 +++++++++
 src/store/modules/app/layer.ts                |  84 ++++++++
 src/store/modules/app/room.ts                 | 100 +++++++++
 src/store/modules/app/stage.ts                | 106 ++++++++++
 src/store/modules/{ => app}/tools.ts          | 100 ++++-----
 src/store/modules/authentication.ts           | 145 -------------
 src/store/modules/canvasEntity.ts             |  94 ---------
 src/store/modules/layer.ts                    |  84 --------
 src/store/modules/room.ts                     | 171 ----------------
 src/store/modules/{ => socket}/canvas.ts      |  60 +++---
 .../modules/{socket.ts => socket/index.ts}    |   0
 src/store/modules/socket/room.ts              | 102 ++++++++++
 src/store/modules/socket/stage.ts             | 116 +++++++++++
 src/store/modules/socket/tactic.ts            | 118 +++++++++++
 src/store/modules/socket/user.ts              |  70 +++++++
 src/store/modules/stage.ts                    | 192 ------------------
 src/store/modules/tactic.ts                   | 118 -----------
 src/store/modules/user.ts                     |  70 -------
 src/store/{modules => }/types.ts              |  10 +-
 src/tools/Tool.ts                             |  62 +++---
 src/tools/shapes/CircleCreator.ts             |   1 +
 src/tools/shapes/EntityCreator.ts             |   1 +
 src/tools/shapes/FreeDrawCreator.ts           |   1 +
 src/tools/shapes/LineCreator.ts               |   3 +
 src/tools/shapes/PingCreator.ts               |   1 +
 src/tools/shapes/RulerCreator.ts              |   6 +-
 src/tools/shapes/Shape.ts                     |  13 +-
 src/tools/shapes/TextCreator.ts               |   1 +
 src/tools/util/CenterCanvas.ts                |   8 +-
 src/tools/util/MapCanvas.ts                   |   9 +-
 src/types/Games/Index.ts                      |   6 +-
 src/types/Games/Wows/Maps.ts                  |   2 +-
 src/util/HandleRenderShapes.ts                |  23 ++-
 src/util/HandleUndoRedo.ts                    |  35 ++--
 src/util/PointerEventMapper.ts                |  10 +-
 src/views/{Index.vue => TheIndex.vue}         |  13 +-
 src/views/{Room.vue => TheRoom.vue}           |  86 ++++----
 75 files changed, 1748 insertions(+), 1560 deletions(-)
 rename src/components/entity-panel/games/{Wot.vue => TheWot.vue} (79%)
 rename src/components/entity-panel/games/{Wows.vue => TheWows.vue} (84%)
 delete mode 100644 src/components/navigation/LoginCard.vue
 create mode 100644 src/components/navigation/TheLoginCard.vue
 create mode 100644 src/store/modules/app/authentication.ts
 create mode 100644 src/store/modules/app/canvasEntity.ts
 create mode 100644 src/store/modules/app/layer.ts
 create mode 100644 src/store/modules/app/room.ts
 create mode 100644 src/store/modules/app/stage.ts
 rename src/store/modules/{ => app}/tools.ts (50%)
 delete mode 100644 src/store/modules/authentication.ts
 delete mode 100644 src/store/modules/canvasEntity.ts
 delete mode 100644 src/store/modules/layer.ts
 delete mode 100644 src/store/modules/room.ts
 rename src/store/modules/{ => socket}/canvas.ts (51%)
 rename src/store/modules/{socket.ts => socket/index.ts} (100%)
 create mode 100644 src/store/modules/socket/room.ts
 create mode 100644 src/store/modules/socket/stage.ts
 create mode 100644 src/store/modules/socket/tactic.ts
 create mode 100644 src/store/modules/socket/user.ts
 delete mode 100644 src/store/modules/stage.ts
 delete mode 100644 src/store/modules/tactic.ts
 delete mode 100644 src/store/modules/user.ts
 rename src/store/{modules => }/types.ts (91%)
 rename src/views/{Index.vue => TheIndex.vue} (50%)
 rename src/views/{Room.vue => TheRoom.vue} (57%)

diff --git a/src/App.vue b/src/App.vue
index 8a37dfb..71d0411 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,69 +8,67 @@
 import Component from 'vue-class-component'
 import Vue from 'vue'
 import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-import { Api } from './store/modules/types'
+import { AppRoomAction, Locale } from '@/store/modules/app/room'
+import { SocketRoomAction, Game, SocketRoomGetters } from '@/store/modules/socket/room'
+import { AppAuthenticationActions, AppAuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/app/authentication'
+import { Api } from './store/types'
 import { getWowsApiData } from '@/games/wows/api'
-import { GameName, Locale, RoomAction, RoomGetters } from '@/store/modules/room'
-import { AuthenticationActions, AuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/authentication'
+import { Namespaces } from '@/store'
 
-const authNamespace = namespace(Namespaces.AUTH)
-const roomNamespace = namespace(Namespaces.ROOM)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
-  @Component({
-    name: 'TheApp'
-  })
+@Component({
+  name: 'TheApp'
+})
 export default class TheApp extends Vue {
-    @roomNamespace.Action(RoomAction.SET_GAME_NAME) setGameName!: (name: string) => void
-    @roomNamespace.Action(RoomAction.SET_GAME_API) setGameApi!: (api: Api) => void
-    @roomNamespace.Action(RoomAction.SET_LOCALE) setLocale!: (locale: Locale) => void
-    @roomNamespace.Getter(RoomGetters.GAME_NAME) game!: GameName
-    @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
-    @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
-    @authNamespace.Action(AuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
-    @authNamespace.Action(AuthenticationActions.LOAD_PROVIDERS) loadProviders!: () => void
-    @authNamespace.Getter(AuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @SocketRoom.Action(SocketRoomAction.SET_GAME) setGame!: (name: string) => void
+  @AppRoom.Action(AppRoomAction.ADD_API) addApi!: (api: Api) => void
+  @AppRoom.Action(AppRoomAction.SET_LOCALE) setLocale!: (locale: Locale) => void
+  @SocketRoom.Getter(SocketRoomGetters.GAME) game!: Game
+  @AppAuthentication.Action(AppAuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
+  @AppAuthentication.Action(AppAuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
+  @AppAuthentication.Action(AppAuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
 
-    async created () {
-      this.setGameName(GameName['WOWS'])
-      this.setLocale(Locale['EN'])
-      this.initAuthentication()
-    }
+  async created () {
+    this.setGame(Game['WOWS'])
+    this.setLocale(Locale['EN'])
+    this.initAuthentication()
+  }
 
-    async initAuthentication () {
-      this.loadProviders()
-      const localToken = localStorage.getItem(JWT_KEY)
+  async initAuthentication () {
+    const localToken = localStorage.getItem(JWT_KEY)
 
-      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 GameName['WOWS']:
-              await getWowsApiData(localToken, this.setGameApi)
-              break
-            default:
-              break
-          }
+    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 Game['WOWS']:
+            await getWowsApiData(localToken, this.addApi)
+            break
+          default: break
         }
       }
     }
+  }
 }
 </script>
 <style lang="scss">
-  #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    height: 100vh;
-    background-color: $room-secondary;
-    font-size: $app-fontsize;
-  }
-
-  html, .v-application--wrap {
-    overflow: hidden;
-  }
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  background-color: $room-secondary;
+  font-size: $app-fontsize;
+}
+html, .v-application--wrap {
+  overflow: hidden;
+}
 </style>
diff --git a/src/components/TheCanvas.vue b/src/components/TheCanvas.vue
index 757015e..934f616 100644
--- a/src/components/TheCanvas.vue
+++ b/src/components/TheCanvas.vue
@@ -19,36 +19,46 @@
 import Component, { mixins } from 'vue-class-component'
 import { Tool } from '@/tools/Tool'
 import { CanvasElement, VueKonvaLayer, VueKonvaStage } from '@/types/Canvas'
-import { Action, Getter } from 'vuex-class'
-import { ToolGetters } from '@/store/modules/tools'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { namespace } from 'vuex-class'
+import { AppToolGetters } from '@/store/modules/app/tools'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import Konva from 'konva'
 import { EventBus } from '@/event-bus'
 import PointerEventMapper, { CustomStageConfig } from '@/util/PointerEventMapper'
 import { KonvaPointerEvent } from 'konva/types/PointerEvents'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
-import { StageActions, StageGetters } from '@/store/modules/stage'
-import { LayerActions, LayerGetters } from '@/store/modules/layer'
-import { CanvasEntityGetters, CanvasEntityState } from '@/store/modules/canvasEntity'
+import { AppStageActions, AppStageGetters } from '@/store/modules/app/stage'
+import { SocketStageActions, SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppLayerActions, AppLayerGetters } from '@/store/modules/app/layer'
+import { AppCanvasEntityGetters, AppCanvasEntityState } from '@/store/modules/app/canvasEntity'
 import CanvasSockets from '@/mixins/CanvasSockets'
 import StageWatcher from '@/mixins/StageWatcher'
+import { Namespaces } from '@/store'
+
+const AppCanvasEntity = namespace(Namespaces.APP_CANVAS_ENTITY)
+const AppLayer = namespace(Namespaces.APP_LAYER)
+const AppStage = namespace(Namespaces.APP_STAGE)
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+
 @Component({
   name: 'TheCanvas',
   mixins: [CanvasSockets, StageWatcher]
 })
 
 export default class TheCanvas extends mixins(CanvasSockets, StageWatcher) {
-  @Getter(`tools/${ToolGetters.ENABLED_TOOL}`) enabledTool!: Tool
-  @Getter(`tools/${ToolGetters.TOOLS}`) tools!: Tool[]
-  @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT}`) addCanvasElement!: (canvasElement: CanvasElement) => void
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS}`) canvasElements!: CanvasElement[]
-  @Getter(`stage/${StageGetters.STAGE_ZOOM}`) stageZoom!: number
-  @Getter(`stage/${StageGetters.STAGE_CONFIG}`) stageConfig!: CustomStageConfig
-  @Action(`layer/${LayerActions.LAYER_SET}`) setLayer!: (layer: Konva.Layer) => void
-  @Getter(`layer/${LayerGetters.LAYER}`) layerNode!: Konva.Layer
-  @Action(`stage/${StageActions.SET_STAGE}`) setStage!: (stage: Konva.Stage) => void
-  @Getter(`stage/${StageGetters.STAGE}`) stage!: Konva.Stage
-  @Getter(`canvasEntity/${CanvasEntityGetters.CANVAS_ENTITY}`) canvasEntity!: CanvasEntityState
+  @AppCanvasEntity.Getter(AppCanvasEntityGetters.CANVAS_ENTITY) canvasEntity!: AppCanvasEntityState
+  @AppTools.Getter(AppToolGetters.ENABLED_TOOL) enabledTool!: Tool
+  @AppTools.Getter(AppToolGetters.TOOLS) tools!: Tool[]
+  @AppLayer.Getter(AppLayerGetters.LAYER) layerNode!: Konva.Layer
+  @AppStage.Getter(AppStageGetters.STAGE) stage!: Konva.Stage
+  @AppStage.Getter(AppStageGetters.STAGE_ZOOM) stageZoom!: number
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS) canvasElements!: CanvasElement[]
+  @SocketStage.Getter(SocketStageGetters.STAGE_CONFIG) stageConfig!: CustomStageConfig
+  @AppLayer.Action(AppLayerActions.LAYER_SET) setLayer!: (layer: Konva.Layer) => void
+  @AppStage.Action(AppStageActions.SET_STAGE) setStage!: (stage: Konva.Stage) => void
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT) addCanvasElement!: (canvasElement: CanvasElement) => void
 
   $refs!: {
     layer: VueKonvaLayer;
diff --git a/src/components/TheEntityPanel.vue b/src/components/TheEntityPanel.vue
index de4a5dd..1189a97 100644
--- a/src/components/TheEntityPanel.vue
+++ b/src/components/TheEntityPanel.vue
@@ -9,8 +9,8 @@
           tile
           class="custom-entity-panel"
         >
-          <wows-panel v-if="gameName === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
-          <wot-panel v-if="gameName === 'wot'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wows-panel v-if="game === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wot-panel v-if="game === '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[gameName]"></v-img>
+                <v-img :src="images[game]"></v-img>
               </v-list-item-avatar>
             </v-list-item>
             <v-divider></v-divider>
@@ -83,9 +83,14 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { RoomGetters, GameName } from '@/store/modules/room'
-import { Getter } from 'vuex-class'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { SocketRoomGetters, Game } from '@/store/modules/socket/room'
+import { namespace } from 'vuex-class'
 import { WowsPanel, WotPanel } from './entity-panel'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
 export interface MenuItem {
   key: number;
@@ -103,8 +108,8 @@ export interface MenuItem {
   }
 })
 export default class MapButtons extends Vue {
-  @Getter(`room/${RoomGetters.GAME_NAME}`) private readonly gameName!: GameName;
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @SocketRoom.Getter(SocketRoomGetters.GAME) private readonly game!: Game;
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
 
   show = false
 
diff --git a/src/components/TheToolPanel.vue b/src/components/TheToolPanel.vue
index 5fef853..d9c8aee 100644
--- a/src/components/TheToolPanel.vue
+++ b/src/components/TheToolPanel.vue
@@ -26,8 +26,11 @@ import LineTemplate from './canvas-tools/templates/Line.vue'
 import { Tool } from '@/tools/Tool'
 import CircleTemplate from './canvas-tools/templates/Circle.vue'
 import TextTemplate from './canvas-tools/templates/Text.vue'
-import { Action } from 'vuex-class'
-import { ToolsAction } from '@/store/modules/tools'
+import { namespace } from 'vuex-class'
+import { AppToolsAction } from '@/store/modules/app/tools'
+import { Namespaces } from '@/store'
+
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'TheToolPanel',
@@ -43,7 +46,7 @@ import { ToolsAction } from '@/store/modules/tools'
   }
 })
 export default class TheToolPanel extends Vue {
-  @Action(`tools/${ToolsAction.DISABLE_TOOL}`) disableTool!: () => void
+  @AppTools.Action(AppToolsAction.DISABLE_TOOL) disableTool!: () => void
 
   tools: Tool[] = []
 
@@ -65,6 +68,7 @@ export default class TheToolPanel extends Vue {
   width: 72px;
   background: transparent;
 }
+
 .custom-tool-bar {
   border-radius: 0;
 }
diff --git a/src/components/canvas-tools/RedoContainer.vue b/src/components/canvas-tools/RedoContainer.vue
index 3b489b2..9cf39a6 100644
--- a/src/components/canvas-tools/RedoContainer.vue
+++ b/src/components/canvas-tools/RedoContainer.vue
@@ -22,23 +22,27 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { Action, Getter } from 'vuex-class'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { namespace } from 'vuex-class'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 import HandleUndoRedo from '@/util/HandleUndoRedo'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
-import { RoomGetters } from '../../store/modules/room'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_TOOLS)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
 
 @Component({
-  name: 'RedoContainer.vue'
+  name: 'RedoContainer'
 })
 export default class RedoContainer extends Vue {
   @Prop() private icon!: string
   @Prop() private toolname!: string
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`) canvasElementsHistory!: CanvasElementHistory[]
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS}`) canvasElements!: CanvasElement[]
-  @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`) addCanvasElementHistory!: (canvasElement: CanvasElement) => void
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY) canvasElementsHistory!: CanvasElementHistory[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS) canvasElements!: CanvasElement[]
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY) addCanvasElementHistory!: (canvasElement: CanvasElement) => void
 
   onButtonClickHandler () {
     const handleUndoRedo = new HandleUndoRedo()
@@ -66,14 +70,17 @@ export default class RedoContainer extends Vue {
   margin-left: 5px;
   box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
 }
+
 .tools-caret-down {
   right:2px;
   transition:0.2s ease-in-out;
   margin-top:28px;
 }
+
 .rotate90 {
   transform: rotate(-90deg);
 }
+
 .redoBtn {
   background-color: white;
   padding: 0 12px;
diff --git a/src/components/canvas-tools/ToolContainer.vue b/src/components/canvas-tools/ToolContainer.vue
index 5318d93..194c462 100644
--- a/src/components/canvas-tools/ToolContainer.vue
+++ b/src/components/canvas-tools/ToolContainer.vue
@@ -27,7 +27,7 @@
               <v-icon dense :color="iconColour">{{icon}}</v-icon>
             </v-btn>
           </template>
-          <span>{{ $t(`tool.container.${toolName}`) }}</span>
+          <span>{{ $t(`tool.container.${toolname}`) }}</span>
         </v-tooltip>
         <v-btn
           x-small
@@ -67,47 +67,45 @@
         <v-icon dense :color="iconColour">{{icon}}</v-icon>
       </v-btn>
     </template>
-    <span>{{ $t(`tool.container.${toolName}`) }}</span>
+    <span>{{ $t(`tool.container.${toolname}`) }}</span>
   </v-tooltip>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
-import { namespace, Getter } from 'vuex-class'
+import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
-import { RoomGetters } from '../../store/modules/room'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
+import { AppRoomGetters } from '@/store/modules/app/room'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+
+interface MenuElement extends Vue {
+  isActive: boolean;
+}
 
 @Component({
-  name: 'ToolContainer',
-  data: function () {
-    return {
-      isActive: false
-    }
-  }
+  name: 'ToolContainer'
 })
 export default class ToolContainer extends Vue {
   @Prop() private icon!: string
   @Prop() private popout!: boolean
   @Prop() private toolname!: string
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
-  @Tools.Action(ToolsAction.ENABLE_TOOL) enableTool!: (toolName: string) => void
-  @Tools.Action(ToolsAction.DISABLE_TOOL) disableTool!: () => void
-  @Tools.Getter(ToolGetters.ENABLED_TOOL) enabledTool?: Tool
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @AppTools.Getter(AppToolGetters.ENABLED_TOOL) enabledTool?: Tool
+  @AppTools.Action(AppToolsAction.ENABLE_TOOL) enableTool!: (toolname: string) => void
+  @AppTools.Action(AppToolsAction.DISABLE_TOOL) disableTool!: () => void
+
+  isActive = false
 
   getIsActive (): boolean {
     const menu = this.$refs['menu'] as MenuElement
     if (menu) {
-      this.$data.isActive = menu.isActive
+      this.isActive = menu.isActive
     }
-    return this.$data.isActive
-  }
-
-  get toolName (): string {
-    return this.toolname
+    return this.isActive
   }
 
   get iconColour (): string {
@@ -119,7 +117,7 @@ export default class ToolContainer extends Vue {
   }
 
   get isEnabledButtonClass (): string {
-    if (this.$data.isActive) {
+    if (this.isActive) {
       return 'px-3'
     } else {
       return 'px-0'
@@ -140,16 +138,12 @@ export default class ToolContainer extends Vue {
     }
   }
 }
-
-interface MenuElement extends Vue {
-  isActive: boolean;
-}
-
 </script>
 <style scoped lang="scss">
 .tools-caret-down-active {
   width:24px;
 }
+
 .tools-caret-down {
   margin-top:3px;
   border-radius: 0px 8px 8px 0px;
@@ -159,21 +153,27 @@ interface MenuElement extends Vue {
   color: white;
   transition:0.2s ease-in-out;
 }
+
 .rotate90 {
   transform: rotate(-90deg);
 }
+
 .v-btn--active {
   background-color: $room-primary;
 }
+
 .custom-btn-disabled::before {
   opacity: 0;
 }
+
 .custom-btn-disabled {
   background-color: rgba(0, 0, 0, 0);
 }
+
 .custom-btn-disabled .v-icon {
   color: var(--v-primary-base) !important; // override
 }
+
 .border-btn {
   border-color: rgba(0, 0, 0, 0.12);
   border-style:solid;
@@ -185,6 +185,7 @@ interface MenuElement extends Vue {
 .custom-hide-text {
   display: block;
 }
+
 @media screen and (max-height: 450px) {
   .custom-hide-text {
     display: none;
diff --git a/src/components/canvas-tools/UndoContainer.vue b/src/components/canvas-tools/UndoContainer.vue
index 6b1a631..9dc7e29 100644
--- a/src/components/canvas-tools/UndoContainer.vue
+++ b/src/components/canvas-tools/UndoContainer.vue
@@ -23,43 +23,47 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { Action, Getter } from 'vuex-class'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { namespace } from 'vuex-class'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 import HandleUndoRedo from '@/util/HandleUndoRedo'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
-import { RoomGetters } from '../../store/modules/room'
+import { AppRoomGetters } from '../../store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
-  name: 'UndoContainer.vue'
+  name: 'UndoContainer'
 })
 export default class UndoContainer extends Vue {
-    @Prop() private icon!: string
-    @Prop() private toolname!: string
-    @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
-    @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`) canvasElementsHistory!: CanvasElementHistory[]
-    @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS}`) canvasElements!: CanvasElement[]
-    @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`) addCanvasElementHistory!: (canvasElement: CanvasElement) => void
-    @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID}`) canvasElementHistoryById!: (id: string) => CanvasElementHistory | void
-    @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENT_BY_ID}`) canvasElementById!: (id: string) => CanvasElement | void
+  @Prop() private icon!: string
+  @Prop() private toolname!: string
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY) canvasElementsHistory!: CanvasElementHistory[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS) canvasElements!: CanvasElement[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID) canvasElementHistoryById!: (id: string) => CanvasElementHistory | void
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENT_BY_ID) canvasElementById!: (id: string) => CanvasElement | void
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY) addCanvasElementHistory!: (canvasElement: CanvasElement) => void
 
-    onButtonClickHandler () {
-      const handleUndoRedo = new HandleUndoRedo()
-      handleUndoRedo.handleUndoRedo('Undo')
-      new HandleRenderShapes(this.$store).handle()
-    }
+  onButtonClickHandler () {
+    const handleUndoRedo = new HandleUndoRedo()
+    handleUndoRedo.handleUndoRedo('Undo')
+    new HandleRenderShapes(this.$store).handle()
+  }
 
-    get isDisabled (): boolean {
-      return new HandleUndoRedo().findUndo([...this.canvasElementsHistory]) === undefined
-    }
+  get isDisabled (): boolean {
+    return new HandleUndoRedo().findUndo([...this.canvasElementsHistory]) === undefined
+  }
 
-    created () {
-      window.addEventListener('keydown', (e) => {
-        if (e.ctrlKey && e.key === 'z') {
-          this.onButtonClickHandler()
-        }
-      })
-    }
+  created () {
+    window.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.key === 'z') {
+        this.onButtonClickHandler()
+      }
+    })
+  }
 }
 
 </script>
@@ -68,14 +72,17 @@ export default class UndoContainer extends Vue {
   margin-left: 5px;
   box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
 }
+
 .tools-caret-down {
   right:2px;
   transition:0.2s ease-in-out;
   margin-top:28px;
 }
+
 .rotate90 {
   transform: rotate(-90deg);
 }
+
 .undoBtn {
   background-color: white;
   padding: 0 12px;
diff --git a/src/components/canvas-tools/templates/Circle.vue b/src/components/canvas-tools/templates/Circle.vue
index 2d7e9bf..7cf60c3 100644
--- a/src/components/canvas-tools/templates/Circle.vue
+++ b/src/components/canvas-tools/templates/Circle.vue
@@ -65,24 +65,24 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 import ColourPicker from '@/components/canvas-tools/templates/template-tools/ColourPicker.vue'
 import SizePicker from '@/components/canvas-tools/templates/template-tools/SizePicker.vue'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'DrawCircle',
   components: { SizePicker, ColourPicker }
 })
 export default class PopoutButton extends Vue {
-  @Tools.Getter(ToolGetters.TOOL) findTool!: (name: string) => Tool
-  @Tools.Action(ToolsAction.SET_SIZE) setSize!: (size: number) => void
-  @Tools.Action(ToolsAction.SET_COLOUR) setColour!: (colour: string) => void
-  @Tools.Action(ToolsAction.SET_SHOW_RADIUS) setShowRadius!: (showRadius: boolean) => void
-  @Tools.Action(ToolsAction.SET_OUTLINE_COLOUR) setOutlineColour!: (outlineColour: string) => void
-  @Tools.Action(ToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
-  @Tools.Action(ToolsAction.SET_STROKE_STYLE) setStrokeStyle!: (strokeStyle: number) => void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool
+  @AppTools.Action(AppToolsAction.SET_SIZE) setSize!: (size: number) => void
+  @AppTools.Action(AppToolsAction.SET_COLOUR) setColour!: (colour: string) => void
+  @AppTools.Action(AppToolsAction.SET_SHOW_RADIUS) setShowRadius!: (showRadius: boolean) => void
+  @AppTools.Action(AppToolsAction.SET_OUTLINE_COLOUR) setOutlineColour!: (outlineColour: string) => void
+  @AppTools.Action(AppToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
+  @AppTools.Action(AppToolsAction.SET_STROKE_STYLE) setStrokeStyle!: (strokeStyle: number) => void
 
   transparentSwatches = [
     ['#CE000080', '#40476D80'],
diff --git a/src/components/canvas-tools/templates/FreeDraw.vue b/src/components/canvas-tools/templates/FreeDraw.vue
index aaf7b89..525820d 100644
--- a/src/components/canvas-tools/templates/FreeDraw.vue
+++ b/src/components/canvas-tools/templates/FreeDraw.vue
@@ -20,21 +20,20 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 import ColourPicker from '@/components/canvas-tools/templates/template-tools/ColourPicker.vue'
 import SizePicker from '@/components/canvas-tools/templates/template-tools/SizePicker.vue'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'FreeDraw',
-  computed: {},
   components: { SizePicker, ColourPicker }
 })
 export default class PopoutButton extends Vue {
-  @Tools.Getter(ToolGetters.TOOL) findTool!: (name: string) => Tool
-  @Tools.Action(ToolsAction.SET_COLOUR) setColour!: (colour: string) => void
-  @Tools.Action(ToolsAction.SET_SIZE) setSize!: (size: number) => void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool
+  @AppTools.Action(AppToolsAction.SET_COLOUR) setColour!: (colour: string) => void
+  @AppTools.Action(AppToolsAction.SET_SIZE) setSize!: (size: number) => void
 
   get penSize () {
     return this.findTool('freeDraw').size || 5
diff --git a/src/components/canvas-tools/templates/Line.vue b/src/components/canvas-tools/templates/Line.vue
index f13734e..43e7092 100644
--- a/src/components/canvas-tools/templates/Line.vue
+++ b/src/components/canvas-tools/templates/Line.vue
@@ -82,24 +82,23 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 import ColourPicker from '@/components/canvas-tools/templates/template-tools/ColourPicker.vue'
 import SizePicker from '@/components/canvas-tools/templates/template-tools/SizePicker.vue'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'StraightLine',
-  computed: {},
   components: { SizePicker, ColourPicker }
 })
 export default class PopoutButton extends Vue {
-  @Tools.Getter(ToolGetters.TOOL) findTool!: (name: string) => Tool
-  @Tools.Action(ToolsAction.SET_COLOUR) setColour!: (colour: string) => void
-  @Tools.Action(ToolsAction.SET_SIZE) setSize!: (size: number) => void
-  @Tools.Action(ToolsAction.SET_END_STYLE) setEndStyle!: (endStyle: string) => void
-  @Tools.Action(ToolsAction.SET_STROKE_STYLE) setStrokeStyle!: (strokeStyle: number) => void
-  @Tools.Action(ToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool
+  @AppTools.Action(AppToolsAction.SET_COLOUR) setColour!: (colour: string) => void
+  @AppTools.Action(AppToolsAction.SET_SIZE) setSize!: (size: number) => void
+  @AppTools.Action(AppToolsAction.SET_END_STYLE) setEndStyle!: (endStyle: string) => void
+  @AppTools.Action(AppToolsAction.SET_STROKE_STYLE) setStrokeStyle!: (strokeStyle: number) => void
+  @AppTools.Action(AppToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
 
   get lineSize () {
     return this.findTool('line').size || 5
diff --git a/src/components/canvas-tools/templates/Ruler.vue b/src/components/canvas-tools/templates/Ruler.vue
index be6c5b9..675a65b 100644
--- a/src/components/canvas-tools/templates/Ruler.vue
+++ b/src/components/canvas-tools/templates/Ruler.vue
@@ -23,18 +23,17 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
-  name: 'Ruler',
-  computed: {}
+  name: 'Ruler'
 })
 export default class PopoutButton extends Vue {
-  @Tools.Getter(ToolGetters.TOOL) findTool!: (name: string) => Tool
-  @Tools.Action(ToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
-  @Tools.Action(ToolsAction.SET_SHOW_CIRCLE) setShowCircle!: (showCircle: boolean) => void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool
+  @AppTools.Action(AppToolsAction.SET_TEMPORARY) setTemporary!: (temporary: boolean) => void
+  @AppTools.Action(AppToolsAction.SET_SHOW_CIRCLE) setShowCircle!: (showCircle: boolean) => void
 
   get rulerTemporary (): boolean {
     return !this.findTool('ruler').temporary || false
diff --git a/src/components/canvas-tools/templates/Text.vue b/src/components/canvas-tools/templates/Text.vue
index 5ad5bd2..561610f 100644
--- a/src/components/canvas-tools/templates/Text.vue
+++ b/src/components/canvas-tools/templates/Text.vue
@@ -20,21 +20,20 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Tool } from '@/tools/Tool'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 import ColourPicker from '@/components/canvas-tools/templates/template-tools/ColourPicker.vue'
 import SizePicker from '@/components/canvas-tools/templates/template-tools/SizePicker.vue'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'Freedraw',
-  computed: {},
   components: { SizePicker, ColourPicker }
 })
 export default class PopoutButton extends Vue {
-  @Tools.Getter(ToolGetters.TOOL) findTool!: (name: string) => Tool
-  @Tools.Action(ToolsAction.SET_COLOUR) setColour!: (colour: string) => void
-  @Tools.Action(ToolsAction.SET_SIZE) setSize!: (size: number) => void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool
+  @AppTools.Action(AppToolsAction.SET_COLOUR) setColour!: (colour: string) => void
+  @AppTools.Action(AppToolsAction.SET_SIZE) setSize!: (size: number) => void
 
   get textSize () {
     return this.findTool('text').size || 5
diff --git a/src/components/canvas-tools/templates/template-tools/ColourPicker.vue b/src/components/canvas-tools/templates/template-tools/ColourPicker.vue
index 1a749d0..e2dbcd4 100644
--- a/src/components/canvas-tools/templates/template-tools/ColourPicker.vue
+++ b/src/components/canvas-tools/templates/template-tools/ColourPicker.vue
@@ -39,6 +39,7 @@ export default class ColourPicker extends Vue {
 .v-color-picker__controls {
   display: none;
 }
+
 .color-picker-border .v-color-picker__color div {
   border: 1px solid #6D6D6D4D !important;
   border-radius: 2px;
diff --git a/src/components/entity-panel/games/Wot.vue b/src/components/entity-panel/games/TheWot.vue
similarity index 79%
rename from src/components/entity-panel/games/Wot.vue
rename to src/components/entity-panel/games/TheWot.vue
index 66ea44d..d11eb41 100644
--- a/src/components/entity-panel/games/Wot.vue
+++ b/src/components/entity-panel/games/TheWot.vue
@@ -6,9 +6,9 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 
 @Component({
-  name: 'WOT'
+  name: 'TheWot'
 })
-export default class Wot extends Vue {
+export default class TheWot extends Vue {
   @Prop() private clickedItemKey!: number;
 }
 </script>
diff --git a/src/components/entity-panel/games/Wows.vue b/src/components/entity-panel/games/TheWows.vue
similarity index 84%
rename from src/components/entity-panel/games/Wows.vue
rename to src/components/entity-panel/games/TheWows.vue
index b75ed4f..165cbca 100644
--- a/src/components/entity-panel/games/Wows.vue
+++ b/src/components/entity-panel/games/TheWows.vue
@@ -20,26 +20,31 @@
 <script lang="ts">
 import axios from 'axios'
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { RoomGetters, GameName } from '@/store/modules/room'
-import { Getter } from 'vuex-class'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { Game } from '@/store/modules/socket/room'
+import { namespace } from 'vuex-class'
 import { MenuItem } from '@/components/TheEntityPanel.vue'
 import { Field, ApiHeader, 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'
+import { Api, Entity } from '@/store/types'
+import { Ship } from '@/types/Games/Wows'
+import { AppAuthenticationGetters, ExtendedJWT } from '@/store/modules/app/authentication'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 
 @Component({
-  name: 'WOWS',
+  name: 'TheWows',
   components: {
     TheCreateEntity
   }
 })
-export default class Wows extends Vue {
+export default class TheWows extends Vue {
   @Prop() private clickedItemKey!: number;
   @Prop() private teams!: MenuItem[];
-  @Getter(`room/${RoomGetters.GAME_API}`) gameApi!: Api[];
-  @Getter(`authentication/${AuthenticationGetters.JWT}`) jwt!: ExtendedJWT;
+  @AppRoom.Getter(AppRoomGetters.API) api!: Api[];
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT;
 
   entities: Entity[] = []
 
@@ -94,8 +99,8 @@ export default class Wows extends Vue {
   }]
 
   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')
+    const gameInfo = this.api.find((api: Api) => api.name === 'wows.encyclopedia.info')
+    const gameShips = this.api.find((api: Api) => api.name === 'wows.encyclopedia.ships')
     if (gameInfo?.data && gameShips?.data) {
       return [{
         text: 'Aircraft Carrier (CV)',
@@ -148,7 +153,7 @@ export default class Wows extends Vue {
       const headers: ApiHeader = {
         'Authorization': this.jwt.encoded,
         'X-Region': this.jwt.region,
-        'X-Game': GameName['WOWS']
+        'X-Game': Game['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]
@@ -161,4 +166,5 @@ export default class Wows extends Vue {
 }
 </script>
 <style lang="scss">
+
 </style>
diff --git a/src/components/entity-panel/index.ts b/src/components/entity-panel/index.ts
index 2bb2542..da5a9fb 100644
--- a/src/components/entity-panel/index.ts
+++ b/src/components/entity-panel/index.ts
@@ -1,2 +1,2 @@
-export { default as WowsPanel } from './games/Wows.vue'
-export { default as WotPanel } from './games/Wot.vue'
+export { default as WowsPanel } from './games/TheWows.vue'
+export { default as WotPanel } from './games/TheWot.vue'
diff --git a/src/components/entity-panel/sections/TheCreateEntity.vue b/src/components/entity-panel/sections/TheCreateEntity.vue
index 57161fd..17e08de 100644
--- a/src/components/entity-panel/sections/TheCreateEntity.vue
+++ b/src/components/entity-panel/sections/TheCreateEntity.vue
@@ -222,15 +222,13 @@ import Component from 'vue-class-component'
 import { Item, Field } from '@/types/Games/Index'
 import { MenuItem } from '@/components/TheEntityPanel.vue'
 import Games from '@/mixins/Games'
-import { GameName } from '@/store/modules/room'
+import { Game } from '@/store/modules/socket/room'
 import EntityCard from '../EntityCard.vue'
 
 @Component({
   name: 'TheCreateEntity',
   mixins: [Games],
-  components: {
-    EntityCard
-  }
+  components: { EntityCard }
 })
 export default class TheCreateEntity extends Games {
   @Prop() private clickedItemKey!: number;
@@ -238,7 +236,7 @@ export default class TheCreateEntity extends Games {
   @Prop() private entityData!: Item[];
   @Prop() private entities!: Item[];
   @Prop() private fields!: Field[];
-  @Prop() private game!: GameName;
+  @Prop() private game!: Game;
   @Prop() private autoCompleteOnChangeHandler!: (shipItem: Item) => void
 
   chipColour = 'green'
diff --git a/src/components/navigation/LoginCard.vue b/src/components/navigation/LoginCard.vue
deleted file mode 100644
index 2d2d874..0000000
--- a/src/components/navigation/LoginCard.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <v-card class="login-card">
-    <v-card-title class="custom-login-card-title">
-      <div>{{ $t('navigation.login.card.title') }}</div>
-      <v-btn icon @click="closeHandler" v-if="isMobile">
-        <v-icon>fa-times</v-icon>
-      </v-btn>
-    </v-card-title>
-    <v-card-text>
-      <provider-block v-for="(provider, name) in providers"
-                     :provider-name="name" :provider="provider" :key="name">
-      </provider-block>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-import { AuthenticationActions, AuthenticationGetters } from '@/store/modules/authentication'
-import { Providers } from '@/util/ProvidersUtil'
-import ProviderBlock from '@/components/navigation/login/ProviderBlock.vue'
-
-const authNamespace = namespace(Namespaces.AUTH)
-
-  @Component({
-    name: 'LoginCard',
-    components: {
-      ProviderBlock
-    }
-  })
-export default class extends Vue {
-    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
-    @authNamespace.Getter(AuthenticationGetters.PROVIDERS) providers!: Providers
-    @Prop({ default: false }) isMobile!: boolean
-
-    @Emit() closeHandler () {
-      return null
-    }
-}
-</script>
-
-<style scoped>
-  .custom-login-card-title {
-      font-weight: bold;
-      display: flex;
-      justify-content: space-between;
-    }
-</style>
diff --git a/src/components/navigation/TheCanvasTools.vue b/src/components/navigation/TheCanvasTools.vue
index 4ed047e..038ea11 100644
--- a/src/components/navigation/TheCanvasTools.vue
+++ b/src/components/navigation/TheCanvasTools.vue
@@ -21,7 +21,7 @@
       <div
         class="custom-zoom-percentage-button caption"
       >
-        {{ this.zoomPercentage }}%
+        {{ this.stageZoom }}%
       </div>
       <v-tooltip bottom :open-delay="500">
         <template v-slot:activator="{ on }">
@@ -83,32 +83,35 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { Action, Getter, namespace } from 'vuex-class'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
+import { namespace } from 'vuex-class'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
 import { Tool } from '@/tools/Tool'
 import { Namespaces } from '@/store'
-import { StageActions, StageGetters } from '@/store/modules/stage'
+import { AppStageActions, AppStageGetters } from '@/store/modules/app/stage'
+import { SocketStageActions, SocketStageGetters } from '@/store/modules/socket/stage'
 import Konva from 'konva'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
 import CenterCanvas from '@/tools/util/CenterCanvas'
 
-const Tools = namespace(Namespaces.TOOLS)
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const AppStage = namespace(Namespaces.APP_STAGE)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
 
 @Component({
   name: 'TheCanvasTools'
 })
 export default class TheCanvasTools extends Vue {
   @Prop() private mobile!: boolean;
-  @Getter(`stage/${StageGetters.STAGE_ZOOM}`) stageZoom!: number
-  @Getter(`stage/${StageGetters.STAGE}`) stage!: Konva.Stage
-  @Getter(`stage/${StageGetters.STAGE_CONFIG}`) stageConfig!: CustomStageConfig
-  @Action(`stage/${StageActions.SET_ZOOM}`) setZoom!: (payload: number) => void
-  @Action(`stage/${StageActions.ZOOM_OUT}`) zoomOut!: () => void
-  @Action(`stage/${StageActions.ZOOM_IN}`) zoomIn!: () => void
-  @Action(`stage/${StageActions.SET_CONFIG}`) setStageConfig!: (config: CustomStageConfig) => void
-  @Tools.Action(ToolsAction.ENABLE_TOOL) enableTool!: (toolName: string) => void
-  @Tools.Action(ToolsAction.DISABLE_TOOL) disableTool!: () => void
-  @Tools.Getter(ToolGetters.ENABLED_TOOL) enabledTool?: Tool
+  @AppStage.Getter(AppStageGetters.STAGE_ZOOM) stageZoom!: number
+  @AppStage.Getter(AppStageGetters.STAGE) stage!: Konva.Stage
+  @SocketStage.Getter(SocketStageGetters.STAGE_CONFIG) stageConfig!: CustomStageConfig
+  @AppTools.Getter(AppToolGetters.ENABLED_TOOL) enabledTool?: Tool
+  @AppStage.Action(AppStageActions.SET_ZOOM) setZoom!: (payload: number) => void
+  @AppStage.Action(AppStageActions.SET_ZOOM_OUT) zoomOut!: () => void
+  @AppStage.Action(AppStageActions.SET_ZOOM_IN) zoomIn!: () => void
+  @AppTools.Action(AppToolsAction.ENABLE_TOOL) enableTool!: (toolName: string) => void
+  @AppTools.Action(AppToolsAction.DISABLE_TOOL) disableTool!: () => void
+  @SocketStage.Action(SocketStageActions.SET_CONFIG) setStageConfig!: (config: CustomStageConfig) => void
 
   mounted () {
     const centerCanvas = new CenterCanvas()
@@ -122,10 +125,6 @@ export default class TheCanvasTools extends Vue {
     window.removeEventListener('resize', () => null)
   }
 
-  get zoomPercentage (): number {
-    return this.stageZoom
-  }
-
   activateMoveCanvasTool (): void {
     if (this.enabledTool?.name !== 'moveCanvas') {
       this.enableTool('moveCanvas')
diff --git a/src/components/navigation/TheLoginCard.vue b/src/components/navigation/TheLoginCard.vue
new file mode 100644
index 0000000..9c5069f
--- /dev/null
+++ b/src/components/navigation/TheLoginCard.vue
@@ -0,0 +1,54 @@
+<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 { AppAuthenticationActions, JWTRegion } from '@/store/modules/app/authentication'
+
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+
+@Component({
+  name: 'TheLoginCard'
+})
+export default class extends Vue {
+  @AppAuthentication.Action(AppAuthenticationActions.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/TheNavLarge.vue b/src/components/navigation/TheNavLarge.vue
index 9057c8f..629d91b 100644
--- a/src/components/navigation/TheNavLarge.vue
+++ b/src/components/navigation/TheNavLarge.vue
@@ -24,8 +24,11 @@ import ThePresentationMode from './buttons/ThePresentationMode.vue'
 import TheManageRoom from './buttons/TheManageRoom.vue'
 import TheUserMenu from './TheUserMenu.vue'
 import TheCanvasTools from './TheCanvasTools.vue'
-import { Getter } from 'vuex-class'
-import { RoomGetters } from '../../store/modules/room'
+import { namespace } from 'vuex-class'
+import { AppRoomGetters } from '../../store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
   name: 'TheNavLarge',
@@ -38,13 +41,14 @@ import { RoomGetters } from '../../store/modules/room'
   }
 })
 export default class TheNavLarge extends Vue {
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
 }
 </script>
 <style lang="scss">
 .theme--light.v-toolbar.custom-background-transparent {
   background-color:transparent;
 }
+
 .navbar-row {
   margin: 0;
   position: fixed;
@@ -53,6 +57,7 @@ export default class TheNavLarge extends Vue {
     padding: 0;
   }
 }
+
 header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
   background-color: $room-primary;
   color: $room-text;
@@ -80,6 +85,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     background: $room-primary;
   }
 }
+
 .navbar-toolbar-center {
   color: black;
   >div {
@@ -87,6 +93,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     align-items: start;
   }
 }
+
 .navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
   background-color: $room-primary;
   color: $room-text;
@@ -114,6 +121,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     margin-right: 10px;
   }
 }
+
 @media screen and (max-width: 860px) {
   .navbar-toolbar-left, .navbar-toolbar-right  {
     flex: 1 1 auto;
diff --git a/src/components/navigation/TheNavSmall.vue b/src/components/navigation/TheNavSmall.vue
index 0d011f5..d90a433 100644
--- a/src/components/navigation/TheNavSmall.vue
+++ b/src/components/navigation/TheNavSmall.vue
@@ -61,8 +61,11 @@ import ThePresentationMode from './buttons/ThePresentationMode.vue'
 import TheManageRoom from './buttons/TheManageRoom.vue'
 import TheUserMenu from './TheUserMenu.vue'
 import TheCanvasTools from './TheCanvasTools.vue'
-import { Getter } from 'vuex-class'
-import { RoomGetters } from '../../store/modules/room'
+import { namespace } from 'vuex-class'
+import { AppRoomGetters } from '../../store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
   name: 'TheNavSmall',
@@ -75,7 +78,7 @@ import { RoomGetters } from '../../store/modules/room'
   }
 })
 export default class TheNavSmall extends Vue {
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
   drawer = false
 }
 </script>
@@ -87,6 +90,7 @@ export default class TheNavSmall extends Vue {
     padding: 0;
   }
 }
+
 header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
   background-color: $room-primary;
   color: $room-text;
@@ -98,6 +102,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     margin: 0.25rem;
   }
 }
+
 .navbar-toolbar-center {
   color: black;
   >div {
@@ -105,6 +110,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     align-items: start;
   }
 }
+
 .navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
   background-color: $room-primary;
   color: $room-text;
@@ -116,6 +122,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
     margin-right: 10px;
   }
 }
+
 @media screen and (max-width: 960px) {
   .navbar-toolbar-left, .navbar-toolbar-right  {
     flex: 1 1 auto;
@@ -129,6 +136,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
 .custom-clickable {
   pointer-events: auto;
 }
+
 .custom-not-clickable {
   pointer-events: none;
 }
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index e79edf7..f7f206a 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -17,17 +17,17 @@
             <v-icon size="20">fa-user-circle</v-icon>
           </v-btn>
         </template>
-        <span>{{ $t('user.profile') }}</span>
+        <span>Sign in / Sign out</span>
       </v-tooltip>
     </template>
     <v-list>
-      <v-list-item v-if="isAuth" @click="onClickLogout">
-        <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
+      <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="openLoginDialog">
-        <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
-        <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" max-width="500px">
-          <login-card></login-card>
+      <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">
+          <the-login-card></the-login-card>
         </v-dialog>
       </v-list-item>
       <v-list-item
@@ -41,14 +41,14 @@
     </v-list>
   </v-menu>
   <v-list v-else dense style="width: 100%;">
-    <v-subheader>{{ $t('user.profile') }}</v-subheader>
-    <v-list-item v-if="isAuth" @click="onClickLogout">
-      <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
+    <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="openLoginDialog">
-      <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
-      <v-dialog v-model="isDialogOpen" @click:outside="onClickCloseLoginDialog" fullscreen>
-        <login-card :is-mobile="isMobile" v-on:close-handler="onClickCloseLoginDialog"></login-card>
+    <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>
+        <the-login-card></the-login-card>
       </v-dialog>
     </v-list-item>
     <v-list-item
@@ -67,46 +67,38 @@
 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 LoginCard from '@/components/navigation/LoginCard.vue'
+import { AppAuthenticationActions, AppAuthenticationGetters } from '@/store/modules/app/authentication'
+import TheLoginCard from '@/components/navigation/TheLoginCard.vue'
 
-const authNamespace = namespace(Namespaces.AUTH)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 
-  interface UserMenuItem {
-    text: string;
-    title: string;
-  }
+interface UserMenuItem {
+  text: string;
+  title: string;
+}
 
-  @Component({
-    name: 'TheUserMenu',
-    components: { LoginCard }
-  })
+@Component({
+  name: 'TheUserMenu',
+  components: {
+    TheLoginCard
+  }
+})
 export default class TheUserMenu extends Vue {
   @Prop() private isMobile!: boolean;
-  @authNamespace.Getter(AuthenticationGetters.IS_AUTH) isAuth!: boolean
-  @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
-  @authNamespace.Action(AuthenticationActions.LOGOUT) onClickLogout!: () => void
-
-    @Prop() private mobile!: boolean
-
-    isDialogOpen = false
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+  @AppAuthentication.Action(AppAuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
+  @AppAuthentication.Action(AppAuthenticationActions.LOGOUT) logout!: () => void
 
-    openLoginDialog () {
-      setTimeout(() => {
-        this.isDialogOpen = true
-      })
-    }
-
-    onClickCloseLoginDialog () {
-      this.isDialogOpen = false
-    }
-
-    userMenuItems: UserMenuItem[] = []
+  dialogOpen = false
+  doOpen () {
+    setTimeout(() => { this.dialogOpen = true })
+  }
+  userMenuItems: UserMenuItem[] = []
 
-    // eslint-disable-next-line
-    userMenuItemsClickHandler(item: UserMenuItem) {
-      // do stuff
-    }
+  // eslint-disable-next-line
+  userMenuItemsClickHandler (item: UserMenuItem) {
+    // do stuff
+  }
 }
 
 </script>
diff --git a/src/components/navigation/buttons/TheManageRoom.vue b/src/components/navigation/buttons/TheManageRoom.vue
index 06e967d..57572b4 100644
--- a/src/components/navigation/buttons/TheManageRoom.vue
+++ b/src/components/navigation/buttons/TheManageRoom.vue
@@ -28,15 +28,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { Getter } from 'vuex-class'
-import { RoomGetters } from '../../../store/modules/room'
+import { namespace } from 'vuex-class'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
   name: 'TheManageRoom'
 })
 export default class TheManageRoom extends Vue {
   @Prop() readonly isMobile!: boolean
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
   manageRoomOnClickHandler () {
     // Do something
   }
diff --git a/src/components/navigation/buttons/ThePresentationMode.vue b/src/components/navigation/buttons/ThePresentationMode.vue
index d401ca2..04b791b 100644
--- a/src/components/navigation/buttons/ThePresentationMode.vue
+++ b/src/components/navigation/buttons/ThePresentationMode.vue
@@ -30,15 +30,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { Getter } from 'vuex-class'
-import { RoomGetters } from '../../../store/modules/room'
+import { namespace } from 'vuex-class'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
   name: 'ThePresentationMode'
 })
 export default class ThePresentationMode extends Vue {
   @Prop() readonly isMobile!: boolean
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
   isEnabled = false
   presentationModeOnClickHandler () {
     this.isEnabled = !this.isEnabled
diff --git a/src/components/navigation/buttons/TheRoomSave.vue b/src/components/navigation/buttons/TheRoomSave.vue
index 1fce6fb..afadb1a 100644
--- a/src/components/navigation/buttons/TheRoomSave.vue
+++ b/src/components/navigation/buttons/TheRoomSave.vue
@@ -28,15 +28,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
-import { Getter } from 'vuex-class'
-import { RoomGetters } from '../../../store/modules/room'
+import { namespace } from 'vuex-class'
+import { AppRoomGetters } from '../../../store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
   name: 'TheRoomSave'
 })
 export default class TheRoomSave extends Vue {
   @Prop() readonly isMobile!: boolean
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
   isEnabled = false
   roomSaveOnClickHandler () {
     // Do something
diff --git a/src/components/overlays/TheCreateNewTacticOverlay.vue b/src/components/overlays/TheCreateNewTacticOverlay.vue
index 67e1692..73e98fb 100644
--- a/src/components/overlays/TheCreateNewTacticOverlay.vue
+++ b/src/components/overlays/TheCreateNewTacticOverlay.vue
@@ -63,45 +63,50 @@
 <script lang="ts">
 import Component, { mixins } from 'vue-class-component'
 import { EventBus } from '@/event-bus'
-import { RoomGetters } from '@/store/modules/room'
-import { Action, Getter } from 'vuex-class'
-import { Api, Collection } from '@/store/modules/types'
-import { StageActions } from '@/store/modules/stage'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { namespace } from 'vuex-class'
+import { Api, Collection } from '@/store/types'
+import { SocketStageActions } from '@/store/modules/socket/stage'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
-import { CanvasAction } from '@/store/modules/canvas'
+import { SocketCanvasAction } from '@/store/modules/socket/canvas'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 import TacticWatcher from '@/mixins/TacticWatcher'
 import uuid from 'uuid'
-import { AuthenticationGetters } from '@/store/modules/authentication'
-import { TacticGetters } from '../../store/modules/tactic'
+import { AppAuthenticationGetters } from '@/store/modules/app/authentication'
+import { SocketTacticGetters } from '../../store/modules/socket/tactic'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketTactic = namespace(Namespaces.SOCKET_TACTIC)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
 
 @Component({
   name: 'TheCreateNewTacticOverlay',
-  data: () => ({
-    tactic: {
-      map: {
-        name: '',
-        icon: '',
-        desc: '',
-        width: 0,
-        height: 0,
-        ratio: 0,
-        id: 0
-      },
-      name: ''
-    },
-    search: ''
-  }),
   mixins: [TacticWatcher]
 })
 export default class CreateNewTacticOverlay extends mixins(TacticWatcher) {
-  @Getter(`room/${RoomGetters.GAME_API}`) gameApi!: Api[]
-  @Getter(`tactic/${TacticGetters.COLLECTIONS}`) collections!: Collection[]
-  @Action(`stage/${StageActions.SET_CONFIG}`) setConfig!: (config: CustomStageConfig) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT}`) setCanvasElements!: (canvasElements: CanvasElement[]) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT_HISTORY}`) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
+  @AppRoom.Getter(AppRoomGetters.API) api!: Api[]
+  @SocketTactic.Getter(SocketTacticGetters.COLLECTIONS) collections!: Collection[]
+  @SocketStage.Action(SocketStageActions.SET_CONFIG) setConfig!: (config: CustomStageConfig) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT) setCanvasElements!: (canvasElements: CanvasElement[]) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT_HISTORY) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
 
+  tactic = {
+    map: {
+      name: '',
+      icon: '',
+      desc: '',
+      width: 0,
+      height: 0,
+      ratio: 0,
+      id: 0
+    },
+    name: ''
+  }
+  search = ''
   overlay = false
+
   created () {
     EventBus.$on('openCreateNewTacticOverlay', () => {
       this.overlay = !this.overlay
@@ -109,7 +114,7 @@ export default class CreateNewTacticOverlay extends mixins(TacticWatcher) {
   }
 
   get maps () {
-    const mapApi: Api[] = this.gameApi.filter((api: Api) => api.name === 'wows.encyclopedia.maps')
+    const mapApi: Api[] = this.api.filter((api: Api) => api.name === 'wows.encyclopedia.maps')
     if (mapApi.length === 1) {
       return mapApi[0].data
     } else {
@@ -123,7 +128,7 @@ export default class CreateNewTacticOverlay extends mixins(TacticWatcher) {
   }
 
   isDisabled (): boolean {
-    return !(this.$data.tactic.name && this.$data.tactic.map.icon)
+    return !(this.tactic.name && this.tactic.map.icon)
   }
 
   // Need to do more to this, but we dont have the collection stuff created yet so this is temporary.
@@ -132,14 +137,14 @@ export default class CreateNewTacticOverlay extends mixins(TacticWatcher) {
     if (!this.isDisabled() && foundCollection) {
       this.newTactic({
         id: uuid(),
-        name: this.$data.tactic.name,
+        name: this.tactic.name,
         collectionId: foundCollection.id,
         canvasElements: [],
         canvasElementsHistory: [],
         lockedBy: undefined,
         isPinned: false,
-        createdBy: this.$store.getters[`authentication/${AuthenticationGetters.JWT}`].jti,
-        map: this.$data.tactic.map
+        createdBy: this.$store.getters[`${Namespaces.APP_AUTHENTICATION}/${AppAuthenticationGetters.JWT}`].jti,
+        map: this.tactic.map
       })
       this.resetTacticForm()
       this.overlay = false
@@ -147,7 +152,7 @@ export default class CreateNewTacticOverlay extends mixins(TacticWatcher) {
   }
 
   resetTacticForm () {
-    this.$data.tactic = {
+    this.tactic = {
       map: {
         name: '',
         icon: '',
diff --git a/src/components/overlays/TheUpdateTacticOverlay.vue b/src/components/overlays/TheUpdateTacticOverlay.vue
index 6c6b0b6..be45db0 100644
--- a/src/components/overlays/TheUpdateTacticOverlay.vue
+++ b/src/components/overlays/TheUpdateTacticOverlay.vue
@@ -67,28 +67,34 @@
 <script lang="ts">
 import Component, { mixins } from 'vue-class-component'
 import { EventBus } from '@/event-bus'
-import { RoomGetters } from '@/store/modules/room'
-import { Action, Getter } from 'vuex-class'
-import { Api, Tactic } from '@/store/modules/types'
-import { StageActions } from '@/store/modules/stage'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { namespace } from 'vuex-class'
+import { Api, Tactic } from '@/store/types'
+import { SocketStageActions } from '@/store/modules/socket/stage'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
-import { CanvasAction } from '@/store/modules/canvas'
+import { SocketCanvasAction } from '@/store/modules/socket/canvas'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 import TacticWatcher from '@/mixins/TacticWatcher'
+import { Namespaces } from '@/store'
+
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
 
 @Component({
   name: 'TheUpdateTacticOverlay',
   mixins: [TacticWatcher]
 })
 export default class TheUpdateTacticOverlay extends mixins(TacticWatcher) {
-  @Getter(`room/${RoomGetters.GAME_API}`) gameApi!: Api[]
-  @Action(`stage/${StageActions.SET_CONFIG}`) setConfig!: (config: CustomStageConfig) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT}`) setCanvasElements!: (canvasElements: CanvasElement[]) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT_HISTORY}`) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
+  @AppRoom.Getter(AppRoomGetters.API) api!: Api[]
+  @SocketStage.Action(SocketStageActions.SET_CONFIG) setConfig!: (config: CustomStageConfig) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT) setCanvasElements!: (canvasElements: CanvasElement[]) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT_HISTORY) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
 
   search = ''
   selectedTactic: Tactic | {} = {}
   overlay = false
+
   created () {
     EventBus.$on('openManageTacticsOverlay', (tactic: Tactic) => {
       this.overlay = true
@@ -97,7 +103,7 @@ export default class TheUpdateTacticOverlay extends mixins(TacticWatcher) {
   }
 
   get maps () {
-    const mapApi: Api[] = this.gameApi.filter((api: Api) => api.name === 'wows.encyclopedia.maps')
+    const mapApi: Api[] = this.api.filter((api: Api) => api.name === 'wows.encyclopedia.maps')
     if (mapApi.length === 1) {
       return mapApi[0].data
     } else {
diff --git a/src/components/tactic-selector/TheTacticSelector.vue b/src/components/tactic-selector/TheTacticSelector.vue
index eb4bd15..672c434 100644
--- a/src/components/tactic-selector/TheTacticSelector.vue
+++ b/src/components/tactic-selector/TheTacticSelector.vue
@@ -204,11 +204,15 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { Getter, Action } from 'vuex-class'
-import { TacticGetters, TacticAction } from '@/store/modules/tactic'
-import { Tactic } from '@/store/modules/types'
+import { namespace } from 'vuex-class'
+import { SocketTacticGetters, SocketTacticAction } from '@/store/modules/socket/tactic'
+import { Tactic } from '@/store/types'
 import { EventBus } from '../../event-bus'
-import { AuthenticationGetters, ExtendedJWT } from '../../store/modules/authentication'
+import { AppAuthenticationGetters, ExtendedJWT } from '../../store/modules/app/authentication'
+import { Namespaces } from '@/store'
+
+const SocketTactic = namespace(Namespaces.SOCKET_TACTIC)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 
 interface TacticMenuItem {
   action: string;
@@ -228,12 +232,12 @@ enum TacticMenuOptions {
 })
 export default class TheTacticSelector extends Vue {
   @Prop() private icon!: string
-  @Getter(`authentication/${AuthenticationGetters.JWT}`) jwt!: ExtendedJWT
-  @Getter(`tactic/${TacticGetters.TACTICS}`) tactics!: Tactic[]
-  @Getter(`tactic/${TacticGetters.PINNED_TACTICS}`) pinnedTactics!: Tactic[]
-  @Action(`tactic/${TacticAction.DELETE_TACTIC}`) deleteTactic!: (id: string) => void
-  @Action(`tactic/${TacticAction.UPDATE_TACTIC}`) updateTactic!: (tactic: Tactic) => void
-  @Action(`tactic/${TacticAction.TOGGLE_PIN_TACTIC}`) togglePinTactic!: (tactic: Tactic) => void
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @SocketTactic.Getter(SocketTacticGetters.TACTICS) tactics!: Tactic[]
+  @SocketTactic.Getter(SocketTacticGetters.PINNED_TACTICS) pinnedTactics!: Tactic[]
+  @SocketTactic.Action(SocketTacticAction.DELETE_TACTIC) deleteTactic!: (id: string) => void
+  @SocketTactic.Action(SocketTacticAction.UPDATE_TACTIC) updateTactic!: (tactic: Tactic) => void
+  @SocketTactic.Action(SocketTacticAction.TOGGLE_PIN_TACTIC) togglePinTactic!: (tactic: Tactic) => void
 
   open: string[] = []
   search: string | null = null
diff --git a/src/games/wows/api.ts b/src/games/wows/api.ts
index 96bfe44..0b46f48 100644
--- a/src/games/wows/api.ts
+++ b/src/games/wows/api.ts
@@ -1,38 +1,44 @@
 import { ApiHeader } from '@/types/Games/Index'
 import { WowsShipsApiResponse, Ship, WowsShipInfoApiResponse } from '@/types/Games/Wows'
 import axios from 'axios'
-import { Api, Map } from '@/store/modules/types'
-import { JWTRegion } from '@/store/modules/authentication'
-import { GameName } from '@/store/modules/room'
+import { Api, Map } from '@/store/types'
+import { JWTRegion } from '@/store/modules/app/authentication'
+import { Game } from '@/store/modules/socket/room'
 import WowsMaps from '@/types/Games/Wows/Maps'
 
 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']
+    'X-Game': Game['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 })
   const wowsMaps = new WowsMaps()
   const maps: Map[] = wowsMaps.getMaps()
+
   setGameApi({
     name: 'wows.encyclopedia.ships',
     data: ships
   })
+
   setGameApi({
     name: 'wows.encyclopedia.info',
     data: gameInfo.data.data
   })
+
   setGameApi({
     name: 'wows.encyclopedia.maps',
     data: maps
diff --git a/src/main.ts b/src/main.ts
index b765ece..f0e354b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,14 @@
 import Vue from 'vue'
-import './registerServiceWorker'
+import '@/registerServiceWorker'
 import vuetify from '@/plugins/vuetify'
 import VueKonva from 'vue-konva'
-import router from './router/index'
-import store from './store'
-import App from './App.vue'
+import router from '@/router/index'
+import store from '@/store'
+import App from '@/App.vue'
 import socket from '@/plugins/socket'
-import './plugins/sentry'
+import '@/plugins/sentry'
 import values from 'lodash.values'
-import i18n, { localeFiles } from './lib/I18n'
+import i18n, { localeFiles } from '@/lib/I18n'
 
 socket(store, Vue)
 Vue.use(VueKonva)
diff --git a/src/mixins/CanvasSockets.ts b/src/mixins/CanvasSockets.ts
index cc31828..7cc6b3e 100644
--- a/src/mixins/CanvasSockets.ts
+++ b/src/mixins/CanvasSockets.ts
@@ -1,29 +1,33 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Socket } from 'vue-socket.io-extended'
-import { Action, Getter } from 'vuex-class'
+import { namespace } from 'vuex-class'
 import { AdditionData, CanvasElement, CanvasElementHistory, MoveData, RedoData, RemovalData, RemovalTools, RequestCanvasEntity, UndoData } from '@/types/Canvas'
 import { Tool, Tracker } from '@/tools/Tool'
-import { ToolGetters } from '@/store/modules/tools'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { AppToolGetters } from '@/store/modules/app/tools'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
 import HandleUndoRedo from '@/util/HandleUndoRedo'
 import { SocketCanvasToolsEmit } from '@/store/modules/socket'
+import { Namespaces } from '@/store'
+
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
 
 @Component({
-  name: 'CanvasSocket'
+  name: 'CanvasSockets'
 })
 export default class CanvasSocket extends Vue {
-  @Getter(`tools/${ToolGetters.TOOLS}`) tools!: Tool[]
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS}`) canvasElements!: CanvasElement[]
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`) canvasElementsHistory!: CanvasElementHistory[]
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENT_BY_ID}`) canvasElementById!: (id: string) => CanvasElement | void
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID}`) canvasElementHistoryById!: (id: string) => CanvasElementHistory | void
-  @Getter(`tools/${ToolGetters.TOOL}`) findTool!: (name: string) => Tool | void
-  @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT}`) addCanvasElement!: (canvasElement: CanvasElement) => void
-  @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`) addCanvasElementHistory!: (canvasElementHistory: CanvasElementHistory) => void
-  @Action(`canvas/${CanvasAction.SHOW_CANVAS_ELEMENT}`) showCanvasElement!: (canvasElement: CanvasElement) => void
-  @Action(`canvas/${CanvasAction.HIDE_CANVAS_ELEMENT}`) hideCanvasElement!: (canvasElement: CanvasElement) => void
+  @AppTools.Getter(AppToolGetters.TOOLS) tools!: Tool[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS) canvasElements!: CanvasElement[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY) canvasElementsHistory!: CanvasElementHistory[]
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENT_BY_ID) canvasElementById!: (id: string) => CanvasElement | void
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID) canvasElementHistoryById!: (id: string) => CanvasElementHistory | void
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool | void
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT) addCanvasElement!: (canvasElement: CanvasElement) => void
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY) addCanvasElementHistory!: (canvasElementHistory: CanvasElementHistory) => void
+  @SocketCanvas.Action(SocketCanvasAction.SHOW_CANVAS_ELEMENT) showCanvasElement!: (canvasElement: CanvasElement) => void
+  @SocketCanvas.Action(SocketCanvasAction.HIDE_CANVAS_ELEMENT) hideCanvasElement!: (canvasElement: CanvasElement) => void
 
   // On Circle hook
   @Socket(SocketCanvasToolsEmit.CANVAS_TOOLS_CIRCLE)
diff --git a/src/mixins/RoomSockets.ts b/src/mixins/RoomSockets.ts
index 9b54903..845a633 100644
--- a/src/mixins/RoomSockets.ts
+++ b/src/mixins/RoomSockets.ts
@@ -1,20 +1,26 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Socket } from 'vue-socket.io-extended'
-import { Action, Getter } from 'vuex-class'
+import { namespace } from 'vuex-class'
 import { Watch } from 'vue-property-decorator'
-import { AuthenticationGetters, ExtendedJWT } from '@/store/modules/authentication'
+import { AppAuthenticationGetters, ExtendedJWT } from '@/store/modules/app/authentication'
 import { SocketActions, SocketRoomEmit, SocketRoomListen } from '@/store/modules/socket'
-import { RoomGetters } from '@/store/modules/room'
+import { SocketRoomGetters } from '@/store/modules/socket/room'
+import { Namespaces } from '@/store'
+
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+const SocketNamespace = namespace(Namespaces.SOCKET)
 
 @Component({
-  name: 'RoomSocket'
+  name: 'RoomSockets'
 })
 export default class RoomSocket extends Vue {
-  @Getter(`room/${RoomGetters.ROOM_ID}`) roomId!: string
-  @Getter(`authentication/${AuthenticationGetters.IS_AUTH}`) isAuth!: boolean
-  @Getter(`authentication/${AuthenticationGetters.JWT}`) jwt!: ExtendedJWT
-  @Action(`socket/${SocketActions.EMIT}`) emit!: (payload: { data: object; emit: string }) => void
+  @SocketRoom.Getter(SocketRoomGetters.ROOM_ID) roomId!: string
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @SocketNamespace.Action(SocketActions.EMIT) emit!: (payload: { data: object; emit: string }) => void
+
   @Socket()
   connect () {
     this.emit({ data: { roomId: this.roomId }, emit: SocketRoomEmit.ROOM_JOIN })
diff --git a/src/mixins/StageWatcher.ts b/src/mixins/StageWatcher.ts
index 51208b8..7cd9adb 100644
--- a/src/mixins/StageWatcher.ts
+++ b/src/mixins/StageWatcher.ts
@@ -1,27 +1,32 @@
-import { StageActions, StageGetters } from '@/store/modules/stage'
+import { SocketStageActions, SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppStageGetters } from '@/store/modules/app/stage'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
 import CenterCanvas from '@/tools/util/CenterCanvas'
 import { Watch } from 'vue-property-decorator'
-import { Action, Getter } from 'vuex-class'
+import { namespace } from 'vuex-class'
 import Component from 'vue-class-component'
 import Konva from 'konva'
 import Vue from 'vue'
 import MapCanvas from '@/tools/util/MapCanvas'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
+import { Namespaces } from '@/store'
+
+const AppStage = namespace(Namespaces.APP_STAGE)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
 
 @Component({
-  name: 'StageWatch'
+  name: 'StageWatcher'
 })
 export default class StageWatch extends Vue {
-  @Getter(`stage/${StageGetters.STAGE_DIMENSIONS_INITIAL}`) stageDimensionsInitial!: Dimensions
-  @Getter(`stage/${StageGetters.STAGE_DIMENSIONS}`) stageDimensions!: Dimensions
-  @Getter(`stage/${StageGetters.STAGE_CONFIG}`) stageConfig!: CustomStageConfig
-  @Getter(`stage/${StageGetters.STAGE_ZOOM}`) stageZoom!: number
-  @Getter(`stage/${StageGetters.STAGE}`) stage!: Konva.Stage
-  @Action(`stage/${StageActions.SET_DIMENSIONS}`) setStageDimensions!: (dimensions: Dimensions) => void
-  @Action(`stage/${StageActions.SET_SCALE}`) setScale!: (scale: number) => void
-  @Action(`stage/${StageActions.SET_DIMENSIONS_INITIAL}`) setDimensionsInitial!: (dimensions: Dimensions) => void
-  @Getter(`stage/${StageGetters.STAGE_MAP_SRC}`) stageMapSrc!: string
+  @AppStage.Getter(AppStageGetters.STAGE_ZOOM) stageZoom!: number
+  @AppStage.Getter(AppStageGetters.STAGE) stage!: Konva.Stage
+  @SocketStage.Getter(SocketStageGetters.STAGE_DIMENSIONS_INITIAL) stageDimensionsInitial!: Dimensions
+  @SocketStage.Getter(SocketStageGetters.STAGE_DIMENSIONS) stageDimensions!: Dimensions
+  @SocketStage.Getter(SocketStageGetters.STAGE_CONFIG) stageConfig!: CustomStageConfig
+  @SocketStage.Getter(SocketStageGetters.STAGE_MAP_SRC) stageMapSrc!: string
+  @SocketStage.Action(SocketStageActions.SET_DIMENSIONS) setStageDimensions!: (dimensions: Dimensions) => void
+  @SocketStage.Action(SocketStageActions.SET_SCALE) setScale!: (scale: number) => void
+  @SocketStage.Action(SocketStageActions.SET_DIMENSIONS_INITIAL) setDimensionsInitial!: (dimensions: Dimensions) => void
 
   @Watch('stageDimensionsInitial', { immediate: true })
   onStageInitialDimensions () {
diff --git a/src/mixins/TacticWatcher.ts b/src/mixins/TacticWatcher.ts
index 8d02395..f3269d1 100644
--- a/src/mixins/TacticWatcher.ts
+++ b/src/mixins/TacticWatcher.ts
@@ -1,30 +1,38 @@
 import Component from 'vue-class-component'
 import Vue from 'vue'
-import { Tactic } from '@/store/modules/types'
+import { Tactic } from '@/store/types'
 import { Socket } from 'vue-socket.io-extended'
-import { CanvasAction } from '@/store/modules/canvas'
+import { SocketCanvasAction } from '@/store/modules/socket/canvas'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
-import { Action, Getter } from 'vuex-class'
-import { StageActions } from '@/store/modules/stage'
-import { LayerActions } from '@/store/modules/layer'
+import { namespace } from 'vuex-class'
+import { SocketStageActions } from '@/store/modules/socket/stage'
+import { AppLayerActions } from '@/store/modules/app/layer'
 import { SocketActions, SocketCanvasTacticEmit } from '@/store/modules/socket'
 import { EventBus } from '@/event-bus'
-import { TacticAction } from '@/store/modules/tactic'
-import { RoomGetters, RoomAction } from '@/store/modules/room'
+import { SocketTacticAction } from '@/store/modules/socket/tactic'
+import { AppRoomGetters, AppRoomAction } from '@/store/modules/app/room'
+import { Namespaces } from '@/store'
+
+const AppLayer = namespace(Namespaces.APP_LAYER)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+const SocketNamespace = namespace(Namespaces.SOCKET)
+const SocketTactic = namespace(Namespaces.SOCKET_TACTIC)
 
 @Component({
-  name: 'StageWatch'
+  name: 'TacticWatcher'
 })
 export default class TacticWatcher extends Vue {
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT}`) setCanvasElements!: (canvasElements: CanvasElement[]) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT_HISTORY}`) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
-  @Action(`layer/${LayerActions.LAYER_CLEAR}`) layerClear!: () => void
-  @Action(`room/${RoomAction.SET_IS_CANVAS_LOADED}`) setIsCanvasLoaded!: (isCanvasLoaded: boolean) => void
-  @Action(`socket/${SocketActions.EMIT}`) emit!: (payload: { data: object; emit: string }) => void
-  @Action(`stage/${StageActions.SET_STAGE_TACTIC}`) setStageTactic!: (tactic: Tactic) => void
-  @Action(`tactic/${TacticAction.SET_TACTIC}`) setTactic!: (tactic: Tactic) => void
-  @Action(`tactic/${TacticAction.UPDATE_TACTIC}`) updateTactic!: (tactic: Tactic) => void
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT) setCanvasElements!: (canvasElements: CanvasElement[]) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT_HISTORY) setCanvasElementsHistory!: (canvasElements: CanvasElementHistory[]) => void
+  @AppLayer.Action(AppLayerActions.LAYER_CLEAR) layerClear!: () => void
+  @AppRoom.Action(AppRoomAction.SET_IS_CANVAS_LOADED) setIsCanvasLoaded!: (isCanvasLoaded: boolean) => void
+  @SocketNamespace.Action(SocketActions.EMIT) emit!: (payload: { data: object; emit: string }) => void
+  @SocketStage.Action(SocketStageActions.SET_STAGE_TACTIC) setStageTactic!: (tactic: Tactic) => void
+  @SocketTactic.Action(SocketTacticAction.SET_TACTIC) setTactic!: (tactic: Tactic) => void
+  @SocketTactic.Action(SocketTacticAction.UPDATE_TACTIC) updateTactic!: (tactic: Tactic) => void
 
   created () {
     EventBus.$on('newTactic', (tactic: Tactic) => {
diff --git a/src/router/index.ts b/src/router/index.ts
index 103991b..e0c831a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Room from '@/views/Room.vue'
-import Index from '@/views/Index.vue'
+import TheRoom from '@/views/TheRoom.vue'
+import TheIndex from '@/views/TheIndex.vue'
 
 Vue.use(VueRouter)
 
@@ -9,13 +9,13 @@ const routes: RouteConfig[] = [
   {
     path: '/:id',
     name: 'room',
-    component: Room,
+    component: TheRoom,
     props: true
   },
   {
     path: '/',
     name: 'index',
-    component: Index
+    component: TheIndex
   }
 ]
 
diff --git a/src/store/index.ts b/src/store/index.ts
index e66736c..219e2a1 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,43 +1,49 @@
-import AuthenticationModule from '@/store/modules/authentication'
-import CanvasEntityModule from '@/store/modules/canvasEntity'
-import CanvasModule from '@/store/modules/canvas'
+import AppAuthenticationModule from '@/store/modules/app/authentication'
+import AppCanvasEntityModule from '@/store/modules/app/canvasEntity'
+import AppLayerModule from '@/store/modules/app/layer'
+import AppRoomModule from '@/store/modules/app/room'
+import AppStageModule from '@/store/modules/app/stage'
+import AppToolModule from '@/store/modules/app/tools'
+import SocketCanvasModule from '@/store/modules/socket/canvas'
 import SocketModule from '@/store/modules/socket'
-import StageModule from '@/store/modules/stage'
-import LayerModule from '@/store/modules/layer'
-import ToolModule from '@/store/modules/tools'
-import RoomModule from '@/store/modules/room'
-import TacticModule from '@/store/modules/tactic'
-import UserModule from '@/store/modules/user'
+import SocketRoomModule from '@/store/modules/socket/room'
+import SocketStageModule from '@/store/modules/socket/stage'
+import SocketTacticModule from '@/store/modules/socket/tactic'
+import SocketUserModule from '@/store/modules/socket/user'
 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
 export enum Namespaces {
-  CANVAS_ENTITY = 'canvasEntity',
-  AUTH = 'authentication',
-  CANVAS = 'canvas',
+  APP_AUTHENTICATION = 'appAuthentication',
+  APP_CANVAS_ENTITY = 'appCanvasEntity',
+  APP_LAYER = 'appLayer',
+  APP_ROOM = 'appRoom',
+  APP_STAGE = 'appStage',
+  APP_TOOLS = 'appTools',
+  SOCKET_CANVAS = 'socketCanvas',
   SOCKET = 'socket',
-  STAGE = 'stage',
-  TOOLS = 'tools',
-  LAYER = 'layer',
-  ROOM = 'room',
-  TACTIC = 'tactic',
-  USER = 'user'
+  SOCKET_ROOM = 'socketRoom',
+  SOCKET_STAGE = 'socketStage',
+  SOCKET_TACTIC = 'socketTactic',
+  SOCKET_USER = 'socketUser'
 }
 
 // eslint-disable-next-line
 export default new Vuex.Store<any>({
   modules: {
-    [Namespaces.CANVAS_ENTITY]: CanvasEntityModule,
-    [Namespaces.AUTH]: AuthenticationModule,
-    [Namespaces.CANVAS]: CanvasModule,
+    [Namespaces.APP_AUTHENTICATION]: AppAuthenticationModule,
+    [Namespaces.APP_CANVAS_ENTITY]: AppCanvasEntityModule,
+    [Namespaces.APP_LAYER]: AppLayerModule,
+    [Namespaces.APP_ROOM]: AppRoomModule,
+    [Namespaces.APP_STAGE]: AppStageModule,
+    [Namespaces.APP_TOOLS]: AppToolModule,
+    [Namespaces.SOCKET_CANVAS]: SocketCanvasModule,
     [Namespaces.SOCKET]: SocketModule,
-    [Namespaces.LAYER]: LayerModule,
-    [Namespaces.STAGE]: StageModule,
-    [Namespaces.TOOLS]: ToolModule,
-    [Namespaces.ROOM]: RoomModule,
-    [Namespaces.TACTIC]: TacticModule,
-    [Namespaces.USER]: UserModule
+    [Namespaces.SOCKET_ROOM]: SocketRoomModule,
+    [Namespaces.SOCKET_STAGE]: SocketStageModule,
+    [Namespaces.SOCKET_TACTIC]: SocketTacticModule,
+    [Namespaces.SOCKET_USER]: SocketUserModule
   }
 })
diff --git a/src/store/modules/app/authentication.ts b/src/store/modules/app/authentication.ts
new file mode 100644
index 0000000..663147f
--- /dev/null
+++ b/src/store/modules/app/authentication.ts
@@ -0,0 +1,137 @@
+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',
+  NA = 'na',
+  RU = 'ru',
+  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.
+  jti: string; // UUID. Identifier of user.
+  iat: number; // JWT is not valid before this date. Unix datetime.
+  exp: number; // JWT is not valid after this date. Unix datetime.
+  username: string; // Viewable user identifier. Might not be unique.
+  region: JWTRegion; // Region where user is located. See enum.
+  // eslint-disable-next-line
+}
+
+export interface ExtendedJWT extends JWT {
+  encoded: string; // Token in encoded format.
+}
+
+export interface AppAuthenticationState {
+  jwt: ExtendedJWT | null;
+}
+
+export enum AppAuthenticationActions {
+  AUTHENTICATE = 'authenticate',
+  CHECK_TOKEN_EXPIRY = 'checkTokenExpiry',
+  LOGIN_WG = 'auth_wg',
+  LOGOUT = 'logout',
+  STORE_TOKEN = 'storeToken'
+}
+
+export enum AppAuthenticationMutation {
+  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN'
+}
+
+export enum AppAuthenticationGetters {
+  JWT = 'jwt',
+  IS_AUTH = 'authenticated'
+}
+
+type AppAuthenticationActionContext = ActionContext<AppAuthenticationState, {}>
+
+const AppAuthenticationModule: Module<AppAuthenticationState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      jwt: null
+    }
+  },
+  getters: {
+    [AppAuthenticationGetters.JWT]: state => state.jwt,
+    [AppAuthenticationGetters.IS_AUTH]: state => state.jwt !== null
+  },
+  mutations: {
+    [AppAuthenticationMutation.SET_AUTHENTICATION_TOKEN] (state: AppAuthenticationState, payload: ExtendedJWT) {
+      state.jwt = payload
+    }
+  },
+  actions: {
+    async [AppAuthenticationActions.AUTHENTICATE] (context: AppAuthenticationActionContext, token: string) {
+      // TODO: This is just placeholder logic. Please check it works. -Niko
+
+      const response = await axios.get((process.env.VUE_APP_MS_AUTH as string))
+      if (response.status !== 200) {
+        throw Error('Could not reach authentication server.')
+      }
+
+      const jwt = verify(token, response.data.publicKey) as JWT
+      const extended: ExtendedJWT = { ...jwt, ...{ encoded: token } }
+
+      // 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 [AppAuthenticationActions.CHECK_TOKEN_EXPIRY] (context: AppAuthenticationActionContext) {
+      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(AppAuthenticationActions.LOGOUT)
+          alert('Your session has expired and you have been logged out. Please login again/')
+        }
+      }
+      return isTokenValid
+    },
+    [AppAuthenticationActions.STORE_TOKEN] (context: AppAuthenticationActionContext, token: string) {
+      localStorage.setItem(JWT_KEY, token)
+    },
+    [AppAuthenticationActions.LOGIN_WG] (context: AppAuthenticationActionContext, region: JWTRegion) {
+      // TODO: This is just placeholder logic. Please check it works. -Niko
+      const returnUrl = process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${regionDomain(region)}/${window.location.href}`
+      location.assign(returnUrl)
+    },
+    [AppAuthenticationActions.LOGOUT] (context: AppAuthenticationActionContext) {
+      localStorage.removeItem(JWT_KEY)
+      context.commit(AppAuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
+    }
+  }
+}
+
+export default AppAuthenticationModule
diff --git a/src/store/modules/app/canvasEntity.ts b/src/store/modules/app/canvasEntity.ts
new file mode 100644
index 0000000..e7072ab
--- /dev/null
+++ b/src/store/modules/app/canvasEntity.ts
@@ -0,0 +1,95 @@
+import { ActionContext, Module } from 'vuex'
+import { CanvasElement, CanvasElementType } from '@/types/Canvas'
+import uuid from 'uuid'
+import { AppAuthenticationGetters } from '@/store/modules/app/authentication'
+import { Namespaces } from '@/store'
+
+const defaultAppCanvasEntity: AppCanvasEntityState = {
+  canvasElement: {
+    jti: '',
+    id: '',
+    type: CanvasElementType.SHAPE,
+    data: {},
+    tool: {
+      name: '',
+      temporary: false
+    },
+    layerId: Math.random().toString(36), // TODO: Use some other method. (Do we even need this?)
+    isVisible: true,
+    position: { x: 0, y: 0 }
+  },
+  hasMoved: false,
+  modifyData: {}
+}
+
+export enum AppCanvasEntityGetters {
+  CANVAS_ELEMENT = 'canvasElement',
+  CANVAS_ENTITY = 'canvasEntity'
+}
+
+export enum AppCanvasEntityActions {
+  SET_CANVAS_ENTITY = 'setCanvasEntity',
+  RESET_CANVAS_ENTITY = 'resetCanvasEntity',
+  SET_CANVAS_ELEMENT = 'setCanvasElement',
+  RESET_CANVAS_ELEMENT = 'resetCanvasElement'
+}
+
+export enum AppCanvasEntityMutations {
+  SET_CANVAS_ENTITY = 'SET_CANVAS_ENTITY',
+  RESET_CANVAS_ENTITY = 'RESET_CANVAS_ENTITY',
+  SET_CANVAS_ELEMENT = 'SET_CANVAS_ELEMENT',
+  RESET_CANVAS_ELEMENT = 'RESET_CANVAS_ELEMENT'
+}
+
+export interface AppCanvasEntityState {
+  canvasElement: CanvasElement;
+  hasMoved: boolean;
+  modifyData: {} | undefined;
+}
+
+type AppCanvasEntityActionContext = ActionContext<AppCanvasEntityState, {}>;
+
+const AppCanvasEntityModule: Module<AppCanvasEntityState, {}> = {
+  namespaced: true,
+  state () {
+    return defaultAppCanvasEntity
+  },
+  getters: {
+    [AppCanvasEntityGetters.CANVAS_ELEMENT]: state => state.canvasElement,
+    [AppCanvasEntityGetters.CANVAS_ENTITY]: state => state
+  },
+  mutations: {
+    [AppCanvasEntityMutations.SET_CANVAS_ENTITY] (state: AppCanvasEntityState, entity: AppCanvasEntityState) {
+      state = entity
+    },
+    [AppCanvasEntityMutations.RESET_CANVAS_ENTITY] (state: AppCanvasEntityState, newState: AppCanvasEntityState) {
+      state = newState
+    },
+    [AppCanvasEntityMutations.SET_CANVAS_ELEMENT] (state: AppCanvasEntityState, canvasElement: CanvasElement) {
+      state.canvasElement = canvasElement
+    },
+    [AppCanvasEntityMutations.RESET_CANVAS_ELEMENT] (state: AppCanvasEntityState) {
+      state.canvasElement = defaultAppCanvasEntity.canvasElement
+      state.canvasElement.id = uuid()
+    }
+  },
+  actions: {
+    [AppCanvasEntityActions.SET_CANVAS_ELEMENT] (context: AppCanvasEntityActionContext, canvasElement: CanvasElement) {
+      context.commit(AppCanvasEntityMutations.SET_CANVAS_ELEMENT, canvasElement)
+    },
+    [AppCanvasEntityActions.RESET_CANVAS_ELEMENT] (context: AppCanvasEntityActionContext) {
+      context.commit(AppCanvasEntityMutations.RESET_CANVAS_ELEMENT)
+    },
+    [AppCanvasEntityActions.SET_CANVAS_ENTITY] (context: AppCanvasEntityActionContext, entity: AppCanvasEntityState) {
+      context.commit(AppCanvasEntityMutations.SET_CANVAS_ENTITY, entity)
+    },
+    [AppCanvasEntityActions.RESET_CANVAS_ENTITY] (context: AppCanvasEntityActionContext) {
+      const newState = defaultAppCanvasEntity
+      newState.canvasElement.id = uuid()
+      newState.canvasElement.jti = (context.rootGetters[`${Namespaces.APP_AUTHENTICATION}/${AppAuthenticationGetters.JWT}`]).jti
+      context.commit(AppCanvasEntityMutations.RESET_CANVAS_ENTITY, newState)
+    }
+  }
+}
+
+export default AppCanvasEntityModule
diff --git a/src/store/modules/app/layer.ts b/src/store/modules/app/layer.ts
new file mode 100644
index 0000000..cf549f0
--- /dev/null
+++ b/src/store/modules/app/layer.ts
@@ -0,0 +1,84 @@
+import { ActionContext, Module } from 'vuex'
+import Konva from 'konva'
+
+export enum AppLayerGetters {
+  LAYER = 'layer',
+  LAYER_FIND_GROUP = 'layerFindGroup'
+}
+
+export enum AppLayerActions {
+  LAYER_ADD = 'layerAdd',
+  LAYER_SET = 'layerSet',
+  LAYER_DESTROY_GROUP = 'layerDestroyGroup',
+  LAYER_DESTROY = 'layerDestroy',
+  LAYER_CLEAR = 'layerClear'
+}
+
+export enum AppLayerMutations {
+  LAYER_SET = 'LAYER_SET',
+  LAYER_ADD = 'LAYER_ADD',
+  LAYER_DESTROY = 'LAYER_DESTROY',
+  LAYER_DESTROY_GROUP = 'LAYER_DESTROY_GROUP',
+  LAYER_CLEAR = 'LAYER_CLEAR'
+}
+
+export interface AppLayerState {
+  layer: Konva.Layer;
+}
+
+type AppLayerActionContext = ActionContext<AppLayerState, {}>;
+
+const AppLayerModule: Module<AppLayerState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      layer: new Konva.Layer()
+    }
+  },
+  getters: {
+    [AppLayerGetters.LAYER]: state => state.layer,
+    [AppLayerGetters.LAYER_FIND_GROUP]: state => (groupId: string) => {
+      return state.layer.findOne((child: Konva.Group) => child.attrs.id === groupId)
+    }
+  },
+  mutations: {
+    [AppLayerMutations.LAYER_DESTROY_GROUP] (state: AppLayerState, groupId: number) {
+      state.layer.findOne((child: Konva.Group) => {
+        if (child.attrs.id === groupId) {
+          child.destroyChildren()
+        }
+      })
+    },
+    [AppLayerMutations.LAYER_SET] (state: AppLayerState, layer: Konva.Layer) {
+      state.layer = layer
+    },
+    [AppLayerMutations.LAYER_ADD] (state: AppLayerState, newGroup: Konva.Group) {
+      state.layer.add(newGroup)
+    },
+    [AppLayerMutations.LAYER_DESTROY] (state: AppLayerState) {
+      state.layer.destroy()
+    },
+    [AppLayerMutations.LAYER_CLEAR] (state: AppLayerState) {
+      state.layer.destroyChildren()
+    }
+  },
+  actions: {
+    [AppLayerActions.LAYER_ADD] (context: AppLayerActionContext, newGroup: Konva.Group) {
+      context.commit(AppLayerMutations.LAYER_ADD, newGroup)
+    },
+    [AppLayerActions.LAYER_SET] (context: AppLayerActionContext, newLayer: Konva.Layer) {
+      context.commit(AppLayerMutations.LAYER_SET, newLayer)
+    },
+    [AppLayerActions.LAYER_DESTROY] (context: AppLayerActionContext) {
+      context.commit(AppLayerMutations.LAYER_DESTROY)
+    },
+    [AppLayerActions.LAYER_DESTROY_GROUP] (context: AppLayerActionContext, groupId) {
+      context.commit(AppLayerMutations.LAYER_DESTROY_GROUP, groupId)
+    },
+    [AppLayerActions.LAYER_CLEAR] (context: AppLayerActionContext) {
+      context.commit(AppLayerMutations.LAYER_CLEAR)
+    }
+  }
+}
+
+export default AppLayerModule
diff --git a/src/store/modules/app/room.ts b/src/store/modules/app/room.ts
new file mode 100644
index 0000000..616c460
--- /dev/null
+++ b/src/store/modules/app/room.ts
@@ -0,0 +1,100 @@
+import { ActionContext, Module } from 'vuex'
+import { Api } from '../../types'
+
+export enum Locale {
+  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 AppRoomAction {
+  SET_LOCALE = 'setLocale',
+  ADD_API = 'setGameApi',
+  DELETE_API = 'deleteGameApi',
+  SET_IS_CANVAS_LOADED = 'setIsCanvasLoaded'
+}
+
+export enum AppRoomMutation {
+  SET_LOCALE = 'SET_LOCALE',
+  ADD_API = 'ADD_API',
+  DELETE_API = 'DELETE_API',
+  SET_IS_CANVAS_LOADED = 'SET_IS_CANVAS_LOADED'
+}
+
+export enum AppRoomGetters {
+  LOCALE = 'locale',
+  API = 'api',
+  IS_CANVAS_LOADED = 'isCanvasLoaded'
+}
+
+export interface AppRoomState {
+  locale: Locale;
+  api: Api[];
+  isCanvasLoaded: boolean;
+}
+
+type AppRoomActionContext = ActionContext<AppRoomState, {}>
+
+const AppRoomModule: Module<AppRoomState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      locale: Locale['EN'],
+      api: [],
+      isCanvasLoaded: false
+    }
+  },
+  getters: {
+    [AppRoomGetters.LOCALE]: state => state.locale,
+    [AppRoomGetters.API]: state => state.api,
+    [AppRoomGetters.IS_CANVAS_LOADED]: state => state.isCanvasLoaded
+  },
+  mutations: {
+    [AppRoomMutation.SET_LOCALE] (state: AppRoomState, payload: Locale) {
+      state.locale = payload
+    },
+    [AppRoomMutation.ADD_API] (state: AppRoomState, payload: Api) {
+      state.api.push(payload)
+    },
+    [AppRoomMutation.DELETE_API] (state: AppRoomState) {
+      state.api = []
+    },
+    [AppRoomMutation.SET_IS_CANVAS_LOADED] (state: AppRoomState, isCanvasLoaded: boolean) {
+      state.isCanvasLoaded = isCanvasLoaded
+    }
+  },
+  actions: {
+    [AppRoomAction.SET_LOCALE] (context: AppRoomActionContext, payload: Locale) {
+      context.commit('SET_LOCALE', payload)
+    },
+    // eslint-disable-next-line
+    [AppRoomAction.ADD_API] (context: AppRoomActionContext, payload: any) {
+      context.commit('ADD_API', payload)
+    },
+    [AppRoomAction.DELETE_API] (context: AppRoomActionContext) {
+      context.commit('DELETE_API')
+    },
+    [AppRoomAction.SET_IS_CANVAS_LOADED] (context: AppRoomActionContext, isCanvasLoaded: boolean) {
+      context.commit('SET_IS_CANVAS_LOADED', isCanvasLoaded)
+    }
+  }
+}
+
+export default AppRoomModule
diff --git a/src/store/modules/app/stage.ts b/src/store/modules/app/stage.ts
new file mode 100644
index 0000000..ba1b0a5
--- /dev/null
+++ b/src/store/modules/app/stage.ts
@@ -0,0 +1,106 @@
+import { ActionContext, Module } from 'vuex'
+import Konva from 'konva'
+
+export enum AppStageGetters {
+  STAGE = 'stage',
+  STAGE_ZOOM = 'stageZoom',
+  STAGE_ZOOM_STEP = 'stageZoomStep',
+}
+
+export enum AppStageActions {
+  SET_STAGE = 'setStage',
+  SET_ZOOM = 'setZoom',
+  SET_ZOOM_IN = 'setZoomIn',
+  SET_ZOOM_OUT = 'setZoomOut',
+  SET_ZOOM_STEP = 'setZoomStep',
+  SET_ZOOM_DEFAULT = 'setZoomDefault',
+}
+
+export enum AppStageMutations {
+  SET_STAGE = 'SET_STAGE',
+  SET_ZOOM = 'SET_ZOOM',
+  SET_ZOOM_IN = 'SET_ZOOM_IN',
+  SET_ZOOM_OUT = 'SET_ZOOM_OUT',
+  SET_ZOOM_STEP = 'SET_ZOOM_STEP',
+}
+
+export interface AppStageState {
+  stage: Konva.Stage | undefined;
+  stageZoomMax: number;
+  stageZoomMin: number;
+  stageZoomStep: number;
+  stageZoom: number;
+}
+
+type AppStageActionContext = ActionContext<AppStageState, {}>;
+
+const AppStageModule: Module<AppStageState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      stage: undefined,
+      stageZoomMax: 300,
+      stageZoomMin: 10,
+      stageZoomStep: 10,
+      stageZoom: 100
+    }
+  },
+  getters: {
+    [AppStageGetters.STAGE]: state => state.stage,
+    [AppStageGetters.STAGE_ZOOM]: state => state.stageZoom,
+    [AppStageGetters.STAGE_ZOOM_STEP]: state => state.stageZoomStep
+  },
+  mutations: {
+    [AppStageMutations.SET_STAGE] (state: AppStageState, stage: Konva.Stage) {
+      state.stage = stage
+    },
+    [AppStageMutations.SET_ZOOM] (state: AppStageState, newValue: number) {
+      if (newValue < state.stageZoomMin) {
+        state.stageZoom = state.stageZoomMin
+      } else {
+        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
+      }
+    },
+    [AppStageMutations.SET_ZOOM_IN] (state: AppStageState) {
+      const newValue = state.stageZoom + state.stageZoomStep
+      if (newValue < state.stageZoomMin) {
+        state.stageZoom = state.stageZoomMin
+      } else {
+        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
+      }
+    },
+    [AppStageMutations.SET_ZOOM_OUT] (state: AppStageState) {
+      const newValue = state.stageZoom - state.stageZoomStep
+      if (newValue < state.stageZoomMin) {
+        state.stageZoom = state.stageZoomMin
+      } else {
+        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
+      }
+    },
+    [AppStageMutations.SET_ZOOM_STEP] (state: AppStageState, newValue: number) {
+      state.stageZoomStep = (newValue > 0) ? newValue : state.stageZoomStep
+    }
+  },
+  actions: {
+    [AppStageActions.SET_STAGE] (context: AppStageActionContext, stage: Konva.Stage) {
+      context.commit(AppStageMutations.SET_STAGE, stage)
+    },
+    [AppStageActions.SET_ZOOM_IN] (context: AppStageActionContext) {
+      context.commit(AppStageMutations.SET_ZOOM_IN)
+    },
+    [AppStageActions.SET_ZOOM_OUT] (context: AppStageActionContext) {
+      context.commit(AppStageMutations.SET_ZOOM_OUT)
+    },
+    [AppStageActions.SET_ZOOM] (context: AppStageActionContext, newValue: number) {
+      context.commit(AppStageMutations.SET_ZOOM, newValue)
+    },
+    [AppStageActions.SET_ZOOM_STEP] (context: AppStageActionContext, newValue: number) {
+      context.commit(AppStageMutations.SET_ZOOM_STEP, newValue)
+    },
+    [AppStageActions.SET_ZOOM_DEFAULT] (context: AppStageActionContext) {
+      context.commit(AppStageMutations.SET_ZOOM, 100)
+    }
+  }
+}
+
+export default AppStageModule
diff --git a/src/store/modules/tools.ts b/src/store/modules/app/tools.ts
similarity index 50%
rename from src/store/modules/tools.ts
rename to src/store/modules/app/tools.ts
index 8a9bcbc..ef80df0 100644
--- a/src/store/modules/tools.ts
+++ b/src/store/modules/app/tools.ts
@@ -11,14 +11,14 @@ import Text from '@/tools/Text'
 import Move from '@/tools/Move'
 import Entity from '@/tools/Entity'
 
-export enum ToolGetters {
+export enum AppToolGetters {
   ENABLED_TOOL = 'enabledTool',
   TOOLS = 'tools',
   TOOL = 'tool',
   ENABLED = 'enabled'
 }
 
-export enum ToolsAction {
+export enum AppToolsAction {
   ENABLE_TOOL = 'enableTool',
   DISABLE_TOOL = 'disableTool',
   ENABLE = 'enable',
@@ -34,13 +34,13 @@ export enum ToolsAction {
   SET_STROKE_STYLE = 'setStrokeStyle'
 }
 
-export interface ToolState {
+export interface AppToolState {
   enabledTool?: Tool;
   enabled: boolean;
   tools: Tool[];
 }
 
-export enum ToolsMutation {
+export enum AppToolsMutation {
   SET_ENABLED_TOOL = 'SET_ENABLED_TOOL',
   SET_DISABLED_TOOL = 'SET_DISABLED_TOOL',
   SET_ENABLED = 'SET_ENABLED',
@@ -56,9 +56,9 @@ export enum ToolsMutation {
   SET_STROKE_STYLE = 'SET_STROKE_STYLE'
 }
 
-type ToolActionContext = ActionContext<ToolState, {}>;
+type AppToolActionContext = ActionContext<AppToolState, {}>;
 
-const ToolModule: Module<ToolState, {}> = {
+const AppToolModule: Module<AppToolState, {}> = {
   namespaced: true,
   state () {
     return {
@@ -79,25 +79,25 @@ const ToolModule: Module<ToolState, {}> = {
     }
   },
   getters: {
-    [ToolGetters.TOOLS]: state => state.tools,
-    [ToolGetters.ENABLED_TOOL]: state => state.enabledTool,
-    [ToolGetters.TOOL]: (state) => (name: string) => state.tools.find(tool => tool.name === name),
-    [ToolGetters.ENABLED]: state => state.enabled
+    [AppToolGetters.TOOLS]: state => state.tools,
+    [AppToolGetters.ENABLED_TOOL]: state => state.enabledTool,
+    [AppToolGetters.TOOL]: (state) => (name: string) => state.tools.find(tool => tool.name === name),
+    [AppToolGetters.ENABLED]: state => state.enabled
   },
   mutations: {
-    [ToolsMutation.SET_ENABLED_TOOL] (state: ToolState, payload: string) {
+    [AppToolsMutation.SET_ENABLED_TOOL] (state: AppToolState, payload: string) {
       state.enabledTool = state.tools.find(tool => tool.name === payload)
     },
-    [ToolsMutation.SET_DISABLED_TOOL] (state: ToolState) {
+    [AppToolsMutation.SET_DISABLED_TOOL] (state: AppToolState) {
       state.enabledTool = undefined
     },
-    [ToolsMutation.SET_ENABLED] (state: ToolState) {
+    [AppToolsMutation.SET_ENABLED] (state: AppToolState) {
       state.enabled = true
     },
-    [ToolsMutation.SET_DISABLED] (state: ToolState) {
+    [AppToolsMutation.SET_DISABLED] (state: AppToolState) {
       state.enabled = false
     },
-    [ToolsMutation.SET_TOOL] (state: ToolState, payload: Tool) {
+    [AppToolsMutation.SET_TOOL] (state: AppToolState, payload: Tool) {
       let foundIndex = -1
       const found = state.tools.find((tool: Tool, index: number) => {
         foundIndex = index
@@ -109,88 +109,88 @@ const ToolModule: Module<ToolState, {}> = {
       }
       state.enabledTool = payload
     },
-    [ToolsMutation.SET_COLOUR] (state: ToolState, colour: string) {
+    [AppToolsMutation.SET_COLOUR] (state: AppToolState, colour: string) {
       if (state.enabledTool) {
         state.enabledTool.colour = colour
       }
     },
-    [ToolsMutation.SET_SIZE] (state: ToolState, size: number) {
+    [AppToolsMutation.SET_SIZE] (state: AppToolState, size: number) {
       if (state.enabledTool) {
         state.enabledTool.size = size
       }
     },
-    [ToolsMutation.SET_END_STYLE] (state: ToolState, endStyle: string) {
+    [AppToolsMutation.SET_END_STYLE] (state: AppToolState, endStyle: string) {
       if (state.enabledTool) {
         state.enabledTool.endStyle = endStyle
       }
     },
-    [ToolsMutation.SET_OUTLINE_COLOUR] (state: ToolState, outlineColour: string) {
+    [AppToolsMutation.SET_OUTLINE_COLOUR] (state: AppToolState, outlineColour: string) {
       if (state.enabledTool) {
         state.enabledTool.outlineColour = outlineColour
       }
     },
-    [ToolsMutation.SET_SHOW_RADIUS] (state: ToolState, showRadius: boolean) {
+    [AppToolsMutation.SET_SHOW_RADIUS] (state: AppToolState, showRadius: boolean) {
       if (state.enabledTool) {
         state.enabledTool.showRadius = showRadius
       }
     },
-    [ToolsMutation.SET_SHOW_CIRCLE] (state: ToolState, showCircle: boolean) {
+    [AppToolsMutation.SET_SHOW_CIRCLE] (state: AppToolState, showCircle: boolean) {
       if (state.enabledTool) {
         state.enabledTool.showCircle = showCircle
       }
     },
-    [ToolsMutation.SET_TEMPORARY] (state: ToolState, temporary: boolean) {
+    [AppToolsMutation.SET_TEMPORARY] (state: AppToolState, temporary: boolean) {
       if (state.enabledTool) {
         state.enabledTool.temporary = temporary
       }
     },
-    [ToolsMutation.SET_STROKE_STYLE] (state: ToolState, strokeStyle: number) {
+    [AppToolsMutation.SET_STROKE_STYLE] (state: AppToolState, strokeStyle: number) {
       if (state.enabledTool) {
         state.enabledTool.strokeStyle = strokeStyle
       }
     }
   },
   actions: {
-    [ToolsAction.ENABLE_TOOL] (context: ToolActionContext, toolName: string) {
-      context.commit(ToolsMutation.SET_ENABLED_TOOL, toolName)
+    [AppToolsAction.ENABLE_TOOL] (context: AppToolActionContext, toolName: string) {
+      context.commit(AppToolsMutation.SET_ENABLED_TOOL, toolName)
     },
-    [ToolsAction.DISABLE_TOOL] (context: ToolActionContext) {
-      context.commit(ToolsMutation.SET_DISABLED_TOOL)
+    [AppToolsAction.DISABLE_TOOL] (context: AppToolActionContext) {
+      context.commit(AppToolsMutation.SET_DISABLED_TOOL)
     },
-    [ToolsAction.ENABLE] (context: ToolActionContext) {
-      context.commit(ToolsMutation.SET_ENABLED)
+    [AppToolsAction.ENABLE] (context: AppToolActionContext) {
+      context.commit(AppToolsMutation.SET_ENABLED)
     },
-    [ToolsAction.DISABLE] (context: ToolActionContext) {
-      context.commit(ToolsMutation.SET_DISABLED)
+    [AppToolsAction.DISABLE] (context: AppToolActionContext) {
+      context.commit(AppToolsMutation.SET_DISABLED)
     },
-    [ToolsAction.SET_TOOL] (context: ToolActionContext, tool: Tool) {
-      context.commit(ToolsMutation.SET_TOOL, tool)
+    [AppToolsAction.SET_TOOL] (context: AppToolActionContext, tool: Tool) {
+      context.commit(AppToolsMutation.SET_TOOL, tool)
     },
-    [ToolsAction.SET_COLOUR] (context: ToolActionContext, colour: string) {
-      context.commit(ToolsMutation.SET_COLOUR, colour)
+    [AppToolsAction.SET_COLOUR] (context: AppToolActionContext, colour: string) {
+      context.commit(AppToolsMutation.SET_COLOUR, colour)
     },
-    [ToolsAction.SET_SIZE] (context: ToolActionContext, size: number) {
-      context.commit(ToolsMutation.SET_SIZE, size)
+    [AppToolsAction.SET_SIZE] (context: AppToolActionContext, size: number) {
+      context.commit(AppToolsMutation.SET_SIZE, size)
     },
-    [ToolsAction.SET_END_STYLE] (context: ToolActionContext, endStyle: string) {
-      context.commit(ToolsMutation.SET_END_STYLE, endStyle)
+    [AppToolsAction.SET_END_STYLE] (context: AppToolActionContext, endStyle: string) {
+      context.commit(AppToolsMutation.SET_END_STYLE, endStyle)
     },
-    [ToolsAction.SET_OUTLINE_COLOUR] (context: ToolActionContext, outlineColour: string) {
-      context.commit(ToolsMutation.SET_OUTLINE_COLOUR, outlineColour)
+    [AppToolsAction.SET_OUTLINE_COLOUR] (context: AppToolActionContext, outlineColour: string) {
+      context.commit(AppToolsMutation.SET_OUTLINE_COLOUR, outlineColour)
     },
-    [ToolsAction.SET_SHOW_RADIUS] (context: ToolActionContext, showRadius: boolean) {
-      context.commit(ToolsMutation.SET_SHOW_RADIUS, showRadius)
+    [AppToolsAction.SET_SHOW_RADIUS] (context: AppToolActionContext, showRadius: boolean) {
+      context.commit(AppToolsMutation.SET_SHOW_RADIUS, showRadius)
     },
-    [ToolsAction.SET_SHOW_CIRCLE] (context: ToolActionContext, showCircle: boolean) {
-      context.commit(ToolsMutation.SET_SHOW_CIRCLE, showCircle)
+    [AppToolsAction.SET_SHOW_CIRCLE] (context: AppToolActionContext, showCircle: boolean) {
+      context.commit(AppToolsMutation.SET_SHOW_CIRCLE, showCircle)
     },
-    [ToolsAction.SET_TEMPORARY] (context: ToolActionContext, temporarily: boolean) {
-      context.commit(ToolsMutation.SET_TEMPORARY, temporarily)
+    [AppToolsAction.SET_TEMPORARY] (context: AppToolActionContext, temporarily: boolean) {
+      context.commit(AppToolsMutation.SET_TEMPORARY, temporarily)
     },
-    [ToolsAction.SET_STROKE_STYLE] (context: ToolActionContext, strokeStyle: number) {
-      context.commit(ToolsMutation.SET_STROKE_STYLE, strokeStyle)
+    [AppToolsAction.SET_STROKE_STYLE] (context: AppToolActionContext, strokeStyle: number) {
+      context.commit(AppToolsMutation.SET_STROKE_STYLE, strokeStyle)
     }
   }
 }
 
-export default ToolModule
+export default AppToolModule
diff --git a/src/store/modules/authentication.ts b/src/store/modules/authentication.ts
deleted file mode 100644
index b07b9f5..0000000
--- a/src/store/modules/authentication.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import axios from 'axios'
-import { verify } from 'jsonwebtoken'
-import { mapProviders, Providers } from '@/util/ProvidersUtil'
-
-export const JWT_KEY = 'jsonwebtoken'
-
-// Possible regions in the JWT token.
-export enum JWTRegion {
-  EU = 'eu',
-  NA = 'na',
-  RU = 'ru',
-  SA = 'sa',
-}
-
-export interface JWT {
-  iss: string; // Who issued it. Example: GameTactic.
-  aud: string; // For what. Example: GameTactic.
-  jti: string; // UUID. Identifier of user.
-  iat: number; // JWT is not valid before this date. Unix datetime.
-  exp: number; // JWT is not valid after this date. Unix datetime.
-  username: string; // Viewable user identifier. Might not be unique.
-  region: JWTRegion; // Region where user is located. See enum.
-  // eslint-disable-next-line
-}
-
-export interface ExtendedJWT extends JWT {
-  encoded: string; // Token in encoded format.
-}
-
-export interface AuthenticationState {
-  jwt: ExtendedJWT | null;
-  providers: Providers;
-}
-
-export enum AuthenticationActions {
-  AUTHENTICATE = 'authenticate',
-  CHECK_TOKEN_EXPIRY = 'checkTokenExpiry',
-  LOGIN_WG = 'auth_wg',
-  LOGOUT = 'logout',
-  STORE_TOKEN = 'storeToken',
-  LOAD_PROVIDERS = 'loadProviders'
-}
-
-export enum AuthenticationMutation {
-  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN',
-  SET_PROVIDERS = 'SET_PROVIDERS'
-}
-
-export enum AuthenticationGetters {
-  JWT = 'jwt',
-  IS_AUTH = 'authenticated',
-  PROVIDER_NAMES = 'providers',
-  PROVIDER = 'provider',
-  PROVIDERS = 'providers'
-}
-
-type AuthenticationActionContext = ActionContext<AuthenticationState, {}>
-
-const AuthenticationModule: Module<AuthenticationState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      jwt: null,
-      providers: {}
-    }
-  },
-  getters: {
-    [AuthenticationGetters.JWT]: state => state.jwt,
-    [AuthenticationGetters.IS_AUTH]: state => state.jwt !== null,
-    [AuthenticationGetters.PROVIDER_NAMES]: state => Object.getOwnPropertyNames(state.providers),
-    [AuthenticationGetters.PROVIDERS]: state => state.providers,
-    [AuthenticationGetters.PROVIDER]: state => (name: string) => state.providers[name]
-  },
-  mutations: {
-    [AuthenticationMutation.SET_AUTHENTICATION_TOKEN] (state: AuthenticationState, payload: ExtendedJWT) {
-      state.jwt = payload
-    },
-    [AuthenticationMutation.SET_PROVIDERS] (state: AuthenticationState, payload: Providers) {
-      state.providers = payload
-    }
-  },
-  actions: {
-    async [AuthenticationActions.AUTHENTICATE] (context: AuthenticationActionContext, token: string) {
-      const response = await axios.get((process.env.VUE_APP_MS_AUTH as string))
-      if (response.status !== 200) {
-        throw Error('Could not reach authentication server.')
-      }
-
-      const jwt = verify(token, response.data.publicKey) as JWT
-      const extended: ExtendedJWT = { ...jwt, ...{ encoded: token } }
-
-      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)
-    },
-    [AuthenticationActions.LOGIN_WG] (context: AuthenticationActionContext, endpoint: string) {
-      const returnUrl = `${process.env.VUE_APP_MS_AUTH}${endpoint}/${window.location.href}`
-      location.assign(returnUrl)
-    },
-    [AuthenticationActions.LOGOUT] (context: AuthenticationActionContext) {
-      localStorage.removeItem(JWT_KEY)
-      context.commit(AuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
-    },
-    async [AuthenticationActions.LOAD_PROVIDERS] (context: AuthenticationActionContext) {
-      if (process.env.VUE_APP_MS_AUTH) {
-        const response = await axios.get(process.env.VUE_APP_MS_AUTH)
-        if (response.status !== 200 || !(response.data?.providers)) {
-          throw Error('Could not fetch authentication providers')
-        }
-        const providers = response.data.providers
-        context.commit(AuthenticationMutation.SET_PROVIDERS, mapProviders(providers))
-      } else {
-        throw Error('Authentication URI is not set')
-      }
-    }
-  }
-}
-
-export default AuthenticationModule
diff --git a/src/store/modules/canvasEntity.ts b/src/store/modules/canvasEntity.ts
deleted file mode 100644
index b3009aa..0000000
--- a/src/store/modules/canvasEntity.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import { CanvasElement, CanvasElementType } from '@/types/Canvas'
-import uuid from 'uuid'
-import { AuthenticationGetters } from '@/store/modules/authentication'
-
-const defaultCanvasEntity: CanvasEntityState = {
-  canvasElement: {
-    jti: '',
-    id: '',
-    type: CanvasElementType.SHAPE,
-    data: {},
-    tool: {
-      name: '',
-      temporary: false
-    },
-    layerId: Math.random().toString(36), // TODO: Use some other method. (Do we even need this?)
-    isVisible: true,
-    position: { x: 0, y: 0 }
-  },
-  hasMoved: false,
-  modifyData: {}
-}
-
-export enum CanvasEntityGetters {
-  CANVAS_ELEMENT = 'canvasElement',
-  CANVAS_ENTITY = 'canvasEntity'
-}
-
-export enum CanvasEntityActions {
-  SET_CANVAS_ENTITY = 'setCanvasEntity',
-  RESET_CANVAS_ENTITY = 'resetCanvasEntity',
-  SET_CANVAS_ELEMENT = 'setCanvasElement',
-  RESET_CANVAS_ELEMENT = 'resetCanvasElement'
-}
-
-export enum CanvasEntityMutations {
-  SET_CANVAS_ENTITY = 'SET_CANVAS_ENTITY',
-  RESET_CANVAS_ENTITY = 'RESET_CANVAS_ENTITY',
-  SET_CANVAS_ELEMENT = 'SET_CANVAS_ELEMENT',
-  RESET_CANVAS_ELEMENT = 'RESET_CANVAS_ELEMENT'
-}
-
-export interface CanvasEntityState {
-  canvasElement: CanvasElement;
-  hasMoved: boolean;
-  modifyData: {} | undefined;
-}
-
-type CanvasEntityActionContext = ActionContext<CanvasEntityState, {}>;
-
-const CanvasEntityModule: Module<CanvasEntityState, {}> = {
-  namespaced: true,
-  state () {
-    return defaultCanvasEntity
-  },
-  getters: {
-    [CanvasEntityGetters.CANVAS_ELEMENT]: state => state.canvasElement,
-    [CanvasEntityGetters.CANVAS_ENTITY]: state => state
-  },
-  mutations: {
-    [CanvasEntityMutations.SET_CANVAS_ENTITY] (state: CanvasEntityState, entity: CanvasEntityState) {
-      state = entity
-    },
-    [CanvasEntityMutations.RESET_CANVAS_ENTITY] (state: CanvasEntityState, newState: CanvasEntityState) {
-      state = newState
-    },
-    [CanvasEntityMutations.SET_CANVAS_ELEMENT] (state: CanvasEntityState, canvasElement: CanvasElement) {
-      state.canvasElement = canvasElement
-    },
-    [CanvasEntityMutations.RESET_CANVAS_ELEMENT] (state: CanvasEntityState) {
-      state.canvasElement = defaultCanvasEntity.canvasElement
-      state.canvasElement.id = uuid()
-    }
-  },
-  actions: {
-    [CanvasEntityActions.SET_CANVAS_ELEMENT] (context: CanvasEntityActionContext, canvasElement: CanvasElement) {
-      context.commit(CanvasEntityMutations.SET_CANVAS_ELEMENT, canvasElement)
-    },
-    [CanvasEntityActions.RESET_CANVAS_ELEMENT] (context: CanvasEntityActionContext) {
-      context.commit(CanvasEntityMutations.RESET_CANVAS_ELEMENT)
-    },
-    [CanvasEntityActions.SET_CANVAS_ENTITY] (context: CanvasEntityActionContext, entity: CanvasEntityState) {
-      context.commit(CanvasEntityMutations.SET_CANVAS_ENTITY, entity)
-    },
-    [CanvasEntityActions.RESET_CANVAS_ENTITY] (context: CanvasEntityActionContext) {
-      const newState = defaultCanvasEntity
-      newState.canvasElement.id = uuid()
-      newState.canvasElement.jti = (context.rootGetters[`authentication/${AuthenticationGetters.JWT}`]).jti
-      context.commit(CanvasEntityMutations.RESET_CANVAS_ENTITY, newState)
-    }
-  }
-}
-
-export default CanvasEntityModule
diff --git a/src/store/modules/layer.ts b/src/store/modules/layer.ts
deleted file mode 100644
index 45540ab..0000000
--- a/src/store/modules/layer.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import Konva from 'konva'
-
-export enum LayerGetters {
-  LAYER = 'layer',
-  LAYER_FIND_GROUP = 'layerFindGroup'
-}
-
-export enum LayerActions {
-  LAYER_ADD = 'layerAdd',
-  LAYER_SET = 'layerSet',
-  LAYER_DESTROY_GROUP = 'layerDestroyGroup',
-  LAYER_DESTROY = 'layerDestroy',
-  LAYER_CLEAR = 'layerClear'
-}
-
-export enum LayerMutations {
-  LAYER_SET = 'LAYER_SET',
-  LAYER_ADD = 'LAYER_ADD',
-  LAYER_DESTROY = 'LAYER_DESTROY',
-  LAYER_DESTROY_GROUP = 'LAYER_DESTROY_GROUP',
-  LAYER_CLEAR = 'LAYER_CLEAR'
-}
-
-export interface LayerState {
-  layer: Konva.Layer;
-}
-
-type LayerActionContext = ActionContext<LayerState, {}>;
-
-const LayerModule: Module<LayerState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      layer: new Konva.Layer()
-    }
-  },
-  getters: {
-    [LayerGetters.LAYER]: state => state.layer,
-    [LayerGetters.LAYER_FIND_GROUP]: state => (groupId: string) => {
-      return state.layer.findOne((child: Konva.Group) => child.attrs.id === groupId)
-    }
-  },
-  mutations: {
-    [LayerMutations.LAYER_DESTROY_GROUP] (state: LayerState, groupId: number) {
-      state.layer.findOne((child: Konva.Group) => {
-        if (child.attrs.id === groupId) {
-          child.destroyChildren()
-        }
-      })
-    },
-    [LayerMutations.LAYER_SET] (state: LayerState, layer: Konva.Layer) {
-      state.layer = layer
-    },
-    [LayerMutations.LAYER_ADD] (state: LayerState, newGroup: Konva.Group) {
-      state.layer.add(newGroup)
-    },
-    [LayerMutations.LAYER_DESTROY] (state: LayerState) {
-      state.layer.destroy()
-    },
-    [LayerMutations.LAYER_CLEAR] (state: LayerState) {
-      state.layer.destroyChildren()
-    }
-  },
-  actions: {
-    [LayerActions.LAYER_ADD] (context: LayerActionContext, newGroup: Konva.Group) {
-      context.commit(LayerMutations.LAYER_ADD, newGroup)
-    },
-    [LayerActions.LAYER_SET] (context: LayerActionContext, newLayer: Konva.Layer) {
-      context.commit(LayerMutations.LAYER_SET, newLayer)
-    },
-    [LayerActions.LAYER_DESTROY] (context: LayerActionContext) {
-      context.commit(LayerMutations.LAYER_DESTROY)
-    },
-    [LayerActions.LAYER_DESTROY_GROUP] (context: LayerActionContext, groupId) {
-      context.commit(LayerMutations.LAYER_DESTROY_GROUP, groupId)
-    },
-    [LayerActions.LAYER_CLEAR] (context: LayerActionContext) {
-      context.commit(LayerMutations.LAYER_CLEAR)
-    }
-  }
-}
-
-export default LayerModule
diff --git a/src/store/modules/room.ts b/src/store/modules/room.ts
deleted file mode 100644
index 6539b2f..0000000
--- a/src/store/modules/room.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import { Game, PresentationPayload, Api, Presentation } from './types'
-
-export enum GameName {
-  NONE = '',
-  WOWS = 'wows',
-  WOT = 'wot'
-}
-
-export enum Locale {
-  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_LOCALE = 'setLocale',
-  SET_GAME_NAME = 'setGameName',
-  SET_GAME_API = 'setGameApi',
-  DELETE_GAME_API = 'deleteGameApi',
-  SET_PRESENTATION = 'setPresentation',
-  UNSET_PRESENTATION = 'unsetPresentation',
-  SET_IS_PRIVATE = 'setIsPrivate',
-  SET_IS_CANVAS_LOADED = 'setIsCanvasLoaded',
-  SET_ROOM_ID = 'setRoomId'
-}
-
-export enum RoomMutation {
-  SET_LOCALE = 'SET_LOCALE',
-  SET_GAME_NAME = 'SET_GAME_NAME',
-  SET_GAME_API = 'SET_GAME_API',
-  DELETE_GAME_API = 'DELETE_GAME_API',
-  SET_PRESENTATION = 'SET_PRESENTATION',
-  UNSET_PRESENTATION = 'UNSET_PRESENTATION',
-  SET_IS_PRIVATE = 'SET_IS_PRIVATE',
-  SET_IS_CANVAS_LOADED = 'SET_IS_CANVAS_LOADED',
-  SET_ROOM_ID = 'SET_ROOM_ID'
-}
-
-export enum RoomGetters {
-  LOCALE = 'locale',
-  GAME_NAME = 'gameName',
-  GAME_API = 'gameApi',
-  PRESENTATION = 'presentation',
-  IS_PRIVATE = 'isPrivate',
-  IS_CANVAS_LOADED = 'isCanvasLoaded',
-  ROOM_ID = 'roomId'
-}
-
-export interface RoomState {
-  locale: Locale;
-  game: Game;
-  presentation: Presentation;
-  isPrivate: boolean;
-  isCanvasLoaded: boolean;
-  roomId: string | undefined;
-}
-
-type RoomActionContext = ActionContext<RoomState, {}>
-
-const RoomModule: Module<RoomState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      locale: Locale['EN'],
-      game: {
-        name: GameName['NONE'],
-        api: []
-      },
-      presentation: {
-        enabledBy: undefined,
-        tacticId: undefined
-      },
-      isPrivate: false,
-      isCanvasLoaded: false,
-      roomId: undefined
-    }
-  },
-  getters: {
-    [RoomGetters.LOCALE]: state => state.locale,
-    [RoomGetters.GAME_NAME]: state => state.game.name,
-    [RoomGetters.GAME_API]: state => state.game.api,
-    [RoomGetters.PRESENTATION]: state => ({
-      enabledBy: state.presentation.enabledBy,
-      tacticId: state.presentation.tacticId
-    }),
-    [RoomGetters.IS_PRIVATE]: state => state.isPrivate,
-    [RoomGetters.IS_CANVAS_LOADED]: state => state.isCanvasLoaded,
-    [RoomGetters.ROOM_ID]: state => state.roomId
-  },
-  mutations: {
-    [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_PRESENTATION] (state: RoomState, payload: PresentationPayload) {
-      state.presentation.enabledBy = payload.enabledBy
-      state.presentation.tacticId = payload.tacticId
-    },
-    [RoomMutation.UNSET_PRESENTATION] (state: RoomState) {
-      state.presentation.enabledBy = undefined
-      state.presentation.tacticId = undefined
-    },
-    [RoomMutation.SET_IS_PRIVATE] (state: RoomState, isPrivate: boolean) {
-      state.isPrivate = isPrivate
-    },
-    [RoomMutation.SET_IS_CANVAS_LOADED] (state: RoomState, isCanvasLoaded: boolean) {
-      state.isCanvasLoaded = isCanvasLoaded
-    },
-    [RoomMutation.SET_ROOM_ID] (state: RoomState, roomId: string) {
-      state.roomId = roomId
-    }
-  },
-  actions: {
-    [RoomAction.SET_LOCALE] (context: RoomActionContext, payload: Locale) {
-      context.commit('SET_LOCALE', payload)
-    },
-    [RoomAction.SET_GAME_NAME] (context: RoomActionContext, name: GameName) {
-      context.commit('SET_GAME_NAME', name)
-    },
-    // eslint-disable-next-line
-    [RoomAction.SET_GAME_API] (context: RoomActionContext, payload: any) {
-      context.commit('SET_GAME_API', payload)
-    },
-    [RoomAction.DELETE_GAME_API] (context: RoomActionContext) {
-      context.commit('DELETE_GAME_API')
-    },
-    [RoomAction.SET_PRESENTATION] (context: RoomActionContext, payload: PresentationPayload) {
-      context.commit('SET_PRESENTATION', payload)
-    },
-    [RoomAction.UNSET_PRESENTATION] (context: RoomActionContext) {
-      context.commit('SET_PRESENTATION')
-    },
-    [RoomAction.SET_IS_PRIVATE] (context: RoomActionContext, isPrivate: boolean) {
-      context.commit('SET_IS_PRIVATE', isPrivate)
-    },
-    [RoomAction.SET_IS_CANVAS_LOADED] (context: RoomActionContext, isCanvasLoaded: boolean) {
-      context.commit('SET_IS_CANVAS_LOADED', isCanvasLoaded)
-    },
-    [RoomAction.SET_ROOM_ID] (context: RoomActionContext, roomId: string) {
-      context.commit('SET_ROOM_ID', roomId)
-    }
-  }
-}
-
-export default RoomModule
diff --git a/src/store/modules/canvas.ts b/src/store/modules/socket/canvas.ts
similarity index 51%
rename from src/store/modules/canvas.ts
rename to src/store/modules/socket/canvas.ts
index 1f65ec6..92e8508 100644
--- a/src/store/modules/canvas.ts
+++ b/src/store/modules/socket/canvas.ts
@@ -1,10 +1,10 @@
 import { ActionContext, Module } from 'vuex'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
-import { ToolState } from '@/store/modules/tools'
-import { StageState } from '@/store/modules/stage'
+import { AppToolState } from '@/store/modules/app/tools'
 import { Tool } from '@/tools/Tool'
+import { Namespaces } from '@/store'
 
-export enum CanvasMutation {
+export enum SocketCanvasMutation {
   SET_CANVAS_ELEMENT = 'SET_CANVAS_ELEMENT',
   SET_CANVAS_ELEMENT_HISTORY = 'SET_CANVAS_ELEMENT_HISTORY',
   ADD_CANVAS_ELEMENT = 'ADD_CANVAS_ELEMENT',
@@ -13,7 +13,7 @@ export enum CanvasMutation {
   ADD_CANVAS_ELEMENT_HISTORY = 'ADD_CANVAS_ELEMENT_HISTORY',
 }
 
-export enum CanvasAction {
+export enum SocketCanvasAction {
   SET_CANVAS_ELEMENT = 'setCanvasElement',
   SET_CANVAS_ELEMENT_HISTORY = 'setCanvasElementHistory',
   ADD_CANVAS_ELEMENT = 'addCanvasElement',
@@ -22,88 +22,86 @@ export enum CanvasAction {
   ADD_CANVAS_ELEMENT_HISTORY = 'addCanvasElementHistory'
 }
 
-export enum CanvasGetters {
+export enum SocketCanvasGetters {
   CANVAS_ELEMENTS = 'canvasElements',
   CANVAS_ELEMENTS_HISTORY = 'canvasElementsHistory',
   CANVAS_ELEMENT_BY_ID = 'canvasElementById',
   CANVAS_ELEMENT_HISTORY_BY_ID = 'canvasElementHistoryById'
 }
 
-interface CanvasState {
+interface SocketCanvasState {
   canvasElements: CanvasElement[];
   canvasElementsHistory: CanvasElementHistory[];
 }
 
 interface RootState extends CanvasElement {
-  canvas: CanvasState;
-  tools: ToolState;
-  stage: StageState;
+  tools: AppToolState;
+  [key: string]: AppToolState | string | {};
 }
 
-type CanvasActionContext = ActionContext<CanvasState, RootState>
+type SocketCanvasActionContext = ActionContext<SocketCanvasState, RootState>
 
-const CanvasModule: Module<CanvasState, RootState> = {
+const SocketCanvasModule: Module<SocketCanvasState, RootState> = {
   namespaced: true,
   state () {
     return {
       canvasElements: [],
-      canvasElementsHistory: [],
-      isCanvasLoaded: false
+      canvasElementsHistory: []
     }
   },
   getters: {
-    [CanvasGetters.CANVAS_ELEMENTS]: state => state.canvasElements,
-    [CanvasGetters.CANVAS_ELEMENTS_HISTORY]: state => state.canvasElementsHistory,
-    [CanvasGetters.CANVAS_ELEMENT_BY_ID]: state => (id: string) => state.canvasElements.find(canvasElement => canvasElement.id === id),
-    [CanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID]: state => (id: string) => state.canvasElementsHistory.find(canvasElementHistory => canvasElementHistory.id === id)
+    [SocketCanvasGetters.CANVAS_ELEMENTS]: state => state.canvasElements,
+    [SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY]: state => state.canvasElementsHistory,
+    [SocketCanvasGetters.CANVAS_ELEMENT_BY_ID]: state => (id: string) => state.canvasElements.find(canvasElement => canvasElement.id === id),
+    [SocketCanvasGetters.CANVAS_ELEMENT_HISTORY_BY_ID]: state => (id: string) => state.canvasElementsHistory.find(canvasElementHistory => canvasElementHistory.id === id)
   },
   mutations: {
-    [CanvasMutation.SET_CANVAS_ELEMENT] (state: CanvasState, payload: CanvasElement[]) {
+    [SocketCanvasMutation.SET_CANVAS_ELEMENT] (state: SocketCanvasState, payload: CanvasElement[]) {
       state.canvasElements = [...payload]
     },
-    [CanvasMutation.SET_CANVAS_ELEMENT_HISTORY] (state: CanvasState, payload: CanvasElementHistory[]) {
+    [SocketCanvasMutation.SET_CANVAS_ELEMENT_HISTORY] (state: SocketCanvasState, payload: CanvasElementHistory[]) {
       state.canvasElementsHistory = [...payload]
     },
-    [CanvasMutation.HIDE_CANVAS_ELEMENT] (state: CanvasState, payload: CanvasElement) {
+    [SocketCanvasMutation.HIDE_CANVAS_ELEMENT] (state: SocketCanvasState, payload: CanvasElement) {
       const foundElement = state.canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === payload.id)
       if (foundElement) {
         foundElement.isVisible = false
       }
     },
-    [CanvasMutation.SHOW_CANVAS_ELEMENT] (state: CanvasState, payload: CanvasElement) {
+    [SocketCanvasMutation.SHOW_CANVAS_ELEMENT] (state: SocketCanvasState, payload: CanvasElement) {
       const foundElement = state.canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === payload.id)
       if (foundElement) {
         foundElement.isVisible = true
       }
     },
-    [CanvasMutation.ADD_CANVAS_ELEMENT] (state: CanvasState, payload: RootState) {
+    [SocketCanvasMutation.ADD_CANVAS_ELEMENT] (state: SocketCanvasState, payload: RootState) {
       const foundTool: Tool | undefined = payload.tools.tools.find((tool: Tool) => tool.name === payload.tool.name)
       state.canvasElements.push({ ...payload, tool: { ...payload.tool, renderCanvas: foundTool?.renderCanvas } })
     },
-    [CanvasMutation.ADD_CANVAS_ELEMENT_HISTORY] (state: CanvasState, payload: CanvasElementHistory) {
+    [SocketCanvasMutation.ADD_CANVAS_ELEMENT_HISTORY] (state: SocketCanvasState, payload: CanvasElementHistory) {
       state.canvasElementsHistory.push({ ...payload })
     }
   },
   actions: {
-    [CanvasAction.SET_CANVAS_ELEMENT] (context: CanvasActionContext, payload: CanvasElement[]) {
+    [SocketCanvasAction.SET_CANVAS_ELEMENT] (context: SocketCanvasActionContext, payload: CanvasElement[]) {
       context.commit('SET_CANVAS_ELEMENT', payload)
     },
-    [CanvasAction.SET_CANVAS_ELEMENT_HISTORY] (context: CanvasActionContext, payload: CanvasElement[]) {
+    [SocketCanvasAction.SET_CANVAS_ELEMENT_HISTORY] (context: SocketCanvasActionContext, payload: CanvasElement[]) {
       context.commit('SET_CANVAS_ELEMENT_HISTORY', payload)
     },
-    [CanvasAction.ADD_CANVAS_ELEMENT] (context: CanvasActionContext, payload: CanvasElement) {
-      context.commit('ADD_CANVAS_ELEMENT', { ...payload, tools: context.rootState.tools })
+    [SocketCanvasAction.ADD_CANVAS_ELEMENT] (context: SocketCanvasActionContext, payload: CanvasElement) {
+      context.commit('ADD_CANVAS_ELEMENT', { ...payload, tools: context.rootState[Namespaces.APP_TOOLS] })
     },
-    [CanvasAction.HIDE_CANVAS_ELEMENT] (context: CanvasActionContext, payload: CanvasElement) {
+    [SocketCanvasAction.HIDE_CANVAS_ELEMENT] (context: SocketCanvasActionContext, payload: CanvasElement) {
       context.commit('HIDE_CANVAS_ELEMENT', payload)
     },
-    [CanvasAction.SHOW_CANVAS_ELEMENT] (context: CanvasActionContext, payload: RootState) {
+    [SocketCanvasAction.SHOW_CANVAS_ELEMENT] (context: SocketCanvasActionContext, payload: RootState) {
       context.commit('SHOW_CANVAS_ELEMENT', payload)
     },
-    [CanvasAction.ADD_CANVAS_ELEMENT_HISTORY] (context: CanvasActionContext, payload: CanvasElementHistory) {
+    [SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY] (context: SocketCanvasActionContext, payload: CanvasElementHistory) {
       context.commit('ADD_CANVAS_ELEMENT_HISTORY', { ...payload })
     }
   }
 }
 
-export default CanvasModule
+export default SocketCanvasModule
diff --git a/src/store/modules/socket.ts b/src/store/modules/socket/index.ts
similarity index 100%
rename from src/store/modules/socket.ts
rename to src/store/modules/socket/index.ts
diff --git a/src/store/modules/socket/room.ts b/src/store/modules/socket/room.ts
new file mode 100644
index 0000000..196554f
--- /dev/null
+++ b/src/store/modules/socket/room.ts
@@ -0,0 +1,102 @@
+import { ActionContext, Module } from 'vuex'
+import { PresentationPayload, Api, Presentation } from '../../types'
+
+export enum Game {
+  NONE = '',
+  WOWS = 'wows',
+  WOT = 'wot'
+}
+
+export enum SocketRoomAction {
+  SET_GAME = 'setGame',
+  SET_PRESENTATION = 'setPresentation',
+  UNSET_PRESENTATION = 'unsetPresentation',
+  SET_IS_PRIVATE = 'setIsPrivate',
+  SET_ROOM_ID = 'setRoomId'
+}
+
+export enum SocketRoomMutation {
+  SET_GAME = 'SET_GAME',
+  SET_PRESENTATION = 'SET_PRESENTATION',
+  UNSET_PRESENTATION = 'UNSET_PRESENTATION',
+  SET_IS_PRIVATE = 'SET_IS_PRIVATE',
+  SET_ROOM_ID = 'SET_ROOM_ID'
+}
+
+export enum SocketRoomGetters {
+  GAME = 'game',
+  PRESENTATION = 'presentation',
+  IS_PRIVATE = 'isPrivate',
+  ROOM_ID = 'roomId'
+}
+
+export interface SocketRoomState {
+  game: Game;
+  presentation: Presentation;
+  isPrivate: boolean;
+  roomId: string | undefined;
+}
+
+type SocketRoomActionContext = ActionContext<SocketRoomState, {}>
+
+const SocketRoomModule: Module<SocketRoomState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      game: Game['NONE'],
+      presentation: {
+        enabledBy: undefined,
+        tacticId: undefined
+      },
+      isPrivate: false,
+      roomId: undefined
+    }
+  },
+  getters: {
+    [SocketRoomGetters.GAME]: state => state.game,
+    [SocketRoomGetters.PRESENTATION]: state => ({
+      enabledBy: state.presentation.enabledBy,
+      tacticId: state.presentation.tacticId
+    }),
+    [SocketRoomGetters.IS_PRIVATE]: state => state.isPrivate,
+    [SocketRoomGetters.ROOM_ID]: state => state.roomId
+  },
+  mutations: {
+    [SocketRoomMutation.SET_GAME] (state: SocketRoomState, name: Game) {
+      state.game = name
+    },
+    [SocketRoomMutation.SET_PRESENTATION] (state: SocketRoomState, payload: PresentationPayload) {
+      state.presentation.enabledBy = payload.enabledBy
+      state.presentation.tacticId = payload.tacticId
+    },
+    [SocketRoomMutation.UNSET_PRESENTATION] (state: SocketRoomState) {
+      state.presentation.enabledBy = undefined
+      state.presentation.tacticId = undefined
+    },
+    [SocketRoomMutation.SET_IS_PRIVATE] (state: SocketRoomState, isPrivate: boolean) {
+      state.isPrivate = isPrivate
+    },
+    [SocketRoomMutation.SET_ROOM_ID] (state: SocketRoomState, roomId: string) {
+      state.roomId = roomId
+    }
+  },
+  actions: {
+    [SocketRoomAction.SET_GAME] (context: SocketRoomActionContext, name: Game) {
+      context.commit('SET_GAME', name)
+    },
+    [SocketRoomAction.SET_PRESENTATION] (context: SocketRoomActionContext, payload: PresentationPayload) {
+      context.commit('SET_PRESENTATION', payload)
+    },
+    [SocketRoomAction.UNSET_PRESENTATION] (context: SocketRoomActionContext) {
+      context.commit('SET_PRESENTATION')
+    },
+    [SocketRoomAction.SET_IS_PRIVATE] (context: SocketRoomActionContext, isPrivate: boolean) {
+      context.commit('SET_IS_PRIVATE', isPrivate)
+    },
+    [SocketRoomAction.SET_ROOM_ID] (context: SocketRoomActionContext, roomId: string) {
+      context.commit('SET_ROOM_ID', roomId)
+    }
+  }
+}
+
+export default SocketRoomModule
diff --git a/src/store/modules/socket/stage.ts b/src/store/modules/socket/stage.ts
new file mode 100644
index 0000000..8fcbd0b
--- /dev/null
+++ b/src/store/modules/socket/stage.ts
@@ -0,0 +1,116 @@
+import { ActionContext, Module } from 'vuex'
+import { CustomStageConfig } from '@/util/PointerEventMapper'
+import { Dimensions } from '@/mixins/StageWatcher'
+import { Tactic, Map } from '@/store/types'
+
+export enum SocketStageGetters {
+  STAGE_CONFIG = 'stageConfig',
+  STAGE_MAP_SRC = 'stageMapSrc',
+  STAGE_DIMENSIONS = 'stageDimensions',
+  STAGE_DIMENSIONS_INITIAL = 'stageDimensionsInitial'
+}
+
+export enum SocketStageActions {
+  SET_SCALE = 'setScale',
+  SET_CONFIG = 'setConfig',
+  SET_MAP_SRC = 'setMapSrc',
+  SET_MAP_RATIO = 'setMapRatio',
+  SET_DIMENSIONS = 'setDimensions',
+  SET_CONFIG_ZOOM = 'setConfigZoom',
+  SET_STAGE_TACTIC = 'setStageTactic',
+  SET_DIMENSIONS_INITIAL = 'setDimensionsInitial'
+}
+
+export enum SocketStageMutations {
+  SET_CONFIG = 'SET_CONFIG',
+  SET_MAP_SRC = 'SET_MAP_SRC',
+  SET_MAP_RATIO = 'SET_MAP_RATIO',
+  SET_CONFIG_SCALE = 'SET_CONFIG_SCALE',
+  SET_CONFIG_DIMENSIONS = 'SET_CONFIG_DIMENSIONS',
+  SET_CONFIG_DIMENSIONS_INITIAL = 'SET_CONFIG_DIMENSIONS_INITIAL'
+}
+
+export interface SocketStageState {
+  stageConfig: CustomStageConfig;
+}
+
+type SocketStageActionContext = ActionContext<SocketStageState, {}>;
+
+const SocketStageModule: Module<SocketStageState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      stageConfig: {
+        width: 1,
+        height: 1,
+        initialWidth: 0,
+        initialHeight: 0,
+        mapSrc: '',
+        mapRatio: 0,
+        scale: {
+          x: 1,
+          y: 1
+        }
+      }
+    }
+  },
+  getters: {
+    [SocketStageGetters.STAGE_CONFIG]: state => state.stageConfig,
+    [SocketStageGetters.STAGE_MAP_SRC]: state => state.stageConfig.mapSrc,
+    [SocketStageGetters.STAGE_DIMENSIONS]: state => ({ width: state.stageConfig.width, height: state.stageConfig.height }),
+    [SocketStageGetters.STAGE_DIMENSIONS_INITIAL]: state => ({ width: state.stageConfig.initialWidth, height: state.stageConfig.initialHeight })
+  },
+  mutations: {
+    [SocketStageMutations.SET_MAP_RATIO] (state: SocketStageState, ratio: number) {
+      state.stageConfig.mapRatio = ratio
+    },
+    [SocketStageMutations.SET_MAP_SRC] (state: SocketStageState, newMap: string) {
+      if (newMap !== '') {
+        state.stageConfig.mapSrc = newMap
+      }
+    },
+    [SocketStageMutations.SET_CONFIG_SCALE] (state: SocketStageState, newValue: number) {
+      state.stageConfig.scale = { x: newValue, y: newValue }
+    },
+    [SocketStageMutations.SET_CONFIG] (state: SocketStageState, config: CustomStageConfig) {
+      state.stageConfig = config
+    },
+    [SocketStageMutations.SET_CONFIG_DIMENSIONS] (state: SocketStageState, dimensions: Dimensions) {
+      state.stageConfig.width = dimensions.width
+      state.stageConfig.height = dimensions.height
+    },
+    [SocketStageMutations.SET_CONFIG_DIMENSIONS_INITIAL] (state: SocketStageState, dimensions: Dimensions) {
+      state.stageConfig.initialWidth = dimensions.width
+      state.stageConfig.initialHeight = dimensions.height
+    }
+  },
+  actions: {
+    [SocketStageActions.SET_SCALE] (context: SocketStageActionContext, scale: number) {
+      context.commit(SocketStageMutations.SET_CONFIG_SCALE, scale)
+    },
+    [SocketStageActions.SET_CONFIG] (context: SocketStageActionContext, config: CustomStageConfig) {
+      context.commit(SocketStageMutations.SET_CONFIG, config)
+    },
+    [SocketStageActions.SET_DIMENSIONS] (context: SocketStageActionContext, dimensions: Dimensions) {
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS, dimensions)
+    },
+    [SocketStageActions.SET_MAP_SRC] (context: SocketStageActionContext, map: Map) {
+      context.commit(SocketStageMutations.SET_MAP_SRC, map.icon)
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS, { width: map.width, height: map.height })
+    },
+    [SocketStageActions.SET_CONFIG_ZOOM] (context: SocketStageActionContext, newValues: { width: number; height: number; scale: number }) {
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS, { width: newValues.width, height: newValues.height })
+      context.commit(SocketStageMutations.SET_CONFIG_SCALE, newValues.scale)
+    },
+    [SocketStageActions.SET_DIMENSIONS_INITIAL] (context: SocketStageActionContext, newValues: Dimensions) {
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS_INITIAL, newValues)
+    },
+    [SocketStageActions.SET_STAGE_TACTIC] (context: SocketStageActionContext, tactic: Tactic) {
+      context.commit(SocketStageMutations.SET_MAP_SRC, tactic.map.icon)
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS, { width: tactic.map.width, height: tactic.map.height })
+      context.commit(SocketStageMutations.SET_CONFIG_DIMENSIONS_INITIAL, { width: 0, height: 0 })
+    }
+  }
+}
+
+export default SocketStageModule
diff --git a/src/store/modules/socket/tactic.ts b/src/store/modules/socket/tactic.ts
new file mode 100644
index 0000000..f444839
--- /dev/null
+++ b/src/store/modules/socket/tactic.ts
@@ -0,0 +1,118 @@
+import { ActionContext, Module } from 'vuex'
+import { Collection, Tactic } from '../../types'
+
+export enum SocketTacticAction {
+  SET_COLLECTIONS = 'setCollections',
+  SET_COLLECTION = 'setCollection',
+  UPDATE_COLLECTION = 'updateCollection',
+  DELETE_COLLECTION = 'deleteCollection',
+  SET_TACTICS = 'setSocketTactics',
+  SET_TACTIC = 'setSocketTactic',
+  TOGGLE_PIN_TACTIC = 'togglePinSocketTactic',
+  UPDATE_TACTIC = 'updateSocketTactic',
+  DELETE_TACTIC = 'deleteSocketTactic'
+}
+
+export enum SocketTacticMutation {
+  SET_COLLECTIONS = 'SET_COLLECTIONS',
+  SET_COLLECTION = 'SET_COLLECTION',
+  UPDATE_COLLECTION = 'UPDATE_COLLECTION',
+  DELETE_COLLECTION = 'DELETE_COLLECTION',
+  SET_TACTICS = 'SET_TACTICS',
+  SET_TACTIC = 'SET_TACTIC',
+  TOGGLE_PIN_TACTIC = 'TOGGLE_PIN_TACTIC',
+  UPDATE_TACTIC = 'UPDATE_TACTIC',
+  DELETE_TACTIC = 'DELETE_TACTIC'
+}
+
+export enum SocketTacticGetters {
+  COLLECTIONS = 'collections',
+  COLLECTION = 'collection',
+  TACTICS = 'tactics',
+  TACTIC = 'tactic',
+  PINNED_TACTICS = 'pinnedSocketTactics'
+}
+
+export interface SocketTacticState {
+  collections: Collection[];
+  tactics: Tactic[];
+}
+
+type SocketTacticActionContext = ActionContext<SocketTacticState, {}>
+
+const SocketTacticModule: Module<SocketTacticState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      collections: [],
+      tactics: []
+    }
+  },
+  getters: {
+    [SocketTacticGetters.COLLECTIONS]: state => state.collections,
+    [SocketTacticGetters.COLLECTION]: (state) => (id: string) => state.collections.find((collection: Collection) => collection.id === id),
+    [SocketTacticGetters.TACTICS]: state => state.tactics,
+    [SocketTacticGetters.TACTIC]: (state) => (id: string) => state.tactics.find((tactic: Tactic) => tactic.id === id),
+    [SocketTacticGetters.PINNED_TACTICS]: state => state.tactics.filter((tactic: Tactic) => tactic.pinned)
+  },
+  mutations: {
+    [SocketTacticMutation.SET_COLLECTIONS] (state: SocketTacticState, payload: Collection[]) {
+      state.collections = payload
+    },
+    [SocketTacticMutation.SET_COLLECTION] (state: SocketTacticState, payload: Collection) {
+      state.collections.push(payload)
+    },
+    [SocketTacticMutation.UPDATE_COLLECTION] (state: SocketTacticState, payload: Collection) {
+      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === payload.id), 1, payload)
+    },
+    [SocketTacticMutation.DELETE_COLLECTION] (state: SocketTacticState, id: string) {
+      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === id), 1)
+    },
+    [SocketTacticMutation.SET_TACTICS] (state: SocketTacticState, payload: Tactic[]) {
+      state.tactics = payload
+    },
+    [SocketTacticMutation.TOGGLE_PIN_TACTIC] (state: SocketTacticState, payload: Tactic) {
+      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === payload.id), 1, { ...payload, pinned: !payload.pinned })
+    },
+    [SocketTacticMutation.SET_TACTIC] (state: SocketTacticState, payload: Tactic) {
+      state.tactics.push(payload)
+    },
+    [SocketTacticMutation.UPDATE_TACTIC] (state: SocketTacticState, payload: Tactic) {
+      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === payload.id), 1, payload)
+    },
+    [SocketTacticMutation.DELETE_TACTIC] (state: SocketTacticState, id: string) {
+      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === id), 1)
+    }
+  },
+  actions: {
+    [SocketTacticAction.SET_COLLECTIONS] (context: SocketTacticActionContext, payload: Collection[]) {
+      context.commit('SET_COLLECTIONS', payload)
+    },
+    [SocketTacticAction.SET_COLLECTION] (context: SocketTacticActionContext, payload: Collection) {
+      context.commit('SET_COLLECTION', payload)
+    },
+    [SocketTacticAction.UPDATE_COLLECTION] (context: SocketTacticActionContext, payload: Collection) {
+      context.commit('UPDATE_COLLECTION', payload)
+    },
+    [SocketTacticAction.DELETE_COLLECTION] (context: SocketTacticActionContext, id: string) {
+      context.commit('DELETE_COLLECTION', id)
+    },
+    [SocketTacticAction.SET_TACTICS] (context: SocketTacticActionContext, payload: Tactic[]) {
+      context.commit('SET_TACTICS', payload)
+    },
+    [SocketTacticAction.SET_TACTIC] (context: SocketTacticActionContext, payload: Tactic) {
+      context.commit('SET_TACTIC', payload)
+    },
+    [SocketTacticAction.TOGGLE_PIN_TACTIC] (context: SocketTacticActionContext, payload: Tactic) {
+      context.commit('TOGGLE_PIN_TACTIC', payload)
+    },
+    [SocketTacticAction.UPDATE_TACTIC] (context: SocketTacticActionContext, payload: Tactic) {
+      context.commit('UPDATE_TACTIC', payload)
+    },
+    [SocketTacticAction.DELETE_TACTIC] (context: SocketTacticActionContext, id: string) {
+      context.commit('DELETE_TACTIC', id)
+    }
+  }
+}
+
+export default SocketTacticModule
diff --git a/src/store/modules/socket/user.ts b/src/store/modules/socket/user.ts
new file mode 100644
index 0000000..8e2aecb
--- /dev/null
+++ b/src/store/modules/socket/user.ts
@@ -0,0 +1,70 @@
+import { ActionContext, Module } from 'vuex'
+import { User } from '../../types'
+
+export enum SocketUserAction {
+  SET_USERS = 'setUsers',
+  SET_USER = 'setUser',
+  UPDATE_USER = 'updateUser',
+  DELETE_USER = 'deleteUser',
+}
+
+export enum SocketUserMutation {
+  SET_USERS = 'SET_USERS',
+  SET_USER = 'SET_USER',
+  UPDATE_USER = 'UPDATE_USER',
+  DELETE_USER = 'DELETE_USER',
+}
+
+export enum SocketUserGetters {
+  USERS = 'users',
+  USER = 'user',
+}
+
+export interface SocketUserState {
+  users: User[];
+}
+
+type SocketUserActionContext = ActionContext<SocketUserState, {}>
+
+const SocketUserModule: Module<SocketUserState, {}> = {
+  namespaced: true,
+  state () {
+    return {
+      users: []
+    }
+  },
+  getters: {
+    [SocketUserGetters.USERS]: state => state.users,
+    [SocketUserGetters.USER]: (state) => (jti: string) => state.users.find((user: User) => user.jti === jti)
+  },
+  mutations: {
+    [SocketUserMutation.SET_USERS] (state: SocketUserState, payload: User[]) {
+      state.users = payload
+    },
+    [SocketUserMutation.SET_USER] (state: SocketUserState, payload: User) {
+      state.users.push(payload)
+    },
+    [SocketUserMutation.UPDATE_USER] (state: SocketUserState, payload: User) {
+      state.users.splice(state.users.findIndex((user: User) => user.jti === payload.jti), 1, payload)
+    },
+    [SocketUserMutation.DELETE_USER] (state: SocketUserState, jti: string) {
+      state.users.splice(state.users.findIndex((user: User) => user.jti === jti), 1)
+    }
+  },
+  actions: {
+    [SocketUserAction.SET_USERS] (context: SocketUserActionContext, payload: User[]) {
+      context.commit('SET_USERS', payload)
+    },
+    [SocketUserAction.SET_USER] (context: SocketUserActionContext, payload: User) {
+      context.commit('SET_USER', payload)
+    },
+    [SocketUserAction.UPDATE_USER] (context: SocketUserActionContext, payload: User) {
+      context.commit('UPDATE_USER', payload)
+    },
+    [SocketUserAction.DELETE_USER] (context: SocketUserActionContext, jti: string) {
+      context.commit('DELETE_USER', jti)
+    }
+  }
+}
+
+export default SocketUserModule
diff --git a/src/store/modules/stage.ts b/src/store/modules/stage.ts
deleted file mode 100644
index a5cfd22..0000000
--- a/src/store/modules/stage.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import { CustomStageConfig } from '@/util/PointerEventMapper'
-import Konva from 'konva'
-import { Dimensions } from '@/mixins/StageWatcher'
-import { Tactic, Map } from '@/store/modules/types'
-
-export enum StageGetters {
-  STAGE = 'stage',
-  STAGE_ZOOM = 'stageZoom',
-  STAGE_CONFIG = 'stageConfig',
-  STAGE_MAP_SRC = 'stageMapSrc',
-  STAGE_ZOOM_STEP = 'stageZoomStep',
-  STAGE_DIMENSIONS = 'stageDimensions',
-  STAGE_DIMENSIONS_INITIAL = 'stageDimensionsInitial'
-}
-
-export enum StageActions {
-  ZOOM_IN = 'zoomIn',
-  ZOOM_OUT = 'zoomOut',
-  SET_ZOOM = 'setZoom',
-  SET_STAGE = 'setStage',
-  SET_SCALE = 'setScale',
-  SET_CONFIG = 'setConfig',
-  SET_MAP_SRC = 'setMapSrc',
-  ZOOM_DEFAULT = 'zoomDefault',
-  SET_ZOOM_STEP = 'setZoomStep',
-  SET_MAP_RATIO = 'setMapRatio',
-  SET_DIMENSIONS = 'setDimensions',
-  SET_CONFIG_ZOOM = 'setConfigZoom',
-  SET_STAGE_TACTIC = 'setStageTactic',
-  SET_DIMENSIONS_INITIAL = 'setDimensionsInitial'
-}
-
-export enum StageMutations {
-  SET_ZOOM = 'SET_ZOOM',
-  SET_STAGE = 'SET_STAGE',
-  SET_CONFIG = 'SET_CONFIG',
-  SET_ZOOM_IN = 'SET_ZOOM_IN',
-  SET_MAP_SRC = 'SET_MAP_SRC',
-  SET_ZOOM_OUT = 'SET_ZOOM_OUT',
-  SET_ZOOM_STEP = 'SET_ZOOM_STEP',
-  SET_MAP_RATIO = 'SET_MAP_RATIO',
-  SET_CONFIG_SCALE = 'SET_CONFIG_SCALE',
-  SET_CONFIG_DIMENSIONS = 'SET_CONFIG_DIMENSIONS',
-  SET_CONFIG_DIMENSIONS_INITIAL = 'SET_CONFIG_DIMENSIONS_INITIAL'
-}
-
-export interface StageState {
-  stage: Konva.Stage | undefined;
-  stageZoomMax: number;
-  stageZoomMin: number;
-  stageZoomStep: number;
-  stageZoom: number;
-  stageConfig: CustomStageConfig;
-}
-
-type StageActionContext = ActionContext<StageState, {}>;
-
-const StageModule: Module<StageState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      stage: undefined,
-      stageZoomMax: 300,
-      stageZoomMin: 10,
-      stageZoomStep: 10,
-      stageZoom: 100,
-      stageConfig: {
-        width: 1,
-        height: 1,
-        initialWidth: 0,
-        initialHeight: 0,
-        mapSrc: '',
-        mapRatio: 0,
-        scale: {
-          x: 1,
-          y: 1
-        }
-      }
-    }
-  },
-  getters: {
-    [StageGetters.STAGE]: state => state.stage,
-    [StageGetters.STAGE_ZOOM]: state => state.stageZoom,
-    [StageGetters.STAGE_CONFIG]: state => state.stageConfig,
-    [StageGetters.STAGE_MAP_SRC]: state => state.stageConfig.mapSrc,
-    [StageGetters.STAGE_ZOOM_STEP]: state => state.stageZoomStep,
-    [StageGetters.STAGE_DIMENSIONS]: state => ({ width: state.stageConfig.width, height: state.stageConfig.height }),
-    [StageGetters.STAGE_DIMENSIONS_INITIAL]: state => ({ width: state.stageConfig.initialWidth, height: state.stageConfig.initialHeight })
-  },
-  mutations: {
-    [StageMutations.SET_STAGE] (state: StageState, stage: Konva.Stage) {
-      state.stage = stage
-    },
-    [StageMutations.SET_MAP_RATIO] (state: StageState, ratio: number) {
-      state.stageConfig.mapRatio = ratio
-    },
-    [StageMutations.SET_ZOOM] (state: StageState, newValue: number) {
-      if (newValue < state.stageZoomMin) {
-        state.stageZoom = state.stageZoomMin
-      } else {
-        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
-      }
-    },
-    [StageMutations.SET_MAP_SRC] (state: StageState, newMap: string) {
-      if (newMap !== '') {
-        state.stageConfig.mapSrc = newMap
-      }
-    },
-    [StageMutations.SET_ZOOM_IN] (state: StageState) {
-      const newValue = state.stageZoom + state.stageZoomStep
-      if (newValue < state.stageZoomMin) {
-        state.stageZoom = state.stageZoomMin
-      } else {
-        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
-      }
-    },
-    [StageMutations.SET_ZOOM_OUT] (state: StageState) {
-      const newValue = state.stageZoom - state.stageZoomStep
-      if (newValue < state.stageZoomMin) {
-        state.stageZoom = state.stageZoomMin
-      } else {
-        state.stageZoom = (newValue > state.stageZoomMax) ? state.stageZoomMax : newValue
-      }
-    },
-    [StageMutations.SET_CONFIG_SCALE] (state: StageState, newValue: number) {
-      state.stageConfig.scale = { x: newValue, y: newValue }
-    },
-    [StageMutations.SET_ZOOM_STEP] (state: StageState, newValue: number) {
-      state.stageZoomStep = (newValue > 0) ? newValue : state.stageZoomStep
-    },
-    [StageMutations.SET_CONFIG] (state: StageState, config: CustomStageConfig) {
-      state.stageConfig = config
-    },
-    [StageMutations.SET_CONFIG_DIMENSIONS] (state: StageState, dimensions: Dimensions) {
-      state.stageConfig.width = dimensions.width
-      state.stageConfig.height = dimensions.height
-    },
-    [StageMutations.SET_CONFIG_DIMENSIONS_INITIAL] (state: StageState, dimensions: Dimensions) {
-      state.stageConfig.initialWidth = dimensions.width
-      state.stageConfig.initialHeight = dimensions.height
-    }
-  },
-  actions: {
-    [StageActions.SET_STAGE] (context: StageActionContext, stage: Konva.Stage) {
-      context.commit(StageMutations.SET_STAGE, stage)
-    },
-    [StageActions.ZOOM_IN] (context: StageActionContext) {
-      context.commit(StageMutations.SET_ZOOM_IN)
-    },
-    [StageActions.ZOOM_OUT] (context: StageActionContext) {
-      context.commit(StageMutations.SET_ZOOM_OUT)
-    },
-    [StageActions.SET_ZOOM] (context: StageActionContext, newValue: number) {
-      context.commit(StageMutations.SET_ZOOM, newValue)
-    },
-    [StageActions.SET_SCALE] (context: StageActionContext, scale: number) {
-      context.commit(StageMutations.SET_CONFIG_SCALE, scale)
-    },
-    [StageActions.SET_CONFIG] (context: StageActionContext, config: CustomStageConfig) {
-      context.commit(StageMutations.SET_CONFIG, config)
-    },
-    [StageActions.SET_DIMENSIONS] (context: StageActionContext, dimensions: Dimensions) {
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS, dimensions)
-    },
-    [StageActions.SET_ZOOM_STEP] (context: StageActionContext, newValue: number) {
-      context.commit(StageMutations.SET_ZOOM_STEP, newValue)
-    },
-    [StageActions.ZOOM_DEFAULT] (context: StageActionContext) {
-      context.commit(StageMutations.SET_ZOOM, 100)
-    },
-    [StageActions.SET_MAP_SRC] (context: StageActionContext, map: Map) {
-      context.commit(StageMutations.SET_MAP_SRC, map.icon)
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS, { width: map.width, height: map.height })
-    },
-    [StageActions.SET_CONFIG_ZOOM] (context: StageActionContext, newValues: { width: number; height: number; scale: number }) {
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS, { width: newValues.width, height: newValues.height })
-      context.commit(StageMutations.SET_CONFIG_SCALE, newValues.scale)
-    },
-    [StageActions.SET_DIMENSIONS_INITIAL] (context: StageActionContext, newValues: Dimensions) {
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS_INITIAL, newValues)
-    },
-    [StageActions.SET_STAGE_TACTIC] (context: StageActionContext, tactic: Tactic) {
-      context.commit(StageMutations.SET_ZOOM, 100)
-      context.commit(StageMutations.SET_MAP_SRC, tactic.map.icon)
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS, { width: tactic.map.width, height: tactic.map.height })
-      context.commit(StageMutations.SET_CONFIG_DIMENSIONS_INITIAL, { width: 0, height: 0 })
-    }
-  }
-}
-
-export default StageModule
diff --git a/src/store/modules/tactic.ts b/src/store/modules/tactic.ts
deleted file mode 100644
index 540ef44..0000000
--- a/src/store/modules/tactic.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import { Collection, Tactic } from './types'
-
-export enum TacticAction {
-  SET_COLLECTIONS = 'setCollections',
-  SET_COLLECTION = 'setCollection',
-  UPDATE_COLLECTION = 'updateCollection',
-  DELETE_COLLECTION = 'deleteCollection',
-  SET_TACTICS = 'setTactics',
-  SET_TACTIC = 'setTactic',
-  TOGGLE_PIN_TACTIC = 'togglePinTactic',
-  UPDATE_TACTIC = 'updateTactic',
-  DELETE_TACTIC = 'deleteTactic'
-}
-
-export enum TacticMutation {
-  SET_COLLECTIONS = 'SET_COLLECTIONS',
-  SET_COLLECTION = 'SET_COLLECTION',
-  UPDATE_COLLECTION = 'UPDATE_COLLECTION',
-  DELETE_COLLECTION = 'DELETE_COLLECTION',
-  SET_TACTICS = 'SET_TACTICS',
-  SET_TACTIC = 'SET_TACTIC',
-  TOGGLE_PIN_TACTIC = 'TOGGLE_PIN_TACTIC',
-  UPDATE_TACTIC = 'UPDATE_TACTIC',
-  DELETE_TACTIC = 'DELETE_TACTIC'
-}
-
-export enum TacticGetters {
-  COLLECTIONS = 'collections',
-  COLLECTION = 'collection',
-  TACTICS = 'tactics',
-  TACTIC = 'tactic',
-  PINNED_TACTICS = 'pinnedTactics'
-}
-
-export interface TacticState {
-  collections: Collection[];
-  tactics: Tactic[];
-}
-
-type TacticActionContext = ActionContext<TacticState, {}>
-
-const TacticModule: Module<TacticState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      collections: [],
-      tactics: []
-    }
-  },
-  getters: {
-    [TacticGetters.COLLECTIONS]: state => state.collections,
-    [TacticGetters.COLLECTION]: (state) => (id: string) => state.collections.find((collection: Collection) => collection.id === id),
-    [TacticGetters.TACTICS]: state => state.tactics,
-    [TacticGetters.TACTIC]: (state) => (id: string) => state.tactics.find((tactic: Tactic) => tactic.id === id),
-    [TacticGetters.PINNED_TACTICS]: state => state.tactics.filter((tactic: Tactic) => tactic.pinned)
-  },
-  mutations: {
-    [TacticMutation.SET_COLLECTIONS] (state: TacticState, payload: Collection[]) {
-      state.collections = payload
-    },
-    [TacticMutation.SET_COLLECTION] (state: TacticState, payload: Collection) {
-      state.collections.push(payload)
-    },
-    [TacticMutation.UPDATE_COLLECTION] (state: TacticState, payload: Collection) {
-      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === payload.id), 1, payload)
-    },
-    [TacticMutation.DELETE_COLLECTION] (state: TacticState, id: string) {
-      state.collections.splice(state.collections.findIndex((collection: Collection) => collection.id === id), 1)
-    },
-    [TacticMutation.SET_TACTICS] (state: TacticState, payload: Tactic[]) {
-      state.tactics = payload
-    },
-    [TacticMutation.TOGGLE_PIN_TACTIC] (state: TacticState, payload: Tactic) {
-      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === payload.id), 1, { ...payload, pinned: !payload.pinned })
-    },
-    [TacticMutation.SET_TACTIC] (state: TacticState, payload: Tactic) {
-      state.tactics.push(payload)
-    },
-    [TacticMutation.UPDATE_TACTIC] (state: TacticState, payload: Tactic) {
-      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === payload.id), 1, payload)
-    },
-    [TacticMutation.DELETE_TACTIC] (state: TacticState, id: string) {
-      state.tactics.splice(state.tactics.findIndex((tactic: Tactic) => tactic.id === id), 1)
-    }
-  },
-  actions: {
-    [TacticAction.SET_COLLECTIONS] (context: TacticActionContext, payload: Collection[]) {
-      context.commit('SET_COLLECTIONS', payload)
-    },
-    [TacticAction.SET_COLLECTION] (context: TacticActionContext, payload: Collection) {
-      context.commit('SET_COLLECTION', payload)
-    },
-    [TacticAction.UPDATE_COLLECTION] (context: TacticActionContext, payload: Collection) {
-      context.commit('UPDATE_COLLECTION', payload)
-    },
-    [TacticAction.DELETE_COLLECTION] (context: TacticActionContext, id: string) {
-      context.commit('DELETE_COLLECTION', id)
-    },
-    [TacticAction.SET_TACTICS] (context: TacticActionContext, payload: Tactic[]) {
-      context.commit('SET_TACTICS', payload)
-    },
-    [TacticAction.SET_TACTIC] (context: TacticActionContext, payload: Tactic) {
-      context.commit('SET_TACTIC', payload)
-    },
-    [TacticAction.TOGGLE_PIN_TACTIC] (context: TacticActionContext, payload: Tactic) {
-      context.commit('TOGGLE_PIN_TACTIC', payload)
-    },
-    [TacticAction.UPDATE_TACTIC] (context: TacticActionContext, payload: Tactic) {
-      context.commit('UPDATE_TACTIC', payload)
-    },
-    [TacticAction.DELETE_TACTIC] (context: TacticActionContext, id: string) {
-      context.commit('DELETE_TACTIC', id)
-    }
-  }
-}
-
-export default TacticModule
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
deleted file mode 100644
index bfeda73..0000000
--- a/src/store/modules/user.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ActionContext, Module } from 'vuex'
-import { User } from './types'
-
-export enum UserAction {
-  SET_USERS = 'setUsers',
-  SET_USER = 'setUser',
-  UPDATE_USER = 'updateUser',
-  DELETE_USER = 'deleteUser',
-}
-
-export enum UserMutation {
-  SET_USERS = 'SET_USERS',
-  SET_USER = 'SET_USER',
-  UPDATE_USER = 'UPDATE_USER',
-  DELETE_USER = 'DELETE_USER',
-}
-
-export enum UserGetters {
-  USERS = 'users',
-  USER = 'user',
-}
-
-export interface UserState {
-  users: User[];
-}
-
-type UserActionContext = ActionContext<UserState, {}>
-
-const UserModule: Module<UserState, {}> = {
-  namespaced: true,
-  state () {
-    return {
-      users: []
-    }
-  },
-  getters: {
-    [UserGetters.USERS]: state => state.users,
-    [UserGetters.USER]: (state) => (jti: string) => state.users.find((user: User) => user.jti === jti)
-  },
-  mutations: {
-    [UserMutation.SET_USERS] (state: UserState, payload: User[]) {
-      state.users = payload
-    },
-    [UserMutation.SET_USER] (state: UserState, payload: User) {
-      state.users.push(payload)
-    },
-    [UserMutation.UPDATE_USER] (state: UserState, payload: User) {
-      state.users.splice(state.users.findIndex((user: User) => user.jti === payload.jti), 1, payload)
-    },
-    [UserMutation.DELETE_USER] (state: UserState, jti: string) {
-      state.users.splice(state.users.findIndex((user: User) => user.jti === jti), 1)
-    }
-  },
-  actions: {
-    [UserAction.SET_USERS] (context: UserActionContext, payload: User[]) {
-      context.commit('SET_USERS', payload)
-    },
-    [UserAction.SET_USER] (context: UserActionContext, payload: User) {
-      context.commit('SET_USER', payload)
-    },
-    [UserAction.UPDATE_USER] (context: UserActionContext, payload: User) {
-      context.commit('UPDATE_USER', payload)
-    },
-    [UserAction.DELETE_USER] (context: UserActionContext, jti: string) {
-      context.commit('DELETE_USER', jti)
-    }
-  }
-}
-
-export default UserModule
diff --git a/src/store/modules/types.ts b/src/store/types.ts
similarity index 91%
rename from src/store/modules/types.ts
rename to src/store/types.ts
index c868f12..b940e0a 100644
--- a/src/store/modules/types.ts
+++ b/src/store/types.ts
@@ -1,4 +1,3 @@
-import { GameName } from '@/store/modules/room'
 import { CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 
 export interface Api {
@@ -18,12 +17,7 @@ export interface Entity {
   data: any;
 }
 
-export interface Game {
-  name: GameName;
-  api: Api[];
-}
-
-export enum RoleTypes {
+export enum RoleTypes { 
   ROON_OWNER = 'roomOwner',
   ADMIN = 'admin'
 }
@@ -85,4 +79,4 @@ export interface PresentationPayload {
 export interface Presentation {
   enabledBy: string | undefined;
   tacticId: string | undefined;
-}
+}
\ No newline at end of file
diff --git a/src/tools/Tool.ts b/src/tools/Tool.ts
index eefb73f..eb5d869 100644
--- a/src/tools/Tool.ts
+++ b/src/tools/Tool.ts
@@ -10,14 +10,16 @@ import {
 import { CustomEvent, CustomStageEvent } from '@/util/PointerEventMapper'
 import store from '@/main'
 import { SocketActions } from '@/store/modules/socket'
-import { StageGetters } from '@/store/modules/stage'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppStageGetters } from '@/store/modules/app/stage'
 import { Point } from 'konva/types/Util'
-import { CanvasEntityActions, CanvasEntityGetters, CanvasEntityState } from '@/store/modules/canvasEntity'
-import { LayerGetters } from '@/store/modules/layer'
-import { ToolGetters, ToolsAction } from '@/store/modules/tools'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { AppCanvasEntityActions, AppCanvasEntityGetters, AppCanvasEntityState } from '@/store/modules/app/canvasEntity'
+import { AppLayerGetters } from '@/store/modules/app/layer'
+import { AppToolGetters, AppToolsAction } from '@/store/modules/app/tools'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import { Dimensions } from '@/mixins/StageWatcher'
 import { Item } from '@/types/Games/Index'
+import { Namespaces } from '@/store'
 
 export type CanvasDownAction = (event: CustomEvent, stage: VueKonvaStage) => void;
 export type CanvasMoveAction = (event: CustomEvent, stage: VueKonvaStage) => void;
@@ -37,15 +39,15 @@ export enum Tracker {
 
 export class ToolClass {
   get enabled (): boolean {
-    return store.getters[`tools/${ToolGetters.ENABLED}`]
+    return store.getters[`${Namespaces.APP_TOOLS}/${AppToolGetters.ENABLED}`]
   }
 
   disableTool = (): void => {
-    store.dispatch(`tools/${ToolsAction.DISABLE}`)
+    store.dispatch(`${Namespaces.APP_TOOLS}/${AppToolsAction.DISABLE}`)
   }
 
   enableTool = (): void => {
-    store.dispatch(`tools/${ToolsAction.ENABLE}`)
+    store.dispatch(`${Namespaces.APP_TOOLS}/${AppToolsAction.ENABLE}`)
   }
 
   sendAndAddToState = (request: RequestCanvasEntity, emit: string): void => {
@@ -58,7 +60,7 @@ export class ToolClass {
       case Tracker.ADDITION :
         const additionsData = request.modifyData as AdditionData
         if (request.canvasElements.length === additionsData.additions.length && request.canvasElements.length > 0) {
-          store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
+          store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
             jti: request.jti,
             id: request.id,
             modifyType: request.modifyType,
@@ -66,22 +68,22 @@ export class ToolClass {
             timestampModified: request.timestampModified
           })
           request.canvasElements.forEach((canvasElement: CanvasElement) => {
-            store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT}`, canvasElement)
+            store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT}`, canvasElement)
           })
         }
         break
       case Tracker.REMOVAL:
         const removalsData = request.modifyData as RemovalData
         if (removalsData.removals && removalsData.removals.length > 0) {
-          const canvasElements = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
+          const canvasElements = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
           if (canvasElements) {
             removalsData.removals.forEach((groupId: string) => {
               const foundElement: CanvasElement = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === groupId)
               if (foundElement) {
-                store.dispatch(`canvas/${CanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
+                store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
               }
             })
-            store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
+            store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
               jti: request.jti,
               id: request.id,
               modifyType: request.modifyType,
@@ -94,7 +96,7 @@ export class ToolClass {
       case Tracker.MOVE:
         const moveData = request.modifyData as MoveData
         if (moveData.to && moveData.from && moveData.groups.length > 0) {
-          const canvasElements = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
+          const canvasElements = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
           if (canvasElements) {
             moveData.groups.forEach((groupId: string) => {
               const foundElement: CanvasElement = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === groupId)
@@ -105,7 +107,7 @@ export class ToolClass {
                 }
               }
             })
-            store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
+            store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, {
               jti: request.jti,
               id: request.id,
               modifyType: request.modifyType,
@@ -119,46 +121,46 @@ export class ToolClass {
   }
 
   send = (request: RequestCanvasEntity, emit: string): void => {
-    store.dispatch(`socket/${SocketActions.EMIT}`, { data: request, emit: emit })
+    store.dispatch(`${Namespaces.SOCKET}/${SocketActions.EMIT}`, { data: request, emit: emit })
   }
 
   get stageEvent (): CustomStageEvent {
     return {
-      stage: store.getters?.[`stage/${StageGetters.STAGE}`],
-      stageConfig: store.getters?.[`stage/${StageGetters.STAGE_CONFIG}`],
-      zoom: store.getters?.[`stage/${StageGetters.STAGE_ZOOM}`]
+      stage: store.getters?.[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE}`],
+      stageConfig: store.getters?.[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`],
+      zoom: store.getters?.[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE_ZOOM}`]
     }
   }
 
-  resetCanvasEntity = (): CanvasEntityState => {
-    store.dispatch(`canvasEntity/${CanvasEntityActions.RESET_CANVAS_ENTITY}`)
-    const canvasEntity: CanvasEntityState = store.getters[`canvasEntity/${CanvasEntityGetters.CANVAS_ENTITY}`]
+  resetCanvasEntity = (): AppCanvasEntityState => {
+    store.dispatch(`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityActions.RESET_CANVAS_ENTITY}`)
+    const canvasEntity: AppCanvasEntityState = store.getters[`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityGetters.CANVAS_ENTITY}`]
     canvasEntity.hasMoved = false
     return canvasEntity
   }
 
   get canvasElement (): CanvasElement {
-    return store.getters[`canvasEntity/${CanvasEntityGetters.CANVAS_ELEMENT}`]
+    return store.getters[`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityGetters.CANVAS_ELEMENT}`]
   }
 
   set canvasElement (canvasElement: CanvasElement) {
-    store.dispatch(`canvasEntity/${CanvasEntityActions.SET_CANVAS_ELEMENT}`, canvasElement)
+    store.dispatch(`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityActions.SET_CANVAS_ELEMENT}`, canvasElement)
   }
 
-  get canvasEntity (): CanvasEntityState {
-    return store.getters[`canvasEntity/${CanvasEntityGetters.CANVAS_ENTITY}`]
+  get canvasEntity (): AppCanvasEntityState {
+    return store.getters[`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityGetters.CANVAS_ENTITY}`]
   }
 
-  set canvasEntity (canvasEntity: CanvasEntityState) {
-    store.dispatch(`canvasEntity/${CanvasEntityActions.SET_CANVAS_ENTITY}`, canvasEntity)
+  set canvasEntity (canvasEntity: AppCanvasEntityState) {
+    store.dispatch(`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityActions.SET_CANVAS_ENTITY}`, canvasEntity)
   }
 
   get layer (): Konva.Layer {
-    return store.getters[`layer/${LayerGetters.LAYER}`]
+    return store.getters[`${Namespaces.APP_LAYER}/${AppLayerGetters.LAYER}`]
   }
 
   get canvasElements (): CanvasElement[] {
-    return store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
+    return store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
   }
 }
 
diff --git a/src/tools/shapes/CircleCreator.ts b/src/tools/shapes/CircleCreator.ts
index 7499b09..35424de 100644
--- a/src/tools/shapes/CircleCreator.ts
+++ b/src/tools/shapes/CircleCreator.ts
@@ -35,6 +35,7 @@ export default class CircleCreator extends Shape implements CircleCreatorInterfa
       ))
     }
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
   }
   // eslint-disable-next-line
   move = (event: CustomEvent | CustomStageEvent, canvasElement?: CanvasElement): void => {
diff --git a/src/tools/shapes/EntityCreator.ts b/src/tools/shapes/EntityCreator.ts
index 2edeaf3..51ff90b 100644
--- a/src/tools/shapes/EntityCreator.ts
+++ b/src/tools/shapes/EntityCreator.ts
@@ -30,6 +30,7 @@ export default class EntityCreator extends Shape {
       })
       this.group.add(image)
       this.group.attrs.type = CanvasElementType.ENTITY
+      this.group.attrs.temporary = this.temporary
       this.layer.add(this.group)
       this.group.draw()
     })
diff --git a/src/tools/shapes/FreeDrawCreator.ts b/src/tools/shapes/FreeDrawCreator.ts
index fd76789..64e41f6 100644
--- a/src/tools/shapes/FreeDrawCreator.ts
+++ b/src/tools/shapes/FreeDrawCreator.ts
@@ -20,6 +20,7 @@ export default class FreeDrawCreator extends Shape implements FreeDrawCreatorInt
       this.freeDraw = this.createFreeDrawElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
   }
 
diff --git a/src/tools/shapes/LineCreator.ts b/src/tools/shapes/LineCreator.ts
index 429f2ba..6fa39a5 100644
--- a/src/tools/shapes/LineCreator.ts
+++ b/src/tools/shapes/LineCreator.ts
@@ -31,6 +31,7 @@ export default class LineCreator extends Shape implements LineCreatorInterface {
       this.line = this.createLineElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
   }
 
@@ -41,6 +42,7 @@ export default class LineCreator extends Shape implements LineCreatorInterface {
       this.arrow = this.createArrowElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
   }
 
@@ -52,6 +54,7 @@ export default class LineCreator extends Shape implements LineCreatorInterface {
       this.tBar = this.createTElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
   }
 
diff --git a/src/tools/shapes/PingCreator.ts b/src/tools/shapes/PingCreator.ts
index 11ee55b..7834f74 100644
--- a/src/tools/shapes/PingCreator.ts
+++ b/src/tools/shapes/PingCreator.ts
@@ -21,6 +21,7 @@ export default class PingCreator extends Shape implements PingCreatorInterface {
       this.ping = this.createPingElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
     this.runAnimation(this.ping)
   }
diff --git a/src/tools/shapes/RulerCreator.ts b/src/tools/shapes/RulerCreator.ts
index 3ae87f9..0174ff7 100644
--- a/src/tools/shapes/RulerCreator.ts
+++ b/src/tools/shapes/RulerCreator.ts
@@ -3,8 +3,9 @@ import { CanvasElement, CanvasElementType } from '@/types/Canvas'
 import Shape, { RulerCreatorInterface } from '@/tools/shapes/Shape'
 import { CustomEvent, CustomStageConfig, CustomStageEvent } from '@/util/PointerEventMapper'
 import store from '@/main'
-import { StageGetters } from '@/store/modules/stage'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
 import { RulerData } from '@/tools/Tool'
+import { Namespaces } from '@/store'
 
 export default class RulerCreator extends Shape implements RulerCreatorInterface {
   private line: Konva.Line
@@ -37,6 +38,7 @@ export default class RulerCreator extends Shape implements RulerCreatorInterface
       )
     }
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group)
   }
 
@@ -139,7 +141,7 @@ export default class RulerCreator extends Shape implements RulerCreatorInterface
   }
 
   getText = (radius: number, event: CustomEvent | CustomStageEvent): string => {
-    const stageConfig: CustomStageConfig = store.getters[`stage/${StageGetters.STAGE_CONFIG}`]
+    const stageConfig: CustomStageConfig = store.getters[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`]
     const range = Math.floor(this.formatX(radius, event) / (event.stageConfig.initialWidth * 0.75) * stageConfig.mapRatio * 10) / 10
     return (range !== 0) ? `${range} km` : '? km'
   }
diff --git a/src/tools/shapes/Shape.ts b/src/tools/shapes/Shape.ts
index d3c8441..254d131 100644
--- a/src/tools/shapes/Shape.ts
+++ b/src/tools/shapes/Shape.ts
@@ -1,9 +1,10 @@
 import Konva from 'konva'
 import { CanvasElement } from '@/types/Canvas'
 import { CustomEvent, CustomStageEvent } from '@/util/PointerEventMapper'
-import { CanvasEntityActions, CanvasEntityGetters } from '@/store/modules/canvasEntity'
+import { AppCanvasEntityActions, AppCanvasEntityGetters } from '@/store/modules/app/canvasEntity'
 import store from '@/main'
-import { LayerActions, LayerGetters } from '@/store/modules/layer'
+import { AppLayerActions, AppLayerGetters } from '@/store/modules/app/layer'
+import { Namespaces } from '@/store'
 
 export default class Shape {
   private readonly decayTime = 500
@@ -28,7 +29,7 @@ export default class Shape {
   }
 
   destroy = (): void => {
-    store.dispatch(`layer/${LayerActions.LAYER_DESTROY_GROUP}`, this.group)
+    store.dispatch(`${Namespaces.APP_LAYER}/${AppLayerActions.LAYER_DESTROY_GROUP}`, this.group)
   }
 
   formatX = (num: number, event: CustomEvent | CustomStageEvent): number => {
@@ -40,15 +41,15 @@ export default class Shape {
   }
 
   get canvasElement (): CanvasElement {
-    return store.getters[`canvasEntity/${CanvasEntityGetters.CANVAS_ELEMENT}`]
+    return store.getters[`${Namespaces.APP_CANVAS_ENTITY}/${AppCanvasEntityGetters.CANVAS_ELEMENT}`]
   }
 
   set canvasElement (canvasElement: CanvasElement) {
-    store.dispatch(`canvasEntity(${CanvasEntityActions.SET_CANVAS_ELEMENT}`, canvasElement)
+    store.dispatch(`${Namespaces.APP_CANVAS_ENTITY}(${AppCanvasEntityActions.SET_CANVAS_ELEMENT}`, canvasElement)
   }
 
   get layer (): Konva.Layer {
-    return store.getters[`layer/${LayerGetters.LAYER}`]
+    return store.getters[`${Namespaces.APP_LAYER}/${AppLayerGetters.LAYER}`]
   }
 }
 
diff --git a/src/tools/shapes/TextCreator.ts b/src/tools/shapes/TextCreator.ts
index 3602789..4bbbbdb 100644
--- a/src/tools/shapes/TextCreator.ts
+++ b/src/tools/shapes/TextCreator.ts
@@ -29,6 +29,7 @@ export default class TextCreator extends Shape implements TextCreatorInterface {
       this.text = this.createTextElement(canvasElement, event)
     )
     this.group.attrs.type = CanvasElementType.SHAPE
+    this.group.attrs.temporary = this.temporary
     this.layer.add(this.group).batchDraw()
   }
 
diff --git a/src/tools/util/CenterCanvas.ts b/src/tools/util/CenterCanvas.ts
index ac85cf9..0b2d4fa 100644
--- a/src/tools/util/CenterCanvas.ts
+++ b/src/tools/util/CenterCanvas.ts
@@ -1,10 +1,12 @@
 import { Store } from 'vuex'
-import { StageGetters } from '@/store/modules/stage'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppStageGetters } from '@/store/modules/app/stage'
+import { Namespaces } from '@/store'
 
 export default class CenterCanvas {
   center = (store: Store<string>): void => {
-    const stage = store.getters?.[`stage/${StageGetters.STAGE}`]
-    const stageConfig = store.getters?.[`stage/${StageGetters.STAGE_CONFIG}`]
+    const stage = store.getters?.[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE}`]
+    const stageConfig = store.getters?.[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`]
     const topOffset = (window.innerWidth > 899) ? 100 : 150
     const left = (window.innerWidth - stageConfig.width) / 2
     const top = (((window.innerHeight - topOffset) - stageConfig.height) / 2) + (topOffset * 0.75)
diff --git a/src/tools/util/MapCanvas.ts b/src/tools/util/MapCanvas.ts
index 6e82421..6431ea6 100644
--- a/src/tools/util/MapCanvas.ts
+++ b/src/tools/util/MapCanvas.ts
@@ -2,14 +2,15 @@ import axios from 'axios'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
 import Konva from 'konva'
 import store from '@/main'
-import { StageGetters } from '@/store/modules/stage'
-import { LayerGetters } from '@/store/modules/layer'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppLayerGetters } from '@/store/modules/app/layer'
 import { CanvasElementType } from '@/types/Canvas'
+import { Namespaces } from '@/store'
 
 export default class MapCanvas {
   async setMap () {
-    const stageConfig: CustomStageConfig = store.getters[`stage/${StageGetters.STAGE_CONFIG}`]
-    const layer: Konva.Layer = store.getters[`layer/${LayerGetters.LAYER}`]
+    const stageConfig: CustomStageConfig = store.getters[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`]
+    const layer: Konva.Layer = store.getters[`${Namespaces.APP_LAYER}/${AppLayerGetters.LAYER}`]
     await axios.get(stageConfig.mapSrc).then((response) => {
       if (response.status === 200) {
         this.createMapElement(stageConfig, layer)
diff --git a/src/types/Games/Index.ts b/src/types/Games/Index.ts
index fe7d476..0fba9de 100644
--- a/src/types/Games/Index.ts
+++ b/src/types/Games/Index.ts
@@ -1,5 +1,5 @@
-import { JWTRegion } from '@/store/modules/authentication'
-import { GameName } from '@/store/modules/room'
+import { JWTRegion } from '@/store/modules/app/authentication'
+import { Game } from '@/store/modules/socket/room'
 
 export interface Item {
   text: string;
@@ -24,5 +24,5 @@ export interface Field {
 export interface ApiHeader {
   Authorization: string;
   'X-Region': JWTRegion;
-  'X-Game': GameName;
+  'X-Game': Game;
 }
diff --git a/src/types/Games/Wows/Maps.ts b/src/types/Games/Wows/Maps.ts
index af16d81..9f3e8f5 100644
--- a/src/types/Games/Wows/Maps.ts
+++ b/src/types/Games/Wows/Maps.ts
@@ -1,4 +1,4 @@
-import { Map } from '@/store/modules/types'
+import { Map } from '@/store/types'
 
 export default class WowsMaps {
   private maps: Map[] = [
diff --git a/src/util/HandleRenderShapes.ts b/src/util/HandleRenderShapes.ts
index b28210d..587d3bc 100644
--- a/src/util/HandleRenderShapes.ts
+++ b/src/util/HandleRenderShapes.ts
@@ -2,11 +2,13 @@ import Konva from 'konva'
 import { AdditionData, CanvasElement, CanvasElementHistory } from '@/types/Canvas'
 import { Tool, Tracker } from '@/tools/Tool'
 import { CustomStageConfig } from '@/util/PointerEventMapper'
-import { LayerGetters } from '@/store/modules/layer'
-import { CanvasGetters } from '@/store/modules/canvas'
-import { StageGetters } from '@/store/modules/stage'
-import { ToolGetters } from '@/store/modules/tools'
+import { AppLayerGetters } from '@/store/modules/app/layer'
+import { SocketCanvasGetters } from '@/store/modules/socket/canvas'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppStageGetters } from '@/store/modules/app/stage'
+import { AppToolGetters } from '@/store/modules/app/tools'
 import { Store } from 'vuex'
+import { Namespaces } from '@/store'
 
 export default class HandleRenderShapes {
   // eslint-disable-next-line no-useless-constructor
@@ -16,13 +18,14 @@ export default class HandleRenderShapes {
   public canvasElementsHistory: CanvasElementHistory[]
   public tools: Tool[]
   public stage: Konva.Stage
+
   constructor (private propStore: Store<string>) {
-    this.layer = this.propStore.getters[`layer/${LayerGetters.LAYER}`]
-    this.canvasElements = this.propStore.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
-    this.stageConfig = this.propStore.getters[`stage/${StageGetters.STAGE_CONFIG}`]
-    this.canvasElementsHistory = this.propStore.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
-    this.tools = this.propStore.getters[`tools/${ToolGetters.TOOLS}`]
-    this.stage = this.propStore.getters[`stage/${StageGetters.STAGE}`]
+    this.layer = this.propStore.getters[`${Namespaces.APP_LAYER}/${AppLayerGetters.LAYER}`]
+    this.canvasElements = this.propStore.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
+    this.stageConfig = this.propStore.getters[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`]
+    this.canvasElementsHistory = this.propStore.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
+    this.tools = this.propStore.getters[`${Namespaces.APP_TOOLS}/${AppToolGetters.TOOLS}`]
+    this.stage = this.propStore.getters[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE}`]
   }
 
   handle = (): void => {
diff --git a/src/util/HandleUndoRedo.ts b/src/util/HandleUndoRedo.ts
index 8c01cce..9f3ec5b 100644
--- a/src/util/HandleUndoRedo.ts
+++ b/src/util/HandleUndoRedo.ts
@@ -1,9 +1,9 @@
 import { Tracker } from '@/tools/Tool'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import store from '@/main'
 import { ISO } from '@/util/ISO'
 import uuid from 'uuid'
-import { AuthenticationGetters, JWT } from '@/store/modules/authentication'
+import { AppAuthenticationGetters, JWT } from '@/store/modules/app/authentication'
 import { SocketActions, SocketCanvasToolsEmit } from '@/store/modules/socket'
 import {
   AdditionData,
@@ -14,10 +14,11 @@ import {
   RemovalData,
   UndoData
 } from '@/types/Canvas'
+import { Namespaces } from '@/store'
 
 export default class HandleUndoRedo {
   handleUndoRedo = (undoRedoString: string): void => {
-    const canvasElementsHistory: CanvasElementHistory[] | void = (store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`])
+    const canvasElementsHistory: CanvasElementHistory[] | void = (store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY}`])
     if (canvasElementsHistory) {
       const foundElement: CanvasElementHistory = this['find' + undoRedoString](this.sortHistory([...canvasElementsHistory]))
       if (foundElement) {
@@ -81,13 +82,13 @@ export default class HandleUndoRedo {
   undo (modifyType: Tracker, modifyData: UndoData) {
     const data: CanvasElementHistory = {
       id: uuid(),
-      jti: (store.getters[`authentication/${AuthenticationGetters.JWT}`]).jti,
+      jti: (store.getters[`${Namespaces.APP_AUTHENTICATION}/${AppAuthenticationGetters.JWT}`]).jti,
       modifyType: modifyType,
       modifyData: modifyData,
       timestampModified: ISO.timestamp()
     }
-    const canvasElements = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
-    const canvasElementHistory = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
+    const canvasElements = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
+    const canvasElementHistory = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
     const undo: CanvasElementHistory = canvasElementHistory.find((history: CanvasElementHistory) => history.id === modifyData.historyId)
     if (undo) {
       switch (undo.modifyType) {
@@ -101,7 +102,7 @@ export default class HandleUndoRedo {
           this.undoMove(undo, canvasElements)
           break
       }
-      store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, data)
+      store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, data)
       this.sendToSocket(data, SocketCanvasToolsEmit.CANVAS_TOOLS_UNDO)
     }
   }
@@ -109,13 +110,13 @@ export default class HandleUndoRedo {
   redo (modifyType: Tracker, history: CanvasElementHistory) {
     const data: CanvasElementHistory = {
       id: uuid(),
-      jti: (store.getters[`authentication/${AuthenticationGetters.JWT}`]).jti,
+      jti: (store.getters[`${Namespaces.APP_AUTHENTICATION}/${AppAuthenticationGetters.JWT}`]).jti,
       modifyType: modifyType,
       modifyData: { historyId: history.id },
       timestampModified: ISO.timestamp()
     }
-    const canvasElements = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS}`]
-    const canvasElementHistory = store.getters[`canvas/${CanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
+    const canvasElements = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS}`]
+    const canvasElementHistory = store.getters[`${Namespaces.SOCKET_CANVAS}/${SocketCanvasGetters.CANVAS_ELEMENTS_HISTORY}`]
     const modifier = history.modifyData as UndoData
     const redo: CanvasElementHistory = canvasElementHistory.find((history: CanvasElementHistory) => history.id === modifier.historyId)
     if (redo) {
@@ -130,7 +131,7 @@ export default class HandleUndoRedo {
           this.redoMove(redo, canvasElements)
           break
       }
-      store.dispatch(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, data)
+      store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.ADD_CANVAS_ELEMENT_HISTORY}`, data)
       this.sendToSocket(data, SocketCanvasToolsEmit.CANVAS_TOOLS_REDO)
     }
   }
@@ -141,7 +142,7 @@ export default class HandleUndoRedo {
       additions.forEach((canvasElementId: string) => {
         const foundElement: CanvasElement | undefined = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === canvasElementId)
         if (foundElement) {
-          store.dispatch(`canvas/${CanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
+          store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
         }
       })
     }
@@ -153,7 +154,7 @@ export default class HandleUndoRedo {
       removals.forEach((canvasElementId: string) => {
         const foundElement: CanvasElement | undefined = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === canvasElementId)
         if (foundElement) {
-          store.dispatch(`canvas/${CanvasAction.SHOW_CANVAS_ELEMENT}`, foundElement)
+          store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.SHOW_CANVAS_ELEMENT}`, foundElement)
         }
       })
     }
@@ -182,7 +183,7 @@ export default class HandleUndoRedo {
       additions.forEach((canvasElementId: string) => {
         const foundElement: CanvasElement | undefined = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === canvasElementId)
         if (foundElement) {
-          store.dispatch(`canvas/${CanvasAction.SHOW_CANVAS_ELEMENT}`, foundElement)
+          store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.SHOW_CANVAS_ELEMENT}`, foundElement)
         }
       })
     }
@@ -194,7 +195,7 @@ export default class HandleUndoRedo {
       removals.forEach((canvasElementId: string) => {
         const foundElement: CanvasElement | undefined = canvasElements.find((canvasElement: CanvasElement) => canvasElement.id === canvasElementId)
         if (foundElement) {
-          store.dispatch(`canvas/${CanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
+          store.dispatch(`${Namespaces.SOCKET_CANVAS}/${SocketCanvasAction.HIDE_CANVAS_ELEMENT}`, foundElement)
         }
       })
     }
@@ -218,7 +219,7 @@ export default class HandleUndoRedo {
   }
 
   sortHistory (history: CanvasElementHistory[]) {
-    const jwt = store.getters[`authentication/${AuthenticationGetters.JWT}`] as JWT
+    const jwt = store.getters[`${Namespaces.APP_AUTHENTICATION}/${AppAuthenticationGetters.JWT}`] as JWT
     const filtered = history.filter((canvasElementHistory: CanvasElementHistory) => canvasElementHistory.jti === jwt.jti)
     return filtered.sort((a: CanvasElementHistory, b: CanvasElementHistory) => {
       return (a.timestampModified < b.timestampModified) ? -1 : (a.timestampModified > b.timestampModified ? 1 : 0)
@@ -226,7 +227,7 @@ export default class HandleUndoRedo {
   }
 
   sendToSocket (history: CanvasElementHistory, emit: string) {
-    store.dispatch(`socket/${SocketActions.EMIT}`, { data: { ...history, canvasElements: [] }, emit: emit })
+    store.dispatch(`${Namespaces.SOCKET}/${SocketActions.EMIT}`, { data: { ...history, canvasElements: [] }, emit: emit })
   }
   // eslint-disable-next-line
   [key: string]: any
diff --git a/src/util/PointerEventMapper.ts b/src/util/PointerEventMapper.ts
index d0e7589..89df9ac 100644
--- a/src/util/PointerEventMapper.ts
+++ b/src/util/PointerEventMapper.ts
@@ -1,7 +1,9 @@
 import Konva from 'konva'
 import { NodeConfig } from 'konva/types/Node'
-import { StageGetters } from '@/store/modules/stage'
+import { AppStageGetters } from '@/store/modules/app/stage'
+import { SocketStageGetters } from '@/store/modules/socket/stage'
 import store from '@/main'
+import { Namespaces } from '@/store'
 
 export default class PointerEventMapper {
   static touchEventMapper = (event: TouchEvent): object => {
@@ -40,9 +42,9 @@ export default class PointerEventMapper {
   }
 
   static globalEventMapper = (e: Konva.KonvaPointerEvent | DragEvent): CustomEvent => {
-    const stageConfig: CustomStageConfig = store.getters[`stage/${StageGetters.STAGE_CONFIG}`]
-    const stageZoom: number = store.getters[`stage/${StageGetters.STAGE_ZOOM}`]
-    const stage: Konva.Stage = store.getters[`stage/${StageGetters.STAGE}`]
+    const stageConfig: CustomStageConfig = store.getters[`${Namespaces.SOCKET_STAGE}/${SocketStageGetters.STAGE_CONFIG}`]
+    const stageZoom: number = store.getters[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE_ZOOM}`]
+    const stage: Konva.Stage = store.getters[`${Namespaces.APP_STAGE}/${AppStageGetters.STAGE}`]
     let pageX = 0
     let pageY = 0
     if ('evt' in e) {
diff --git a/src/views/Index.vue b/src/views/TheIndex.vue
similarity index 50%
rename from src/views/Index.vue
rename to src/views/TheIndex.vue
index 12de80c..4da152d 100644
--- a/src/views/Index.vue
+++ b/src/views/TheIndex.vue
@@ -6,14 +6,17 @@
 import Component from 'vue-class-component'
 import Vue from 'vue'
 import uuid from 'uuid'
-import { Action } from 'vuex-class'
-import { RoomAction } from '../store/modules/room'
+import { namespace } from 'vuex-class'
+import { SocketRoomAction } from '../store/modules/socket/room'
+import { Namespaces } from '@/store'
+
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
 @Component({
-  name: 'Index'
+  name: 'TheIndex'
 })
-export default class extends Vue {
-  @Action(`room/${RoomAction.SET_ROOM_ID}`) setRoomId!: (roomId: string) => void
+export default class TheIndex extends Vue {
+  @SocketRoom.Action(SocketRoomAction.SET_ROOM_ID) setRoomId!: (roomId: string) => void
   created () {
     const roomId = uuid.v4().toString()
     this.setRoomId(roomId)
diff --git a/src/views/Room.vue b/src/views/TheRoom.vue
similarity index 57%
rename from src/views/Room.vue
rename to src/views/TheRoom.vue
index 7c56f39..9012e41 100644
--- a/src/views/Room.vue
+++ b/src/views/TheRoom.vue
@@ -34,51 +34,65 @@ import { Prop, Watch } from 'vue-property-decorator'
 import { CanvasElement, VueKonvaStage } from '@/types/Canvas'
 import TheCreateNewTacticOverlay from '@/components/overlays/TheCreateNewTacticOverlay.vue'
 import TheUpdateTacticOverlay from '@/components/overlays/TheUpdateTacticOverlay.vue'
-import { StageActions, StageGetters } from '@/store/modules/stage'
+import { SocketStageActions, SocketStageGetters } from '@/store/modules/socket/stage'
 import PointerEventMapper, { CustomStageConfig } from '@/util/PointerEventMapper'
-import { CanvasAction } from '@/store/modules/canvas'
-import { Action, Getter } from 'vuex-class'
+import { SocketCanvasAction } from '@/store/modules/socket/canvas'
+import { namespace } from 'vuex-class'
 import { EventBus } from '@/event-bus'
 import RoomSocket from '@/mixins/RoomSockets'
 import { Item } from '@/types/Games/Index'
-import { ToolGetters } from '@/store/modules/tools'
+import { AppToolGetters } from '@/store/modules/app/tools'
 import { Tool } from '@/tools/Tool'
-import { TacticGetters, TacticAction } from '../store/modules/tactic'
-import { Tactic, Collection } from '../store/modules/types'
+import { SocketTacticGetters, SocketTacticAction } from '../store/modules/socket/tactic'
+import { Tactic, Collection } from '../store/types'
 import uuid from 'uuid'
-import { AuthenticationGetters, ExtendedJWT } from '../store/modules/authentication'
-import { RoomAction, RoomGetters } from '../store/modules/room'
+import { AppAuthenticationGetters, ExtendedJWT } from '../store/modules/app/authentication'
+import { SocketRoomAction, SocketRoomGetters } from '../store/modules/socket/room'
+import { AppRoomAction, AppRoomGetters } from '../store/modules/app/room'
+import { Namespaces } from '@/store'
 
-  @Component({
-    name: 'Room',
-    mixins: [RoomSocket],
-    components: {
-      TheCreateNewTacticOverlay,
-      TheUpdateTacticOverlay,
-      TheNavLarge,
-      TheNavSmall,
-      TheToolPanel,
-      TheCanvas,
-      TheEntityPanel,
-      TheTacticSelector
-    }
-  })
-export default class Room extends mixins(RoomSocket) {
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+const SocketTactic = namespace(Namespaces.SOCKET_TACTIC)
+
+@Component({
+  name: 'TheRoom',
+  mixins: [RoomSocket],
+  components: {
+    TheCreateNewTacticOverlay,
+    TheUpdateTacticOverlay,
+    TheNavLarge,
+    TheNavSmall,
+    TheToolPanel,
+    TheCanvas,
+    TheEntityPanel,
+    TheTacticSelector
+  }
+})
+export default class TheRoom extends mixins(RoomSocket) {
   @Prop() id!: string
-  @Getter(`stage/${StageGetters.STAGE_CONFIG}`) stageConfig!: CustomStageConfig
-  @Getter(`tools/${ToolGetters.TOOL}`) findTool!: (name: string) => Tool | void
-  @Getter(`tactic/${TacticGetters.TACTICS}`) tactics!: () => Tactic[]
-  @Getter(`tactic/${TacticGetters.COLLECTIONS}`) collections!: () => Collection[]
-  @Getter(`authentication/${AuthenticationGetters.JWT}`) jwt!: ExtendedJWT
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT}`) setCanvasElements!: (canvasElements: CanvasElement[]) => void
-  @Action(`canvas/${CanvasAction.SET_CANVAS_ELEMENT_HISTORY}`) setCanvasElementsHistory!: (canvasElements: CanvasElement[]) => void
-  @Action(`stage/${StageActions.SET_MAP_SRC}`) setMapSrc!: (mapSrc: string) => void
-  @Action(`stage/${StageActions.SET_CONFIG}`) setConfig!: (config: CustomStageConfig) => void
-  @Action(`tactic/${TacticAction.SET_COLLECTIONS}`) setCollections!: (collections: Collection[]) => void
-  @Action(`tactic/${TacticAction.SET_TACTICS}`) setTactics!: (tactics: Tactic[]) => void
-  @Action(`room/${RoomAction.SET_IS_CANVAS_LOADED}`) setIsCanvasLoaded!: (isCanvasLoaded: boolean) => void
+  @SocketStage.Getter(SocketStageGetters.STAGE_CONFIG) stageConfig!: CustomStageConfig
+  @AppTools.Getter(AppToolGetters.TOOL) findTool!: (name: string) => Tool | void
+  @SocketTactic.Getter(SocketTacticGetters.TACTICS) tactics!: () => Tactic[]
+  @SocketTactic.Getter(SocketTacticGetters.COLLECTIONS) collections!: () => Collection[]
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT) setCanvasElements!: (canvasElements: CanvasElement[]) => void
+  @SocketCanvas.Action(SocketCanvasAction.SET_CANVAS_ELEMENT_HISTORY) setCanvasElementsHistory!: (canvasElements: CanvasElement[]) => void
+  @SocketStage.Action(SocketStageActions.SET_MAP_SRC) setMapSrc!: (mapSrc: string) => void
+  @SocketStage.Action(SocketStageActions.SET_CONFIG) setConfig!: (config: CustomStageConfig) => void
+  @SocketTactic.Action(SocketTacticAction.SET_COLLECTIONS) setCollections!: (collections: Collection[]) => void
+  @SocketTactic.Action(SocketTacticAction.SET_TACTICS) setTactics!: (tactics: Tactic[]) => void
+  @AppRoom.Action(AppRoomAction.SET_IS_CANVAS_LOADED) setIsCanvasLoaded!: (isCanvasLoaded: boolean) => void
+  @SocketRoom.Action(SocketRoomAction.SET_ROOM_ID) setRoomId!: (roomId: string) => void
 
+  created () {
+    this.setRoomId(window.location.pathname.replace('/', ''))
+  }
   $refs!: {
     app: HTMLDivElement;
     stage: VueKonvaStage;

From fd14e9501b9b9b8c57cba6d5c7cb95b07d6c76b4 Mon Sep 17 00:00:00 2001
From: samuel_bryan <bryan.samuel1@hotmail.co.uk>
Date: Tue, 26 May 2020 18:29:32 +0100
Subject: [PATCH 2/2] Merge in develop and fix a few small bugs and styling
 with the code

---
 src/App.vue                                   |  2 +
 src/components/TheEntityPanel.vue             | 22 +++---
 src/components/TheToolPanel.vue               | 20 +++---
 src/components/canvas-tools/ToolContainer.vue | 20 +++---
 src/components/navigation/TheLoginCard.vue    | 63 ++++++++---------
 src/components/navigation/TheUserMenu.vue     | 70 ++++++++++++-------
 .../navigation/buttons/TheManageRoom.vue      | 10 ++-
 .../buttons/ThePresentationMode.vue           | 11 ++-
 .../navigation/buttons/TheRoomSave.vue        | 11 ++-
 .../navigation/login/ProviderBlock.vue        | 62 +++++++++-------
 src/store/modules/app/authentication.ts       | 41 ++++++++---
 src/util/stringFormatting.ts                  |  7 ++
 translations                                  |  2 +-
 13 files changed, 212 insertions(+), 129 deletions(-)
 create mode 100644 src/util/stringFormatting.ts

diff --git a/src/App.vue b/src/App.vue
index 71d0411..3c16c2c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,7 @@ export default class TheApp extends Vue {
   @AppAuthentication.Action(AppAuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
   @AppAuthentication.Action(AppAuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
   @AppAuthentication.Action(AppAuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
+  @AppAuthentication.Action(AppAuthenticationActions.LOAD_PROVIDERS) loadProviders!: () => void
   @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
 
   async created () {
@@ -39,6 +40,7 @@ export default class TheApp extends Vue {
   }
 
   async initAuthentication () {
+    this.loadProviders()
     const localToken = localStorage.getItem(JWT_KEY)
 
     if (this.checkTokenExpiry()) {
diff --git a/src/components/TheEntityPanel.vue b/src/components/TheEntityPanel.vue
index 1189a97..fe5c99f 100644
--- a/src/components/TheEntityPanel.vue
+++ b/src/components/TheEntityPanel.vue
@@ -29,7 +29,6 @@
             <v-divider></v-divider>
             <div>
               <v-list
-                :disabled="!isCanvasLoaded"
                 dense
                 nav
               >
@@ -44,8 +43,9 @@
                   <template v-slot:activator="{ on }">
                     <v-list-item
                       v-on="on"
-                      dark
+                      light
                       active-class="custom-list-item-active-class"
+                      :disabled="!isItemEnabled"
                       :input-value="clickedItemKey === item.key"
                       class="custom-list-item-center"
                       @click="onItemClickHandler(item.key)"
@@ -55,11 +55,11 @@
                           v-if="index"
                           :content="item.noOfEntities"
                         >
-                          <v-icon :color="!isCanvasLoaded ? 'white' : item.color">{{ item.icon }}</v-icon>
+                          <v-icon :color="!isItemEnabled ? 'rgba(0, 0, 0, 0.26)' : item.color">{{ item.icon }}</v-icon>
                         </v-badge>
                         <v-icon
                           v-else
-                          :color="!isCanvasLoaded ? 'white' : item.color"
+                          :color="!isItemEnabled ? 'rgba(0, 0, 0, 0.26)' : item.color"
                         >
                           {{ item.icon }}
                         </v-icon>
@@ -88,7 +88,9 @@ import { SocketRoomGetters, Game } from '@/store/modules/socket/room'
 import { namespace } from 'vuex-class'
 import { WowsPanel, WotPanel } from './entity-panel'
 import { Namespaces } from '@/store'
+import { AppAuthenticationGetters } from '../store/modules/app/authentication'
 
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 const AppRoom = namespace(Namespaces.APP_ROOM)
 const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
@@ -109,6 +111,7 @@ export interface MenuItem {
 })
 export default class MapButtons extends Vue {
   @SocketRoom.Getter(SocketRoomGetters.GAME) private readonly game!: Game;
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
   @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
 
   show = false
@@ -119,7 +122,7 @@ export default class MapButtons extends Vue {
   ]
 
   items: MenuItem[] = [
-    { key: 0, title: 'add', icon: 'fa-plus' },
+    { key: 0, title: 'add', icon: 'fa-plus', color: 'white' },
     ...this.teams
   ]
 
@@ -130,6 +133,10 @@ export default class MapButtons extends Vue {
     wot: require('@/assets/wot-icon.png')
   }
 
+  get isItemEnabled () {
+    return this.isCanvasLoaded && this.isAuth
+  }
+
   onItemClickHandler (key: number) {
     this.show = key !== this.clickedItemKey ? true : !this.show
     if (!this.show) {
@@ -202,10 +209,6 @@ export default class MapButtons extends Vue {
   background-color: $room-primary;
   height: 480px !important;
 
-  i {
-    color: $room-text;
-  }
-
   >div >div {
     display: flex;
     height: 100%;
@@ -234,6 +237,7 @@ export default class MapButtons extends Vue {
     background-color: white;
   }
 }
+
 .custom-list-item-active-class {
   background-color: rgba(white, 0.001);
   color: white;
diff --git a/src/components/TheToolPanel.vue b/src/components/TheToolPanel.vue
index d9c8aee..42ecdc5 100644
--- a/src/components/TheToolPanel.vue
+++ b/src/components/TheToolPanel.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="custom-tool-panel-container btn-toggle-box pa-0 pt-1">
     <v-btn-toggle class="flex-column custom-tool-bar">
-      <tool-container icon="fa-arrows-alt" toolname="move" :popout="false" />
-      <tool-container icon="fa-map-pin" toolname="ping" :popout="false" />
-      <tool-container icon="fa-pen" toolname="freeDraw" :popout="true"><free-draw-template /></tool-container>
-      <tool-container icon="fa-slash" toolname="line" :popout="true"><line-template /></tool-container>
-      <tool-container icon="far fa-circle" toolname="circle" :popout="true"><circle-template /></tool-container>
-      <tool-container icon="fa-ruler" toolname="ruler" :popout="true"><ruler-template /></tool-container>
-      <tool-container icon="fa-font" toolname="text" :popout="true"><text-template /></tool-container>
-      <tool-container icon="fa-eraser" toolname="erase" :popout="false"></tool-container>
-      <undo-container icon="fa-undo" toolname="undo"></undo-container>
-      <redo-container icon="fa-redo" toolname="redo"></redo-container>
+      <tool-container icon="fa-arrows-alt" toolName="move" :popout="false" />
+      <tool-container icon="fa-map-pin" toolName="ping" :popout="false" />
+      <tool-container icon="fa-pen" toolName="freeDraw" :popout="true"><free-draw-template /></tool-container>
+      <tool-container icon="fa-slash" toolName="line" :popout="true"><line-template /></tool-container>
+      <tool-container icon="far fa-circle" toolName="circle" :popout="true"><circle-template /></tool-container>
+      <tool-container icon="fa-ruler" toolName="ruler" :popout="true"><ruler-template /></tool-container>
+      <tool-container icon="fa-font" toolName="text" :popout="true"><text-template /></tool-container>
+      <tool-container icon="fa-eraser" toolName="erase" :popout="false"></tool-container>
+      <undo-container icon="fa-undo" toolName="undo"></undo-container>
+      <redo-container icon="fa-redo" toolName="redo"></redo-container>
     </v-btn-toggle>
   </div>
 </template>
diff --git a/src/components/canvas-tools/ToolContainer.vue b/src/components/canvas-tools/ToolContainer.vue
index 194c462..f1e6f22 100644
--- a/src/components/canvas-tools/ToolContainer.vue
+++ b/src/components/canvas-tools/ToolContainer.vue
@@ -27,7 +27,7 @@
               <v-icon dense :color="iconColour">{{icon}}</v-icon>
             </v-btn>
           </template>
-          <span>{{ $t(`tool.container.${toolname}`) }}</span>
+          <span>{{ $t(`tool.container.${toolName}`) }}</span>
         </v-tooltip>
         <v-btn
           x-small
@@ -67,7 +67,7 @@
         <v-icon dense :color="iconColour">{{icon}}</v-icon>
       </v-btn>
     </template>
-    <span>{{ $t(`tool.container.${toolname}`) }}</span>
+    <span>{{ $t(`tool.container.${toolName}`) }}</span>
   </v-tooltip>
 </template>
 
@@ -92,10 +92,10 @@ interface MenuElement extends Vue {
 export default class ToolContainer extends Vue {
   @Prop() private icon!: string
   @Prop() private popout!: boolean
-  @Prop() private toolname!: string
+  @Prop() private toolName!: string
   @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
   @AppTools.Getter(AppToolGetters.ENABLED_TOOL) enabledTool?: Tool
-  @AppTools.Action(AppToolsAction.ENABLE_TOOL) enableTool!: (toolname: string) => void
+  @AppTools.Action(AppToolsAction.ENABLE_TOOL) enableTool!: (toolName: string) => void
   @AppTools.Action(AppToolsAction.DISABLE_TOOL) disableTool!: () => void
 
   isActive = false
@@ -109,11 +109,11 @@ export default class ToolContainer extends Vue {
   }
 
   get iconColour (): string {
-    return (this.enabledTool?.name === this.toolname) ? 'white' : 'primary'
+    return (this.enabledTool?.name === this.toolName) ? 'white' : 'primary'
   }
 
   get isEnabledClass (): string {
-    return (this.enabledTool?.name === this.toolname) ? 'v-btn--active' : 'custom-btn-disabled'
+    return (this.enabledTool?.name === this.toolName) ? 'v-btn--active' : 'custom-btn-disabled'
   }
 
   get isEnabledButtonClass (): string {
@@ -125,16 +125,16 @@ export default class ToolContainer extends Vue {
   }
 
   onButtonClickHandler () {
-    if (this.enabledTool?.name !== this.toolname) {
-      this.enableTool(this.toolname)
+    if (this.enabledTool?.name !== this.toolName) {
+      this.enableTool(this.toolName)
     } else {
       this.disableTool()
     }
   }
 
   onButtonClickHandlerCaret () {
-    if (this.enabledTool?.name !== this.toolname) {
-      this.enableTool(this.toolname)
+    if (this.enabledTool?.name !== this.toolName) {
+      this.enableTool(this.toolName)
     }
   }
 }
diff --git a/src/components/navigation/TheLoginCard.vue b/src/components/navigation/TheLoginCard.vue
index 9c5069f..1f255fe 100644
--- a/src/components/navigation/TheLoginCard.vue
+++ b/src/components/navigation/TheLoginCard.vue
@@ -1,54 +1,49 @@
 <template>
   <v-card>
-    <v-card-title>Login</v-card-title>
-    <v-divider></v-divider>
+    <v-card-title class="custom-login-card-title">
+      <div v-text="$t('navigation.login.card.title')" />
+      <v-btn icon @click="closeHandler" v-if="isMobile">
+        <v-icon v-text="'fa-times'" />
+      </v-btn>
+    </v-card-title>
     <v-card-text>
-      <h4>Please select a realm to log in with</h4>
+      <provider-block
+        v-for="(provider, name) in providers"
+        :provider-name="name"
+        :provider="provider"
+        :key="name"
+      />
     </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 { Component, Vue, Prop, Emit } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
-import { AppAuthenticationActions, JWTRegion } from '@/store/modules/app/authentication'
+import { AppAuthenticationActions, AppAuthenticationGetters } from '@/store/modules/app/authentication'
+import { Providers } from '@/util/ProvidersUtil'
+import ProviderBlock from '@/components/navigation/login/ProviderBlock.vue'
 
 const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 
 @Component({
-  name: 'TheLoginCard'
+  name: 'TheLoginCard',
+  components: { ProviderBlock }
 })
-export default class extends Vue {
-  @AppAuthentication.Action(AppAuthenticationActions.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)
+export default class TheLoginCard extends Vue {
+  @Prop({ default: false }) isMobile!: boolean
+  @AppAuthentication.Action(AppAuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+  @AppAuthentication.Getter(AppAuthenticationGetters.PROVIDERS) providers!: Providers
+  @Emit() closeHandler () {
+    return null
   }
 }
 </script>
 <style scoped>
-
+.custom-login-card-title {
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index f7f206a..8291f87 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <v-menu
-    v-if="!isMobile"
+    v-if="!isMobile && isAuth"
     offset-y
     content-class="elevation-2"
   >
@@ -17,18 +17,12 @@
             <v-icon size="20">fa-user-circle</v-icon>
           </v-btn>
         </template>
-        <span>Sign in / Sign out</span>
+        <span>{{ $t('user.profile') }}</span>
       </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">
-          <the-login-card></the-login-card>
-        </v-dialog>
+      <v-list-item v-if="isAuth" @click="onClickLogout">
+        <v-list-item-title>{{ $t('navigation.login.logout') }}</v-list-item-title>
       </v-list-item>
       <v-list-item
         v-for="(userMenuItem, index) in userMenuItems"
@@ -40,15 +34,35 @@
       </v-list-item>
     </v-list>
   </v-menu>
+  <v-btn
+    v-else-if="!isMobile && !isAuth"
+    color="primary"
+    elevation="0"
+    small
+    @click.stop="onClickOpenLoginDialog"
+  >
+    {{ $t('navigation.login.title') }}
+    <v-dialog
+      v-model="isDialogOpen"
+      max-width="500px"
+      @click:outside="onClickCloseLoginDialog"
+    >
+      <the-login-card />
+    </v-dialog>
+  </v-btn>
   <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-subheader v-text="$t('user.profile')" />
+    <v-list-item v-if="isAuth" @click="onClickLogout">
+      <v-list-item-title>{{ $t('navigation.login.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>
-        <the-login-card></the-login-card>
+    <v-list-item v-else @click.stop="onClickOpenLoginDialog">
+      <v-list-item-title>{{ $t('navigation.login.title') }}</v-list-item-title>
+      <v-dialog
+        v-model="isDialogOpen"
+        fullscreen
+        @click:outside="onClickCloseLoginDialog"
+      >
+        <the-login-card :is-mobile="isMobile" v-on:close-handler="onClickCloseLoginDialog" />
       </v-dialog>
     </v-list-item>
     <v-list-item
@@ -57,7 +71,7 @@
       link
     >
       <v-list-item-content>
-        <v-list-item-title>{{ item.text }}</v-list-item-title>
+        <v-list-item-title v-text="item.text" />
       </v-list-item-content>
     </v-list-item>
   </v-list>
@@ -79,24 +93,26 @@ interface UserMenuItem {
 
 @Component({
   name: 'TheUserMenu',
-  components: {
-    TheLoginCard
-  }
+  components: { TheLoginCard }
 })
 export default class TheUserMenu extends Vue {
   @Prop() private isMobile!: boolean;
   @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
   @AppAuthentication.Action(AppAuthenticationActions.LOGIN_WG) authenticate!: (region: string) => void;
-  @AppAuthentication.Action(AppAuthenticationActions.LOGOUT) logout!: () => void
+  @AppAuthentication.Action(AppAuthenticationActions.LOGOUT) onClickLogout!: () => void
 
-  dialogOpen = false
-  doOpen () {
-    setTimeout(() => { this.dialogOpen = true })
-  }
+  isDialogOpen = false
   userMenuItems: UserMenuItem[] = []
 
+  onClickOpenLoginDialog () {
+    this.isDialogOpen = true
+  }
+
+  onClickCloseLoginDialog () {
+    this.isDialogOpen = false
+  }
   // eslint-disable-next-line
-  userMenuItemsClickHandler (item: UserMenuItem) {
+  userMenuItemsClickHandler(item: UserMenuItem) {
     // do stuff
   }
 }
diff --git a/src/components/navigation/buttons/TheManageRoom.vue b/src/components/navigation/buttons/TheManageRoom.vue
index 57572b4..4ae62f4 100644
--- a/src/components/navigation/buttons/TheManageRoom.vue
+++ b/src/components/navigation/buttons/TheManageRoom.vue
@@ -7,7 +7,7 @@
   >
     <template v-slot:activator="{ on }">
       <v-btn
-        :disabled="!isCanvasLoaded"
+        :disabled="!isItemEnabled"
         color="primary"
         elevation="0"
         small
@@ -31,7 +31,9 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { AppRoomGetters } from '@/store/modules/app/room'
 import { Namespaces } from '@/store'
+import { AppAuthenticationGetters } from '../../../store/modules/app/authentication'
 
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
@@ -40,6 +42,12 @@ const AppRoom = namespace(Namespaces.APP_ROOM)
 export default class TheManageRoom extends Vue {
   @Prop() readonly isMobile!: boolean
   @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+
+  get isItemEnabled () {
+    return this.isCanvasLoaded && this.isAuth
+  }
+
   manageRoomOnClickHandler () {
     // Do something
   }
diff --git a/src/components/navigation/buttons/ThePresentationMode.vue b/src/components/navigation/buttons/ThePresentationMode.vue
index 04b791b..a6f5963 100644
--- a/src/components/navigation/buttons/ThePresentationMode.vue
+++ b/src/components/navigation/buttons/ThePresentationMode.vue
@@ -7,7 +7,7 @@
   >
     <template v-slot:activator="{ on }">
       <v-btn
-        :disabled="!isCanvasLoaded"
+        :disabled="!isItemEnabled"
         color="primary"
         elevation="0"
         small
@@ -33,7 +33,9 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { AppRoomGetters } from '@/store/modules/app/room'
 import { Namespaces } from '@/store'
+import { AppAuthenticationGetters } from '../../../store/modules/app/authentication'
 
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
@@ -42,7 +44,14 @@ const AppRoom = namespace(Namespaces.APP_ROOM)
 export default class ThePresentationMode extends Vue {
   @Prop() readonly isMobile!: boolean
   @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+
   isEnabled = false
+
+  get isItemEnabled () {
+    return this.isCanvasLoaded && this.isAuth
+  }
+
   presentationModeOnClickHandler () {
     this.isEnabled = !this.isEnabled
   }
diff --git a/src/components/navigation/buttons/TheRoomSave.vue b/src/components/navigation/buttons/TheRoomSave.vue
index afadb1a..b7d1fe3 100644
--- a/src/components/navigation/buttons/TheRoomSave.vue
+++ b/src/components/navigation/buttons/TheRoomSave.vue
@@ -7,7 +7,7 @@
   >
     <template v-slot:activator="{ on }">
       <v-btn
-        :disabled="!isCanvasLoaded"
+        :disabled="!isItemEnabled"
         color="primary"
         elevation="0"
         small
@@ -31,7 +31,9 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { AppRoomGetters } from '../../../store/modules/app/room'
 import { Namespaces } from '@/store'
+import { AppAuthenticationGetters } from '../../../store/modules/app/authentication'
 
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 const AppRoom = namespace(Namespaces.APP_ROOM)
 
 @Component({
@@ -40,7 +42,14 @@ const AppRoom = namespace(Namespaces.APP_ROOM)
 export default class TheRoomSave extends Vue {
   @Prop() readonly isMobile!: boolean
   @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+
   isEnabled = false
+
+  get isItemEnabled () {
+    return this.isCanvasLoaded && this.isAuth
+  }
+
   roomSaveOnClickHandler () {
     // Do something
   }
diff --git a/src/components/navigation/login/ProviderBlock.vue b/src/components/navigation/login/ProviderBlock.vue
index 71badd0..bcb7480 100644
--- a/src/components/navigation/login/ProviderBlock.vue
+++ b/src/components/navigation/login/ProviderBlock.vue
@@ -1,50 +1,58 @@
 <template>
   <div class="custom-provider-container">
-    <h3>{{providerName}}</h3>
-    <v-divider>
-    </v-divider>
+    <h3 v-text="providerFormatted(providerName)" />
+    <v-divider />
     <div class="custom-login-btn-container">
-      <v-btn v-for="entry of entries" @click="authenticate(entry.endpoint)" :key="entry.key"
-             class="login-btn" color="primary">
-        {{entry.key}}
+      <v-btn
+        v-for="entry of entries"
+        :key="entry.key"
+        class="login-btn"
+        color="primary"
+        @click="authenticate(entry.endpoint)"
+      >
+        {{ entry.key }}
       </v-btn>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { AuthenticationActions } from '@/store/modules/authentication'
+import { AppAuthenticationActions } from '@/store/modules/app/authentication'
 import { namespace } from 'vuex-class'
 import { Namespaces } from '@/store'
 import { Provider } from '@/util/ProvidersUtil'
+import { camelCaseToPascalCaseWithSpaces } from '@/util/stringFormatting'
 
-const authNamespace = namespace(Namespaces.AUTH)
+const appAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
 
-  @Component({
-    name: 'ProviderBlock'
-  })
+@Component({
+  name: 'ProviderBlock'
+})
 export default class extends Vue {
-    @Prop() providerName!: string
-    @Prop() provider!: Provider
-    @authNamespace.Action(AuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+  @Prop() providerName!: string
+  @Prop() provider!: Provider
+  @appAuthentication.Action(AppAuthenticationActions.LOGIN_WG) authenticate!: (endpoint: string) => void
+
+  get entries () {
+    return this.provider.entries
+  }
 
-    get entries () {
-      return this.provider.entries
-    }
+  providerFormatted (sentence: string) {
+    return camelCaseToPascalCaseWithSpaces(sentence)
+  }
 }
 </script>
 
 <style scoped lang="scss">
-  .custom-login-btn-container {
-    margin-top: 5px;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-column-gap: 5px;
-  }
+.custom-login-btn-container {
+  margin-top: 5px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 5px;
+}
 
-  .custom-provider-container {
-    margin-top: 10px;
-  }
+.custom-provider-container {
+  margin-top: 10px;
+}
 </style>
diff --git a/src/store/modules/app/authentication.ts b/src/store/modules/app/authentication.ts
index 663147f..b430baa 100644
--- a/src/store/modules/app/authentication.ts
+++ b/src/store/modules/app/authentication.ts
@@ -1,6 +1,7 @@
 import { ActionContext, Module } from 'vuex'
 import axios from 'axios'
 import { verify } from 'jsonwebtoken'
+import { mapProviders, Providers } from '@/util/ProvidersUtil'
 
 export const JWT_KEY = 'jsonwebtoken'
 
@@ -42,23 +43,29 @@ export interface ExtendedJWT extends JWT {
 
 export interface AppAuthenticationState {
   jwt: ExtendedJWT | null;
+  providers: Providers;
 }
 
 export enum AppAuthenticationActions {
   AUTHENTICATE = 'authenticate',
   CHECK_TOKEN_EXPIRY = 'checkTokenExpiry',
+  LOAD_PROVIDERS = 'loadProviders',
   LOGIN_WG = 'auth_wg',
   LOGOUT = 'logout',
-  STORE_TOKEN = 'storeToken'
+  STORE_TOKEN = 'storeToken',
 }
 
 export enum AppAuthenticationMutation {
-  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN'
+  SET_AUTHENTICATION_TOKEN = 'SET_AUTHENTICATION_TOKEN',
+  SET_PROVIDERS = 'SET_PROVIDERS'
 }
 
 export enum AppAuthenticationGetters {
   JWT = 'jwt',
-  IS_AUTH = 'authenticated'
+  IS_AUTH = 'authenticated',
+  PROVIDER_NAMES = 'providers',
+  PROVIDER = 'provider',
+  PROVIDERS = 'providers'
 }
 
 type AppAuthenticationActionContext = ActionContext<AppAuthenticationState, {}>
@@ -67,16 +74,23 @@ const AppAuthenticationModule: Module<AppAuthenticationState, {}> = {
   namespaced: true,
   state () {
     return {
-      jwt: null
+      jwt: null,
+      providers: {}
     }
   },
   getters: {
     [AppAuthenticationGetters.JWT]: state => state.jwt,
-    [AppAuthenticationGetters.IS_AUTH]: state => state.jwt !== null
+    [AppAuthenticationGetters.IS_AUTH]: state => state.jwt !== null,
+    [AppAuthenticationGetters.PROVIDER_NAMES]: state => Object.getOwnPropertyNames(state.providers),
+    [AppAuthenticationGetters.PROVIDERS]: state => state.providers,
+    [AppAuthenticationGetters.PROVIDER]: state => (name: string) => state.providers[name]
   },
   mutations: {
     [AppAuthenticationMutation.SET_AUTHENTICATION_TOKEN] (state: AppAuthenticationState, payload: ExtendedJWT) {
       state.jwt = payload
+    },
+    [AppAuthenticationMutation.SET_PROVIDERS] (state: AppAuthenticationState, payload: Providers) {
+      state.providers = payload
     }
   },
   actions: {
@@ -122,14 +136,25 @@ const AppAuthenticationModule: Module<AppAuthenticationState, {}> = {
     [AppAuthenticationActions.STORE_TOKEN] (context: AppAuthenticationActionContext, token: string) {
       localStorage.setItem(JWT_KEY, token)
     },
-    [AppAuthenticationActions.LOGIN_WG] (context: AppAuthenticationActionContext, region: JWTRegion) {
-      // TODO: This is just placeholder logic. Please check it works. -Niko
-      const returnUrl = process.env.VUE_APP_MS_AUTH + `/connect/wargaming/${regionDomain(region)}/${window.location.href}`
+    [AppAuthenticationActions.LOGIN_WG] (context: AppAuthenticationActionContext, endpoint: string) {
+      const returnUrl = `${process.env.VUE_APP_MS_AUTH}${endpoint}/${window.location.href}`
       location.assign(returnUrl)
     },
     [AppAuthenticationActions.LOGOUT] (context: AppAuthenticationActionContext) {
       localStorage.removeItem(JWT_KEY)
       context.commit(AppAuthenticationMutation.SET_AUTHENTICATION_TOKEN, null)
+    },
+    async [AppAuthenticationActions.LOAD_PROVIDERS] (context: AppAuthenticationActionContext) {
+      if (process.env.VUE_APP_MS_AUTH) {
+        const response = await axios.get(process.env.VUE_APP_MS_AUTH)
+        if (response.status !== 200 || !(response.data?.providers)) {
+          throw Error('Could not fetch authentication providers')
+        }
+        const providers = response.data.providers
+        context.commit(AppAuthenticationMutation.SET_PROVIDERS, mapProviders(providers))
+      } else {
+        throw Error('Authentication URI is not set')
+      }
     }
   }
 }
diff --git a/src/util/stringFormatting.ts b/src/util/stringFormatting.ts
new file mode 100644
index 0000000..75d7a78
--- /dev/null
+++ b/src/util/stringFormatting.ts
@@ -0,0 +1,7 @@
+export const capitaliseFirstLetter = (sentence: string): string => {
+  return sentence.charAt(0).toUpperCase() + sentence.slice(1)
+}
+
+export const camelCaseToPascalCaseWithSpaces = (sentence: string): string => {
+  return capitaliseFirstLetter(sentence.replace(/[A-Z]/g, (capturedString: string) => ` ${capturedString}`))
+}
diff --git a/translations b/translations
index 6091c0c..e4b2816 160000
--- a/translations
+++ b/translations
@@ -1 +1 @@
-Subproject commit 6091c0cec64d81ef5867d841c056df62c9a4fc34
+Subproject commit e4b28169158c3a2719aeb24654b06e8cca8aeb5a