diff --git a/src/components/auth/SessionExpiryDialog.test.tsx b/src/components/auth/SessionExpiryDialog.test.tsx
new file mode 100644
index 0000000..ab1e778
--- /dev/null
+++ b/src/components/auth/SessionExpiryDialog.test.tsx
@@ -0,0 +1,39 @@
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { act, render, screen } from "@testing-library/react";
+
+import { useAuthStore } from "@/store/authStore";
+import { SessionExpiryDialog } from "./SessionExpiryDialog";
+
+jest.mock("next-auth/react", () => ({
+ signIn: jest.fn(),
+}));
+
+describe("SessionExpiryDialog", () => {
+ beforeEach(() => {
+ useAuthStore.setState({
+ accessToken: null,
+ sessionExpired: true,
+ sessionExpiryReason: "unauthorized",
+ });
+ });
+
+ afterEach(() => {
+ act(() => useAuthStore.getState().clearSessionExpired());
+ });
+
+ it("renders above every regular application overlay", () => {
+ const theme = createTheme();
+
+ render(
+
+
+ ,
+ );
+
+ const dialogRoot = screen.getByRole("dialog").closest(".MuiModal-root");
+ expect(dialogRoot).not.toBeNull();
+ expect(dialogRoot).toHaveStyle({
+ zIndex: theme.zIndex.tooltip + 1,
+ });
+ });
+});
diff --git a/src/components/auth/SessionExpiryDialog.tsx b/src/components/auth/SessionExpiryDialog.tsx
index 56bac19..c42ecd9 100644
--- a/src/components/auth/SessionExpiryDialog.tsx
+++ b/src/components/auth/SessionExpiryDialog.tsx
@@ -13,6 +13,7 @@ import {
Stack,
Typography,
} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
import { useAuthStore } from "@/store/authStore";
@@ -25,6 +26,7 @@ type SessionExpiryDialogProps = {
export const SessionExpiryDialog = ({
expiresAt,
}: SessionExpiryDialogProps) => {
+ const theme = useTheme();
const sessionExpired = useAuthStore((state) => state.sessionExpired);
const reason = useAuthStore((state) => state.sessionExpiryReason);
const [now, setNow] = useState(() => Date.now());
@@ -61,6 +63,7 @@ export const SessionExpiryDialog = ({
return (