diff --git a/web/src/components/Statusbar.tsx b/web/src/components/Statusbar.tsx
index 1101a3f63..1ea609d74 100644
--- a/web/src/components/Statusbar.tsx
+++ b/web/src/components/Statusbar.tsx
@@ -9,6 +9,7 @@ import { useContext, useEffect, useMemo } from "react";
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
+import { Link } from "react-router-dom";
 import useSWR from "swr";
 
 export default function Statusbar() {
@@ -130,7 +131,7 @@ export default function Statusbar() {
                 );
 
                 if (link) {
-                  return <a href={link}>{message}</a>;
+                  return <Link to={link}>{message}</Link>;
                 } else {
                   return message;
                 }
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 519730d99..4b646dc5f 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -13,6 +13,7 @@ import {
   StatusBarMessagesContext,
   StatusMessage,
 } from "@/context/statusbar-provider";
+import { Link } from "react-router-dom";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -85,7 +86,7 @@ function StatusAlertNav() {
                 );
 
                 if (link) {
-                  return <a href={link}>{message}</a>;
+                  return <Link to={link}>{message}</Link>;
                 } else {
                   return message;
                 }