diff --git a/.storybook/preview.js b/.storybook/preview.js
index e5e9a38c0..69cccf7ce 100755
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -29,7 +29,7 @@ async function run() {
       showRoots: true,
       storySort: sortEachDepth([
         ['Intro', 'Forms', 'Buttons', 'Overlays', 'Navigation', 'Localize', 'Icons', '...'],
-        ['Intro', 'Features Overview', '...', 'System'],
+        ['Intro', 'Features Overview', '...', 'Validation', 'System'],
         ['Overview', '...', '_internals'],
       ]),
     },
diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md
index 5bb008418..87b1561e0 100644
--- a/packages/checkbox-group/README.md
+++ b/packages/checkbox-group/README.md
@@ -8,7 +8,7 @@ You should use [lion-checkbox](../checkbox/)'s inside this element.
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/checkbox-group/stories/index.stories.mdx b/packages/checkbox-group/stories/index.stories.mdx
index 9e5acda9a..dadaf1126 100644
--- a/packages/checkbox-group/stories/index.stories.mdx
+++ b/packages/checkbox-group/stories/index.stories.mdx
@@ -37,11 +37,11 @@ Its purpose is to provide a way for users to check **multiple** options amongst
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
 
 ## Features
 
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
 
 ## How to use
 
diff --git a/packages/fieldset/README.md b/packages/fieldset/README.md
index b4b3bd6af..f7c857fea 100644
--- a/packages/fieldset/README.md
+++ b/packages/fieldset/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset) for a live demo and documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation
 
 ## How to use
 
diff --git a/packages/fieldset/stories/overview.stories.mdx b/packages/fieldset/stories/overview.stories.mdx
new file mode 100644
index 000000000..4edaa7310
--- /dev/null
+++ b/packages/fieldset/stories/overview.stories.mdx
@@ -0,0 +1,41 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import '@lion/input/lion-input.js';
+import { localize } from '@lion/localize';
+import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
+import '../lion-fieldset.js';
+import './helpers/demo-fieldset-child.js';
+
+<Meta title="Forms/Fieldset/Overview" parameters={{ component: 'lion-fieldset' }} />
+
+# Fieldset
+
+`lion-fieldset` groups multiple input fields or other fieldsets together.
+
+We have three specific fieldset implementations:
+
+- [lion-form](?path=/docs/forms-form-overview--page)
+- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
+- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
+
+```html
+<lion-fieldset name="nameGroup" label="Name">
+  <lion-input name="FirstName" label="First Name"></lion-input>
+  <lion-input name="LastName" label="Last Name"></lion-input>
+</lion-fieldset>
+```
+
+A native fieldset element should always have a legend-element for a11y purposes.
+However, our fieldset element is not native and should not have a legend-element.
+Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
+
+## Features
+
+- Easy retrieval of form data based on field names
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
+- Can disable input fields on fieldset level
+- Accessible out of the box
+
+## Examples
+
+For examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story).
diff --git a/packages/form-system/stories/10-intro.stories.mdx b/packages/form-system/stories/10-intro.stories.mdx
index 191eade71..c67614875 100644
--- a/packages/form-system/stories/10-intro.stories.mdx
+++ b/packages/form-system/stories/10-intro.stories.mdx
@@ -6,7 +6,7 @@ The Form System allows you to create complex forms with various validations in a
 
 ## Features
 
-- Built in [validate](?path=/docs/forms-system-validate-system) for error/warning/info/success
+- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
 - Formatting of values
 - Accessible
 
@@ -14,12 +14,13 @@ For a more in depth description look into the [Form System Overview](?path=/docs
 
 ## Packages
 
-| Package                                              | Description                        |
-| ---------------------------------------------------- | ---------------------------------- |
+| Package                                              | Description                                       |
+| ---------------------------------------------------- | ------------------------------------------------- |
 | [checkbox](?path=/docs/forms-checkbox--default-story)               | Checkbox form element              |
 | [checkbox-group](?path=/docs/forms-checkbox-group--default-story)   | Group of checkboxes                |
 | [field](?path=/docs/forms-field--default-story)                     | Base class for all inputs          |
-| [form](?path=/docs/forms-form--default-story)                       | Wrapper for multiple form elements |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)               | Group for form inputs              |
+| [form](?path=/docs/forms-form-overview--page)                       | Wrapper for multiple form elements |
 | [input](?path=/docs/forms-input--default-story)                     | Input element for strings          |
 | [input-amount](?path=/docs/forms-input-amount--default-story)       | Input element for amounts          |
 | [input-date](?path=/docs/forms-input-date--default-story)           | Input element for dates            |
diff --git a/packages/validate/stories/02-ValidationExamples.stories.mdx b/packages/form-system/stories/17-Validation-Examples.stories.mdx
similarity index 91%
rename from packages/validate/stories/02-ValidationExamples.stories.mdx
rename to packages/form-system/stories/17-Validation-Examples.stories.mdx
index 77235d573..b6177d87e 100644
--- a/packages/validate/stories/02-ValidationExamples.stories.mdx
+++ b/packages/form-system/stories/17-Validation-Examples.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, html } from '@open-wc/demoing-storybook';
 /* eslint-disable import/no-extraneous-dependencies */
-import { LionInput } from '@lion/input';
+import { LionInput } from '@lion/input/index.js';
 import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
 import '@lion/input-email/lion-input-email.js';
@@ -23,12 +23,15 @@ import {
   MinNumber,
   Required,
   Validator,
-} from '../index.js';
+} from '@lion/validate';
 
-<Meta title="Forms/Validation Examples" parameters={{ component: 'lion-input' }}/>
+<Meta title="Forms/Validation/Examples" parameters={{ component: 'lion-input' }}/>
 
 ## Required Validator
 
+The required validator can be put onto every form field element and will make sure that element is not empty.
+For an input that may mean that it is not an empty string while for a checkbox group it means at least one checkbox needs to be checked.
+
 <Story name="Required Validator">
   {html`
     <lion-input .validators=${[new Required()]} label="Required"></lion-input>
@@ -41,6 +44,8 @@ import {
 
 ## String Validators
 
+Useful on input elements it allows to define how many characters can be entered.
+
 <Story name="String Validators">
   {html`
     <lion-input
@@ -89,9 +94,11 @@ import {
 ></lion-input>
 ```
 
-
 ## Number Validators
 
+Number validations assume that it's modelValue is actually a number.
+Therefore it may only be used on input that have an appropriate parser/formatter like the input-amount.
+
 <Story name="Number Validators">
   {html`
   <lion-input-amount
@@ -142,6 +149,8 @@ import {
 
 ## Date Validators
 
+Date validators work with real javascript dates. Use them on input-date.
+
 <Story name="Date Validators">
   {() => {
     const today = new Date();
@@ -230,6 +239,9 @@ const tomorrow = new Date(year, month, day + 1);
 
 ## Validation Types
 
+When defining your own component you can decide to allow for multiple types of validation.
+By default only `error` is used however there are certainly use cases where warning or success messages make sense.
+
 <Story name="Validation Types">
   {() => {
     try {
@@ -287,16 +299,16 @@ const tomorrow = new Date(year, month, day + 1);
 </Story>
 
 ```js
-    try {
-      class MyTypesInput extends LionInput {
-        static get validationTypes() {
-          return ['error', 'warning', 'info', 'success'];
-        }
-      }
-      customElements.define('my-types-input', MyTypesInput);
-    } catch (err) {
-      // expected as it is a demo
+try {
+  class MyTypesInput extends LionInput {
+    static get validationTypes() {
+      return ['error', 'warning', 'info', 'success'];
     }
+  }
+  customElements.define('my-types-input', MyTypesInput);
+} catch (err) {
+  // expected as it is a demo
+}
 ```
 
 ```html
@@ -343,6 +355,9 @@ const tomorrow = new Date(year, month, day + 1);
 
 ## Custom Validators
 
+Here is an example how you can make your own validator and providing the error messages directly within.
+You can even hard code localization in there if needed or you can use a localization system.
+
 <Story name="Custom Validators">
   {() => {
     class MyValidator extends Validator {
@@ -404,6 +419,8 @@ class MyValidator extends Validator {
 
 ## Override default messages
 
+Oftern
+
 <Story name="Override default messages">
 {html`
   <lion-input
diff --git a/packages/form-system/stories/20-System-Overview.stories.mdx b/packages/form-system/stories/20-System-Overview.stories.mdx
index 64a6a2c96..733eea137 100644
--- a/packages/form-system/stories/20-System-Overview.stories.mdx
+++ b/packages/form-system/stories/20-System-Overview.stories.mdx
@@ -29,8 +29,8 @@ They extend `LionField`, which in turn uses the `FormControlMixin`.
 Fields provide a normalized api for both platform components and custom made form controls.
 On top of this, they offer:
 
-- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing) of view values
-- advanced [validation](?path=/docs/forms-system-validate-system) possibilities
+- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing--parser) of view values
+- advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
 - creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
 - provision of labels and help texts in an easy, declarative manner
 - accessibility out of the box <!-- TODO: write how our form system manages to deliver accessible components with all challenges that shadow dom provide -->
@@ -40,30 +40,30 @@ On top of this, they offer:
 
 Platform field wrappers add all of the functionality described above to native form elements.
 
-- [LionInput](?path=/docs/forms-input), a wrapper for `<input>`
-- [LionTextarea](?path=/docs/forms-textarea), a wrapper for `<textarea>`
-- [LionSelect](?path=/docs/forms-select), a wrapper for `<select>`
-- [LionRadio](?path=/docs/forms-radio-group), a wrapper for `<input type="radio">`
-- [LionCheckbox](?path=/docs/forms-checkbox-group), a wrapper for `<input type="checkbox">`
-- [LionInputRange](?path=/docs/forms-input-range), a wrapper for `<input type="range">`
+- [LionInput](?path=/docs/forms-input--default-story), a wrapper for `<input>`
+- [LionTextarea](?path=/docs/forms-textarea--default-story), a wrapper for `<textarea>`
+- [LionSelect](?path=/docs/forms-select--default-story), a wrapper for `<select>`
+- [LionRadio](?path=/docs/forms-radio-group--default-story), a wrapper for `<input type="radio">`
+- [LionCheckbox](?path=/docs/forms-checkbox-group--default-story), a wrapper for `<input type="checkbox">`
+- [LionInputRange](?path=/docs/forms-input-range--default-story), a wrapper for `<input type="range">`
 
 ### Dedicated fields
 
 Dedicated fields are less generic fields in a sense that they by default expect a certain type of
 modelValue. This means that they have validators, parsers and formatters preconfigured.
 
-- [`LionInputDate`](?path=/docs/forms-input-date)
-- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker)
-- [`LionInputEmail`](?path=/docs/forms-input-email)
-- [`LionInputAmount`](?path=/docs/forms-input-amount)
-- [`LionInputIban`](?path=/docs/forms-input-iban)
+- [`LionInputDate`](?path=/docs/forms-input-date--default-story)
+- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker--default-story)
+- [`LionInputEmail`](?path=/docs/forms-input-email--default-story)
+- [`LionInputAmount`](?path=/docs/forms-input-amount--default-story)
+- [`LionInputIban`](?path=/docs/forms-input-iban--default-story)
 
 ### Custom fields
 
 Instead of wrapping native elements, this category of fields contains custom built
 form elements.
 
-- [`LionSelectRich`](?path=/docs/forms-select-rich), an advanced (rich) version of `<select>`
+- [`LionSelectRich`](?path=/docs/forms-select-rich--default-story), an advanced (rich) version of `<select>`
 
 One could also think of components like:
 
@@ -80,17 +80,17 @@ Fieldsets are groups of fields. They can be considered fields on their own as we
 partly share the normalized api via `FormControlMixin`.
 Fieldsets are at the base of:
 
-- [`LionFieldset`](?path=/docs/forms-fieldset)
-- [`LionForm`](?path=/docs/forms-form)
-- [`LionRadioGroup`](?path=/docs/forms-radio-group)
-- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group)
+- [`LionFieldset`](?path=/docs/forms-fieldset-overview--page)
+- [`LionForm`](?path=/docs/forms-form-overview--page)
+- [`LionRadioGroup`](?path=/docs/forms-radio-group--default-story)
+- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group--default-story)
 
 ## Other Resources
 
 <!-- TODO: - [`FormControlMixin`] () -->
 <!-- TODO: - [`LionField`] () -->
 
-- [Model Value](?path=/docs/forms-system-modelvalue)
-- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing)
-- [Interaction states](?path=/docs/forms-system-interaction-states)
-- [Validation System](?path=/docs/forms-system-validate-system)
+- [Model Value](?path=/docs/forms-system-modelvalue--page)
+- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
+- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- [Validation System](?path=/docs/forms-validation-overview--page)
diff --git a/packages/form-system/stories/25-System-ModelValue.stories.mdx b/packages/form-system/stories/25-System-ModelValue.stories.mdx
index 12ea57f44..9a1d056ab 100644
--- a/packages/form-system/stories/25-System-ModelValue.stories.mdx
+++ b/packages/form-system/stories/25-System-ModelValue.stories.mdx
@@ -25,4 +25,4 @@ level, via:
 > Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
 > recommended as a means of interaction.
 
-For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
diff --git a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
index fd99ee5b8..c18fb904a 100644
--- a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
+++ b/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
@@ -9,7 +9,7 @@ import './helper-wc/h-output.js';
 # Creating a custom field
 
 Custom fields can be created in just a few steps. All you need is an interaction element
-(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview)
+(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview--page)
 functionality.
 
 ## Prerequisite: an interaction element
@@ -25,7 +25,7 @@ it has a tabindex=“0” applied.
 ## Connecting the interaction element to the field
 
 Now we want to integrate the slider in our form framework to enrich the user interface, get
-validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview).
+validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview--page).
 We start of by creating a component `<lion-slider>` that extends from `LionField`.
 Then we follow the steps below:
 
diff --git a/packages/fieldset/stories/index.stories.mdx b/packages/form-system/stories/fieldset-examples.stories.mdx
similarity index 67%
rename from packages/fieldset/stories/index.stories.mdx
rename to packages/form-system/stories/fieldset-examples.stories.mdx
index bbe60b0c1..00586fa41 100644
--- a/packages/fieldset/stories/index.stories.mdx
+++ b/packages/form-system/stories/fieldset-examples.stories.mdx
@@ -2,20 +2,11 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
 import '@lion/input/lion-input.js';
 import { localize } from '@lion/localize';
 import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
-import '../lion-fieldset.js';
-import './helpers/demo-fieldset-child.js';
+import '@lion/fieldset/lion-fieldset.js';
 
-<Meta title="Forms/Fieldset" parameters={{ component: 'lion-fieldset' }} />
+<Meta title="Forms/Fieldset/Examples" parameters={{ component: 'lion-fieldset' }} />
 
-# Fieldset
-
-`lion-fieldset` groups multiple input fields or other fieldsets together.
-
-We have three specific fieldset implementations:
-
-- [lion-form](?path=/docs/forms-form)
-- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
-- [lion-radio-group](?path=/docs/forms-radio-group)
+# Fieldset Examples
 
 <Story name="Default">
   {html`
@@ -25,34 +16,19 @@ We have three specific fieldset implementations:
       }
     </style>
     <lion-fieldset name="nameGroup" label="Name">
-      <demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child>
-      <demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child>
+      <lion-input name="FirstName" label="First Name"></lion-input>
+      <lion-input name="LastName" label="Last Name"></lion-input>
     </lion-fieldset>
   `}
 </Story>
 
 ```html
 <lion-fieldset name="nameGroup" label="Name">
-  <demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child>
-  <demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child>
+  <lion-input name="FirstName" label="First Name"></lion-input>
+  <lion-input name="LastName" label="Last Name"></lion-input>
 </lion-fieldset>
 ```
 
-A native fieldset element should always have a legend-element for a11y purposes.
-However, our fieldset element is not native and should not have a legend-element.
-Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
-
-## Features
-
-- Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
-- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
-- Can disable input fields on fieldset level
-- Accessible out of the box
-
-
-## Examples
-
 ### With Data
 
 The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field,
@@ -61,8 +37,8 @@ and the value is the `modelValue` of the field.
 <Story name="Data">
   {html`
     <lion-fieldset name="nameGroup" label="Name">
-      <demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-      <demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
       <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
         Log to Action Logger
       </button>
@@ -72,8 +48,8 @@ and the value is the `modelValue` of the field.
 
 ```html
 <lion-fieldset name="nameGroup" label="Name">
-  <demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-  <demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+  <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+  <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
   <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
     Log to Action Logger
   </button>
@@ -93,16 +69,16 @@ When enabling a fieldset, fields that have disabled explicitly set will stay dis
     }
     return html`
       <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-        <demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-        <demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+        <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+        <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
         <lion-fieldset name="nameGroup2" label="Name">
-          <demo-fieldset-child
+          <lion-input
             name="FirstName2"
             label="First Name"
             .modelValue=${'Foo'}
             disabled
-          ></demo-fieldset-child>
-          <demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+          ></lion-input>
+          <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
         </lion-fieldset>
       </lion-fieldset>
       <button @click=${toggleDisabled}>
@@ -121,16 +97,16 @@ function toggleDisabled() {
 
 ```html
 <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-  <demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-  <demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+  <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+  <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
   <lion-fieldset name="nameGroup2" label="Name">
-    <demo-fieldset-child
+    <lion-input
       name="FirstName2"
       label="First Name"
       .modelValue=${'Foo'}
       disabled
-    ></demo-fieldset-child>
-    <demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+    ></lion-input>
+    <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
   </lion-fieldset>
 </lion-fieldset>
 <button @click=${toggleDisabled}>
@@ -147,13 +123,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
     <lion-fieldset>
       <div slot="label">Personal data</div>
       <lion-fieldset name="nameGroup" label="Name">
-        <demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-        <demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+        <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+        <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
       </lion-fieldset>
       <lion-fieldset name="location" label="Location">
-        <demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child>
+        <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
       </lion-fieldset>
-      <demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child>
+      <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
       <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
         Log everything to Action Logger
       </button>
@@ -171,13 +147,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
 <lion-fieldset>
   <div slot="label">Personal data</div>
   <lion-fieldset name="nameGroup" label="Name">
-    <demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child>
-    <demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child>
+    <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+    <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
   </lion-fieldset>
   <lion-fieldset name="location" label="Location">
-    <demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child>
+    <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
   </lion-fieldset>
-  <demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child>
+  <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
   <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
     Log everything to Action Logger
   </button>
@@ -215,7 +191,7 @@ Try it by typing something in the input, then removing it.
     };
     return html`
       <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
-        <demo-fieldset-child name="input1" label="Label"></demo-fieldset-child>
+        <lion-input name="input1" label="Label"></lion-input>
       </lion-fieldset>
     `;
   }}
@@ -243,7 +219,7 @@ const DemoValidator = class extends Validator {
 
 ```html
 <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
-  <demo-fieldset-child name="input1" label="Label"></demo-fieldset-child>
+  <lion-input name="input1" label="Label"></lion-input>
 </lion-fieldset>
 ```
 
@@ -267,18 +243,18 @@ You can have your fieldset validator take into consideration multiple fields.
     };
     return html`
       <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
-        <demo-fieldset-child
+        <lion-input
           label="An all time YouTube favorite"
           name="input1"
           help-text="cats"
         >
-        </demo-fieldset-child>
-        <demo-fieldset-child
+        </lion-input>
+        <lion-input
           label="Another all time YouTube favorite"
           name="input2"
           help-text="dogs"
         >
-        </demo-fieldset-child>
+        </lion-input>
       </lion-fieldset>
     `;
   }}
@@ -303,18 +279,18 @@ const IsCatsAndDogs = class extends Validator {
 
 ```html
 <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
-  <demo-fieldset-child
+  <lion-input
     label="An all time YouTube favorite"
     name="input1"
     help-text="cats"
   >
-  </demo-fieldset-child>
-  <demo-fieldset-child
+  </lion-input>
+  <lion-input
     label="Another all time YouTube favorite"
     name="input2"
     help-text="dogs"
   >
-  </demo-fieldset-child>
+  </lion-input>
 </lion-fieldset>
 ```
 
@@ -352,20 +328,20 @@ You can have your fieldset validator take into accounts multiple nested fieldset
       <lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
         <lion-fieldset name="inner1">
           <label slot="label">Fieldset no. 1</label>
-          <demo-fieldset-child
+          <lion-input
             label="Write 'cats' here"
             name="input1"
           >
-          </demo-fieldset-child>
+          </lion-input>
         </lion-fieldset>
         <hr />
         <lion-fieldset name="inner2">
           <label slot="label">Fieldset no. 2</label>
-          <demo-fieldset-child
+          <lion-input
             label="Write 'dogs' here"
             name="input1"
           >
-          </demo-fieldset-child>
+          </lion-input>
         </lion-fieldset>
       </lion-fieldset>
     `;
@@ -398,20 +374,20 @@ const IsCatsDogs = class extends Validator {
 <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
   <lion-fieldset name="inner1">
     <label slot="label">Fieldset no. 1</label>
-    <demo-fieldset-child
+    <lion-input
       label="Write 'cats' here"
       name="input1"
     >
-    </demo-fieldset-child>
+    </lion-input>
   </lion-fieldset>
   <hr />
   <lion-fieldset name="inner2">
     <label slot="label">Fieldset no. 2</label>
-    <demo-fieldset-child
+    <lion-input
       label="Write 'dogs' here"
       name="input1"
     >
-    </demo-fieldset-child>
+    </lion-input>
   </lion-fieldset>
 </lion-fieldset>
 ```
diff --git a/packages/form/stories/index.stories.mdx b/packages/form-system/stories/form-examples.stories.mdx
similarity index 63%
rename from packages/form/stories/index.stories.mdx
rename to packages/form-system/stories/form-examples.stories.mdx
index 7db65d4f1..1cd2ceac4 100644
--- a/packages/form/stories/index.stories.mdx
+++ b/packages/form-system/stories/form-examples.stories.mdx
@@ -2,15 +2,13 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
 import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
 import '@lion/fieldset/lion-fieldset.js';
 import '@lion/input/lion-input.js';
-import '../lion-form.js';
-import './helpers/demo-form-child.js';
+import '@lion/form/lion-form.js';
 
-<Meta title="Forms/Form" parameters={{ component: 'lion-form' }} />
+<Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />
 
-# Form
+# Form Examples
 
-`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
+A form can have multiple nested fieldsets.
 
 <Story name="Default">
   {html`
@@ -18,14 +16,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
       <form>
         <lion-fieldset label="Personal data" name="personalData">
           <lion-fieldset label="Full Name" name="fullName">
-            <demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
-            <demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
+            <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+            <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
           </lion-fieldset>
           <lion-fieldset label="Location" name="location">
-            <demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
-            <demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
+            <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
+            <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
           </lion-fieldset>
-          <demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
+          <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
         </lion-fieldset>
         <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
           Log to Action Logger
@@ -40,14 +38,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
   <form>
     <lion-fieldset label="Personal data" name="personalData">
       <lion-fieldset label="Full Name" name="fullName">
-        <demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child>
-        <demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child>
+        <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+        <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
       </lion-fieldset>
       <lion-fieldset label="Location" name="location">
-        <demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child>
-        <demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child>
+        <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
+        <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
       </lion-fieldset>
-      <demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child>
+      <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
     </lion-fieldset>
     <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
       Log to Action Logger
@@ -56,19 +54,6 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
 </lion-form>
 ```
 
-## Features
-
-- Data synchronization with models
-- Easy retrieval of form data based on field names
-- Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
-- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
-- Accessible out of the box
-
-For more information about fields that are designed for lion-form, please read
-[Forms](?path=/docs/forms-form).
-
-
 ## Form Submit / Reset
 
 You can control whether a form gets submitted based on validation states.
@@ -88,18 +73,18 @@ Same thing goes for resetting the inputs to the original state.
       <lion-form id="form2" @submit="${submit}"
         ><form>
           <lion-fieldset label="Name" name="name">
-            <demo-form-child
+            <lion-input
               name="firstName"
               label="First Name"
               .validators=${[new Required(), new MaxLength(15)]}
             >
-            </demo-form-child>
-            <demo-form-child
+            </lion-input>
+            <lion-input
               name="lastName"
               label="Last Name"
               .validators=${[new Required(), new MaxLength(15)]}
             >
-            </demo-form-child>
+            </lion-input>
           </lion-fieldset>
           <button type="submit">Submit & Reset (if successfully submitted)</button>
           <button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
@@ -131,18 +116,18 @@ const submit = () => {
 <lion-form id="form2" @submit="${submit}">
   <form>
     <lion-fieldset label="Name" name="name">
-      <demo-form-child
+      <lion-input
         name="firstName"
         label="First Name"
         .validators=${[new Required(), new MaxLength(15)]}
       >
-      </demo-form-child>
-      <demo-form-child
+      </lion-input>
+      <lion-input
         name="lastName"
         label="Last Name"
         .validators=${[new Required(), new MaxLength(15)]}
       >
-      </demo-form-child>
+      </lion-input>
     </lion-fieldset>
     <button type="submit">Submit & Reset (if successfully submitted)</button>
     <button type="button" @click=${() => console.log(document.querySelector('#form2'))}>
diff --git a/packages/form/README.md b/packages/form/README.md
index d4285f4b1..7f53d5553 100644
--- a/packages/form/README.md
+++ b/packages/form/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form) for a live demo and documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation
 
 ## How to use
 
diff --git a/packages/form/stories/helpers/demo-form-child.js b/packages/form/stories/helpers/demo-form-child.js
deleted file mode 100644
index 072584ca1..000000000
--- a/packages/form/stories/helpers/demo-form-child.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LionField } from '@lion/field';
-
-customElements.define(
-  'demo-form-child',
-  class extends LionField {
-    get slots() {
-      return {
-        ...super.slots,
-        input: () => document.createElement('input'),
-      };
-    }
-  },
-);
diff --git a/packages/form/stories/overview.stories.mdx b/packages/form/stories/overview.stories.mdx
new file mode 100644
index 000000000..8e349a9f2
--- /dev/null
+++ b/packages/form/stories/overview.stories.mdx
@@ -0,0 +1,33 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+
+<Meta title="Forms/Form/Overview" />
+
+# Form
+
+`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
+It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
+
+```html
+<lion-form id="form">
+  <form>
+    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+  </form>
+</lion-form>
+```
+
+## Features
+
+- Data synchronization with models
+- Easy retrieval of form data based on field names
+- Advanced validation possibilities
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
+- Accessible out of the box
+
+For more information about fields that are designed for lion-form, please read
+[Forms](?path=/docs/forms-system-overview--page).
+
+## Examples
+
+For examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).
diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md
index bccb5c6ee..76f7b4dfb 100644
--- a/packages/input-amount/README.md
+++ b/packages/input-amount/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-amount/stories/index.stories.mdx b/packages/input-amount/stories/index.stories.mdx
index d185c30ee..99b15c934 100644
--- a/packages/input-amount/stories/index.stories.mdx
+++ b/packages/input-amount/stories/index.stories.mdx
@@ -31,13 +31,13 @@ If there are no valid characters in the input whatsoever, it will provide an err
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-system-overview)
+- Based on [lion-input](?path=/docs/forms-system-overview--page)
 - Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber
diff --git a/packages/input-date/README.md b/packages/input-date/README.md
index 07735557d..04d5eda22 100644
--- a/packages/input-date/README.md
+++ b/packages/input-date/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-date/stories/index.stories.mdx b/packages/input-date/stories/index.stories.mdx
index 777b9c997..f8b371fd8 100644
--- a/packages/input-date/stories/index.stories.mdx
+++ b/packages/input-date/stories/index.stories.mdx
@@ -25,11 +25,11 @@ import '../lion-input-date.js';
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
-- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate
diff --git a/packages/input-datepicker/README.md b/packages/input-datepicker/README.md
index ba0663d90..914a95602 100644
--- a/packages/input-datepicker/README.md
+++ b/packages/input-datepicker/README.md
@@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-datepicker/stories/index.stories.mdx b/packages/input-datepicker/stories/index.stories.mdx
index e582fe196..6038adff9 100644
--- a/packages/input-datepicker/stories/index.stories.mdx
+++ b/packages/input-datepicker/stories/index.stories.mdx
@@ -30,9 +30,9 @@ We encourage using the standard [lion-input-date](?path=/docs/form-component-inp
 - Input field with a datepicker to help to choose a date
 - Based on [lion-input-date](?path=/docs/form-component-input-date)
 - Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
-- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate
diff --git a/packages/input-email/README.md b/packages/input-email/README.md
index 89be3f6e1..fc21ad7e9 100644
--- a/packages/input-email/README.md
+++ b/packages/input-email/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-email/stories/index.stories.mdx b/packages/input-email/stories/index.stories.mdx
index c751dfee8..c135649e6 100644
--- a/packages/input-email/stories/index.stories.mdx
+++ b/packages/input-email/stories/index.stories.mdx
@@ -24,8 +24,8 @@ import '../lion-input-email.js';
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
-- Makes use of email [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## How to use
diff --git a/packages/input-iban/README.md b/packages/input-iban/README.md
index 12e828803..cbc8f7587 100644
--- a/packages/input-iban/README.md
+++ b/packages/input-iban/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-iban/stories/index.stories.mdx b/packages/input-iban/stories/index.stories.mdx
index d6d889d69..872e370f1 100644
--- a/packages/input-iban/stories/index.stories.mdx
+++ b/packages/input-iban/stories/index.stories.mdx
@@ -26,9 +26,9 @@ Its purpose is to provide a way for users to fill in an IBAN (International Bank
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input)
+- Based on [lion-input](?path=/docs/forms-input--default-story)
 - Default label in different languages
-- Makes use of IBAN specific [validate](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically
diff --git a/packages/input-range/README.md b/packages/input-range/README.md
index c906ad62d..c39a18778 100644
--- a/packages/input-range/README.md
+++ b/packages/input-range/README.md
@@ -7,7 +7,7 @@ Its purpose is to provide a way for users to select one value from a range of va
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input-range/stories/index.stories.mdx b/packages/input-range/stories/index.stories.mdx
index 3959978ea..5aaa41db8 100644
--- a/packages/input-range/stories/index.stories.mdx
+++ b/packages/input-range/stories/index.stories.mdx
@@ -26,7 +26,7 @@ Its purpose is to provide a way for users to select one value from a range of va
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input).
+- Based on [lion-input](?path=/docs/forms-input--default-story).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
diff --git a/packages/input/README.md b/packages/input/README.md
index 0624fd7ec..b7fa2fbb0 100644
--- a/packages/input/README.md
+++ b/packages/input/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/input/stories/index.stories.mdx b/packages/input/stories/index.stories.mdx
index 931a32df8..b66f2f356 100644
--- a/packages/input/stories/index.stories.mdx
+++ b/packages/input/stories/index.stories.mdx
@@ -22,7 +22,7 @@ import '../lion-input.js';
 
 ## Features
 
-- Based on [field](?path=/docs/forms-system-overview)
+- Based on [field](?path=/docs/forms-system-overview--page)
 - Extra visual elements can be added via `slots`
   - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
     For example add an `sr-only` class to the label to make it visually hidden.
@@ -33,7 +33,7 @@ import '../lion-input.js';
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
-- Can make us of [validation](?path=/docs/forms-system-validate-system)
+- Can make us of [validation](?path=/docs/forms-validation-overview--page)
 
 ## How to use
 
@@ -195,7 +195,7 @@ In these cases a button with an icon is used.
 
 ## Using validation
 
-The input can be used with [validation](?path=/docs/forms-system-validate-system).
+The input can be used with [validation](?path=/docs/forms-validation-overview--page).
 On certain conditions, a feedback message can be shown if the input value is invalid.
 
 You can change the locale with the buttons below the field.
diff --git a/packages/intros/stories/lion-web-components.stories.mdx b/packages/intros/stories/lion-web-components.stories.mdx
index 90a54bfcc..ddd91c5d9 100644
--- a/packages/intros/stories/lion-web-components.stories.mdx
+++ b/packages/intros/stories/lion-web-components.stories.mdx
@@ -40,9 +40,9 @@ If you need more details these are the actual npm packages we are publishing
 | Package                                                               | Version                                                                                                                              | Description                                            |
 | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
 | **-- Forms --**                                                       |                                                                                                                                      |                                                        |
-| [form](?path=/docs/forms-form--default-story)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
-| [field](?path=/docs/forms-system-overview--page)                      | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
-| [fieldset](?path=/docs/forms-fieldset--default-story)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
+| [form](?path=/docs/forms-form-overview--page)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
+| [field](?path=/docs/forms-system-overview--page)                | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
 | [validate](?path=/docs/form-system-validate-system--page)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         |
 | [checkbox](?path=/docs/forms-checkbox--default-story)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  |
 | [checkbox-group](?path=/docs/forms-checkbox-group--default-story)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    |
diff --git a/packages/localize/stories/10-intro.stories.mdx b/packages/localize/stories/10-intro.stories.mdx
index 91ca67618..25cd1d6bb 100644
--- a/packages/localize/stories/10-intro.stories.mdx
+++ b/packages/localize/stories/10-intro.stories.mdx
@@ -23,7 +23,7 @@ Further examples can be seen at [Features Overview Demo](?path=/docs/localize-fe
 | --------------------------------------------------------------------- | --------------------------------------------- |
 | [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
 | [Format Numbers](?path=/docs/localize-numbers--formatting)            | Format numbers in multiple languages          |
-| [Format Dates](?path=/docs/localize-dates--formatting)                | Format dates in multiple languages            |
+| [Format Dates](?path=/docs/localize-dates--formatting)--formatting)                | Format dates in multiple languages            |
 
 ## How to use
 
diff --git a/packages/localize/stories/50-system-overview.stories.mdx b/packages/localize/stories/50-system-overview.stories.mdx
index 6975ee32b..e863e245f 100644
--- a/packages/localize/stories/50-system-overview.stories.mdx
+++ b/packages/localize/stories/50-system-overview.stories.mdx
@@ -41,48 +41,48 @@ Localization data modules for `my-hello-component` might look like these:
 
 - `/path/to/my-hello-component/translations/en-GB.js`
 
-  ```js
-  export default {
-    greeting: 'Hello {name}!',
-  };
-  ```
+```js
+export default {
+  greeting: 'Hello {name}!',
+};
+```
 
 - `/path/to/my-hello-component/translations/nl-NL.js`
 
-  ```js
-  export default {
-    greeting: 'Hallo {name}!',
-  };
-  ```
+```js
+export default {
+  greeting: 'Hallo {name}!',
+};
+```
 
 The approach with ES modules is great because it allows to simply reuse basic locale data and override only the needed parts for more specific locales.
 
 - `/path/to/my-family-component/translations/en.js`
 
-  ```js
-  export default {
-    havePartnerQuestion: 'Do you have a partner?',
-    haveChildrenQuestion: 'Do you have children?',
-  };
-  ```
+```js
+export default {
+  havePartnerQuestion: 'Do you have a partner?',
+  haveChildrenQuestion: 'Do you have children?',
+};
+```
 
 - `/path/to/my-family-component/translations/en-GB.js`
 
-  ```js
-  import en from './en.js';
-  export default en;
-  ```
+```js
+import en from './en.js';
+export default en;
+```
 
 - `/path/to/my-family-component/translations/en-US.js`
 
-  ```js
-  import en from './en.js';
+```js
+import en from './en.js';
 
-  export default {
-    ...en,
-    haveChildrenQuestion: 'Do you have kids?',
-  };
-  ```
+export default {
+  ...en,
+  haveChildrenQuestion: 'Do you have kids?',
+};
+```
 
 ### Loading data
 
diff --git a/packages/option/stories/index.stories.mdx b/packages/option/stories/index.stories.mdx
index c036cb59c..bfd9de080 100644
--- a/packages/option/stories/index.stories.mdx
+++ b/packages/option/stories/index.stories.mdx
@@ -6,7 +6,7 @@ import '../lion-option.js';
 
 # Option
 
-`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich)
+`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich--default-story)
 
 <Story name="Default">
   {html`
@@ -117,4 +117,4 @@ This is identical to `lion-checkbox`, `lion-radio` etc.
 
 This also explains the (intended) accessibility violation when viewing these demos in Canvas mode.
 
-For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich).
+For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich--default-story).
diff --git a/packages/overlays/stories/20-index.stories.mdx b/packages/overlays/stories/20-index.stories.mdx
index 207f980d7..13a1e6c51 100644
--- a/packages/overlays/stories/20-index.stories.mdx
+++ b/packages/overlays/stories/20-index.stories.mdx
@@ -6,11 +6,11 @@ import {
   withModalDialogConfig,
 } from '../index.js';
 
-import './lion-demo-overlay.js';
+import './demo-overlay-system.js';
 import './applyDemoOverlayStyles.js';1
 import { ref as r } from './directives/ref.js';
 
-<Meta title="Overlays/System/Overview" parameters={{ component: 'lion-demo-overlay' }} />
+<Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />
 
 # Overlay System
 
@@ -23,24 +23,24 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
 
 <Story name="default">
   {html`
-    <lion-demo-overlay>
+    <demo-overlay-system>
       <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content">
-        Hello! You can close this notification here:
-        <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
+      <div slot="content" class="demo-overlay">
+          Hello! You can close this notification here:
+          <button
+            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          >
+            ⨯
+          </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay>
+<demo-overlay-system>
   <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -48,7 +48,7 @@ For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationa
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## Features
@@ -132,9 +132,9 @@ _defineOverlayConfig() {
 or declaratively in your template with the `.config` property
 
 ```html
-<lion-demo-overlay .config=${{ ...withModalDialogConfig() }}>
+<demo-overlay-system .config=${{ ...withModalDialogConfig() }}>
   <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -142,7 +142,7 @@ or declaratively in your template with the `.config` property
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ### Responsive switching
@@ -157,7 +157,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
 
 <Story name="Responsive switching">
   {html`
-    <lion-demo-overlay
+    <demo-overlay-system
       .config=${{ ...withBottomSheetConfig() }}
       @before-opened=${e => {
         if (window.innerWidth >= 600) {
@@ -176,12 +176,12 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay
+<demo-overlay-system
   .config=${{ ...withBottomSheetConfig() }}
   @before-opened=${e => {
     if (window.innerWidth >= 600) {
@@ -192,7 +192,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
   }}
 >
   <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -200,7 +200,7 @@ Drag the viewport under 600px and open the overlay to see the `withBottomSheetCo
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.
@@ -262,7 +262,7 @@ Below is another demo where you can toggle between configurations using buttons.
         Dropdown
       </button>
     </div>
-    <lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
+    <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -272,7 +272,7 @@ Below is another demo where you can toggle between configurations using buttons.
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
@@ -293,9 +293,9 @@ Change config to:
     Dropdown
   </button>
 </div>
-<lion-demo-overlay id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
+<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
   <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -303,7 +303,7 @@ Change config to:
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## Opened state
@@ -326,7 +326,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
     }
     return html`
       appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
-      <lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
+      <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
         <button slot="invoker">Overlay</button>
         <div slot="content" class="demo-overlay">
           Hello! You can close this notification here:
@@ -336,7 +336,7 @@ This can be useful e.g. if somewhere in your application you need to rely on thi
             ⨯
           </button>
         </div>
-      </lion-demo-overlay>
+      </demo-overlay-system>
     `;
   }}
 </Story>
@@ -357,9 +357,9 @@ function onOpenClosed(ev) {
 <div>
   appState.opened: ${openedStateNode}
 </div>
-<lion-demo-overlay .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
+<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
   <button slot="invoker">Overlay</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -367,7 +367,7 @@ function onOpenClosed(ev) {
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## Intercepting open/close
@@ -391,13 +391,13 @@ the `before-close` or `before-open` events.
         blockOverlay = !blockOverlay;
         refs.statusButton.textContent = blockOverlay;
       }}">${blockOverlay}</button>
-      <lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
+      <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
         <button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
         <div slot="content" class="demo-overlay">
           Hello! You can close this notification here:
           <button @click=${() => refs.overlay.opened = false}>⨯</button>
         </div>
-      </lion-demo-overlay>
+      </demo-overlay-system>
     `;
   }}
 </Story>
@@ -413,13 +413,13 @@ the `before-close` or `before-open` events.
 ```
 
 ```html
-  <lion-demo-overlay #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
+  <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
     <button slot="invoker">Overlay</button>
     <div slot="content" class="demo-overlay">
       Hello! You can close this notification here:
       <button @click=${() => refs.overlay.opened = false}>⨯</button>
     </div>
-  </lion-demo-overlay>
+  </demo-overlay-system>
 ```
 
 
@@ -495,7 +495,7 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
 
 <Story name="OverlaysManager">
   {html`
-    <lion-demo-overlay .config=${{ hasBackdrop: true }}>
+    <demo-overlay-system .config=${{ hasBackdrop: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -508,8 +508,8 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
           <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
         </div>
       </div>
-    </lion-demo-overlay>
-    <lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
+    </demo-overlay-system>
+    <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
       <div slot="content" class="demo-overlay demo-overlay--second">
         Hello! You can close this notification here:
         <button
@@ -518,14 +518,14 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ hasBackdrop: true }}>
+<demo-overlay-system .config=${{ hasBackdrop: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content">
+  <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
     <button
       @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
@@ -536,9 +536,9 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
       <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
     </div>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 
-<lion-demo-overlay id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
+<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
   <div slot="content" class="demo-overlay demo-overlay--second">
     Hello! You can close this notification here:
     <button
@@ -547,5 +547,5 @@ Below an example is shown with the `isBlocking` option, which makes use of the O
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
diff --git a/packages/overlays/stories/40-system-configuration.stories.mdx b/packages/overlays/stories/40-system-configuration.stories.mdx
index ad3699137..0e7827da3 100644
--- a/packages/overlays/stories/40-system-configuration.stories.mdx
+++ b/packages/overlays/stories/40-system-configuration.stories.mdx
@@ -1,9 +1,9 @@
 import { Story, Meta, html } from '@open-wc/demoing-storybook';
 
-import './lion-demo-overlay.js';
+import './demo-overlay-system.js';
 import './applyDemoOverlayStyles.js';
 
-<Meta title="Overlays/System/Configuration" parameters={{ component: 'lion-demo-overlay' }} />
+<Meta title="Overlays/System/Configuration" parameters={{ component: 'demo-overlay-system' }} />
 
 # Overlay System - Configuration
 
@@ -21,7 +21,7 @@ or in the `global-overlays` container at the bottom of the `<body>`.
 Local:
 <Story name="placementMode: local">
   {html`
-    <lion-demo-overlay .config=${{ placementMode: 'local' }}>
+    <demo-overlay-system .config=${{ placementMode: 'local' }}>
       <button slot="invoker">Click me to open the local overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -32,12 +32,12 @@ Local:
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ placementMode: 'local' }}>
+<demo-overlay-system .config=${{ placementMode: 'local' }}>
   <button slot="invoker">Click me to open the local overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -48,13 +48,13 @@ Local:
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 Global:
 <Story name="placementMode: global">
   {html`
-    <lion-demo-overlay .config=${{ placementMode: 'global' }}>
+    <demo-overlay-system .config=${{ placementMode: 'global' }}>
       <button slot="invoker">Click me to open the global overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -65,12 +65,12 @@ Global:
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ placementMode: 'global' }}>
+<demo-overlay-system .config=${{ placementMode: 'global' }}>
   <button slot="invoker">Click me to open the local overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -81,7 +81,7 @@ Global:
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## trapsKeyboardFocus
@@ -95,7 +95,7 @@ You use the feature on any type of overlay.
 
 <Story name="trapsKeyboardFocus">
   {html`
-    <lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
+    <demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <div><a href="#">A focusable anchor</a></div>
@@ -108,12 +108,12 @@ You use the feature on any type of overlay.
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ trapsKeyboardFocus: true }}>
+<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     <div><a href="#">A focusable anchor</a></div>
@@ -126,7 +126,7 @@ You use the feature on any type of overlay.
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## hidesOnEsc
@@ -137,7 +137,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
 
 <Story name="hidesOnEsc">
   {html`
-    <lion-demo-overlay .config=${{ hidesOnEsc: true }}>
+    <demo-overlay-system .config=${{ hidesOnEsc: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -148,12 +148,12 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ hidesOnEsc: true }}>
+<demo-overlay-system .config=${{ hidesOnEsc: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -164,7 +164,7 @@ Boolean property. Will allow closing the overlay on ESC key when enabled.
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## hidesOnOutsideClick
@@ -173,7 +173,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
 
 <Story name="hidesOnOutsideClick">
   {html`
-    <lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
+    <demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -184,12 +184,12 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ hidesOnOutsideClick: true }}>
+<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -200,7 +200,7 @@ Boolean property. Will allow closing the overlay by clicking outside the `conten
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## elementToFocusAfterHide
@@ -211,7 +211,7 @@ In the example, we focus the body instead of the `invokerNode`.
 
 <Story name="elementToFocusAfterHide">
   {html`
-    <lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
+    <demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -222,12 +222,12 @@ In the example, we focus the body instead of the `invokerNode`.
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ elementToFocusAfterHide: document.body }}>
+<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -238,7 +238,7 @@ In the example, we focus the body instead of the `invokerNode`.
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## hasBackdrop
@@ -258,7 +258,7 @@ This currently only supports CSS Animations, because it relies on the `animation
 
 <Story name="hasBackdrop">
   {html`
-    <lion-demo-overlay .config=${{ hasBackdrop: true }}>
+    <demo-overlay-system .config=${{ hasBackdrop: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -269,12 +269,12 @@ This currently only supports CSS Animations, because it relies on the `animation
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ hasBackdrop: true }}>
+<demo-overlay-system .config=${{ hasBackdrop: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -285,7 +285,7 @@ This currently only supports CSS Animations, because it relies on the `animation
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## isBlocking
@@ -305,13 +305,13 @@ This currently only supports CSS Animations, because it relies on the `animation
 
 <Story name="isBlocking">
   {html`
-    <lion-demo-overlay .config=${{ hasBackdrop: true }}>
+    <demo-overlay-system .config=${{ hasBackdrop: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         <div>
-          <lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
+          <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
             <button slot="invoker">Click me to open another overlay which is blocking</button>
-            <div slot="content" class="demo-overlay demo-overlay--second">
+            <div slot="content" class="demo-overlay demo-overlay--blocking">
               Hello! You can close this notification here:
               <button
                 class="close-button"
@@ -320,7 +320,7 @@ This currently only supports CSS Animations, because it relies on the `animation
                 ⨯
               </button>
             </div>
-          </lion-demo-overlay>
+          </demo-overlay-system>
         </div>
         Hello! You can close this notification here:
         <button
@@ -330,18 +330,18 @@ This currently only supports CSS Animations, because it relies on the `animation
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ hasBackdrop: true }}>
+<demo-overlay-system .config=${{ hasBackdrop: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     <div>
-      <lion-demo-overlay .config=${{ hasBackdrop: true, isBlocking: true }}>
+      <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
         <button slot="invoker">Click me to open another overlay which is blocking</button>
-        <div slot="content" class="demo-overlay demo-overlay--second">
+        <div slot="content" class="demo-overlay demo-overlay--blocking">
           Hello! You can close this notification here:
           <button
             class="close-button"
@@ -350,7 +350,7 @@ This currently only supports CSS Animations, because it relies on the `animation
             ⨯
           </button>
         </div>
-      </lion-demo-overlay>
+      </demo-overlay-system>
     </div>
     Hello! You can close this notification here:
     <button
@@ -360,7 +360,7 @@ This currently only supports CSS Animations, because it relies on the `animation
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
@@ -372,7 +372,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
 
 <Story name="preventsScroll">
   {html`
-    <lion-demo-overlay .config=${{ preventsScroll: true }}>
+    <demo-overlay-system .config=${{ preventsScroll: true }}>
       <button slot="invoker">Click me to open the overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -383,12 +383,12 @@ Boolean property. When true, prevents scrolling content that is outside of the `
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ preventsScroll: true }}>
+<demo-overlay-system .config=${{ preventsScroll: true }}>
   <button slot="invoker">Click me to open the overlay!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -399,7 +399,7 @@ Boolean property. When true, prevents scrolling content that is outside of the `
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 ## viewportConfig
@@ -420,7 +420,7 @@ Options:
 
 <Story name="viewportConfig">
   {html`
-    <lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
+    <demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
       <button slot="invoker">Click me to open the overlay in the top left corner!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
@@ -431,12 +431,12 @@ Options:
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```html
-<lion-demo-overlay .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
+<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
   <button slot="invoker">Click me to open the overlay in the top left corner!</button>
   <div slot="content" class="demo-overlay">
     Hello! You can close this notification here:
@@ -447,7 +447,7 @@ Options:
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 
@@ -471,7 +471,7 @@ Here's a succinct overview of some often used popper properties:
 
 <Story name="popperConfig">
   {html`
-    <lion-demo-overlay .config=${{
+    <demo-overlay-system .config=${{
       placementMode: 'local',
       popperConfig: {
         /* Placement of content node, relative to invoker node */
@@ -514,12 +514,12 @@ Here's a succinct overview of some often used popper properties:
           ⨯
         </button>
       </div>
-    </lion-demo-overlay>
+    </demo-overlay-system>
   `}
 </Story>
 
 ```js
-<lion-demo-overlay .config=${{
+<demo-overlay-system .config=${{
   placementMode: 'local',
   popperConfig: {
     /* Placement of content node, relative to invoker node */
@@ -562,7 +562,7 @@ Here's a succinct overview of some often used popper properties:
       ⨯
     </button>
   </div>
-</lion-demo-overlay>
+</demo-overlay-system>
 ```
 
 > Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a>
diff --git a/packages/overlays/stories/applyDemoOverlayStyles.js b/packages/overlays/stories/applyDemoOverlayStyles.js
index 4abcba59c..8d31eec47 100644
--- a/packages/overlays/stories/applyDemoOverlayStyles.js
+++ b/packages/overlays/stories/applyDemoOverlayStyles.js
@@ -7,7 +7,7 @@ const applyDemoOverlayStyles = () => {
       padding: 10px;
     }
 
-    .demo-overlay--second {
+    .demo-overlay--blocking {
       background-color: pink;
     }
   `;
diff --git a/packages/overlays/stories/lion-demo-overlay.js b/packages/overlays/stories/demo-overlay-system.js
similarity index 86%
rename from packages/overlays/stories/lion-demo-overlay.js
rename to packages/overlays/stories/demo-overlay-system.js
index 003e0dec1..14c52cb49 100644
--- a/packages/overlays/stories/lion-demo-overlay.js
+++ b/packages/overlays/stories/demo-overlay-system.js
@@ -1,7 +1,7 @@
 import { html, LitElement } from '@lion/core';
 import { OverlayMixin } from '../src/OverlayMixin.js';
 
-class LionDemoOverlay extends OverlayMixin(LitElement) {
+class DemoOverlaySystem extends OverlayMixin(LitElement) {
   _defineOverlayConfig() {
     return {
       placementMode: 'global',
@@ -35,4 +35,4 @@ class LionDemoOverlay extends OverlayMixin(LitElement) {
     `;
   }
 }
-customElements.define('lion-demo-overlay', LionDemoOverlay);
+customElements.define('demo-overlay-system', DemoOverlaySystem);
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index 7fd939273..801e9cc04 100644
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
@@ -8,7 +8,7 @@ You should use [lion-radio](../radio/)'s inside this element.
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/radio-group/stories/index.stories.mdx b/packages/radio-group/stories/index.stories.mdx
index 3667d2358..f696f3a91 100644
--- a/packages/radio-group/stories/index.stories.mdx
+++ b/packages/radio-group/stories/index.stories.mdx
@@ -27,12 +27,12 @@ You should use `<lion-radio>`s inside this element.
 </lion-radio-group>
 ```
 
-- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
-- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select) instead
+- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
+- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
 
 ## Features
 
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`
diff --git a/packages/select/README.md b/packages/select/README.md
index 8d848de3b..e1871e417 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -6,7 +6,7 @@
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx
index 793de32a7..47c76b267 100644
--- a/packages/switch/stories/index.stories.mdx
+++ b/packages/switch/stories/index.stories.mdx
@@ -80,7 +80,7 @@ Simple example that illustrates where validation feedback will be displayed.
         id="newsletterCheck"
         name="newsletterCheck"
         label="Subscribe to newsletter"
-        .validators="${[new IsTrue()]}"
+        .validators="${[new IsTrue(null, {type: 'info'})]}"
       ></lion-switch>
     `;
   }}
@@ -108,6 +108,6 @@ const IsTrue = class extends Validator {
   id="newsletterCheck"
   name="newsletterCheck"
   label="Subscribe to newsletter"
-  .validators="${[new IsTrue()]}"
+  .validators="${[new IsTrue(null, {type: 'info'})]}"
 ></lion-switch>
 ```
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
index efc818126..bf70c7b24 100644
--- a/packages/textarea/README.md
+++ b/packages/textarea/README.md
@@ -7,7 +7,7 @@ Its purpose is to provide a way for users to write text that is multiple lines l
 
 ## Live Demo/Documentation
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea) for a live demo and API documentation
+> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
 
 ## How to use
 
diff --git a/packages/validate/stories/01-ValidateSystemOverview.stories.mdx b/packages/validate/stories/Overview.stories.mdx
similarity index 97%
rename from packages/validate/stories/01-ValidateSystemOverview.stories.mdx
rename to packages/validate/stories/Overview.stories.mdx
index 7f5b4d56f..fc6d3e02e 100644
--- a/packages/validate/stories/01-ValidateSystemOverview.stories.mdx
+++ b/packages/validate/stories/Overview.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@open-wc/demoing-storybook';
 
-<Meta title="Forms/System/Validate System" />
+<Meta title="Forms/Validation/Overview" />
 
 # Validation
 
@@ -19,7 +19,7 @@ We could therefore say validation happens 'realtime'. This is aligned with the p
 
 Although validation happens realtime under the hood, displaying validity feedback in realtime may
 not always lead to the desired User Experience.
-Together with [interaction states](?path=/docs/form-system-interaction-states--interaction-states),
+Together with [interaction states](?path=/docs/forms-system-interaction-states--interaction-states),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Validators