diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownContentFactory.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownContentFactory.tsx
new file mode 100644
index 0000000000..19604b2807
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownContentFactory.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from '../../Icon';
+
+type Props = {
+  content: Content[];
+};
+
+type Content = {
+  icon: string;
+  text: string;
+};
+
+const DropdownContentFactory = ({ content }: Props) => {
+  const lastRow = content.length - 1;
+
+  return (
+    <>
+      {content.map(({ icon, text }, index) => (
+        <a href={`#${icon}`} className={`d-flex ${index !== lastRow && 'mb-400'}`} key={icon}>
+          <Icon name={icon} UNSAFE_className="mr-400" />
+          <span>{text}</span>
+        </a>
+      ))}
+    </>
+  );
+};
+
+export default DropdownContentFactory;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx
new file mode 100644
index 0000000000..f28098f6b2
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownDefault.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownDefault = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger}>
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownDefault;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownDisableAutoClose.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownDisableAutoClose.tsx
deleted file mode 100644
index 96c488697b..0000000000
--- a/packages/web-react/src/components/Dropdown/demo/DropdownDisableAutoClose.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
-import React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import Dropdown from '../Dropdown';
-import { dropdownContent, dropdownTrigger } from './Dropdown';
-import { IconsProvider } from '../../../context';
-import { SpiritDropdownProps } from '../../../types';
-
-const Story: ComponentStory<typeof Dropdown> = (args: SpiritDropdownProps) => (
-  <IconsProvider value={icons}>
-    <Dropdown {...args} enableAutoClose={false} renderTrigger={dropdownTrigger}>
-      {dropdownContent}
-    </Dropdown>
-  </IconsProvider>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownDisabledAutoclose.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownDisabledAutoclose.tsx
new file mode 100644
index 0000000000..92917e6211
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownDisabledAutoclose.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownDisabledAutoclose = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} enableAutoClose={false}>
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownDisabledAutoclose;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownFullWidthMode.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownFullWidthMode.tsx
deleted file mode 100644
index b4a23114dd..0000000000
--- a/packages/web-react/src/components/Dropdown/demo/DropdownFullWidthMode.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
-import React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
-import { SpiritDropdownProps } from '../../../types';
-import { Stack } from '../../Stack';
-import Dropdown from '../Dropdown';
-import { dropdownContent, dropdownTrigger } from './Dropdown';
-
-const Story: ComponentStory<typeof Dropdown> = (args: SpiritDropdownProps) => (
-  <IconsProvider value={icons}>
-    <Stack>
-      Mobile only
-      <Dropdown {...args} fullWidthMode="mobile-only" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-      All
-      <Dropdown {...args} fullWidthMode="all" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-    </Stack>
-  </IconsProvider>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx
new file mode 100644
index 0000000000..40e0380d16
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthAll.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownFullwidthAll = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Finibus quis imperdiet, semper imperdiet aliquam
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} fullWidthMode="all" placement="top-left">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownFullwidthAll;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx
new file mode 100644
index 0000000000..9f1818422c
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownFullwidthMobileOnly.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownFullwidthMobileOnly = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Finibus quis imperdiet, semper imperdiet aliquam
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} fullWidthMode="mobile-only" placement="top-left">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownFullwidthMobileOnly;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownLongerContent.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownLongerContent.tsx
new file mode 100644
index 0000000000..1b634184ae
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownLongerContent.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContentLonger } from './constants';
+
+const DropdownLongerContent = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger}>
+      <DropdownContentFactory content={dropdownContentLonger} />
+    </Dropdown>
+  );
+};
+
+export default DropdownLongerContent;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx
deleted file mode 100644
index 93d92142d1..0000000000
--- a/packages/web-react/src/components/Dropdown/demo/DropdownPlacements.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import { ComponentStory } from '@storybook/react';
-import React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
-import { SpiritDropdownProps } from '../../../types';
-import { Stack } from '../../Stack';
-import Dropdown from '../Dropdown';
-import { dropdownContent, dropdownTrigger } from './Dropdown';
-
-const Story: ComponentStory<typeof Dropdown> = (args: SpiritDropdownProps) => (
-  <IconsProvider value={icons}>
-    <Stack>
-      Bottom Left
-      <Dropdown {...args} placement="bottom-left" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-      Bottom Right
-      <Dropdown {...args} placement="bottom-right" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-      Top Left
-      <Dropdown {...args} placement="top-left" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-      Top Right
-      <Dropdown {...args} placement="top-right" renderTrigger={dropdownTrigger}>
-        {dropdownContent}
-      </Dropdown>
-    </Stack>
-  </IconsProvider>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownTopRight.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownTopRight.tsx
new file mode 100644
index 0000000000..1cd7f6df52
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownTopRight.tsx
@@ -0,0 +1,22 @@
+import React, { Ref } from 'react';
+import { DropdownRenderProps } from '../../../types';
+import { Button } from '../../Button';
+import { Dropdown } from '..';
+import DropdownContentFactory from './DropdownContentFactory';
+import { dropdownContent } from './constants';
+
+const DropdownTopRight = () => {
+  const dropdownTrigger = ({ trigger: { className, ref, ...restOf } }: DropdownRenderProps) => (
+    <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+      Button as anchor
+    </Button>
+  );
+
+  return (
+    <Dropdown renderTrigger={dropdownTrigger} placement="top-right">
+      <DropdownContentFactory content={dropdownContent} />
+    </Dropdown>
+  );
+};
+
+export default DropdownTopRight;
diff --git a/packages/web-react/src/components/Dropdown/demo/constants.ts b/packages/web-react/src/components/Dropdown/demo/constants.ts
new file mode 100644
index 0000000000..7cb77b025b
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/demo/constants.ts
@@ -0,0 +1,13 @@
+export const dropdownContent = [
+  { icon: 'info', text: 'Information' },
+  { icon: 'link', text: 'Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim' },
+  { icon: 'profile', text: 'Profile' },
+  { icon: 'help', text: 'Help' },
+];
+
+export const dropdownContentLonger = [
+  { icon: 'info', text: 'Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim' },
+  { icon: 'link', text: 'Nulla condimentum, purus commodo cursus non nulla rhoncus' },
+  { icon: 'profile', text: 'Mauris nunc, elementum enim in lacinia vitae quam placerat sem, euismod accumsan' },
+  { icon: 'help', text: 'Donec dui, nunc dui vel varius libero molestie nibh nunc' },
+];
diff --git a/packages/web-react/src/components/Dropdown/demo/index.tsx b/packages/web-react/src/components/Dropdown/demo/index.tsx
index d60a570832..8fcee9845d 100644
--- a/packages/web-react/src/components/Dropdown/demo/index.tsx
+++ b/packages/web-react/src/components/Dropdown/demo/index.tsx
@@ -5,27 +5,35 @@ 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 Dropdown from './Dropdown';
-import DropdownDisableAutoClose from './DropdownDisableAutoClose';
-import DropdownPlacements from './DropdownPlacements';
-import DropdownFullWidthMode from './DropdownFullWidthMode';
+import { IconsProvider } from '../../../context';
+import DropdownDefault from './DropdownDefault';
+import DropdownTopRight from './DropdownTopRight';
+import DropdownDisabledAutoclose from './DropdownDisabledAutoclose';
+import DropdownLongerContent from './DropdownLongerContent';
+import DropdownFullwidthAll from './DropdownFullwidthAll';
+import DropdownFullwidthMobileOnly from './DropdownFullwidthMobileOnly';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Dropdown {...Dropdown.args} />
+      <DocsSection title="Basic usage with default align">
+        <DropdownDefault />
+      </DocsSection>
+      <DocsSection title="Usage with align to top right">
+        <DropdownTopRight />
+      </DocsSection>
+      <DocsSection title="Usage with disabled auto close">
+        <DropdownDisabledAutoclose />
       </DocsSection>
-      <DocsSection title="Disable Auto Close">
-        <DropdownDisableAutoClose />
+      <DocsSection title="Longer content">
+        <DropdownLongerContent />
       </DocsSection>
-      <DocsSection title="Placements">
-        <DropdownPlacements />
+      <DocsSection title="Full-width mode 'all'">
+        <DropdownFullwidthAll />
       </DocsSection>
-      <DocsSection title="Full Width Mode">
-        <DropdownFullWidthMode />
+      <DocsSection title="Full-width mode 'mobile-only'">
+        <DropdownFullwidthMobileOnly />
       </DocsSection>
     </IconsProvider>
   </React.StrictMode>,