diff --git a/bun.lockb b/bun.lockb
index 8298edf302..9721f31b6c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/react-app/package.json b/react-app/package.json
index b830968153..df1aa13248 100644
--- a/react-app/package.json
+++ b/react-app/package.json
@@ -63,7 +63,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.46.2",
     "react-loader-spinner": "^6.1.6",
-    "react-router-dom": "^6.10.0",
+    "react-router": "^7.0.2",
     "react-select": "^5.7.4",
     "shared-types": "*",
     "shared-utils": "*",
diff --git a/react-app/src/components/ActionForm/actionForm.components.tsx b/react-app/src/components/ActionForm/actionForm.components.tsx
index 479337c83a..4f4d872d2d 100644
--- a/react-app/src/components/ActionForm/actionForm.components.tsx
+++ b/react-app/src/components/ActionForm/actionForm.components.tsx
@@ -1,5 +1,5 @@
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { z } from "zod";
 
 export const AttachmentFileFormatInstructions = () => (
diff --git a/react-app/src/components/ActionForm/index.tsx b/react-app/src/components/ActionForm/index.tsx
index bb52221235..fbb6020834 100644
--- a/react-app/src/components/ActionForm/index.tsx
+++ b/react-app/src/components/ActionForm/index.tsx
@@ -21,7 +21,7 @@ import {
 import { DefaultValues, FieldPath, useForm, UseFormReturn } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { Navigate, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Navigate, useLocation, useNavigate, useParams } from "react-router";
 import { getFormOrigin } from "@/utils";
 import { CheckDocumentFunction, documentPoller } from "@/utils/Poller/documentPoller";
 import { API } from "aws-amplify";
@@ -168,12 +168,16 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
       }
 
       const formOrigins = getFormOrigin({ authority, id });
-      banner({
-        ...bannerPostSubmission,
-        pathnameToDisplayOn: formOrigins.pathname,
-      });
 
       navigate(formOrigins);
+
+      // artificially delaying allows the banner to be displayed after navigation
+      setTimeout(() => {
+        banner({
+          ...bannerPostSubmission,
+          pathnameToDisplayOn: formOrigins.pathname,
+        });
+      }, 50);
     } catch (error) {
       console.error(error);
       banner({
@@ -229,7 +233,7 @@ export const ActionForm = <Schema extends SchemaWithEnforcableProps>({
           )}
           {additionalInformation && (
             <SectionCard
-              testId = "additional-info"
+              testId="additional-info"
               title={
                 <>
                   {additionalInformation.title}{" "}
diff --git a/react-app/src/components/Banner/banner.test.tsx b/react-app/src/components/Banner/banner.test.tsx
index 95a95458bb..3ca32ec78b 100644
--- a/react-app/src/components/Banner/banner.test.tsx
+++ b/react-app/src/components/Banner/banner.test.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Link, MemoryRouter, Route, Routes } from "react-router-dom";
+import { Link, MemoryRouter, Route, Routes } from "react-router";
 import { describe, expect, test } from "vitest";
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -8,14 +8,8 @@ import { banner, Banner } from ".";
 const wrapper = ({ children }: { children: ReactNode }) => (
   <MemoryRouter initialEntries={["/dashboard"]}>
     <Routes>
-      <Route
-        path="/dashboard"
-        element={<Link to="/example" id="dashboard-link" />}
-      />
-      <Route
-        path="/example"
-        element={<Link to="/dashboard" id="example-link" />}
-      />
+      <Route path="/dashboard" element={<Link to="/example" id="dashboard-link" />} />
+      <Route path="/example" element={<Link to="/dashboard" id="example-link" />} />
     </Routes>
     {children}
   </MemoryRouter>
diff --git a/react-app/src/components/Banner/banner.tsx b/react-app/src/components/Banner/banner.tsx
index 48adf4c858..68103c4f59 100644
--- a/react-app/src/components/Banner/banner.tsx
+++ b/react-app/src/components/Banner/banner.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Alert, AlertVariant } from "../Alert";
 import { Check, X } from "lucide-react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { Observer } from "@/utils/basic-observable";
 
 export type Banner = {
@@ -57,10 +57,7 @@ export const Banner = () => {
 
   if (activeBanner && activeBanner.pathnameToDisplayOn === pathname) {
     return (
-      <Alert
-        variant={activeBanner.variant}
-        className="mt-4 mb-8 flex-row text-sm"
-      >
+      <Alert variant={activeBanner.variant} className="mt-4 mb-8 flex-row text-sm">
         <div className="flex items-start justify-between">
           <Check />
           <div className="ml-2 w-full">
diff --git a/react-app/src/components/BreadCrumb/BreadCrumb.test.tsx b/react-app/src/components/BreadCrumb/BreadCrumb.test.tsx
index 691aa7c2de..76c381a0c9 100644
--- a/react-app/src/components/BreadCrumb/BreadCrumb.test.tsx
+++ b/react-app/src/components/BreadCrumb/BreadCrumb.test.tsx
@@ -2,7 +2,7 @@ import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BreadCrumb, BreadCrumbBar, BreadCrumbs } from "./BreadCrumb";
-import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useLocation } from "react-router";
 
 import { optionCrumbsFromPath } from "./create-breadcrumbs";
 import { Authority } from "shared-types";
diff --git a/react-app/src/components/BreadCrumb/BreadCrumb.tsx b/react-app/src/components/BreadCrumb/BreadCrumb.tsx
index 8acee4c708..cfca4089c8 100644
--- a/react-app/src/components/BreadCrumb/BreadCrumb.tsx
+++ b/react-app/src/components/BreadCrumb/BreadCrumb.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { type ReactNode } from "react";
 import { ChevronRight } from "lucide-react";
 
@@ -29,11 +29,7 @@ export const BreadCrumbs = ({ options }: BreadCrumbsProps) => {
         .toSorted((option, prevOption) => option.order - prevOption.order)
         .map(({ displayText, to }, index, optionsArray) => {
           return (
-            <BreadCrumb
-              key={displayText}
-              to={to}
-              active={index !== optionsArray.length - 1}
-            >
+            <BreadCrumb key={displayText} to={to} active={index !== optionsArray.length - 1}>
               {displayText}
             </BreadCrumb>
           );
@@ -78,11 +74,7 @@ export const BreadCrumbSeperator = () => <ChevronRight className="w-5 h-5" />;
 
 export const BreadCrumbBar = ({ children }: React.PropsWithChildren) => {
   return (
-    <nav
-      role="navigation"
-      aria-label="breadcrumbs for spa or waiver choices"
-      className="my-4"
-    >
+    <nav role="navigation" aria-label="breadcrumbs for spa or waiver choices" className="my-4">
       <ul className="flex gap-1">{children}</ul>
     </nav>
   );
diff --git a/react-app/src/components/Cards/OptionCard.test.tsx b/react-app/src/components/Cards/OptionCard.test.tsx
index 46c28ab3c9..f0e880a4a1 100644
--- a/react-app/src/components/Cards/OptionCard.test.tsx
+++ b/react-app/src/components/Cards/OptionCard.test.tsx
@@ -1,25 +1,17 @@
 import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { OptionCard, OptionFieldset } from "@/components";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 describe("OptionFieldset", () => {
   beforeEach(() => {
-    render(
-      <OptionFieldset legend={"Test Legend"}>
-        Testing rendering of children
-      </OptionFieldset>,
-    );
+    render(<OptionFieldset legend={"Test Legend"}>Testing rendering of children</OptionFieldset>);
   });
   test("legend prop populates legend element in fieldset", () => {
-    expect(
-      screen.getByRole("group", { name: "Test Legend" }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("group", { name: "Test Legend" })).toBeInTheDocument();
   });
   test("renders children", () => {
-    expect(
-      screen.getByText("Testing rendering of children"),
-    ).toBeInTheDocument();
+    expect(screen.getByText("Testing rendering of children")).toBeInTheDocument();
   });
 });
 
diff --git a/react-app/src/components/Cards/OptionCard.tsx b/react-app/src/components/Cards/OptionCard.tsx
index 2cd82e53dc..8e9781414d 100644
--- a/react-app/src/components/Cards/OptionCard.tsx
+++ b/react-app/src/components/Cards/OptionCard.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from "react";
-import { Link, LinkProps } from "react-router-dom";
+import { Link, LinkProps } from "react-router";
 import { ChevronRight } from "lucide-react";
 import { CardWithTopBorder } from "@/components";
 
@@ -13,10 +13,7 @@ export type MACFieldsetOption = {
   altBg?: boolean;
 };
 /** A fieldset for nesting {@link OptionCard} with MACCard styling */
-export const OptionFieldset = ({
-  children,
-  legend,
-}: OptionCardFieldsetProps) => {
+export const OptionFieldset = ({ children, legend }: OptionCardFieldsetProps) => {
   return (
     <section className="max-w-3xl mx-auto mb-6">
       <fieldset>
@@ -28,12 +25,7 @@ export const OptionFieldset = ({
 };
 /** An element for use in options lists that lead to a destination, such as
  * the new submission options found in {@link NewSubmissionInitialOptions} */
-export const OptionCard = ({
-  title,
-  description,
-  to,
-  altBg = false,
-}: MACFieldsetOption) => {
+export const OptionCard = ({ title, description, to, altBg = false }: MACFieldsetOption) => {
   return (
     <label>
       <Link to={to} relative="path">
diff --git a/react-app/src/components/Footer/Footer.test.tsx b/react-app/src/components/Footer/Footer.test.tsx
index c08c2149a6..98edf0b5cd 100644
--- a/react-app/src/components/Footer/Footer.test.tsx
+++ b/react-app/src/components/Footer/Footer.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 
 import { Footer, FAQFooter } from "./index";
 
@@ -32,8 +32,6 @@ describe("FAQFooter", () => {
     );
 
     expect(screen.queryByText("View FAQ")).toBeInTheDocument();
-    expect(
-      screen.queryByText("Do you have questions or need support?"),
-    ).toBeInTheDocument();
+    expect(screen.queryByText("Do you have questions or need support?")).toBeInTheDocument();
   });
 });
diff --git a/react-app/src/components/Footer/index.tsx b/react-app/src/components/Footer/index.tsx
index db845dfe4d..a186071bb8 100644
--- a/react-app/src/components/Footer/index.tsx
+++ b/react-app/src/components/Footer/index.tsx
@@ -1,7 +1,7 @@
 import MedicaidLogo from "@/assets/MedicaidLogo.svg";
 import DepartmentOfHealthLogo from "@/assets/DepartmentOfHealthLogo.svg";
 import { Alert, Button } from "@/components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type Props = {
   email: string;
@@ -29,9 +29,8 @@ export const Footer = ({ email, address }: Props) => {
             alt="Logo for Department of Health and Human Services"
           />
           <p className="col-span-12 sm:col-span-4">
-            A federal government website managed and paid for by the U.S.
-            Centers for Medicare and Medicaid Services and part of the MACPro
-            suite.
+            A federal government website managed and paid for by the U.S. Centers for Medicare and
+            Medicaid Services and part of the MACPro suite.
           </p>
         </div>
       </section>
diff --git a/react-app/src/components/Form/content/FormLoadingSpinner.tsx b/react-app/src/components/Form/content/FormLoadingSpinner.tsx
index 06979225fd..d5f3337cfe 100644
--- a/react-app/src/components/Form/content/FormLoadingSpinner.tsx
+++ b/react-app/src/components/Form/content/FormLoadingSpinner.tsx
@@ -1,11 +1,9 @@
-import { useNavigation } from "react-router-dom";
+import { useNavigation } from "react-router";
 import { useFormContext } from "react-hook-form";
 import { LoadingSpinner } from "@/components";
 
 export const FormLoadingSpinner = () => {
   const { state } = useNavigation();
   const { formState } = useFormContext();
-  return (
-    (state === "submitting" || formState.isSubmitting) && <LoadingSpinner />
-  );
+  return (state === "submitting" || formState.isSubmitting) && <LoadingSpinner />;
 };
diff --git a/react-app/src/components/Form/content/PackageSection.tsx b/react-app/src/components/Form/content/PackageSection.tsx
index 728adaf410..ee1640d3f9 100644
--- a/react-app/src/components/Form/content/PackageSection.tsx
+++ b/react-app/src/components/Form/content/PackageSection.tsx
@@ -1,5 +1,5 @@
 import { BLANK_VALUE } from "@/consts";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { AuthorityUnion } from "shared-types";
 
 export const getIdLabel = (authority: AuthorityUnion) => {
diff --git a/react-app/src/components/Form/old-content.tsx b/react-app/src/components/Form/old-content.tsx
index 58c8ac78ed..60eb53e3be 100644
--- a/react-app/src/components/Form/old-content.tsx
+++ b/react-app/src/components/Form/old-content.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/components";
 import { FAQ_TAB } from "@/router";
 import { Info } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 type FormIntroTextProps = {
   hasProgressLossReminder?: boolean;
diff --git a/react-app/src/components/Layout/index.test.tsx b/react-app/src/components/Layout/index.test.tsx
index 5d04ab71e7..96d2e41372 100644
--- a/react-app/src/components/Layout/index.test.tsx
+++ b/react-app/src/components/Layout/index.test.tsx
@@ -25,8 +25,8 @@ vi.mock("@/components", () => ({
 
 // Navigation mock
 const mockNavigate = vi.fn();
-vi.mock("react-router-dom", async () => {
-  const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual<typeof import("react-router")>("react-router");
   return {
     ...actual,
     useNavigate: () => mockNavigate,
diff --git a/react-app/src/components/Layout/index.tsx b/react-app/src/components/Layout/index.tsx
index 713839c6fd..d661c2c88a 100644
--- a/react-app/src/components/Layout/index.tsx
+++ b/react-app/src/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import { NavLink, NavLinkProps, Outlet, Link, useNavigate } from "react-router-dom";
+import { NavLink, NavLinkProps, Outlet, Link, useNavigate } from "react-router";
 import oneMacLogo from "@/assets/onemac-logo.png";
 import { useMediaQuery } from "@/hooks";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
diff --git a/react-app/src/components/Opensearch/main/useOpensearch.ts b/react-app/src/components/Opensearch/main/useOpensearch.ts
index c6eb10e903..4a0006088b 100644
--- a/react-app/src/components/Opensearch/main/useOpensearch.ts
+++ b/react-app/src/components/Opensearch/main/useOpensearch.ts
@@ -5,7 +5,7 @@ import { getOsData, useOsSearch, useGetUser } from "@/api";
 import { useLzUrl } from "@/hooks";
 import { OsTab } from "./types";
 import { createSearchFilterable } from "../utils";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 export const DEFAULT_FILTERS: Record<OsTab, Partial<OsUrlState>> = {
   spas: {
@@ -104,13 +104,11 @@ export const useOsAggregate = () => {
           },
           {
             field:
-              user?.isCms &&
-              !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
+              user?.isCms && !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
                 ? "cmsStatus.keyword"
                 : "stateStatus.keyword",
             name:
-              user?.isCms &&
-              !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
+              user?.isCms && !user.user?.["custom:cms-roles"].includes(UserRoles.HELPDESK)
                 ? "cmsStatus.keyword"
                 : "stateStatus.keyword",
             type: "terms",
diff --git a/react-app/src/components/RHF/RHFTextDisplay.tsx b/react-app/src/components/RHF/RHFTextDisplay.tsx
index cf25f752c3..80f96999ca 100644
--- a/react-app/src/components/RHF/RHFTextDisplay.tsx
+++ b/react-app/src/components/RHF/RHFTextDisplay.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/utils";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { RHFTextField } from "shared-types";
 
 interface RHFTextDisplayProps {
@@ -34,15 +34,10 @@ export const RHFTextDisplay = (props: RHFTextDisplayProps) => {
       case "italic":
         return <i className={t.classname}>{t.text}</i>;
       case "numberedSet":
-        return (
-          <span className={t.classname}>{`${t.text} ${props.index + 1}`}</span>
-        );
+        return <span className={t.classname}>{`${t.text} ${props.index + 1}`}</span>;
       case "link":
         return (
-          <Link
-            to={t.link ?? "/"}
-            className={cn("cursor-pointer text-blue-600 ml-0", t.classname)}
-          >
+          <Link to={t.link ?? "/"} className={cn("cursor-pointer text-blue-600 ml-0", t.classname)}>
             {t.text}
           </Link>
         );
diff --git a/react-app/src/components/RHF/tests/RHFTextDisplay.test.tsx b/react-app/src/components/RHF/tests/RHFTextDisplay.test.tsx
index 99c00a13ff..f87370e2f6 100644
--- a/react-app/src/components/RHF/tests/RHFTextDisplay.test.tsx
+++ b/react-app/src/components/RHF/tests/RHFTextDisplay.test.tsx
@@ -1,6 +1,6 @@
 import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from "react-router";
 import { RHFTextDisplay } from "..";
 import { RHFTextField } from "shared-types";
 
diff --git a/react-app/src/components/ScrollToTop/index.ts b/react-app/src/components/ScrollToTop/index.ts
index 6a001cff8b..12a010f602 100644
--- a/react-app/src/components/ScrollToTop/index.ts
+++ b/react-app/src/components/ScrollToTop/index.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 export const ScrollToTop = () => {
   const { pathname } = useLocation();
diff --git a/react-app/src/components/UsaBanner/UsaBanner.test.tsx b/react-app/src/components/UsaBanner/UsaBanner.test.tsx
index f7b3f46128..a60684a23f 100644
--- a/react-app/src/components/UsaBanner/UsaBanner.test.tsx
+++ b/react-app/src/components/UsaBanner/UsaBanner.test.tsx
@@ -3,15 +3,13 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, test, vi } from "vitest";
 import { UsaBanner } from ".";
 
-vi.mock("react-router-dom", () => ({
+vi.mock("react-router", () => ({
   useLoaderData: vi.fn().mockImplementation(() => ({ error: "" })),
 }));
 
 describe("UsaBanner", () => {
   test("clicking on button expands banner information (small)", async () => {
-    const { queryAllByRole, queryByText } = render(
-      <UsaBanner isUserMissingRole={false} />,
-    );
+    const { queryAllByRole, queryByText } = render(<UsaBanner isUserMissingRole={false} />);
 
     const button = queryAllByRole("button")[0];
     await userEvent.click(button);
@@ -20,9 +18,7 @@ describe("UsaBanner", () => {
   });
 
   test("clicking on button expands banner information (large)", async () => {
-    const { queryAllByRole, queryByText } = render(
-      <UsaBanner isUserMissingRole={false} />,
-    );
+    const { queryAllByRole, queryByText } = render(<UsaBanner isUserMissingRole={false} />);
 
     const button = queryAllByRole("button")[1];
     await userEvent.click(button);
@@ -47,9 +43,7 @@ describe("UsaBanner", () => {
   });
 
   test("government building icon renders", async () => {
-    const { queryByTestId, queryAllByRole } = render(
-      <UsaBanner isUserMissingRole={true} />,
-    );
+    const { queryByTestId, queryAllByRole } = render(<UsaBanner isUserMissingRole={true} />);
 
     const button = queryAllByRole("button")[0];
     await userEvent.click(button);
diff --git a/react-app/src/components/UsaBanner/index.tsx b/react-app/src/components/UsaBanner/index.tsx
index 66a12030dd..b04f43379e 100644
--- a/react-app/src/components/UsaBanner/index.tsx
+++ b/react-app/src/components/UsaBanner/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData } from "react-router";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import config from "@/config";
 import { LockIcon } from "../LockIcon";
@@ -57,14 +57,8 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
   return (
     <div className="bg-[#f0f0f0]" role="banner">
       <div className="max-w-screen-xl px-4 py-1 lg:px-8 text-xs mx-auto gap-2 items-center hidden md:flex">
-        <img
-          className="w-4 h-[11px]"
-          src={UsFlag}
-          alt="A United States Flag icon"
-        />
-        <p data-testid="usa-statement-d">
-          An official website of the United States government
-        </p>
+        <img className="w-4 h-[11px]" src={UsFlag} alt="A United States Flag icon" />
+        <p data-testid="usa-statement-d">An official website of the United States government</p>
         <button
           data-testid="usa-expand-btn-d"
           className="flex"
@@ -83,20 +77,11 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
         className="w-full flex items-center text-[0.8rem] px-4 py-1 leading-4 gap-2 md:hidden"
         onClick={() => setIsOpen((value) => !value)}
       >
-        <img
-          className="w-4 h-[11px]"
-          src={UsFlag}
-          alt="A United States Flag icon"
-        />
+        <img className="w-4 h-[11px]" src={UsFlag} alt="A United States Flag icon" />
         <div>
-          <p data-testid="usa-statement-m">
-            An official website of the United States government
-          </p>
+          <p data-testid="usa-statement-m">An official website of the United States government</p>
           <div className="flex">
-            <span
-              data-testid="usa-expand-btn-m"
-              className="underline text-[#005ea2] block"
-            >
+            <span data-testid="usa-expand-btn-m" className="underline text-[#005ea2] block">
               Here's how you know
             </span>
             {isOpen ? (
@@ -130,18 +115,16 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
           <div className="flex gap-2">
             <GovernmentBuildingIcon />
             <p data-testid="official-usage" className="text-sm max-w-md">
-              <strong className="block">Official websites use .gov</strong>A
-              <strong>.gov</strong> website belongs to an official government
-              organization in the United States.
+              <strong className="block">Official websites use .gov</strong>A<strong>.gov</strong>{" "}
+              website belongs to an official government organization in the United States.
             </p>
           </div>
           <div className="flex gap-2">
             <LockIcon className="min-w-[40px] min-h-[40px] w-10" />
             <p data-testid="secure-usage" className="text-sm max-w-md">
               <strong className="block">Secure .gov websites use HTTPS</strong>
-              A lock (<MiniLock />) or <strong>https://</strong> means you've
-              safely connected to the .gov website. Share sensitive information
-              only on official, secure websites.
+              A lock (<MiniLock />) or <strong>https://</strong> means you've safely connected to
+              the .gov website. Share sensitive information only on official, secure websites.
             </p>
           </div>
         </div>
diff --git a/react-app/src/features/dashboard/Lists/renderCells/index.tsx b/react-app/src/features/dashboard/Lists/renderCells/index.tsx
index 6111eb11b2..03ad41d3e6 100644
--- a/react-app/src/features/dashboard/Lists/renderCells/index.tsx
+++ b/react-app/src/features/dashboard/Lists/renderCells/index.tsx
@@ -1,7 +1,7 @@
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 import { Authority, CognitoUserAttributes, opensearch } from "shared-types";
 import { getAvailableActions, formatSeatoolDate } from "shared-utils";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import * as POP from "@/components";
 import { cn, DASHBOARD_ORIGIN, mapActionLabel, ORIGIN } from "@/utils";
 
diff --git a/react-app/src/features/dashboard/index.tsx b/react-app/src/features/dashboard/index.tsx
index 7d8ba9f45c..14bdd64e42 100644
--- a/react-app/src/features/dashboard/index.tsx
+++ b/react-app/src/features/dashboard/index.tsx
@@ -14,7 +14,7 @@ import {
   TabsTrigger,
 } from "@/components";
 import { isStateUser } from "shared-utils";
-import { Link, Navigate, redirect } from "react-router-dom";
+import { Link, Navigate, redirect } from "react-router";
 
 const loader = (queryClient: QueryClient) => {
   return async () => {
@@ -25,9 +25,7 @@ const loader = (queryClient: QueryClient) => {
       });
     }
 
-    const isUser = queryClient.getQueryData(["user"]) as Awaited<
-      ReturnType<typeof getUser>
-    >;
+    const isUser = queryClient.getQueryData(["user"]) as Awaited<ReturnType<typeof getUser>>;
     if (!isUser.user) {
       return redirect("/");
     }
diff --git a/react-app/src/features/faq/index.tsx b/react-app/src/features/faq/index.tsx
index 82201df5e6..b263b54c65 100644
--- a/react-app/src/features/faq/index.tsx
+++ b/react-app/src/features/faq/index.tsx
@@ -8,7 +8,7 @@ import {
   AccordionTrigger,
   SubNavHeader,
 } from "@/components";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export const Faq = () => {
   const { id } = useParams<{ id: string }>();
@@ -34,23 +34,13 @@ export const Faq = () => {
       <section className="block md:flex md:flex-row max-w-screen-xl m-auto px-4 lg:px-8 pt-8 gap-10">
         <div className="flex-1">
           <article className="mb-8">
-            <Accordion
-              type="multiple"
-              value={openItems}
-              onValueChange={setOpenItems}
-            >
+            <Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
               {oneMACFAQContent.map(({ sectionTitle, qanda }) => (
                 <article key={sectionTitle} className="mb-8">
                   <h2 className="text-2xl mb-4 text-primary">{sectionTitle}</h2>
                   {qanda.map(({ anchorText, answerJSX, question }) => (
-                    <AccordionItem
-                      value={anchorText}
-                      id={anchorText}
-                      key={anchorText}
-                    >
-                      <AccordionTrigger className="text-left">
-                        {question}
-                      </AccordionTrigger>
+                    <AccordionItem value={anchorText} id={anchorText} key={anchorText}>
+                      <AccordionTrigger className="text-left">{question}</AccordionTrigger>
                       <AccordionContent>{answerJSX}</AccordionContent>
                     </AccordionItem>
                   ))}
@@ -62,25 +52,17 @@ export const Faq = () => {
         <div>
           <CardWithTopBorder>
             <div className="p-4">
-              <h3 className="text-lg text-bold mb-4">
-                OneMAC Help Desk Contact Info
-              </h3>
+              <h3 className="text-lg text-bold mb-4">OneMAC Help Desk Contact Info</h3>
               <div>
                 <b>Phone Number</b>
                 <p className="mb-4 text-primary">
-                  <a
-                    className="underline"
-                    href={`tel:${helpDeskContact.phone}`}
-                  >
+                  <a className="underline" href={`tel:${helpDeskContact.phone}`}>
                     {helpDeskContact.phone}
                   </a>
                 </p>
                 <b>Email</b>
                 <p className="text-primary">
-                  <a
-                    className="underline"
-                    href={`mailto:${helpDeskContact.email}`}
-                  >
+                  <a className="underline" href={`mailto:${helpDeskContact.email}`}>
                     {helpDeskContact.email}
                   </a>
                 </p>
diff --git a/react-app/src/features/forms/new-submission/Chip.tsx b/react-app/src/features/forms/new-submission/Chip.tsx
index 3db0b35088..050ede8932 100644
--- a/react-app/src/features/forms/new-submission/Chip.tsx
+++ b/react-app/src/features/forms/new-submission/Chip.tsx
@@ -10,7 +10,7 @@ import {
   Input,
   DatePicker,
 } from "@/components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
 import { getFAQLinkForAttachments } from "../faqLinks";
@@ -46,9 +46,7 @@ export const ChipForm = () => (
                   className="max-w-sm"
                   ref={field.ref}
                   value={field.value}
-                  onChange={(e) =>
-                    field.onChange(e.currentTarget.value.toUpperCase())
-                  }
+                  onChange={(e) => field.onChange(e.currentTarget.value.toUpperCase())}
                 />
               </FormControl>
               <FormMessage />
diff --git a/react-app/src/features/forms/new-submission/Medicaid.tsx b/react-app/src/features/forms/new-submission/Medicaid.tsx
index 01b367a644..b47b949982 100644
--- a/react-app/src/features/forms/new-submission/Medicaid.tsx
+++ b/react-app/src/features/forms/new-submission/Medicaid.tsx
@@ -13,7 +13,7 @@ import { ActionForm } from "@/components/ActionForm";
 import { AttachmentFileFormatInstructions } from "@/components/ActionForm/actionForm.components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const MedicaidForm = () => (
   <ActionForm
diff --git a/react-app/src/features/forms/post-submission/amend/index.tsx b/react-app/src/features/forms/post-submission/amend/index.tsx
index 5cce5f74c5..684b1c448b 100644
--- a/react-app/src/features/forms/post-submission/amend/index.tsx
+++ b/react-app/src/features/forms/post-submission/amend/index.tsx
@@ -1,4 +1,4 @@
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router";
 import { AmendmentForm as CapitatedForm } from "@/features/forms/waiver/capitated";
 import { AmendmentForm as ContractingForm } from "@/features/forms/waiver/contracting";
 import { useGetItem } from "@/api";
diff --git a/react-app/src/features/forms/post-submission/post-submission-forms.tsx b/react-app/src/features/forms/post-submission/post-submission-forms.tsx
index 2ac152c95b..a2aa014418 100644
--- a/react-app/src/features/forms/post-submission/post-submission-forms.tsx
+++ b/react-app/src/features/forms/post-submission/post-submission-forms.tsx
@@ -2,7 +2,7 @@ import { getItem } from "@/api";
 import { queryClient } from "../../../router";
 import { RespondToRaiChip, RespondToRaiMedicaid, RespondToRaiWaiver } from "./respond-to-rai";
 import { DisableWithdrawRaiForm, EnableWithdrawRaiForm } from "./toggle-withdraw-rai";
-import { LoaderFunction, Navigate, useParams } from "react-router-dom";
+import { LoaderFunction, Navigate, useParams } from "react-router";
 import { Action, AuthorityUnion } from "shared-types";
 import {
   WithdrawPackageAction,
diff --git a/react-app/src/features/forms/post-submission/respond-to-rai/index.tsx b/react-app/src/features/forms/post-submission/respond-to-rai/index.tsx
index b84e2303f3..6f0dccfc92 100644
--- a/react-app/src/features/forms/post-submission/respond-to-rai/index.tsx
+++ b/react-app/src/features/forms/post-submission/respond-to-rai/index.tsx
@@ -1,6 +1,6 @@
 import { ActionForm, PackageSection } from "@/components";
 import { formSchemas } from "@/formSchemas";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export const RespondToRaiMedicaid = () => {
   const { authority, id } = useParams();
diff --git a/react-app/src/features/forms/post-submission/toggle-withdraw-rai/index.tsx b/react-app/src/features/forms/post-submission/toggle-withdraw-rai/index.tsx
index 50a130f882..ed579f8325 100644
--- a/react-app/src/features/forms/post-submission/toggle-withdraw-rai/index.tsx
+++ b/react-app/src/features/forms/post-submission/toggle-withdraw-rai/index.tsx
@@ -1,7 +1,7 @@
 import { ActionForm } from "@/components/ActionForm";
 import { formSchemas } from "@/formSchemas";
 import { PackageSection } from "@/components/Form/content/PackageSection";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { isCmsUser } from "shared-utils";
 
 export const EnableWithdrawRaiForm = () => {
diff --git a/react-app/src/features/forms/post-submission/upload-subsequent-documents/index.tsx b/react-app/src/features/forms/post-submission/upload-subsequent-documents/index.tsx
index f783603e61..bdcbb2b227 100644
--- a/react-app/src/features/forms/post-submission/upload-subsequent-documents/index.tsx
+++ b/react-app/src/features/forms/post-submission/upload-subsequent-documents/index.tsx
@@ -10,7 +10,7 @@ import {
   AttachmentFileFormatInstructions,
 } from "@/components/ActionForm/actionForm.components";
 import { formSchemas } from "@/formSchemas";
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router";
 import { z } from "zod";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
diff --git a/react-app/src/features/forms/post-submission/withdraw-package/index.tsx b/react-app/src/features/forms/post-submission/withdraw-package/index.tsx
index 190732980d..6d2d0c1b73 100644
--- a/react-app/src/features/forms/post-submission/withdraw-package/index.tsx
+++ b/react-app/src/features/forms/post-submission/withdraw-package/index.tsx
@@ -1,7 +1,7 @@
 import { useGetItem } from "@/api";
 import { ActionForm, LoadingSpinner, PackageSection } from "@/components";
 import { formSchemas } from "@/formSchemas";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { SEATOOL_STATUS } from "shared-types";
 
 export const WithdrawPackageActionWaiver = () => {
diff --git a/react-app/src/features/forms/post-submission/withdraw-rai/index.tsx b/react-app/src/features/forms/post-submission/withdraw-rai/index.tsx
index efddb42153..2aca202367 100644
--- a/react-app/src/features/forms/post-submission/withdraw-rai/index.tsx
+++ b/react-app/src/features/forms/post-submission/withdraw-rai/index.tsx
@@ -1,7 +1,7 @@
 import { PackageSection } from "@/components/Form/content/PackageSection";
 import { ActionForm } from "@/components/ActionForm";
 import { formSchemas } from "@/formSchemas";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export const WithdrawRaiForm = () => {
   const { authority, id } = useParams();
diff --git a/react-app/src/features/forms/waiver/app-k/index.tsx b/react-app/src/features/forms/waiver/app-k/index.tsx
index 4e05a575d0..4c7bfbd567 100644
--- a/react-app/src/features/forms/waiver/app-k/index.tsx
+++ b/react-app/src/features/forms/waiver/app-k/index.tsx
@@ -13,7 +13,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Authority } from "shared-types";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
diff --git a/react-app/src/features/forms/waiver/capitated/Amendment.tsx b/react-app/src/features/forms/waiver/capitated/Amendment.tsx
index 8f9d0b2bd9..df3b547150 100644
--- a/react-app/src/features/forms/waiver/capitated/Amendment.tsx
+++ b/react-app/src/features/forms/waiver/capitated/Amendment.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 interface AmendmentFormProps {
@@ -131,4 +131,4 @@ export const AmendmentForm = ({ waiverId }: AmendmentFormProps) => {
       }}
     />
   );
-};
\ No newline at end of file
+};
diff --git a/react-app/src/features/forms/waiver/capitated/Initial.tsx b/react-app/src/features/forms/waiver/capitated/Initial.tsx
index 41d34587b2..b19b6ea17c 100644
--- a/react-app/src/features/forms/waiver/capitated/Initial.tsx
+++ b/react-app/src/features/forms/waiver/capitated/Initial.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const InitialForm = () => (
diff --git a/react-app/src/features/forms/waiver/capitated/Renewal.tsx b/react-app/src/features/forms/waiver/capitated/Renewal.tsx
index 77a5c37560..8f3d1fe781 100644
--- a/react-app/src/features/forms/waiver/capitated/Renewal.tsx
+++ b/react-app/src/features/forms/waiver/capitated/Renewal.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const Renewal = () => (
diff --git a/react-app/src/features/forms/waiver/contracting/Amendment.tsx b/react-app/src/features/forms/waiver/contracting/Amendment.tsx
index 1ff867e1bc..295cfeb414 100644
--- a/react-app/src/features/forms/waiver/contracting/Amendment.tsx
+++ b/react-app/src/features/forms/waiver/contracting/Amendment.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 interface AmendmentFormProps {
diff --git a/react-app/src/features/forms/waiver/contracting/Initial.tsx b/react-app/src/features/forms/waiver/contracting/Initial.tsx
index 5dfc829429..133ebb7bb4 100644
--- a/react-app/src/features/forms/waiver/contracting/Initial.tsx
+++ b/react-app/src/features/forms/waiver/contracting/Initial.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const InitialForm = () => {
diff --git a/react-app/src/features/forms/waiver/contracting/Renewal.tsx b/react-app/src/features/forms/waiver/contracting/Renewal.tsx
index b3b6a8abc6..82e745ccf0 100644
--- a/react-app/src/features/forms/waiver/contracting/Renewal.tsx
+++ b/react-app/src/features/forms/waiver/contracting/Renewal.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/components";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFAQLinkForAttachments } from "../../faqLinks";
 
 export const RenewalForm = () => {
diff --git a/react-app/src/features/forms/waiver/temporary-extension/index.tsx b/react-app/src/features/forms/waiver/temporary-extension/index.tsx
index 9f8d501748..f57b317c4a 100644
--- a/react-app/src/features/forms/waiver/temporary-extension/index.tsx
+++ b/react-app/src/features/forms/waiver/temporary-extension/index.tsx
@@ -14,7 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components";
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import { formSchemas } from "@/formSchemas";
 import { FAQ_TAB } from "@/router";
 import { useGetItem } from "@/api";
diff --git a/react-app/src/features/package/index.tsx b/react-app/src/features/package/index.tsx
index 1369d1fce0..880b5763f3 100644
--- a/react-app/src/features/package/index.tsx
+++ b/react-app/src/features/package/index.tsx
@@ -12,7 +12,7 @@ import { PackageStatusCard } from "./package-status";
 import { PackageActionsCard } from "./package-actions";
 import { useDetailsSidebarLinks } from "./hooks";
 import { Authority } from "shared-types";
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router";
 import { detailsAndActionsCrumbs } from "@/utils";
 
 export const DetailCardWrapper = ({
@@ -38,10 +38,7 @@ export const DetailsContent: FC<{ id: string }> = ({ id }) => {
 
   return (
     <div className="w-full py-1 px-4 lg:px-8">
-      <section
-        id="package_overview"
-        className="block md:flex space-x-0 md:space-x-8"
-      >
+      <section id="package_overview" className="block md:flex space-x-0 md:space-x-8">
         <PackageStatusCard id={id} />
         <PackageActionsCard id={id} />
       </section>
diff --git a/react-app/src/features/package/package-actions/index.tsx b/react-app/src/features/package/package-actions/index.tsx
index 3fff255235..790444b74c 100644
--- a/react-app/src/features/package/package-actions/index.tsx
+++ b/react-app/src/features/package/package-actions/index.tsx
@@ -3,7 +3,7 @@ import { LoadingSpinner } from "@/components";
 import { DETAILS_ORIGIN, ORIGIN, mapActionLabel } from "@/utils";
 import { DetailCardWrapper } from "..";
 import { FC } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 
 export const PackageActionsCard: FC<{ id: string }> = ({ id }) => {
   const location = useLocation();
diff --git a/react-app/src/features/package/package-activity/index.tsx b/react-app/src/features/package/package-activity/index.tsx
index 5cadc37c91..9ae69d9b45 100644
--- a/react-app/src/features/package/package-activity/index.tsx
+++ b/react-app/src/features/package/package-activity/index.tsx
@@ -12,7 +12,7 @@ import {
 import * as Table from "@/components";
 import { BLANK_VALUE } from "@/consts";
 import { useAttachmentService, Attachments } from "./hook";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { useGetItem } from "@/api";
 import { ItemResult } from "shared-types/opensearch/changelog";
 
diff --git a/react-app/src/features/selection-flow/external-landing/ExternalAppLandingPage.tsx b/react-app/src/features/selection-flow/external-landing/ExternalAppLandingPage.tsx
index eae94dcd99..86f66066ca 100644
--- a/react-app/src/features/selection-flow/external-landing/ExternalAppLandingPage.tsx
+++ b/react-app/src/features/selection-flow/external-landing/ExternalAppLandingPage.tsx
@@ -1,11 +1,6 @@
 import { PropsWithChildren, ReactElement } from "react";
-import { useLocation, Link } from "react-router-dom";
-import {
-  Button,
-  SimplePageContainer,
-  BreadCrumbs,
-  optionCrumbsFromPath,
-} from "@/components";
+import { useLocation, Link } from "react-router";
+import { Button, SimplePageContainer, BreadCrumbs, optionCrumbsFromPath } from "@/components";
 import { SimplePageTitle } from "@/features";
 import { FAQ_TAB } from "@/router";
 
@@ -21,9 +16,7 @@ export interface ExternalAppLandingPageConfig {
   buttonLabel: string;
   buttonLink: EXTERNAL_APP;
 }
-const MACProLogo = () => (
-  <img src={"/images/logos/macpro.png"} alt={"MACPro system logo"} />
-);
+const MACProLogo = () => <img src={"/images/logos/macpro.png"} alt={"MACPro system logo"} />;
 const FAQHelperText = () => (
   <span className="max-w-xl">
     <i>
@@ -75,16 +68,14 @@ const ExternalAppLandingPage = ({
 
 export const MedicaidEligibilityLandingPage = () => (
   <ExternalAppLandingPage
-    pageTitle={
-      "Medicaid Eligibility, Enrollment, Administration, and Health Homes"
-    }
+    pageTitle={"Medicaid Eligibility, Enrollment, Administration, and Health Homes"}
     image={<MACProLogo />}
     description={
       <LandingPageDescription>
         <p className="mb-4">
           <b>
-            Medicaid Eligibility, Enrollment, Administration, and Health Homes
-            SPA packages are submitted within the{" "}
+            Medicaid Eligibility, Enrollment, Administration, and Health Homes SPA packages are
+            submitted within the{" "}
             <a
               className="text-sky-700 hover:text-sky-800 underline"
               href={EXTERNAL_APP.MAC_PRO}
@@ -97,8 +88,8 @@ export const MedicaidEligibilityLandingPage = () => (
           </b>
         </p>
         <p>
-          The MACPro system allows CMS and states to collaborate online to
-          process certain types of Medicaid SPA submissions.
+          The MACPro system allows CMS and states to collaborate online to process certain types of
+          Medicaid SPA submissions.
         </p>
       </LandingPageDescription>
     }
diff --git a/react-app/src/features/selection-flow/plan-types.tsx b/react-app/src/features/selection-flow/plan-types.tsx
index 1f221a4268..c041e2ba22 100644
--- a/react-app/src/features/selection-flow/plan-types.tsx
+++ b/react-app/src/features/selection-flow/plan-types.tsx
@@ -1,4 +1,4 @@
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation } from "react-router";
 import {
   MACFieldsetOption,
   OptionCard,
diff --git a/react-app/src/features/webforms/Webform.tsx b/react-app/src/features/webforms/Webform.tsx
index 10fc5e2546..1a562e20d4 100644
--- a/react-app/src/features/webforms/Webform.tsx
+++ b/react-app/src/features/webforms/Webform.tsx
@@ -2,7 +2,7 @@ import { documentInitializer, LoadingSpinner } from "@/components";
 import { useGetForm } from "@/api";
 import { useReadOnlyUser } from "../../hooks/useReadOnlyUser";
 import { WebformBody } from "./WebFormBody";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 
 export function Webform() {
   const { id, version } = useParams<{ id: string; version: string }>();
diff --git a/react-app/src/features/webforms/WebformsList.tsx b/react-app/src/features/webforms/WebformsList.tsx
index 8b02accdf9..c8676e65bc 100644
--- a/react-app/src/features/webforms/WebformsList.tsx
+++ b/react-app/src/features/webforms/WebformsList.tsx
@@ -2,7 +2,7 @@ import { useGetAllForms } from "@/api";
 import { SubNavHeader } from "../../components/Layout";
 import { LoadingSpinner } from "../../components/LoadingSpinner";
 import { MaintenanceBanner } from "@/components/MaintenanceBanner";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export const WebformsList = () => {
   const { data, isLoading } = useGetAllForms();
@@ -52,10 +52,7 @@ export const WebformsList = () => {
           </table>
 
           <div className="mt-2">
-            <Link
-              className="cursor-pointer text-blue-600 ml-0"
-              to="/guides/abp"
-            >
+            <Link className="cursor-pointer text-blue-600 ml-0" to="/guides/abp">
               Implementation Guide
             </Link>
           </div>
diff --git a/react-app/src/features/welcome/index.tsx b/react-app/src/features/welcome/index.tsx
index 4312c44495..ff9185cd35 100644
--- a/react-app/src/features/welcome/index.tsx
+++ b/react-app/src/features/welcome/index.tsx
@@ -4,7 +4,7 @@ import * as Heroicons from "@heroicons/react/24/outline";
 import { QueryClient } from "@tanstack/react-query";
 import { getUser } from "@/api";
 import { Button } from "@/components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FAQ_TAB } from "@/router";
 import { CardWithTopBorder } from "@/components";
 
diff --git a/react-app/src/hooks/useParams.ts b/react-app/src/hooks/useParams.ts
index af2311e1cb..87be452e1f 100644
--- a/react-app/src/hooks/useParams.ts
+++ b/react-app/src/hooks/useParams.ts
@@ -1,6 +1,6 @@
 import LZ from "lz-string";
 import { useMemo } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 /**
  * useLzQuery syncs a url query parameter with a given state.
  * LZ is a library which can compresses JSON into a uri string
@@ -30,9 +30,7 @@ export const useLzUrl = <T>(props: { key: string; initValue?: T }) => {
       return arg(state);
     })();
 
-    const compressedValue = LZ.compressToEncodedURIComponent(
-      JSON.stringify(val),
-    );
+    const compressedValue = LZ.compressToEncodedURIComponent(JSON.stringify(val));
 
     setParams(
       (s) => {
diff --git a/react-app/src/main.tsx b/react-app/src/main.tsx
index 8cb6356fa6..1765de9361 100644
--- a/react-app/src/main.tsx
+++ b/react-app/src/main.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "react-router";
 import "@fontsource/open-sans";
 import "./index.css";
 import { queryClient, router } from "./router";
@@ -12,9 +12,7 @@ import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";
 
 const ldClientId = config.launchDarkly?.CLIENT_ID;
 if (ldClientId === undefined) {
-  throw new Error(
-    "To configure LaunchDarkly, you must set LAUNCHDARKLY_CLIENT_ID",
-  );
+  throw new Error("To configure LaunchDarkly, you must set LAUNCHDARKLY_CLIENT_ID");
 }
 
 const initializeLaunchDarkly = async () => {
diff --git a/react-app/src/router.tsx b/react-app/src/router.tsx
index 4cde68620f..8eaad8fb55 100644
--- a/react-app/src/router.tsx
+++ b/react-app/src/router.tsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import * as F from "@/features";
 import * as C from "@/components";
 import {
@@ -111,5 +111,6 @@ export const router = createBrowserRouter([
       },
     ],
     loader: F.loader(queryClient),
+    HydrateFallback: () => null,
   },
 ]);
diff --git a/react-app/src/utils/TestWrapper.tsx b/react-app/src/utils/TestWrapper.tsx
index 9a60a8a55e..2beeca3597 100644
--- a/react-app/src/utils/TestWrapper.tsx
+++ b/react-app/src/utils/TestWrapper.tsx
@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router";
 
 const queryClient = new QueryClient();
 
diff --git a/react-app/src/utils/test-helpers/renderForm.tsx b/react-app/src/utils/test-helpers/renderForm.tsx
index dba8903d23..27757a7e5d 100644
--- a/react-app/src/utils/test-helpers/renderForm.tsx
+++ b/react-app/src/utils/test-helpers/renderForm.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, waitForElementToBeRemoved } from "@testing-library/react";
 import React, { ReactElement } from "react";
-import { MemoryRouter, createMemoryRouter, RouterProvider } from "react-router-dom";
+import { MemoryRouter, createMemoryRouter, RouterProvider } from "react-router";
 import items from "mocks/data/items";
 import { Authority } from "shared-types";