diff --git a/packages/web-react/docs/DocsSections.tsx b/packages/web-react/docs/DocsSections.tsx
index 48b7023f7a..d9697be10a 100644
--- a/packages/web-react/docs/DocsSections.tsx
+++ b/packages/web-react/docs/DocsSections.tsx
@@ -5,7 +5,7 @@ import DocsStack from './DocsStack';
 interface DocsSectionProps {
   children: ReactNode;
   hasStack?: boolean;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
   title: string;
 }
diff --git a/packages/web-react/docs/DocsStack.tsx b/packages/web-react/docs/DocsStack.tsx
index 85d38d6fea..5310ed42b3 100644
--- a/packages/web-react/docs/DocsStack.tsx
+++ b/packages/web-react/docs/DocsStack.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 interface DocsStackProps {
   children: ReactNode;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {
diff --git a/packages/web-react/src/components/Tag/demo/Tag.tsx b/packages/web-react/src/components/Tag/demo/Tag.tsx
deleted file mode 100644
index 6faff4957e..0000000000
--- a/packages/web-react/src/components/Tag/demo/Tag.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SpiritTagProps } from '../../../types';
-import Tag from '../Tag';
-
-const Story: ComponentStory<typeof Tag> = <T extends ElementType = 'span', C = void, S = void>(
-  args: SpiritTagProps<T, C, S>,
-) => <Tag {...args} />;
-
-Story.args = {
-  children: 'Tag',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Tag/demo/TagColors.tsx b/packages/web-react/src/components/Tag/demo/TagColors.tsx
deleted file mode 100644
index 7bccfa9bb5..0000000000
--- a/packages/web-react/src/components/Tag/demo/TagColors.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Tag from '../Tag';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div>
-    <Tag color="neutral">Tag</Tag>
-    <Tag color="success">Tag</Tag>
-    <Tag color="informative">Tag</Tag>
-    <Tag color="warning">Tag</Tag>
-    <Tag color="danger">Tag</Tag>
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Tag/demo/TagDefault.tsx b/packages/web-react/src/components/Tag/demo/TagDefault.tsx
new file mode 100644
index 0000000000..b8208be065
--- /dev/null
+++ b/packages/web-react/src/components/Tag/demo/TagDefault.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import DocsSection from '../../../../docs/DocsSections';
+import { EmotionColors, SizesExtended } from '../../../constants';
+import { Grid } from '../../Grid';
+import { Tag } from '../Tag';
+
+const TagDefault = () => {
+  const sizes = Object.values(SizesExtended);
+  const emotionColors = Object.values(EmotionColors);
+  const colors = ['neutral', ...emotionColors];
+
+  return (
+    <Grid cols={1} tablet={3} desktop={5}>
+      {sizes.map((size) => (
+        <DocsSection key={size} title={`Size ${size}`}>
+          {colors.map((color) => (
+            <>
+              <Tag color={color} size={size} isSubtle>
+                Tag {color}
+              </Tag>
+              <Tag color={color} size={size}>
+                Tag {color}
+              </Tag>
+            </>
+          ))}
+        </DocsSection>
+      ))}
+    </Grid>
+  );
+};
+
+export default TagDefault;
diff --git a/packages/web-react/src/components/Tag/demo/TagSizes.tsx b/packages/web-react/src/components/Tag/demo/TagSizes.tsx
deleted file mode 100644
index 0af5127131..0000000000
--- a/packages/web-react/src/components/Tag/demo/TagSizes.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Tag from '../Tag';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div>
-    <Tag size="xsmall">Tag</Tag>
-    <Tag size="small">Tag</Tag>
-    <Tag size="medium">Tag</Tag>
-    <Tag size="large">Tag</Tag>
-    <Tag size="xlarge">Tag</Tag>
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Tag/demo/index.tsx b/packages/web-react/src/components/Tag/demo/index.tsx
index 16e5b5b9cf..c2acd83072 100644
--- a/packages/web-react/src/components/Tag/demo/index.tsx
+++ b/packages/web-react/src/components/Tag/demo/index.tsx
@@ -2,27 +2,13 @@
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Tag from './Tag';
-import TagColors from './TagColors';
-import TagSizes from './TagSizes';
+import TagDefault from './TagDefault';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Tag {...Tag.args} />
-      </DocsSection>
-      <DocsSection title="Colors">
-        <TagColors />
-      </DocsSection>
-      <DocsSection title="Sizes">
-        <TagSizes />
-      </DocsSection>
-    </IconsProvider>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <TagDefault />
+    </DocsSection>
   </React.StrictMode>,
 );