diff --git a/src/App.vue b/src/App.vue
index 53d3cc7..3cee915 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -117,10 +117,10 @@
       </v-dialog>
 
       <about-modal :open="modalState.aboutModalOpen" :dismiss="modalActions.closeAboutModal" />
-      <contact-modal :open="modalState.contactModalOpen" :dismiss="modalActions.closeContactModal" />
+      <contact-modal v-model="modalState.contactModalOpen" />
       <getting-started-modal :open="modalState.gettingStartedModalOpen" :dismiss="modalActions.closeGettingStartedModal" />
       <safety-modal v-model="modalState.safetyModalOpen" />
-      <tutorial-modal :open="modalState.tutorialModalOpen" :dismiss="modalActions.closeTutorialModal" />
+      <tutorial-modal v-model:open="modalState.tutorialModalOpen" />
       <ios-version-modal :open="modalState.supportIOSVersionModalOpen" :dismiss="modalActions.closesupportIOSVersionModal" />
       <api-config-modal :open="modalState.apiConfigModalOpen" :dismiss="modalActions.closeApiConfigModal" />
       <!-- alert or modal -->
@@ -133,7 +133,7 @@
     </v-main>
 
   <factory-detail-page />
-  <maintenance-modal :open="maintenanceModalOpen" :dismiss="dismissMaintenanceModal" />
+  <maintenance-modal v-model="maintenanceModalOpen" />
   </v-app>
 </template>
 
@@ -154,13 +154,13 @@ import SafetyModal from '@/components/SafetyModal.vue'
 import IosVersionModal from '@/components/IOSVersionAlertModal.vue'
 import ApiConfigModal from '@/components/ApiConfigModal.vue'
 
-import { MapFactoryController } from './lib/map'
-import { MainMapControllerSymbol } from './symbols'
-import { useModalState } from './lib/hooks'
-import { useAppState } from './lib/appState'
-import { useAlertState } from './lib/useAlert'
+import { MapFactoryController } from '@/lib/map'
+import { MainMapControllerSymbol } from '@/symbols'
+import { useModalState } from '@/lib/hooks'
+import { useAppState } from '@/lib/appState'
+import { useAlertState } from '@/lib/useAlert'
 
-import MaintenanceModal from './components/MaintenanceModal.vue'
+import MaintenanceModal from '@/components/MaintenanceModal.vue'
 
 export default defineComponent({
   name: 'App',
diff --git a/src/components/ContactModal.vue b/src/components/ContactModal.vue
index 6d95c2d..a95e151 100644
--- a/src/components/ContactModal.vue
+++ b/src/components/ContactModal.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="contact-modal-container">
-    <app-modal :open="open" :dismiss="dismiss">
+  <v-dialog v-model="contactModalState" v-bind="$attrs" max-width="350">
+    <div class="contact-modal">
       <div class="page">
         <img width="137" src="/images/cet-logo.png" alt="Citizen of the Earth Taiwan">
 
@@ -15,26 +15,29 @@
           Email: <a href="mailto:cet@cet-taiwan.org">cet@cet-taiwan.org</a><br>
         </p>
       </div>
-    </app-modal>
-  </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script lang="ts">
-import AppModal from '@/components/AppModal.vue'
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
   name: 'ContactModal',
-  components: {
-    AppModal
-  },
   props: {
-    open: {
-      type: Boolean,
-      default: false
-    },
-    dismiss: {
-      type: Function
+    value: {
+      required: true,
+      type: Boolean
+    }
+  },
+  setup (props, context) {
+    const contactModalState = computed({
+      get: () => props.value,
+      set: (value) => context.emit('input', value)
+    })
+
+    return {
+      contactModalState
     }
   }
 })
@@ -44,19 +47,14 @@ export default defineComponent({
 @import '@/styles/page';
 @import '@/styles/variables';
 
-.contact-modal-container .app-modal {
-  top: 25px;
-  max-height: calc(100% - 50px);
-  max-width: calc(100% - 20px);
-  padding-top: 60px;
+.contact-modal {
+  background-color: white;
+  padding: 12px;
+  text-align: center;
 
-  .page {
-    text-align: center;
-
-    h3 {
-      color: $primary-color;
-      line-height: 1.5em;
-    }
+  .page h3 {
+    color: $primary-color;
+    line-height: 1.5em;
   }
 }
 </style>
diff --git a/src/components/MaintenanceModal.vue b/src/components/MaintenanceModal.vue
index 22ed7c6..0312662 100644
--- a/src/components/MaintenanceModal.vue
+++ b/src/components/MaintenanceModal.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="maintenance-modal-container">
-    <app-modal :open="open" :dismiss="dismiss">
+  <v-dialog v-model="maintenanceModalState" v-bind="$attrs" max-width="600">
+    <div class="maintenance-modal">
       <div class="page">
         <h2>🔧【系統維修中！】</h2>
         <div class="icon-section">
@@ -23,27 +23,37 @@
           </app-button>
         </div>
       </div>
-    </app-modal>
-  </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import AppModal from './AppModal.vue'
+import { defineComponent, computed } from 'vue'
 import AppButton from './AppButton.vue'
 import { VIcon } from 'vuetify/lib/components'
 
 export default defineComponent({
   name: 'MaintenanceModal',
-  components: { AppModal, AppButton, VIcon },
+  components: { AppButton, VIcon },
   props: {
-    open: {
-      type: Boolean,
-      required: true
-    },
-    dismiss: {
-      type: Function,
-      required: true
+    value: {
+      required: true,
+      type: Boolean
+    }
+  },
+  setup (props, context) {
+    const maintenanceModalState = computed({
+      get: () => props.value,
+      set: (value) => context.emit('input', value)
+    })
+
+    const dismiss = () => {
+      maintenanceModalState.value = false
+    }
+
+    return {
+      maintenanceModalState,
+      dismiss
     }
   }
 })
@@ -52,48 +62,23 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
-.maintenance-modal-container :deep(.app-modal) {
-  top: 25px;
-  max-height: calc(100% - 50px);
-  max-width: 600px;
-  width: calc(100% - 40px);
+.maintenance-modal {
+  padding: 27px 22px;
+  background-color: white;
 
   .page {
     h2 {
-      color: $primary-color;
+      line-height: normal;
       margin-bottom: 20px;
-      text-align: center;
     }
 
     .icon-section {
-      display: flex;
-      justify-content: center;
+      text-align: center;
       margin-bottom: 16px;
     }
 
     .message-section {
       margin-bottom: 20px;
-
-      .main-message {
-        font-weight: bold;
-        color: #222 !important;
-        margin-bottom: 16px;
-        font-size: 18px;
-      }
-
-      .detail-message {
-        color: #333 !important;
-        font-size: 15px;
-        line-height: 1.8;
-      }
-    }
-
-    .button-section {
-      display: flex;
-      justify-content: center;
-      .app-button {
-        min-width: 120px;
-      }
     }
   }
 }
diff --git a/src/components/SafetyModal.vue b/src/components/SafetyModal.vue
index f388ce8..796bb40 100644
--- a/src/components/SafetyModal.vue
+++ b/src/components/SafetyModal.vue
@@ -94,4 +94,3 @@ export default defineComponent({
   }
 }
 </style>
-G
diff --git a/src/components/TutorialModal.vue b/src/components/TutorialModal.vue
index 7fc9afd..941fb98 100644
--- a/src/components/TutorialModal.vue
+++ b/src/components/TutorialModal.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="tutorial-modal-container">
-    <app-modal :open="open" :dismiss="onDismissClick">
+  <v-dialog v-model="tutorialModalState" v-bind="$attrs" max-width="350">
+    <div class="tutorial-modal">
       <div class="back-button" v-if="isAdd || isUpdate" @click="openHome" data-testid="back-button">
         <span />
         <span />
@@ -9,7 +9,7 @@
 
       <div class="page">
         <div id="tutorial-home" v-show="isHome">
-          <h2>使用說明</h2>
+          <h1 class="mt-3 pb-1 mb-4">使用說明</h1>
 
           <p>
             如果系統無法讀取你的位置，
@@ -21,82 +21,84 @@
         </div>
 
         <div id="tutorial-add-factory" v-show="isAdd">
-
-          <carousel :per-page="1" paginationActiveColor='#6E8501' paginationColor='#e3e3e3' :paginationPadding="5" ref="createCarousel">
-            <slide v-for="(image, index) in addImages" :key="image">
-              <h2>新增違章工廠({{index + 1}}/7)</h2>
-              <img :src="image">
-            </slide>
-          </carousel>
+          <v-carousel v-model="addFactoryCarouselIndex" progress-color='#6E8501' light hide-delimiter-background :height="650" :progress="false">
+            <v-card>
+              <v-carousel-item v-for="(image, index) in addImages" :key="image">
+                <h2>新增違章工廠({{index + 1}}/7)</h2>
+                <img :src="image">
+              </v-carousel-item>
+            </v-card>
+          </v-carousel>
         </div>
 
         <div id="tutorial-update-factory" v-show="isUpdate">
-          <carousel :per-page="1" paginationActiveColor='#6E8501' paginationColor='#e3e3e3' :paginationPadding="5" ref="updateCarousel">
-            <slide v-for="(image, index) in updateImages" :key="image">
-              <h2>補充工廠資訊({{index + 1}}/4)</h2>
-              <img :src="image">
-            </slide>
-          </carousel>
+          <v-carousel v-model="updateFactoryCarouselIndex" progress-color='#6E8501' light hide-delimiter-background :height="620" :progress="false">
+            <v-card>
+              <v-carousel-item v-for="(image, index) in updateImages" :key="image" class="page pa-3">
+                <h2>補充工廠資訊({{index + 1}}/4)</h2>
+                <img :src="image">
+              </v-carousel-item>
+            </v-card>
+          </v-carousel>
         </div>
-
       </div>
-    </app-modal>
-  </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script lang="ts">
-import AppModal from '@/components/AppModal.vue'
-import { defineComponent, ref, computed } from 'vue'
-import { Carousel, Slide } from 'vue-carousel'
+import { defineComponent, ref, computed, watch } from 'vue'
 
 export default defineComponent({
   name: 'TutorialModal',
-  components: {
-    AppModal,
-    Carousel,
-    Slide
-  },
   props: {
-    open: {
-      type: Boolean,
-      default: false
-    },
-    dismiss: {
-      type: Function
+    value: {
+      required: true,
+      type: Boolean
     }
   },
-  setup (props) {
+  setup (props, context) {
     const page = ref('home')
 
     const isHome = computed(() => page.value === 'home')
     const isAdd = computed(() => page.value === 'add')
     const isUpdate = computed(() => page.value === 'update')
 
-    const createCarousel = ref<HTMLElement | null>(null)
-    const updateCarousel = ref<HTMLElement | null>(null)
+    const addFactoryCarouselIndex = ref(0)
+    const resetAddFactoryCarousel = () => { addFactoryCarouselIndex.value = 0 }
+    const updateFactoryCarouselIndex = ref(0)
+    const resetUpdateFactoryCarousel = () => { updateFactoryCarouselIndex.value = 0 }
 
     const openHome = () => { page.value = 'home' }
     const openAdd = () => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-explicit-any
-      (createCarousel.value! as any).goToPage(0)
       page.value = 'add'
     }
     const openUpdate = () => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-explicit-any
-      (updateCarousel.value! as any).goToPage(0)
       page.value = 'update'
     }
 
     const addImages = new Array(7).fill(true).map((_, index) => `/images/tutorial/create-${index + 1}.jpg`)
     const updateImages = new Array(4).fill(true).map((_, index) => `/images/tutorial/update-${index + 1}.jpg`)
 
-    const onDismissClick = () => {
-      openHome()
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      props.dismiss!()
-    }
+    const tutorialModalState = computed({
+      get: () => props.value,
+      set: (value) => context.emit('input', value)
+    })
+
+    watch(tutorialModalState, () => {
+      if (!tutorialModalState.value) {
+        openHome()
+      }
+    })
+    watch(isHome, () => {
+      if (isHome.value) {
+        resetAddFactoryCarousel()
+        resetUpdateFactoryCarousel()
+      }
+    })
 
     return {
+      tutorialModalState,
       isHome,
       isAdd,
       isUpdate,
@@ -105,9 +107,8 @@ export default defineComponent({
       openUpdate,
       addImages,
       updateImages,
-      onDismissClick,
-      createCarousel,
-      updateCarousel
+      addFactoryCarouselIndex,
+      updateFactoryCarouselIndex
     }
   }
 })
@@ -118,41 +119,17 @@ export default defineComponent({
 @import '@/styles/variables';
 @import '@/styles/components/back-button';
 
-.tutorial-modal-container .app-modal {
-  top: 20px;
-  max-height: 100%;
-  max-width: calc(100% - 20px);
-  padding: 70px 45px 35px;
-
-  .page {
-    height: auto;
-
-    img {
-      display: block;
-      margin: 0 auto;
-      max-height: 65vh;
-    }
+.tutorial-modal {
+  background-color: white;
+  padding: 12px;
 
-    h2 {
-      color: $second-color;
-      border: none;
-    }
-
-    #tutorial-home {
-      p {
-        font-weight: bold;
-        margin-top: 2em;
-        margin-bottom: 2em;
-      }
-    }
+  h2 {
+    border: none !important;
+  }
 
-    #tutorial-add-factory, #tutorial-update-factory {
-      h2 {
-        margin-right: 0;
-        text-align: center;
-        color: $primary-color;
-      }
-    }
+  .back-button {
+    margin-top: 8px;
+    margin-bottom: 16px;
   }
 
   .outline-button {
@@ -170,10 +147,9 @@ export default defineComponent({
     }
   }
 
-  .back-button {
-    position: absolute;
-    top: 24px;
-    left: 22px;
+  .v-window__next,
+  .v-window__prev {
+    background-color: rgba(255,255,255,0.9);
   }
 }
 </style>