diff --git a/src/renderer/components/modals/ModalLayer.tsx b/src/renderer/components/modals/ModalLayer.tsx
new file mode 100644
index 0000000..d967927
--- /dev/null
+++ b/src/renderer/components/modals/ModalLayer.tsx
@@ -0,0 +1,33 @@
+import { useAppStore } from '@/stores/app-store';
+import { AboutDialog } from './AboutDialog';
+import { ConfirmDialog } from './ConfirmDialog';
+import { ExportBatchDialog } from './ExportBatchDialog';
+import { ExportDocxDialog } from './ExportDocxDialog';
+import { ExportHtmlDialog } from './ExportHtmlDialog';
+import { ExportPdfDialog } from './ExportPdfDialog';
+import { SettingsSheet } from './SettingsSheet';
+import { WelcomeDialog } from './WelcomeDialog';
+
+export function ModalLayer() {
+  const modal = useAppStore((s) => s.modal);
+  switch (modal.kind) {
+    case null:
+      return null;
+    case 'export-pdf':
+      return <ExportPdfDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-docx':
+      return <ExportDocxDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-html':
+      return <ExportHtmlDialog sourcePath={modal.props.sourcePath} />;
+    case 'export-batch':
+      return <ExportBatchDialog sourcePaths={modal.props.sourcePaths} />;
+    case 'settings':
+      return <SettingsSheet />;
+    case 'about':
+      return <AboutDialog />;
+    case 'welcome':
+      return <WelcomeDialog />;
+    case 'confirm':
+      return <ConfirmDialog {...modal.props} />;
+  }
+}
\ No newline at end of file
diff --git a/tests/component/modals/ModalLayer.test.tsx b/tests/component/modals/ModalLayer.test.tsx
new file mode 100644
index 0000000..a04ee64
--- /dev/null
+++ b/tests/component/modals/ModalLayer.test.tsx
@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ModalLayer } from '@/components/modals/ModalLayer';
+import { useAppStore } from '@/stores/app-store';
+
+describe('ModalLayer', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useAppStore.setState({ modal: { kind: null } } as any);
+  });
+
+  it('renders nothing when modal is null', () => {
+    const { container } = render(<ModalLayer />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders AboutDialog when kind is "about"', () => {
+    useAppStore.getState().openModal('about');
+    render(<ModalLayer />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('switches from about to settings when modal kind changes', () => {
+    useAppStore.getState().openModal('about');
+    const { rerender } = render(<ModalLayer />);
+    expect(screen.getByText(/about markdownconverter/i)).toBeInTheDocument();
+    useAppStore.getState().openModal('settings');
+    rerender(<ModalLayer />);
+    expect(screen.queryByText(/about markdownconverter/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/settings/i)).toBeInTheDocument();
+  });
+});
\ No newline at end of file