diff --git a/kifu/kifu-pwa/src/components/Board.ts b/kifu/kifu-pwa/src/components/Board.ts
new file mode 100644
index 0000000..ced024a
--- /dev/null
+++ b/kifu/kifu-pwa/src/components/Board.ts
@@ -0,0 +1,22 @@
+export class GoBoard extends HTMLCanvasElement {
+  static get observedAttributes() {
+    return [];
+  }
+
+  constructor() {
+    super();
+
+    console.log("Go Board constructor");
+  }
+
+  connectedCallback() {
+    console.log("connected callback");
+    const ctx = this.getContext("2d");
+    if (!ctx) {
+      alert("could not get the canvas context");
+      return;
+    }
+    ctx.fillStyle = "green";
+    ctx.fillRect(10, 10, 150, 150);
+  }
+}
diff --git a/kifu/kifu-pwa/src/converter.css b/kifu/kifu-pwa/src/converter.css
deleted file mode 100644
index 401fef8..0000000
--- a/kifu/kifu-pwa/src/converter.css
+++ /dev/null
@@ -1,38 +0,0 @@
-html {
-  background: rgb(243, 243, 243);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15pt;
-}
-
-html, body {
-  height: 100%;
-  margin: 0;
-}
-
-body {
-  display: grid;
-  place-items: center;
-}
-
-#converter {
-  width: 15rem;
-  padding: 2rem;
-  border-radius: .5rem;
-  box-shadow: 0 0 2rem 0 #0001;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-#converter input, #converter select {
-  font-family: inherit;
-  font-size: inherit;
-  margin-block-end: 1rem;
-  text-align: center;
-  width: 10rem;
-}
-
-#converter #output-temp {
-  font-size: 2rem;
-  font-weight: bold;
-}
diff --git a/kifu/kifu-pwa/src/index.html b/kifu/kifu-pwa/src/index.html
index b04b82d..eabcd1b 100644
--- a/kifu/kifu-pwa/src/index.html
+++ b/kifu/kifu-pwa/src/index.html
@@ -3,29 +3,13 @@
     <head>
         <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json">
-        <link rel="stylesheet" href="converter.css">
-        <title>Temperature converter</title>
+        <link rel="stylesheet" href="kifu.css">
+        <title>Kifu</title>
         <script type="module" src="kifu-bundle.js"></script>
     </head>
     <body>
-        <h1> Temperature Converter </h1>
-        <form id="converter">
-            <label for="input-temp">temperature</label>
-            <input type="text" id="input-temp" name="input-temp" value="20" />
-            <label for="input-unit">from</label>
-            <select id="input-unit" name="input-unit">
-                <option value="c" selected>Celsius</option>
-                <option value="f">Fahrenheit</option>
-                <option value="k">Kelvin</option>
-            </select>
-            <label for="output-unit">to</label>
-            <select id="output-unit" name="output-unit">
-                <option value="c">Celsius</option>
-                <option value="f" selected>Fahrenheit</option>
-                <option value="k">Kelvin</option>
-            </select>
-            <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
-        </form>
+        <h1> Kifu </h1>
+        <div id="root"></div>
         <script>
             if('serviceWorker' in navigator) {
                 navigator.serviceWorker.register('/sw.js', { scope: '/' });
diff --git a/kifu/kifu-pwa/src/kifu.css b/kifu/kifu-pwa/src/kifu.css
new file mode 100644
index 0000000..892f5d1
--- /dev/null
+++ b/kifu/kifu-pwa/src/kifu.css
@@ -0,0 +1,15 @@
+html {
+  background: rgb(243, 243, 243);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15pt;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: grid;
+}
+
diff --git a/kifu/kifu-pwa/src/main.ts b/kifu/kifu-pwa/src/main.ts
index 3332ebb..26fb1c7 100644
--- a/kifu/kifu-pwa/src/main.ts
+++ b/kifu/kifu-pwa/src/main.ts
@@ -1,9 +1,28 @@
+import { GoBoard } from "./components/Board";
 import { CoreApi, initCore } from "./coreApi";
 
+window.customElements.define("go-board", GoBoard, { extends: "canvas" });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "go-board": GoBoard;
+  }
+}
+
 const main = async () => {
   let coreApi = await initCore();
   let response = await coreApi.playingField();
   console.log("playing field response: ", response);
+
+  const root = document.getElementById("root");
+  if (!root) {
+    alert("could not retrieve the app root container");
+    return;
+  }
+
+  const board = document.createElement("canvas", { is: "go-board" });
+  console.log("constructed board: ", board);
+  root.appendChild(board);
 };
 
 main();
diff --git a/kifu/kifu-pwa/manifest.json b/kifu/kifu-pwa/src/manifest.json
similarity index 100%
rename from kifu/kifu-pwa/manifest.json
rename to kifu/kifu-pwa/src/manifest.json
diff --git a/kifu/kifu-pwa/webpack.config.js b/kifu/kifu-pwa/webpack.config.js
index 63f2c9c..58106cb 100644
--- a/kifu/kifu-pwa/webpack.config.js
+++ b/kifu/kifu-pwa/webpack.config.js
@@ -16,7 +16,8 @@ module.exports = {
         new CopyWebpackPlugin({
             patterns: [
                 { from: "src/index.html" },
-                { from: "src/converter.css" }
+                { from: "src/kifu.css" },
+                { from: "src/manifest.json" }
             ]
         })
     ],
