diff --git a/docs/content/getting-started/form-fields.mdx b/docs/content/getting-started/form-fields.mdx
index d66307aea5..3dfca5399c 100644
--- a/docs/content/getting-started/form-fields.mdx
+++ b/docs/content/getting-started/form-fields.mdx
@@ -66,8 +66,6 @@ However, labels might not be necessary when the purpose of the input is obvious
 
 Help Text should be used to provide additional clarification or instructions when the label alone isn't enough to explain the input (e.g., complex or uncommon fields). It’s helpful for explaining specific formats or validation rules. However, it shouldn't be used when the input is straightforward and the label is clear, as it can clutter the form and overwhelm the user with unnecessary details.
 
-{' '}
-
 <Dont>
   <Dont.Description>
     Don’t use Help Text as a substitute for a label. It should complement the
@@ -81,8 +79,30 @@ Help Text should be used to provide additional clarification or instructions whe
 
 Form components often exist in various states to indicate how they should behave or be interacted with. These states provide important context for users and ensure proper handling of inputs in different senarios. Below are the common field states used in forms.
 
+#### Disabled State
+
+Fields in a disabled state are non-interactive and prevent user input. They visually indicate that a field is temporarily unavailable.
+
 <ComponentDemo file="./form-guideline-disabled-state.demo.tsx" />
 
+#### Required State
+
+Required fields must be completed before form submission.
+
+<ComponentDemo file="./form-guideline-required-state.demo.tsx" />
+
+#### Error State
+
+Fields in an error state indicate that the entered value is invalid or incorrect. Error messages and visual feedback.
+
+<ComponentDemo file="./form-guideline-error-state.demo.tsx" />
+
+#### ReadOnly State
+
+Read-only fields display data that cannot be modified by the user. They are typically used for information that users can view but not change.
+
+<ComponentDemo file="./form-guideline-readonly-state.demo.tsx" />
+
 ### Validation
 
 HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback.
diff --git a/docs/content/getting-started/form-guideline-disabled-state.demo.tsx b/docs/content/getting-started/form-guideline-disabled-state.demo.tsx
index 157f3cf8a9..0cc34fbef2 100644
--- a/docs/content/getting-started/form-guideline-disabled-state.demo.tsx
+++ b/docs/content/getting-started/form-guideline-disabled-state.demo.tsx
@@ -1,9 +1,8 @@
-import { Headline, Stack, TextField } from '@marigold/components';
+import { Stack, TextField } from '@marigold/components';
 
 export default () => {
   return (
     <Stack space={2}>
-      <Headline level={'5'}>Disabled State</Headline>
       <TextField label="username" placeholder="enter user name" disabled />
     </Stack>
   );
diff --git a/docs/content/getting-started/form-guideline-error-state.demo.tsx b/docs/content/getting-started/form-guideline-error-state.demo.tsx
index a697cdfa19..f1a3c727fc 100644
--- a/docs/content/getting-started/form-guideline-error-state.demo.tsx
+++ b/docs/content/getting-started/form-guideline-error-state.demo.tsx
@@ -1,11 +1,12 @@
-import { Headline, NumberField, Stack } from '@marigold/components';
+import { NumberField } from '@marigold/components';
 
-<Stack space={2}>
-  <Headline level={'5'}>Error State</Headline>
-  <NumberField
-    label="Quantity"
-    error
-    errorMessage="Max number of available tickets is 3"
-    value={4}
-  />
-</Stack>;
+export default () => {
+  return (
+    <NumberField
+      label="Quantity"
+      error
+      errorMessage="Max number of available tickets is 3"
+      value={4}
+    />
+  );
+};
diff --git a/docs/content/getting-started/form-guideline-required-state.demo.tsx b/docs/content/getting-started/form-guideline-required-state.demo.tsx
index e69de29bb2..f68cde2ef0 100644
--- a/docs/content/getting-started/form-guideline-required-state.demo.tsx
+++ b/docs/content/getting-started/form-guideline-required-state.demo.tsx
@@ -0,0 +1,18 @@
+import { Select } from '@marigold/components';
+
+export default () => (
+  <Select
+    label="Genre"
+    placeholder="Select genre"
+    description="Select the genre you want."
+    width="fit"
+    required
+  >
+    <Select.Option id="pop">Pop</Select.Option>
+    <Select.Option id="hiphop">Hip Hop</Select.Option>
+    <Select.Option id="rock">Rock</Select.Option>
+    <Select.Option id="schlager">Schlager</Select.Option>
+    <Select.Option id="jazz">Jazz</Select.Option>
+    <Select.Option id="dance">Dance</Select.Option>
+  </Select>
+);
diff --git a/docs/content/getting-started/form-guideline-states.demo.tsx b/docs/content/getting-started/form-guideline-states.demo.tsx
deleted file mode 100644
index 70bf4e8e17..0000000000
--- a/docs/content/getting-started/form-guideline-states.demo.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Headline,
-  NumberField,
-  Select,
-  Stack,
-  Switch,
-  TextField,
-} from '@marigold/components';
-
-export default () => {
-  return (
-    <Stack space={8}>
-      <Stack space={2}>
-        <Headline level={'5'}>Disabled State</Headline>
-        <TextField label="username" placeholder="enter user name" disabled />
-      </Stack>
-      <Stack space={2}>
-        <Headline level={'5'}>Error State</Headline>
-        <NumberField
-          label="Quantity"
-          error
-          errorMessage="Max number of available tickets is 3"
-          value={4}
-        />
-      </Stack>
-      <Stack space={2}>
-        <Headline level={'5'}>ReadOnly State</Headline>
-        <Switch readOnly>Settings Locked</Switch>
-      </Stack>
-
-      <Stack space={2}>
-        <Headline level={'5'}>Required State</Headline>
-        <Select
-          label="Genre"
-          placeholder="Select genre"
-          description="Select the genre you want."
-          width="fit"
-          required
-        >
-          <Select.Option id="pop">Pop</Select.Option>
-          <Select.Option id="hiphop">Hip Hop</Select.Option>
-          <Select.Option id="rock">Rock</Select.Option>
-          <Select.Option id="schlager">Schlager</Select.Option>
-          <Select.Option id="jazz">Jazz</Select.Option>
-          <Select.Option id="dance">Dance</Select.Option>
-        </Select>
-      </Stack>
-    </Stack>
-  );
-};