diff --git a/react-app/src/components/Banner/MMDLSpaBanner.tsx b/react-app/src/components/Banner/MMDLSpaBanner.tsx
new file mode 100644
index 0000000000..9916be1bf9
--- /dev/null
+++ b/react-app/src/components/Banner/MMDLSpaBanner.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+const MMDLAlertBanner = () => {
+  const [isVisible, setIsVisible] = useState(true);
+  const handleDismiss = () => {
+    setIsVisible(false);
+  };
+  if (!isVisible) return null;
+  return (
+    <section
+      className="bg-[#E1F3F8] grid md:grid-cols-[min-content_auto_min-content] md:grid-rows-[auto_auto] grid-cols-[auto_auto] gap-4 md:gap-x-4 border-l-[8px] border-[#00A6D2] p-3"
+      aria-label="mmdl-alert-banner"
+    >
+      <InfoCircledIcon className="w-10 h-10" aria-hidden="true" />
+      <div className="flex gap-x-4 flex-grow">
+        <div className="flex flex-col flex-grow">
+          <h3 className="font-bold text-black text-lg break-words">
+            MMDL SPA forms available in OneMAC
+          </h3>
+          <p className="text-black leading-normal break-words">
+            Medicaid Alternative Benefit Plan, Premium and Cost Sharing, and CHIP Eligibility SPA
+            templates and implementation guides are now available in OneMAC. New submissions for
+            these SPA types are submitted through the OneMAC system effective [add date].
+          </p>
+        </div>
+      </div>
+      <div className="flex space-x-4 col-start-2 md:col-start-auto">
+        <a
+          href="/faq#mmdl-section"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="border-2 border-black rounded h-[38px] px-4 text font-bold text-center whitespace-nowrap pt-1"
+        >
+          Go to FAQs
+        </a>
+        <button onClick={handleDismiss} aria-label="Dismiss" className="rounded-full w-6 h-6">
+          <Cross2Icon className="w-full h-full" aria-hidden="true" />
+        </button>
+      </div>
+    </section>
+  );
+};
+export default MMDLAlertBanner;
diff --git a/react-app/src/components/Layout/index.test.tsx b/react-app/src/components/Layout/index.test.tsx
index 96d2e41372..af52b70377 100644
--- a/react-app/src/components/Layout/index.test.tsx
+++ b/react-app/src/components/Layout/index.test.tsx
@@ -105,7 +105,7 @@ const setupUserDropdownTest = async (viewMode: ViewMode = VIEW_MODES.DESKTOP) =>
   await setupTest(viewMode);
 
   if (!viewMode.desktop) {
-    await user.click(screen.getByRole("button"));
+    await user.click(screen.getByTestId("mobile-menu-button"));
   }
 
   const myAccountButton = screen.getByText("My Account");
@@ -242,7 +242,7 @@ describe("Layout", () => {
       expect(screen.queryByText("Home")).not.toBeInTheDocument();
 
       // Open the menu
-      const menuButton = screen.getByRole("button");
+      const menuButton = screen.getByTestId("mobile-menu-button");
       await user.click(menuButton);
 
       expect(screen.getByText("Home")).toBeInTheDocument();
diff --git a/react-app/src/components/Layout/index.tsx b/react-app/src/components/Layout/index.tsx
index c253710e27..0e978547c5 100644
--- a/react-app/src/components/Layout/index.tsx
+++ b/react-app/src/components/Layout/index.tsx
@@ -11,6 +11,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import config from "@/config";
 import { ScrollToTop, SimplePageContainer, UserPrompt, Banner } from "@/components";
 import { isFaqPage, isProd } from "@/utils";
+import MMDLAlertBanner from "@/components/Banner/MMDLSpaBanner";
 
 /**
  * Custom hook that generates a list of navigation links based on the user's status and whether the current page is the FAQ page.
@@ -152,10 +153,11 @@ export const Layout = () => {
     <div className="min-h-full flex flex-col">
       <ScrollToTop />
       <UserPrompt />
+      {user?.user && !isFaqPage && <MMDLAlertBanner />}
       <UsaBanner isUserMissingRole={user?.user && customUserRoles === undefined} />
       <nav data-testid="nav-banner-d" className="bg-primary">
         <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
-          <div className="h-[70px] flex gap-12 items-center text-white">
+          <div className="h-[70px] relative flex gap-12 items-center text-white">
             {!isFaqPage ? (
               // This is the original Link component
               <Link to="/">
@@ -300,8 +302,8 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
     <>
       <div className="flex-1"></div>
       {isOpen && (
-        <div className="w-full absolute top-[100px] sm:top-[85px] left-0 z-50">
-          <ul className="font-medium flex flex-col items-start p-4 md:p-0 mt-2 gap-4 rounded-b-lg bg-primary">
+        <div className="w-full absolute top-[100px] sm:top-[70px] left-0 z-50">
+          <ul className="font-medium flex flex-col items-start p-4 md:p-0 -mx-4 gap-4 rounded-b-lg bg-primary">
             {links.map((link) => (
               <li key={link.link}>
                 <Link