diff --git a/packages/nicolium/src/components/accounts/account-link.tsx b/packages/nicolium/src/components/accounts/account-link.tsx
index dcc8098a6..a9616d7dc 100644
--- a/packages/nicolium/src/components/accounts/account-link.tsx
+++ b/packages/nicolium/src/components/accounts/account-link.tsx
@@ -7,7 +7,7 @@ import { useLoggedIn } from '@/hooks/use-logged-in';
 import type { Account, Mention } from 'pl-api';
 
 interface IAccountLink extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  account: Account | Mention;
+  account: Pick<Account, 'acct' | 'url' | 'local'> | Mention;
 }
 
 const AccountLink: React.FC<IAccountLink> = ({ account, ...props }) => {
diff --git a/packages/nicolium/src/components/accounts/mention.tsx b/packages/nicolium/src/components/accounts/mention.tsx
index 3facfcfd6..b68ba1e55 100644
--- a/packages/nicolium/src/components/accounts/mention.tsx
+++ b/packages/nicolium/src/components/accounts/mention.tsx
@@ -12,7 +12,7 @@ interface IMention {
 }
 
 /** Mention for display in the composer. */
-const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled }) => {
+const Mention: React.FC<IMention> = ({ mention, disabled }) => {
   const handleClick: React.MouseEventHandler = (e) => {
     if (disabled) {
       e.preventDefault();
@@ -21,9 +21,9 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
   };
 
   return (
-    <Tooltip text={`@${acct}`}>
-      <AccountLink account={{ acct, username }} onClick={handleClick} dir='ltr'>
-        @{username}
+    <Tooltip text={`@${mention.acct}`}>
+      <AccountLink account={mention} onClick={handleClick} dir='ltr'>
+        @{mention.username}
       </AccountLink>
     </Tooltip>
   );
diff --git a/packages/nicolium/src/components/notification.tsx b/packages/nicolium/src/components/notification.tsx
index 0dcae87f7..494525ffe 100644
--- a/packages/nicolium/src/components/notification.tsx
+++ b/packages/nicolium/src/components/notification.tsx
@@ -72,7 +72,7 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
 };
 
 const buildLink = (
-  account: Pick<Account, 'acct' | 'display_name' | 'emojis' | 'id'>,
+  account: Pick<Account, 'acct' | 'display_name' | 'emojis' | 'id' | 'local' | 'url'>,
 ): React.JSX.Element => (
   <AccountLink
     className='font-bold text-gray-800 hover:underline dark:text-gray-200'
@@ -215,7 +215,7 @@ const messages: Record<NotificationType | 'reply', MessageDescriptor> = defineMe
 const buildMessage = (
   intl: IntlShape,
   type: NotificationType | 'reply',
-  accounts: Array<Pick<Account, 'acct' | 'display_name' | 'emojis' | 'id'>>,
+  accounts: Array<Pick<Account, 'acct' | 'display_name' | 'emojis' | 'id' | 'local' | 'url'>>,
   targetName: string,
   instanceTitle: string,
   hasStatus: boolean,
diff --git a/packages/nicolium/src/features/chats/components/chats-page/components/chats-page-chat.tsx b/packages/nicolium/src/features/chats/components/chats-page/components/chats-page-chat.tsx
index e6e1cb196..11aeb2d9c 100644
--- a/packages/nicolium/src/features/chats/components/chats-page/components/chats-page-chat.tsx
+++ b/packages/nicolium/src/features/chats/components/chats-page/components/chats-page-chat.tsx
@@ -2,6 +2,7 @@ import iconArrowLeft from '@phosphor-icons/core/regular/arrow-left.svg';
 import iconInfo from '@phosphor-icons/core/regular/info.svg';
 import iconProhibit from '@phosphor-icons/core/regular/prohibit.svg';
 import iconSignOut from '@phosphor-icons/core/regular/sign-out.svg';
+import { useNavigate } from '@tanstack/react-router';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/packages/nicolium/src/layouts/home-layout.tsx b/packages/nicolium/src/layouts/home-layout.tsx
index d76e209e6..e5ac6007d 100644
--- a/packages/nicolium/src/layouts/home-layout.tsx
+++ b/packages/nicolium/src/layouts/home-layout.tsx
@@ -61,7 +61,7 @@ const HomeLayout = () => {
           >
             <div className='⁂-compose-block__body'>
               {!disableUserProvidedMedia && (
-                <AccountLink className='⁂-compose-block__avatar' account={account}>
+                <AccountLink className='⁂-compose-block__avatar' account={account!}>
                   <Avatar
                     src={avatar}
                     alt={account?.avatar_description}
diff --git a/packages/nicolium/src/pages/fun/circle.tsx b/packages/nicolium/src/pages/fun/circle.tsx
index 46453a113..fd882c158 100644
--- a/packages/nicolium/src/pages/fun/circle.tsx
+++ b/packages/nicolium/src/pages/fun/circle.tsx
@@ -1,3 +1,4 @@
+import { Link } from '@tanstack/react-router';
 import React, { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -24,7 +25,6 @@ import iconDownloadSimple from '@phosphor-icons/core/regular/download-simple.svg
 import iconNotePencil from '@phosphor-icons/core/regular/note-pencil.svg';
 
 import avatarMissing from '@/assets/images/avatar-missing.png';
-import { AccountLink } from '@/components/accounts/account-link';
 
 const HEIGHT = 1000;
 const WIDTH = 1000;
@@ -240,7 +240,7 @@ const CirclePage: React.FC = () => {
           >
             <div className='flex flex-col gap-2'>
               {users?.map((user) => (
-                <AccountLink account={user} key={user.id}>
+                <Link key={user.id} to='/@{$username}' params={{ username: user.acct }}>
                   <div className='flex items-center gap-2'>
                     <Avatar
                       size={20}
@@ -252,7 +252,7 @@ const CirclePage: React.FC = () => {
                       {user.acct}
                     </Text>
                   </div>
-                </AccountLink>
+                </Link>
               ))}
             </div>
           </Accordion>