diff --git a/cmd/templates/vuetify2-basic/frontend/src/App.vue b/cmd/templates/vuetify2-basic/frontend/src/App.vue
index 6522b31e..2d4a3422 100644
--- a/cmd/templates/vuetify2-basic/frontend/src/App.vue
+++ b/cmd/templates/vuetify2-basic/frontend/src/App.vue
@@ -1,29 +1,29 @@
 <template>
-  <v-app id="inspire" dark>
+  <v-app id="inspire">
     <v-navigation-drawer v-model="drawer" clipped fixed app>
       <v-list dense>
-        <v-list-tile>
-          <v-list-tile-action>
-            <v-icon>dashboard</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title>Dashboard</v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile>
-          <v-list-tile-action>
-            <v-icon>settings</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title>Settings</v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
+        <v-list-item>
+          <v-list-item-icon>
+            <v-icon>mdi-view-dashboard</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Dashboard</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-icon>
+            <v-icon>mdi-settings</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar app fixed clipped-left>
-      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+    <v-app-bar app fixed clipped-left>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
       <v-toolbar-title>Application</v-toolbar-title>
-    </v-toolbar>
+    </v-app-bar>
     <v-content>
       <v-container fluid class="px-0">
         <v-layout justify-center align-center class="px-0">
@@ -38,23 +38,23 @@
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+  import HelloWorld from "./components/HelloWorld.vue"
 
-export default {
-  data: () => ({
-    drawer: false
-  }),
-  components: {
-    HelloWorld
-  },
-  props: {
-    source: String
+  export default {
+    data: () => ({
+      drawer: false
+    }),
+    components: {
+      HelloWorld
+    },
+    props: {
+      source: String
+    }
   }
-};
 </script>
 
 <style>
-.logo {
-  width: 16em;
-}
+  .logo {
+    width: 16em;
+  }
 </style>
\ No newline at end of file
diff --git a/cmd/templates/vuetify2-basic/frontend/src/components/HelloWorld.vue b/cmd/templates/vuetify2-basic/frontend/src/components/HelloWorld.vue
index 28487aa0..84708401 100644
--- a/cmd/templates/vuetify2-basic/frontend/src/components/HelloWorld.vue
+++ b/cmd/templates/vuetify2-basic/frontend/src/components/HelloWorld.vue
@@ -8,7 +8,7 @@
           </v-layout>
           <v-card-actions>
             <v-layout justify-center align-center class="px-0">
-              <v-btn color="blue" dark @click="getMessage">Press Me</v-btn>
+              <v-btn color="blue" @click="getMessage">Press Me</v-btn>
             </v-layout>
           </v-card-actions>
         </v-card>
@@ -22,7 +22,7 @@
           <v-divider></v-divider>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn color="primary" flat @click="dialog = false">Awesome</v-btn>
+            <v-btn color="primary" text @click="dialog = false">Awesome</v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -31,53 +31,55 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      message: " ",
-      raised: true,
-      dialog: false
-    };
-  },
-  methods: {
-    getMessage: function() {
-      var self = this;
-      window.backend.basic().then(result => {
-        self.message = result;
-        self.dialog = true;
-      });
+  export default {
+    data () {
+      return {
+        message: " ",
+        raised: true,
+        dialog: false
+      }
+    },
+    methods: {
+      getMessage: function () {
+        var self = this
+        window.backend.basic().then(result => {
+          self.message = result
+          self.dialog = true
+        })
+      }
     }
   }
-};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1 {
-  margin-top: 2em;
-  position: relative;
-  min-height: 5rem;
-  width: 100%;
-}
-a:hover {
-  font-size: 1.7em;
-  border-color: blue;
-  background-color: blue;
-  color: white;
-  border: 3px solid white;
-  border-radius: 10px;
-  padding: 9px;
-  cursor: pointer;
-  transition: 500ms;
-}
-a {
-  font-size: 1.7em;
-  border-color: white;
-  background-color: #121212;
-  color: white;
-  border: 3px solid white;
-  border-radius: 10px;
-  padding: 9px;
-  cursor: pointer;
-}
+  h1 {
+    margin-top: 2em;
+    position: relative;
+    min-height: 5rem;
+    width: 100%;
+  }
+
+  a:hover {
+    font-size: 1.7em;
+    border-color: blue;
+    background-color: blue;
+    color: white;
+    border: 3px solid white;
+    border-radius: 10px;
+    padding: 9px;
+    cursor: pointer;
+    transition: 500ms;
+  }
+
+  a {
+    font-size: 1.7em;
+    border-color: white;
+    background-color: #121212;
+    color: white;
+    border: 3px solid white;
+    border-radius: 10px;
+    padding: 9px;
+    cursor: pointer;
+  }
 </style>