diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 16fe383..2312bc2 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -7,7 +7,7 @@
   <div>
     <NuxtRouteAnnouncer />
     <div class="container">
-      <NuxtPage></NuxtPage>
+      <NuxtPage />
     </div>
   </div>
 </template>
@@ -28,5 +28,4 @@ onMounted(() => {
   padding-left: 20px;
   padding-right: 20px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/app/components/parts/HeaderLinks.vue b/frontend/app/components/parts/HeaderLinks.vue
index 4f5b15e..1856010 100644
--- a/frontend/app/components/parts/HeaderLinks.vue
+++ b/frontend/app/components/parts/HeaderLinks.vue
@@ -1,55 +1,49 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
 const route = useRoute()
-const router = useRouter()
 
 const scrollTargets: Record<string, string> = {
-    'index': 'top',
+    'index': '#top',
     'blog': '#scroll-blog',
     'contact': '#scroll-contact',
     'art': '#scroll-art'
 }
 
-const currentPath = computed(() => route.path)
+const isHome = computed(() => route.path === localePath('index'))
 
-function handleClick(targetKey: string, e: MouseEvent) {
-    if (e.ctrlKey || e.metaKey || e.altKey || e.button !== 0) return
-   const isHome = currentPath.value === localePath('index')
-    if (!isHome) return
-      e.preventDefault()
-      const targetId = scrollTargets[targetKey] || 'top'
-      if (targetId === 'top') {
-        window.scrollTo({ top: 0, behavior: 'smooth' })
-        } else {
-            const el = document.querySelector(targetId)
-            if (el) {
-                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-            } else {
-                const hash = targetId.substring(1)
-                router.replace({ hash })
-            }
-        }
+function isActive(targetKey: string): boolean {
+    if (targetKey === 'index') return isHome.value
+    const targetPath = localePath(targetKey)
+    return route.path === targetPath
+}
+
+function getToPath(targetKey: string): string {
+    if (isHome.value) {
+        const targetId = scrollTargets[targetKey] || 'top'
+        return targetId.substring(1) !== '' ? '#' + targetId.substring(1) : '/'
+    }
+    return localePath(targetKey === 'index' ? 'index' : targetKey)
 }
 </script>
 
 <template>
     <div class="tui-tabs">
-        <a :href="localePath('index')" class="tui-tab" @click="handleClick('index', $event)">
+        <NuxtLink :to="getToPath('index')" class="tui-tab" :class="{ 'tui-tab-active': isActive('index') }">
             <span class="tab-sep" v-if="false">│</span>
             <span class="tab-label">/</span>
-        </a>
-        <a :href="localePath('blog')" class="tui-tab" @click="handleClick('blog', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('blog')" class="tui-tab" :class="{ 'tui-tab-active': isActive('blog') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.blog') }}</span>
-        </a>
-        <a :href="localePath('contact')" class="tui-tab" @click="handleClick('contact', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('contact')" class="tui-tab" :class="{ 'tui-tab-active': isActive('contact') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.contact') }}</span>
-        </a>
-        <a :href="localePath('art')" class="tui-tab" @click="handleClick('art', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('art')" class="tui-tab" :class="{ 'tui-tab-active': isActive('art') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.art') }}</span>
-        </a>
+        </NuxtLink>
     </div>
 </template>
 
@@ -91,7 +85,7 @@ function handleClick(targetKey: string, e: MouseEvent) {
     }
 }
 
-.tui-tab.router-link-exact-active {
+.tui-tab-active {
     color: var(--color-background-fore);
     background-color: var(--color-link);
     text-shadow: 0 0 8px rgba(255,255,255,0.3);
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index a6959c3..e79dcb7 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -271,9 +271,9 @@ const sectionTargets = {
         <h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
         <ul class="tui-list">
           <li v-for="post in displayedBlogPosts" :key="post.slug" class="blog-entry">
-            <a class="entry-link" :href="localePath({ name: 'blog-slug', params: { slug: post.slug } })">
+            <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })" class="entry-link">
               <span class="entry-title">{{ post.title }}</span>
-            </a>
+            </NuxtLink>
             <span class="entry-meta">[{{ post.date }}] {{ post.description }}</span>
           </li>
         </ul>
@@ -294,9 +294,9 @@ const sectionTargets = {
       <Container>
         <h2 class="section-title">{{ t('pages.art_heading') }}</h2>
         <div class="grid">
-          <a v-for="art in displayedArtPosts" :key="art.slug"
+          <NuxtLink v-for="art in displayedArtPosts" :key="art.slug"
             class="selector"
-            :href="isArtFallback(art) ? localePath(`/art/${art.slug}`) : localePath(`/art/${art.slug}`)">
+            :to="localePath(`/art/${art.slug}`)">
               <span class="selector-border-top" aria-hidden="true">────────</span>
               <img
                 :src="art.thumb"
@@ -305,7 +305,7 @@ const sectionTargets = {
               />
               <span class="selector-border-bottom" aria-hidden="true">────────</span>
               <div class="overlay-label">{{ art.title }}</div>
-          </a>
+          </NuxtLink>
         </div>
         <p v-if="artPosts && artPosts.length > 0" class="show-more-link">
           <NuxtLink :to="localePath('/art')" class="tui-link">{{ t('pages.show_more') }}</NuxtLink>