diff --git a/.changeset/seven-cars-melt.md b/.changeset/seven-cars-melt.md
new file mode 100644
index 0000000000..979827945f
--- /dev/null
+++ b/.changeset/seven-cars-melt.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a click blocker decorator on all of the components that had links to prevent users being redirected to another page.
diff --git a/packages/documentation/src/shared/click-blocker.ts b/packages/documentation/src/shared/click-blocker.ts
new file mode 100644
index 0000000000..fe923378b0
--- /dev/null
+++ b/packages/documentation/src/shared/click-blocker.ts
@@ -0,0 +1,21 @@
+import { StoryContext, StoryFn } from '@storybook/web-components';
+import { html } from 'lit';
+
+// Click blocker decorator to prevent clicking on example links
+export function clickBlocker(story: StoryFn, context: StoryContext) {
+  // Generate a custom ID in case there are multiple click blockers on the page
+  const id = crypto.randomUUID();
+  setTimeout(() => {
+    const div = document.getElementById(id);
+    div?.addEventListener(
+      'click',
+      e => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      { capture: true },
+    );
+  }, 0);
+
+  return html` <div id="${id}">${story(context.args, context)}</div> `;
+}
diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
index ffec33c92c..b203017db9 100644
--- a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
+++ b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.stories.ts
@@ -1,11 +1,13 @@
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'f1cda0ac-28d4-4afc-b56d-9182bd9bd671',
   title: 'Components/App Store Badge',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/components/avatar/avatar.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
index d7854c2561..0fb3c78d84 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.stories.ts
+++ b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
@@ -2,6 +2,7 @@ import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { components } from '@swisspost/design-system-components/dist/docs.json';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const AVATAR_ARGTYPES = components.find(c => c.tag === 'post-avatar');
 const USERID_ARGTYPE = AVATAR_ARGTYPES?.props.find(p => p.name === 'userid');
@@ -75,6 +76,7 @@ export const Default: Story = {
 };
 
 export const AnchorWrapped: Story = {
+  decorators: [clickBlocker],
   render: (args: Args, context: StoryContext) => {
     return html`<a href="#">${Default.render?.(args, context)}</a>`;
   },
diff --git a/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts b/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts
index a60cb42f8d..ee4a767c41 100644
--- a/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/components/breadcrumb/breadcrumbs.stories.ts
@@ -1,11 +1,13 @@
 import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'b7db7391-f893-4b1e-a125-b30c6f0b028b',
   title: 'Components/Breadcrumbs',
   tags: ['package:WebComponents'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index 93b0bbbd8c..29d8be5328 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '021d61aa-e039-4858-b4b9-b86a3e772811',
@@ -127,19 +128,7 @@ const meta: MetaComponent = {
       },
     },
   },
-  decorators: [
-    story =>
-      html`
-        <div
-          @click="${(e: Event) => {
-            const target = e.target as HTMLElement;
-            if (target.tagName === 'A' || target.tagName === 'BUTTON') e.preventDefault();
-          }}"
-        >
-          ${story()}
-        </div>
-      `,
-  ],
+  decorators: [clickBlocker],
 };
 
 export default meta;
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index be006877d7..56fd65da2d 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -3,11 +3,13 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 import { spread } from '@open-wc/lit-helpers';
 import { repeat } from 'lit/directives/repeat.js';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
   title: 'Components/Button',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
index 350cd3e64e..49c10b15cb 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts
+++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
@@ -2,6 +2,7 @@ import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-compo
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'b4800d9e-4837-4476-a327-bb4586eb7e97',
@@ -58,13 +59,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function paddedContainer(story: StoryFn, context: StoryContext) {
   return html` <div class="p-8">${story(context.args, context)}</div> `;
 }
diff --git a/packages/documentation/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts
index 2cab6edbfd..f1b801bc47 100644
--- a/packages/documentation/src/stories/components/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/card/card.stories.ts
@@ -3,6 +3,7 @@ import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '605c788d-3f75-4e6c-8498-be3d546843c2',
@@ -205,13 +206,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function gridContainer(story: StoryFn, context: StoryContext) {
   return html`
     <div class="row gy-16">
@@ -223,9 +217,7 @@ function gridContainer(story: StoryFn, context: StoryContext) {
 // RENDERER
 function getCardLinks() {
   return html`
-    ${['Link Text', 'More Link'].map(
-      label => html` <a class="card-link" href="#">${label}</a> `,
-    )}
+    ${['Link Text', 'More Link'].map(label => html` <a class="card-link" href="#">${label}</a> `)}
   `;
 }
 
@@ -243,7 +235,9 @@ function getCardBody({ customBody, content, action, showTitle, showSubtitle }: A
   return html`
     <div class="card-body">
       ${showTitle ? html` <h5 class="card-title">Card Title</h5> ` : nothing}
-      ${showSubtitle ? html` <h6 class="card-subtitle mb-8 text-muted">Card Subtitle</h6> ` : nothing}
+      ${showSubtitle
+        ? html` <h6 class="card-subtitle mb-8 text-muted">Card Subtitle</h6> `
+        : nothing}
       <p class="card-text">${content}</p>
       ${choose(
         action,
@@ -314,7 +308,7 @@ const renderSimpleInteractiveCard = html`
 type Story = StoryObj;
 
 const singleCardStory: Story = {
-  decorators: [gridContainer],
+  decorators: [gridContainer, clickBlocker],
   render: (args: Args) =>
     html`${args.action === 'button' ? renderCardWithInteractiveContainer(args) : renderCard(args)}`,
 };
@@ -324,7 +318,7 @@ export const Default: Story = {
 };
 
 export const Foundation: Story = {
-  decorators: [story => html`<div class="d-flex gap-16">${story()}</div>`],
+  decorators: [story => html`<div class="d-flex gap-16">${story()}</div>`, clickBlocker],
   render: () => html`
     <div class="card p-16">
       <p>Non-interactive card</p>
diff --git a/packages/documentation/src/stories/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/footer/footer.stories.ts
index 320cb2f2ec..195525498f 100644
--- a/packages/documentation/src/stories/components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/components/footer/footer.stories.ts
@@ -1,6 +1,7 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const GRID_CELLS = [1, 2, 3, 4];
 const LINKS_PER_CELL = [6, 8, 8, 5];
@@ -10,6 +11,7 @@ const meta: MetaComponent = {
   title: 'Components/Footer',
   component: 'post-footer',
   tags: ['package:WebComponents'],
+  decorators: [clickBlocker],
   parameters: {
     layout: 'fullscreen',
     badges: [],
diff --git a/packages/documentation/src/stories/components/header/header.stories.ts b/packages/documentation/src/stories/components/header/header.stories.ts
index 1b453d7180..21866771fd 100644
--- a/packages/documentation/src/stories/components/header/header.stories.ts
+++ b/packages/documentation/src/stories/components/header/header.stories.ts
@@ -2,6 +2,7 @@ import type { Args, StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html } from 'lit';
 import { fakeContent } from '@/utils';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '27a2e64d-55ba-492d-ab79-5f7c5e818498',
@@ -247,6 +248,7 @@ export const Default: Story = {
       html` <div class="header-story-wrapper">
         <div class="virtual-body">${story()} ${fakeContent()}</div>
       </div>`,
+    clickBlocker,
   ],
 };
 
@@ -255,5 +257,5 @@ export const WithTargetGroup: Story = {
     targetGroup: true,
   },
   ...Template,
-  decorators: [story => html` <div style="min-height: 400px">${story()}</div>`],
+  decorators: [story => html` <div style="min-height: 400px">${story()}</div>`, clickBlocker],
 };
diff --git a/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts b/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
index a7552188c7..972d5843a9 100644
--- a/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
+++ b/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
@@ -1,6 +1,7 @@
 import type { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 export interface PostLinkarea {
   dataLink?: boolean;
@@ -14,6 +15,7 @@ const meta: MetaComponent<PostLinkarea> = {
   tags: ['package:WebComponents'],
   render: renderLinkarea,
   component: 'post-linkarea',
+  decorators: [clickBlocker],
   parameters: {
     design: {},
   },
diff --git a/packages/documentation/src/stories/components/list-group/list-group.stories.ts b/packages/documentation/src/stories/components/list-group/list-group.stories.ts
index 3e8bf5ab93..3cd10ccf7d 100644
--- a/packages/documentation/src/stories/components/list-group/list-group.stories.ts
+++ b/packages/documentation/src/stories/components/list-group/list-group.stories.ts
@@ -1,13 +1,14 @@
 import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '5a47ba70-7831-4e59-b83e-81b6e6c32372',
   title: 'Components/List Group',
   tags: ['package:HTML'],
   render: renderListGroup,
-  decorators: [gridDecorator],
+  decorators: [gridDecorator, clickBlocker],
   parameters: {
     design: {
       type: 'figma',
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 423cd3f824..24db6a17c4 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -2,6 +2,7 @@ import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '9a636763-de2d-4f72-bc81-98daf10871f7',
@@ -53,7 +54,7 @@ const meta: MetaComponent = {
         'Value can either be in `vw`, `px` or `%`. If no max-width is defined, the popover will extend to the width of its content.',
       table: {
         category: 'General',
-        defaultValue: { summary: '280px' }
+        defaultValue: { summary: '280px' },
       },
     },
     palette: {
@@ -91,6 +92,7 @@ const meta: MetaComponent = {
       name: 'Placement',
     },
   },
+  decorators: [clickBlocker],
 };
 
 function render(args: Args) {
diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts b/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
index aa14b2b864..11843d08f6 100644
--- a/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
+++ b/packages/documentation/src/stories/components/skiplinks/skiplinks.stories.ts
@@ -1,11 +1,13 @@
 import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { MetaExtended } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaExtended = {
   id: '2fc3b456-19ba-4ede-b1bc-499518f829b1',
   title: 'Components/Skiplinks',
   tags: ['package:HTML'],
+  decorators: [clickBlocker],
   render: renderSkiplinks,
 };
 
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
index 8229f2ae73..d7d06f0d50 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
@@ -1,6 +1,7 @@
-import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
@@ -54,13 +55,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATOR
-function clickBlocker(story: StoryFn, context: StoryContext) {
-  return html`
-    <div @click=${(e: Event) => e.preventDefault()}>${story(context.args, context)}</div>
-  `;
-}
-
 function renderTest(args: Args) {
   return html`
     <div class="subnavigation ${args.palette}">
diff --git a/packages/documentation/src/stories/components/teaser/teaser.stories.ts b/packages/documentation/src/stories/components/teaser/teaser.stories.ts
index 97748f59ef..b3d91bfb67 100644
--- a/packages/documentation/src/stories/components/teaser/teaser.stories.ts
+++ b/packages/documentation/src/stories/components/teaser/teaser.stories.ts
@@ -1,10 +1,12 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '68699b2c-ec1f-467d-81ae-8b3f48d7c595',
   title: 'Components/Card Teaser',
+  decorators: [clickBlocker],
   tags: ['package:HTML'],
   parameters: {
     design: {
@@ -93,9 +95,7 @@ export function renderTeaserSectionHeader(size?: string) {
   return html` <div class="d-flex align-items-end justify-content-between gap-24">
     <div class="d-flex flex-column gap-8">
       <h2 class="m-0">Teaser section ${size}</h2>
-      <p class="m-0">
-        This is a sample description for the teaser section component.
-      </p>
+      <p class="m-0">This is a sample description for the teaser section component.</p>
     </div>
     <a href="#" class="flex-shrink-0 btn btn-primary"
       >Let's go <post-icon name="arrowright"></post-icon
@@ -105,7 +105,7 @@ export function renderTeaserSectionHeader(size?: string) {
 
 export const Default: Story = {
   render: renderTeaserCard,
-  decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`],
+  decorators: [story => html`<div style="max-width: 400px;">${story()}</div>`, clickBlocker],
 };
 
 export const Section: Story = {
diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
index d22154f419..95de5fcd55 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
@@ -1,6 +1,7 @@
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLPostLogoElement> = {
   id: '73066e1c-0720-4a9b-8f81-a29d4250872a',
@@ -56,7 +57,7 @@ export const Link: Story = {
     url: 'https://www.post.ch/en',
   },
   render: renderLogo('the homepage'),
-  decorators: [containerWithHeight],
+  decorators: [containerWithHeight, clickBlocker],
 };
 
 export const Height: Story = {
diff --git a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
index 96fcb2f2de..97d4029a8f 100644
--- a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
@@ -4,6 +4,7 @@ import { spread } from '@open-wc/lit-helpers';
 import { getAttributes } from '@/utils';
 import customItems from './custom-items';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
@@ -11,7 +12,7 @@ const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   component: 'swisspost-internet-breadcrumbs',
   tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
index 85fd8c1677..0e48e80bbf 100644
--- a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import customFooterConfig from './custom-footer-config';
 import { spread } from '@open-wc/lit-helpers';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '27fc009d-3eec-43a9-b3a2-55531e721817',
@@ -10,7 +11,7 @@ const meta: MetaComponent = {
   component: 'swisspost-internet-footer',
   tags: ['package:InternetHeader'],
   render: renderInternetFooter,
-  decorators: [hiddenHeader],
+  decorators: [hiddenHeader, clickBlocker],
   parameters: {
     layout: 'fullscreen',
     badges: [],
diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index 6d0160d865..1b005f84b0 100644
--- a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
+++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
@@ -5,6 +5,7 @@ import customConfig from './config/custom-config';
 import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
@@ -158,15 +159,15 @@ const meta: MetaComponent = {
     },
   },
   decorators: [
-    story =>
-      html`
-        <div
-          class="header-story-wrapper"
-          style="--header-z-index: 1;overflow: auto;max-height: 100svh;"
-        >
-          ${story()} ${fakeContent()}
-        </div>
-      `,
+    story => html`
+      <div
+        class="header-story-wrapper"
+        style="--header-z-index: 1;overflow: auto;max-height: 100svh;"
+      >
+        ${story()} ${fakeContent()}
+      </div>
+    `,
+    clickBlocker,
   ],
 };
 
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
index bfbfbbb9e5..135062ddef 100644
--- a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
+++ b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
@@ -2,6 +2,7 @@ import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
 import { StoryContext, StoryFn } from '@storybook/web-components';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent<HTMLPostMegadropdownElement> = {
   id: '212efc4e-875b-4497-912d-d28c6baf32f5',
@@ -124,7 +125,7 @@ function render() {
 type Story = StoryObj<HTMLPostLanguageOptionElement>;
 
 export const Default: Story = {
-  decorators: [megadropdownDecorator],
+  decorators: [megadropdownDecorator, clickBlocker],
 };
 
 // No decorators on the test page
diff --git a/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts b/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts
index b8c66d6fd0..e300af32e3 100644
--- a/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts
+++ b/packages/documentation/src/stories/raw-components/menu-button/menu-button.stories.ts
@@ -1,12 +1,14 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaComponent = {
   id: '8ca2bd70-56e6-4da9-b1fd-4e55388dca88',
   title: 'Raw Components/Menu Button',
   tags: ['package:WebComponents'],
   component: 'post-menu',
+  decorators: [clickBlocker],
   parameters: {
     design: {},
   },
diff --git a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
index f3439b36a1..f149935e5e 100644
--- a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
+++ b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
@@ -1,9 +1,11 @@
+import { clickBlocker } from '@/shared/click-blocker';
 import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 const meta: Meta = {
   id: 'a536a61d-cac2-4f39-adbf-092bdd445ce5',
   title: 'Templates/Error page',
+  decorators: [clickBlocker],
   parameters: {
     layout: 'fullscreen',
   },
@@ -28,14 +30,8 @@ function render() {
               page.
             </p>
             <div class="d-flex gap-16 mt-24">
-              <a class="btn btn-primary" href="/" @click="${(e: Event) => e.preventDefault()}"
-                >Home page</a
-              >
-              <a
-                class="btn btn-secondary"
-                href="https://www.post.ch/de/pages/suche#t=AllTab"
-                @click="${(e: Event) => e.preventDefault()}"
-              >
+              <a class="btn btn-primary" href="/">Home page</a>
+              <a class="btn btn-secondary" href="https://www.post.ch/de/pages/suche#t=AllTab">
                 Search
               </a>
             </div>
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index e6f2353f88..0f5f3c4fa9 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaExtended } from '@root/types';
+import { clickBlocker } from '@/shared/click-blocker';
 
 const meta: MetaExtended = {
   id: 'c55681df-4d21-469d-a5b3-c67686e7c104',
@@ -52,7 +53,7 @@ export const LineHeight: Story = {
 };
 
 export const TextColorReset: Story = {
-  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
+  decorators: [clickBlocker],
   render: () => html`
     <p class="my-colored-text">
       This is a colored text with a