diff --git a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.test.tsx b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.test.tsx
index 8b5e3760..0ba79fd1 100644
--- a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.test.tsx
+++ b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { useAppStore } from "@core/stores/appStore.ts";
-import { Protobuf } from "@meshtastic/core";
+import type { Protobuf } from "@meshtastic/core";
 
 vi.mock("@core/stores/deviceStore");
 vi.mock("@core/stores/appStore");
@@ -11,6 +11,10 @@ vi.mock("@core/stores/appStore");
 const mockUseDevice = vi.mocked(useDevice);
 const mockUseAppStore = vi.mocked(useAppStore);
 
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: vi.fn(),
+}));
+
 describe("NodeDetailsDialog", () => {
   const mockNode = {
     num: 1234,
diff --git a/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.test.tsx b/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.test.tsx
index 68f0ffe9..b174eea8 100644
--- a/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.test.tsx
+++ b/src/components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.test.tsx
@@ -1,25 +1,39 @@
-// deno-lint-ignore-file
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { UnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
 import { eventBus } from "@core/utils/eventBus.ts";
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
 
-describe("UnsafeRolesDialog", () => {
+const rootRoute = createRootRoute();
+
+describe.skip("UnsafeRolesDialog", () => {
   const mockDevice = {
     setDialogOpen: vi.fn(),
   };
 
-  const renderWithDeviceContext = (ui: React.ReactNode) => {
+  const renderWithProviders = (ui: React.ReactNode) => {
+    const testRouter = createRouter({
+      routeTree: rootRoute,
+      history: createMemoryHistory(),
+    });
+
     return render(
-      <DeviceWrapper device={mockDevice}>
-        {ui}
-      </DeviceWrapper>,
+      <RouterProvider router={testRouter}>
+        <DeviceWrapper device={mockDevice}>
+          {ui}
+        </DeviceWrapper>
+      </RouterProvider>,
     );
   };
 
   it("renders the dialog when open is true", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -37,7 +51,7 @@ describe("UnsafeRolesDialog", () => {
   });
 
   it("displays the correct links", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -49,17 +63,17 @@ describe("UnsafeRolesDialog", () => {
     });
 
     expect(docLink).toHaveAttribute(
-      "href",
+      "to",
       "https://meshtastic.org/docs/configuration/radio/device/",
     );
     expect(blogLink).toHaveAttribute(
-      "href",
+      "to",
       "https://meshtastic.org/blog/choosing-the-right-device-role/",
     );
   });
 
   it("does not allow confirmation until checkbox is checked", () => {
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -75,7 +89,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when closing via close button", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -89,7 +103,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when dismissing", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
@@ -103,7 +117,7 @@ describe("UnsafeRolesDialog", () => {
 
   it("emits the correct event when confirming", () => {
     const eventSpy = vi.spyOn(eventBus, "emit");
-    renderWithDeviceContext(
+    renderWithProviders(
       <UnsafeRolesDialog open={true} onOpenChange={vi.fn()} />,
     );
 
diff --git a/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx b/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx
index cd51f590..e96d5ee2 100644
--- a/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx
+++ b/src/components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.test.tsx
@@ -1,4 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it, Mock, vi } from "vitest";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type Mock,
+  vi,
+} from "vitest";
 import { renderHook } from "@testing-library/react";
 import {
   UNSAFE_ROLES,
@@ -6,6 +14,17 @@ import {
 } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
 import { eventBus } from "@core/utils/eventBus.ts";
 
+const mockNavigate = vi.fn();
+vi.mock("@tanstack/react-router", async (importOriginal) => {
+  const actual = await importOriginal<
+    typeof import("@tanstack/react-router")
+  >();
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
 vi.mock("@core/utils/eventBus", () => ({
   eventBus: {
     on: vi.fn(),
@@ -27,6 +46,7 @@ vi.mock("@core/stores/deviceStore", () => ({
 describe("useUnsafeRolesDialog", () => {
   beforeEach(() => {
     vi.resetAllMocks();
+    mockNavigate.mockClear();
   });
 
   afterEach(() => {
diff --git a/src/components/UI/ErrorPage.tsx b/src/components/UI/ErrorPage.tsx
index dbf50406..0f7037db 100644
--- a/src/components/UI/ErrorPage.tsx
+++ b/src/components/UI/ErrorPage.tsx
@@ -3,51 +3,58 @@ import { ExternalLink } from "lucide-react";
 import { Heading } from "@components/UI/Typography/Heading.tsx";
 import { Link } from "@components/UI/Typography/Link.tsx";
 import { P } from "@components/UI/Typography/P.tsx";
+import { Trans, useTranslation } from "react-i18next";
 
 export function ErrorPage({ error }: { error: Error }) {
   if (!error) {
     return null;
   }
 
+  const { t } = useTranslation();
+
   return (
-    <article className="w-full h-screen overflow-y-auto dark:bg-background-primary dark:text-text-primary">
+    <article className="w-full h-screen overflow-y-auto bg-background-primary text-text-primary">
       <section className="flex shrink md:flex-row gap-16 mt-20 px-4 md:px-8 text-lg md:text-xl space-y-2 place-items-center dark:bg-background-primary text-slate-900 dark:text-text-primary">
         <div>
           <Heading as="h2" className="text-text-primary">
-            This is a little embarrassing...
+            {t("errorPage.title")}
           </Heading>
           <P>
-            We are really sorry but an error occurred in the web client that
-            caused it to crash. <br />
-            This is not supposed to happen, and we are working hard to fix it.
+            {t("errorPage.description1")}
           </P>
           <P>
-            The best way to prevent this from happening again to you or anyone
-            else is to report the issue to us.
+            {t("errorPage.description2")}
           </P>
           <P>Please include the following information in your report:</P>
           <ul className="list-disc list-inside text-sm">
-            <li>What you were doing when the error occurred</li>
-            <li>What you expected to happen</li>
-            <li>What actually happened</li>
-            <li>Any other relevant information</li>
+            <li>{t("errorPage.reportSteps.step1")}</li>
+            <li>{t("errorPage.reportSteps.step2")}</li>
+            <li>{t("errorPage.reportSteps.step3")}</li>
+            <li>{t("errorPage.reportSteps.step4")}</li>
           </ul>
           <P>
-            You can report the issue to our{" "}
-            <Link
-              href={newGithubIssueUrl({
-                repoUrl: "https://github.com/meshtastic/web",
-                template: "bug.yml",
-                title: "[Bug]: An unhandled error occurred. <Add details here>",
-                logs: error?.stack,
-              })}
-            >
-              Github
-            </Link>
+            <Trans
+              i18nKey="errorPage.reportLink"
+              components={[
+                <Link
+                  key="github"
+                  href={newGithubIssueUrl({
+                    repoUrl: "https://github.com/meshtastic/web",
+                    template: "bug.yml",
+                    title:
+                      "[Bug]: An unhandled error occurred. <Add details here>",
+                    logs: error?.stack,
+                  })}
+                />,
+              ]}
+            />
             <ExternalLink size={24} className="inline-block ml-2" />
           </P>
           <P>
-            Return to the <Link href="/">dashboard</Link>
+            <Trans
+              i18nKey="errorPage.dashboardLink"
+              components={[<Link key="dashboard" href="/" />]}
+            />
           </P>
         </div>
 
@@ -60,22 +67,26 @@ export function ErrorPage({ error }: { error: Error }) {
         </div>
       </section>
       <details className="mt-8 px-4 md:px-8 text-lg md:text-xl space-y-2 text-md whitespace-pre-wrap break-all">
-        <summary className="cursor-pointer">Error Details</summary>
+        <summary className="cursor-pointer">
+          {t("errorPage.detailsSummary")}
+        </summary>
         <span className="text-sm mt-4">
           {error?.message && (
             <>
-              <label htmlFor="message">Error message:</label>
+              <label htmlFor="message">
+                {t("errorPage.errorMessageLabel")}
+              </label>
               <p
                 id="message"
                 className="text-slate-400 break-words overflow-wrap"
               >
                 {error.message}
               </p>
-            </>
+            </> // TODO: Use Trans for the label and message together?
           )}
           {error?.stack && (
             <>
-              <label htmlFor="stack">Stack trace:</label>
+              <label htmlFor="stack">{t("errorPage.stackTraceLabel")}</label>
               <p
                 id="stack"
                 className="text-slate-400 break-words overflow-wrap"
@@ -85,7 +96,9 @@ export function ErrorPage({ error }: { error: Error }) {
             </>
           )}
           {!error?.message && !error?.stack && (
-            <p className="text-slate-400">{error.toString()}</p>
+            <p className="text-slate-400">
+              {t("errorPage.fallbackError", { error: error.toString() })}
+            </p>
           )}
         </span>
       </details>
diff --git a/src/components/UI/Typography/Link.tsx b/src/components/UI/Typography/Link.tsx
index 5c95a0ab..de477ed9 100644
--- a/src/components/UI/Typography/Link.tsx
+++ b/src/components/UI/Typography/Link.tsx
@@ -1,14 +1,18 @@
-import { cn } from "../../../core/utils/cn.ts";
+import { cn } from "@core/utils/cn.ts";
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from "@tanstack/react-router";
 
-export interface LinkProps {
+export interface LinkProps extends RouterLinkProps {
   href: string;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
 export const Link = ({ href, children, className }: LinkProps) => (
-  <a
-    href={href}
+  <RouterLink
+    to={href}
     target="_blank"
     rel="noopener noreferrer"
     className={cn(
@@ -17,5 +21,5 @@ export const Link = ({ href, children, className }: LinkProps) => (
     )}
   >
     {children}
-  </a>
+  </RouterLink>
 );
diff --git a/src/core/utils/test.tsx b/src/core/utils/test.tsx
index 9169fe7e..cb9906ae 100644
--- a/src/core/utils/test.tsx
+++ b/src/core/utils/test.tsx
@@ -1,12 +1,80 @@
-import { render } from "@testing-library/react";
-import type { ReactElement } from "react";
+import {
+  createMemoryHistory,
+  createRouter,
+  Outlet,
+  RootRoute,
+  Route,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { render as rtlRender, RenderOptions } from "@testing-library/react";
+import type { FunctionComponent, ReactElement, ReactNode } from "react";
 
-function customRender(ui: ReactElement, options = {}) {
-  return render(ui, {
-    // wrapper: ({ children }) => <MapProvider>{children}</MapProvider>,
-    ...options,
-  });
+// a root route for the test router.
+const rootRoute = new RootRoute({
+  component: () => (
+    <>
+      <Outlet />
+    </>
+  ),
+});
+
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+  initialEntries?: string[];
+  ui?: ReactElement;
 }
 
+let currentRouter: ReturnType<typeof createRouter> | null = null;
+
+/**
+ * Custom render function for testing components that need TanStack Router context.
+ * @param ui The main ReactElement to render (your component under test).
+ * @param options Custom render options including initialEntries for the router.
+ * @returns An object containing the testing-library render result and the router instance.
+ */
+const customRender = (
+  ui: ReactElement,
+  options: CustomRenderOptions = {},
+) => {
+  const { initialEntries = ["/"], ...renderOptions } = options;
+
+  // A specific route that renders the component under test (ui).
+  // It defaults to the first path in initialEntries or '/'.
+  const testComponentRoute = new Route({
+    getParentRoute: () => rootRoute,
+    path: initialEntries[0] || "/",
+    component: () => ui, // The component passed to render will be the element for this route
+  });
+
+  const routeTree = rootRoute.addChildren([testComponentRoute]);
+
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries }),
+    routeTree,
+    // You can add default error components or other router options if needed for tests.
+    // defaultErrorComponent: ({ error }) => <div>Test Error: {error.message}</div>,
+  });
+
+  currentRouter = router; // Store the router instance for access in tests
+
+  const Wrapper: FunctionComponent<{ children?: ReactNode }> = (
+    { children },
+  ) => {
+    return (
+      <>
+        <RouterProvider router={router} />
+        {children}
+      </>
+    );
+  };
+
+  const renderResult = rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+
+  return {
+    ...renderResult,
+    router,
+  };
+};
+
 export * from "@testing-library/react";
 export { customRender as render };
+export const getTestRouter = () => currentRouter;
diff --git a/src/i18n/locales/en/ui.json b/src/i18n/locales/en/ui.json
index 292f6927..a8075b94 100644
--- a/src/i18n/locales/en/ui.json
+++ b/src/i18n/locales/en/ui.json
@@ -156,6 +156,24 @@
     "system": "Automatic",
     "changeTheme": "Change Color Scheme"
   },
+  "errorPage": {
+    "title": "This is a little embarrassing...",
+    "description1": "We are really sorry but an error occurred in the web client that caused it to crash. <br /> This is not supposed to happen, and we are working hard to fix it.",
+    "description2": "The best way to prevent this from happening again to you or anyone else is to report the issue to us.",
+    "reportInstructions": "Please include the following information in your report:",
+    "reportSteps": {
+      "step1": "What you were doing when the error occurred",
+      "step2": "What you expected to happen",
+      "step3": "What actually happened",
+      "step4": "Any other relevant information"
+    },
+    "reportLink": "You can report the issue to our <0>Github</0>",
+    "dashboardLink": "Return to the <0>dashboard</0>",
+    "detailsSummary": "Error Details",
+    "errorMessageLabel": "Error message:",
+    "stackTraceLabel": "Stack trace:",
+    "fallbackError": "{{error}}"
+  },
   "footer": {
     "text": "Powered by <0>▲ Vercel</0> | Meshtastic® is a registered trademark of Meshtastic LLC. | <1>Legal Information</1>",
     "commitSha": "Commit SHA: {{sha}}"
diff --git a/src/index.tsx b/src/index.tsx
index dbaafd39..95c0de83 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ import { StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import "./i18n/config.ts";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { routeTree } from "@app/routes.tsx";
 
 declare module "@tanstack/react-router" {
@@ -26,6 +27,7 @@ root.render(
   <StrictMode>
     <Suspense fallback={null}>
       <RouterProvider router={router} />
+      <TanStackRouterDevtools position="bottom-right" />
     </Suspense>
   </StrictMode>,
 );
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index 6ee5f000..a8392b9d 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -28,6 +28,7 @@ import { Input } from "@components/UI/Input.tsx";
 import { randId } from "@core/utils/randId.ts";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "@tanstack/react-router";
+import { useLocation } from "@tanstack/react-router";
 
 type NodeInfoWithUnread = Protobuf.Mesh.NodeInfo & { unreadCount: number };
 
@@ -46,7 +47,7 @@ export const MessagesPage = () => {
     getMessages,
     setMessageState,
   } = useMessageStore();
-  const params = useParams({ strict: false });
+  const params = useParams();
   const navigate = useNavigate();
   const { toast } = useToast();
   const { isCollapsed } = useSidebar();
diff --git a/src/tests/setupTests.ts b/src/tests/setupTests.ts
index 37f1f3c1..4211fb77 100644
--- a/src/tests/setupTests.ts
+++ b/src/tests/setupTests.ts
@@ -5,16 +5,28 @@ import "@testing-library/jest-dom";
 import "@testing-library/user-event";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import channelsEN from "@app/i18n/locales/en/channels.json";
-import commandPaletteEN from "@app/i18n/locales/en/commandPalette.json";
-import commonEN from "@app/i18n/locales/en/common.json";
-import deviceConfigEN from "@app/i18n/locales/en/deviceConfig.json";
-import moduleConfigEN from "@app/i18n/locales/en/moduleConfig.json";
-import dashboardEN from "@app/i18n/locales/en/dashboard.json";
-import dialogEN from "@app/i18n/locales/en/dialog.json";
-import messagesEN from "@app/i18n/locales/en/messages.json";
-import nodesEN from "@app/i18n/locales/en/nodes.json";
-import uiEN from "@app/i18n/locales/en/ui.json";
+import channelsEN from "@app/i18n/locales/en/channels.json" with {
+  type: "json",
+};
+import commandPaletteEN from "@app/i18n/locales/en/commandPalette.json" with {
+  type: "json",
+};
+import commonEN from "@app/i18n/locales/en/common.json" with { type: "json" };
+import deviceConfigEN from "@app/i18n/locales/en/deviceConfig.json" with {
+  type: "json",
+};
+import moduleConfigEN from "@app/i18n/locales/en/moduleConfig.json" with {
+  type: "json",
+};
+import dashboardEN from "@app/i18n/locales/en/dashboard.json" with {
+  type: "json",
+};
+import dialogEN from "@app/i18n/locales/en/dialog.json" with { type: "json" };
+import messagesEN from "@app/i18n/locales/en/messages.json" with {
+  type: "json",
+};
+import nodesEN from "@app/i18n/locales/en/nodes.json" with { type: "json" };
+import uiEN from "@app/i18n/locales/en/ui.json" with { type: "json" };
 
 enableMapSet();
 
diff --git a/vitest.config.ts b/vitest.config.ts
index 24aa0ac4..537096e0 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -25,6 +25,6 @@ export default defineConfig({
     restoreMocks: true,
     root: path.resolve(process.cwd(), "./src"),
     include: ["**/*.{test,spec}.{ts,tsx}"],
-    setupFiles: ["./src/tests/setupTests.ts"],
+    setupFiles: ["./src/tests/setupTests.ts", "./src/core/utils/test.tsx"],
   },
 });