diff --git a/src/components/CardGeneratorModal.tsx b/src/components/CardGeneratorModal.tsx
index 8ecc590..76a1382 100644
--- a/src/components/CardGeneratorModal.tsx
+++ b/src/components/CardGeneratorModal.tsx
@@ -386,8 +386,8 @@ export default function CardGeneratorModal({
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setMounted(true);
+    const timer = setTimeout(() => setMounted(true), 0);
+    return () => clearTimeout(timer);
   }, []);
 
   const {
diff --git a/src/components/__tests__/CardGeneratorModal.test.tsx b/src/components/__tests__/CardGeneratorModal.test.tsx
index 13dbb2a..38d5b51 100644
--- a/src/components/__tests__/CardGeneratorModal.test.tsx
+++ b/src/components/__tests__/CardGeneratorModal.test.tsx
@@ -101,8 +101,8 @@ describe("CardGeneratorModal", () => {
         summary={mockSummary}
       />
     );
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-    expect(screen.getByText("Profile Card")).toBeInTheDocument();
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+    expect(await screen.findByText("Profile Card")).toBeInTheDocument();
   });
 
   it("switches tabs between Settings and Layout", async () => {
@@ -116,7 +116,7 @@ describe("CardGeneratorModal", () => {
     );
 
     // Default tab is Settings
-    expect(screen.getByText("Avatar")).toBeInTheDocument(); // part of Detail Options
+    expect(await screen.findByText("Avatar")).toBeInTheDocument(); // part of Detail Options
     expect(screen.queryByTestId("layout-editor")).not.toBeInTheDocument();
 
     // Click Edit Layout tab
@@ -141,6 +141,9 @@ describe("CardGeneratorModal", () => {
       />
     );
 
+    // Wait for the modal to be fully mounted
+    await screen.findByRole("dialog");
+
     await user.keyboard("{Escape}");
     expect(handleClose).toHaveBeenCalledTimes(1);
   });