diff --git a/en/index.html b/en/index.html
index bf0ee09..8e68467 100644
--- a/en/index.html
+++ b/en/index.html
@@ -34,8 +34,8 @@
   <!-- My Style -->
   <link href="../css/style.css" rel="stylesheet">
   <!-- Vue.js -->
-  <!-- 開発版 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+  <!-- 開発版 <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script> -->
+  <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
   <!-- Fuse.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.3.0/fuse.min.js"></script>
   <!-- Html2canvas -->
@@ -258,7 +258,7 @@ <h2 class="subtitle">Free generator of simple featured images and Open Graph ima
                     <template v-for="f in fonts">
                       <div class="column is-4">
                         <a class="box" v-text="f.name" v-bind:style="{ fontFamily: f.fontFamily }"
-                          v-on:click="selectFont(f); fontsModalFlg=false"><br><br><br><br><br></a>
+                          v-on:click="selectFont(f); fontsModalFlg=false"></a>
                       </div>
                     </template>
                   </div>
diff --git a/index.html b/index.html
index 22b5ea0..86343cf 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,8 @@
   <!-- My Style -->
   <link href="css/style.css" rel="stylesheet">
   <!-- Vue.js -->
-  <!-- 開発版 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+  <!-- 開発版 <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script> -->
+  <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
   <!-- Fuse.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.3.0/fuse.min.js"></script>
   <!-- Html2canvas -->
@@ -259,7 +259,7 @@ <h2 class="subtitle">アイキャッチ画像・OGP画像が簡単に作れる
                     <template v-for="f in fonts">
                       <div class="column is-4">
                         <a class="box" v-text="f.name" v-bind:style="{ fontFamily: f.fontFamily }"
-                          v-on:click="selectFont(f); fontsModalFlg=false"><br><br><br><br><br></a>
+                          v-on:click="selectFont(f); fontsModalFlg=false"></a>
                       </div>
                     </template>
                   </div>
diff --git a/js/index.js b/js/index.js
index 90dd8c5..bf4f38b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,25 +1,27 @@
+const { createApp } = Vue;
 import icons from "./icons.js";
 import webgradients from "./webgradients.js";
 import fonts from "./fonts.js";
 
-const app = new Vue({
-  el: "#app",
-  data: {
-    iconsModalFlg: false,
-    gradientsModalFlg: false,
-    fontsModalFlg: false,
-    title: "Eye Catch Maker",
-    title_en: "Featured image maker",
-    icon: "fa fa-eye",
-    color: "to left top, #05FBFF, #1E00FF",
-    width: 780,
-    height: 520,
-    font: fonts[1],
-    keyword: "",
-    isDownloading: false,
-    zoomPercentage: 100,
-    imageData: "",
-    imageName: "",
+const app = createApp({
+  data() {
+    return {
+      iconsModalFlg: false,
+      gradientsModalFlg: false,
+      fontsModalFlg: false,
+      title: "Eye Catch Maker",
+      title_en: "Featured image maker",
+      icon: "fa fa-eye",
+      color: "to left top, #05FBFF, #1E00FF",
+      width: 780,
+      height: 520,
+      font: fonts[1],
+      keyword: "",
+      isDownloading: false,
+      zoomPercentage: 100,
+      imageData: "",
+      imageName: "",
+    };
   },
   mounted() {
     var w = document.getElementById("preview").clientWidth;
@@ -141,3 +143,4 @@ const app = new Vue({
     },
   },
 });
+app.mount("#app");