diff --git a/src/assets/images/backgrounds/bg-1.png b/src/assets/images/backgrounds/bg-1.png
new file mode 100644
index 0000000..d039071
Binary files /dev/null and b/src/assets/images/backgrounds/bg-1.png differ
diff --git a/src/assets/images/backgrounds/wood-1.jpg b/src/assets/images/backgrounds/wood-1.jpg
new file mode 100644
index 0000000..7683987
Binary files /dev/null and b/src/assets/images/backgrounds/wood-1.jpg differ
diff --git a/src/common/constants.ts b/src/common/constants.ts
new file mode 100644
index 0000000..13fb737
--- /dev/null
+++ b/src/common/constants.ts
@@ -0,0 +1,7 @@
+export const defaultContainerOptions = {
+  width: 100,
+  height: 100,
+  x: 0,
+  y: 0,
+  visible: true
+}
diff --git a/src/utilities/helpers.ts b/src/common/helpers.ts
similarity index 80%
rename from src/utilities/helpers.ts
rename to src/common/helpers.ts
index a98b4b5..d7a98b5 100644
--- a/src/utilities/helpers.ts
+++ b/src/common/helpers.ts
@@ -1,5 +1,6 @@
 import { Graphics, Container } from 'pixi.js'
-import type { TileDto } from './interfaces'
+import type { ContainerOptions, TileDto } from './interfaces'
+import { defaultContainerOptions } from './constants'
 
 export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
   const graphics = new Graphics()
@@ -12,24 +13,6 @@ export function getColorBackground(container: Container, colorName: string, alph
   return graphics
 }
 
-interface ContainerOptions {
-  width?: number
-  height?: number
-  x?: number
-  y?: number
-  color?: number
-  visible?: boolean
-  parent?: Container
-}
-
-const defaultContainerOptions = {
-  width: 100,
-  height: 100,
-  x: 0,
-  y: 0,
-  visible: true
-}
-
 export function createContainer(options: ContainerOptions) {
   const opts = { ...defaultContainerOptions, ...options }
   const container = new Container()
diff --git a/src/utilities/interfaces.ts b/src/common/interfaces.ts
similarity index 85%
rename from src/utilities/interfaces.ts
rename to src/common/interfaces.ts
index 96dde23..e37d371 100644
--- a/src/utilities/interfaces.ts
+++ b/src/common/interfaces.ts
@@ -1,3 +1,5 @@
+import type { Container } from 'pixi.js'
+
 export interface PlayerDto {
   id: string
   name: string
@@ -63,3 +65,13 @@ export interface Movement {
   x?: number
   y?: number
 }
+
+export interface ContainerOptions {
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  color?: number
+  visible?: boolean
+  parent?: Container
+}
diff --git a/src/components/GameComponent.vue b/src/components/GameComponent.vue
index 48ecbe4..81ca477 100644
--- a/src/components/GameComponent.vue
+++ b/src/components/GameComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, PlayerState } from '@/common/interfaces'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { Game } from '@/utilities/Game'
+import { Game } from '@/game/Game'
 import { useGameStore } from '@/stores/game'
 
 const emit = defineEmits(['move'])
diff --git a/src/utilities/Board.ts b/src/game/Board.ts
similarity index 95%
rename from src/utilities/Board.ts
rename to src/game/Board.ts
index 12a1901..e2a7967 100644
--- a/src/utilities/Board.ts
+++ b/src/game/Board.ts
@@ -1,10 +1,19 @@
-import { Application, Container, EventEmitter, Graphics, Text, Ticker } from 'pixi.js'
-import { Scale, type ScaleFunction } from './scale'
-import type { GameState, Movement, TileDto } from './interfaces'
-import { Tile } from './Tile'
-import { DIRECTIONS, createContainer, isTilePair, isTileVertical } from './helpers'
-import { createText } from './fonts'
-import { Dot } from './Dot'
+import {
+  Application,
+  Assets,
+  Container,
+  EventEmitter,
+  Graphics,
+  Sprite,
+  Text,
+  Ticker
+} from 'pixi.js'
+import { Scale, type ScaleFunction } from '@/game/utilities/scale'
+import type { GameState, Movement, TileDto } from '@/common/interfaces'
+import { Tile } from '@/game/Tile'
+import { DIRECTIONS, createContainer, isTilePair } from '@/common/helpers'
+import { createText } from '@/game/utilities/fonts'
+import { Dot } from '@/game/Dot'
 
 export class Board extends EventEmitter {
   private _scale: number = 1
@@ -53,10 +62,15 @@ export class Board extends EventEmitter {
       parent: app.stage
     })
 
+    const background = new Sprite(Assets.get('bg-1'))
+    background.width = this.width
+    background.height = this.height
+    this.container.addChild(background)
+
     this.initialContainer = createContainer({
       width: this.width,
       height: this.height,
-      color: 0x1e2f23,
+      // color: 0x1e2f23,
       visible: false,
       parent: this.container
     })
@@ -64,7 +78,7 @@ export class Board extends EventEmitter {
     this.tilesContainer = createContainer({
       width: this.width,
       height: this.height,
-      color: 0x1e2f23,
+      // color: 0x1e2f23,
       parent: this.container
     })
 
@@ -147,7 +161,7 @@ export class Board extends EventEmitter {
     if (lastMove === null) {
       return
     }
-
+    console.log('lastMove :>> ', lastMove)
     if (
       lastMove !== null &&
       lastMove.tile !== undefined &&
diff --git a/src/utilities/Dot.ts b/src/game/Dot.ts
similarity index 85%
rename from src/utilities/Dot.ts
rename to src/game/Dot.ts
index 5434f37..38d0aea 100644
--- a/src/utilities/Dot.ts
+++ b/src/game/Dot.ts
@@ -1,4 +1,4 @@
-import { Graphics, Texture, Ticker } from 'pixi.js'
+import { Texture, Ticker } from 'pixi.js'
 import { SpriteBase } from './SpriteBase'
 
 export class Dot extends SpriteBase {
diff --git a/src/utilities/Game.ts b/src/game/Game.ts
similarity index 93%
rename from src/utilities/Game.ts
rename to src/game/Game.ts
index d56afcb..bb24c54 100644
--- a/src/utilities/Game.ts
+++ b/src/game/Game.ts
@@ -1,9 +1,9 @@
 import { Application, Assets } from 'pixi.js'
-import { Board } from './Board'
-import Hand from './Hand'
-import { assets } from '@/utilities/assets'
-import type { Movement, TileDto } from './interfaces'
-import type { Tile } from './Tile'
+import { Board } from '@/game/Board'
+import { assets } from '@/game/utilities/assets'
+import { Tile } from '@/game/Tile'
+import { Hand } from '@/game/Hand'
+import type { Movement, TileDto } from '@/common/interfaces'
 
 export class Game {
   public board!: Board
diff --git a/src/utilities/Hand.ts b/src/game/Hand.ts
similarity index 96%
rename from src/utilities/Hand.ts
rename to src/game/Hand.ts
index 33cfd4b..420b786 100644
--- a/src/utilities/Hand.ts
+++ b/src/game/Hand.ts
@@ -8,11 +8,11 @@ import {
   Texture,
   Ticker
 } from 'pixi.js'
-import { Tile } from './Tile'
-import type { PlayerState, TileDto } from './interfaces'
+import { Tile } from '@/game/Tile'
+import type { PlayerState, TileDto } from '@/common/interfaces'
 import { GlowFilter } from 'pixi-filters'
 
-export default class Hand extends EventEmitter {
+export class Hand extends EventEmitter {
   tiles: Tile[] = []
   container: Container = new Container()
   buttonPassContainer: Container = new Container()
@@ -168,7 +168,7 @@ export default class Hand extends EventEmitter {
   }
 
   private createTiles(playerState: PlayerState) {
-    return playerState.hand.map((tile, i) => {
+    return playerState.hand.map((tile) => {
       const newTile: Tile = new Tile(tile.id, this.ticker, tile.pips, this.scale)
       newTile.alpha = 0.7
       newTile.anchor = 0.5
diff --git a/src/utilities/SpriteBase.ts b/src/game/SpriteBase.ts
similarity index 100%
rename from src/utilities/SpriteBase.ts
rename to src/game/SpriteBase.ts
diff --git a/src/utilities/Tile.ts b/src/game/Tile.ts
similarity index 97%
rename from src/utilities/Tile.ts
rename to src/game/Tile.ts
index 7b23ae4..1e6acc3 100644
--- a/src/utilities/Tile.ts
+++ b/src/game/Tile.ts
@@ -1,5 +1,5 @@
 import { Texture, Ticker } from 'pixi.js'
-import { SpriteBase } from './SpriteBase'
+import { SpriteBase } from '@/game/SpriteBase'
 
 export class Tile extends SpriteBase {
   selected: boolean = false
diff --git a/src/utilities/assets.ts b/src/game/utilities/assets.ts
similarity index 92%
rename from src/utilities/assets.ts
rename to src/game/utilities/assets.ts
index cf350dc..95a59d9 100644
--- a/src/utilities/assets.ts
+++ b/src/game/utilities/assets.ts
@@ -28,6 +28,8 @@ import tile6_4 from '@/assets/images/tiles/6-4.png'
 import tile6_5 from '@/assets/images/tiles/6-5.png'
 import tile6_6 from '@/assets/images/tiles/6-6.png'
 import dot from '@/assets/images/circle.png'
+import bgWood_1 from '@/assets/images/backgrounds/wood-1.jpg'
+import bg_1 from '@/assets/images/backgrounds/bg-1.png'
 
 export const assets = [
   { alias: 'tile-back', src: tileBack },
@@ -59,5 +61,7 @@ export const assets = [
   { alias: 'tile-6_4', src: tile6_4 },
   { alias: 'tile-6_5', src: tile6_5 },
   { alias: 'tile-6_6', src: tile6_6 },
-  { alias: 'dot', src: dot }
+  { alias: 'dot', src: dot },
+  { alias: 'bg-wood-1', src: bgWood_1 },
+  { alias: 'bg-1', src: bg_1 }
 ]
diff --git a/src/utilities/fonts.ts b/src/game/utilities/fonts.ts
similarity index 100%
rename from src/utilities/fonts.ts
rename to src/game/utilities/fonts.ts
diff --git a/src/utilities/mocks.ts b/src/game/utilities/mocks.ts
similarity index 95%
rename from src/utilities/mocks.ts
rename to src/game/utilities/mocks.ts
index 0dc56c5..35634c2 100644
--- a/src/utilities/mocks.ts
+++ b/src/game/utilities/mocks.ts
@@ -1,7 +1,7 @@
-import { Tile } from './Tile'
-import type { GameState, Movement } from './interfaces'
-import type { Game } from './Game'
-import { wait } from './helpers'
+import { Tile } from '../Tile'
+import type { GameState, Movement } from '../../common/interfaces'
+import type { Game } from '../Game'
+import { wait } from '../../common/helpers'
 
 export const playerState = {
   id: '6fddcf4f-eaa9-4c87-a599-2af944477091',
diff --git a/src/utilities/scale.ts b/src/game/utilities/scale.ts
similarity index 100%
rename from src/utilities/scale.ts
rename to src/game/utilities/scale.ts
diff --git a/src/managers/SocketIoEventManager.ts b/src/managers/SocketIoEventManager.ts
index 33be33c..3af7688 100644
--- a/src/managers/SocketIoEventManager.ts
+++ b/src/managers/SocketIoEventManager.ts
@@ -1,6 +1,6 @@
 import { useGameStore } from '@/stores/game'
-import { wait } from '@/utilities/helpers'
-import type { GameSessionState } from '@/utilities/interfaces'
+import { wait } from '@/common/helpers'
+import type { GameSessionState } from '@/common/interfaces'
 import { storeToRefs } from 'pinia'
 
 export class SocketIoEventManager {
diff --git a/src/services/SocketIoClientService.ts b/src/services/SocketIoClientService.ts
index f70e22b..5a57534 100644
--- a/src/services/SocketIoClientService.ts
+++ b/src/services/SocketIoClientService.ts
@@ -1,4 +1,4 @@
-import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, PlayerState } from '@/common/interfaces'
 import { io, Socket } from 'socket.io-client'
 import { SocketIoEventManager } from '@/managers/SocketIoEventManager'
 
@@ -56,6 +56,11 @@ export class SocketIoClientService {
     this.socket.on('chooseTile', async (data: any, callback: any) => {
       callback(await this.gameEventManager.handleCanSelectTileEvent())
     })
+
+    this.socket.on('ping', () => {
+      console.log('Ping received from server')
+      this.socket.emit('pong') // Send pong response
+    })
   }
 
   sendMessage(event: string, data: any): void {
diff --git a/src/stores/game.ts b/src/stores/game.ts
index 33b1907..f9c6c9b 100644
--- a/src/stores/game.ts
+++ b/src/stores/game.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { GameSessionState, GameState, Movement, PlayerState } from '@/utilities/interfaces'
+import type { GameSessionState, GameState, Movement, PlayerState } from '@/common/interfaces'
 
 export const useGameStore = defineStore('game', () => {
   const sessionState = ref<GameSessionState | undefined>(undefined)
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index 5f806a4..a90df0a 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -70,10 +70,12 @@ async function startSession() {
 
 async function joinSession() {
   if (sessionId.value) {
-    await socketService.sendMessageWithAck('joinSession', {
+    const response = await socketService.sendMessageWithAck('joinSession', {
       user: 'pepe',
       sessionId: sessionId.value
     })
+    // sessionId.value = response.sessionId
+    playerId.value = response.playerId
   }
 }
 
@@ -141,7 +143,7 @@ function copySeed() {
             <input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
           </div>
         </div>
-        <div class="grid" v-if="!sessionId">
+        <div class="grid">
           <div class="cell">
             <button class="button" style="width: 200px" @click="joinSession">Join Session</button>
           </div>