diff --git a/src/App.vue b/src/App.vue
index 9230c4f..c48ef1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,7 +59,11 @@ const close = () => {
     <LanguageButton>
       <LanguageIcon @click.prevent="showModal()" />
     </LanguageButton>
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
+        <component :is="Component" :key="$route.path" />
+      </Transition>
+    </RouterView>
   </main>
 
   <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
diff --git a/src/router/index.ts b/src/router/index.ts
index a879e36..5fc5326 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,7 +10,11 @@ import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior: () => {
-    return { top: 0 }
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ top: 0 })
+      }, 500)
+    })
   },
   routes: [
     {
diff --git a/src/scss/base.scss b/src/scss/base.scss
index a783f62..cdddb31 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -43,6 +43,8 @@
   --page-background-image: url(@/assets/layered-waves-light.svg);
   --page-background-image-height: 100vw;
   --page-background-image-max-height: 50vh;
+  --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  --page-transform: translateY(5em);
 
   --paragraph-margin: 1rem;
 
@@ -286,3 +288,10 @@
     --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
   }
 }
+
+@media (prefers-reduced-motion) {
+  :root {
+    --page-transition: opacity 0.5s ease;
+    --page-transform: none;
+  }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 71dbc42..ae2af74 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -171,3 +171,14 @@ table {
     }
   }
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: var(--page-transition);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: var(--page-transform);
+}
diff --git a/src/views/AnatomyView.vue b/src/views/AnatomyView.vue
index d029410..1798e26 100644
--- a/src/views/AnatomyView.vue
+++ b/src/views/AnatomyView.vue
@@ -15,149 +15,151 @@ const colors = [
 </script>
 
 <template>
-  <section>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-  </section>
+  <article>
+    <section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    </section>
 
-  <RefImage dropshadow>
-    <template v-if="$route.query.nsfw">
-      <source
-        srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/avif"
-      />
-      <source
-        srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/webp"
-      />
-      <img
-        srcset="
-          @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        alt="Viktor Ref by sabertoofs"
-        loading="lazy"
-      />
-    </template>
+    <RefImage dropshadow>
+      <template v-if="$route.query.nsfw">
+        <source
+          srcset="
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          alt="Viktor Ref by sabertoofs"
+          loading="lazy"
+        />
+      </template>
 
-    <template v-else>
-      <source
-        srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/avif"
-      />
-      <source
-        srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        type="image/webp"
-      />
-      <img
-        srcset="
-          @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
-        :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
-        loading="lazy"
-      />
-    </template>
+      <template v-else>
+        <source
+          srcset="
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
+          :alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
+          loading="lazy"
+        />
+      </template>
 
-    <template #caption>
-      {{ $t('anatomy.images.back.caption') }} &copy;
-      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
-    </template>
-  </RefImage>
+      <template #caption>
+        {{ $t('anatomy.images.back.caption') }} &copy;
+        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+      </template>
+    </RefImage>
 
-  <ColorTable :colors="colors"></ColorTable>
+    <ColorTable :colors="colors"></ColorTable>
 
-  <section>
-    <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
-  </section>
+    <section>
+      <p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
+    </section>
 
-  <RefImage dropshadow>
-    <template v-if="$route.query.nsfw">
-      <source
-        srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+    <RefImage dropshadow>
+      <template v-if="$route.query.nsfw">
+        <source
+          srcset="
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        type="image/avif"
-      />
-      <source
-        srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        type="image/webp"
-      />
-      <img
-        srcset="
-          @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        alt="Viktor frontal shot by sabertoofs"
-        loading="lazy"
-      />
-    </template>
+          alt="Viktor frontal shot by sabertoofs"
+          loading="lazy"
+        />
+      </template>
 
-    <template v-else>
-      <source
-        srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+      <template v-else>
+        <source
+          srcset="
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        type="image/avif"
-      />
-      <source
-        srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+          type="image/avif"
+        />
+        <source
+          srcset="
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        type="image/webp"
-      />
-      <img
-        srcset="
-          @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
-        "
-        sizes="(min-width: 64em) 710px,
+          type="image/webp"
+        />
+        <img
+          srcset="
+            @/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
+          "
+          sizes="(min-width: 64em) 710px,
                (min-width: 50em) 590px,
                (min-width: 27em) 530px,
                430px"
-        :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
-        loading="lazy"
-      />
-    </template>
+          :alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
+          loading="lazy"
+        />
+      </template>
 
-    <template #caption>
-      {{ $t('anatomy.images.front.caption') }} &copy;
-      <a href="http://twitter.com/sabertoofs">sabertoofs</a>
-    </template>
-  </RefImage>
+      <template #caption>
+        {{ $t('anatomy.images.front.caption') }} &copy;
+        <a href="http://twitter.com/sabertoofs">sabertoofs</a>
+      </template>
+    </RefImage>
 
-  <section>
-    <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
-  </section>
+    <section>
+      <p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
+    </section>
+  </article>
 </template>
diff --git a/src/views/AttributionsView.vue b/src/views/AttributionsView.vue
index a122106..4af3c33 100644
--- a/src/views/AttributionsView.vue
+++ b/src/views/AttributionsView.vue
@@ -25,73 +25,79 @@ const attributions = [
 </script>
 
 <template>
-  <section>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <h2>{{ $t('attributions.artwork.heading') }}</h2>
-  </section>
-  <AttributionTable :attributions="attributions" />
-  <section>
-    <h2>{{ $t('attributions.other.heading') }}</h2>
-  </section>
-  <table>
-    <thead>
-      <tr>
-        <th>{{ $t('attributions.other.headings[0]') }}</th>
-        <th>{{ $t('attributions.other.headings[1]') }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>{{ $t('attributions.other.icons[0]') }}</td>
-        <td>
-          <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">
-            Font Awesome
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ $t('attributions.other.headingFont[0]') }}</td>
-        <td>
-          <a
-            href="https://github.com/MichalSahar/Secular"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Secular One
-          </a>
-          {{ $t('attributions.other.headingFont[1]') }}
-          <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
-            Michal Sahar
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ $t('attributions.other.copyFont[0]') }}</td>
-        <td>
-          <a
-            href="https://antonkoovit.com/typefaces/arvo"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Arvo
-          </a>
-          {{ $t('attributions.other.copyFont[1]') }}
-          <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
-            Anton Koovit
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>{{ $t('attributions.other.background[0]') }}</td>
-        <td>
-          {{ $t('attributions.other.background[1][0]') }}
-          <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
-          {{ $t('attributions.other.background[1][1]') }}
-          <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
-            z creative labs
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <article>
+    <section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+      <h2>{{ $t('attributions.artwork.heading') }}</h2>
+    </section>
+    <AttributionTable :attributions="attributions" />
+    <section>
+      <h2>{{ $t('attributions.other.heading') }}</h2>
+    </section>
+    <table>
+      <thead>
+        <tr>
+          <th>{{ $t('attributions.other.headings[0]') }}</th>
+          <th>{{ $t('attributions.other.headings[1]') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ $t('attributions.other.icons[0]') }}</td>
+          <td>
+            <a
+              href="https://fontawesome.com/license/free"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Font Awesome
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ $t('attributions.other.headingFont[0]') }}</td>
+          <td>
+            <a
+              href="https://github.com/MichalSahar/Secular"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Secular One
+            </a>
+            {{ $t('attributions.other.headingFont[1]') }}
+            <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
+              Michal Sahar
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ $t('attributions.other.copyFont[0]') }}</td>
+          <td>
+            <a
+              href="https://antonkoovit.com/typefaces/arvo"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Arvo
+            </a>
+            {{ $t('attributions.other.copyFont[1]') }}
+            <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
+              Anton Koovit
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>{{ $t('attributions.other.background[0]') }}</td>
+          <td>
+            {{ $t('attributions.other.background[1][0]') }}
+            <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
+            {{ $t('attributions.other.background[1][1]') }}
+            <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
+              z creative labs
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
 </template>
diff --git a/src/views/CareerPathView.vue b/src/views/CareerPathView.vue
index a67c3f8..d6e28d1 100644
--- a/src/views/CareerPathView.vue
+++ b/src/views/CareerPathView.vue
@@ -26,20 +26,22 @@ const jobIcons = [
 </script>
 
 <template>
-  <section>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+  <article>
+    <section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+      <p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
+    </section>
 
-  <TimelineList>
-    <TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
-      <template #icon>
-        <component :is="jobIcons[idx as number]"></component>
-      </template>
-      <template #headline>{{ job.title }}</template>
-      <template #content>
-        <p>{{ job.desc }}</p>
-      </template>
-    </TimelineItem>
-  </TimelineList>
+    <TimelineList>
+      <TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
+        <template #icon>
+          <component :is="jobIcons[idx as number]"></component>
+        </template>
+        <template #headline>{{ job.title }}</template>
+        <template #content>
+          <p>{{ job.desc }}</p>
+        </template>
+      </TimelineItem>
+    </TimelineList>
+  </article>
 </template>
diff --git a/src/views/GeneralView.vue b/src/views/GeneralView.vue
index 1248114..bfdb6ba 100644
--- a/src/views/GeneralView.vue
+++ b/src/views/GeneralView.vue
@@ -48,24 +48,26 @@ const sexData = [
 </script>
 
 <template>
-  <section>
-    <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-  </section>
+  <article>
+    <section>
+      <h1>{{ $t(`${$route.meta.title}`) }}</h1>
+    </section>
 
-  <DataTable :headings="heads" :data="data"></DataTable>
+    <DataTable :headings="heads" :data="data"></DataTable>
 
-  <section>
-    <h2>{{ $t('general.personality.heading') }}</h2>
-    <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+    <section>
+      <h2>{{ $t('general.personality.heading') }}</h2>
+      <p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
+    </section>
 
-  <section>
-    <h2>{{ $t('general.sexuality.heading') }}</h2>
-  </section>
+    <section>
+      <h2>{{ $t('general.sexuality.heading') }}</h2>
+    </section>
 
-  <DataTable :headings="sexHeads" :data="sexData"></DataTable>
+    <DataTable :headings="sexHeads" :data="sexData"></DataTable>
 
-  <section>
-    <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+    <section>
+      <p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
+    </section>
+  </article>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8d7d629..830e290 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,14 +3,16 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
 </script>
 
 <template>
-  <WelcomeHeader>
-    <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
-    <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
-  </WelcomeHeader>
+  <article>
+    <WelcomeHeader>
+      <template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
+      <template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
+    </WelcomeHeader>
 
-  <section>
-    <h3>{{ $t('home.heading') }}</h3>
+    <section>
+      <h3>{{ $t('home.heading') }}</h3>
 
-    <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
-  </section>
+      <p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
+    </section>
+  </article>
 </template>