diff --git a/app.vue b/app.vue
index a495b75..458c945 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,62 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+const cards = reactive<{ [key: string]: any }>({})
+let game = ref<any>({})
+const socket = new WebSocket("ws://127.0.0.1:8765")
+
+const createObject = {
+  "card": (data: any) => {
+    cards[data.uuid] = data
+  },
+  "player": () => { },
+  "game": (data: any) => { game.value = data },
+  "team": () => { }
+} as { [id: string]: (data: Object) => any }
+
+socket.onopen = function (e) {
+  console.log("[open] Connection established");
+};
+
+socket.onclose = function (event) {
+  if (event.wasClean) {
+    console.warn(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
+  } else {
+    // e.g. server process killed or network down
+    // event.code is usually 1006 in this case
+    console.error('[close] Connection died');
+  }
+};
+
+socket.onerror = function (error) {
+  console.error(error);
+};
+
+socket.onmessage = function (event) {
+  const data = JSON.parse(event.data)
+
+
+  if (data.type == "create" && data.data_type == "object") {
+    if (!(data.data.object_type in createObject)) {
+      throw new Error(`Object ${data.data.object_type} couldn't be created`)
+    }
+    createObject[data.data.object_type](data.data)
+  } else {
+    console.log(data.type, data.data_type, data.data);
+  }
+
+  // if (data.type == "context" && data.data_type == "game_context_id" && data.data == "pregame") {
+  //   setTimeout(() => socket.send(JSON.stringify({ type: "ready", data_type: "ready_state", data: true })), 1000)
+  // }
+};
+
+
+async function register(username: string) {
+  socket.send(JSON.stringify({ type: "register", data_type: "username", data: username }))
+}
+</script>
+
 <template>
   <div>
-    <NuxtWelcome />
+    <GameBoard :game="game"></GameBoard>
   </div>
 </template>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
new file mode 100644
index 0000000..cd2d4d4
--- /dev/null
+++ b/components/CardPreview.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps(['data'])
+</script>
+
+<template>
+    <div>
+        {{ data.name }}
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/CardSlot.vue b/components/CardSlot.vue
new file mode 100644
index 0000000..eacec5d
--- /dev/null
+++ b/components/CardSlot.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps(['cards'])
+</script>
+
+<template>
+    <div>
+        <CardPreview v-for="c in cards" :data="c" :key="c.uuid" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
new file mode 100644
index 0000000..ab82bd3
--- /dev/null
+++ b/components/GameBoard.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps(['game'])
+
+</script>
+
+<template>
+    <div>
+        <div>
+            market_amount = {{ props.game.market_stack?.length }}
+            <br>
+            market = {{ props.game.market }}
+            <br>
+            gems = {{ props.game.gem_stack }}
+        </div>
+        <div>
+            players = {{ props.game.players }}
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8851e77..73139af 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true }
+  devtools: { enabled: true },
+  ssr: false
 })