diff --git a/resources/tailwind-app/components/Status/StatusCard.vue b/resources/tailwind-app/components/Status/StatusCard.vue
index 64aec95b9..efff12523 100644
--- a/resources/tailwind-app/components/Status/StatusCard.vue
+++ b/resources/tailwind-app/components/Status/StatusCard.vue
@@ -165,42 +165,34 @@ watch(
     { immediate: true },
 );
 
-function escapeHtml(s: string): string {
-    return s
-        .replaceAll('&', '&')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#039;');
-}
+type BodySegment = { text: string; username?: string };
 
-const enrichedBody = computed(() => {
+const bodySegments = computed<BodySegment[]>(() => {
     const body = statusObject.value.body ?? '';
     const mentions: MentionDto[] =
         (statusObject.value as unknown as { bodyMentions?: MentionDto[] }).bodyMentions ?? [];
 
-    if (!body) return '';
-    if (!mentions.length) return escapeHtml(body);
+    if (!body) return [];
 
     const userMap = new Map<string, UserResource>();
     for (const m of mentions) {
         if (m.user?.username) userMap.set(m.user.username.toLowerCase(), m.user);
     }
-    if (!userMap.size) return escapeHtml(body);
+    if (!userMap.size) return [{ text: body }];
 
     const mentionRegex = /@(\w+)/g;
-    let result = '';
+    const segments: BodySegment[] = [];
     let lastIndex = 0;
     let match: RegExpExecArray | null;
     while ((match = mentionRegex.exec(body)) !== null) {
         const user = userMap.get(match[1].toLowerCase());
         if (!user) continue;
-        result += escapeHtml(body.slice(lastIndex, match.index));
-        result += `<a href="/@${encodeURIComponent(user.username)}" class="link text-primary [[data-theme=dark]_&]:text-red-400">${escapeHtml(match[0])}</a>`;
+        if (match.index > lastIndex) segments.push({ text: body.slice(lastIndex, match.index) });
+        segments.push({ text: match[0], username: user.username });
         lastIndex = match.index + match[0].length;
     }
-    result += escapeHtml(body.slice(lastIndex));
-    return result;
+    if (lastIndex < body.length) segments.push({ text: body.slice(lastIndex) });
+    return segments;
 });
 
 function toggleLike() {
@@ -366,12 +358,19 @@ const inProgress = computed(() => progress.value > 0 && progress.value < 100);
                         </div>
 
                         <!-- Status body -->
-                        <!-- eslint-disable-next-line vue/no-v-html -->
                         <p
                             v-if="statusObject.body"
                             class="text-base text-base-content/80 italic whitespace-pre-wrap break-words [font-synthesis:none]"
-                            v-html="enrichedBody"
-                        />
+                        >
+                            <template v-for="(segment, index) in bodySegments" :key="index">
+                                <router-link
+                                    v-if="segment.username"
+                                    :to="{ name: 'user-profile', params: { username: segment.username } }"
+                                    class="link text-primary [[data-theme=dark]_&]:text-red-400"
+                                    >{{ segment.text }}</router-link
+                                ><template v-else>{{ segment.text }}</template>
+                            </template>
+                        </p>
 
                         <!-- Moderation notices -->
                         <div
diff --git a/resources/tailwind-app/pages/Settings/Blocks/Blocks.vue b/resources/tailwind-app/pages/Settings/Blocks/Blocks.vue
index de60cfb6c..d847bfde3 100644
--- a/resources/tailwind-app/pages/Settings/Blocks/Blocks.vue
+++ b/resources/tailwind-app/pages/Settings/Blocks/Blocks.vue
@@ -55,16 +55,16 @@ fetchBlockedUsers();
                 <li v-for="user in blockedUsers" :key="user.id" class="list-row items-center">
                     <div class="avatar">
                         <div class="rounded-full w-12 h-12">
-                            <a :href="`/@${user.username}`">
+                            <router-link :to="{ name: 'user-profile', params: { username: user.username } }">
                                 <img :src="user.profilePicture" :alt="user.displayName" />
-                            </a>
+                            </router-link>
                         </div>
                     </div>
                     <div class="list-col-grow">
-                        <a :href="`/@${user.username}`">
+                        <router-link :to="{ name: 'user-profile', params: { username: user.username } }">
                             <p class="font-semibold mb-0">{{ user.displayName }}</p>
                             <p class="text-sm opacity-75 mb-0">@{{ user.username }}</p>
-                        </a>
+                        </router-link>
                     </div>
                     <button class="btn btn-sm btn-primary" @click="unblock(user)">
                         <UserRoundCheck class="size-4" />
diff --git a/resources/tailwind-app/pages/Settings/Followers/FollowRequests.vue b/resources/tailwind-app/pages/Settings/Followers/FollowRequests.vue
index 2ea7b8b30..448f5a21a 100644
--- a/resources/tailwind-app/pages/Settings/Followers/FollowRequests.vue
+++ b/resources/tailwind-app/pages/Settings/Followers/FollowRequests.vue
@@ -80,16 +80,16 @@ getFollowers();
                 <li v-for="follower in requests" :key="follower.id" class="list-row items-center">
                     <div class="avatar">
                         <div class="rounded-full w-12 h-12">
-                            <a :href="`/@${follower.username}`">
+                            <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                                 <img :src="follower.profilePicture" :alt="follower.displayName" />
-                            </a>
+                            </router-link>
                         </div>
                     </div>
                     <div class="list-col-grow">
-                        <a :href="`/@${follower.username}`">
+                        <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                             <h6 class="mb-0">{{ follower.displayName }}</h6>
                             <p class="mb-0 opacity-75">@{{ follower.username }}</p>
-                        </a>
+                        </router-link>
                     </div>
                     <button role="button" class="btn btn-sm btn-error" @click="rejectFollower(follower)">
                         <UserMinus class="w-4 h-4" />
diff --git a/resources/tailwind-app/pages/Settings/Followers/Followers.vue b/resources/tailwind-app/pages/Settings/Followers/Followers.vue
index daff00342..1bf6c6d61 100644
--- a/resources/tailwind-app/pages/Settings/Followers/Followers.vue
+++ b/resources/tailwind-app/pages/Settings/Followers/Followers.vue
@@ -67,16 +67,16 @@ getFollowers();
                 <li v-for="follower in followers" :key="follower.id" class="list-row items-center">
                     <div class="avatar">
                         <div class="rounded-full w-12 h-12">
-                            <a :href="`/@${follower.username}`">
+                            <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                                 <img :src="follower.profilePicture" :alt="follower.displayName" />
-                            </a>
+                            </router-link>
                         </div>
                     </div>
                     <div class="list-col-grow">
-                        <a :href="`/@${follower.username}`">
+                        <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                             <h6 class="mb-0">{{ follower.displayName }}</h6>
                             <p class="mb-0 opacity-75">@{{ follower.username }}</p>
-                        </a>
+                        </router-link>
                     </div>
                     <button role="button" class="btn btn-sm btn-error" @click="removeUser(follower)">
                         <UserMinus class="w-4 h-4" />
diff --git a/resources/tailwind-app/pages/Settings/Followers/Followings.vue b/resources/tailwind-app/pages/Settings/Followers/Followings.vue
index 429b80412..d009cc0b5 100644
--- a/resources/tailwind-app/pages/Settings/Followers/Followings.vue
+++ b/resources/tailwind-app/pages/Settings/Followers/Followings.vue
@@ -67,16 +67,16 @@ getFollowings();
                 <li v-for="follower in followers" :key="follower.id" class="list-row items-center">
                     <div class="avatar">
                         <div class="rounded-full w-12 h-12">
-                            <a :href="`/@${follower.username}`">
+                            <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                                 <img :src="follower.profilePicture" :alt="follower.displayName" />
-                            </a>
+                            </router-link>
                         </div>
                     </div>
                     <div class="list-col-grow">
-                        <a :href="`/@${follower.username}`">
+                        <router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
                             <h6 class="mb-0">{{ follower.displayName }}</h6>
                             <p class="mb-0 opacity-75">@{{ follower.username }}</p>
-                        </a>
+                        </router-link>
                     </div>
                     <button role="button" class="btn btn-sm btn-error" @click="removeUser(follower)">
                         <UserMinus class="w-4 h-4" />
diff --git a/resources/tailwind-app/pages/Settings/Mutes/Mutes.vue b/resources/tailwind-app/pages/Settings/Mutes/Mutes.vue
index e1ef3f487..a1afd5901 100644
--- a/resources/tailwind-app/pages/Settings/Mutes/Mutes.vue
+++ b/resources/tailwind-app/pages/Settings/Mutes/Mutes.vue
@@ -55,16 +55,16 @@ fetchMutedUsers();
                 <li v-for="user in mutedUsers" :key="user.id" class="list-row items-center">
                     <div class="avatar">
                         <div class="rounded-full w-12 h-12">
-                            <a :href="`/@${user.username}`">
+                            <router-link :to="{ name: 'user-profile', params: { username: user.username } }">
                                 <img :src="user.profilePicture" :alt="user.displayName" />
-                            </a>
+                            </router-link>
                         </div>
                     </div>
                     <div class="list-col-grow">
-                        <a :href="`/@${user.username}`">
+                        <router-link :to="{ name: 'user-profile', params: { username: user.username } }">
                             <p class="font-semibold mb-0">{{ user.displayName }}</p>
                             <p class="text-sm opacity-75 mb-0">@{{ user.username }}</p>
-                        </a>
+                        </router-link>
                     </div>
                     <button class="btn btn-sm btn-primary" @click="unmute(user)">
                         <Eye class="size-4" />
diff --git a/resources/tailwind-app/pages/Status/SingleStatus.vue b/resources/tailwind-app/pages/Status/SingleStatus.vue
index e2b79d1d6..bd560a6df 100644
--- a/resources/tailwind-app/pages/Status/SingleStatus.vue
+++ b/resources/tailwind-app/pages/Status/SingleStatus.vue
@@ -209,18 +209,24 @@ watch(status, (data) => {
                                 :key="user.id"
                                 class="flex items-center gap-3 px-4 py-2 border-b border-base-200 last:border-0"
                             >
-                                <a :href="`/@${user.username}`" class="shrink-0">
+                                <router-link
+                                    :to="{ name: 'user-profile', params: { username: user.username } }"
+                                    class="shrink-0"
+                                >
                                     <img
                                         :src="user.profilePicture"
                                         :alt="user.username"
                                         class="w-8 h-8 rounded-full object-cover"
                                         loading="lazy"
                                     />
-                                </a>
+                                </router-link>
                                 <div class="text-sm">
-                                    <a :href="`/@${user.username}`" class="link link-hover font-medium">
+                                    <router-link
+                                        :to="{ name: 'user-profile', params: { username: user.username } }"
+                                        class="link link-hover font-medium"
+                                    >
                                         {{ user.username }}
-                                    </a>
+                                    </router-link>
                                     <span class="text-base-content/50 ml-1">
                                         {{
                                             user.id === status.user.id