diff --git a/index.html b/index.html
index a888544..0c3bcd2 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>New Quest - Play</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
index bdc2a8b..68831d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,8 @@
         "eslint-plugin-vue": "^9.17.0",
         "jsdom": "^24.0.0",
         "npm-run-all2": "^6.1.2",
+        "phaser": "^3.80.1",
+        "phavuer": "^0.15.6",
         "prettier": "^3.0.3",
         "typescript": "~5.4.0",
         "vite": "^5.1.6",
@@ -3162,6 +3164,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true
+    },
     "node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -4514,6 +4522,25 @@
       "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
       "dev": true
     },
+    "node_modules/phaser": {
+      "version": "3.80.1",
+      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.80.1.tgz",
+      "integrity": "sha512-VQGAWoDOkEpAWYkI+PUADv5Ql+SM0xpLuAMBJHz9tBcOLqjJ2wd8bUhxJgOqclQlLTg97NmMd9MhS75w16x1Cw==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^5.0.1"
+      }
+    },
+    "node_modules/phavuer": {
+      "version": "0.15.6",
+      "resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.15.6.tgz",
+      "integrity": "sha512-/eSRACJVrf3NwYw55fpokZzm6kFBCOiKdV/CAl0grjdlENRFhR0vAS9LAU8mcLGNPdqkQMzUY8eC7y8BfJ5J+A==",
+      "dev": true,
+      "peerDependencies": {
+        "phaser": "^3.70.0",
+        "vue": "^3.3.13"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
diff --git a/package.json b/package.json
index 264967b..b7b9a80 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
+    "phaser": "^3.80.1",
+    "phavuer": "^0.15.6",
     "prettier": "^3.0.3",
     "typescript": "~5.4.0",
     "vite": "^5.1.6",
diff --git a/public/assets/tilesets/iso-64x64-outside.png b/public/assets/tilesets/iso-64x64-outside.png
new file mode 100644
index 0000000..fee2ac7
Binary files /dev/null and b/public/assets/tilesets/iso-64x64-outside.png differ
diff --git a/src/App.vue b/src/App.vue
index 6caf733..254181b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,26 @@
 <script setup lang="ts">
+import Phaser from 'phaser';
+import { Game, Scene, Rectangle } from 'phavuer'
+import Example from './scenes/mapScene'
+
+const gameConfig = {
+  width: '100%',
+  height: '100%',
+  pixelArt: true,
+  type: Phaser.AUTO,
+  scene: Example
+}
+
+// isometric
+
 </script>
 
 <template>
-
+  <Game :config="gameConfig">
+    <Scene name="MainScene">
+      <Rectangle :x="100" :y="100" :width="100" :height="100" :fillColor="0xAAAAAA" />
+    </Scene>
+  </Game>
 </template>
 
 <style scoped>
diff --git a/src/scenes/mapScene.js b/src/scenes/mapScene.js
new file mode 100644
index 0000000..32a69a6
--- /dev/null
+++ b/src/scenes/mapScene.js
@@ -0,0 +1,51 @@
+import Phaser from 'phaser';
+
+class Example extends Phaser.Scene
+{
+  constructor () {
+    super();
+  }
+
+  preload () {
+    this.load.image('tiles', '/assets/tilesets/iso-64x64-outside.png');
+  }
+
+  create () {
+    const mapData = new Phaser.Tilemaps.MapData({
+      width: 10,
+      height: 10,
+      tileWidth: 64,
+      tileHeight: 32,
+      orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+      format: Phaser.Tilemaps.Formats.ARRAY_2D
+    });
+
+    const map = new Phaser.Tilemaps.Tilemap(this, mapData);
+    const tileset = map.addTilesetImage('iso-64x64-outside', 'tiles');
+    const layer = map.createBlankLayer('layer', tileset, 350, 200);
+
+    const data = [
+      [ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
+      [ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
+      [ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
+      [ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
+      [ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
+      [ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
+      [ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
+      [ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
+      [ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
+      [ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ]
+    ];
+
+    let y = 0;
+
+    data.forEach(row => {
+      row.forEach((tile, x) => {
+        layer.putTileAt(tile, x, y);
+      });
+      y++;
+    });
+  }
+}
+
+export default Example;
\ No newline at end of file
