diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index b72d791cc..7628a29a1 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -233,7 +233,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
     }
 
     return menu.map((item, i) => (
-      <a
+      <a // eslint-disable-line jsx-a11y/anchor-is-valid
         className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='#'
         role='button'
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 21e58efde..0a90e0335 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -147,11 +147,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
-      <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
-      </div>
-    </a>
+    <Link to={'/'} className='inline-flex'>
+      <button className='!block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
+        <div className='pointer-events-none max-w-[288px]'>
+          <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
+        </div>
+      </button>
+    </Link>
   );
 
   useEffect(() => {
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 03c1994a1..1a2ad7077 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about.ts';
 import { Navlinks } from 'soapbox/components/navlinks.tsx';
@@ -44,18 +44,22 @@ const AboutPage: React.FC = () => {
       {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
-          <a href='#' onClick={() => setLocale(defaultLocale)}>
-            {/* @ts-ignore */}
-            {languages[defaultLocale] || defaultLocale}
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
+              {/* @ts-ignore */}
+              {languages[defaultLocale] || defaultLocale}
+            </button>
+          </Link>
         </li>
         {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-              <a href='#' onClick={() => setLocale(locale)}>
-                {/* @ts-ignore */}
-                {languages[locale] || locale}
-              </a>
+              <Link to={'/'} className='inline-flex'>
+                <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
+                  {/* @ts-ignore */}
+                  {languages[locale] || locale}
+                </button>
+              </Link>
             </li>
           ))
         }
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index df96afeff..1c4d38204 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups.ts';
 import Button from 'soapbox/components/ui/button.tsx';
@@ -86,11 +87,13 @@ const Backups = () => {
     <Card variant='rounded' size='lg'>
       {intl.formatMessage(messages.emptyMessage, {
         action: (
-          <a href='#' onClick={handleCreateBackup}>
-            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
-              {intl.formatMessage(messages.emptyMessageAction)}
-            </Text>
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
+              <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+                {intl.formatMessage(messages.emptyMessageAction)}
+              </Text>
+            </button>
+          </Link>
         ),
       })}
     </Card>
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index d0b7b3e06..e23207a0b 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
@@ -33,7 +34,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   const parentTo = status && statusToMentionsAccountIdsArray(status, account!);
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
     dispatch(openModal('REPLY_MENTIONS', {
@@ -47,19 +48,21 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <a href='#' className='reply-mentions' onClick={handleClick}>
-        <FormattedMessage
-          id='reply_mentions.reply_empty'
-          defaultMessage='Replying to post'
-        />
-      </a>
+      <Link to={'/'} className='inline-flex'>
+        <button className='mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+          <FormattedMessage
+            id='reply_mentions.reply_empty'
+            defaultMessage='Replying to post'
+          />
+        </button>
+      </Link>
     );
   }
 
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
+      <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );
@@ -72,15 +75,17 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <a href='#' className='reply-mentions' onClick={handleClick}>
-      <FormattedMessage
-        id='reply_mentions.reply'
-        defaultMessage='Replying to {accounts}'
-        values={{
-          accounts: <FormattedList type='conjunction' value={accounts} />,
-        }}
-      />
-    </a>
+    <Link to={'/'} className='inline-flex'>
+      <button className='mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}'
+          values={{
+            accounts: <FormattedList type='conjunction' value={accounts} />,
+          }}
+        />
+      </button>
+    </Link>
   );
 };
 
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 5aa46fc47..d40c83df5 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,11 +1,12 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
@@ -45,13 +46,15 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={qrcodeIcon} size={20} />
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
+              <SvgIcon src={qrcodeIcon} size={20} />
+            </button>
+          </Link>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={externalLinkIcon} size={20} />
+              <SvgIcon src={externalLinkIcon} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 58056c2cb..2be5a25ec 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -35,7 +35,6 @@ import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions
 import { initMuteModal } from 'soapbox/actions/mutes.ts';
 import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import { deleteStatus } from 'soapbox/actions/statuses.ts';
-import Icon from 'soapbox/components/icon.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
@@ -451,7 +450,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={flag3Icon} />
+            <SvgIcon src={flag3Icon} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -471,26 +470,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={usersIcon} />
-            <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
-              <span>
-                <FormattedMessage
-                  id='event.participants'
-                  defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
-                  values={{
-                    rawCount: event.participants_count || 0,
-                    count: shortNumberFormat(event.participants_count || 0),
-                  }}
-                />
-              </span>
-            </a>
+            <SvgIcon src={usersIcon} />
+            <Link to={'/'} className='inline-flex'>
+              <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
+                <span>
+                  <FormattedMessage
+                    id='event.participants'
+                    defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
+                    values={{
+                      rawCount: event.participants_count || 0,
+                      count: shortNumberFormat(event.participants_count || 0),
+                    }}
+                  />
+                </span>
+              </button>
+            </Link>
           </HStack>
 
           <EventDate status={status} />
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={mapPinIcon} />
+              <SvgIcon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 9c5cadc40..95796b934 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -3,6 +3,7 @@ import linkIcon from '@tabler/icons/outline/link.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { fetchStatus } from 'soapbox/actions/statuses.ts';
@@ -56,7 +57,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     setShowMedia(!showMedia);
   };
 
-  const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+  const handleShowMap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
 
     dispatch(openModal('EVENT_MAP', {
@@ -98,9 +99,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       text.push(
         <Fragment key='event-map'>
           <br />
-          <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
-            <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
+              <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
+            </button>
+          </Link>
         </Fragment>,
       );
     }
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 62cd315c8..32b27f62e 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -2,8 +2,9 @@ import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
 import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
@@ -20,19 +21,21 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
 
   const [expanded, setExpanded] = useState(false);
 
-  const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const toggleExpanded: React.MouseEventHandler<HTMLButtonElement> = e => {
     setExpanded((value) => !value);
     e.preventDefault();
   };
 
   return (
     <div>
-      <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? caretDownIcon : caretRightIcon} />
-        <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
-          {remoteInstance.host}
-        </div>
-      </a>
+      <Link to={'/'} className='inline-flex'>
+        <button className='flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
+          <SvgIcon src={expanded ? caretDownIcon : caretRightIcon} />
+          <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
+            {remoteInstance.host}
+          </div>
+        </button>
+      </Link>
       <div
         className={clsx({
           'h-0 overflow-hidden': !expanded,