diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0be9a6e..cb6c088 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,4 +7,4 @@
   "cSpell.words": [
     "Vitesse"
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 56f44ef..b9cd3ef 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { isDark } from '/~/logics'
+
+const { t, availableLocales, locale } = useI18n()
+
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
 <template>
   <nav class="text-xl mt-6">
     <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
@@ -22,18 +35,3 @@
     </a>
   </nav>
 </template>
-
-<script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-import { isDark } from '/~/logics'
-
-const i18n = useI18n()
-
-const toggleLocales = () => {
-  // change to some real logic
-  const locales = i18n.availableLocales
-  i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
-}
-
-const t = i18n.t
-</script>
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
index 49a8bfd..e346b6b 100755
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -1,11 +1,11 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div>
     {{ t('not-found') }}
   </div>
 </template>
-
-<script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>
diff --git a/src/pages/hi/[name].vue b/src/pages/hi/[name].vue
index e245d21..e315994 100644
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    require: true,
+  },
+})
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
 
 <template>
   <div>
@@ -5,7 +20,7 @@
       <carbon-pedestrian class="inline-block" />
     </p>
     <p>
-      {{ t('intro.hi', {name}) }}
+      {{ t('intro.hi', { name: props.name }) }}
     </p>
     <p class="text-sm opacity-50">
       <em>{{ t('intro.dynamic-route') }}</em>
@@ -21,19 +36,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { defineProps } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    require: true,
-  },
-})
-
-const router = useRouter()
-const { t } = useI18n()
-</script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 6084c57..ed590ec 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${name.value}`)
+}
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div>
     <p class="text-4xl">
@@ -37,19 +53,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-const name = ref('')
-
-const router = useRouter()
-const go = () => {
-  if (name.value)
-    router.push(`/hi/${name.value}`)
-}
-
-const { t } = useI18n()
-</script>