diff --git a/public/components/NewGameDialog.vue.js b/public/components/NewGameDialog.vue.js
index 3eb6040..9b7f3ec 100644
--- a/public/components/NewGameDialog.vue.js
+++ b/public/components/NewGameDialog.vue.js
@@ -42,7 +42,7 @@ export default {
       </tr>
       <tr>
         <td colspan="2">
-          <button class="btn" :disabled="!canStartNewGame" :class="" @click="onNewGameClick">Start new game</button>
+          <button class="btn" :disabled="!canStartNewGame" @click="onNewGameClick">Start new game</button>
         </td>
       </tr>
     </table>
diff --git a/public/index.html b/public/index.html
index 2dc4d18..f145b55 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,14 +1,15 @@
 <html>
 <head>
   <link rel="stylesheet" href="/style.css" />
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+  <script src="https://unpkg.com/vue@3.0.11"></script>
   <title>🧩 jigsaw.hyottoko.club</title>
 </head>
 <body>
   <div id="app"></div>
   <script type="module">
   import Index from "/views/Index.vue.js"
-  new Vue({ el: '#app', render: (h) => h(Index) })
+  const app = Vue.createApp(Index)
+  app.mount('#app')
   </script>
 </body>
 </html>
diff --git a/public/views/Index.vue.js b/public/views/Index.vue.js
index 3999d93..cf7e7ac 100644
--- a/public/views/Index.vue.js
+++ b/public/views/Index.vue.js
@@ -9,28 +9,34 @@ export default {
     GameTeaser,
     NewGameDialog,
   },
+  // TODO: use vue router
   template: `
 <div id="app">
-  <span class="btn" @click="showNewGameDialog = !showNewGameDialog">New game</span>
-  <new-game-dialog
-    v-if="showNewGameDialog"
+  <ul class="nav">
+    <li><span class="btn" @click="view = 'index'">Home</span></li>
+    <li><span class="btn" @click="view = 'new-game'">New game</span></li>
+  </ul>
+
+  <new-game-dialog v-if="view === 'new-game'"
     :images="images"
     @newGame="onNewGame"
     />
 
-  <h1>Running games</h1>
-  <div class="game-teaser-wrap" v-for="g in gamesRunning">
-    <game-teaser :game="g" />
-  </div>
+  <div v-if="view === 'index'">
+    <h1>Running games</h1>
+    <div class="game-teaser-wrap" v-for="g in gamesRunning">
+      <game-teaser :game="g" />
+    </div>
 
-  <h1>Finished games</h1>
-  <div class="game-teaser-wrap" v-for="g in gamesFinished">
-    <game-teaser :game="g" />
+    <h1>Finished games</h1>
+    <div class="game-teaser-wrap" v-for="g in gamesFinished">
+      <game-teaser :game="g" />
+    </div>
   </div>
 </div>`,
   data() {
     return {
-      showNewGameDialog: false,
+      view: 'index',
 
       gamesRunning: [],
       gamesFinished: [],
diff --git a/templates/game.html.twig b/templates/game.html.twig
index 1e948fd..b4b58f7 100644
--- a/templates/game.html.twig
+++ b/templates/game.html.twig
@@ -1,7 +1,7 @@
 <html>
 <head>
   <link rel="stylesheet" href="/style.css" />
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+  <script src="https://unpkg.com/vue@3.0.11"></script>
   <style type="text/css">
   html,
   body {
diff --git a/templates/replay.html.twig b/templates/replay.html.twig
index 3ff4650..cc2fcc2 100644
--- a/templates/replay.html.twig
+++ b/templates/replay.html.twig
@@ -1,7 +1,7 @@
 <html>
 <head>
   <link rel="stylesheet" href="/style.css" />
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
+  <script src="https://unpkg.com/vue@3.0.11"></script>
   <style type="text/css">
   html,
   body {
