diff --git a/packages/storybook/src/react-components/alert/alert.stories.tsx b/packages/storybook/src/react-components/alert/alert.stories.tsx
index 17e1a3e48..9c5ec54fe 100644
--- a/packages/storybook/src/react-components/alert/alert.stories.tsx
+++ b/packages/storybook/src/react-components/alert/alert.stories.tsx
@@ -1,6 +1,8 @@
 import { LuxAlert, type LuxAlertProps, LuxHeading1, LuxParagraph } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { VisualTypes } from './visual/Types';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -8,7 +10,6 @@ const meta = {
   title: 'React Components/Alert',
   id: 'react-components-alert',
   component: LuxAlert,
-  subcomponents: {},
   parameters: {
     tokens,
     tokensPrefix: 'utrecht-alert',
@@ -112,3 +113,16 @@ export const ErrorAlert: Story = {
     },
   },
 };
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <VisualTypes />
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <VisualTypes />
+    </VisualRegressionWrapper>
+  </>
+));
diff --git a/packages/storybook/src/react-components/alert/visual/Types.tsx b/packages/storybook/src/react-components/alert/visual/Types.tsx
new file mode 100644
index 000000000..cc4ec71c1
--- /dev/null
+++ b/packages/storybook/src/react-components/alert/visual/Types.tsx
@@ -0,0 +1,17 @@
+import { LuxAlert, LuxAlertProps, LuxParagraph } from '@lux-design-system/components-react';
+import { PropsWithChildren } from 'react';
+
+const VisualAlertTemplate = ({ children, type }: PropsWithChildren<LuxAlertProps>) => (
+  <LuxAlert type={type}>
+    <LuxParagraph>{children}</LuxParagraph>
+  </LuxAlert>
+);
+
+export const VisualTypes = () => (
+  <>
+    <VisualAlertTemplate type="info">Info Alert</VisualAlertTemplate>
+    <VisualAlertTemplate type="success">Okay Alert</VisualAlertTemplate>
+    <VisualAlertTemplate type="warning">Warning Alert</VisualAlertTemplate>
+    <VisualAlertTemplate type="error">Error Alert</VisualAlertTemplate>
+  </>
+);
diff --git a/packages/storybook/src/react-components/link/link.stories.tsx b/packages/storybook/src/react-components/link/link.stories.tsx
index 240f68036..58e49da88 100644
--- a/packages/storybook/src/react-components/link/link.stories.tsx
+++ b/packages/storybook/src/react-components/link/link.stories.tsx
@@ -1,6 +1,8 @@
 import { LuxLink } from '@lux-design-system/components-react';
 import tokens from '@lux-design-system/design-tokens/dist/index.json';
 import type { Meta, StoryObj } from '@storybook/react';
+import { VisualStates } from './visual/States';
+import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
 
 type Story = StoryObj<typeof meta>;
 
@@ -204,3 +206,16 @@ export const LinkWithIconEnd: Story = {
     },
   },
 };
+
+export const Visual = createVisualRegressionStory(() => (
+  <>
+    <h4 className="utrecht-heading-3">Light</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-light`}>
+      <VisualStates />
+    </VisualRegressionWrapper>
+    <h4 className="utrecht-heading-3">Dark</h4>
+    <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
+      <VisualStates />
+    </VisualRegressionWrapper>
+  </>
+));
diff --git a/packages/storybook/src/react-components/link/visual/States.tsx b/packages/storybook/src/react-components/link/visual/States.tsx
new file mode 100644
index 000000000..d82f57d0f
--- /dev/null
+++ b/packages/storybook/src/react-components/link/visual/States.tsx
@@ -0,0 +1,22 @@
+import { LuxLink } from '@lux-design-system/components-react';
+
+export const VisualStates = () => (
+  <div className="utrecht-document">
+    <LuxLink href="#">Link</LuxLink>
+    <div className="pseudo-hover-all">
+      <LuxLink href="#">Hover link</LuxLink>
+    </div>
+    <div className="pseudo-active-all">
+      <LuxLink href="#">Active link</LuxLink>
+    </div>
+    <div className="pseudo-visited-all">
+      <LuxLink href="#">Visited link</LuxLink>
+    </div>
+    <div className="pseudo-focus-all">
+      <LuxLink href="#">Focus link</LuxLink>
+    </div>
+    <div className="pseudo-focus-visible-all">
+      <LuxLink href="#">Focus visible link</LuxLink>
+    </div>
+  </div>
+);