diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
index ce0acc444a..8a04f5120f 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -25,7 +25,7 @@ const ModalDefault = () => {
   const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(AlignmentX.RIGHT);
   const [isDockedOnMobile, setIsDockedOnMobile] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(false);
+  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(true);
   const [isScrollable, setIsScrollable] = useState(false);
 
   const toggleModalBasic = () => setModalBasicOpen(!isModalBasicOpen);
@@ -53,7 +53,9 @@ const ModalDefault = () => {
 
   return (
     <>
-      <Button onClick={toggleModalBasic}>Open Modal</Button>
+      <Button onClick={toggleModalBasic} data-test-id="basic-modal">
+        Open Modal
+      </Button>
 
       <Modal alignmentY={modalAlign} id="example-basic" isOpen={isModalBasicOpen} onClose={handleModalBasicClose}>
         <ModalDialog
@@ -192,7 +194,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalWithDropdown}>Open Modal with Dropdown</Button>
+      <Button onClick={toggleModalWithDropdown} data-test-id="modal-with-dropdown">
+        Open Modal with Dropdown
+      </Button>
 
       <Modal id="example-dropdown" isOpen={isModalWithDropdownOpen} onClose={handleModalWithDropdownClose}>
         <ModalDialog>
diff --git a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
index 3a171ff1ab..edebe53081 100644
--- a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx
@@ -13,7 +13,9 @@ const ModalHiddenCloseButton = () => {
 
   return (
     <>
-      <Button onClick={isOpenToggle}>Open Modal</Button>
+      <Button onClick={isOpenToggle} data-test-id="hidden-close-button">
+        Open Modal
+      </Button>
 
       <Modal
         id="example-hidden-close-button"
diff --git a/packages/web-react/src/components/Modal/demo/ModalStacking.tsx b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
index b27451c6c1..14df9096fd 100644
--- a/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalStacking.tsx
@@ -13,7 +13,9 @@ const ModalStacking = () => {
 
   return (
     <>
-      <Button onClick={toggleFirstModal}>Open Modal</Button>
+      <Button onClick={toggleFirstModal} data-test-id="modal-stacking">
+        Open Modal
+      </Button>
 
       <Modal id="example-stacking-parent" isOpen={isFirstOpen} onClose={handleFirstClose}>
         <ModalDialog>
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
index 2bbf11979d..3e1f71297c 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-basic">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-basic" data-test-id="basic-modal">
     Open Modal
 </Button>
 
@@ -97,7 +97,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown" data-test-id="modal-with-dropdown">
     Open Modal with Dropdown
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
index 3149b1412a..38874dcf9a 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button" data-test-id="hidden-close-button">
     Open Modal
 </Button>
 
diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
index b0bf483807..5af3506fc3 100644
--- a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
+++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig
@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent" data-test-id="modal-stacking">
     Open Modal
 </Button>
 
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index d97cc72dac..aebdc6c7ab 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -55,6 +55,7 @@ <h2 class="docs-Heading">Modal</h2>
       data-spirit-target="#example-basic"
       aria-controls="example-basic"
       aria-expanded="false"
+      data-test-id="basic-modal"
     >
       Open Modal
     </button>
@@ -265,6 +266,7 @@ <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
       data-spirit-target="#example-dropdown"
       aria-controls="example-dropdown"
       aria-expanded="false"
+      data-test-id="modal-with-dropdown"
     >
       Open Modal with Dropdown
     </button>
@@ -303,26 +305,28 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             provident unde. Eveniet, iste, molestiae?
           </p>
           <div class="DropdownWrapper">
-            <button
-              type="button"
-              data-spirit-toggle="dropdown"
-              data-spirit-target="#dropdown-in-modal"
-              class="Button Button--secondary Button--medium"
-              aria-expanded="false"
-              aria-controls="dropdown-in-modal"
-            >
-              Dropdown
-            </button>
-            <div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-in-modal">
-              <a href="#" class="Item">
-                <span class="Item__label">Action</span>
-              </a>
-              <a href="#" class="Item">
-                <span class="Item__label">Another action</span>
-              </a>
-              <a href="#" class="Item">
-                <span class="Item__label">Something else here</span>
-              </a>
+            <div class="Dropdown">
+              <button
+                type="button"
+                data-spirit-toggle="dropdown"
+                data-spirit-target="#dropdown-in-modal"
+                class="Button Button--secondary Button--medium"
+                aria-expanded="false"
+                aria-controls="dropdown-in-modal"
+              >
+                Dropdown
+              </button>
+              <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-in-modal">
+                <a href="#" class="Item">
+                  <span class="Item__label">Action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Another action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Something else here</span>
+                </a>
+              </div>
             </div>
           </div>
           <!-- Content: end -->
@@ -986,6 +990,7 @@ <h2 class="docs-Heading">Stacking Modals</h2>
       data-spirit-target="#example-stacking-parent"
       aria-controls="example-stacking-parent"
       aria-expanded="false"
+      data-test-id="modal-stacking"
     >
       Open Modal
     </button>
@@ -1209,6 +1214,7 @@ <h2 class="docs-Heading">Hidden Close Button and Disabled Escape Key</h2>
       data-spirit-target="#example-hide-close-button"
       aria-controls="example-hide-close-button"
       aria-expanded="false"
+      data-test-id="hidden-close-button"
     >
       Open Modal
     </button>
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png
index 8d9dab6395..c511337eba 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/fileuploader-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png
index 16a9d5af64..1d64a1d828 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png differ
diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png
index 8b405c1c33..d2935d1d0e 100644
Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-react-chromium-linux.png differ
diff --git a/tests/e2e/demo-modal-compare.spec.ts b/tests/e2e/demo-modal-compare.spec.ts
new file mode 100644
index 0000000000..85a374947f
--- /dev/null
+++ b/tests/e2e/demo-modal-compare.spec.ts
@@ -0,0 +1,100 @@
+/* eslint-disable no-console -- we want to log when test fails */
+import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
+import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
+import { expect, test } from '@playwright/test';
+
+const runComponentCompareTests = ({ componentsDir, packageName, componentName }) => {
+  if (!packageName) return;
+
+  const formattedPackageName = packageName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+  test.describe(`Demo ${formattedPackageName} Components`, () => {
+    test(`test demo ${formattedPackageName} component ${componentName}`, async ({ page }) => {
+      try {
+        const url = isTestingEnvironment()
+          ? SERVERS.TESTING[packageName]
+          : getDevelopmentEndpointUri(packageName, { isDocker: packageName !== 'web-twig' });
+
+        await page.goto(`${url}${componentsDir}/${componentName}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`);
+        await waitForPageLoad(page);
+
+        await runModalTests(page, componentName);
+      } catch (error) {
+        console.error(`Test for demo ${formattedPackageName} component ${componentName} failed. ${error}`);
+        throw error;
+      }
+    });
+  });
+};
+
+const waitForPageLoad = async (page) => {
+  // Wait for fonts to load
+  await page.evaluate(() => document.fonts.ready);
+
+  // Wait for images to load
+  await page.waitForFunction(() => Array.from(document.querySelectorAll('img')).every((img) => img.complete));
+
+  // Wait for transitions to finish
+  await page.waitForLoadState();
+
+  // Disable animations to avoid flaky screenshots
+  await page.addStyleTag({ content: '*, *::before, *::after { animation-iteration-count: 1 !important }' });
+};
+
+const runModalTests = async (page, componentName) => {
+  // Helper function for taking and comparing screenshots
+  const takeScreenshot = async (suffix, fullPage = false) => {
+    await expect(page).toHaveScreenshot(`${componentName.toLowerCase()}-${suffix}.png`, {
+      animations: 'disabled',
+      fullPage,
+    });
+  };
+
+  // TEST: open basic modal, close with backdrop click
+  await page.click('[data-test-id="basic-modal"]');
+  await takeScreenshot('basic');
+  await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+  // TEST: open modal and dropdown inside, close with close button
+  await page.click('[data-test-id="modal-with-dropdown"]');
+  await page.click('dialog[open] .Dropdown button');
+  await takeScreenshot('with-dropdown');
+  await page.click('dialog[open] .ModalHeader button');
+
+  // TEST: open stacking modals, close with escape key
+  await page.click('[data-test-id="modal-stacking"]');
+  await page.click('dialog[open] .ModalFooter button');
+  await takeScreenshot('stacking');
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  // TEST: open modal with hidden close button, close with action button
+  await page.click('button[data-test-id="hidden-close-button"]');
+  await takeScreenshot('hidden-close-button');
+  await page.click('dialog[open] .ModalFooter button');
+  await takeScreenshot('closed-modals', true);
+};
+
+const testConfigs = [
+  {
+    componentName: 'Modal',
+    componentsDir: '/src/scss/components',
+    packageName: 'web',
+  },
+  {
+    componentName: 'Modal',
+    componentsDir: '/src/components',
+    packageName: 'web-react',
+  },
+  // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
+  !isTestingEnvironment() && {
+    componentName: 'Modal',
+    componentsDir: '/components',
+    packageName: 'web-twig',
+  },
+].filter(Boolean);
+
+testConfigs.forEach(runComponentCompareTests);
diff --git a/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png
new file mode 100644
index 0000000000..c27d1f211c
Binary files /dev/null and b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png differ
diff --git a/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png
new file mode 100644
index 0000000000..56c131109d
Binary files /dev/null and b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png differ
diff --git a/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png
new file mode 100644
index 0000000000..990c6dd7c9
Binary files /dev/null and b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png differ
diff --git a/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png
new file mode 100644
index 0000000000..4054a9e640
Binary files /dev/null and b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png differ
diff --git a/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png
new file mode 100644
index 0000000000..fb412ae490
Binary files /dev/null and b/tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png differ