diff --git a/packages/web-react/src/components/Radio/demo/Radio.tsx b/packages/web-react/src/components/Radio/demo/Radio.tsx
deleted file mode 100644
index 2144e09d33..0000000000
--- a/packages/web-react/src/components/Radio/demo/Radio.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-import Radio from '../Radio';
-import { SpiritRadioProps } from '../../../types';
-
-const Story: ComponentStory<typeof Radio> = (args: SpiritRadioProps) => <Radio {...args} />;
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/RadioDefault.tsx b/packages/web-react/src/components/Radio/demo/RadioDefault.tsx
new file mode 100644
index 0000000000..5ab94f5741
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioDefault.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioDefault = () => (
+  <>
+    <Radio id="radioDefault" label="Radio Label" name="radioDefault" />
+
+    <Radio id="radioDefaultChecked" isChecked label="Radio Label" name="radioDefault" />
+  </>
+);
+
+export default RadioDefault;
diff --git a/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx b/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
index bb88da2ece..4ff65c3186 100644
--- a/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioDisabled.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import Radio from '../Radio';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio" label="Radio disabled" name="example" isDisabled />
-    <Radio id="radio" label="Radio disabled checked" name="example" isDisabled isChecked />
-  </div>
+const RadioDisabled = () => (
+  <>
+    <Radio id="radioDisabled" isDisabled label="Radio Label" name="radioDisabled" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioDisabledHelperText"
+      isChecked
+      isDisabled
+      label="Radio Label"
+      name="radioDisabledHelperText"
+    />
+  </>
 );
 
-export default Story;
+export default RadioDisabled;
diff --git a/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx b/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
index 7b01b54edf..59105461da 100644
--- a/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioHelperText.tsx
@@ -1,17 +1,8 @@
 import React from 'react';
 import Radio from '../Radio';
-import { SpiritRadioProps } from '../../../types';
 
-const Story = (args: SpiritRadioProps) => <Radio {...args} />;
+const RadioHelperText = () => (
+  <Radio helperText="Helper text" id="radioHelperText" label="Radio Label" name="radioHelperText" />
+);
 
-Story.args = {
-  id: 'example',
-  isChecked: true,
-  isDisabled: false,
-  isLabelHidden: false,
-  label: 'Label',
-  name: 'example',
-  helperText: 'Helper text',
-};
-
-export default Story;
+export default RadioHelperText;
diff --git a/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx b/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx
new file mode 100644
index 0000000000..c7b7deec92
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioHiddenLabel.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioHiddenLabel = () => (
+  <Radio id="radioHiddenLabel" label="Radio Label" name="radioHiddenLabel" isLabelHidden />
+);
+
+export default RadioHiddenLabel;
diff --git a/packages/web-react/src/components/Radio/demo/RadioItem.tsx b/packages/web-react/src/components/Radio/demo/RadioItem.tsx
index 0ef4813c05..9a2ae1d8ec 100644
--- a/packages/web-react/src/components/Radio/demo/RadioItem.tsx
+++ b/packages/web-react/src/components/Radio/demo/RadioItem.tsx
@@ -1,13 +1,26 @@
 import React from 'react';
 import Radio from '../Radio';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio" label="Radio Item" name="example" isItem />
-    <Radio id="radio" label="Radio Item checked" name="example" isItem isChecked />
-  </div>
+const RadioItem = () => (
+  <>
+    <Radio id="radioItemDefault" isItem label="Radio Label" name="item" />
+
+    <Radio id="radioItemDefaultChecked" isChecked isItem label="Radio Label" name="item" />
+
+    <Radio helperText="Helper text" id="radioItemHelperText" isItem label="Radio Label" name="item" />
+
+    <Radio id="radioItemDisabled" isDisabled isItem label="Radio Label" name="itemDisabled" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioItemDisabledHelperText"
+      isDisabled
+      isChecked
+      isItem
+      label="Radio Label"
+      name="itemDisabled"
+    />
+  </>
 );
 
-export default Story;
+export default RadioItem;
diff --git a/packages/web-react/src/components/Radio/demo/RadioList.tsx b/packages/web-react/src/components/Radio/demo/RadioList.tsx
deleted file mode 100644
index 74010e4e7c..0000000000
--- a/packages/web-react/src/components/Radio/demo/RadioList.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { ChangeEventHandler, useState } from 'react';
-import Radio from '../Radio';
-import { Stack } from '../../Stack';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => {
-  const [checkedOption, setCheckedOption] = useState('value1');
-
-  const onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    setCheckedOption(event.target.value);
-  };
-
-  const radioList = ['value1', 'value2', 'value3'];
-
-  return (
-    <Stack>
-      {radioList.map((value) => (
-        <Radio
-          key={value}
-          id={value}
-          label={`Radio ${value}`}
-          onChange={onValueChange}
-          name="exampleList"
-          value={value}
-          isChecked={checkedOption === value}
-        />
-      ))}
-    </Stack>
-  );
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/RadioValidation.tsx b/packages/web-react/src/components/Radio/demo/RadioValidation.tsx
new file mode 100644
index 0000000000..732e351df1
--- /dev/null
+++ b/packages/web-react/src/components/Radio/demo/RadioValidation.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Radio from '../Radio';
+
+const RadioValidation = () => (
+  <>
+    <Radio id="radioSuccess" label="Radio Label" name="validation" validationState="success" />
+
+    <Radio id="radioWarning" label="Radio Label" name="validation" validationState="warning" />
+
+    <Radio id="radioDanger" isChecked label="Radio Label" name="validation" validationState="danger" />
+
+    <Radio
+      helperText="Helper text"
+      id="radioWarningHelperText"
+      isChecked
+      label="Radio Label"
+      name="validation"
+      validationState="warning"
+    />
+  </>
+);
+
+export default RadioValidation;
diff --git a/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx b/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx
deleted file mode 100644
index 70344de139..0000000000
--- a/packages/web-react/src/components/Radio/demo/RadioValidationState.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import Radio from '../Radio';
-
-const Story = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Radio id="radio0" label="Radio success" name="example" validationState="success" />
-    <Radio id="radio1" label="Radio warning" name="example" validationState="warning" />
-    <Radio id="radio2" label="Radio danger" name="example" validationState="danger" />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Radio/demo/index.tsx b/packages/web-react/src/components/Radio/demo/index.tsx
index a0fcb5f1ab..c2cc9028ad 100644
--- a/packages/web-react/src/components/Radio/demo/index.tsx
+++ b/packages/web-react/src/components/Radio/demo/index.tsx
@@ -5,36 +5,36 @@ 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 Radio from './Radio';
-import RadioValidationState from './RadioValidationState';
+import { IconsProvider } from '../../../context';
+import RadioDefault from './RadioDefault';
+import RadioHiddenLabel from './RadioHiddenLabel';
 import RadioHelperText from './RadioHelperText';
 import RadioDisabled from './RadioDisabled';
+import RadioValidation from './RadioValidation';
 import RadioItem from './RadioItem';
-import RadioList from './RadioList';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <Radio label="Field label" />
+        <RadioDefault />
       </DocsSection>
-      <DocsSection title="Validation State">
-        <RadioValidationState />
+      <DocsSection title="Hidden Label">
+        <RadioHiddenLabel />
       </DocsSection>
       <DocsSection title="Helper Text">
-        <RadioHelperText {...RadioHelperText.args} />
+        <RadioHelperText />
       </DocsSection>
       <DocsSection title="Disabled">
         <RadioDisabled />
       </DocsSection>
+      <DocsSection title="Validation State">
+        <RadioValidation />
+      </DocsSection>
       <DocsSection title="Item">
         <RadioItem />
       </DocsSection>
-      <DocsSection title="List">
-        <RadioList />
-      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );
diff --git a/packages/web/src/scss/components/Radio/index.html b/packages/web/src/scss/components/Radio/index.html
index 8e1c1d87c0..ceb19fbc4e 100644
--- a/packages/web/src/scss/components/Radio/index.html
+++ b/packages/web/src/scss/components/Radio/index.html
@@ -1,9 +1,11 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Default</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDefault" class="Radio">
       <input type="radio" id="radioDefault" class="Radio__input" name="default" />
       <span class="Radio__text">
@@ -17,26 +19,34 @@ <h2 class="docs-Heading">Default</h2>
         <span class="Radio__label">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Hidden Label</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHiddenLabel" class="Radio">
       <input type="radio" id="radioHiddenLabel" class="Radio__input" name="hiddenLabel" />
       <span class="Radio__text">
         <span class="Radio__label Radio__label--hidden">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Helper Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHelperText" class="Radio">
       <input type="radio" id="radioHelperText" class="Radio__input" name="helperText" />
       <span class="Radio__text">
@@ -44,13 +54,17 @@ <h2 class="docs-Heading">Helper Text</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Disabled</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDisabled" class="Radio Radio--disabled">
       <input type="radio" id="radioDisabled" class="Radio__input" name="disabled" disabled />
       <span class="Radio__text">
@@ -65,13 +79,17 @@ <h2 class="docs-Heading">Disabled</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Validation State</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
+
     <label for="radioSuccess" class="Radio Radio--success">
       <input type="radio" id="radioSuccess" class="Radio__input" name="validation" />
       <span class="Radio__text">
@@ -100,13 +118,16 @@ <h2 class="docs-Heading">Validation State</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Item</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
     <label for="radioItemDefault" class="Radio Radio--item">
       <input type="radio" id="radioItemDefault" class="Radio__input" name="item" />
       <span class="Radio__text">
@@ -150,7 +171,9 @@ <h2 class="docs-Heading">Item</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+  
 </section>
 
 {{/layout/plain }}