diff --git a/BackEnd/src/controller/GameController.class.php b/BackEnd/src/controller/GameController.class.php
index 0037773726248effc7253b389c8e413be1d3460e..dd3a605135354ebb70733f55531e6347235c5e33 100644
--- a/BackEnd/src/controller/GameController.class.php
+++ b/BackEnd/src/controller/GameController.class.php
@@ -64,6 +64,7 @@ class GameController extends Controller
 
     /**
     * (GET) Get a specific game in Game table based on id
+    * TODO : check if user is in the game
     *
     * @return    Response
     */
diff --git a/frontend/src/components/Tile.vue b/frontend/src/components/Tile.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5434c081543a54dbbb06e47f59f14801cbee8a7
--- /dev/null
+++ b/frontend/src/components/Tile.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="hello">
+        <h1>{{ id }}</h1>
+  <button class="tile-symbol">
+    <img :src="this.background" :width="this.width" :height="this.height"/>
+    <img :src="this.svg" :width="this.width" :height="this.height"/>
+  </button>
+  </div>
+</template>
+
+<script>
+import Tile from '@/model/Tile.js'
+
+export default {
+  props: {
+    id: Number,
+    width: { type: [Number, String], default: 80 },
+    height: {type: [Number, String], default: 80 }
+  },
+  data(){ //data must be a function 
+    return{
+      tile: null, //our tile object
+      svg: null,
+    }
+  },
+  mounted(){ //hook on mounted, we init the object. It could have been done before.
+  console.log(typeof(this.id));
+    this.tile = new Tile(this.id);
+    this.background = require("@/assets/img/mahjong-tiles/Black/Front.svg");
+    this.svg = require("@/assets/img/mahjong-tiles/Black/"+ this.tile.getSVG());
+    console.log(this.svg);
+  }
+}
+</script>
+
+<style>
+.tile-symbol{
+    border-radius: 10px;
+    background: transparent;
+    border: none;
+}
+</style>
diff --git a/frontend/src/model/Combination.js b/frontend/src/model/Combination.js
new file mode 100644
index 0000000000000000000000000000000000000000..66daa8311d11c7e674a719a0d2799b20501eb43e
--- /dev/null
+++ b/frontend/src/model/Combination.js
@@ -0,0 +1,22 @@
+//import Tile from '@/model/Tile.js'
+import Tile from '../model/Tile.js'
+const COMBINATION_NAME = {
+    "0": "Chow",
+    "1": "Pung",
+    "2": "Kong"
+    };
+
+//export default 
+class Combination {
+    constructor(tiles) {
+        this.tiles = tiles;
+    }
+
+    getCombinationName(tiles){
+        return 'pouet';
+    }
+
+
+}
+test = new Combination(1);
+console.log(test);
\ No newline at end of file
diff --git a/frontend/src/model/Hand.js b/frontend/src/model/Hand.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c3d13aa530c868a7548996e29cfa8f21df2be2f
--- /dev/null
+++ b/frontend/src/model/Hand.js
@@ -0,0 +1,8 @@
+import Tile from '@/model/Tile.js'
+
+export default class Hand {
+    constructor() {
+        this.tiles_left = [];
+        this.claimed =[];
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/model/Tile.js b/frontend/src/model/Tile.js
index 5f3089836b508ead3889a6666adacf949a499aa4..94acde1906a370f02279850edc11fa7f596a330d 100644
--- a/frontend/src/model/Tile.js
+++ b/frontend/src/model/Tile.js
@@ -126,7 +126,7 @@ export default class Tile {
         return TILE_NAMES[this.id];
     }
 
-    getImage(){
+    getSVG(){
         return TILE_GLYPHS[this.id];
     }
 
@@ -146,6 +146,4 @@ export default class Tile {
             return 'Unknown';
         }
     }
-}
-const test = new Tile(26);
-console.log(test.getFamily());
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index ec31d669f85fe9d03fec4b54ad20586108a558f7..5f88997c07d8bcc491992263c4506b3d646f46ee 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -22,7 +22,13 @@ const routes = [
     path: '/lobby',
     name: 'Lobby',
     component: () => import('../views/Lobby.vue')
-  },{
+  },
+  {
+    path: '/betaparty',
+    name: 'Betaparty',
+    component: () => import('../views/Betaparty.vue')
+  },
+  {
     path: '/register',
     name: 'Register',
     component: () => import('../views/Register.vue')
diff --git a/frontend/src/views/Betaparty.vue b/frontend/src/views/Betaparty.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46c4731f929ce2290eb404454079cdf89930ef61
--- /dev/null
+++ b/frontend/src/views/Betaparty.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="about">
+    <h1>This is minimal page</h1>
+    <tile :id="this.id" />
+  </div>
+</template>
+
+<script>
+import Tile from '@/components/Tile.vue'
+export default {
+    name: 'Betaparty',
+    components: {
+        Tile
+    },
+    data(){ //data must be a function 
+    return{
+        id: 10,
+        }
+    }
+}
+</script>
+
+
+<style>
+</style>
\ No newline at end of file