diff --git a/frontend/pages/auth.vue b/frontend/pages/auth.vue
index d2afa043..7a7ecf0f 100644
--- a/frontend/pages/auth.vue
+++ b/frontend/pages/auth.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app id="inspire">
-    <v-content>
+    <v-main>
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center">
           <v-col cols="12" sm="8" md="4">
@@ -10,7 +10,7 @@
           </v-col>
         </v-row>
       </v-container>
-    </v-content>
+    </v-main>
   </v-app>
 </template>
 
diff --git a/frontend/pages/demo/named-entity-recognition/index.vue b/frontend/pages/demo/named-entity-recognition/index.vue
index 05899eec..d0fb8d45 100644
--- a/frontend/pages/demo/named-entity-recognition/index.vue
+++ b/frontend/pages/demo/named-entity-recognition/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content>
+  <v-main>
     <v-container fluid>
       <v-row justify="center">
         <v-col cols="12" md="9">
@@ -21,7 +21,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>
diff --git a/frontend/pages/demo/sentiment-analysis/index.vue b/frontend/pages/demo/sentiment-analysis/index.vue
index 5bf623a0..91fcb4f6 100644
--- a/frontend/pages/demo/sentiment-analysis/index.vue
+++ b/frontend/pages/demo/sentiment-analysis/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content>
+  <v-main>
     <v-container fluid>
       <v-row justify="center">
         <v-col cols="12" md="9">
@@ -22,7 +22,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>
diff --git a/frontend/pages/demo/text-to-sql/index.vue b/frontend/pages/demo/text-to-sql/index.vue
index 28d09755..cda4ccb3 100644
--- a/frontend/pages/demo/text-to-sql/index.vue
+++ b/frontend/pages/demo/text-to-sql/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content>
+  <v-main>
     <v-container fluid>
       <v-row justify="center">
         <v-col cols="12" md="9">
@@ -23,7 +23,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>
diff --git a/frontend/pages/demo/translation/index.vue b/frontend/pages/demo/translation/index.vue
index 8876c01c..69099bf1 100644
--- a/frontend/pages/demo/translation/index.vue
+++ b/frontend/pages/demo/translation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-content>
+  <v-main>
     <v-container fluid>
       <v-row justify="center">
         <v-col cols="12" md="9">
@@ -23,7 +23,7 @@
         </v-col>
       </v-row>
     </v-container>
-  </v-content>
+  </v-main>
 </template>
 
 <script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index c10c375d..c358e301 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-content>
+  <v-main>
     <the-top-banner />
     <feature-cards />
     <the-bottom-banner />
-  </v-content>
+  </v-main>
 </template>
 
 <script>