diff --git a/app/components/AppAlert.vue b/app/components/AppAlert.vue
index 31ebba7..2748435 100644
--- a/app/components/AppAlert.vue
+++ b/app/components/AppAlert.vue
@@ -1,74 +1,41 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconCheckCircle from "./icons/IconCheckCircle.vue";
-import IconXCircle from "./icons/IconXCircle.vue";
+<script setup lang="ts">
 import AppModal from "./AppModal.vue";
+import { useModalStore } from "~/store/index";
 
-interface Data {
-  type: "success" | "error";
-  title: string;
-  text: string;
-}
-
-interface Classes {
-  success: boolean;
-  error: boolean;
-}
-
-export default defineComponent({
-  components: {
-    AppModal
-  },
-
-  computed: {
-    data(): Data {
-      return this.$store.state.modal.data;
-    },
-
-    classes(): Classes {
-      return {
-        success: this.data.type === "success",
-        error: this.data.type === "error"
-      };
-    },
-
-    icon() {
-      if (this.data.type === "error") {
-        return IconXCircle;
-      }
-
-      return IconCheckCircle;
-    }
-  },
-
-  methods: {
-    close(): void {
-      this.$store.dispatch("alert/close");
-    }
-  }
-});
+const { state, close } = useModalStore();
 </script>
 
 <template>
   <AppModal name="alert">
     <div
       class="AppAlert"
-      :class="classes"
+      :class="{
+        success: state.data?.type === 'success',
+        error: state.data?.type === 'error'
+      }"
     >
       <div class="box">
         <div class="status">
-          <component
-            :is="icon"
+          <img
+            v-if="state.data?.type === 'success'"
+            src="/img/icons/check-circle.svg"
+            alt="check-circle-icon"
+            class="status-icon"
+          >
+          <img
+            v-else
+            src="/img/icons/x-circle.svg"
+            alt="x-circle-icon"
             class="status-icon"
-          />
+          >
         </div>
 
         <div class="body">
           <p class="title">
-            {{ data.title }}
+            {{ state.data?.title }}
           </p>
           <p class="text">
-            {{ data.text }}
+            {{ state.data?.text }}
           </p>
         </div>
 
diff --git a/app/components/AppDialog.vue b/app/components/AppDialog.vue
index 3c2c355..0869ace 100644
--- a/app/components/AppDialog.vue
+++ b/app/components/AppDialog.vue
@@ -1,20 +1,8 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconPreloaderDark from "./icons/IconPreloaderDark.vue";
+<script setup lang="ts">
 import AppModal from "./AppModal.vue";
+import { useModalStore } from "~/store";
 
-export default defineComponent({
-  components: {
-    IconPreloaderDark,
-    AppModal
-  },
-
-  computed: {
-    title(): string {
-      return this.$store.state.modal.data.title;
-    }
-  }
-});
+const { state } = useModalStore();
 </script>
 
 <template>
@@ -22,11 +10,15 @@ export default defineComponent({
     <div class="AppDialog">
       <div class="box">
         <p class="title">
-          {{ title }}
+          {{ state.data?.title }}
         </p>
 
         <div class="loader">
-          <IconPreloaderDark class="loader-icon" />
+          <img
+            src="/img/icons/preloader-dark.svg"
+            alt="preloader-dark-icon"
+            class="loader-icon"
+          >
         </div>
       </div>
     </div>
diff --git a/app/components/AppModal.vue b/app/components/AppModal.vue
index 841f911..d44156f 100644
--- a/app/components/AppModal.vue
+++ b/app/components/AppModal.vue
@@ -1,24 +1,17 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
+import { useModalStore } from "~/store";
 
-export default defineComponent({
-  props: {
-    name: { type: String, required: true }
-  },
-
-  computed: {
-    show(): boolean {
-      return (this.$store as any).state.modal.name === this.name;
-    }
-  }
-});
+const props = defineProps<{ name: string }>();
+const { state } = useModalStore();
+const isShowed = computed(() => state.value.data?.name === props.name);
 </script>
 
 <template>
   <portal to="modal">
     <transition name="fade">
       <div
-        v-if="show"
+        v-if="isShowed"
         class="AppModal"
       >
         <slot />
diff --git a/app/components/ButtonOutline.vue b/app/components/ButtonOutline.vue
index ee220b8..ca2eb3f 100644
--- a/app/components/ButtonOutline.vue
+++ b/app/components/ButtonOutline.vue
@@ -1,31 +1,27 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import { isExternalLink } from "~/_legacy/support/Url";
 
-export default defineComponent({
-  props: {
-    tag: { type: String, default: "button" },
-    block: { type: Boolean, default: false },
-    icon: { type: Object, default: null },
-    label: { type: String, required: true },
-    to: { type: String, default: null },
-    href: { type: String, default: null }
-  },
-
-  computed: {
-    link(): string | null {
-      return this.href || this.to;
-    },
+const props = withDefaults(defineProps<{
+  label: string;
+  tag?: "button" | "nuxt-link" | "a";
+  block?: boolean;
+  icon?: string | null;
+  to?: string | null;
+  href?: string | null;
+}>(), {
+  tag: "button",
+  block: false,
+  icon: null,
+  to: null,
+  href: null
+});
 
-    isExternalLink(): boolean {
-      return this.link ? isExternalLink(this.link) : false;
-    },
+defineEmits<{ click: [] }>();
 
-    target(): string {
-      return this.isExternalLink ? "_blank" : "_self";
-    }
-  }
-});
+const link = computed(() => props.href || props.to);
+const isExternalLink = computed(() => link.value ? isExternalLink(link.value) : false);
+const target = computed(() => isExternalLink.value ? "_blank" : "_self");
 </script>
 
 <template>
@@ -42,11 +38,12 @@ export default defineComponent({
       :href="href"
       :target="target"
     >
-      <Component
-        :is="icon"
+      <img
         v-if="icon"
+        :src="icon"
+        alt="icon"
         class="icon"
-      />
+      >
       <span class="label">{{ label }}</span>
     </Component>
   </div>
diff --git a/app/components/HamburgerMenu.vue b/app/components/HamburgerMenu.vue
index a847237..cd4d89d 100644
--- a/app/components/HamburgerMenu.vue
+++ b/app/components/HamburgerMenu.vue
@@ -1,19 +1,16 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    active: { type: Boolean, required: true }
-  }
-});
+<script setup lang="ts">
+defineProps<{ active: boolean }>();
+defineEmits<{ click: [] }>();
 </script>
 
 <template>
   <div
+    role="button"
+    tabindex="0"
     class="HamburgerMenu"
     :class="{ active }"
-    role="button"
     @click="$emit('click')"
+    @keydown="$emit('click')"
   >
     <div class="container">
       <div class="top" />
diff --git a/app/components/HomeAbout.vue b/app/components/HomeAbout.vue
index 290a1b6..4272420 100644
--- a/app/components/HomeAbout.vue
+++ b/app/components/HomeAbout.vue
@@ -38,7 +38,7 @@ import StyleMount from "./StyleMount.vue";
             <ButtonOutline
               tag="nuxt-link"
               :block="true"
-              :href="localePath('/about')"
+              :href="$localePath('/about')"
               :label="$t('components.HomeAbout.vuejs-jp')"
             />
           </div>
diff --git a/app/components/HomeCommunications.vue b/app/components/HomeCommunications.vue
index bfd0fbc..52dd1d5 100644
--- a/app/components/HomeCommunications.vue
+++ b/app/components/HomeCommunications.vue
@@ -1,53 +1,44 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconSlack from "./icons/IconSlack.vue";
-import IconVue from "./icons/IconVue.vue";
+<script setup lang="ts">
 import StyleMount from "./StyleMount.vue";
 import ButtonOutline from "./ButtonOutline.vue";
 import ChatStack from "./ChatStack.vue";
-
-export default defineComponent({
-  components: {
-    StyleMount,
-    ButtonOutline,
-    ChatStack
+import { useNuxtApp } from "#app";
+
+const { $i18n: { t } } = useNuxtApp();
+
+const chats = [
+  {
+    direction: "left",
+    avatar: "/img/home/avatar-001.jpg",
+    alt: "Avatar 001",
+    name: "Arisa Miyake",
+    time: "3:12 PM",
+    body: t("components.HomeCommunications.chats.user1")
   },
-
-  data() {
-    const $t = this.$t.bind(this);
-    return {
-      iconSlack: IconSlack,
-      iconVue: IconVue,
-
-      chats: [
-        {
-          direction: "left",
-          avatar: "/img/home/avatar-001.jpg",
-          alt: "Avatar 001",
-          name: "Arisa Miyake",
-          time: "3:12 PM",
-          body: $t("components.HomeCommunications.chats.user1")
-        },
-        {
-          direction: "right",
-          avatar: "/img/home/avatar-002.jpg",
-          alt: "Avatar 002",
-          name: "Kenji Yamadera",
-          time: "3:19 PM",
-          body: $t("components.HomeCommunications.chats.user2")
-        },
-        {
-          direction: "left",
-          avatar: "/img/home/avatar-003.jpg",
-          alt: "Avatar 003",
-          name: "Ai Nakagawa",
-          time: "3:25 PM",
-          body: $t("components.HomeCommunications.chats.user3")
-        }
-      ]
-    };
+  {
+    direction: "right",
+    avatar: "/img/home/avatar-002.jpg",
+    alt: "Avatar 002",
+    name: "Kenji Yamadera",
+    time: "3:19 PM",
+    body: t("components.HomeCommunications.chats.user2")
+  },
+  {
+    direction: "left",
+    avatar: "/img/home/avatar-003.jpg",
+    alt: "Avatar 003",
+    name: "Ai Nakagawa",
+    time: "3:25 PM",
+    body: t("components.HomeCommunications.chats.user3")
   }
-});
+] as const satisfies {
+  direction: "left" | "right";
+  avatar: string;
+  alt: string;
+  name: string;
+  time: string;
+  body: string;
+}[];
 </script>
 
 <template>
@@ -94,7 +85,7 @@ export default defineComponent({
               tag="a"
               :block="true"
               href="https://join.slack.com/t/vuejs-jp/shared_invite/zt-vmg3iysl-~CPGAxFMWwa0Fnu2IqtMdQ"
-              :icon="iconSlack"
+              icon="/img/icons/slack.svg"
               :label="$t('components.HomeCommunications.slack')"
             />
           </div>
@@ -104,7 +95,7 @@ export default defineComponent({
               tag="a"
               :block="true"
               href="https://forum.vuejs.org/c/japanese"
-              :icon="iconVue"
+              icon="/img/icons/vue.svg"
               :label="$t('components.HomeCommunications.forum')"
             />
           </div>
diff --git a/app/components/HomeEvents.vue b/app/components/HomeEvents.vue
index 739d059..e4bb825 100644
--- a/app/components/HomeEvents.vue
+++ b/app/components/HomeEvents.vue
@@ -1,61 +1,52 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconConnpass from "./icons/IconConnpass.vue";
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
 import StyleMount from "./StyleMount.vue";
 import ButtonOutline from "./ButtonOutline.vue";
 import ImageStack from "./ImageStack.vue";
 
-export default defineComponent({
-  components: {
-    StyleMount,
-    ButtonOutline,
-    ImageStack
+const stackImageTo = ref("right");
+const images = [
+  {
+    src: "/img/home/vue-fes-japan-2018-evan-you.jpg",
+    alt: "Evan You at Vue Fes Japan 2018."
   },
-
-  data() {
-    return {
-      iconConnpass: IconConnpass,
-      stackImageTo: "right",
-      images: [
-        {
-          src: "/img/home/vue-fes-japan-2018-evan-you.jpg",
-          alt: "Evan You at Vue Fes Japan 2018."
-        },
-        {
-          src: "/img/home/vue-fes-japan-2018-sarah-drasner.jpg",
-          alt: "Sarah Drasner at Vue Fes Japan 2018."
-        },
-        {
-          src: "/img/home/vue-fes-japan-2018-yoshiya-oki.jpg",
-          alt: "Yoshiya Oki at Vue Fes Japan 2018."
-        },
-        {
-          src: "/img/home/vue-fes-japan-2018-guillaume-chau.jpg",
-          alt: "Guillaume Chau at Vue Fes Japan 2018."
-        },
-        {
-          src: "/img/home/vue-fes-japan-2018-sebastien-chopin.jpg",
-          alt: "Sébastien Chopin at Vue Fes Japan 2018."
-        },
-        {
-          src: "/img/home/vue-fes-japan-2018-katashin.jpg",
-          alt: "Katashin at Vue Fes Japan 2018."
-        }
-      ]
-    };
+  {
+    src: "/img/home/vue-fes-japan-2018-sarah-drasner.jpg",
+    alt: "Sarah Drasner at Vue Fes Japan 2018."
   },
-
-  mounted() {
-    this.refreshImageStackDirection();
-
-    window.addEventListener("resize", this.refreshImageStackDirection);
+  {
+    src: "/img/home/vue-fes-japan-2018-yoshiya-oki.jpg",
+    alt: "Yoshiya Oki at Vue Fes Japan 2018."
   },
-
-  methods: {
-    refreshImageStackDirection(): void {
-      this.stackImageTo = window.innerWidth >= 768 ? "left" : "right";
-    }
+  {
+    src: "/img/home/vue-fes-japan-2018-guillaume-chau.jpg",
+    alt: "Guillaume Chau at Vue Fes Japan 2018."
+  },
+  {
+    src: "/img/home/vue-fes-japan-2018-sebastien-chopin.jpg",
+    alt: "Sébastien Chopin at Vue Fes Japan 2018."
+  },
+  {
+    src: "/img/home/vue-fes-japan-2018-katashin.jpg",
+    alt: "Katashin at Vue Fes Japan 2018."
   }
+] as const satisfies {
+  src: string;
+  alt: string;
+}[];
+
+const refreshImageStackDirection = (): void => {
+  stackImageTo.value = window.innerWidth >= 768 ? "left" : "right";
+};
+
+onMounted(() => {
+  refreshImageStackDirection();
+  window.addEventListener("resize", refreshImageStackDirection);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", refreshImageStackDirection);
 });
 </script>
 
@@ -91,7 +82,7 @@ export default defineComponent({
               tag="a"
               :block="true"
               href="https://vuejs-meetup.connpass.com/"
-              :icon="iconConnpass"
+              icon="/img/icons/connpass.svg"
               :label="$t('components.HomeEvents.connpass')"
             />
           </div>
diff --git a/app/components/HomeHero.vue b/app/components/HomeHero.vue
index fb53ca7..59afc84 100644
--- a/app/components/HomeHero.vue
+++ b/app/components/HomeHero.vue
@@ -1,12 +1,5 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import StyleMount from "./StyleMount.vue";
-
-export default defineComponent({
-  components: {
-    StyleMount
-  }
-});
 </script>
 
 <template>
diff --git a/app/components/HomeNews.vue b/app/components/HomeNews.vue
index 4872903..cabb4a8 100644
--- a/app/components/HomeNews.vue
+++ b/app/components/HomeNews.vue
@@ -1,16 +1,5 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import IconTwitter from "./icons/IconTwitter.vue";
-import IconNote from "./icons/IconNote.vue";
+<script setup lang="ts">
 import StyleMount from "./StyleMount.vue";
-
-export default defineComponent({
-  components: {
-    StyleMount,
-    IconTwitter,
-    IconNote
-  }
-});
 </script>
 
 <template>
@@ -52,7 +41,10 @@ export default defineComponent({
             target="_blank"
             rel="noopener noreferrer"
           >
-            <IconTwitter class="icon twitter" />
+            <img
+              src="/img/icons/twitter.svg"
+              alt="twitter icon"
+            >
             {{ $t('components.HomeNews.twitter') }}
           </a>
           <a
@@ -61,7 +53,10 @@ export default defineComponent({
             target="_blank"
             rel="noopener noreferrer"
           >
-            <IconNote class="icon note" />
+            <img
+              src="/img/icons/note.svg"
+              alt="note icon"
+            >
             {{ $t('components.HomeNews.note') }}
           </a>
         </div>
diff --git a/app/components/HomeProjects.vue b/app/components/HomeProjects.vue
index bb26239..0cf5f1d 100644
--- a/app/components/HomeProjects.vue
+++ b/app/components/HomeProjects.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import IconChevronRight from "./icons/IconChevronRight.vue";
-import IconEdit3 from "./icons/IconEdit3.vue";
-import IconTerminal from "./icons/IconTerminal.vue";
 import StyleMount from "./StyleMount.vue";
 </script>
 
@@ -45,7 +42,11 @@ import StyleMount from "./StyleMount.vue";
           >
             <article class="project-box">
               <i class="project-type">
-                <IconEdit3 class="project-icon" />
+                <img
+                  src="/img/icons/edit.svg"
+                  alt="edit icon"
+                  class="project-icon"
+                >
               </i>
               <i18n
                 tag="h3"
@@ -60,7 +61,11 @@ import StyleMount from "./StyleMount.vue";
               <p class="project-body">{{ $t('components.HomeProjects.projects.vue.body') }}</p>
               <p class="project-link">
                 {{ $t('components.HomeProjects.projects.vue.link') }}
-                <IconChevronRight class="project-link-chevron" />
+                <img
+                  src="/img/icons/chevron-right.svg"
+                  alt="chevron right icon"
+                  class="project-link-chevron"
+                >
               </p>
             </article>
           </a>
@@ -72,7 +77,11 @@ import StyleMount from "./StyleMount.vue";
           >
             <article class="project-box">
               <i class="project-type">
-                <IconEdit3 class="project-icon" />
+                <img
+                  src="/img/icons/edit.svg"
+                  alt="edit icon"
+                  class="project-icon"
+                >
               </i>
               <i18n
                 tag="h3"
@@ -87,7 +96,11 @@ import StyleMount from "./StyleMount.vue";
               <p class="project-body">{{ $t('components.HomeProjects.projects.nuxt.body') }}</p>
               <p class="project-link">
                 {{ $t('components.HomeProjects.projects.nuxt.link') }}
-                <IconChevronRight class="project-link-chevron" />
+                <img
+                  src="/img/icons/chevron-right.svg"
+                  alt="chevron right icon"
+                  class="project-link-chevron"
+                >
               </p>
             </article>
           </a>
@@ -99,7 +112,11 @@ import StyleMount from "./StyleMount.vue";
           >
             <article class="project-box">
               <i class="project-type">
-                <IconTerminal class="project-icon" />
+                <img
+                  src="/img/icons/terminal.svg"
+                  alt="terminal icon"
+                  class="project-link-chevron"
+                >
               </i>
               <i18n
                 tag="h3"
@@ -114,7 +131,11 @@ import StyleMount from "./StyleMount.vue";
               <p class="project-body">{{ $t('components.HomeProjects.projects.vuejsjp.body') }}</p>
               <p class="project-link">
                 {{ $t('components.HomeProjects.projects.vuejsjp.link') }}
-                <IconChevronRight class="project-link-chevron" />
+                <img
+                  src="/img/icons/chevron-right.svg"
+                  alt="chevron right icon"
+                  class="project-link-chevron"
+                >
               </p>
             </article>
           </a>
diff --git a/app/components/ImageStack.vue b/app/components/ImageStack.vue
index e0492c0..fccb30e 100644
--- a/app/components/ImageStack.vue
+++ b/app/components/ImageStack.vue
@@ -1,8 +1,5 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import type { PropOptions } from "vue";
-import IconChevronLeft from "./icons/IconChevronLeft.vue";
-import IconChevronRight from "./icons/IconChevronRight.vue";
+<script setup lang="ts">
+import { ref, computed } from "vue";
 import ImageStackItem from "./ImageStackItem.vue";
 
 interface Image {
@@ -16,67 +13,56 @@ interface Classes {
   left: boolean;
 }
 
-export default defineComponent({
-  components: {
-    IconChevronLeft,
-    IconChevronRight,
-    ImageStackItem
-  },
-
-  props: {
-    images: { type: Array, required: true } as PropOptions<Image[]>,
-    aspectRatio: { type: Number, required: true },
-    to: { type: String, required: true }
-  },
-
-  data() {
-    return {
-      index: 0,
-      movingTo: "next"
-    };
-  },
-
-  computed: {
-    classes(): Classes {
-      return {
-        right: this.to === "right",
-        bottom: this.to === "bottom",
-        left: this.to === "left"
-      };
-    },
-
-    currentImage(): Image {
-      return this.images[this.index];
-    },
-
-    lastIndex(): number {
-      return this.images.length - 1;
-    },
-
-    stacks(): Image[] {
-      return [0, 1, 2].map((n) => {
-        const count = n + this.index;
-        const index = count > this.lastIndex ? count - this.lastIndex - 1 : count;
-
-        return this.images[index];
-      }).reverse();
-    }
-  },
-
-  methods: {
-    next(): void {
-      this.movingTo = "next";
-
-      this.index = this.index === this.lastIndex ? 0 : this.index + 1;
-    },
-
-    prev(): void {
-      this.movingTo = "prev";
-
-      this.index = this.index === 0 ? this.lastIndex : this.index - 1;
-    }
-  }
-});
+interface Image {
+  src: string;
+  alt: string;
+}
+
+interface Classes {
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+
+const props = defineProps<{
+  images: Image[];
+  aspectRatio: number;
+  to: string;
+}>();
+
+const index = ref(0);
+const movingTo = ref<"next" | "prev">("next");
+
+const classes = computed<Classes>(() => ({
+  right: props.to === "right",
+  bottom: props.to === "bottom",
+  left: props.to === "left"
+}));
+
+const currentImage = computed(() => props.images[index.value]);
+
+const lastIndex = computed<number>(() => props.images.length - 1);
+
+const stacks = computed(() =>
+  [0, 1, 2]
+    .map((n) => {
+      const count = n + index.value;
+      const idx = count > lastIndex.value ? count - lastIndex.value - 1 : count;
+      return props.images[idx];
+    })
+    .reverse()
+    .filter((image): image is Image => !!image)
+);
+
+function next(): void {
+  movingTo.value = "next";
+  index.value = index.value === lastIndex.value ? 0 : index.value + 1;
+};
+
+function prev(): void {
+  movingTo.value = "prev";
+  index.value = index.value === 0 ? lastIndex.value : index.value - 1;
+};
 </script>
 
 <template>
@@ -88,7 +74,9 @@ export default defineComponent({
       class="list"
       :style="{ paddingBottom: `${aspectRatio}%` }"
       role="button"
+      tabindex="0"
       @click="next"
+      @keydown="next"
     >
       <TransitionGroup name="slide">
         <li
@@ -108,6 +96,7 @@ export default defineComponent({
         mode="out-in"
       >
         <p
+          v-if="currentImage"
           :key="currentImage.src"
           class="caption"
         >
@@ -121,7 +110,10 @@ export default defineComponent({
             class="button"
             @click="prev"
           >
-            <IconChevronLeft class="icon" />
+            <img
+              src="/img/icons/chevron-left.svg"
+              alt="previous icon"
+            >
           </button>
         </div>
 
@@ -130,7 +122,10 @@ export default defineComponent({
             class="button"
             @click="next"
           >
-            <IconChevronRight class="icon" />
+            <img
+              src="/img/icons/chevron-right.svg"
+              alt="next icon"
+            >
           </button>
         </div>
       </div>
diff --git a/app/components/ImageStackItem.vue b/app/components/ImageStackItem.vue
index eb30521..1259330 100644
--- a/app/components/ImageStackItem.vue
+++ b/app/components/ImageStackItem.vue
@@ -1,33 +1,19 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import type { PropOptions } from "vue";
-import IconPreloaderDark from "./icons/IconPreloaderDark.vue";
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 
-interface Image {
-  src: string;
-  alt: string;
-}
-
-export default defineComponent({
-  components: {
-    IconPreloaderDark
-  },
-
-  props: {
-    image: { type: Object, required: true } as PropOptions<Image>
-  },
+defineProps<{
+  image: {
+    src: string;
+    alt: string;
+  };
+}>();
 
-  data() {
-    return {
-      loaded: false
-    };
-  },
+const loaded = ref(false);
 
-  mounted() {
-    // In case the image load event would not fire, we'll force displaying
-    // the image after 3 sec.
-    setTimeout(() => { this.loaded = true; }, 3000);
-  }
+onMounted(() => {
+  setTimeout(() => {
+    loaded.value = true;
+  }, 3000);
 });
 </script>
 
diff --git a/app/components/InputText.vue b/app/components/InputText.vue
index aa477a8..a56d6df 100644
--- a/app/components/InputText.vue
+++ b/app/components/InputText.vue
@@ -12,6 +12,11 @@ withDefaults(defineProps<{
   type: "text",
   error: null
 });
+
+defineEmits<{
+  input: [value: string];
+  blur: [];
+}>();
 </script>
 
 <template>
@@ -28,7 +33,7 @@ withDefaults(defineProps<{
       :name="name"
       :placeholder="placeholder"
       :value="value"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('input', ($event.target as HTMLInputElement).value)"
       @blur="$emit('blur')"
     >
     <transition name="fade">
diff --git a/app/components/InputTextarea.vue b/app/components/InputTextarea.vue
index 530fc28..00d5c38 100644
--- a/app/components/InputTextarea.vue
+++ b/app/components/InputTextarea.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" setup>
 import InputBase from "./InputBase.vue";
 
 withDefaults(defineProps<{
@@ -12,6 +12,11 @@ withDefaults(defineProps<{
   rows: 3,
   error: null
 });
+
+defineEmits<{
+  input: [value: string];
+  blur: [];
+}>();
 </script>
 
 <template>
@@ -28,7 +33,7 @@ withDefaults(defineProps<{
       :placeholder="placeholder"
       :rows="rows"
       :value="value"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('input', ($event.target as HTMLTextAreaElement).value)"
       @blur="$emit('blur')"
     />
     <transition name="fade">
diff --git a/app/components/SocialLinkGroup.vue b/app/components/SocialLinkGroup.vue
index 785d76b..7b3635e 100644
--- a/app/components/SocialLinkGroup.vue
+++ b/app/components/SocialLinkGroup.vue
@@ -1,10 +1,3 @@
-<script setup lang="ts">
-import IconTwitter from "./icons/IconTwitter.vue";
-import IconNote from "./icons/IconNote.vue";
-import IconYouTube from "./icons/IconYouTube.vue";
-import IconGitHub from "./icons/IconGitHub.vue";
-</script>
-
 <template>
   <ul class="SocialLinkGroup">
     <li class="item item-twitter">
@@ -14,7 +7,11 @@ import IconGitHub from "./icons/IconGitHub.vue";
         target="_blank"
         rel="noopener noreferrer"
       >
-        <IconTwitter class="icon icon-twitter" />
+        <img
+          src="/img/icons/twitter.svg"
+          alt="twitter icon"
+          class="icon icon-twitter"
+        >
       </a>
     </li>
     <li class="item item-note">
@@ -24,7 +21,11 @@ import IconGitHub from "./icons/IconGitHub.vue";
         target="_blank"
         rel="noopener noreferrer"
       >
-        <IconNote class="icon icon-note" />
+        <img
+          src="/img/icons/note.svg"
+          alt="note icon"
+          class="icon icon-note"
+        >
       </a>
     </li>
     <li class="item item-youtube">
@@ -34,7 +35,11 @@ import IconGitHub from "./icons/IconGitHub.vue";
         target="_blank"
         rel="noopener noreferrer"
       >
-        <IconYouTube class="icon icon-youtube" />
+        <img
+          src="/img/icons/youtube.svg"
+          alt="youtube icon"
+          class="icon icon-youtube"
+        >
       </a>
     </li>
     <li class="item item-github">
@@ -44,7 +49,11 @@ import IconGitHub from "./icons/IconGitHub.vue";
         target="_blank"
         rel="noopener noreferrer"
       >
-        <IconGitHub class="icon icon-github" />
+        <img
+          src="/img/icons/github.svg"
+          alt="github icon"
+          class="icon icon-github"
+        >
       </a>
     </li>
   </ul>
diff --git a/app/components/StyleMount.vue b/app/components/StyleMount.vue
index 480f380..a979548 100644
--- a/app/components/StyleMount.vue
+++ b/app/components/StyleMount.vue
@@ -1,20 +1,14 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
 
-export default defineComponent({
-  props: {
-    tag: { type: String, default: "div" }
-  },
+withDefaults(defineProps<{ tag?: string }>(), { tag: "div" });
 
-  data() {
-    return {
-      mount: true
-    };
-  },
+const mount = ref(true);
 
-  mounted() {
-    setTimeout(() => { this.mount = false; }, 100);
-  }
+onMounted(() => {
+  setTimeout(() => {
+    mount.value = false;
+  }, 100);
 });
 </script>
 
diff --git a/app/components/TheGlobalFooter.vue b/app/components/TheGlobalFooter.vue
index bb0edde..5140fac 100644
--- a/app/components/TheGlobalFooter.vue
+++ b/app/components/TheGlobalFooter.vue
@@ -25,7 +25,9 @@ export default defineComponent({
     transition(): void {
       this.transitioning = true;
 
-      setTimeout(() => { this.transitioning = false; }, 500);
+      setTimeout(() => {
+        this.transitioning = false;
+      }, 500);
     }
   }
 });
diff --git a/app/components/TheGlobalHeader.vue b/app/components/TheGlobalHeader.vue
index b0fd628..9452b7f 100644
--- a/app/components/TheGlobalHeader.vue
+++ b/app/components/TheGlobalHeader.vue
@@ -43,13 +43,16 @@ export default defineComponent({
       const headerHeight = header.offsetHeight;
       const scrollTop = document.documentElement.scrollTop;
 
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       scrollTop > headerHeight ? this.performTransition() : scrollToTop();
     },
 
     performTransition(): void {
       this.transitioning = true;
 
-      setTimeout(() => { this.transitioning = false; }, 500);
+      setTimeout(() => {
+        this.transitioning = false;
+      }, 500);
     }
   }
 });
diff --git a/app/components/TheGlobalHeaderNavFlat.vue b/app/components/TheGlobalHeaderNavFlat.vue
index f0d11b9..99c428b 100644
--- a/app/components/TheGlobalHeaderNavFlat.vue
+++ b/app/components/TheGlobalHeaderNavFlat.vue
@@ -1,18 +1,12 @@
-<script lang="ts">
-import { defineComponent } from "vue";
-import type { LocaleObject } from "@nuxtjs/i18n";
+<script setup lang="ts">
+import { computed } from "vue";
 import SocialLinkGroup from "./SocialLinkGroup.vue";
+import { useNuxtApp } from "#app";
 
-export default defineComponent({
-  components: {
-    SocialLinkGroup
-  },
-  computed: {
-    switchableLocale() {
-      const locales = (this.$i18n.locales as LocaleObject[]).filter((i: LocaleObject) => i.code !== this.$i18n.locale);
-      return locales.length !== 0 ? locales[0] : { code: "ja", name: "日本語" };
-    }
-  }
+const { $i18n } = useNuxtApp();
+const switchableLocale = computed(() => {
+  const locales = $i18n.locales.filter(i => i.code !== $i18n.locale);
+  return locales.length !== 0 ? locales[0] : { code: "ja", name: "日本語" };
 });
 </script>
 
@@ -40,7 +34,7 @@ export default defineComponent({
           class="link"
           :to="switchLocalePath(switchableLocale.code)"
         >
-          {{ switchableLocale.name }}
+          {{ switchableLocale?.name }}
         </NuxtLink>
       </li>
     </ul>
diff --git a/app/components/TheGlobalHeaderNavScreen.vue b/app/components/TheGlobalHeaderNavScreen.vue
index b42e48e..8e7d5d5 100644
--- a/app/components/TheGlobalHeaderNavScreen.vue
+++ b/app/components/TheGlobalHeaderNavScreen.vue
@@ -1,24 +1,14 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import SocialLinkGroup from "./SocialLinkGroup.vue";
+import { navigateTo } from "#app";
 
-export default defineComponent({
-  components: {
-    SocialLinkGroup
-  },
+defineProps<{ active: boolean }>();
+const emit = defineEmits<{ close: [] }>();
 
-  props: {
-    active: { type: Boolean, required: true }
-  },
-
-  methods: {
-    jump(path: string): void {
-      this.$router.push(path);
-
-      this.$emit("close");
-    }
-  }
-});
+function jump(path: string): void {
+  navigateTo(path);
+  emit("close");
+}
 </script>
 
 <template>
diff --git a/app/components/ThePortalModals.vue b/app/components/ThePortalModals.vue
index 7baba12..954e79d 100644
--- a/app/components/ThePortalModals.vue
+++ b/app/components/ThePortalModals.vue
@@ -1,27 +1,15 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import AppBackdrop from "./AppBackdrop.vue";
 import AppDialog from "./AppDialog.vue";
 import AppAlert from "./AppAlert.vue";
+import { useBackDropStore } from "~/store";
 
-export default defineComponent({
-  components: {
-    AppBackdrop,
-    AppDialog,
-    AppAlert
-  },
-
-  computed: {
-    showBackdrop() {
-      return this.$store.state.backdrop.show;
-    }
-  }
-});
+const { isShowed } = useBackDropStore();
 </script>
 
 <template>
   <div class="ThePortalModals">
-    <AppBackdrop :show="showBackdrop" />
+    <AppBackdrop :show="isShowed" />
 
     <AppDialog />
     <AppAlert />
diff --git a/app/store/index.ts b/app/store/index.ts
index dbdaf00..0de28db 100644
--- a/app/store/index.ts
+++ b/app/store/index.ts
@@ -3,6 +3,7 @@ import { useState } from "#app";
 
 export function useBackDropStore() {
   const isShowed = useState("backDrop", () => ref(false));
+
   function show() {
     isShowed.value = true;
   }
diff --git a/cspell.json b/cspell.json
index bd6b712..304d48e 100644
--- a/cspell.json
+++ b/cspell.json
@@ -2,15 +2,27 @@
   "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
   "version": "0.2",
   "words": [
+    "Arisa",
+    "Connpass",
     "corepack",
+    "Drasner",
+    "guillaume",
     "intlify",
+    "katashin",
+    "Kenji",
+    "Miyake",
+    "Nakagawa",
     "nuxt",
     "nuxtjs",
-    "textlint",
     "pinia",
+    "sebastien",
+    "Sébastien",
+    "textlint",
     "vuejs",
     "vuelidate",
     "vuex",
+    "Yamadera",
+    "yoshiya"
   ],
   "dictionaries": [
     "softwareTerms",
@@ -22,10 +34,10 @@
     "css",
     "fonts",
     "filetypes",
-    "npm",
+    "npm"
   ],
   "ignorePaths": [
     "_legacy",
-    "pnpm-lock.yaml",
+    "pnpm-lock.yaml"
   ]
-}
\ No newline at end of file
+}
diff --git a/todo.md b/todo.md
index fabfee5..73cfc7c 100644
--- a/todo.md
+++ b/todo.md
@@ -7,6 +7,8 @@
     - [x] plugin vue a11y
     - [ ] intlify
   - [x] i18n
+    - [ ] localePath
+    - [ ] switchLocalePath
   - [ ] vuelidate
   - [ ] @nuxtjs/google-analytics
   - [ ] cookie-universal-nuxt
@@ -24,6 +26,10 @@
     - [] ./icons
       - [ ] imports
     - [ ] migrate to script setup
+    - [ ] review
+      - [ ] ButtonOutline (lint)
+      - [ ] ContactForm (validate)
+      - [ ] CookieAgreementPopup (cookie)
   - [x] postcss
 - [ ] nuxt imgae
 - [ ] nuxt scripts (ga)
@@ -34,4 +40,6 @@
 - [ ] textlint
 - [x] Nuxt4 compat
 - [x] LICENSE
-- [x] @/data
\ No newline at end of file
+- [x] @/data
+- [ ] portal, PortalTarget
+- [ ] use defineSlots
\ No newline at end of file