diff --git a/components/ActionBar/NavigationButtons.tsx b/components/ActionBar/NavigationButtons.tsx
index 5a16fe1a..0b643c92 100644
--- a/components/ActionBar/NavigationButtons.tsx
+++ b/components/ActionBar/NavigationButtons.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { HomeSmall } from "components/Icons/HomeSmall";
 import { ActionButton } from "./ActionButton";
 import { useIdentityData } from "components/IdentityProvider";
@@ -77,10 +77,28 @@ export const ReaderButton = (props: { subs: boolean }) => {
 export function NotificationButton() {
   let { identity } = useIdentityData();
   let unreads = identity?.notifications[0]?.count;
-  let current = useIsActive("/notifications");
+  let pathname = usePathname();
+  let searchParams = useSearchParams();
+  let router = useRouter();
+
+  let isOnPage =
+    pathname === "/notifications" || pathname.startsWith("/notifications/");
+  let isOpen = searchParams.get("notifications") === "open";
+  let active = isOnPage || isOpen;
+
+  function handleClick() {
+    if (isOnPage || isOpen) return;
+    let params = new URLSearchParams(searchParams.toString());
+    params.set("notifications", "open");
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  }
 
   return (
-    <SpeedyLink href={"/notifications"} className="hover:no-underline!">
+    <button
+      type="button"
+      onClick={handleClick}
+      className="hover:no-underline!"
+    >
       <ActionButton
         labelOnMobile={false}
         icon={
@@ -91,9 +109,9 @@ export function NotificationButton() {
           )
         }
         label="Notifications"
-        active={current}
+        active={active}
         className={unreads ? "text-accent-contrast!" : ""}
       />
-    </SpeedyLink>
+    </button>
   );
 }
diff --git a/components/PageLayouts/DashboardShell.tsx b/components/PageLayouts/DashboardShell.tsx
index 68d17ee9..a68aa206 100644
--- a/components/PageLayouts/DashboardShell.tsx
+++ b/components/PageLayouts/DashboardShell.tsx
@@ -1,11 +1,13 @@
 "use client";
 import * as Dialog from "@radix-ui/react-dialog";
+import { useSearchParams } from "next/navigation";
 import {
   DesktopNavigation,
   NavigationContent,
 } from "components/ActionBar/DesktopNavigation";
 import { Sidebar, useSidebarStore } from "components/ActionBar/Sidebar";
 import { DashboardIdContext } from "./dashboardState";
+import { NotificationContent } from "./NotificationContent";
 
 export type DashboardShellProps = {
   id: string;
@@ -19,6 +21,8 @@ export type DashboardShellProps = {
 export function DashboardShell(props: DashboardShellProps) {
   let { id, children, ...navigationProps } = props;
   let { open, setOpen } = useSidebarStore();
+  let searchParams = useSearchParams();
+  let showNotifications = searchParams.get("notifications") === "open";
 
   return (
     <DashboardIdContext.Provider value={id}>
@@ -50,7 +54,7 @@ export function DashboardShell(props: DashboardShellProps) {
             </Dialog.Content>
           </Dialog.Portal>
         </Dialog.Root>
-        {children}
+        {showNotifications ? <NotificationContent /> : children}
       </div>
     </DashboardIdContext.Provider>
   );
diff --git a/components/PageLayouts/NotificationContent.tsx b/components/PageLayouts/NotificationContent.tsx
new file mode 100644
index 00000000..81729524
--- /dev/null
+++ b/components/PageLayouts/NotificationContent.tsx
@@ -0,0 +1,32 @@
+"use client";
+import { useEffect, useState } from "react";
+import { DashboardPageLayout } from "./DashboardPageLayout";
+import { NotificationList } from "app/(home-pages)/(writer)/notifications/NotificationList";
+import { getNotifications } from "app/(home-pages)/(writer)/notifications/getNotifications";
+import { HydratedNotification } from "src/notifications";
+
+export function NotificationContent() {
+  let [notifications, setNotifications] = useState<
+    HydratedNotification[] | null
+  >(null);
+
+  useEffect(() => {
+    getNotifications().then(setNotifications);
+  }, []);
+
+  return (
+    <DashboardPageLayout
+      pageTitle="Notifications"
+      scrollKey="notifications-overlay"
+      showHeader={false}
+    >
+      {notifications === null ? (
+        <div className="flex justify-center py-6">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-accent-contrast" />
+        </div>
+      ) : (
+        <NotificationList notifications={notifications} />
+      )}
+    </DashboardPageLayout>
+  );
+}