diff --git a/packages/storybook/src/templates/form-wmebv/index.css b/packages/storybook/src/templates/form-wmebv/index.css
index 61f1326..d8739a7 100644
--- a/packages/storybook/src/templates/form-wmebv/index.css
+++ b/packages/storybook/src/templates/form-wmebv/index.css
@@ -3,6 +3,9 @@
 
   /* Component spacing tokens that aren't set in voorbeeld-theme */
   --utrecht-article-max-inline-size: 670px;
+  --utrecht-button-group-margin-block-start: var(--voorbeeld-space-block-rabbit);
+  --utrecht-form-field-margin-block-start: var(--voorbeeld-space-block-rabbit);
+  --utrecht-form-label-font-weight: var(--voorbeeld-typography-font-weight-bold);
   --utrecht-heading-1-margin-block-start: 0;
   --utrecht-heading-1-margin-block-end: var(--voorbeeld-space-block-rabbit);
   --utrecht-heading-2-margin-block-end: var(--voorbeeld-space-block-rabbit);
@@ -36,6 +39,19 @@
   display: inline-flex;
 }
 
+.voorbeeld-data-list-item {
+  border-block-end-color: var(--voorbeeld-color-gray-200);
+  border-block-end-style: solid;
+  border-block-end-width: 1px;
+  display: block;
+  -webkit-margin-after: 0;
+  margin-block-end: 0;
+  -webkit-padding-after: var(--voorbeeld-space-block-mouse);
+  -webkit-padding-before: var(--voorbeeld-space-block-mouse);
+  padding-block-end: var(--voorbeeld-space-block-mouse);
+  padding-block-start: var(--voorbeeld-space-block-mouse);
+}
+
 .voorbeeld-page-header {
   /* Design specific overwrite, these need to be set for page-content but we don't want them to work on the header */
   --utrecht-page-padding-inline-start: 0;
@@ -87,6 +103,11 @@
   margin-block-start: 0;
 }
 
+.todo-form-field {
+  display: flex;
+  flex-direction: column;
+}
+
 @media screen and (width <= 960px) {
   .todo-footer-content-group {
     align-items: start;
diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx
index 7eb4e70..a62f351 100644
--- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx
+++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx
@@ -3,7 +3,7 @@ import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
 import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import './index.css';
 import { IconArrowLeft } from '@tabler/icons-react';
-import { FormField, FormLabel, LinkButton } from '@utrecht/component-library-react';
+import { FormField, FormLabel, HeadingGroup, LinkButton } from '@utrecht/component-library-react';
 import {
   Button,
   ButtonGroup,
@@ -40,8 +40,10 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) =>
         Terug
       </Link>
       <Heading1>Vraag aan de gemeente</Heading1>
-      <PreHeading>Stap 1 van 4</PreHeading>
-      <Heading2>Uw vraag</Heading2>
+      <HeadingGroup>
+        <PreHeading>Stap 1 van 4</PreHeading>
+        <Heading2>Uw vraag</Heading2>
+      </HeadingGroup>
       <FormField label={<FormLabel htmlFor="questionField">Stel uw vraag</FormLabel>}>
         <Textarea id="questionField" />
       </FormField>
diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx
index 30c25ed..7691a2c 100644
--- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx
+++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx
@@ -3,7 +3,22 @@ import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
 import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import './index.css';
 import { IconArrowLeft } from '@tabler/icons-react';
-import { Heading1, Heading2, Icon, Link, PreHeading } from '@utrecht/component-library-react/dist/css-module';
+import {
+  Button,
+  ButtonGroup,
+  FormField,
+  FormFieldDescription,
+  FormLabel,
+  Heading1,
+  Heading2,
+  HeadingGroup,
+  Icon,
+  Link,
+  LinkButton,
+  Paragraph,
+  PreHeading,
+  Textbox,
+} from '@utrecht/component-library-react/dist/css-module';
 import { ReactElement } from 'react';
 import { Layout } from './components/Layout';
 import { DenHaagLogo, PageHeaderLogo } from './components/Logo';
@@ -30,8 +45,69 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) =>
         Terug
       </Link>
       <Heading1>Vraag aan de gemeente</Heading1>
-      <PreHeading>Stap 2 van 4</PreHeading>
-      <Heading2>Uw gegevens</Heading2>
+      <HeadingGroup>
+        <PreHeading>Stap 2 van 4</PreHeading>
+        <Heading2>Uw gegevens</Heading2>
+      </HeadingGroup>
+      <Paragraph>
+        Om u zo goed mogelijk te kunnen helpen, ontvangen we graag uw contactgegevens. Deze gegevens worden niet met
+        anderen gedeeld.
+      </Paragraph>
+      <>
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="nameField">Naam</FormLabel>
+          <Textbox id="nameField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="streetField">Straat</FormLabel>
+          <Textbox id="streetField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="houseField">Huisnummer</FormLabel>
+          <Textbox id="houseField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="houseAdditionField">Toevoeging</FormLabel>
+          <FormFieldDescription>Niet verplicht.</FormFieldDescription>
+          <Textbox id="houseAdditionField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="postcodeField">Postcode</FormLabel>
+          <Textbox id="postcodeField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="placeField">Woonplaats</FormLabel>
+          <Textbox id="placeField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="emailField">E-mailadres</FormLabel>
+          <Textbox id="emailField"></Textbox>
+        </FormField>
+
+        <FormField className="todo-form-field">
+          <FormLabel htmlFor="phoneField">Telefoonnummer</FormLabel>
+          <FormFieldDescription>Niet verplicht.</FormFieldDescription>
+          <Textbox id="phoneField"></Textbox>
+        </FormField>
+      </>
+
+      <ButtonGroup direction="column">
+        <Button type="submit" className="voorbeeld-button-spacing" appearance="primary-action-button">
+          Volgende stap
+        </Button>
+        <LinkButton inline className="voorbeeld-button-link">
+          Opslaan en later verder
+        </LinkButton>
+        <LinkButton inline className="voorbeeld-button-link">
+          Stoppen met formulier
+        </LinkButton>
+      </ButtonGroup>
     </Layout>
   </>
 );
diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx
index 87e3afb..af52d8b 100644
--- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx
+++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx
@@ -2,8 +2,26 @@ import { Meta, StoryObj } from '@storybook/react';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
 import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import './index.css';
-import { IconArrowLeft } from '@tabler/icons-react';
-import { Heading1, Heading2, Icon, Link, PreHeading } from '@utrecht/component-library-react/dist/css-module';
+import { IconArrowLeft, IconPencil } from '@tabler/icons-react';
+import {
+  Button,
+  ButtonGroup,
+  DataList,
+  DataListItem,
+  DataListKey,
+  DataListValue,
+  Heading1,
+  Heading2,
+  Heading3,
+  HeadingGroup,
+  Icon,
+  Link,
+  LinkButton,
+  MultilineData,
+  PreHeading,
+  PreserveData,
+  URLData,
+} from '@utrecht/component-library-react/dist/css-module';
 import { ReactElement } from 'react';
 import { Layout } from './components/Layout';
 import { DenHaagLogo, PageHeaderLogo } from './components/Logo';
@@ -30,8 +48,94 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) =>
         Terug
       </Link>
       <Heading1>Vraag aan de gemeente</Heading1>
-      <PreHeading>Stap 3 van 4</PreHeading>
-      <Heading2>Controleer uw gegevens</Heading2>
+      <HeadingGroup>
+        <PreHeading>Stap 3 van 4</PreHeading>
+        <Heading2>Controleer uw gegevens</Heading2>
+      </HeadingGroup>
+      <>
+        <Heading3>Uw vraag</Heading3>
+        <Link href="/#" className="voorbeeld-back-link">
+          <Icon>
+            <IconPencil />
+          </Icon>
+          Aanpassen
+        </Link>
+        <DataList>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Uw vraag</DataListKey>
+            <DataListValue>
+              <MultilineData>
+                Beste meneer of mevrouw, Ik heb 4 weken geleden een aanvraag voor bijstandsuitkering aangevraagd maar ik
+                heb nog steeds niets gehoord. Ik wil graag dat u dit oplost. Met vriendelijke groet, Jeroen van Drouwen
+              </MultilineData>
+            </DataListValue>
+          </DataListItem>
+        </DataList>
+      </>
+      <>
+        <h3>Uw gegevens</h3>
+        <Link href="/#" className="voorbeeld-back-link">
+          <Icon>
+            <IconPencil />
+          </Icon>
+          Aanpassen
+        </Link>
+        <DataList className="voorbeeld-datalist-style">
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Naam</DataListKey>
+            <DataListValue>
+              <PreserveData>Jeroen van Drouwen</PreserveData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Straat</DataListKey>
+            <DataListValue>
+              <PreserveData>Laan der Voorbeelden</PreserveData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Huisnummer</DataListKey>
+            <DataListValue>
+              <PreserveData>99</PreserveData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Postcode</DataListKey>
+            <DataListValue>
+              <PreserveData>1024 VP</PreserveData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Woonplaats</DataListKey>
+            <DataListValue>
+              <PreserveData>Voorbeeld</PreserveData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>E-mailadres</DataListKey>
+            <DataListValue>
+              <URLData>j.vandrouwen@gmail.com</URLData>
+            </DataListValue>
+          </DataListItem>
+          <DataListItem className="voorbeeld-data-list-item">
+            <DataListKey>Telefoonnummer</DataListKey>
+            <DataListValue>
+              <PreserveData>0650618346</PreserveData>
+            </DataListValue>
+          </DataListItem>
+        </DataList>
+      </>
+      <ButtonGroup direction="column">
+        <Button type="submit" className="voorbeeld-button-spacing" appearance="primary-action-button">
+          Volgende stap
+        </Button>
+        <LinkButton inline className="voorbeeld-button-link">
+          Opslaan en later verder
+        </LinkButton>
+        <LinkButton inline className="voorbeeld-button-link">
+          Stoppen met formulier
+        </LinkButton>
+      </ButtonGroup>
     </Layout>
   </>
 );
diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx
new file mode 100644
index 0000000..7be7857
--- /dev/null
+++ b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx
@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from '@storybook/react';
+import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
+import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
+import './index.css';
+import { IconCircleCheck, IconFileText, IconPrinter } from '@tabler/icons-react';
+import {
+  Alert,
+  ButtonGroup,
+  Heading1,
+  Heading2,
+  Icon,
+  Link,
+  Paragraph,
+  Strong,
+  UnorderedList,
+  UnorderedListItem,
+  URLData,
+} from '@utrecht/component-library-react/dist/css-module';
+import { ReactElement } from 'react';
+import { Layout } from './components/Layout';
+import { DenHaagLogo, PageHeaderLogo } from './components/Logo';
+
+const meta = {
+  title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/6 - Succes',
+  id: 'wmebv-success',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => (
+  <>
+    <Layout logo={logo} className={theme}>
+      <Alert type="ok">
+        <Heading1>
+          <Icon>
+            <IconCircleCheck size={32} />
+          </Icon>
+          Uw aanvraag is met succes verstuurd
+        </Heading1>
+        <Paragraph>Zaaknummer: 2bf9-cne2-9910</Paragraph>
+      </Alert>
+      <Heading2>Wat gaat er nu gebeuren?</Heading2>
+      <UnorderedList>
+        <UnorderedListItem>
+          U ontvangt een bevestigingsmail op{' '}
+          <Strong>
+            <URLData>j.vandrouwen@gmail.com</URLData>
+          </Strong>
+        </UnorderedListItem>
+        <UnorderedListItem>De afdeling Vraagbaak gaat met uw vraag aan de slag.</UnorderedListItem>
+      </UnorderedList>
+      <ButtonGroup direction="column">
+        <Link href="#">
+          <Icon>
+            <IconPrinter />
+          </Icon>
+          Print uw vraag
+        </Link>
+        <Link href="/" download="vraag.pdf">
+          <Icon>
+            <IconFileText />
+          </Icon>
+          Download uw vraag als PDF
+        </Link>
+        <Link href="/#">
+          Terug naar <URLData>gemeentevoorbeeld.nl</URLData>
+        </Link>
+      </ButtonGroup>
+    </Layout>
+  </>
+);
+
+export const Default: Story = {
+  render: () => <TemplatePage logo={<PageHeaderLogo />} theme={'voorbeeld-theme'} />,
+};
+
+export const DenHaagTheme: Story = {
+  render: () => <TemplatePage logo={<DenHaagLogo />} theme={'denhaag-theme'} />,
+};