diff --git a/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
new file mode 100644
index 0000000000..8b18b8c510
--- /dev/null
+++ b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@signozhq/ui/button';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
+
+import { withCanvas } from '@/storybook/decorators/withCanvas';
+
+import { CustomSelect } from '../../NewSelect';
+import SignozModal from '../SignozModal';
+
+function ModalFixture(): JSX.Element {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+
+ setOpen(false)}
+ title="Create saved view"
+ >
+
+
+ >
+ );
+}
+
+const meta = {
+ title: 'Components/Signoz Modal',
+ component: ModalFixture,
+ tags: ['play'],
+ decorators: [withCanvas({ maxWidth: 400 })],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+/** Interaction: the modal and its nested body-portal select are both genuinely open. */
+export const OpenWithNestedSelect: Story = {
+ play: async ({ canvasElement }): Promise => {
+ const trigger = within(canvasElement).getByTestId('open-signoz-modal');
+
+ await userEvent.click(trigger);
+ await screen.findByRole('dialog', { name: 'Create saved view' });
+ await userEvent.keyboard('{Escape}');
+ await waitFor(() => expect(trigger).toHaveFocus());
+ await userEvent.click(trigger);
+ await userEvent.click(
+ await screen.findByRole('combobox', { name: 'View scope' }),
+ );
+ await screen.findByRole('listbox');
+ },
+};