diff --git a/package-lock.json b/package-lock.json
index 22a7bd66d..1ad6f15e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "clean-webpack-plugin": "^4.0.0",
         "date-fns": "^4.1.0",
         "deepl-node": "^1.15.0",
-        "diff": "^8.0.2",
+        "diff": "^8.0.3",
         "dompurify": "^3.2.4",
         "easyqrcodejs": "^4.4.13",
         "file-saver": "^2.0.5",
@@ -32,7 +32,7 @@
         "jquery": "^3.6.3",
         "jszip": "^3.10.1",
         "libphonenumber-js": "^1.10.41",
-        "lodash": "^4.17.21",
+        "lodash": "^4.17.23",
         "papaparse": "^5.4.1",
         "pdfjs-dist": "5.1",
         "qrcode.react": "^4.1.0",
@@ -6766,9 +6766,9 @@
       "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
     },
     "node_modules/diff": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
-      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
+      "integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -9866,9 +9866,10 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
diff --git a/package.json b/package.json
index 7226c5f1d..2dd2fc7ae 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "date-fns": "^4.1.0",
     "deepl-node": "^1.15.0",
-    "diff": "^8.0.2",
+    "diff": "^8.0.3",
     "dompurify": "^3.2.4",
     "easyqrcodejs": "^4.4.13",
     "file-saver": "^2.0.5",
@@ -106,7 +106,7 @@
     "jquery": "^3.6.3",
     "jszip": "^3.10.1",
     "libphonenumber-js": "^1.10.41",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "papaparse": "^5.4.1",
     "pdfjs-dist": "5.1",
     "qrcode.react": "^4.1.0",
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss b/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
index c352c7503..495d9b0fc 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
@@ -77,10 +77,6 @@
                             .checkbox-label {
                                 font: 600 13px/16px var(--base-font);
                                 color: #646f79;
-
-                                &.active {
-                                    color: #009ef4;
-                                }
                             }
 
                             .block-option-count {
@@ -92,6 +88,10 @@
                                 font: inherit;
                                 color: #646f79;
                             }
+
+                            &.block-option-active .checkbox-label {
+                                color: #009ef4;
+                            }
                         }
 
                         .block-option-empty {
@@ -108,6 +108,10 @@
 
     .card-section {
         border-bottom-color: var(--border-color);
+
+        &>.financial-chart {
+            height: 350px;
+        }
     }
 
     .financial-totals {
diff --git a/react/src/dashboard/components/elements/announcements/Accouncements.tsx b/react/src/dashboard/components/elements/announcements/Accouncements.tsx
index 3f4f50e55..93624aca6 100644
--- a/react/src/dashboard/components/elements/announcements/Accouncements.tsx
+++ b/react/src/dashboard/components/elements/announcements/Accouncements.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import Announcement from '../../../props/models/Announcement';
 
 export const Announcements = ({ announcements }: { announcements: Array<Announcement> }) => {
@@ -43,9 +44,15 @@ export const Announcements = ({ announcements }: { announcements: Array<Announce
             {listActive?.map((announcement) => (
                 <div
                     key={announcement.id}
-                    className={`announcement announcement-${announcement.type} ${
-                        announcement.dismissed ? ' dismissed' : ''
-                    }`}>
+                    className={classNames(
+                        'announcement',
+                        announcement.type === 'warning' && 'announcement-warning',
+                        announcement.type === 'danger' && 'announcement-danger',
+                        announcement.type === 'success' && 'announcement-success',
+                        announcement.type === 'primary' && 'announcement-primary',
+                        announcement.type === 'default' && 'announcement-default',
+                        announcement.dismissed && 'dismissed',
+                    )}>
                     <div className="announcement-wrapper">
                         <div className="title">{announcement.title}</div>
                         <div className="description">
diff --git a/react/src/dashboard/components/elements/app-links/AppLinks.tsx b/react/src/dashboard/components/elements/app-links/AppLinks.tsx
index c38accd74..35507101e 100644
--- a/react/src/dashboard/components/elements/app-links/AppLinks.tsx
+++ b/react/src/dashboard/components/elements/app-links/AppLinks.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../hooks/useEnvData';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 
@@ -9,7 +10,7 @@ export default function AppLinks({
     showIosButton = true,
     showAndroidButton = true,
 }: {
-    type?: string;
+    type?: 'lg';
     iosId?: string;
     androidId?: string;
     showIosButton?: boolean;
@@ -19,7 +20,7 @@ export default function AppLinks({
     const assetUrl = useAssetUrl();
 
     return (
-        <div className={`block block-app_links ${type ? `block-app_links-${type}` : ''}`}>
+        <div className={classNames('block', 'block-app_links', type === 'lg' && 'block-app_links-lg')}>
             {showAndroidButton && (
                 <a
                     href={envData?.config?.android_link}
diff --git a/react/src/dashboard/components/elements/auth2fa-info-box/Auth2FAInfoBox.tsx b/react/src/dashboard/components/elements/auth2fa-info-box/Auth2FAInfoBox.tsx
index 15dfab04e..d5ae0f18e 100644
--- a/react/src/dashboard/components/elements/auth2fa-info-box/Auth2FAInfoBox.tsx
+++ b/react/src/dashboard/components/elements/auth2fa-info-box/Auth2FAInfoBox.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../hooks/useEnvData';
 
 export default function Auth2FAInfoBox({ className = '' }: { className?: string }) {
     const envData = useEnvData();
 
     return (
-        <div className={`block block-info-box ${className}`}>
+        <div className={classNames('block', 'block-info-box', className)}>
             <div className="info-box-icon mdi mdi-information-outline" />
             {envData.client_type == 'sponsor' && (
                 <div className="info-box-content">
diff --git a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
index c4141c0f8..b91212e7e 100644
--- a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
+++ b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
@@ -23,6 +23,7 @@ import Organization from '../../../props/models/Organization';
 import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../tables/TableTopScroller';
 import { FilterModel } from '../../../modules/filter_next/types/FilterParams';
+import FormGroup from '../forms/elements/FormGroup';
 
 export default function BlockCardEmails({
     organization,
@@ -118,15 +119,18 @@ export default function BlockCardEmails({
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
                         <div className="form">
-                            <div className="form-group">
-                                <input
-                                    type="search"
-                                    className="form-control"
-                                    placeholder="Zoeken"
-                                    value={filterValues.q}
-                                    onChange={(e) => filterUpdate({ q: e.target.value })}
-                                />
-                            </div>
+                            <FormGroup
+                                input={(id) => (
+                                    <input
+                                        type="search"
+                                        id={id}
+                                        className="form-control"
+                                        placeholder="Zoeken"
+                                        value={filterValues.q}
+                                        onChange={(e) => filterUpdate({ q: e.target.value })}
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/elements/block-label-tabs/BlockLabelTabs.tsx b/react/src/dashboard/components/elements/block-label-tabs/BlockLabelTabs.tsx
index 5829b1eb9..7516a31d3 100644
--- a/react/src/dashboard/components/elements/block-label-tabs/BlockLabelTabs.tsx
+++ b/react/src/dashboard/components/elements/block-label-tabs/BlockLabelTabs.tsx
@@ -5,10 +5,12 @@ export default function BlockLabelTabs<t = string>({
     value,
     setValue,
     tabs,
+    size = 'sm',
 }: {
     value: t;
     setValue: (state: t) => void;
-    tabs: Array<{ value: t; label: string }>;
+    tabs: Array<{ value: t; label: React.ReactNode; dusk?: string }>;
+    size?: 'sm' | null;
 }) {
     return (
         <div className="block block-label-tabs">
@@ -16,7 +18,12 @@ export default function BlockLabelTabs<t = string>({
                 {tabs.map((tab, index) => (
                     <div
                         key={index}
-                        className={classNames(`label-tab label-tab-sm`, value == tab.value && 'active')}
+                        data-dusk={tab.dusk}
+                        className={classNames(
+                            'label-tab',
+                            size === 'sm' && 'label-tab-sm',
+                            value == tab.value && 'active',
+                        )}
                         onClick={() => setValue(tab.value)}>
                         {tab.label}
                     </div>
diff --git a/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx b/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
index 920c47f6f..96ede7a8d 100644
--- a/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
+++ b/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
@@ -205,7 +205,7 @@ export default function BlockReimbursementCategories({
                 </div>
 
                 {categories?.meta.total > 0 && (
-                    <div className={`card-section ${compact ? 'card-section-narrow' : ''}`}>
+                    <div className={classNames('card-section', compact && 'card-section-narrow')}>
                         <Paginator
                             meta={categories.meta}
                             filters={filterValues}
diff --git a/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx b/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
index 7365cd68e..56cce15d1 100644
--- a/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
+++ b/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
@@ -1,9 +1,10 @@
 import React, { Fragment, ReactNode, useMemo } from 'react';
+import classNames from 'classnames';
 import { NavLink } from 'react-router';
 
 interface EmptyButtonType {
     to?: string;
-    type?: string;
+    type?: 'default' | 'primary' | 'danger';
     icon?: string;
     text?: string;
     dusk?: string;
@@ -17,7 +18,7 @@ export default function EmptyCard({
     imageIcon,
     imageIconImg,
     imageIconSvg,
-    textAlign,
+    textAlign = 'center',
     button = null,
     buttons = [],
     type = 'card',
@@ -54,7 +55,15 @@ export default function EmptyCard({
 
     return (
         <Wrapper>
-            <div className={`block block-empty text-${textAlign || 'center'}`} data-dusk="emptyCard">
+            <div
+                className={classNames(
+                    'block',
+                    'block-empty',
+                    textAlign === 'left' && 'text-left',
+                    textAlign === 'right' && 'text-right',
+                    textAlign === 'center' && 'text-center',
+                )}
+                data-dusk="emptyCard">
                 {imageIconImg && (
                     <div className="empty-icon">
                         <img className="empty-icon-img empty-icon-img-border" src={imageIconImg} alt={''} />
@@ -94,7 +103,12 @@ export default function EmptyCard({
                                     key={index}
                                     to={button.to}
                                     onClick={button.onClick}
-                                    className={`button button-${button.type || 'default'}`}
+                                    className={classNames(
+                                        'button',
+                                        (!button.type || button.type === 'default') && 'button-default',
+                                        button.type === 'primary' && 'button-primary',
+                                        button.type === 'danger' && 'button-danger',
+                                    )}
                                     data-dusk={button.dusk || 'btnEmptyBlock'}>
                                     {button.icon && (!button.iconPosition || button.iconPosition == 'start') && (
                                         <em className={`mdi mdi-${button.icon} icon-start`} />
diff --git a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
index 9bd2cc899..33e5a1d29 100644
--- a/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
+++ b/react/src/dashboard/components/elements/faq-editor-funds/FaqEditorItem.tsx
@@ -1,11 +1,12 @@
-import FormError from '../forms/errors/FormError';
 import MarkdownEditor from '../forms/markdown-editor/MarkdownEditor';
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { ResponseErrorData } from '../../../props/ApiResponses';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import Faq from '../../../props/models/Faq';
 import useTranslate from '../../../hooks/useTranslate';
+import FormGroup from '../forms/elements/FormGroup';
 
 export default function FaqEditorItem({
     id,
@@ -43,13 +44,14 @@ export default function FaqEditorItem({
 
                 {faqItem.type === 'question' ? (
                     <div
-                        className={`question-icon ${
-                            isCollapsed && (!faqItem.title || !faqItem.description) ? 'text-danger' : ''
-                        }`}>
+                        className={classNames(
+                            'question-icon',
+                            isCollapsed && (!faqItem.title || !faqItem.description) && 'text-danger',
+                        )}>
                         <em className="mdi mdi-frequently-asked-questions" />
                     </div>
                 ) : (
-                    <div className={`question-icon ${isCollapsed && !faqItem.title ? 'text-danger' : ''}`}>
+                    <div className={classNames('question-icon', isCollapsed && !faqItem.title && 'text-danger')}>
                         <em className="mdi mdi-format-title" />
                     </div>
                 )}
@@ -97,43 +99,53 @@ export default function FaqEditorItem({
             {!isCollapsed && (
                 <div className="question-body">
                     <div className="form">
-                        <div className="form-group">
-                            <label className="form-label form-label-required">Vraag</label>
-                            <input
-                                className="form-control"
-                                type="text"
-                                defaultValue={faqItem.title || ''}
-                                onChange={(e) => onChange({ title: e.target.value })}
-                                placeholder="Title..."
-                            />
-                            <div className="form-hint">Max. 200 tekens</div>
-                            <FormError error={errors?.[`faq.${index}.title`]} />
-                        </div>
+                        <FormGroup
+                            required={true}
+                            label="Vraag"
+                            hint="Max. 200 tekens"
+                            error={errors?.[`faq.${index}.title`]}
+                            input={(id) => (
+                                <input
+                                    className="form-control"
+                                    id={id}
+                                    type="text"
+                                    defaultValue={faqItem.title || ''}
+                                    onChange={(e) => onChange({ title: e.target.value })}
+                                    placeholder="Title..."
+                                />
+                            )}
+                        />
 
                         {faqItem.type === 'question' ? (
-                            <div className="form-group">
-                                <label className="form-label form-label-required">Antwoord</label>
-                                <MarkdownEditor
-                                    value={faqItem.description_html}
-                                    onChange={(description) => onChange({ description: description })}
-                                    extendedOptions={true}
-                                    placeholder={translate('organization_edit.labels.description')}
-                                />
-                                <div className="form-hint">Max. 5000 tekens</div>
-                                <FormError error={errors?.[`faq.${index}.description`]} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label="Antwoord"
+                                hint="Max. 5000 tekens"
+                                error={errors?.[`faq.${index}.description`]}
+                                input={() => (
+                                    <MarkdownEditor
+                                        value={faqItem.description_html}
+                                        onChange={(description) => onChange({ description: description })}
+                                        extendedOptions={true}
+                                        placeholder={translate('organization_edit.labels.description')}
+                                    />
+                                )}
+                            />
                         ) : (
-                            <div className="form-group">
-                                <label className="form-label">Subtitel</label>
-                                <textarea
-                                    className="r-n form-control"
-                                    placeholder="Subtitel"
-                                    value={faqItem.subtitle}
-                                    onChange={(e) => onChange({ subtitle: e.target.value })}
-                                />
-                                <div className="form-hint">Max. 500 tekens</div>
-                                <FormError error={errors?.[`faq.${index}.subtitle`]} />
-                            </div>
+                            <FormGroup
+                                label="Subtitel"
+                                hint="Max. 500 tekens"
+                                error={errors?.[`faq.${index}.subtitle`]}
+                                input={(id) => (
+                                    <textarea
+                                        className="r-n form-control"
+                                        id={id}
+                                        placeholder="Subtitel"
+                                        value={faqItem.subtitle}
+                                        onChange={(e) => onChange({ subtitle: e.target.value })}
+                                    />
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/elements/forms/controls/NumericControl.tsx b/react/src/dashboard/components/elements/forms/controls/NumericControl.tsx
index aa258f992..97b5a49a9 100644
--- a/react/src/dashboard/components/elements/forms/controls/NumericControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/NumericControl.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 
 export default function NumericControl({
@@ -25,13 +26,13 @@ export default function NumericControl({
 
     return (
         <div className="form-numeric" id={elementId}>
-            <div className={`form-numeric-btn ${viewValue <= minValue ? 'disabled' : ''}`}>
+            <div className={classNames('form-numeric-btn', viewValue <= minValue && 'disabled')}>
                 <em className="mdi mdi-minus icon-start" onClick={() => setViewValue((viewValue) => viewValue - 1)} />
             </div>
 
             <div className="form-numeric-value">{viewValue}</div>
 
-            <div className={`form-numeric-btn ${viewValue >= maxValue ? 'disabled' : ''}`}>
+            <div className={classNames('form-numeric-btn', viewValue >= maxValue && 'disabled')}>
                 <em className="mdi mdi-plus icon-end" onClick={() => setViewValue((viewValue) => viewValue + 1)} />
             </div>
 
diff --git a/react/src/dashboard/components/elements/forms/controls/PhoneControl.tsx b/react/src/dashboard/components/elements/forms/controls/PhoneControl.tsx
index 782f228e5..d708ad4b1 100644
--- a/react/src/dashboard/components/elements/forms/controls/PhoneControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/PhoneControl.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import SelectControl from '../../select-control/SelectControl';
 import SelectControlOptionsCountryCodes from '../../select-control/templates/SelectControlOptionsCountryCodes';
 
@@ -53,7 +54,7 @@ export default function PhoneControl({
     }, [clear, dialCode, onChange, phoneNumber]);
 
     return (
-        <div className={`phone-control ${className}`} id={id}>
+        <div className={classNames('phone-control', className)} id={id}>
             <SelectControl
                 value={dialCode}
                 propKey={'dialCode'}
diff --git a/react/src/dashboard/components/elements/forms/controls/PincodeControl.tsx b/react/src/dashboard/components/elements/forms/controls/PincodeControl.tsx
index fd7d53bd3..5d96baf07 100644
--- a/react/src/dashboard/components/elements/forms/controls/PincodeControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/PincodeControl.tsx
@@ -1,4 +1,5 @@
 import React, { createRef, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { chunk } from 'lodash';
 import useTranslate from '../../../../hooks/useTranslate';
 
@@ -92,7 +93,7 @@ export default function PincodeControl({
         <div
             id={id}
             title={title}
-            className={`block block-pincode ${className || ''}`}
+            className={classNames('block', 'block-pincode', className)}
             onClick={() => inputRefs[cursor].current?.focus()}>
             <div className="flex flex-vertical">
                 <div className="flex" role="group" aria-labelledby="pincode-label">
diff --git a/react/src/dashboard/components/elements/forms/controls/ToggleControl.tsx b/react/src/dashboard/components/elements/forms/controls/ToggleControl.tsx
index b777237c6..8075fd131 100644
--- a/react/src/dashboard/components/elements/forms/controls/ToggleControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/ToggleControl.tsx
@@ -17,6 +17,7 @@ export default function ToggleControl({
     labelRight = true,
     tabIndex,
     onKeyDown,
+    dusk,
 }: {
     id?: string;
     title?: string;
@@ -31,6 +32,7 @@ export default function ToggleControl({
     labelRight?: boolean;
     tabIndex?: number;
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    dusk?: string;
 }) {
     const formId = useMemo(() => (id ? id : uniqueId('toggle_control_')), [id]);
 
@@ -41,6 +43,7 @@ export default function ToggleControl({
             tabIndex={tabIndex}
             onKeyDown={onKeyDown}
             onClick={onClick}
+            data-dusk={dusk}
             className={classNames('form-toggle', className, disabled && 'form-toggle-disabled')}>
             <input
                 type="checkbox"
diff --git a/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx b/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
index b25ff24bc..3a02bd77b 100644
--- a/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
+++ b/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
@@ -6,27 +6,35 @@ import FormGroupInfo from './FormGroupInfo';
 
 export default function FormGroup({
     id,
-    error,
-    label,
-    input,
-    info,
-    hint,
-    required,
-    className = '',
+    error = null,
+    label = null,
+    input = null,
+    info = null,
+    hint = null,
+    required = false,
+    className = null,
+    textAlign = null,
 }: {
     id?: string;
     error?: string | Array<string>;
     label?: string | React.ReactElement | Array<React.ReactElement>;
-    input?: (input_id: string) => React.ReactElement;
+    input?: (id: string) => React.ReactElement;
     info?: string | React.ReactElement | Array<React.ReactElement>;
     hint?: string | React.ReactElement | Array<React.ReactElement>;
     required?: boolean;
     className?: string;
+    textAlign?: 'center' | null;
 }) {
     const input_id = useState(id || uniqueId('input_group_id_'))[0];
 
     return (
-        <div className={classNames('form-group', error && 'form-group-error', className)}>
+        <div
+            className={classNames(
+                'form-group',
+                error && 'form-group-error',
+                textAlign === 'center' && 'text-center',
+                className,
+            )}>
             {label && (
                 <label htmlFor={input_id} className={classNames(`form-label`, required && 'form-label-required')}>
                     {label}
diff --git a/react/src/dashboard/components/elements/forms/errors/FormError.tsx b/react/src/dashboard/components/elements/forms/errors/FormError.tsx
index 7a0780f58..1d208cbf6 100644
--- a/react/src/dashboard/components/elements/forms/errors/FormError.tsx
+++ b/react/src/dashboard/components/elements/forms/errors/FormError.tsx
@@ -1,13 +1,16 @@
 import React, { Fragment, useMemo } from 'react';
+import classNames from 'classnames';
 
 export default function FormError({
     error,
     duskPrefix,
-    className = '',
+    textAlign,
+    textWeight,
 }: {
     error?: string | Array<string>;
     duskPrefix?: string;
-    className?: string;
+    textAlign?: 'center';
+    textWeight?: 'semibold';
 }) {
     const errorsList = useMemo(() => (error ? (Array.isArray(error) ? error : [error]) : []), [error]);
 
@@ -15,7 +18,11 @@ export default function FormError({
         <Fragment>
             {errorsList.map((error, index) => (
                 <div
-                    className={`form-error ${className}`}
+                    className={classNames(
+                        'form-error',
+                        textAlign === 'center' && 'text-center',
+                        textWeight === 'semibold' && 'text-semibold',
+                    )}
                     data-dusk={duskPrefix ? `${duskPrefix}${(index + 1)?.toString()}` : null}
                     key={index}>
                     {error}
diff --git a/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx b/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
index 1d770f1ef..d2d17ea99 100644
--- a/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
+++ b/react/src/dashboard/components/elements/forms/markdown-editor/MarkdownEditor.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import { useMarkdownService } from '../../../../services/MarkdownService';
 import ModalMarkdownCustomLink from '../../../modals/ModalMarkdownCustomLink';
@@ -512,7 +513,11 @@ export default function MarkdownEditor({
 
     return (
         <div
-            className={`block block-markdownable ${allowAlignment ? `block-markdownable-${blockAlignment}` : ''}`}
+            className={classNames(
+                'block',
+                'block-markdownable',
+                allowAlignment && `block-markdownable-${blockAlignment}`,
+            )}
             ref={$element}>
             <textarea className="markdown-editor block block-markdown" ref={$theEditor} />
         </div>
diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx
index ff4f25ac9..9886fa7d4 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlCheckbox.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 
 export default function UIControlCheckbox({
@@ -37,9 +38,13 @@ export default function UIControlCheckbox({
 
     return (
         <span
-            className={`ui-control ui-control-checkbox ${className} ${
-                slim ? 'ui-control-checkbox-slim' : ''
-            } ${className} ${disabled ? 'disabled' : ''}`}>
+            className={classNames(
+                'ui-control',
+                'ui-control-checkbox',
+                className,
+                slim && 'ui-control-checkbox-slim',
+                disabled && 'disabled',
+            )}>
             <input
                 className="form-control"
                 hidden={true}
diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx
index e393afdbb..b4dfc46d8 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlDate.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import DatePickerControl from '../controls/DatePickerControl';
 
 export default function UIControlDate({
@@ -27,7 +28,7 @@ export default function UIControlDate({
     }, [onChange]);
 
     return (
-        <div id={id} className={`ui-control ui-control-date ${className}`} data-dusk={dataDusk}>
+        <div id={id} className={classNames('ui-control', 'ui-control-date', className)} data-dusk={dataDusk}>
             <DatePickerControl
                 dateFormat={format || null}
                 value={value}
diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlNumber.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlNumber.tsx
index dce5536bf..d00e29bd1 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlNumber.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlNumber.tsx
@@ -66,7 +66,12 @@ export default function UIControlNumber({
                     setShowClear(false);
                 }
             }}
-            className={`ui-control ui-control-text ${type === 'currency' ? 'ui-control-currency' : ''} ${className}`}
+            className={classNames(
+                'ui-control',
+                'ui-control-text',
+                type === 'currency' && 'ui-control-currency',
+                className,
+            )}
             aria-label={ariaLabel}>
             {type === 'currency' && <div className="ui-control-currency-icon">€</div>}
 
diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
index c7fcf9463..633af78fe 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlText.tsx
@@ -64,7 +64,7 @@ export default function UIControlText({
                     setShowClear(false);
                 }
             }}
-            className={`ui-control ui-control-text  ${className}`}
+            className={classNames('ui-control', 'ui-control-text', className)}
             aria-label={ariaLabel}>
             {React.createElement(type === 'textarea' ? 'textarea' : 'input', {
                 ref: inputRef || innerInputRef,
diff --git a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
index a6e3f7998..3ebbf0167 100644
--- a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
+++ b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
@@ -3,7 +3,6 @@ import Organization, { Permission } from '../../../props/models/Organization';
 import RecordType from '../../../props/models/RecordType';
 import { hasPermission } from '../../../helpers/utils';
 import SelectControl from '../select-control/SelectControl';
-import FormError from '../forms/errors/FormError';
 import { ResponseError } from '../../../props/ApiResponses';
 import FundCriterion from '../../../props/models/FundCriterion';
 import Fund from '../../../props/models/Fund';
@@ -17,6 +16,8 @@ import useTranslate from '../../../hooks/useTranslate';
 import { currencyFormat } from '../../../helpers/string';
 import { dateFormat, dateParse } from '../../../helpers/dates';
 import classNames from 'classnames';
+import FormGroup from '../forms/elements/FormGroup';
+import FormError from '../forms/errors/FormError';
 
 type Operators = '<' | '<=' | '>' | '>=' | '!=' | '=' | '*';
 
@@ -298,7 +299,7 @@ export default function FundCriteriaEditorItem({
                                 <div className="col col-xs-12 col-sm-4">
                                     <label className="form-label">Persoonsgegeven</label>
                                     <SelectControl
-                                        className={`form-control ${disabled ? 'disabled' : ''}`}
+                                        className={classNames('form-control', disabled && 'disabled')}
                                         placeholder="Persoonsgegeven"
                                         disabled={disabled}
                                         value={recordType}
@@ -313,7 +314,7 @@ export default function FundCriteriaEditorItem({
                                     <div className="col col-xs-12 col-sm-4">
                                         <label className="form-label">Verhouding</label>
                                         <SelectControl
-                                            className={`form-control ${disabled ? 'disabled' : ''}`}
+                                            className={classNames('form-control', disabled && 'disabled')}
                                             placeholder="Verhouding"
                                             disabled={disabled}
                                             allowSearch={false}
@@ -336,7 +337,7 @@ export default function FundCriteriaEditorItem({
                                             {!['select', 'select_number', 'bool', 'date'].includes(recordType.type) &&
                                                 operators[recordType.key] != '*' && (
                                                     <input
-                                                        className={`form-control ${disabled ? 'disabled' : ''}`}
+                                                        className={classNames('form-control', disabled && 'disabled')}
                                                         type="text"
                                                         placeholder="Waarde"
                                                         defaultValue={values[recordType.key]}
@@ -351,7 +352,7 @@ export default function FundCriteriaEditorItem({
                                             {['select', 'select_number', 'bool'].includes(recordType.type) &&
                                                 operators[recordType.key] != '*' && (
                                                     <SelectControl
-                                                        className={`form-control ${disabled ? 'disabled' : ''}`}
+                                                        className={classNames('form-control', disabled && 'disabled')}
                                                         placeholder="Verhouding"
                                                         allowSearch={false}
                                                         propKey={'value'}
@@ -392,25 +393,28 @@ export default function FundCriteriaEditorItem({
                         </div>
 
                         {hasBooleanLabel && (
-                            <div className="form-group">
-                                <label className="form-label">{'Voeg een aangepaste "Ik verklaar"-tekst toe'}</label>
-                                <input
-                                    type={'text'}
-                                    className="form-control"
-                                    value={label}
-                                    disabled={disabled}
-                                    onChange={(e) => setLabel(e?.target?.value)}
-                                    placeholder={'Ik verklaar aan de bovenstaande voorwaarden te voldoen'}
-                                />
-                                <FormError error={errors?.['criteria.0.label']} />
-                            </div>
+                            <FormGroup
+                                label={'Voeg een aangepaste "Ik verklaar"-tekst toe'}
+                                error={errors?.['criteria.0.label']}
+                                input={(id) => (
+                                    <input
+                                        type={'text'}
+                                        id={id}
+                                        className="form-control"
+                                        value={label}
+                                        disabled={disabled}
+                                        onChange={(e) => setLabel(e?.target?.value)}
+                                        placeholder={'Ik verklaar aan de bovenstaande voorwaarden te voldoen'}
+                                    />
+                                )}
+                            />
                         )}
 
                         {recordType?.key && (
                             <div className="row">
                                 <div className="col flex-xs-12 form-group">
                                     <CheckboxControl
-                                        className={`${disabled ? 'disabled' : ''}`}
+                                        className={classNames(disabled && 'disabled')}
                                         id={`${blockId}_attachments`}
                                         title={translate('components.fund_criteria_editor_item.allow_attachments')}
                                         checked={showAttachments}
@@ -421,7 +425,7 @@ export default function FundCriteriaEditorItem({
 
                                 <div className="col flex-xs-12 form-group">
                                     <CheckboxControl
-                                        className={`checkbox-narrow ${disabled ? 'disabled' : ''}`}
+                                        className={classNames('checkbox-narrow', disabled && 'disabled')}
                                         id={`${blockId}_optional`}
                                         checked={optional}
                                         disabled={disabled}
@@ -448,7 +452,7 @@ export default function FundCriteriaEditorItem({
                                             <label className="form-label">Min</label>
                                             {(recordType.type == 'number' || recordType.type == 'string') && (
                                                 <input
-                                                    className={`form-control ${disabled ? 'disabled' : ''}`}
+                                                    className={classNames('form-control', disabled && 'disabled')}
                                                     type="number"
                                                     placeholder="Min"
                                                     value={validations[recordType.key]?.min || ''}
@@ -484,7 +488,7 @@ export default function FundCriteriaEditorItem({
 
                                             {(recordType.type == 'number' || recordType.type == 'string') && (
                                                 <input
-                                                    className={`form-control ${disabled ? 'disabled' : ''}`}
+                                                    className={classNames('form-control', disabled && 'disabled')}
                                                     type="number"
                                                     placeholder="Max"
                                                     defaultValue={validations[recordType.key]?.max || ''}
diff --git a/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx b/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
index d39d2425f..1910fe1da 100644
--- a/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
+++ b/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import Fund from '../../../props/models/Fund';
 import { strLimit } from '../../../helpers/string';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
@@ -23,7 +24,7 @@ export default function FundsProviderProductsRequiredTable({
         <div className="card card-no-shadow card-bordered card-overflow-hidden">
             <div className="card-header card-header-md clickable" onClick={() => setShowFunds(!showFunds)}>
                 <div className="card-title">
-                    <div className={`mdi ${showFunds ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
+                    <div className={classNames('mdi', showFunds ? 'mdi-menu-down' : 'mdi-menu-right')} />
                     <div>Fondsen die vereisen dat u een aanbod plaatst ({funds.length})</div>
                 </div>
             </div>
diff --git a/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
index f68ce35b8..cf232661a 100644
--- a/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
@@ -25,5 +25,5 @@ export default function ReservationStateLabel({ reservation }: { reservation: Re
         return <Label type="danger">{reservation.state_locale}</Label>;
     }
 
-    return <Label type={'default'}>reservation.state_locale</Label>;
+    return <Label type={'default'}>{reservation.state_locale}</Label>;
 }
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
index f4686d332..974d4bb6f 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
 import ClickOutside from '../../click-outside/ClickOutside';
 import { uniqueId } from 'lodash';
 import { SelectControlOptionsProp } from '../SelectControl';
@@ -36,7 +37,7 @@ export default function SelectControlOptionsCountryCodes<T>({
 
     return (
         <div
-            className={'select-control select-control-country-codes ' + (className ? className : '')}
+            className={classNames('select-control', 'select-control-country-codes', className)}
             tabIndex={0}
             role="button"
             aria-haspopup="listbox"
@@ -46,7 +47,7 @@ export default function SelectControlOptionsCountryCodes<T>({
             ref={selectorRef}
             onKeyDown={onKeyDown}
             onBlur={onBlur}>
-            <div className={['select-control-input', showOptions ? 'options' : ''].filter((item) => item).join(' ')}>
+            <div className={classNames('select-control-input', showOptions && 'options')}>
                 {/* Placeholder */}
                 <label
                     htmlFor={controlId}
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
index 71716ff01..9bed80206 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
@@ -54,6 +54,7 @@ export default function SelectControlOptionsFund<T>({
         <div
             id={id}
             className={classNames(
+                'form-control',
                 'select-control',
                 'select-control-lg',
                 'select-control-funds',
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
index f36911b49..aa5b48628 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
@@ -55,7 +55,7 @@ export default function SelectControlOptionsLang<T>({
             ref={selectorRef}
             onKeyDown={onKeyDown}
             onBlur={onBlur}>
-            <div className={['lang-control-input', showOptions ? 'options' : ''].filter((item) => item).join(' ')}>
+            <div className={classNames('lang-control-input', showOptions && 'options')}>
                 {/* Placeholder */}
                 <label
                     htmlFor={controlId}
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
index 06a903882..e33ae5ad2 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsOrganization.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useRef, useState } from 'react';
+import classNames from 'classnames';
 import ClickOutside from '../../click-outside/ClickOutside';
 import { uniqueId } from 'lodash';
 import { SelectControlOptionsProp } from '../SelectControl';
@@ -50,7 +51,7 @@ export default function SelectControlOptionsOrganization<T>({
 
     return (
         <div
-            className={'select-control select-control-organizations ' + (className ? className : '')}
+            className={classNames('select-control', 'select-control-organizations', className)}
             data-dusk="headerOrganizationSwitcher"
             tabIndex={0}
             ref={selectorRef}
@@ -61,7 +62,7 @@ export default function SelectControlOptionsOrganization<T>({
             aria-controls={`${controlId}_options`}
             onKeyDown={onKeyDown}
             onBlur={onBlur}>
-            <div className={['select-control-input', showOptions ? 'options' : ''].filter((item) => item).join(' ')}>
+            <div className={classNames('select-control-input', showOptions && 'options')}>
                 {/* Placeholder */}
                 <label
                     role="button"
@@ -82,10 +83,10 @@ export default function SelectControlOptionsOrganization<T>({
                     </span>
                     <span className="select-control-search-placeholder">{placeholderValue || placeholder}</span>
                     <span
-                        className={
-                            'select-control-icon ' +
-                            (showOptions ? 'select-control-icon-up' : 'select-control-icon-down')
-                        }
+                        className={classNames(
+                            'select-control-icon',
+                            showOptions ? 'select-control-icon-up' : 'select-control-icon-down',
+                        )}
                     />
                 </label>
 
@@ -110,7 +111,7 @@ export default function SelectControlOptionsOrganization<T>({
                     </div>
 
                     <div
-                        className={'select-control-search-clear ' + (query ? '' : 'disabled')}
+                        className={classNames('select-control-search-clear', !query && 'disabled')}
                         tabIndex={0}
                         onKeyDown={(e) => clickOnKeyEnter(e, true)}
                         onClick={(e) => {
@@ -139,7 +140,10 @@ export default function SelectControlOptionsOrganization<T>({
                             {optionsFiltered.slice(0, visibleCount)?.map((option) => (
                                 <div
                                     data-dusk={`headerOrganizationItem${(option.raw as Organization)?.id}`}
-                                    className={`select-control-option ${option.id == modelValue.id ? 'selected' : ''}`}
+                                    className={classNames(
+                                        'select-control-option',
+                                        option.id == modelValue.id && 'selected',
+                                    )}
                                     tabIndex={0}
                                     key={option.id}
                                     onKeyDown={clickOnKeyEnter}
diff --git a/react/src/dashboard/components/elements/table-config/TableConfig.tsx b/react/src/dashboard/components/elements/table-config/TableConfig.tsx
index fbd9bc6de..aaf8469eb 100644
--- a/react/src/dashboard/components/elements/table-config/TableConfig.tsx
+++ b/react/src/dashboard/components/elements/table-config/TableConfig.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../hooks/useTranslate';
 
 export default function TableConfig({
@@ -26,9 +27,11 @@ export default function TableConfig({
 
             <div className="table-settings-list">
                 <div
-                    className={`table-setting ${selectedCategory == 'tooltips' ? 'active' : ''} ${
-                        !tooltips.length ? 'disabled' : ''
-                    }`}
+                    className={classNames(
+                        'table-setting',
+                        selectedCategory == 'tooltips' && 'active',
+                        !tooltips.length && 'disabled',
+                    )}
                     onClick={() => setSelectedCategory('tooltips')}>
                     <em className="mdi mdi-information-variant-circle" />
                     <div className="table-setting-name">Kolombeschrijvingen</div>
@@ -40,9 +43,10 @@ export default function TableConfig({
                     <div className="table-settings-tooltip-list">
                         {tooltips.map((tooltip, index) => (
                             <div
-                                className={`table-settings-tooltip-item ${
-                                    tooltip.key == activeTooltipKey ? 'active' : ''
-                                }`}
+                                className={classNames(
+                                    'table-settings-tooltip-item',
+                                    tooltip.key == activeTooltipKey && 'active',
+                                )}
                                 data-table-tooltip={tooltip.key}
                                 key={index}>
                                 <div className="table-settings-tooltip-item-title">{translate(tooltip.title)}</div>
diff --git a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
index 3cb773d36..19bce08c1 100644
--- a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
+++ b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData } from '../../../props/ApiResponses';
 import Paginator from '../../../modules/paginator/components/Paginator';
@@ -18,9 +19,11 @@ import EmptyCard from '../empty-card/EmptyCard';
 import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
 import TableTopScroller from './TableTopScroller';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
+import CheckboxControl from '../forms/controls/CheckboxControl';
 import useEventLogsExporter from '../../../services/exporters/useEventLogsExporter';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { ArrayParam, NumberParam, StringParam } from 'use-query-params';
+import FormGroup from '../forms/elements/FormGroup';
 
 export default function EventLogsTable({
     organization,
@@ -177,16 +180,19 @@ export default function EventLogsTable({
                             )}
                             {!filter.show && (
                                 <div className="form">
-                                    <div className="form-group">
-                                        <input
-                                            type="search"
-                                            className="form-control"
-                                            value={filterValues.q}
-                                            data-dusk="tableEventLogsSearch"
-                                            onChange={(e) => filterUpdate({ q: e.target.value })}
-                                            placeholder={translate('event_logs.labels.search')}
-                                        />
-                                    </div>
+                                    <FormGroup
+                                        input={(id) => (
+                                            <input
+                                                type="search"
+                                                id={id}
+                                                className="form-control"
+                                                value={filterValues.q}
+                                                data-dusk="tableEventLogsSearch"
+                                                onChange={(e) => filterUpdate({ q: e.target.value })}
+                                                placeholder={translate('event_logs.labels.search')}
+                                            />
+                                        )}
+                                    />
                                 </div>
                             )}
 
@@ -205,24 +211,13 @@ export default function EventLogsTable({
                                         <div>
                                             {loggables.map((loggable) => (
                                                 <div key={loggable.key}>
-                                                    <label
-                                                        className="checkbox checkbox-narrow"
-                                                        htmlFor={'checkbox_' + loggable.key}>
-                                                        <input
-                                                            onChange={(e) =>
-                                                                selectLoggable(loggable.key, e.target.checked)
-                                                            }
-                                                            id={'checkbox_' + loggable.key}
-                                                            type="checkbox"
-                                                            checked={filterValues.loggable.indexOf(loggable.key) !== -1}
-                                                        />
-                                                        <div className="checkbox-label">
-                                                            <div className="checkbox-box">
-                                                                <div className="mdi mdi-check" />
-                                                            </div>
-                                                            {loggable.title}
-                                                        </div>
-                                                    </label>
+                                                    <CheckboxControl
+                                                        id={'checkbox_' + loggable.key}
+                                                        checked={filterValues.loggable.indexOf(loggable.key) !== -1}
+                                                        narrow={true}
+                                                        onChange={(_, checked) => selectLoggable(loggable.key, checked)}
+                                                        title={loggable.title}
+                                                    />
                                                 </div>
                                             ))}
                                         </div>
@@ -283,9 +278,15 @@ export default function EventLogsTable({
                                             <td>
                                                 {log.note && log.note != log.note_substr && (
                                                     <a
-                                                        className={`td-icon mdi mdi-information block block-tooltip-details pull-left ${
-                                                            noteTooltip === log.id ? 'active' : ''
-                                                        }`}
+                                                        className={classNames(
+                                                            'td-icon',
+                                                            'mdi',
+                                                            'mdi-information',
+                                                            'block',
+                                                            'block-tooltip-details',
+                                                            'pull-left',
+                                                            noteTooltip === log.id && 'active',
+                                                        )}
                                                         onClick={(e) => showNoteTooltip(e, log)}>
                                                         {noteTooltip && (
                                                             <ClickOutside
diff --git a/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx b/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
index 8174b5cef..698e068c0 100644
--- a/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
+++ b/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export default function TableTopScrollerConfigTh({
     hidden = false,
@@ -16,9 +17,10 @@ export default function TableTopScrollerConfigTh({
             {!hidden && (
                 <div className="table-th-actions-list">
                     <div
-                        className={`table-th-action ${
-                            showTableConfig && tableConfigCategory == 'tooltips' ? 'active' : ''
-                        }`}
+                        className={classNames(
+                            'table-th-action',
+                            showTableConfig && tableConfigCategory == 'tooltips' && 'active',
+                        )}
                         onClick={() => displayTableConfig('tooltips')}>
                         <em className="mdi mdi-information-variant-circle" />
                     </div>
diff --git a/react/src/dashboard/components/elements/tables/ThSortable.tsx b/react/src/dashboard/components/elements/tables/ThSortable.tsx
index f09714d6c..4cc6264c2 100755
--- a/react/src/dashboard/components/elements/tables/ThSortable.tsx
+++ b/react/src/dashboard/components/elements/tables/ThSortable.tsx
@@ -49,9 +49,11 @@ export default function ThSortable({
                 label
             ) : (
                 <div
-                    className={`th-sort ${value ? 'th-sort-enabled' : ''} ${
-                        value == filter?.values.order_by ? 'th-sort-active' : ''
-                    }`}
+                    className={classNames(
+                        'th-sort',
+                        value && 'th-sort-enabled',
+                        value == filter?.values.order_by && 'th-sort-active',
+                    )}
                     onClick={() => orderBy(value)}>
                     <div className="th-sort-label">{label}</div>
 
diff --git a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
index 7746039e1..68e22d5fb 100644
--- a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
@@ -6,6 +6,7 @@ import Fund from '../../../../props/models/Fund';
 import SelectControl from '../../select-control/SelectControl';
 import SelectControlOptionsFund from '../../select-control/templates/SelectControlOptionsFund';
 import useTranslate from '../../../../hooks/useTranslate';
+import FormGroup from '../../forms/elements/FormGroup';
 
 export default function CardHeaderFilterNext({
     funds,
@@ -23,19 +24,22 @@ export default function CardHeaderFilterNext({
     return (
         <div className="block block-inline-filters">
             {funds?.length > 0 && (
-                <div className="form-group">
-                    <SelectControl
-                        className="form-control inline-filter-control"
-                        propKey={'id'}
-                        options={[{ id: null, name: 'Selecteer fonds' }, ...funds]}
-                        value={filter.activeValues.fund_id}
-                        placeholder={translate('vouchers.labels.fund')}
-                        allowSearch={false}
-                        onChange={(fund_id: number) => filter.update({ fund_id })}
-                        optionsComponent={SelectControlOptionsFund}
-                        dusk="prevalidationsSelectFund"
-                    />
-                </div>
+                <FormGroup
+                    input={(id) => (
+                        <SelectControl
+                            id={id}
+                            className="form-control inline-filter-control"
+                            propKey={'id'}
+                            options={[{ id: null, name: 'Selecteer fonds' }, ...funds]}
+                            value={filter.activeValues.fund_id}
+                            placeholder={translate('vouchers.labels.fund')}
+                            allowSearch={false}
+                            onChange={(fund_id: number) => filter.update({ fund_id })}
+                            optionsComponent={SelectControlOptionsFund}
+                            dusk="prevalidationsSelectFund"
+                        />
+                    )}
+                />
             )}
 
             {filter.show && (
@@ -51,8 +55,8 @@ export default function CardHeaderFilterNext({
             )}
 
             {!filter.show && (
-                <div className="form">
-                    <div className="form-group">
+                <FormGroup
+                    input={() => (
                         <input
                             type="text"
                             className="form-control"
@@ -61,8 +65,8 @@ export default function CardHeaderFilterNext({
                             onChange={(e) => filter.update({ q: e.target.value })}
                             placeholder={'Zoeken'}
                         />
-                    </div>
-                </div>
+                    )}
+                />
             )}
 
             <CardHeaderFilter filter={filter}>{children}</CardHeaderFilter>
diff --git a/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx b/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
index e249668e8..5b91cccd5 100644
--- a/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 
 export default function FilterItemToggle({
     children,
@@ -17,7 +18,7 @@ export default function FilterItemToggle({
         <div className="form-group">
             <label
                 htmlFor=""
-                className={`form-label form-label-toggle ${visible ? 'active' : ''}`}
+                className={classNames('form-label', 'form-label-toggle', visible && 'active')}
                 data-dusk={dusk}
                 onClick={() => setVisible(!visible)}>
                 <span>{label}</span>
diff --git a/react/src/dashboard/components/elements/tables/elements/TableCheckboxControl.tsx b/react/src/dashboard/components/elements/tables/elements/TableCheckboxControl.tsx
index 20be76027..378ddba2b 100644
--- a/react/src/dashboard/components/elements/tables/elements/TableCheckboxControl.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/TableCheckboxControl.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export default function TableCheckboxControl({
     checked,
@@ -9,7 +10,7 @@ export default function TableCheckboxControl({
 }) {
     return (
         <label
-            className={`checkbox checkbox-compact checkbox-th ${checked ? 'checked' : ''}`}
+            className={classNames('checkbox', 'checkbox-compact', 'checkbox-th', checked && 'checked')}
             onClick={onClick}
             style={{ cursor: 'pointer' }}>
             <div className="checkbox-box">
diff --git a/react/src/dashboard/components/elements/tooltip/Tooltip.tsx b/react/src/dashboard/components/elements/tooltip/Tooltip.tsx
index 3000b2f7d..fecd74732 100644
--- a/react/src/dashboard/components/elements/tooltip/Tooltip.tsx
+++ b/react/src/dashboard/components/elements/tooltip/Tooltip.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, useState } from 'react';
+import classNames from 'classnames';
 import { strLimit } from '../../../helpers/string';
 import ClickOutside from '../click-outside/ClickOutside';
 
@@ -24,12 +25,19 @@ export default function Tooltip({
                     e.stopPropagation();
                     setShowTooltip(!showTooltip);
                 }}
-                className={`td-icon mdi mdi-information block block-tooltip-details pull-left clickable ${
-                    showTooltip ? 'active' : ''
-                }`}>
+                className={classNames(
+                    'td-icon',
+                    'mdi',
+                    'mdi-information',
+                    'block',
+                    'block-tooltip-details',
+                    'pull-left',
+                    'clickable',
+                    showTooltip && 'active',
+                )}>
                 {showTooltip && (
                     <ClickOutside
-                        className={`tooltip-content ${position === 'bottom' ? 'tooltip-content-bottom' : ''}`}
+                        className={classNames('tooltip-content', position === 'bottom' && 'tooltip-content-bottom')}
                         attr={{ onClick: (e) => e.stopPropagation() }}
                         onClickOutside={() => setShowTooltip(false)}>
                         <div className="tooltip-text" title={[].concat(text)?.join(' ')}>
diff --git a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
index 999ffec5e..518401cf5 100644
--- a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
+++ b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
@@ -4,13 +4,13 @@ import { useIdentity2FAService } from '../../services/Identity2FAService';
 import Identity2FA from '../../props/models/Identity2FA';
 import usePushDanger from '../../hooks/usePushDanger';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import FormError from '../elements/forms/errors/FormError';
 import PincodeControl from '../elements/forms/controls/PincodeControl';
 import Auth2FAInfoBox from '../elements/auth2fa-info-box/Auth2FAInfoBox';
 import useTimer from '../../hooks/useTimer';
 import classNames from 'classnames';
 import usePushApiError from '../../hooks/usePushApiError';
 import { ResponseError } from '../../props/ApiResponses';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function Modal2FADeactivate({
     modal,
@@ -158,26 +158,25 @@ export default function Modal2FADeactivate({
                                 </strong>
                             </div>
                             <div className="modal-text text-center">
-                                <div className="form-group">
-                                    {type == 'phone' && (
-                                        <div className="form-label">Voer de 6-cijferige SMS-code in</div>
-                                    )}
-                                    {type == 'authenticator' && (
-                                        <div className="form-label">Voer de 6-cijferige code in vanuit de app</div>
+                                <FormGroup
+                                    label={
+                                        type == 'phone'
+                                            ? 'Voer de 6-cijferige SMS-code in'
+                                            : 'Voer de 6-cijferige code in vanuit de app'
+                                    }
+                                    error={errorCode}
+                                    input={() => (
+                                        <PincodeControl
+                                            value={confirmationCode}
+                                            onChange={setConfirmationCode}
+                                            className={'block-pincode-compact'}
+                                            valueType={'num'}
+                                            blockSize={3}
+                                            blockCount={2}
+                                            ariaLabel={'Voer de tweefactorauthenticatiecode in voor deactivering'}
+                                        />
                                     )}
-
-                                    <PincodeControl
-                                        value={confirmationCode}
-                                        onChange={setConfirmationCode}
-                                        className={'block-pincode-compact'}
-                                        valueType={'num'}
-                                        blockSize={3}
-                                        blockCount={2}
-                                        ariaLabel={'Voer de tweefactorauthenticatiecode in voor deactivering'}
-                                    />
-
-                                    <FormError error={errorCode} />
-                                </div>
+                                />
                             </div>
                             {type == 'phone' && (
                                 <div className="modal-text text-center">
@@ -187,7 +186,12 @@ export default function Modal2FADeactivate({
                                         onClick={() => resendCode()}
                                         disabled={timer?.time > 0}>
                                         <div
-                                            className={`mdi mdi-refresh icon-start ${sendingCode ? 'mdi-spin' : ''}`}
+                                            className={classNames(
+                                                'mdi',
+                                                'mdi-refresh',
+                                                'icon-start',
+                                                sendingCode && 'mdi-spin',
+                                            )}
                                         />
                                         Code opnieuw verzenden
                                         {timer?.time > 0 && <span>&nbsp;({timer?.time} seconde(n))</span>}
diff --git a/react/src/dashboard/components/modals/Modal2FASetup.tsx b/react/src/dashboard/components/modals/Modal2FASetup.tsx
index ab81f52cf..a28da8303 100644
--- a/react/src/dashboard/components/modals/Modal2FASetup.tsx
+++ b/react/src/dashboard/components/modals/Modal2FASetup.tsx
@@ -472,7 +472,12 @@ export default function Modal2FASetup({
                                         onClick={() => resendCode()}
                                         disabled={timer?.time > 0}>
                                         <div
-                                            className={`mdi mdi-refresh icon-start ${sendingCode ? 'mdi-spin' : ''}`}
+                                            className={classNames(
+                                                'mdi',
+                                                'mdi-refresh',
+                                                'icon-start',
+                                                sendingCode && 'mdi-spin',
+                                            )}
                                         />
                                         Code opnieuw verzenden
                                         {timer?.time > 0 && <span>&nbsp;({timer?.time} seconde(n))</span>}
@@ -556,9 +561,12 @@ export default function Modal2FASetup({
                                             onClick={() => resendCode()}
                                             disabled={timer?.time > 0}>
                                             <div
-                                                className={`mdi mdi-refresh icon-start ${
-                                                    sendingCode ? 'mdi-spin' : ''
-                                                }`}
+                                                className={classNames(
+                                                    'mdi',
+                                                    'mdi-refresh',
+                                                    'icon-start',
+                                                    sendingCode && 'mdi-spin',
+                                                )}
                                             />
                                             Code opnieuw verzenden
                                             {timer?.time > 0 && <span>&nbsp;{timer?.time} seconde(n))</span>}
diff --git a/react/src/dashboard/components/modals/ModalAddNote.tsx b/react/src/dashboard/components/modals/ModalAddNote.tsx
index ef484b793..e96348f29 100644
--- a/react/src/dashboard/components/modals/ModalAddNote.tsx
+++ b/react/src/dashboard/components/modals/ModalAddNote.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import FormValuesModel from '../../types/FormValuesModel';
 import { ApiResponseSingle, ResponseError } from '../../props/ApiResponses';
 import Note from '../../props/models/Note';
 import useSetProgress from '../../hooks/useSetProgress';
 import classNames from 'classnames';
 import usePushApiError from '../../hooks/usePushApiError';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalAddNote({
     modal,
@@ -55,16 +55,20 @@ export default function ModalAddNote({
                     <div className="modal-section">
                         {title && <div className="modal-heading">{title}</div>}
                         {description && <div className="modal-text">{description}</div>}
-                        <div className="form-group">
-                            <label className="form-label form-label-required">Notitie</label>
-                            <textarea
-                                className="form-control"
-                                value={form.values.description}
-                                data-dusk="noteInput"
-                                onChange={(e) => form.update({ description: e.target.value })}
-                            />
-                            <FormError error={form.errors?.description} />
-                        </div>
+                        <FormGroup
+                            required={true}
+                            label="Notitie"
+                            error={form.errors?.description}
+                            input={(id) => (
+                                <textarea
+                                    className="form-control"
+                                    id={id}
+                                    value={form.values.description}
+                                    data-dusk="noteInput"
+                                    onChange={(e) => form.update({ description: e.target.value })}
+                                />
+                            )}
+                        />
                     </div>
                 </div>
                 <div className="modal-footer text-center">
diff --git a/react/src/dashboard/components/modals/ModalAuthPincode.tsx b/react/src/dashboard/components/modals/ModalAuthPincode.tsx
index 39256b83e..49693c8d9 100644
--- a/react/src/dashboard/components/modals/ModalAuthPincode.tsx
+++ b/react/src/dashboard/components/modals/ModalAuthPincode.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import PincodeControl from '../elements/forms/controls/PincodeControl';
 import { useIdentityService } from '../../services/IdentityService';
 import ModalNotification from './ModalNotification';
@@ -10,6 +9,7 @@ import useAssetUrl from '../../hooks/useAssetUrl';
 import { ResponseError } from '../../props/ApiResponses';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalAuthPincode({ modal }: { modal: ModalState }) {
     const assetUrl = useAssetUrl();
@@ -108,14 +108,16 @@ export default function ModalAuthPincode({ modal }: { modal: ModalState }) {
                             <div className="app-instructions-subtitle" id="pinCodeDialogSubtitle">
                                 {translate('open_in_me.app_header.subtitle')}
                             </div>
-                            <div className="form-group">
-                                <PincodeControl
-                                    value={form.values.pin_code.toString()}
-                                    onChange={(pin_code) => form.update({ pin_code })}
-                                    ariaLabel={'Voer de koppelcode van de Me-app in'}
-                                />
-                                <FormError error={form.errors.auth_code} />
-                            </div>
+                            <FormGroup
+                                error={form.errors.auth_code}
+                                input={() => (
+                                    <PincodeControl
+                                        value={form.values.pin_code.toString()}
+                                        onChange={(pin_code) => form.update({ pin_code })}
+                                        ariaLabel={'Voer de koppelcode van de Me-app in'}
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
index 3a1374f21..5b39451e8 100644
--- a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
+++ b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
@@ -240,8 +240,9 @@ export default function ModalCreatePrevalidation({
                                 <div className="col col-lg-8 col-lg-offset-2 col-lg-12">
                                     <FormGroup
                                         label={'Fonds'}
-                                        input={() => (
+                                        input={(id) => (
                                             <SelectControl
+                                                id={id}
                                                 className="form-control inline-filter-control"
                                                 propKey={'id'}
                                                 options={funds}
@@ -271,7 +272,7 @@ export default function ModalCreatePrevalidation({
                                             }
                                             error={form.errors['data.' + fundRecord]}
                                             key={index}
-                                            input={() => (
+                                            input={(id) => (
                                                 <div className="flex-row">
                                                     <div className="flex-col flex-col-padless-right flex-grow">
                                                         {recordTypesByKey &&
@@ -280,6 +281,7 @@ export default function ModalCreatePrevalidation({
                                                                 recordTypesByKey[fundRecord].type,
                                                             ) && (
                                                                 <SelectControl
+                                                                    id={id}
                                                                     propKey={'value'}
                                                                     placeholder="Waarde"
                                                                     value={form.values[fundRecord]}
@@ -297,6 +299,7 @@ export default function ModalCreatePrevalidation({
                                                                 <div
                                                                     data-dusk={`controlDate${recordTypesByKey[fundRecord].key}`}>
                                                                     <DatePickerControl
+                                                                        id={id}
                                                                         value={dateParse(form.values[fundRecord])}
                                                                         dateFormat="dd-MM-yyyy"
                                                                         placeholder={recordTypesByKey[fundRecord]?.name}
@@ -313,6 +316,7 @@ export default function ModalCreatePrevalidation({
                                                             recordTypesByKey[fundRecord] &&
                                                             recordTypesByKey[fundRecord].type == 'number' && (
                                                                 <input
+                                                                    id={id}
                                                                     type="number"
                                                                     value={form.values[fundRecord] || ''}
                                                                     placeholder={recordTypesByKey[fundRecord]?.name}
@@ -330,6 +334,7 @@ export default function ModalCreatePrevalidation({
                                                                 recordTypesByKey[fundRecord].type,
                                                             ) && (
                                                                 <input
+                                                                    id={id}
                                                                     type="string"
                                                                     value={form.values[fundRecord] || ''}
                                                                     placeholder={recordTypesByKey[fundRecord]?.name}
diff --git a/react/src/dashboard/components/modals/ModalDangerZone.tsx b/react/src/dashboard/components/modals/ModalDangerZone.tsx
index 8171ca6af..1ec378391 100644
--- a/react/src/dashboard/components/modals/ModalDangerZone.tsx
+++ b/react/src/dashboard/components/modals/ModalDangerZone.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { ModalButton } from './elements/ModalButton';
 import classNames from 'classnames';
+import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 
 export default function ModalDangerZone({
     modal,
@@ -70,20 +71,12 @@ export default function ModalDangerZone({
 
                         {confirmation && (
                             <div className="form text-center">
-                                <label className="checkbox checkbox-narrow">
-                                    <input
-                                        type="checkbox"
-                                        checked={confirmed}
-                                        onChange={(e) => setConfirmed(e.target.checked)}
-                                        hidden={true}
-                                    />
-                                    <div className="checkbox-label">
-                                        <div className="checkbox-box">
-                                            <div className="mdi mdi-check" />
-                                        </div>
-                                        <span>{confirmation}</span>
-                                    </div>
-                                </label>
+                                <CheckboxControl
+                                    checked={confirmed}
+                                    narrow={true}
+                                    onChange={(_, checked) => setConfirmed(checked)}
+                                    title={confirmation}
+                                />
                             </div>
                         )}
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
index b6fef05b8..86f05ba94 100644
--- a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
+++ b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
@@ -158,7 +158,7 @@ export default function ModalDuplicatesPicker({
                 <div className="modal-body">
                     <div className="modal-hero">
                         <div className="hero-icon">
-                            <em className={`mdi ${hero_icon ? `mdi-${hero_icon}` : ''}`} />
+                            <em className={classNames('mdi', hero_icon && `mdi-${hero_icon}`)} />
                         </div>
 
                         {hero_title && <div className="hero-title">{hero_title}</div>}
@@ -197,9 +197,10 @@ export default function ModalDuplicatesPicker({
                                                 <td>
                                                     <div className="switch-input">
                                                         <div
-                                                            className={`switch-input-label ${
-                                                                item.blink ? 'switch-input-label-blink' : ''
-                                                            }`}>
+                                                            className={classNames(
+                                                                'switch-input-label',
+                                                                item.blink && 'switch-input-label-blink',
+                                                            )}>
                                                             {item.model ? labels.label_on : labels.label_off}
                                                         </div>
                                                         <div className="switch-input-control">
diff --git a/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx b/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
index c4cedb6bb..22d7ae8b3 100644
--- a/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalEmployeeEdit.tsx
@@ -3,7 +3,6 @@ import { ModalState } from '../../modules/modals/context/ModalContext';
 import Organization from '../../props/models/Organization';
 import Employee from '../../props/models/Employee';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { useRoleService } from '../../services/RoleService';
 import { useEmployeeService } from '../../services/EmployeeService';
 import { ModalButton } from './elements/ModalButton';
@@ -15,6 +14,7 @@ import useOfficeService from '../../services/OfficeService';
 import classNames from 'classnames';
 import useIsProviderPanel from '../../hooks/useIsProviderPanel';
 import useEnvData from '../../hooks/useEnvData';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalEmployeeEdit({
     modal,
@@ -153,63 +153,67 @@ export default function ModalEmployeeEdit({
                 <div className="modal-body modal-body-visible">
                     <div className="modal-section">
                         {!employee && (
-                            <div className="form-group">
-                                <label htmlFor="" className="form-label form-label-required">
-                                    E-mailadres
-                                </label>
-                                <input
-                                    type="text"
-                                    value={form.values.email?.toString()}
-                                    placeholder="E-mailadres..."
-                                    id="email_value"
-                                    data-dusk="formEmployeeEmail"
-                                    className="form-control"
-                                    onChange={(e) => form.update({ email: e.target.value })}
-                                    autoComplete="email"
-                                />
-                                <FormError error={form.errors['email']} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label="E-mailadres"
+                                error={form.errors['email']}
+                                input={(id) => (
+                                    <input
+                                        type="text"
+                                        value={form.values.email?.toString()}
+                                        placeholder="E-mailadres..."
+                                        id={id}
+                                        data-dusk="formEmployeeEmail"
+                                        className="form-control"
+                                        onChange={(e) => form.update({ email: e.target.value })}
+                                        autoComplete="email"
+                                    />
+                                )}
+                            />
                         )}
 
                         {((isProviderPanel && offices?.length > 1) || form.errors?.office_id) && (
-                            <div className="form-group">
-                                <label htmlFor="" className="form-label form-label-required">
-                                    Selecteer vestiging
-                                </label>
-                                <SelectControl
-                                    value={form.values.office_id}
-                                    propKey={'id'}
-                                    propValue={'name'}
-                                    onChange={(office_id: number) => form.update({ office_id })}
-                                    options={offices}
-                                />
-                                <FormError error={form.errors['office_id']} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label="Selecteer vestiging"
+                                error={form.errors['office_id']}
+                                input={(id) => (
+                                    <SelectControl
+                                        id={id}
+                                        value={form.values.office_id}
+                                        propKey={'id'}
+                                        propValue={'name'}
+                                        onChange={(office_id: number) => form.update({ office_id })}
+                                        options={offices}
+                                    />
+                                )}
+                            />
                         )}
 
                         {(!employee || employee.identity_address !== organization.identity_address) && (
-                            <div className="form-group">
-                                <label className="form-label">Rollen</label>
-
-                                <div className="block block-permissions-list">
-                                    {roles.map((role) => (
-                                        <div key={role.id} className="permission-item">
-                                            <CheckboxControl
-                                                id={'role_' + role.id}
-                                                title={role.name}
-                                                tooltip={role.description}
-                                                checked={form.values.roles[role.id] || false}
-                                                onChange={(e) => onChangeRole(e.target.checked, role)}
-                                                className={'checkbox-narrow'}>
-                                                <span className="permission-name">
-                                                    <span className="ellipsis">{role.name}</span>
-                                                </span>
-                                            </CheckboxControl>
-                                        </div>
-                                    ))}
-                                </div>
-                                <FormError error={form.errors['roles']} />
-                            </div>
+                            <FormGroup
+                                label="Rollen"
+                                error={form.errors['roles']}
+                                input={() => (
+                                    <div className="block block-permissions-list">
+                                        {roles.map((role) => (
+                                            <div key={role.id} className="permission-item">
+                                                <CheckboxControl
+                                                    id={'role_' + role.id}
+                                                    title={role.name}
+                                                    tooltip={role.description}
+                                                    checked={form.values.roles[role.id] || false}
+                                                    onChange={(e) => onChangeRole(e.target.checked, role)}
+                                                    className={'checkbox-narrow'}>
+                                                    <span className="permission-name">
+                                                        <span className="ellipsis">{role.name}</span>
+                                                    </span>
+                                                </CheckboxControl>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalExportDataSelect.tsx b/react/src/dashboard/components/modals/ModalExportDataSelect.tsx
index ac1ffa854..66e978dcf 100644
--- a/react/src/dashboard/components/modals/ModalExportDataSelect.tsx
+++ b/react/src/dashboard/components/modals/ModalExportDataSelect.tsx
@@ -4,6 +4,7 @@ import { chunk } from 'lodash';
 import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import ToggleControl from '../elements/forms/controls/ToggleControl';
 
 export type ExportFieldProp = {
     key?: string;
@@ -164,15 +165,19 @@ export default function ModalExportDataSelect({
                             {localSections?.map((section, indexSection) => (
                                 <div
                                     key={indexSection}
-                                    className={`export-section 
-                                    ${section.collapsable ? 'export-section-collapsable' : ''} 
-                                    ${section.key == 'extra_fields' ? 'export-section-extra-fields' : ''}`}>
+                                    className={classNames(
+                                        'export-section',
+                                        section.collapsable && 'export-section-collapsable',
+                                        section.key == 'extra_fields' && 'export-section-extra-fields',
+                                    )}>
                                     <div className="export-section-label flex" onClick={() => collapseSection(section)}>
                                         {section.collapsable && (
                                             <em
-                                                className={`mdi export-section-label-icon ${
-                                                    section.collapsed ? 'mdi-menu-right' : 'mdi-menu-down'
-                                                }`}
+                                                className={classNames(
+                                                    'mdi',
+                                                    'export-section-label-icon',
+                                                    section.collapsed ? 'mdi-menu-right' : 'mdi-menu-down',
+                                                )}
                                             />
                                         )}
                                         <div className="flex flex-grow flex-vertical flex-center">
@@ -180,22 +185,12 @@ export default function ModalExportDataSelect({
                                         </div>
                                         {section.type === 'checkbox' && (
                                             <div className="flex">
-                                                <label
-                                                    className="form-toggle"
-                                                    data-dusk={`toggle_${section.key}`}
-                                                    htmlFor={`checkbox_${section.key}_check_all`}>
-                                                    <input
-                                                        type="checkbox"
-                                                        id={`checkbox_${section.key}_check_all`}
-                                                        checked={section.selectAll}
-                                                        onChange={() => toggleAllFields(section, !section.selectAll)}
-                                                    />
-                                                    <div className="form-toggle-inner flex-end">
-                                                        <div className="toggle-input">
-                                                            <div className="toggle-input-dot" />
-                                                        </div>
-                                                    </div>
-                                                </label>
+                                                <ToggleControl
+                                                    id={`checkbox_${section.key}_check_all`}
+                                                    checked={section.selectAll}
+                                                    dusk={`toggle_${section.key}`}
+                                                    onChange={(_, checked) => toggleAllFields(section, checked)}
+                                                />
                                             </div>
                                         )}
                                     </div>
diff --git a/react/src/dashboard/components/modals/ModalFundCriteriaDescriptionEdit.tsx b/react/src/dashboard/components/modals/ModalFundCriteriaDescriptionEdit.tsx
index 35f0f15a6..da16b9a74 100644
--- a/react/src/dashboard/components/modals/ModalFundCriteriaDescriptionEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalFundCriteriaDescriptionEdit.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
-import FormError from '../elements/forms/errors/FormError';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import FundCriterion from '../../props/models/FundCriterion';
 import { ResponseError } from '../../props/ApiResponses';
 import MarkdownEditor from '../elements/forms/markdown-editor/MarkdownEditor';
 import useTranslate from '../../hooks/useTranslate';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 type FundCriterionTexts = {
     title: string;
@@ -72,7 +73,7 @@ export default function ModalFundCriteriaDescriptionEdit({
     );
 
     return (
-        <div className={`modal modal-animated ${modal.loading ? 'modal-loading' : null}`}>
+        <div className={classNames('modal', 'modal-animated', modal.loading && 'modal-loading')}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <form className="modal-window form" onSubmit={form.submit}>
@@ -82,55 +83,52 @@ export default function ModalFundCriteriaDescriptionEdit({
 
                 <div className="modal-body">
                     <div className="modal-section">
-                        <div className="form-group">
-                            <label className="form-label">
-                                {translate('modals.modal_fund_criteria_description.labels.title')}
-                            </label>
-
-                            <input
-                                className="form-control"
-                                value={form.values.title || ''}
-                                placeholder="Titel"
-                                onChange={(e) => form.update({ title: e.target.value })}
-                            />
-
-                            <FormError error={form.errors['criteria.0.title']} />
-                        </div>
-
-                        <div className="form-group">
-                            <label className="form-label">
-                                {translate('modals.modal_fund_criteria_description.labels.description')}
-                            </label>
-
-                            <MarkdownEditor
-                                value={form.values.description_html || ''}
-                                height={200}
-                                onChange={(description: string) => form.update({ description: description })}
-                                onUpdatedRaw={(data) => {
-                                    setDescriptionHtml(data.data.content_html);
-                                }}
-                            />
-
-                            <FormError error={form.errors['criteria.0.description']} />
-                        </div>
-
-                        {criterion.fund_criteria_step_id && (
-                            <div className="form-group">
-                                <label className="form-label">
-                                    {translate('modals.modal_fund_criteria_description.labels.extra_description')}
-                                </label>
+                        <FormGroup
+                            label={translate('modals.modal_fund_criteria_description.labels.title')}
+                            error={form.errors['criteria.0.title']}
+                            input={(id) => (
+                                <input
+                                    className="form-control"
+                                    id={id}
+                                    value={form.values.title || ''}
+                                    placeholder="Titel"
+                                    onChange={(e) => form.update({ title: e.target.value })}
+                                />
+                            )}
+                        />
 
+                        <FormGroup
+                            label={translate('modals.modal_fund_criteria_description.labels.description')}
+                            error={form.errors['criteria.0.description']}
+                            input={() => (
                                 <MarkdownEditor
-                                    value={form.values.extra_description_html || ''}
+                                    value={form.values.description_html || ''}
                                     height={200}
-                                    onChange={(description: string) => form.update({ extra_description: description })}
+                                    onChange={(description: string) => form.update({ description: description })}
                                     onUpdatedRaw={(data) => {
-                                        setExtraDescriptionHtml(data.data.content_html);
+                                        setDescriptionHtml(data.data.content_html);
                                     }}
                                 />
+                            )}
+                        />
 
-                                <FormError error={form.errors['criteria.0.extra_description']} />
-                            </div>
+                        {criterion.fund_criteria_step_id && (
+                            <FormGroup
+                                label={translate('modals.modal_fund_criteria_description.labels.extra_description')}
+                                error={form.errors['criteria.0.extra_description']}
+                                input={() => (
+                                    <MarkdownEditor
+                                        value={form.values.extra_description_html || ''}
+                                        height={200}
+                                        onChange={(description: string) =>
+                                            form.update({ extra_description: description })
+                                        }
+                                        onUpdatedRaw={(data) => {
+                                            setExtraDescriptionHtml(data.data.content_html);
+                                        }}
+                                    />
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalFundEditPhysicalCardSettings.tsx b/react/src/dashboard/components/modals/ModalFundEditPhysicalCardSettings.tsx
index 4f2fae13c..03d0d9559 100644
--- a/react/src/dashboard/components/modals/ModalFundEditPhysicalCardSettings.tsx
+++ b/react/src/dashboard/components/modals/ModalFundEditPhysicalCardSettings.tsx
@@ -84,7 +84,10 @@ export default function ModalFundEditPhysicalCardSettings({
                         label={'Kies een fysieke pas'}
                         error={form.errors?.allow_physical_cards}
                         info={
-                            'Met deze optie kan een fysieke pas aan een fonds worden gekoppeld. De fysieke pas kunt u instellen onder het menu Fysieke passen'
+                            <Fragment>
+                                Met deze optie kan een fysieke pas aan een fonds worden gekoppeld. De fysieke pas kunt u
+                                instellen onder het menu Fysieke passen
+                            </Fragment>
                         }
                         input={(id) => (
                             <SelectControl
diff --git a/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx b/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
index 91b388faa..a25dba953 100644
--- a/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
+++ b/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
-import FormError from '../elements/forms/errors/FormError';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import Fund from '../../props/models/Fund';
 import SelectControl from '../elements/select-control/SelectControl';
@@ -11,6 +11,7 @@ import useFundProviderInvitationsService from '../../services/useFundProviderInv
 import { ResponseError } from '../../props/ApiResponses';
 import FundProviderInvitation from '../../props/models/FundProviderInvitation';
 import useTranslate from '../../hooks/useTranslate';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundInviteProviders({
     fund,
@@ -70,7 +71,7 @@ export default function ModalFundInviteProviders({
     }, [updateForm, fund, funds]);
 
     return (
-        <div className={`modal modal-animated modal-md ${modal.loading ? 'modal-loading' : null}`}>
+        <div className={classNames('modal', 'modal-animated', 'modal-md', modal.loading && 'modal-loading')}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <div className="modal-window form">
@@ -81,22 +82,22 @@ export default function ModalFundInviteProviders({
                         <div className="modal-section">
                             <div className="row">
                                 <div className="col col-lg-10 col col-lg-offset-1">
-                                    <div className="form-group">
-                                        <label className="form-label form-label-required">
-                                            Nodig aanbieders uit van:
-                                        </label>
-
-                                        <SelectControl
-                                            className={'form-control'}
-                                            options={funds}
-                                            propKey={'id'}
-                                            allowSearch={true}
-                                            value={form.values?.fund_id}
-                                            onChange={(fund_id: number) => form.update({ fund_id })}
-                                        />
-
-                                        <FormError error={form.errors?.fund_id} />
-                                    </div>
+                                    <FormGroup
+                                        required={true}
+                                        label="Nodig aanbieders uit van:"
+                                        error={form.errors?.fund_id}
+                                        input={(id) => (
+                                            <SelectControl
+                                                id={id}
+                                                className={'form-control'}
+                                                options={funds}
+                                                propKey={'id'}
+                                                allowSearch={true}
+                                                value={form.values?.fund_id}
+                                                onChange={(fund_id: number) => form.update({ fund_id })}
+                                            />
+                                        )}
+                                    />
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/modals/ModalFundProviderChatMessage.tsx b/react/src/dashboard/components/modals/ModalFundProviderChatMessage.tsx
index 586bb64c6..455397686 100644
--- a/react/src/dashboard/components/modals/ModalFundProviderChatMessage.tsx
+++ b/react/src/dashboard/components/modals/ModalFundProviderChatMessage.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import Organization from '../../props/models/Organization';
 import FundProviderChat from '../../props/models/FundProviderChat';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import Fund from '../../props/models/Fund';
 import FundProvider from '../../props/models/FundProvider';
 import useFundProviderChatService from '../../services/FundProviderChatService';
 import { ResponseError } from '../../props/ApiResponses';
 import SponsorProduct from '../../props/models/Sponsor/SponsorProduct';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundProviderChatMessage({
     modal,
@@ -54,7 +55,7 @@ export default function ModalFundProviderChatMessage({
     );
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
             <form className="modal-window form" onSubmit={form.submit}>
                 <div className="modal-close mdi mdi-close" onClick={modal.close} />
@@ -72,16 +73,20 @@ export default function ModalFundProviderChatMessage({
                                 aanpassingsverzoek naar de aanbieder.
                             </div>
                         </div>
-                        <div className="form-group">
-                            <div className="form-label form-label-required">Bericht</div>
-                            <textarea
-                                className="r-n form-control"
-                                placeholder="Bericht aan aanbieder"
-                                value={form.values.message}
-                                onChange={(e) => form.update({ message: e.target.value })}
-                            />
-                            <FormError error={form.errors.message} />
-                        </div>
+                        <FormGroup
+                            required={true}
+                            label="Bericht"
+                            error={form.errors.message}
+                            input={(id) => (
+                                <textarea
+                                    className="r-n form-control"
+                                    id={id}
+                                    placeholder="Bericht aan aanbieder"
+                                    value={form.values.message}
+                                    onChange={(e) => form.update({ message: e.target.value })}
+                                />
+                            )}
+                        />
                     </div>
                 </div>
                 <div className="modal-footer text-center">
diff --git a/react/src/dashboard/components/modals/ModalFundProviderChatProvider.tsx b/react/src/dashboard/components/modals/ModalFundProviderChatProvider.tsx
index 71b1a9d04..cf3a7ffeb 100644
--- a/react/src/dashboard/components/modals/ModalFundProviderChatProvider.tsx
+++ b/react/src/dashboard/components/modals/ModalFundProviderChatProvider.tsx
@@ -118,14 +118,16 @@ export default function ModalFundProviderChatProvider({
                                         {messages?.map((message) => (
                                             <div
                                                 key={message.id}
-                                                className={`chat-message ${
-                                                    'chat-message-' +
-                                                    (message.counterpart == 'system'
-                                                        ? 'system'
-                                                        : panelType != message.counterpart
-                                                          ? 'in'
-                                                          : 'out')
-                                                }`}>
+                                                className={classNames(
+                                                    'chat-message',
+                                                    message.counterpart == 'system' && 'chat-message-system',
+                                                    message.counterpart != 'system' &&
+                                                        panelType != message.counterpart &&
+                                                        'chat-message-in',
+                                                    message.counterpart != 'system' &&
+                                                        panelType == message.counterpart &&
+                                                        'chat-message-out',
+                                                )}>
                                                 <div className="chat-message-time">
                                                     {message.time}
                                                     {message.counterpart == 'system' ? ' - Systeembericht' : ''}
diff --git a/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx b/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
index 5109dbd98..5d82e9356 100644
--- a/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
+++ b/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useEnvData from '../../hooks/useEnvData';
 import Organization from '../../props/models/Organization';
@@ -113,7 +114,7 @@ export default function ModalFundProviderChatSponsor({
     }, [loadMessages, updateInterval]);
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
             <form className="modal-window form" onSubmit={form.submit}>
                 <div className="modal-close mdi mdi-close" onClick={modal.close} />
@@ -131,14 +132,16 @@ export default function ModalFundProviderChatSponsor({
                                         {messages?.map((message) => (
                                             <div
                                                 key={message.id}
-                                                className={`chat-message ${
-                                                    'chat-message-' +
-                                                    (message.counterpart == 'system'
-                                                        ? 'system'
-                                                        : envData.client_type != message.counterpart
-                                                          ? 'in'
-                                                          : 'out')
-                                                }`}>
+                                                className={classNames(
+                                                    'chat-message',
+                                                    message.counterpart == 'system' && 'chat-message-system',
+                                                    message.counterpart != 'system' &&
+                                                        envData.client_type != message.counterpart &&
+                                                        'chat-message-in',
+                                                    message.counterpart != 'system' &&
+                                                        envData.client_type == message.counterpart &&
+                                                        'chat-message-out',
+                                                )}>
                                                 <div className="chat-message-time">
                                                     {message.time}
                                                     {message.counterpart == 'system' ? ' - Systeembericht' : ''}
diff --git a/react/src/dashboard/components/modals/ModalFundRequestAssignValidator.tsx b/react/src/dashboard/components/modals/ModalFundRequestAssignValidator.tsx
index 4fbd10f07..dfcc83e90 100644
--- a/react/src/dashboard/components/modals/ModalFundRequestAssignValidator.tsx
+++ b/react/src/dashboard/components/modals/ModalFundRequestAssignValidator.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
 import useSetProgress from '../../hooks/useSetProgress';
 import FundRequest from '../../props/models/FundRequest';
@@ -12,6 +11,7 @@ import Employee from '../../props/models/Employee';
 import { strLimit } from '../../helpers/string';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundRequestAssignValidator({
     modal,
@@ -68,20 +68,22 @@ export default function ModalFundRequestAssignValidator({
                     <div className="modal-section">
                         <div className="row">
                             <div className="col col-lg-10 col col-lg-offset-1">
-                                <div className="form-group">
-                                    <label className="form-label form-label-required">
-                                        {translate('modal_fund_request_assign.label.employees')}
-                                    </label>
-                                    <SelectControl
-                                        propValue={'label'}
-                                        propKey={'id'}
-                                        options={listEmployees}
-                                        value={form.values.employee_id}
-                                        dusk="employeeSelect"
-                                        onChange={(employee_id: number) => form.update({ employee_id })}
-                                    />
-                                    <FormError error={form.errors?.employee_id} />
-                                </div>
+                                <FormGroup
+                                    required={true}
+                                    label={translate('modal_fund_request_assign.label.employees')}
+                                    error={form.errors?.employee_id}
+                                    input={(id) => (
+                                        <SelectControl
+                                            id={id}
+                                            propValue={'label'}
+                                            propKey={'id'}
+                                            options={listEmployees}
+                                            value={form.values.employee_id}
+                                            dusk="employeeSelect"
+                                            onChange={(employee_id: number) => form.update({ employee_id })}
+                                        />
+                                    )}
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalFundRequestDecline.tsx b/react/src/dashboard/components/modals/ModalFundRequestDecline.tsx
index e064df164..352f8be35 100644
--- a/react/src/dashboard/components/modals/ModalFundRequestDecline.tsx
+++ b/react/src/dashboard/components/modals/ModalFundRequestDecline.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
 import useSetProgress from '../../hooks/useSetProgress';
 import FundRequest from '../../props/models/FundRequest';
 import { useFundRequestValidatorService } from '../../services/FundRequestValidatorService';
 import Organization from '../../props/models/Organization';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundRequestDecline({
     modal,
@@ -74,16 +74,19 @@ export default function ModalFundRequestDecline({
                                     &nbsp;
                                 </div>
                             </div>
-                            <div className="form-group">
-                                <div className="form-label">Bericht (optioneel)</div>
-                                <textarea
-                                    className="form-control"
-                                    value={form.values.note}
-                                    onChange={(e) => form.update({ note: e.target.value })}
-                                    placeholder="Bericht naar aanvrager"
-                                />
-                                <FormError error={form.errors?.note} />
-                            </div>
+                            <FormGroup
+                                label="Bericht (optioneel)"
+                                error={form.errors?.note}
+                                input={(id) => (
+                                    <textarea
+                                        id={id}
+                                        className="form-control"
+                                        value={form.values.note}
+                                        onChange={(e) => form.update({ note: e.target.value })}
+                                        placeholder="Bericht naar aanvrager"
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
                 ) : (
diff --git a/react/src/dashboard/components/modals/ModalFundRequestDisregard.tsx b/react/src/dashboard/components/modals/ModalFundRequestDisregard.tsx
index 6d4ab6c9c..ff05a567f 100644
--- a/react/src/dashboard/components/modals/ModalFundRequestDisregard.tsx
+++ b/react/src/dashboard/components/modals/ModalFundRequestDisregard.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
 import useSetProgress from '../../hooks/useSetProgress';
 import FundRequest from '../../props/models/FundRequest';
 import { useFundRequestValidatorService } from '../../services/FundRequestValidatorService';
 import Organization from '../../props/models/Organization';
 import classNames from 'classnames';
+import CheckboxControl from '../elements/forms/controls/CheckboxControl';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundRequestDisregard({
     modal,
@@ -72,35 +73,33 @@ export default function ModalFundRequestDisregard({
                                 <span>Let op: de aanvrager kan hierna een nieuwe aanvraag starten.</span>
                             </div>
                         </div>
-                        <div className="form-group text-center">
-                            <label className="checkbox checkbox-narrow" form={'notifyDisregard'}>
-                                <input
-                                    type="checkbox"
-                                    checked={form.values.notify}
-                                    onChange={(e) => form.update({ notify: e.target.checked })}
-                                    hidden={true}
+                        <FormGroup
+                            textAlign="center"
+                            error={form.errors?.notify}
+                            input={() => (
+                                <CheckboxControl
                                     id="notifyDisregard"
-                                />
-                                <div className="checkbox-label">
-                                    <div className="checkbox-box">
-                                        <div className="mdi mdi-check" />
-                                    </div>
+                                    checked={form.values.notify}
+                                    narrow={true}
+                                    onChange={(_, checked) => form.update({ notify: checked })}>
                                     <div className="modal-text">Verstuur de aanvrager een bericht</div>
-                                </div>
-                            </label>
-                            <FormError error={form.errors?.notify} />
-                        </div>
+                                </CheckboxControl>
+                            )}
+                        />
                         {form.values.notify && (
-                            <div className="form-group">
-                                <div className="form-label">Bericht (optioneel)</div>
-                                <textarea
-                                    className="form-control"
-                                    value={form.values.note}
-                                    onChange={(e) => form.update({ note: e.target.value })}
-                                    placeholder="Bericht naar aanvrager"
-                                />
-                                <FormError error={form.errors?.note} />
-                            </div>
+                            <FormGroup
+                                label="Bericht (optioneel)"
+                                error={form.errors?.note}
+                                input={(id) => (
+                                    <textarea
+                                        className="form-control"
+                                        id={id}
+                                        value={form.values.note}
+                                        onChange={(e) => form.update({ note: e.target.value })}
+                                        placeholder="Bericht naar aanvrager"
+                                    />
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalFundRequestRecordCreate.tsx b/react/src/dashboard/components/modals/ModalFundRequestRecordCreate.tsx
index 0b6a31259..61eb430b4 100644
--- a/react/src/dashboard/components/modals/ModalFundRequestRecordCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalFundRequestRecordCreate.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ApiResponseSingle, ResponseError } from '../../props/ApiResponses';
 import useSetProgress from '../../hooks/useSetProgress';
 import FundRequest from '../../props/models/FundRequest';
@@ -9,6 +8,7 @@ import { useFundRequestValidatorService } from '../../services/FundRequestValida
 import Organization from '../../props/models/Organization';
 import FundRequestRecord from '../../props/models/FundRequestRecord';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundRequestRecordCreate({
     modal,
@@ -67,18 +67,22 @@ export default function ModalFundRequestRecordCreate({
                         <div className="modal-section">
                             <div className="row">
                                 <div className="col col-lg-8 col-lg-offset-2 col-lg-12">
-                                    <div className="form-group">
-                                        <label className="form-label form-label-required">Partner</label>
-                                        <input
-                                            className="form-control"
-                                            type="number"
-                                            value={form.values.value}
-                                            onChange={(e) => form.update({ value: e.target.value })}
-                                            placeholder="Partner BSN"
-                                            data-dusk="partnerBsnInput"
-                                        />
-                                        <FormError error={form.errors.value} />
-                                    </div>
+                                    <FormGroup
+                                        required={true}
+                                        label="Partner"
+                                        error={form.errors.value}
+                                        input={(id) => (
+                                            <input
+                                                className="form-control"
+                                                id={id}
+                                                type="number"
+                                                value={form.values.value}
+                                                onChange={(e) => form.update({ value: e.target.value })}
+                                                placeholder="Partner BSN"
+                                                data-dusk="partnerBsnInput"
+                                            />
+                                        )}
+                                    />
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/modals/ModalFundRequestRecordEdit.tsx b/react/src/dashboard/components/modals/ModalFundRequestRecordEdit.tsx
index f9ca4c9f5..a6a9169d4 100644
--- a/react/src/dashboard/components/modals/ModalFundRequestRecordEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalFundRequestRecordEdit.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
 import useSetProgress from '../../hooks/useSetProgress';
 import FundRequest from '../../props/models/FundRequest';
 import { useFundRequestValidatorService } from '../../services/FundRequestValidatorService';
 import Organization from '../../props/models/Organization';
 import FundRequestRecord from '../../props/models/FundRequestRecord';
-import FormHint from '../elements/forms/errors/FormHint';
 import SelectControl from '../elements/select-control/SelectControl';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundRequestRecordEdit({
     modal,
@@ -72,42 +71,47 @@ export default function ModalFundRequestRecordEdit({
                     <div className="modal-section form">
                         <div className="row">
                             <div className="col col-lg-8 col-lg-offset-2 col-lg-12">
-                                <div className="form-group">
-                                    <label className="form-label form-label-required">
-                                        {fundRequestRecord.record_type.name}
-                                    </label>
+                                <FormGroup
+                                    required={true}
+                                    label={fundRequestRecord.record_type.name}
+                                    error={form.errors?.value}
+                                    hint={criterion.description}
+                                    input={(id) => (
+                                        <>
+                                            {recordNumeric && (
+                                                <input
+                                                    className="form-control"
+                                                    id={id}
+                                                    value={form.values.value}
+                                                    type="number"
+                                                    data-dusk="numberInput"
+                                                    onChange={(e) => form.update({ value: e.target.value })}
+                                                    step={1}
+                                                />
+                                            )}
 
-                                    {recordNumeric && (
-                                        <input
-                                            className="form-control"
-                                            value={form.values.value}
-                                            type="number"
-                                            data-dusk="numberInput"
-                                            onChange={(e) => form.update({ value: e.target.value })}
-                                            step={1}
-                                        />
-                                    )}
-
-                                    {recordSelect && (
-                                        <SelectControl
-                                            value={form.values.value}
-                                            propKey={'value'}
-                                            onChange={(value: string | number) => form.update({ value })}
-                                            options={criterion.record_type.options}
-                                            allowSearch={false}
-                                        />
-                                    )}
+                                            {recordSelect && (
+                                                <SelectControl
+                                                    id={id}
+                                                    value={form.values.value}
+                                                    propKey={'value'}
+                                                    onChange={(value: string | number) => form.update({ value })}
+                                                    options={criterion.record_type.options}
+                                                    allowSearch={false}
+                                                />
+                                            )}
 
-                                    {!recordNumeric && !recordSelect && (
-                                        <input
-                                            className="form-control"
-                                            value={form.values.value}
-                                            onChange={(e) => form.update({ value: e.target.value })}
-                                        />
+                                            {!recordNumeric && !recordSelect && (
+                                                <input
+                                                    className="form-control"
+                                                    id={id}
+                                                    value={form.values.value}
+                                                    onChange={(e) => form.update({ value: e.target.value })}
+                                                />
+                                            )}
+                                        </>
                                     )}
-                                    <FormError error={form.errors?.value} />
-                                    <FormHint text={criterion.description} />
-                                </div>
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalFundTopUp.tsx b/react/src/dashboard/components/modals/ModalFundTopUp.tsx
index a90820767..4d7f99e83 100644
--- a/react/src/dashboard/components/modals/ModalFundTopUp.tsx
+++ b/react/src/dashboard/components/modals/ModalFundTopUp.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { ResponseError } from '../../props/ApiResponses';
 import Fund from '../../props/models/Fund';
@@ -59,7 +60,7 @@ export default function ModalFundTopUp({
     }, [activeOrganization.id, closeModal, fund.id, fundService, modal, pushApiError]);
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={closeModal} />
             <form className="modal-window form">
                 <div className="modal-close mdi mdi-close" onClick={closeModal} role="button" />
diff --git a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
index b619a8917..5f91a9fbb 100644
--- a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
+++ b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
@@ -5,7 +5,6 @@ import Organization from '../../props/models/Organization';
 import { ResponseError } from '../../props/ApiResponses';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import FormError from '../elements/forms/errors/FormError';
 import useSetProgress from '../../hooks/useSetProgress';
 import { clickOnKeyEnter } from '../../helpers/wcag';
 import useTranslate from '../../hooks/useTranslate';
@@ -13,6 +12,7 @@ import classNames from 'classnames';
 import usePushApiError from '../../hooks/usePushApiError';
 import useProviderFundService from '../../services/ProviderFundService';
 import InfoBox from '../elements/info-box/InfoBox';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalFundUnsubscribe({
     modal,
@@ -92,18 +92,20 @@ export default function ModalFundUnsubscribe({
                                     Optioneel kunt u een reden opgeven, zodat de gemeente weet waarom u zich heeft
                                     afgemeld.
                                 </div>
-                                <div className="form-group">
-                                    <label className="form-label">Notitie (optioneel)</label>
-                                    <textarea
-                                        className="form-control"
-                                        value={form.values.note}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                        placeholder="Reden"
-                                        data-dusk="noteInput"
-                                    />
-                                    <FormError error={form.errors?.note} />
-                                    <FormError error={form.errors?.fund_provider_id} />
-                                </div>
+                                <FormGroup
+                                    label="Notitie (optioneel)"
+                                    error={form.errors?.note || form.errors?.fund_provider_id}
+                                    input={(id) => (
+                                        <textarea
+                                            className="form-control"
+                                            id={id}
+                                            value={form.values.note}
+                                            onChange={(e) => form.update({ note: e.target.value })}
+                                            placeholder="Reden"
+                                            data-dusk="noteInput"
+                                        />
+                                    )}
+                                />
 
                                 {errorMessage && (
                                     <div className="form-group">
diff --git a/react/src/dashboard/components/modals/ModalLogEmailShow.tsx b/react/src/dashboard/components/modals/ModalLogEmailShow.tsx
index beabf0e88..1cebfd9b7 100644
--- a/react/src/dashboard/components/modals/ModalLogEmailShow.tsx
+++ b/react/src/dashboard/components/modals/ModalLogEmailShow.tsx
@@ -4,6 +4,7 @@ import EmailLog from '../../props/models/EmailLog';
 import classNames from 'classnames';
 import TableEmptyValue from '../elements/table-empty-value/TableEmptyValue';
 import TableDateTime from '../elements/tables/elements/TableDateTime';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalLogEmailShow({
     modal,
@@ -56,34 +57,40 @@ export default function ModalLogEmailShow({
                                     </div>
                                 </div>
                             </div>
-                            <div className="form-group">
-                                <div className="form-label">Onderwerp</div>
-                                <div className={'form-control form-control-dashed'}>{emailLog.subject}</div>
-                            </div>
-                            <div className="form-group">
-                                <div className="form-label">Bericht</div>
-                                <div className={'form-control form-control-dashed email-log-preview'}>
-                                    {!modal.loading && emailLog.content && (
-                                        <iframe
-                                            sandbox={'allow-same-origin'}
-                                            srcDoc={emailLog.content}
-                                            onLoad={(e) => {
-                                                const iframeDoc = e.currentTarget.contentWindow.document;
-                                                const iframeDocHeight = iframeDoc.documentElement.scrollHeight;
+                            <FormGroup
+                                label="Onderwerp"
+                                input={() => (
+                                    <div className={'form-control form-control-dashed'}>{emailLog.subject}</div>
+                                )}
+                            />
+                            <FormGroup
+                                label="Bericht"
+                                input={() => (
+                                    <div className={'form-control form-control-dashed email-log-preview'}>
+                                        {!modal.loading && emailLog.content && (
+                                            <iframe
+                                                sandbox={'allow-same-origin'}
+                                                srcDoc={emailLog.content}
+                                                onLoad={(e) => {
+                                                    const iframeDoc = e.currentTarget.contentWindow.document;
+                                                    const iframeDocHeight = iframeDoc.documentElement.scrollHeight;
 
-                                                iframeDoc.querySelectorAll('a').forEach((el) => {
-                                                    el.onclick = (e) => {
-                                                        e.preventDefault();
-                                                        window.open(el.href, '_blank', 'noopener,noreferrer')?.focus();
-                                                    };
-                                                });
+                                                    iframeDoc.querySelectorAll('a').forEach((el) => {
+                                                        el.onclick = (e) => {
+                                                            e.preventDefault();
+                                                            window
+                                                                .open(el.href, '_blank', 'noopener,noreferrer')
+                                                                ?.focus();
+                                                        };
+                                                    });
 
-                                                e.currentTarget.style.height = `${iframeDocHeight}px`;
-                                            }}
-                                        />
-                                    )}
-                                </div>
-                            </div>
+                                                    e.currentTarget.style.height = `${iframeDocHeight}px`;
+                                                }}
+                                            />
+                                        )}
+                                    </div>
+                                )}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalMailPreview.tsx b/react/src/dashboard/components/modals/ModalMailPreview.tsx
index 8af1c5d78..6f34ed567 100644
--- a/react/src/dashboard/components/modals/ModalMailPreview.tsx
+++ b/react/src/dashboard/components/modals/ModalMailPreview.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 
 export default function ModalMailPreview({
@@ -11,7 +12,7 @@ export default function ModalMailPreview({
     content_html?: string;
 }) {
     return (
-        <div className={`modal modal-animated ${modal.loading ? 'modal-loading' : ''}`}>
+        <div className={classNames('modal', 'modal-animated', modal.loading && 'modal-loading')}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <div className="modal-window">
diff --git a/react/src/dashboard/components/modals/ModalMarkdownCustomLink.tsx b/react/src/dashboard/components/modals/ModalMarkdownCustomLink.tsx
index f5e94360c..d2e72e114 100644
--- a/react/src/dashboard/components/modals/ModalMarkdownCustomLink.tsx
+++ b/react/src/dashboard/components/modals/ModalMarkdownCustomLink.tsx
@@ -3,11 +3,11 @@ import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import { useMediaService } from '../../services/MediaService';
 import { ResponseError } from '../../props/ApiResponses';
-import FormError from '../elements/forms/errors/FormError';
 import useSetProgress from '../../hooks/useSetProgress';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
 import usePushDanger from '../../hooks/usePushDanger';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalMarkdownCustomLink({
     type,
@@ -105,78 +105,78 @@ export default function ModalMarkdownCustomLink({
                 <div className="modal-body">
                     <div className="modal-section">
                         {type === 'customLink' && (
-                            <div className="form-group">
-                                <label className="form-label" htmlFor="link_text">
-                                    {translate('modals.modal_markdown_custom_link.labels.desc')}
-                                </label>
-                                <input
-                                    type="text"
-                                    id="link_text"
-                                    className="form-control"
-                                    value={form.values?.text || ''}
-                                    onChange={(e) => form.update({ text: e.target.value })}
-                                />
-                            </div>
+                            <FormGroup
+                                label={translate('modals.modal_markdown_custom_link.labels.desc')}
+                                input={(id) => (
+                                    <input
+                                        type="text"
+                                        id={id}
+                                        className="form-control"
+                                        value={form.values?.text || ''}
+                                        onChange={(e) => form.update({ text: e.target.value })}
+                                    />
+                                )}
+                            />
                         )}
 
                         {(type === 'customLink' || type === 'youtubeLink') && (
-                            <div className="form-group">
-                                <label className="form-label" htmlFor="link_url">
-                                    {translate('modals.modal_markdown_custom_link.labels.url')}
-                                </label>
-                                <input
-                                    type="text"
-                                    id="link_url"
-                                    className="form-control"
-                                    value={form.values?.url || ''}
-                                    onChange={(e) => form.update({ url: e.target.value })}
-                                />
-                            </div>
+                            <FormGroup
+                                label={translate('modals.modal_markdown_custom_link.labels.url')}
+                                input={(id) => (
+                                    <input
+                                        type="text"
+                                        id={id}
+                                        className="form-control"
+                                        value={form.values?.url || ''}
+                                        onChange={(e) => form.update({ url: e.target.value })}
+                                    />
+                                )}
+                            />
                         )}
 
                         {type === 'imageLink' && (
-                            <div className="form-group">
-                                <div className="flex-row">
-                                    <div className="flex-col flex-grow">
-                                        <label className="form-label" htmlFor="media_url">
-                                            {translate('modals.modal_markdown_custom_link.labels.url_image')}
-                                        </label>
-                                        <input
-                                            className="form-control"
-                                            id="media_url"
-                                            type="text"
-                                            value={form.values?.url || ''}
-                                            onChange={(e) => form.update({ url: e.target.value })}
-                                        />
-                                        <FormError error={errors?.file} />
+                            <FormGroup
+                                label={translate('modals.modal_markdown_custom_link.labels.url_image')}
+                                error={errors?.file}
+                                input={(id) => (
+                                    <div className="flex-row">
+                                        <div className="flex-col flex-grow">
+                                            <input
+                                                className="form-control"
+                                                id={id}
+                                                type="text"
+                                                value={form.values?.url || ''}
+                                                onChange={(e) => form.update({ url: e.target.value })}
+                                            />
+                                        </div>
+                                        <div className="flex-col">
+                                            <label className="form-label">&nbsp;</label>
+                                            <button
+                                                className="button button-primary nowrap"
+                                                type="button"
+                                                onClick={selectMedia}>
+                                                <em className="mdi mdi-upload icon-start" />
+                                                {translate('modals.modal_markdown_custom_link.buttons.upload_image')}
+                                            </button>
+                                        </div>
                                     </div>
-                                    <div className="flex-col">
-                                        <label className="form-label">&nbsp;</label>
-                                        <button
-                                            className="button button-primary nowrap"
-                                            type="button"
-                                            onClick={selectMedia}>
-                                            <em className="mdi mdi-upload icon-start" />
-                                            {translate('modals.modal_markdown_custom_link.buttons.upload_image')}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
+                                )}
+                            />
                         )}
 
                         {type === 'imageLink' && (
-                            <div className="form-group">
-                                <label className="form-label" htmlFor="media_alt">
-                                    {translate('modals.modal_markdown_custom_link.labels.alt_text')}
-                                </label>
-                                <input
-                                    className="form-control"
-                                    id="media_alt"
-                                    type="text"
-                                    value={form.values.alt}
-                                    onChange={(e) => form.update({ alt: e.target.value })}
-                                />
-                            </div>
+                            <FormGroup
+                                label={translate('modals.modal_markdown_custom_link.labels.alt_text')}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        id={id}
+                                        type="text"
+                                        value={form.values.alt}
+                                        onChange={(e) => form.update({ alt: e.target.value })}
+                                    />
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
index c1aea9814..18bf955c6 100644
--- a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
+++ b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
@@ -1,9 +1,9 @@
 import React, { FormEvent, useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import useSetProgress from '../../hooks/useSetProgress';
 import SponsorVoucher from '../../props/models/Sponsor/SponsorVoucher';
-import FormError from '../elements/forms/errors/FormError';
 import { usePhysicalCardsRequestService } from '../../services/PhysicalCardsRequestService';
 import useTranslate from '../../hooks/useTranslate';
 import { ResponseError } from '../../props/ApiResponses';
@@ -103,9 +103,14 @@ export default function ModalOrderPhysicalCard({
 
     return (
         <div
-            className={`modal modal-animated modal-physical-card-order ${state === 'form' ? 'modal-sm' : 'modal-md'} ${
-                modal.loading ? 'modal-loading' : ''
-            } ${className}`}>
+            className={classNames(
+                'modal',
+                'modal-animated',
+                'modal-physical-card-order',
+                state === 'form' ? 'modal-sm' : 'modal-md',
+                modal.loading && 'modal-loading',
+                className,
+            )}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             {state == 'form' && (
@@ -142,116 +147,104 @@ export default function ModalOrderPhysicalCard({
                                 )}
                             />
 
-                            <div className="form-group">
-                                <label
-                                    className="form-label form-label-required"
-                                    htmlFor="modals.modal_physical_card_order.modal_section.request_new_card.address">
-                                    {translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.address',
-                                    )}
-                                </label>
-
-                                <input
-                                    className="form-control"
-                                    id="modals.modal_physical_card_order.modal_section.request_new_card.address"
-                                    defaultValue={form.values.address}
-                                    placeholder={translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.address_placeholder',
-                                    )}
-                                    onChange={(e) => form.update({ address: e.target.value })}
-                                    autoComplete="address-line1"
-                                />
-
-                                <FormError error={form.errors?.address} />
-                            </div>
-
-                            <div className="form-group">
-                                <label
-                                    className="form-label form-label-required"
-                                    htmlFor="modals.modal_physical_card_order.modal_section.request_new_card.house">
-                                    {translate('modals.modal_physical_card_order.modal_section.request_new_card.house')}
-                                </label>
-
-                                <input
-                                    className="form-control"
-                                    id="modals.modal_physical_card_order.modal_section.request_new_card.house"
-                                    defaultValue={form.values.house}
-                                    placeholder={translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.house_placeholder',
-                                    )}
-                                    onChange={(e) => form.update({ house: e.target.value })}
-                                    autoComplete="address-line2"
-                                />
-
-                                <FormError error={form.errors?.house} />
-                            </div>
-
-                            <div className="form-group">
-                                <label
-                                    className="form-label"
-                                    htmlFor="modals.modal_physical_card_order.modal_section.request_new_card.house_addition">
-                                    {translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.house_addition',
-                                    )}
-                                </label>
-
-                                <input
-                                    className="form-control"
-                                    defaultValue={form.values.house_addition}
-                                    id="modals.modal_physical_card_order.modal_section.request_new_card.house_addition"
-                                    placeholder={translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.house_addition_placeholder',
-                                    )}
-                                    onChange={(e) => form.update({ house_addition: e.target.value })}
-                                    autoComplete="address-line3"
-                                />
-
-                                <FormError error={form.errors?.house_addition} />
-                            </div>
-
-                            <div className="form-group">
-                                <label
-                                    className="form-label form-label-required"
-                                    htmlFor="modals.modal_physical_card_order.modal_section.request_new_card.postcode">
-                                    {translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.postcode',
-                                    )}
-                                </label>
-
-                                <input
-                                    className="form-control"
-                                    defaultValue={form.values.postcode}
-                                    id="modals.modal_physical_card_order.modal_section.request_new_card.postcode"
-                                    placeholder={translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.postcode_placeholder',
-                                    )}
-                                    onChange={(e) => form.update({ postcode: e.target.value })}
-                                    autoComplete="postal-code"
-                                />
+                            <FormGroup
+                                required={true}
+                                label={translate(
+                                    'modals.modal_physical_card_order.modal_section.request_new_card.address',
+                                )}
+                                error={form.errors?.address}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        id={id}
+                                        defaultValue={form.values.address}
+                                        placeholder={translate(
+                                            'modals.modal_physical_card_order.modal_section.request_new_card.address_placeholder',
+                                        )}
+                                        onChange={(e) => form.update({ address: e.target.value })}
+                                        autoComplete="address-line1"
+                                    />
+                                )}
+                            />
 
-                                <FormError error={form.errors?.postcode} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label={translate(
+                                    'modals.modal_physical_card_order.modal_section.request_new_card.house',
+                                )}
+                                error={form.errors?.house}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        id={id}
+                                        defaultValue={form.values.house}
+                                        placeholder={translate(
+                                            'modals.modal_physical_card_order.modal_section.request_new_card.house_placeholder',
+                                        )}
+                                        onChange={(e) => form.update({ house: e.target.value })}
+                                        autoComplete="address-line2"
+                                    />
+                                )}
+                            />
 
-                            <div className="form-group">
-                                <label
-                                    className="form-label form-label-required"
-                                    htmlFor="modals.modal_physical_card_order.modal_section.request_new_card.city">
-                                    {translate('modals.modal_physical_card_order.modal_section.request_new_card.city')}
-                                </label>
+                            <FormGroup
+                                label={translate(
+                                    'modals.modal_physical_card_order.modal_section.request_new_card.house_addition',
+                                )}
+                                error={form.errors?.house_addition}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        defaultValue={form.values.house_addition}
+                                        id={id}
+                                        placeholder={translate(
+                                            'modals.modal_physical_card_order.modal_section.request_new_card.house_addition_placeholder',
+                                        )}
+                                        onChange={(e) => form.update({ house_addition: e.target.value })}
+                                        autoComplete="address-line3"
+                                    />
+                                )}
+                            />
 
-                                <input
-                                    className="form-control"
-                                    defaultValue={form.values.city}
-                                    id="modals.modal_physical_card_order.modal_section.request_new_card.city"
-                                    placeholder={translate(
-                                        'modals.modal_physical_card_order.modal_section.request_new_card.city_placeholder',
-                                    )}
-                                    onChange={(e) => form.update({ city: e.target.value })}
-                                    autoComplete="address-level2"
-                                />
+                            <FormGroup
+                                required={true}
+                                label={translate(
+                                    'modals.modal_physical_card_order.modal_section.request_new_card.postcode',
+                                )}
+                                error={form.errors?.postcode}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        defaultValue={form.values.postcode}
+                                        id={id}
+                                        placeholder={translate(
+                                            'modals.modal_physical_card_order.modal_section.request_new_card.postcode_placeholder',
+                                        )}
+                                        onChange={(e) => form.update({ postcode: e.target.value })}
+                                        autoComplete="postal-code"
+                                    />
+                                )}
+                            />
 
-                                <FormError error={form.errors?.city} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label={translate(
+                                    'modals.modal_physical_card_order.modal_section.request_new_card.city',
+                                )}
+                                error={form.errors?.city}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        defaultValue={form.values.city}
+                                        id={id}
+                                        placeholder={translate(
+                                            'modals.modal_physical_card_order.modal_section.request_new_card.city_placeholder',
+                                        )}
+                                        onChange={(e) => form.update({ city: e.target.value })}
+                                        autoComplete="address-level2"
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
 
diff --git a/react/src/dashboard/components/modals/ModalPayoutEdit.tsx b/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
index 23dd7c923..c3c4c1fc2 100644
--- a/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import Fund from '../../props/models/Fund';
@@ -12,8 +13,31 @@ import FormGroup from '../elements/forms/elements/FormGroup';
 import usePushApiError from '../../hooks/usePushApiError';
 import usePayoutTransactionService from '../../services/PayoutTransactionService';
 import PayoutTransaction from '../../props/models/PayoutTransaction';
+import { currencyFormat } from '../../helpers/string';
+import usePayoutBankAccounts, { BankAccountSource } from '../../hooks/usePayoutBankAccounts';
 
 type AmountType = 'custom' | 'predefined';
+const resetBankAccountIds = () => ({
+    fund_request_id: null,
+    profile_bank_account_id: null,
+    reimbursement_id: null,
+    payout_transaction_id: null,
+});
+
+const BANK_ACCOUNT_SOURCE_FIELDS: Record<
+    Exclude<BankAccountSource, 'manual'>,
+    keyof {
+        fund_request_id?: number;
+        profile_bank_account_id?: number;
+        reimbursement_id?: number;
+        payout_transaction_id?: number;
+    }
+> = {
+    fund_request: 'fund_request_id',
+    profile_bank_account: 'profile_bank_account_id',
+    reimbursement: 'reimbursement_id',
+    payout: 'payout_transaction_id',
+};
 
 export default function ModalPayoutEdit({
     funds,
@@ -38,7 +62,18 @@ export default function ModalPayoutEdit({
 
     const payoutTransactionService = usePayoutTransactionService();
 
-    const [fund, setFund] = useState(funds?.[0]);
+    const [fund, setFund] = useState(
+        transaction ? funds?.find((fund) => fund.id === transaction?.fund?.id) : funds?.[0],
+    );
+    const [bankAccountSource, setBankAccountSource] = useState<BankAccountSource>('manual');
+
+    const { bankAccountsLoading, bankAccountOptions } = usePayoutBankAccounts({
+        organizationId: organization?.id,
+        fundId: fund?.id,
+        bankAccountSource,
+        enabled: !transaction,
+        placeholderLabel: translate('modals.modal_payout_create.options.bank_account_select_placeholder'),
+    });
 
     const assignTypes = useMemo(() => {
         if (transaction) {
@@ -54,15 +89,27 @@ export default function ModalPayoutEdit({
 
     const [assignType, setAssignType] = useState(assignTypes?.[0]);
 
-    const amountOptions = useMemo(() => {
+    const amountOptions = useMemo((): Array<{ key: AmountType; name: string }> => {
         return [
             fund?.allow_custom_amounts ? { key: 'custom', name: 'Vrij bedrag' } : null,
             fund?.allow_preset_amounts && fund?.amount_presets.length > 0
                 ? { key: 'predefined', name: 'Vaste bedragen op basis van categorieën' }
                 : null,
-        ].filter((option) => option) as Array<{ key: AmountType; name: string }>;
+        ].filter(Boolean) as Array<{ key: AmountType; name: string }>;
     }, [fund]);
 
+    const getDefaultAllocateBy = (fund: Partial<Fund> | undefined): AmountType => {
+        if (fund?.allow_custom_amounts) {
+            return 'custom';
+        }
+
+        if (fund?.allow_preset_amounts && fund?.amount_presets?.length > 0) {
+            return 'predefined';
+        }
+
+        return 'custom';
+    };
+
     const amountValueOptions = useMemo(() => {
         const options = fund?.allow_preset_amounts ? fund?.amount_presets : [];
 
@@ -72,6 +119,31 @@ export default function ModalPayoutEdit({
         }));
     }, [fund]);
 
+    const bankAccountSourceOptions = useMemo(() => {
+        return [
+            {
+                key: 'manual',
+                label: translate('modals.modal_payout_create.options.bank_account_source_manual'),
+            },
+            {
+                key: 'fund_request',
+                label: translate('modals.modal_payout_create.options.bank_account_source_fund_request'),
+            },
+            {
+                key: 'profile_bank_account',
+                label: translate('modals.modal_payout_create.options.bank_account_source_profile_bank_account'),
+            },
+            {
+                key: 'reimbursement',
+                label: translate('modals.modal_payout_create.options.bank_account_source_reimbursement'),
+            },
+            {
+                key: 'payout',
+                label: translate('modals.modal_payout_create.options.bank_account_source_payout'),
+            },
+        ];
+    }, [translate]);
+
     const form = useFormBuilder<{
         target_iban: string;
         target_name: string;
@@ -81,6 +153,10 @@ export default function ModalPayoutEdit({
         description: string;
         email: string;
         bsn: string;
+        fund_request_id?: number;
+        profile_bank_account_id?: number;
+        reimbursement_id?: number;
+        payout_transaction_id?: number;
     }>(
         {
             amount: transaction?.amount || '',
@@ -90,19 +166,33 @@ export default function ModalPayoutEdit({
                 ? transaction?.amount_preset_id
                     ? 'predefined'
                     : 'custom'
-                : amountOptions?.[0]?.key,
+                : amountOptions?.[0]?.key || 'custom',
             amount_preset_id: transaction?.amount_preset_id || amountValueOptions?.[0]?.id,
             description: transaction?.description || '',
             email: '',
             bsn: '',
+            ...resetBankAccountIds(),
         },
         (values) => {
             setProgress(0);
 
+            const getBankAccountData = () => {
+                if (bankAccountSource !== 'manual') {
+                    const fieldName = BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource];
+                    const fieldValue = values[fieldName];
+                    if (fieldValue) {
+                        return { [fieldName]: fieldValue };
+                    }
+                }
+                return {
+                    target_iban: values.target_iban,
+                    target_name: values.target_name,
+                };
+            };
+
             const data = {
                 description: values.description,
-                target_iban: values.target_iban,
-                target_name: values.target_name,
+                ...getBankAccountData(),
                 amount: values.allocate_by === 'custom' ? values.amount : undefined,
                 amount_preset_id: values.allocate_by === 'predefined' ? values.amount_preset_id : undefined,
                 ...{
@@ -114,7 +204,7 @@ export default function ModalPayoutEdit({
 
             const promise = transaction
                 ? payoutTransactionService.update(organization.id, transaction.address, data)
-                : payoutTransactionService.store(organization.id, { fund_id: fund.id, ...data });
+                : payoutTransactionService.store(organization.id, { fund_id: fund?.id, ...data });
 
             promise
                 .then(() => {
@@ -139,9 +229,14 @@ export default function ModalPayoutEdit({
 
     return (
         <div
-            className={`modal modal-animated modal-voucher-create ${
-                modal.loading ? 'modal-loading' : ''
-            } ${className}`}>
+            className={classNames(
+                'modal',
+                'modal-animated',
+                'modal-voucher-create',
+                modal.loading && 'modal-loading',
+                className,
+            )}
+            data-dusk="payoutCreateModal">
             <div className="modal-backdrop" onClick={modal.close} />
 
             <form className="modal-window form" onSubmit={form.submit}>
@@ -153,6 +248,7 @@ export default function ModalPayoutEdit({
                         <FormGroup
                             required={true}
                             label={translate('modals.modal_payout_create.labels.fund')}
+                            info={translate('modals.modal_payout_create.info.fund')}
                             input={(id) => (
                                 <SelectControl
                                     id={id}
@@ -161,7 +257,13 @@ export default function ModalPayoutEdit({
                                     disabled={!!transaction?.id}
                                     onChange={(fund: Fund) => {
                                         setFund(fund);
-                                        form.update({ allocate_by: amountOptions?.[0]?.key });
+                                        form.update({
+                                            allocate_by: getDefaultAllocateBy(fund),
+                                            amount_preset_id: fund?.amount_presets?.[0]?.id,
+                                            ...resetBankAccountIds(),
+                                            target_iban: '',
+                                            target_name: '',
+                                        });
                                     }}
                                     options={funds}
                                     allowSearch={false}
@@ -174,6 +276,7 @@ export default function ModalPayoutEdit({
                         <FormGroup
                             required={true}
                             label={translate('modals.modal_payout_create.labels.allocate_by')}
+                            info={translate('modals.modal_payout_create.info.allocate_by')}
                             input={(id) => (
                                 <SelectControl
                                     id={id}
@@ -191,6 +294,14 @@ export default function ModalPayoutEdit({
                         <FormGroup
                             required={true}
                             label={translate('modals.modal_payout_create.labels.amount')}
+                            info={translate('modals.modal_payout_create.info.amount')}
+                            hint={
+                                form.values.allocate_by === 'custom' &&
+                                fund?.custom_amount_min &&
+                                fund?.custom_amount_max
+                                    ? `Minimaal ${currencyFormat(Number(fund.custom_amount_min))} en maximaal ${currencyFormat(Number(fund.custom_amount_max))}`
+                                    : undefined
+                            }
                             input={(id) =>
                                 form.values.allocate_by === 'custom' ? (
                                     <input
@@ -198,9 +309,10 @@ export default function ModalPayoutEdit({
                                         type={'number'}
                                         className="form-control"
                                         placeholder={translate('modals.modal_payout_create.labels.amount')}
+                                        data-dusk="payoutAmount"
                                         value={form.values.amount || ''}
                                         step=".01"
-                                        min="0.01"
+                                        min={fund?.custom_amount_min || '0.01'}
                                         max={fund?.custom_amount_max}
                                         onChange={(e) => form.update({ amount: e.target.value })}
                                     />
@@ -229,8 +341,10 @@ export default function ModalPayoutEdit({
                             <FormGroup
                                 required={true}
                                 label={translate('modals.modal_payout_create.labels.assign_by_type')}
-                                input={() => (
+                                info={translate('modals.modal_payout_create.info.assign_by_type')}
+                                input={(id) => (
                                     <SelectControl
+                                        id={id}
                                         value={assignType}
                                         propValue={'label'}
                                         onChange={setAssignType}
@@ -245,8 +359,16 @@ export default function ModalPayoutEdit({
                             <FormGroup
                                 required={true}
                                 label={assignType.inputLabel}
-                                input={() => (
+                                info={
+                                    assignType.key === 'email'
+                                        ? translate('modals.modal_payout_create.info.email')
+                                        : assignType.key === 'bsn'
+                                          ? translate('modals.modal_payout_create.info.bsn')
+                                          : undefined
+                                }
+                                input={(id) => (
                                     <input
+                                        id={id}
                                         className="form-control"
                                         placeholder={assignType.inputLabel}
                                         value={form.values[assignType.key] || ''}
@@ -257,15 +379,92 @@ export default function ModalPayoutEdit({
                             />
                         )}
 
+                        {!transaction && (
+                            <FormGroup
+                                required={true}
+                                label={translate('modals.modal_payout_create.labels.bank_account_source')}
+                                info={translate('modals.modal_payout_create.info.bank_account_source')}
+                                input={(id) => (
+                                    <SelectControl
+                                        id={id}
+                                        value={bankAccountSource}
+                                        propKey={'key'}
+                                        propValue={'label'}
+                                        dusk="payoutBankAccountSourceSelect"
+                                        onChange={(value: BankAccountSource) => {
+                                            setBankAccountSource(value);
+                                            form.update({
+                                                ...resetBankAccountIds(),
+                                                target_iban: '',
+                                                target_name: '',
+                                            });
+                                        }}
+                                        options={bankAccountSourceOptions}
+                                        allowSearch={false}
+                                    />
+                                )}
+                            />
+                        )}
+
+                        {!transaction && bankAccountSource !== 'manual' && (
+                            <FormGroup
+                                required={true}
+                                label={translate('modals.modal_payout_create.labels.bank_account')}
+                                info={translate('modals.modal_payout_create.info.bank_account')}
+                                input={(id) => (
+                                    <SelectControl
+                                        id={id}
+                                        value={form.values[BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource]] || null}
+                                        propKey={'id'}
+                                        propValue={'label'}
+                                        dusk="payoutBankAccountSelect"
+                                        onChange={(bank_account_id: number) => {
+                                            const selected = bankAccountOptions.find(
+                                                (option) => option.id === bank_account_id,
+                                            );
+
+                                            const updateData: {
+                                                fund_request_id?: number | null;
+                                                profile_bank_account_id?: number | null;
+                                                reimbursement_id?: number | null;
+                                                payout_transaction_id?: number | null;
+                                                target_iban: string;
+                                                target_name: string;
+                                            } = {
+                                                ...resetBankAccountIds(),
+                                                target_iban: selected?.iban || '',
+                                                target_name: selected?.iban_name || '',
+                                                [BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource]]: bank_account_id,
+                                            };
+
+                                            form.update(updateData);
+                                        }}
+                                        options={bankAccountOptions}
+                                        allowSearch={true}
+                                        disabled={bankAccountsLoading}
+                                    />
+                                )}
+                                error={
+                                    form.errors?.fund_request_id ||
+                                    form.errors?.profile_bank_account_id ||
+                                    form.errors?.reimbursement_id ||
+                                    form.errors?.payout_transaction_id
+                                }
+                            />
+                        )}
+
                         <FormGroup
-                            required={true}
+                            required={bankAccountSource === 'manual'}
                             label={translate('modals.modal_payout_create.labels.iban')}
+                            info={translate('modals.modal_payout_create.info.iban')}
                             input={(id) => (
                                 <input
                                     id={id}
                                     className="form-control"
                                     placeholder={translate('modals.modal_payout_create.labels.iban')}
+                                    data-dusk="payoutTargetIban"
                                     value={form.values.target_iban || ''}
+                                    disabled={!transaction && bankAccountSource !== 'manual'}
                                     onChange={(e) => form.update({ target_iban: e.target.value })}
                                 />
                             )}
@@ -273,14 +472,17 @@ export default function ModalPayoutEdit({
                         />
 
                         <FormGroup
-                            required={true}
+                            required={bankAccountSource === 'manual'}
                             label={translate('modals.modal_payout_create.labels.iban_name')}
+                            info={translate('modals.modal_payout_create.info.iban_name')}
                             input={(id) => (
                                 <input
                                     id={id}
                                     className="form-control"
                                     placeholder={translate('modals.modal_payout_create.labels.iban_name')}
+                                    data-dusk="payoutTargetName"
                                     value={form.values.target_name || ''}
+                                    disabled={!transaction && bankAccountSource !== 'manual'}
                                     onChange={(e) => form.update({ target_name: e.target.value })}
                                 />
                             )}
@@ -289,6 +491,7 @@ export default function ModalPayoutEdit({
 
                         <FormGroup
                             label={translate('modals.modal_payout_create.labels.description')}
+                            info={translate('modals.modal_payout_create.info.description')}
                             input={(id) => (
                                 <textarea
                                     id={id}
@@ -308,7 +511,7 @@ export default function ModalPayoutEdit({
                         {translate('modals.modal_payout_create.buttons.cancel')}
                     </button>
 
-                    <button type="submit" className="button button-primary">
+                    <button type="submit" className="button button-primary" data-dusk="payoutSubmit">
                         {translate('modals.modal_payout_create.buttons.submit')}
                     </button>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
index 8c1b6b0ac..1a08bf207 100644
--- a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
@@ -469,7 +469,7 @@ export default function ModalPayoutsUpload({
                 <div
                     className={classNames(
                         'modal-body',
-                        classNames(step === STEP_SET_UP ? 'modal-body-visible' : ''),
+                        classNames(step === STEP_SET_UP && 'modal-body-visible'),
                         'form',
                     )}>
                     {step == STEP_SET_UP && (
@@ -551,7 +551,7 @@ export default function ModalPayoutsUpload({
                                 </div>
 
                                 {csvProgress >= 2 && (
-                                    <div className={`csv-upload-progress ${csvProgress == 3 ? 'done' : ''}`}>
+                                    <div className={classNames('csv-upload-progress', csvProgress == 3 && 'done')}>
                                         <div className="csv-upload-icon">
                                             {csvProgress == 2 && <div className="mdi mdi-loading" />}
                                             {csvProgress == 3 && (
diff --git a/react/src/dashboard/components/modals/ModalPhotoUploader.tsx b/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
index 07d393bc3..707b5c7f0 100644
--- a/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
+++ b/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import ImageCropper, { ImageCropperPresetValue } from '../elements/image_cropper/ImageCropper';
+import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 import useAppConfigs from '../../hooks/useAppConfigs';
 import classNames from 'classnames';
 
@@ -132,27 +133,20 @@ export default function ModalPhotoUploader({
                                 <br />
                             </div>
                             <div className="form text-center">
-                                <label htmlFor="confirmation" className="checkbox">
-                                    <input
-                                        type="checkbox"
-                                        id="confirmation"
-                                        checked={confirmed}
-                                        onChange={(e) => setConfirmed(e.target.checked)}
-                                    />
-                                    <span className="checkbox-label">
-                                        <span className="checkbox-box">
-                                            <span className="mdi mdi-check" />
-                                        </span>
-                                        Ik beschik over&nbsp;
-                                        <a
-                                            target="_blank"
-                                            rel="noreferrer"
-                                            href="https://www.rijksoverheid.nl/onderwerpen/intellectueel-eigendom/vraag-en-antwoord/mag-ik-teksten-muziek-of-foto-s-van-anderen-gebruiken">
-                                            de rechten
-                                        </a>
-                                        &nbsp;van de afbeelding.
-                                    </span>
-                                </label>
+                                <CheckboxControl
+                                    id="confirmation"
+                                    checked={confirmed}
+                                    onChange={(_, checked) => setConfirmed(checked)}
+                                    className="checkbox">
+                                    Ik beschik over&nbsp;
+                                    <a
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        href="https://www.rijksoverheid.nl/onderwerpen/intellectueel-eigendom/vraag-en-antwoord/mag-ik-teksten-muziek-of-foto-s-van-anderen-gebruiken">
+                                        de rechten
+                                    </a>
+                                    &nbsp;van de afbeelding.
+                                </CheckboxControl>
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx b/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
index 1ab922a0c..3997a985f 100644
--- a/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
+++ b/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
@@ -8,9 +8,9 @@ import Fund from '../../props/models/Fund';
 import SelectControl from '../elements/select-control/SelectControl';
 import FormGroupInfo from '../elements/forms/elements/FormGroupInfo';
 import SelectControlOptionsFund from '../elements/select-control/templates/SelectControlOptionsFund';
-import FormError from '../elements/forms/errors/FormError';
 import usePreCheckService from '../../services/PreCheckService';
 import Implementation from '../../props/models/Implementation';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalPreCheckEditFundExclusions({
     modal,
@@ -117,18 +117,20 @@ export default function ModalPreCheckEditFundExclusions({
                         </div>
 
                         {!form.values.excluded && (
-                            <div className="form-group">
-                                <label className="form-label form-label-required">Uitleg</label>
-
-                                <textarea
-                                    className="form-control"
-                                    placeholder="Voeg omschrijving toe"
-                                    value={form.values.note}
-                                    onChange={(e) => form.update({ note: e.target.value })}
-                                />
-
-                                <FormError error={form.errors['exclusion.note']} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label="Uitleg"
+                                error={form.errors['exclusion.note']}
+                                input={(id) => (
+                                    <textarea
+                                        className="form-control"
+                                        id={id}
+                                        placeholder="Voeg omschrijving toe"
+                                        value={form.values.note}
+                                        onChange={(e) => form.update({ note: e.target.value })}
+                                    />
+                                )}
+                            />
                         )}
 
                         <div className="form-group">
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
index efc7cc961..77f6720d2 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
@@ -670,7 +670,10 @@ export default function ModalPrevalidationRequestsUpload({
 
                                 {csvProgress >= CSVProgress.uploading && (
                                     <div
-                                        className={`csv-upload-progress ${csvProgress == CSVProgress.uploaded ? 'done' : ''}`}>
+                                        className={classNames(
+                                            'csv-upload-progress',
+                                            csvProgress == CSVProgress.uploaded && 'done',
+                                        )}>
                                         <div className="csv-upload-icon">
                                             {csvProgress == CSVProgress.uploading && (
                                                 <div className="mdi mdi-loading" />
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index c052889f8..dbd8ef791 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -966,7 +966,10 @@ export default function ModalPrevalidationsUpload({
 
                                 {csvProgress >= CSVProgress.uploading && (
                                     <div
-                                        className={`csv-upload-progress ${csvProgress == CSVProgress.uploaded ? 'done' : ''}`}>
+                                        className={classNames(
+                                            'csv-upload-progress',
+                                            csvProgress == CSVProgress.uploaded && 'done',
+                                        )}>
                                         <div className="csv-upload-icon">
                                             {csvProgress == CSVProgress.uploading && (
                                                 <div className="mdi mdi-loading" />
diff --git a/react/src/dashboard/components/modals/ModalReimbursementCategoriesEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementCategoriesEdit.tsx
index 1b296cf81..29b6ea8e9 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementCategoriesEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementCategoriesEdit.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import BlockReimbursementCategories from '../elements/block-reimbursement-categories/BlockReimbursementCategories';
 
@@ -26,9 +27,13 @@ export default function ModalReimbursementCategoriesEdit({
 
     return (
         <div
-            className={`modal modal-lg modal-animated ${
-                modal.loading || !showModal ? 'modal-loading' : ''
-            } ${className}`}>
+            className={classNames(
+                'modal',
+                'modal-lg',
+                'modal-animated',
+                (modal.loading || !showModal) && 'modal-loading',
+                className,
+            )}>
             <div className="modal-backdrop" onClick={closeModal} />
 
             <div className="modal-window">
diff --git a/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
index bb3e9d25e..30e6abf8c 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import ReimbursementCategory from '../../props/models/ReimbursementCategory';
 import useFormBuilder from '../../hooks/useFormBuilder';
@@ -6,9 +7,9 @@ import { useReimbursementCategoryService } from '../../services/ReimbursementCat
 import useActiveOrganization from '../../hooks/useActiveOrganization';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import useSetProgress from '../../hooks/useSetProgress';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
 import usePushApiError from '../../hooks/usePushApiError';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalReimbursementCategoryEdit({
     modal,
@@ -63,7 +64,7 @@ export default function ModalReimbursementCategoryEdit({
     }, [modal, onCancel]);
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={closeModal} />
 
             <div className="modal-window">
@@ -72,16 +73,19 @@ export default function ModalReimbursementCategoryEdit({
                     <div className="modal-header">Declaratie categorie toevoegen</div>
                     <div className="modal-body modal-body-visible">
                         <div className="modal-section form">
-                            <div className="form-group">
-                                <label className="form-label">Categorie naam</label>
-                                <input
-                                    className="form-control"
-                                    defaultValue={form.values.name}
-                                    placeholder="Categorie naam"
-                                    onChange={(e) => form.update({ name: e.target.value })}
-                                />
-                                <FormError error={form.errors?.name} />
-                            </div>
+                            <FormGroup
+                                label="Categorie naam"
+                                error={form.errors?.name}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        id={id}
+                                        defaultValue={form.values.name}
+                                        placeholder="Categorie naam"
+                                        onChange={(e) => form.update({ name: e.target.value })}
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
 
diff --git a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
index 6cf05a0cd..7df24aa8a 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { ApiResponseSingle, ResponseError } from '../../props/ApiResponses';
 import Reimbursement from '../../props/models/Reimbursement';
@@ -14,6 +15,7 @@ import ReimbursementCategory from '../../props/models/ReimbursementCategory';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalReimbursementCategoriesEdit from '../modals/ModalReimbursementCategoriesEdit';
 import usePushApiError from '../../hooks/usePushApiError';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalReimbursementDetailsEdit({
     modal,
@@ -89,9 +91,13 @@ export default function ModalReimbursementDetailsEdit({
 
     return (
         <div
-            className={`modal modal-md modal-animated ${
-                modal.loading || !showModal ? 'modal-loading' : ''
-            } ${className}`}>
+            className={classNames(
+                'modal',
+                'modal-md',
+                'modal-animated',
+                (modal.loading || !showModal) && 'modal-loading',
+                className,
+            )}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <div className="modal-window">
@@ -103,16 +109,20 @@ export default function ModalReimbursementDetailsEdit({
                         <div className="modal-section">
                             {description && <div className="modal-text">{description}</div>}
 
-                            <div className="form-group">
-                                <label className="form-label form-label-required">Aanbieder</label>
-                                <input
-                                    className="form-control"
-                                    placeholder="Aanbieder"
-                                    value={form.values.provider_name}
-                                    onChange={(e) => form.update({ provider_name: e.target.value })}
-                                />
-                                <FormError error={form.errors.provider_name} />
-                            </div>
+                            <FormGroup
+                                required={true}
+                                label="Aanbieder"
+                                error={form.errors.provider_name}
+                                input={(id) => (
+                                    <input
+                                        className="form-control"
+                                        id={id}
+                                        placeholder="Aanbieder"
+                                        value={form.values.provider_name}
+                                        onChange={(e) => form.update({ provider_name: e.target.value })}
+                                    />
+                                )}
+                            />
 
                             <div className="form-group">
                                 <label className="form-label form-label-required">Categorie</label>
diff --git a/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx b/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
index 57fe9d7cd..57cab868a 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { ApiResponseSingle, ResponseError } from '../../props/ApiResponses';
 import Reimbursement from '../../props/models/Reimbursement';
@@ -10,6 +11,7 @@ import usePushSuccess from '../../hooks/usePushSuccess';
 import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 import Tooltip from '../elements/tooltip/Tooltip';
 import usePushApiError from '../../hooks/usePushApiError';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalReimbursementResolve({
     modal,
@@ -70,7 +72,7 @@ export default function ModalReimbursementResolve({
     );
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
             <div className="modal-window">
                 <form className="form" onSubmit={form.submit}>
@@ -92,34 +94,44 @@ export default function ModalReimbursementResolve({
                                     <br />
                                 </div>
 
-                                <div className="form-group">
-                                    <label className="form-label">Notitie</label>
-
-                                    <textarea
-                                        className="form-control r-n"
-                                        rows={3}
-                                        defaultValue={form.values.note}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                        placeholder="Voeg een persoonlijke notitie toe"
-                                    />
-                                </div>
+                                <FormGroup
+                                    label="Notitie"
+                                    input={(id) => (
+                                        <textarea
+                                            className="form-control r-n"
+                                            id={id}
+                                            rows={3}
+                                            defaultValue={form.values.note}
+                                            onChange={(e) => form.update({ note: e.target.value })}
+                                            placeholder="Voeg een persoonlijke notitie toe"
+                                        />
+                                    )}
+                                />
 
                                 {form.values.state == 'declined' && reimbursement.identity_email && (
-                                    <div className="form-group tooltipped tooltipped-inner">
-                                        <CheckboxControl
-                                            className={'checkbox-narrow'}
-                                            checked={showReason}
-                                            title={`Verstuur een bericht naar de deelnemer`}
-                                            onChange={() => {
-                                                setShowReason(!showReason);
-                                            }}
-                                        />
-                                        <Tooltip
-                                            text={
-                                                'U kunt alleen een bericht naar de deelnemer versturen als er een e-mailadres is opgegeven..'
-                                            }
-                                        />
-                                    </div>
+                                    <FormGroup
+                                        className="tooltipped tooltipped-inner"
+                                        input={() => (
+                                            <Fragment>
+                                                <CheckboxControl
+                                                    className={'checkbox-narrow'}
+                                                    checked={showReason}
+                                                    title={`Verstuur een bericht naar de deelnemer`}
+                                                    onChange={() => {
+                                                        setShowReason(!showReason);
+                                                    }}
+                                                />
+                                                <Tooltip
+                                                    text={
+                                                        <Fragment>
+                                                            U kunt alleen een bericht naar de deelnemer versturen als er
+                                                            een e-mailadres is opgegeven.
+                                                        </Fragment>
+                                                    }
+                                                />
+                                            </Fragment>
+                                        )}
+                                    />
                                 )}
 
                                 {form.values.state == 'declined' && reimbursement.identity_email && (
@@ -148,15 +160,19 @@ export default function ModalReimbursementResolve({
                                     <br />
                                 </div>
 
-                                <div className="form-group">
-                                    <label className="form-label">Notitie</label>
-                                    <textarea
-                                        className="form-control r-n"
-                                        rows={3}
-                                        defaultValue={form.values.note}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                        placeholder="Voeg een persoonlijke notitie toe"></textarea>
-                                </div>
+                                <FormGroup
+                                    label="Notitie"
+                                    input={(id) => (
+                                        <textarea
+                                            className="form-control r-n"
+                                            id={id}
+                                            rows={3}
+                                            defaultValue={form.values.note}
+                                            onChange={(e) => form.update({ note: e.target.value })}
+                                            placeholder="Voeg een persoonlijke notitie toe"
+                                        />
+                                    )}
+                                />
                             </div>
                         )}
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalReservationReject.tsx b/react/src/dashboard/components/modals/ModalReservationReject.tsx
index b233754dd..855e2c04c 100644
--- a/react/src/dashboard/components/modals/ModalReservationReject.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationReject.tsx
@@ -11,6 +11,7 @@ import useProductReservationService from '../../services/ProductReservationServi
 import usePushSuccess from '../../hooks/usePushSuccess';
 import usePushApiError from '../../hooks/usePushApiError';
 import { ResponseError } from '../../props/ApiResponses';
+import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 
 export default function ModalReservationReject({
     modal,
@@ -124,20 +125,12 @@ export default function ModalReservationReject({
                         <FormGroup
                             error={form.errors.share_note_by_email}
                             input={() => (
-                                <label className="checkbox checkbox-narrow">
-                                    <input
-                                        type="checkbox"
-                                        checked={form.values.share_note_by_email}
-                                        onChange={(e) => form.update({ share_note_by_email: e.target.checked })}
-                                        hidden={true}
-                                    />
-                                    <div className="checkbox-label">
-                                        <div className="checkbox-box">
-                                            <div className="mdi mdi-check" />
-                                        </div>
-                                        <span>Verstuur een bericht naar de inwoner</span>
-                                    </div>
-                                </label>
+                                <CheckboxControl
+                                    checked={form.values.share_note_by_email}
+                                    narrow={true}
+                                    onChange={(_, checked) => form.update({ share_note_by_email: checked })}
+                                    title="Verstuur een bericht naar de inwoner"
+                                />
                             )}
                         />
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalReservationUpload.tsx b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
index 1c2d3e494..4dd51e6f4 100644
--- a/react/src/dashboard/components/modals/ModalReservationUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
@@ -368,11 +368,12 @@ export default function ModalReservationUpload({
                                     </Fragment>
                                 )}
                                 {progress >= 2 && (
-                                    <div className={`csv-upload-progress ${progress === 3 ? 'done' : ''}`}>
+                                    <div className={classNames('csv-upload-progress', progress === 3 && 'done')}>
                                         <div
-                                            className={`csv-upload-icon ${
-                                                uploadedPartly ? 'csv-upload-icon-warning' : ''
-                                            }`}>
+                                            className={classNames(
+                                                'csv-upload-icon',
+                                                uploadedPartly && 'csv-upload-icon-warning',
+                                            )}>
                                             {progress == 2 && <div className="mdi mdi-loading" />}
                                             {progress == 3 && !uploadedPartly && <div className="mdi mdi-check" />}
                                             {progress == 3 && uploadedPartly && (
diff --git a/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx b/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
index 986fcc302..f140a32de 100644
--- a/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import Organization from '../../props/models/Organization';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ModalButton } from './elements/ModalButton';
 import { ResponseError } from '../../props/ApiResponses';
 import SelectControl from '../elements/select-control/SelectControl';
@@ -12,6 +12,7 @@ import useImplementationSocialMediaService from '../../services/ImplementationSo
 import usePushSuccess from '../../hooks/usePushSuccess';
 import useSetProgress from '../../hooks/useSetProgress';
 import usePushApiError from '../../hooks/usePushApiError';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalSocialMediaEdit({
     modal,
@@ -81,9 +82,14 @@ export default function ModalSocialMediaEdit({
 
     return (
         <div
-            className={`modal modal-md modal-animated modal-notification ${modal.loading ? 'modal-loading' : ''} ${
-                className || ''
-            }`}>
+            className={classNames(
+                'modal',
+                'modal-md',
+                'modal-animated',
+                'modal-notification',
+                modal.loading && 'modal-loading',
+                className,
+            )}>
             <div className="modal-backdrop" onClick={modal.close} />
             <form className="modal-window form" onSubmit={form.submit}>
                 <div className="modal-close mdi mdi-close" onClick={modal.close} />
@@ -91,49 +97,52 @@ export default function ModalSocialMediaEdit({
 
                 <div className="modal-body modal-body-visible">
                     <div className="modal-section">
-                        <div className="form-group">
-                            <label htmlFor="" className="form-label form-label-required">
-                                Kies soort
-                            </label>
-                            <SelectControl
-                                value={form.values.type}
-                                propKey={'key'}
-                                propValue={'name'}
-                                onChange={(type?: string) => form.update({ type })}
-                                options={socialMediaTypes}
-                            />
-                            <FormError error={form.errors.type} />
-                        </div>
+                        <FormGroup
+                            required={true}
+                            label="Kies soort"
+                            error={form.errors.type}
+                            input={(id) => (
+                                <SelectControl
+                                    id={id}
+                                    value={form.values.type}
+                                    propKey={'key'}
+                                    propValue={'name'}
+                                    onChange={(type?: string) => form.update({ type })}
+                                    options={socialMediaTypes}
+                                />
+                            )}
+                        />
 
-                        <div className="form-group">
-                            <label htmlFor="url" className="form-label form-label-required">
-                                URL
-                            </label>
-                            <input
-                                id="url"
-                                type="text"
-                                value={form.values.url}
-                                placeholder="URL"
-                                className="form-control"
-                                onChange={(e) => form.update({ url: e.target.value })}
-                            />
-                            <FormError error={form.errors.url} />
-                        </div>
+                        <FormGroup
+                            required={true}
+                            label="URL"
+                            error={form.errors.url}
+                            input={(id) => (
+                                <input
+                                    id={id}
+                                    type="text"
+                                    value={form.values.url}
+                                    placeholder="URL"
+                                    className="form-control"
+                                    onChange={(e) => form.update({ url: e.target.value })}
+                                />
+                            )}
+                        />
 
-                        <div className="form-group">
-                            <label htmlFor="url" className="form-label">
-                                Titel
-                            </label>
-                            <input
-                                id="url"
-                                type="text"
-                                value={form.values.title}
-                                placeholder="Titel"
-                                className="form-control"
-                                onChange={(e) => form.update({ title: e.target.value })}
-                            />
-                            <FormError error={form.errors.title} />
-                        </div>
+                        <FormGroup
+                            label="Titel"
+                            error={form.errors.title}
+                            input={(id) => (
+                                <input
+                                    id={id}
+                                    type="text"
+                                    value={form.values.title}
+                                    placeholder="Titel"
+                                    className="form-control"
+                                    onChange={(e) => form.update({ title: e.target.value })}
+                                />
+                            )}
+                        />
                     </div>
                 </div>
 
diff --git a/react/src/dashboard/components/modals/ModalSwitchBankConnectionAccount.tsx b/react/src/dashboard/components/modals/ModalSwitchBankConnectionAccount.tsx
index f44018f78..d0d129f13 100644
--- a/react/src/dashboard/components/modals/ModalSwitchBankConnectionAccount.tsx
+++ b/react/src/dashboard/components/modals/ModalSwitchBankConnectionAccount.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import { useBankConnectionService } from '../../services/BankConnectionService';
 import BankConnection from '../../props/models/BankConnection';
 import SelectControl from '../elements/select-control/SelectControl';
-import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalSwitchBankConnectionAccount({
     modal,
@@ -40,7 +41,7 @@ export default function ModalSwitchBankConnectionAccount({
     );
 
     return (
-        <div className={`modal modal-sm modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-sm', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
             <div className="modal-window">
                 <form className="form" onSubmit={form.submit}>
@@ -48,24 +49,23 @@ export default function ModalSwitchBankConnectionAccount({
                     <div className="modal-header">Selecteer bankrekeningnummer</div>
                     <div className="modal-body modal-body-visible">
                         <div className="modal-section">
-                            <div className="form-group">
-                                <label className="form-label" htmlFor="bank_connection_account_id">
-                                    IBAN
-                                </label>
-
-                                <SelectControl
-                                    value={form.values.bank_connection_account_id}
-                                    propValue={'monetary_account_iban'}
-                                    propKey={'id'}
-                                    onChange={(bank_connection_account_id: number) => {
-                                        form.update({ bank_connection_account_id });
-                                    }}
-                                    options={bankConnection.accounts}
-                                    allowSearch={false}
-                                />
-
-                                <FormError error={form.errors?.bank_connection_account_id} />
-                            </div>
+                            <FormGroup
+                                label="IBAN"
+                                error={form.errors?.bank_connection_account_id}
+                                input={(id) => (
+                                    <SelectControl
+                                        id={id}
+                                        value={form.values.bank_connection_account_id}
+                                        propValue={'monetary_account_iban'}
+                                        propKey={'id'}
+                                        onChange={(bank_connection_account_id: number) => {
+                                            form.update({ bank_connection_account_id });
+                                        }}
+                                        options={bankConnection.accounts}
+                                        allowSearch={false}
+                                    />
+                                )}
+                            />
                         </div>
                     </div>
 
diff --git a/react/src/dashboard/components/modals/ModalTransferOrganizationOwnership.tsx b/react/src/dashboard/components/modals/ModalTransferOrganizationOwnership.tsx
index 3021cb73f..944b4d26c 100644
--- a/react/src/dashboard/components/modals/ModalTransferOrganizationOwnership.tsx
+++ b/react/src/dashboard/components/modals/ModalTransferOrganizationOwnership.tsx
@@ -3,13 +3,13 @@ import { ModalState } from '../../modules/modals/context/ModalContext';
 import Organization from '../../props/models/Organization';
 import Employee from '../../props/models/Employee';
 import useFormBuilder from '../../hooks/useFormBuilder';
-import FormError from '../elements/forms/errors/FormError';
 import { ModalButton } from './elements/ModalButton';
 import { useOrganizationService } from '../../services/OrganizationService';
 import SelectControl from '../elements/select-control/SelectControl';
 import { ResponseError } from '../../props/ApiResponses';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalTransferOrganizationOwnership({
     modal,
@@ -70,23 +70,25 @@ export default function ModalTransferOrganizationOwnership({
                     <div className="modal-section">
                         <div className="row">
                             <div className="col col-lg-8 col-lg-offset-2 col-lg-12">
-                                <div className="form-group">
-                                    <label className="form-label form-label-required">
-                                        {translate('modals.modal_transfer_organization_ownership.labels.transfer_to')}
-                                    </label>
-                                    <SelectControl
-                                        value={form.values.employee_id?.toString()}
-                                        propKey={'id'}
-                                        propValue={'email'}
-                                        options={adminEmployees}
-                                        allowSearch={true}
-                                        dusk="employeesSelect"
-                                        onChange={(value?: number) => {
-                                            form.update({ employee_id: value });
-                                        }}
-                                    />
-                                    <FormError error={form.errors['employee']} />
-                                </div>
+                                <FormGroup
+                                    required={true}
+                                    label={translate('modals.modal_transfer_organization_ownership.labels.transfer_to')}
+                                    error={form.errors['employee']}
+                                    input={(id) => (
+                                        <SelectControl
+                                            id={id}
+                                            value={form.values.employee_id?.toString()}
+                                            propKey={'id'}
+                                            propValue={'email'}
+                                            options={adminEmployees}
+                                            allowSearch={true}
+                                            dusk="employeesSelect"
+                                            onChange={(value?: number) => {
+                                                form.update({ employee_id: value });
+                                            }}
+                                        />
+                                    )}
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalVoucherActivate.tsx b/react/src/dashboard/components/modals/ModalVoucherActivate.tsx
index 3a9b73a8a..01ccef405 100644
--- a/react/src/dashboard/components/modals/ModalVoucherActivate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherActivate.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import SponsorVoucher from '../../props/models/Sponsor/SponsorVoucher';
-import FormError from '../elements/forms/errors/FormError';
 import useTranslate from '../../hooks/useTranslate';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalVoucherActivate({
     modal,
@@ -24,7 +25,7 @@ export default function ModalVoucherActivate({
     });
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <form className="modal-window" onSubmit={form.submit}>
@@ -41,18 +42,21 @@ export default function ModalVoucherActivate({
                             <span />
                         </div>
 
-                        <div className="form-group">
-                            <div className="form-label">{translate('modals.modal_voucher_activation.labels.note')}</div>
-                            <textarea
-                                className="form-control r-n"
-                                maxLength={140}
-                                value={form.values.note}
-                                placeholder={translate('modals.modal_voucher_activation.placeholders.note')}
-                                onChange={(e) => form.update({ note: e.target.value })}
-                            />
-                            <div className="form-hint">{translate('modals.modal_voucher_activation.hints.note')}</div>
-                            <FormError error={form.errors?.note} />
-                        </div>
+                        <FormGroup
+                            label={translate('modals.modal_voucher_activation.labels.note')}
+                            hint={translate('modals.modal_voucher_activation.hints.note')}
+                            error={form.errors?.note}
+                            input={(id) => (
+                                <textarea
+                                    className="form-control r-n"
+                                    id={id}
+                                    maxLength={140}
+                                    value={form.values.note}
+                                    placeholder={translate('modals.modal_voucher_activation.placeholders.note')}
+                                    onChange={(e) => form.update({ note: e.target.value })}
+                                />
+                            )}
+                        />
                     </div>
                 </div>
 
diff --git a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
index fdafebda9..dd43c2425 100644
--- a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
@@ -376,7 +376,12 @@ export default function ModalVoucherCreate({
                                 <div
                                     className="modal-fields-group-title"
                                     onClick={() => setShowGeneralFields(!showGeneralFields)}>
-                                    <em className={`mdi ${showGeneralFields ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
+                                    <em
+                                        className={classNames(
+                                            'mdi',
+                                            showGeneralFields ? 'mdi-menu-down' : 'mdi-menu-right',
+                                        )}
+                                    />
                                     Algemeen
                                 </div>
 
@@ -510,11 +515,12 @@ export default function ModalVoucherCreate({
                                         {assignType.hasInput && (
                                             <div className="form-group">
                                                 <div
-                                                    className={`form-label form-label-required ${
-                                                        ['email', 'bsn'].includes(assignType.key)
-                                                            ? 'form-label-required'
-                                                            : ''
-                                                    }`}>
+                                                    className={classNames(
+                                                        'form-label',
+                                                        'form-label-required',
+                                                        ['email', 'bsn'].includes(assignType.key) &&
+                                                            'form-label-required',
+                                                    )}>
                                                     {assignType.inputLabel}
                                                 </div>
                                                 <input
@@ -713,7 +719,10 @@ export default function ModalVoucherCreate({
                                         className="modal-fields-group-title"
                                         onClick={() => setShowRecordFields(!showRecordFields)}>
                                         <em
-                                            className={`mdi ${showRecordFields ? 'mdi-menu-down' : 'mdi-menu-right'}`}
+                                            className={classNames(
+                                                'mdi',
+                                                showRecordFields ? 'mdi-menu-down' : 'mdi-menu-right',
+                                            )}
                                         />
                                         Persoonsgegevens
                                     </div>
diff --git a/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx b/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
index 0c83f33d3..f35293a2b 100644
--- a/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import SponsorVoucher from '../../props/models/Sponsor/SponsorVoucher';
-import FormError from '../elements/forms/errors/FormError';
 import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalDangerZone from './ModalDangerZone';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalVoucherDeactivation({
     modal,
@@ -113,29 +113,32 @@ export default function ModalVoucherDeactivation({
                             <span />
                         </div>
 
-                        <div className="form-group">
-                            <div className="form-label">
-                                {translate('modals.modal_voucher_deactivation.labels.note')}
-                            </div>
-                            <textarea
-                                className="form-control r-n"
-                                maxLength={140}
-                                value={form.values.note || ''}
-                                placeholder={translate('modals.modal_voucher_deactivation.placeholders.note')}
-                                onChange={(e) => form.update({ note: e.target.value })}
-                            />
-                            <div className="form-hint">{translate('modals.modal_voucher_activation.hints.note')}</div>
-                            <FormError error={form.errors?.note} />
-                        </div>
+                        <FormGroup
+                            label={translate('modals.modal_voucher_deactivation.labels.note')}
+                            hint={translate('modals.modal_voucher_activation.hints.note')}
+                            error={form.errors?.note}
+                            input={(id) => (
+                                <textarea
+                                    className="form-control r-n"
+                                    id={id}
+                                    maxLength={140}
+                                    value={form.values.note || ''}
+                                    placeholder={translate('modals.modal_voucher_deactivation.placeholders.note')}
+                                    onChange={(e) => form.update({ note: e.target.value })}
+                                />
+                            )}
+                        />
 
                         {hasEmail && (
-                            <div className="form-group">
-                                <CheckboxControl
-                                    title={'Informeer de gebruiker via een e-mailbericht.'}
-                                    checked={form.values.notify_by_email || false}
-                                    onChange={(e) => form.update({ notify_by_email: e.target.checked })}
-                                />
-                            </div>
+                            <FormGroup
+                                input={() => (
+                                    <CheckboxControl
+                                        title={'Informeer de gebruiker via een e-mailbericht.'}
+                                        checked={form.values.notify_by_email || false}
+                                        onChange={(e) => form.update({ notify_by_email: e.target.checked })}
+                                    />
+                                )}
+                            />
                         )}
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx b/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
index dc2e98810..33ef50d59 100644
--- a/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import FormError from '../elements/forms/errors/FormError';
@@ -157,7 +158,14 @@ export default function ModalVoucherQRCode({
     }, [assignType.key, updateForm]);
 
     return (
-        <div className={`modal modal-animated modal-voucher_qr ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div
+            className={classNames(
+                'modal',
+                'modal-animated',
+                'modal-voucher_qr',
+                modal.loading && 'modal-loading',
+                className,
+            )}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             {!assigning && !success && (
diff --git a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
index 8f966f71b..6f85bdd27 100644
--- a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import useSetProgress from '../../hooks/useSetProgress';
 import SelectControl from '../elements/select-control/SelectControl';
-import FormError from '../elements/forms/errors/FormError';
 import SponsorVoucher from '../../props/models/Sponsor/SponsorVoucher';
 import Organization from '../../props/models/Organization';
 import { useRecordTypeService } from '../../services/RecordTypeService';
@@ -16,6 +16,7 @@ import DatePickerControl from '../elements/forms/controls/DatePickerControl';
 import usePushApiError from '../../hooks/usePushApiError';
 import { ResponseError } from '../../props/ApiResponses';
 import { ProfileRecordType } from '../../props/models/Sponsor/SponsorIdentity';
+import FormGroup from '../elements/forms/elements/FormGroup';
 
 export default function ModalVoucherRecordEdit({
     modal,
@@ -118,7 +119,7 @@ export default function ModalVoucherRecordEdit({
     }, [formUpdate, recordTypes]);
 
     return (
-        <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
+        <div className={classNames('modal', 'modal-md', 'modal-animated', modal.loading && 'modal-loading', className)}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             <form className="modal-window form" onSubmit={form.submit}>
@@ -129,56 +130,66 @@ export default function ModalVoucherRecordEdit({
                     <div className="modal-section">
                         <div className="row">
                             <div className="col-lg-10 col-offset-lg-1">
-                                <div className="form-group">
-                                    <div className="form-label form-label-required">Soort persoonsgegeven</div>
-
-                                    <SelectControl
-                                        className="form-control"
-                                        value={form.values.record_type_key}
-                                        propKey={'key'}
-                                        options={recordTypes}
-                                        allowSearch={false}
-                                        disabled={!!record || (recordTypes.length == 1 && recordTypes[0].key == null)}
-                                        onChange={(record_type_key: ProfileRecordType) => {
-                                            form.update({ record_type_key: record_type_key });
-                                        }}
-                                    />
-
-                                    <FormError error={form.errors?.record_type_key} />
-                                </div>
-
-                                <div className="form-group">
-                                    <div className="form-label form-label-required">Persoonsgegeven</div>
-
-                                    {form.values.record_type_key != 'birth_date' ? (
-                                        <input
-                                            type="text"
+                                <FormGroup
+                                    required={true}
+                                    label="Soort persoonsgegeven"
+                                    error={form.errors?.record_type_key}
+                                    input={(id) => (
+                                        <SelectControl
+                                            id={id}
                                             className="form-control"
-                                            value={form.values.value || ''}
-                                            placeholder="Value"
-                                            onChange={(e) => form.update({ value: e.target.value })}
+                                            value={form.values.record_type_key}
+                                            propKey={'key'}
+                                            options={recordTypes}
+                                            allowSearch={false}
+                                            disabled={
+                                                !!record || (recordTypes.length == 1 && recordTypes[0].key == null)
+                                            }
+                                            onChange={(record_type_key: ProfileRecordType) => {
+                                                form.update({ record_type_key: record_type_key });
+                                            }}
                                         />
-                                    ) : (
-                                        <DatePickerControl
-                                            value={dateParse(form.values.value)}
-                                            placeholder={'yyyy-MM-dd'}
-                                            onChange={(value: Date) => form.update({ value: dateFormat(value) })}
+                                    )}
+                                />
+
+                                <FormGroup
+                                    required={true}
+                                    label="Persoonsgegeven"
+                                    error={form.errors?.value}
+                                    input={(id) =>
+                                        form.values.record_type_key != 'birth_date' ? (
+                                            <input
+                                                type="text"
+                                                id={id}
+                                                className="form-control"
+                                                value={form.values.value || ''}
+                                                placeholder="Value"
+                                                onChange={(e) => form.update({ value: e.target.value })}
+                                            />
+                                        ) : (
+                                            <DatePickerControl
+                                                id={id}
+                                                value={dateParse(form.values.value)}
+                                                placeholder={'yyyy-MM-dd'}
+                                                onChange={(value: Date) => form.update({ value: dateFormat(value) })}
+                                            />
+                                        )
+                                    }
+                                />
+
+                                <FormGroup
+                                    label="Notitie"
+                                    error={form.errors?.note}
+                                    input={(id) => (
+                                        <textarea
+                                            id={id}
+                                            placeholder="Note"
+                                            className="form-control r-n"
+                                            value={form.values.note || ''}
+                                            onChange={(e) => form.update({ note: e.target.value })}
                                         />
                                     )}
-                                    <FormError error={form.errors?.value} />
-                                </div>
-
-                                <div className="form-group">
-                                    <div className="form-label">Notitie</div>
-                                    <textarea
-                                        placeholder="Note"
-                                        className="form-control r-n"
-                                        value={form.values.note || ''}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                    />
-
-                                    <FormError error={form.errors?.note} />
-                                </div>
+                                />
 
                                 <div className="form-group">
                                     <div className="form-label" />
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
index ec9115538..9c41d710a 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../modules/modals/context/ModalContext';
 import { hasPermission } from '../../../helpers/utils';
 import useFormBuilder from '../../../hooks/useFormBuilder';
@@ -7,20 +8,40 @@ import Organization, { Permission } from '../../../props/models/Organization';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
 import { useOrganizationService } from '../../../services/OrganizationService';
-import { useReimbursementsService } from '../../../services/ReimbursementService';
+import usePayoutBankAccounts, { BankAccountSource } from '../../../hooks/usePayoutBankAccounts';
 import useVoucherService from '../../../services/VoucherService';
 import SelectControl from '../../elements/select-control/SelectControl';
 import FormError from '../../elements/forms/errors/FormError';
 import { currencyFormat } from '../../../helpers/string';
 import ModalVoucherTransactionPreview from './ModalVoucherTransactionPreview';
-import Reimbursement from '../../../props/models/Reimbursement';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { ResponseError } from '../../../props/ApiResponses';
 import InfoBox from '../../elements/info-box/InfoBox';
-
-type ReimbursementLocale = Partial<Reimbursement & { id?: number; name: string }>;
+import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
+
+const resetBankAccountIds = () => ({
+    fund_request_id: null,
+    profile_bank_account_id: null,
+    reimbursement_id: null,
+    payout_transaction_id: null,
+});
+
+const BANK_ACCOUNT_SOURCE_FIELDS: Record<
+    Exclude<BankAccountSource, 'manual'>,
+    keyof {
+        fund_request_id?: number;
+        profile_bank_account_id?: number;
+        reimbursement_id?: number;
+        payout_transaction_id?: number;
+    }
+> = {
+    fund_request: 'fund_request_id',
+    profile_bank_account: 'profile_bank_account_id',
+    reimbursement: 'reimbursement_id',
+    payout: 'payout_transaction_id',
+};
 
 export default function ModalVoucherTransaction({
     modal,
@@ -45,27 +66,10 @@ export default function ModalVoucherTransaction({
     const fundService = useFundService();
     const voucherService = useVoucherService();
     const organizationService = useOrganizationService();
-    const reimbursementService = useReimbursementsService();
-
     const [fund, setFund] = useState<Fund>(null);
     const [state, setState] = useState<'form' | 'finish' | 'preview'>('form');
     const [providers, setProviders] = useState<Array<Partial<Organization>>>([]);
-    const [reimbursements, setReimbursements] = useState<Array<ReimbursementLocale>>([]);
-    const [reimbursement, setReimbursement] = useState<ReimbursementLocale>(null);
-
-    const ibanSources = useMemo(() => {
-        const manualSource = {
-            key: 'manual',
-            name: translate('modals.modal_voucher_transaction.labels.manual_source'),
-        };
-
-        const reimbursementSource = {
-            key: 'reimbursement',
-            name: translate('modals.modal_voucher_transaction.labels.reimbursement_source'),
-        };
-
-        return [manualSource, ...(reimbursements?.length > 0 ? [reimbursementSource] : [])];
-    }, [reimbursements?.length, translate]);
+    const [bankAccountSource, setBankAccountSource] = useState<BankAccountSource>('manual');
 
     const targets = useMemo(() => {
         const targetProvider = {
@@ -89,6 +93,35 @@ export default function ModalVoucherTransaction({
         );
     }, [fund?.allow_direct_payments, fund?.allow_reimbursements, organization]);
 
+    const bankAccountSourceOptions = useMemo(() => {
+        return [
+            {
+                key: 'manual',
+                name: translate('modals.modal_voucher_transaction.options.bank_account_source_manual'),
+            },
+            {
+                key: 'fund_request',
+                name: translate('modals.modal_voucher_transaction.options.bank_account_source_fund_request'),
+            },
+            {
+                key: 'profile_bank_account',
+                name: translate('modals.modal_voucher_transaction.options.bank_account_source_profile_bank_account'),
+            },
+            ...(canUseReimbursements
+                ? [
+                      {
+                          key: 'reimbursement',
+                          name: translate('modals.modal_voucher_transaction.options.bank_account_source_reimbursement'),
+                      },
+                  ]
+                : []),
+            {
+                key: 'payout',
+                name: translate('modals.modal_voucher_transaction.options.bank_account_source_payout'),
+            },
+        ];
+    }, [canUseReimbursements, translate]);
+
     const amountLimit = useMemo(() => {
         if (!fund) {
             return null;
@@ -113,9 +146,11 @@ export default function ModalVoucherTransaction({
         amount?: string;
         voucher_id?: number;
         organization_id?: number;
-        iban_source?: 'manual' | 'reimbursement';
-        reimbursement_id?: number;
-        target_reimbursement_id?: number;
+        bank_account_source?: BankAccountSource;
+        fund_request_id?: number | null;
+        profile_bank_account_id?: number | null;
+        reimbursement_id?: number | null;
+        payout_transaction_id?: number | null;
     }>(
         {
             note: '',
@@ -124,8 +159,8 @@ export default function ModalVoucherTransaction({
             target: target || targets[0]?.key,
             voucher_id: voucher.id,
             organization_id: providers[0]?.id,
-            iban_source: 'manual',
-            reimbursement_id: null,
+            bank_account_source: bankAccountSource,
+            ...resetBankAccountIds(),
         },
 
         (values) => {
@@ -135,15 +170,13 @@ export default function ModalVoucherTransaction({
             if (target === 'provider') {
                 Object.assign(data, { organization_id: values.organization_id });
             } else if (form.values.target === 'iban') {
-                const { iban_source, target_iban, target_name } = form.values;
-                const target_reimbursement_id = reimbursement?.id || null;
+                const { bank_account_source, target_iban, target_name } = form.values;
 
-                if (iban_source == 'manual') {
+                if (bank_account_source === 'manual') {
                     Object.assign(data, { target_iban, target_name });
-                }
-
-                if (iban_source == 'reimbursement') {
-                    Object.assign(data, { target_reimbursement_id });
+                } else if (bank_account_source) {
+                    const fieldName = BANK_ACCOUNT_SOURCE_FIELDS[bank_account_source];
+                    Object.assign(data, { [fieldName]: form.values[fieldName] });
                 }
             }
 
@@ -169,9 +202,30 @@ export default function ModalVoucherTransaction({
 
     const { update: updateForm } = form;
 
+    const { bankAccounts, bankAccountsLoading, bankAccountOptions } = usePayoutBankAccounts({
+        organizationId: organization?.id,
+        fundId: fund?.id,
+        identityId: voucher?.identity_id,
+        identityRequired: true,
+        bankAccountSource,
+        enabled: form.values.target === 'iban',
+        placeholderLabel: translate('modals.modal_voucher_transaction.options.bank_account_select_placeholder'),
+    });
+
+    const selectedBankAccount = useMemo(() => {
+        if (bankAccountSource === 'manual') {
+            return null;
+        }
+
+        const fieldName = BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource];
+        const selectedId = form.values[fieldName];
+
+        return bankAccounts?.find((account) => account.type_id === selectedId) || null;
+    }, [bankAccountSource, bankAccounts, form.values]);
+
     const submitButtonDisabled = useMemo(() => {
-        const { target, organization_id, target_iban, target_name } = form.values;
-        const { amount, iban_source } = form.values;
+        const { target, organization_id, target_iban, target_name, bank_account_source } = form.values;
+        const { amount } = form.values;
 
         if (target === 'provider') {
             return !organization_id || !amount || parseFloat(amount) === 0;
@@ -182,11 +236,20 @@ export default function ModalVoucherTransaction({
         }
 
         if (target === 'iban') {
-            return iban_source === 'manual' ? !target_iban || !target_name || !amount : !reimbursement?.id || !amount;
+            if (bank_account_source === 'manual') {
+                return !target_iban || !target_name || !amount;
+            }
+
+            if (bank_account_source) {
+                const fieldName = BANK_ACCOUNT_SOURCE_FIELDS[bank_account_source];
+                return !form.values[fieldName] || !amount;
+            }
+
+            return true;
         }
 
         return true;
-    }, [form.values, reimbursement?.id]);
+    }, [form.values]);
 
     const fetchProviders = useCallback(() => {
         organizationService
@@ -208,25 +271,6 @@ export default function ModalVoucherTransaction({
             });
     }, [organization.id, organizationService, voucher.fund_id, updateForm]);
 
-    const fetchReimbursements = useCallback(() => {
-        reimbursementService
-            .list(organization.id, {
-                fund_id: voucher.fund_id,
-                identity_address: voucher.identity_address,
-                state: 'approved',
-                per_page: 100,
-            })
-            .then((res) => {
-                const list = [
-                    { id: null, name: 'Selecteer declaratie' },
-                    ...res.data.data.map((item) => ({ ...item, name: `NR: ${item.code} IBAN: ${item.iban}` })),
-                ];
-
-                setReimbursements(list);
-                setReimbursement(list[0]);
-            });
-    }, [organization.id, reimbursementService, voucher.fund_id, voucher.identity_address]);
-
     const fetchVoucherFund = useCallback(() => {
         setProgress(0);
 
@@ -236,12 +280,6 @@ export default function ModalVoucherTransaction({
             .finally(() => setProgress(100));
     }, [fundService, setProgress, voucher]);
 
-    useEffect(() => {
-        if (canUseReimbursements) {
-            fetchReimbursements();
-        }
-    }, [canUseReimbursements, fetchReimbursements]);
-
     useEffect(() => {
         fetchProviders();
     }, [fetchProviders]);
@@ -250,15 +288,48 @@ export default function ModalVoucherTransaction({
         fetchVoucherFund();
     }, [fetchVoucherFund]);
 
+    useEffect(() => {
+        if (canUseReimbursements && bankAccountSource === 'manual') {
+            const nextSource: BankAccountSource = 'reimbursement';
+
+            setBankAccountSource(nextSource);
+            updateForm({
+                bank_account_source: nextSource,
+                ...resetBankAccountIds(),
+                target_iban: '',
+                target_name: '',
+            });
+            return;
+        }
+
+        if (!canUseReimbursements && bankAccountSource === 'reimbursement') {
+            const nextSource: BankAccountSource = 'manual';
+
+            setBankAccountSource(nextSource);
+            updateForm({
+                bank_account_source: nextSource,
+                ...resetBankAccountIds(),
+                target_iban: '',
+                target_name: '',
+            });
+        }
+    }, [bankAccountSource, canUseReimbursements, updateForm]);
+
     if (!fund) {
         return null;
     }
 
     return (
         <div
-            className={`modal modal-md modal-animated modal-voucher-transaction ${
-                modal.loading ? 'modal-loading' : ''
-            } ${className || ''}`}>
+            className={classNames(
+                'modal',
+                'modal-md',
+                'modal-animated',
+                'modal-voucher-transaction',
+                modal.loading && 'modal-loading',
+                className,
+            )}
+            data-dusk="voucherTransactionModal">
             <div className="modal-backdrop" onClick={modal.close} />
 
             {state == 'form' && (
@@ -270,7 +341,7 @@ export default function ModalVoucherTransaction({
                         <div className="modal-header">{translate('modals.modal_voucher_transaction.top_up_title')}</div>
                     )}
 
-                    <div className="modal-body modal-body-visible">
+                    <div className="modal-body">
                         <div className="modal-section modal-section-pad">
                             {targets.length > 1 && form.values.target !== 'top_up' && (
                                 <div className="form-group">
@@ -283,6 +354,7 @@ export default function ModalVoucherTransaction({
                                         propKey={'key'}
                                         options={targets}
                                         allowSearch={false}
+                                        dusk="voucherTransactionTargetSelect"
                                         onChange={(target: string) => {
                                             form.update({ target });
                                         }}
@@ -309,98 +381,109 @@ export default function ModalVoucherTransaction({
                                 </div>
                             )}
 
-                            {ibanSources && canUseReimbursements && form.values.target === 'iban' && (
+                            {form.values.target === 'iban' && (
                                 <div className="form-group">
                                     <div className="form-label form-label-required">
-                                        {translate('modals.modal_voucher_transaction.labels.iban_source')}
+                                        {translate('modals.modal_voucher_transaction.labels.bank_account_source')}
                                     </div>
                                     <SelectControl
                                         className="form-control"
-                                        value={form.values.iban_source}
+                                        value={bankAccountSource}
                                         propKey={'key'}
-                                        options={ibanSources}
+                                        options={bankAccountSourceOptions}
                                         allowSearch={false}
-                                        onChange={(iban_source: 'manual' | 'reimbursement') => {
-                                            form.update({ iban_source: iban_source });
+                                        dusk="voucherTransactionBankAccountSourceSelect"
+                                        onChange={(source: BankAccountSource) => {
+                                            setBankAccountSource(source);
+                                            form.update({
+                                                bank_account_source: source,
+                                                ...resetBankAccountIds(),
+                                                target_iban: '',
+                                                target_name: '',
+                                            });
                                         }}
                                     />
-                                    <FormError error={form.errors?.iban_source} />
+                                    <FormError error={form.errors?.bank_account_source} />
                                 </div>
                             )}
 
-                            {ibanSources &&
-                                form.values.iban_source === 'reimbursement' &&
-                                form.values.target === 'iban' && (
-                                    <div className="form-group">
-                                        <div className="form-label form-label-required">
-                                            {translate('modals.modal_voucher_transaction.labels.reimbursement')}
-                                        </div>
-                                        <SelectControl
-                                            className="form-control"
-                                            value={reimbursement}
-                                            options={reimbursements}
-                                            allowSearch={false}
-                                            onChange={setReimbursement}
-                                        />
-                                        <FormError error={form.errors?.iban_source} />
+                            {form.values.target === 'iban' && bankAccountSource !== 'manual' && (
+                                <div className="form-group">
+                                    <div className="form-label form-label-required">
+                                        {translate('modals.modal_voucher_transaction.labels.bank_account')}
                                     </div>
-                                )}
+                                    <SelectControl
+                                        className="form-control"
+                                        value={form.values[BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource]] || null}
+                                        propKey={'id'}
+                                        propValue={'label'}
+                                        options={bankAccountOptions}
+                                        allowSearch={true}
+                                        dusk="voucherTransactionBankAccountSelect"
+                                        onChange={(bank_account_id: number) => {
+                                            const selected = bankAccountOptions.find(
+                                                (option) => option.id === bank_account_id,
+                                            );
+
+                                            form.update({
+                                                ...resetBankAccountIds(),
+                                                target_iban: selected?.iban || '',
+                                                target_name: selected?.iban_name || '',
+                                                [BANK_ACCOUNT_SOURCE_FIELDS[bankAccountSource]]: bank_account_id,
+                                            });
+                                        }}
+                                        disabled={bankAccountsLoading}
+                                    />
+                                    <FormError
+                                        error={
+                                            form.errors?.fund_request_id ||
+                                            form.errors?.profile_bank_account_id ||
+                                            form.errors?.reimbursement_id ||
+                                            form.errors?.payout_transaction_id
+                                        }
+                                    />
+                                </div>
+                            )}
 
-                            {form.values.target === 'iban' &&
-                                (form.values.iban_source === 'manual' || reimbursement?.id) && (
-                                    <div className="form-group">
-                                        <div className="form-label form-label-required">
-                                            {translate('modals.modal_voucher_transaction.labels.target_iban')}
-                                        </div>
-
-                                        {form.values.iban_source === 'manual' ? (
-                                            <input
-                                                type={'text'}
-                                                className="form-control"
-                                                defaultValue={form.values.target_iban || ''}
-                                                placeholder="IBAN-nummer"
-                                                onChange={(e) => form.update({ target_iban: e.target.value })}
-                                            />
-                                        ) : (
-                                            <input
-                                                type={'text'}
-                                                className="form-control"
-                                                value={reimbursement.iban || ''}
-                                                disabled={true}
-                                            />
-                                        )}
-
-                                        <FormError error={form.errors?.target_iban} />
+                            {form.values.target === 'iban' && (
+                                <div className="form-group">
+                                    <div className="form-label form-label-required">
+                                        {translate('modals.modal_voucher_transaction.labels.target_iban')}
                                     </div>
-                                )}
 
-                            {form.values.target === 'iban' &&
-                                (form.values.iban_source === 'manual' || reimbursement?.id) && (
-                                    <div className="form-group">
-                                        <div className="form-label form-label-required">
-                                            {translate('modals.modal_voucher_transaction.labels.target_name')}
-                                        </div>
-
-                                        {form.values.iban_source === 'manual' ? (
-                                            <input
-                                                type={'text'}
-                                                className="form-control"
-                                                defaultValue={form.values.target_name || ''}
-                                                placeholder="IBAN-naam"
-                                                onChange={(e) => form.update({ target_name: e.target.value })}
-                                            />
-                                        ) : (
-                                            <input
-                                                type={'text'}
-                                                className="form-control"
-                                                value={reimbursement.iban_name || ''}
-                                                disabled={true}
-                                            />
-                                        )}
-
-                                        <FormError error={form.errors?.target_name} />
+                                    <input
+                                        type={'text'}
+                                        className="form-control"
+                                        value={form.values.target_iban || ''}
+                                        placeholder="IBAN-nummer"
+                                        onChange={(e) => form.update({ target_iban: e.target.value })}
+                                        disabled={bankAccountSource !== 'manual'}
+                                        data-dusk="voucherTransactionTargetIban"
+                                    />
+
+                                    <FormError error={form.errors?.target_iban} />
+                                </div>
+                            )}
+
+                            {form.values.target === 'iban' && (
+                                <div className="form-group">
+                                    <div className="form-label form-label-required">
+                                        {translate('modals.modal_voucher_transaction.labels.target_name')}
                                     </div>
-                                )}
+
+                                    <input
+                                        type={'text'}
+                                        className="form-control"
+                                        value={form.values.target_name || ''}
+                                        placeholder="IBAN-naam"
+                                        onChange={(e) => form.update({ target_name: e.target.value })}
+                                        disabled={bankAccountSource !== 'manual'}
+                                        data-dusk="voucherTransactionTargetName"
+                                    />
+
+                                    <FormError error={form.errors?.target_name} />
+                                </div>
+                            )}
 
                             <div className="form-group">
                                 <div className="form-label form-label-required">
@@ -416,6 +499,7 @@ export default function ModalVoucherTransaction({
                                     max={amountLimit}
                                     placeholder={translate('modals.modal_voucher_transaction.labels.amount')}
                                     onChange={(e) => form.update({ amount: e.target.value })}
+                                    data-dusk="voucherTransactionAmount"
                                 />
                                 {!form.errors?.amount ? (
                                     <div className="form-hint">
@@ -453,19 +537,11 @@ export default function ModalVoucherTransaction({
                                     <div className="form-group">
                                         <div className="form-label" />
 
-                                        <label className="checkbox">
-                                            <input
-                                                type="checkbox"
-                                                checked={form.values.note_shared}
-                                                onChange={(e) => form.update({ note_shared: e.target.checked })}
-                                            />
-                                            <div className="checkbox-label">
-                                                <div className="checkbox-box">
-                                                    <div className="mdi mdi-check" />
-                                                </div>
-                                                {translate('modals.modal_voucher_transaction.labels.note_shared')}
-                                            </div>
-                                        </label>
+                                        <CheckboxControl
+                                            checked={form.values.note_shared}
+                                            onChange={(_, checked) => form.update({ note_shared: checked })}
+                                            title={translate('modals.modal_voucher_transaction.labels.note_shared')}
+                                        />
 
                                         <FormError error={form.errors?.note_shared} />
                                     </div>
@@ -483,7 +559,11 @@ export default function ModalVoucherTransaction({
                         <button type="button" className="button button-default" onClick={modal.close}>
                             {translate('modals.modal_voucher_transaction.buttons.cancel')}
                         </button>
-                        <button type="submit" className="button button-primary" disabled={submitButtonDisabled}>
+                        <button
+                            type="submit"
+                            className="button button-primary"
+                            data-dusk="voucherTransactionSubmit"
+                            disabled={submitButtonDisabled}>
                             {translate('modals.modal_voucher_transaction.buttons.submit')}
                         </button>
                     </div>
@@ -508,7 +588,8 @@ export default function ModalVoucherTransaction({
                             formValues={form.values}
                             providers={providers}
                             organization={organization}
-                            reimbursement={reimbursement}
+                            bankAccount={selectedBankAccount}
+                            bankAccountSource={bankAccountSource}
                         />
 
                         <div className="modal-section">
@@ -523,7 +604,11 @@ export default function ModalVoucherTransaction({
                             {translate('modals.modal_voucher_transaction.buttons.cancel')}
                         </button>
 
-                        <button type="button" className="button button-primary" onClick={() => form.submit()}>
+                        <button
+                            type="button"
+                            className="button button-primary"
+                            data-dusk="voucherTransactionPreviewSubmit"
+                            onClick={() => form.submit()}>
                             {translate('modals.modal_voucher_transaction.buttons.submit')}
                         </button>
                     </div>
@@ -562,12 +647,17 @@ export default function ModalVoucherTransaction({
                             formValues={form.values}
                             organization={organization}
                             providers={providers}
-                            reimbursement={reimbursement}
+                            bankAccount={selectedBankAccount}
+                            bankAccountSource={bankAccountSource}
                         />
                     </div>
 
                     <div className="modal-footer modal-footer-light text-centers">
-                        <button type="button" className="button button-primary" onClick={modal.close}>
+                        <button
+                            type="button"
+                            className="button button-primary"
+                            data-dusk="voucherTransactionClose"
+                            onClick={modal.close}>
                             {translate('modals.modal_voucher_transaction.buttons.close')}
                         </button>
                     </div>
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransactionPreview.tsx b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransactionPreview.tsx
index 208f180c6..6abb5dc9e 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransactionPreview.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransactionPreview.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import Reimbursement from '../../../props/models/Reimbursement';
+import PayoutBankAccount from '../../../props/models/PayoutBankAccount';
 import Organization from '../../../props/models/Organization';
 import { currencyFormat } from '../../../helpers/string';
 import useTranslate from '../../../hooks/useTranslate';
@@ -8,7 +8,8 @@ export default function ModalVoucherTransactionPreview({
     formValues,
     providers,
     organization,
-    reimbursement,
+    bankAccount,
+    bankAccountSource,
 }: {
     formValues: {
         target?: string;
@@ -16,13 +17,15 @@ export default function ModalVoucherTransactionPreview({
         target_iban?: string;
         target_name?: string;
         amount?: string;
-        iban_source?: string;
+        bank_account_source?: string;
     };
     providers?: Array<Partial<Organization>>;
     organization: Organization;
-    reimbursement: Partial<Reimbursement>;
+    bankAccount?: Partial<PayoutBankAccount>;
+    bankAccountSource?: string;
 }) {
     const translate = useTranslate();
+    const resolvedBankAccountSource = bankAccountSource || formValues.bank_account_source;
 
     const providersById = useMemo(() => {
         return providers?.reduce((list, item) => ({ ...list, [item.id]: item }), {});
@@ -50,12 +53,10 @@ export default function ModalVoucherTransactionPreview({
                                     <strong>{translate('modals.modal_voucher_transaction.labels.target_iban')}</strong>
                                 </div>
 
-                                {formValues.iban_source === 'reimbursement' && (
-                                    <div className="datalist-value">{reimbursement.iban}</div>
-                                )}
-
-                                {formValues.iban_source === 'manual' && (
+                                {resolvedBankAccountSource === 'manual' ? (
                                     <div className="datalist-value">{formValues.target_iban}</div>
+                                ) : (
+                                    <div className="datalist-value">{bankAccount?.iban}</div>
                                 )}
                             </div>
                         )}
@@ -66,12 +67,10 @@ export default function ModalVoucherTransactionPreview({
                                     <strong>{translate('modals.modal_voucher_transaction.labels.target_name')}</strong>
                                 </div>
 
-                                {formValues.iban_source === 'reimbursement' && (
-                                    <div className="datalist-value">{reimbursement.iban_name}</div>
-                                )}
-
-                                {formValues.iban_source === 'manual' && (
+                                {resolvedBankAccountSource === 'manual' ? (
                                     <div className="datalist-value">{formValues.target_name}</div>
+                                ) : (
+                                    <div className="datalist-value">{bankAccount?.iban_name}</div>
                                 )}
                             </div>
                         )}
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
index 12e4200bc..52f1f5b98 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
@@ -495,11 +495,12 @@ export default function ModalVoucherTransactionsUpload({
                                     </Fragment>
                                 )}
                                 {progress >= 2 && (
-                                    <div className={`csv-upload-progress ${progress === 3 ? 'done' : ''}`}>
+                                    <div className={classNames('csv-upload-progress', progress === 3 && 'done')}>
                                         <div
-                                            className={`csv-upload-icon ${
-                                                uploadedPartly ? 'csv-upload-icon-warning' : ''
-                                            }`}>
+                                            className={classNames(
+                                                'csv-upload-icon',
+                                                uploadedPartly && 'csv-upload-icon-warning',
+                                            )}>
                                             {progress == 2 && <div className="mdi mdi-loading" />}
                                             {progress == 3 && !uploadedPartly && (
                                                 <div className="mdi mdi-check" data-dusk="successUploadIcon" />
diff --git a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
index a36112490..ba0e63f4e 100644
--- a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
@@ -994,7 +994,7 @@ export default function ModalVouchersUpload({
                 <div
                     className={classNames(
                         'modal-body',
-                        classNames(step === STEP_SET_UP ? 'modal-body-visible' : ''),
+                        classNames(step === STEP_SET_UP && 'modal-body-visible'),
                         'form',
                     )}>
                     {step == STEP_SET_UP && (
@@ -1091,7 +1091,7 @@ export default function ModalVouchersUpload({
                                 </div>
 
                                 {csvProgress >= 2 && (
-                                    <div className={`csv-upload-progress ${csvProgress == 3 ? 'done' : ''}`}>
+                                    <div className={classNames('csv-upload-progress', csvProgress == 3 && 'done')}>
                                         <div className="csv-upload-icon">
                                             {csvProgress == 2 && <div className="mdi mdi-loading" />}
                                             {csvProgress == 3 && (
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index a3b8b291e..52b77f789 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -66,6 +66,7 @@ export default function Employees() {
         {
             q: '',
             per_page: paginatorService.getPerPage(paginatorKey),
+            page: 1,
         },
         {
             queryParams: {
diff --git a/react/src/dashboard/components/pages/features/Features.tsx b/react/src/dashboard/components/pages/features/Features.tsx
index f881918dc..09e7e5734 100644
--- a/react/src/dashboard/components/pages/features/Features.tsx
+++ b/react/src/dashboard/components/pages/features/Features.tsx
@@ -11,6 +11,7 @@ import useOpenModal from '../../../hooks/useOpenModal';
 import useTranslate from '../../../hooks/useTranslate';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, StringParam } from 'use-query-params';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function Features() {
     const translate = useTranslate();
@@ -172,20 +173,14 @@ export default function Features() {
                     <div className="card-header-filters">
                         <div className="block block-inline-filters">
                             <div className="form">
-                                <div className="block block-label-tabs">
-                                    <div className="label-tab-set">
-                                        {activeOptions?.map((viewType) => (
-                                            <div
-                                                key={viewType.value}
-                                                className={`label-tab label-tab-sm ${
-                                                    filterValues.state == viewType.value ? 'active' : ''
-                                                }`}
-                                                onClick={() => filterUpdate({ state: viewType.value })}>
-                                                {viewType.name}
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
+                                <BlockLabelTabs
+                                    value={filterValues.state}
+                                    setValue={(state) => filterUpdate({ state })}
+                                    tabs={activeOptions?.map((viewType) => ({
+                                        value: viewType.value,
+                                        label: viewType.name,
+                                    }))}
+                                />
                             </div>
                             <div className="form">
                                 <div className="form-group">
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
index 7bd974c5c..8337bc284 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
@@ -4,6 +4,7 @@ import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Toolti
 import { currencyFormat } from '../../../../helpers/string';
 import { ProviderFinancialStatistics } from '../types/FinancialStatisticTypes';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
+import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
@@ -67,19 +68,20 @@ export default function FinancialChart({ chartData }: { chartData: ProviderFinan
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">Grafiek</div>
-                <div className="flex block block-label-tabs">
-                    <div
-                        className={`label-tab ${field === 'amount' ? 'active' : ''}`}
-                        onClick={() => setField('amount')}>
-                        Besteed
-                    </div>
-                    <div className={`label-tab ${field === 'count' ? 'active' : ''}`} onClick={() => setField('count')}>
-                        Totaal transacties
-                    </div>
+                <div className="flex">
+                    <BlockLabelTabs
+                        value={field}
+                        setValue={(value) => setField(value)}
+                        size={null}
+                        tabs={[
+                            { value: 'amount', label: 'Besteed' },
+                            { value: 'count', label: 'Totaal transacties' },
+                        ]}
+                    />
                 </div>
             </div>
             <div className="card-section">
-                <Bar data={data} options={options} height="350px" />
+                <Bar data={data} options={options} height="350px" className={'financial-chart'} />
             </div>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilter.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilter.tsx
index ad7c44772..f5f901620 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilter.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilter.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import ClickOutside from '../../../elements/click-outside/ClickOutside';
 import { FinancialFilterOptionItem } from '../types/FinancialStatisticTypes';
 import useTranslate from '../../../../hooks/useTranslate';
+import CheckboxControl from '../../../elements/forms/controls/CheckboxControl';
 
 export default function FinancialFilter({
     type,
@@ -64,24 +66,19 @@ export default function FinancialFilter({
                         <div className="filter-dropdown-menu-body">
                             <div className="form">
                                 {options.map((option, index) => (
-                                    <div className="block-option" key={index}>
-                                        <label className="checkbox checkbox-narrow" htmlFor={`${type}_${index}`}>
-                                            <input
-                                                type="checkbox"
-                                                id={`${type}_${index}`}
-                                                checked={option.checked}
-                                                onChange={() => {
-                                                    option.checked = !option.checked;
-                                                    selectOption(type, option);
-                                                }}
-                                            />
-                                            <div className={`checkbox-label ${option.checked ? 'active' : ''}`}>
-                                                <div className="checkbox-box">
-                                                    <em className="mdi mdi-check" />
-                                                </div>
-                                                <span>{option.name}</span>
-                                            </div>
-                                        </label>
+                                    <div
+                                        className={classNames('block-option', option.checked && 'block-option-active')}
+                                        key={index}>
+                                        <CheckboxControl
+                                            id={`${type}_${index}`}
+                                            checked={option.checked}
+                                            narrow={true}
+                                            onChange={() => {
+                                                option.checked = !option.checked;
+                                                selectOption(type, option);
+                                            }}
+                                            title={option.name}
+                                        />
                                         <div className="block-option-count">{option.transactions}</div>
                                     </div>
                                 ))}
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
index 1c3d6ed5f..b8b33f6ea 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
@@ -18,6 +18,7 @@ import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import { strLimit } from '../../../../helpers/string';
 import { ProviderFinancialFilterOptions, FinancialFilterOptionItem } from '../types/FinancialStatisticTypes';
 import Label from '../../../elements/image_cropper/Label';
+import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 
 interface SelectionItem {
     ids?: Array<number>;
@@ -471,23 +472,16 @@ export default function FinancialFilters({
                         />
                     </div>
 
-                    <div className="block block-label-tabs">
-                        <div
-                            className={`label-tab ${filterType == 'month' ? 'active' : ''}`}
-                            onClick={() => setFilterType('month')}>
-                            Maand
-                        </div>
-                        <div
-                            className={`label-tab ${filterType == 'quarter' ? 'active' : ''}`}
-                            onClick={() => setFilterType('quarter')}>
-                            Kwartaal
-                        </div>
-                        <div
-                            className={`label-tab ${filterType == 'year' ? 'active' : ''}`}
-                            onClick={() => setFilterType('year')}>
-                            Jaar
-                        </div>
-                    </div>
+                    <BlockLabelTabs
+                        value={filterType}
+                        setValue={(type) => setFilterType(type)}
+                        size={null}
+                        tabs={[
+                            { value: 'month', label: 'Maand' },
+                            { value: 'quarter', label: 'Kwartaal' },
+                            { value: 'year', label: 'Jaar' },
+                        ]}
+                    />
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
index e2a29d1d0..529b37082 100644
--- a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
@@ -16,6 +16,7 @@ import SelectControl from '../../elements/select-control/SelectControl';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import ToggleControl from '../../elements/forms/controls/ToggleControl';
 
 export default function FundBackofficeEdit() {
     const { fundId } = useParams();
@@ -246,20 +247,12 @@ export default function FundBackofficeEdit() {
                             <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                 <div className="form-group">
                                     <label className="form-label">Status</label>
-                                    <label className="form-toggle form-label" htmlFor="backoffice_enabled">
-                                        <input
-                                            className="form-label"
-                                            type="checkbox"
-                                            id="backoffice_enabled"
-                                            checked={form.values?.backoffice_enabled}
-                                            onChange={(e) => form.update({ backoffice_enabled: e.target.checked })}
-                                        />
-                                        <div className="form-toggle-inner flex-end">
-                                            <div className="toggle-input">
-                                                <div className="toggle-input-dot" />
-                                            </div>
-                                        </div>
-                                    </label>
+                                    <ToggleControl
+                                        id="backoffice_enabled"
+                                        className="form-label"
+                                        checked={form.values?.backoffice_enabled}
+                                        onChange={(_, checked) => form.update({ backoffice_enabled: checked })}
+                                    />
                                 </div>
 
                                 <div className="form-group">
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordTabs.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordTabs.tsx
index 735b1211f..ee20853ef 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordTabs.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordTabs.tsx
@@ -4,6 +4,7 @@ import FundRequestRecordAttachmentsTab from './record-tabs/FundRequestRecordAtta
 import FundRequestRecordClarificationsTab from './record-tabs/FundRequestRecordClarificationsTab';
 import FundRequestRecord from '../../../../props/models/FundRequestRecord';
 import useTranslate from '../../../../hooks/useTranslate';
+import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function FundRequestRecordTabs({ fundRequestRecord }: { fundRequestRecord: FundRequestRecord }) {
     const contentMap = useMemo(
@@ -23,40 +24,42 @@ export default function FundRequestRecordTabs({ fundRequestRecord }: { fundReque
     return (
         <div className="block" data-dusk={`fundRequestRecordTabs${fundRequestRecord.id}`}>
             {hasMultiple && (
-                <div className="block block-label-tabs">
-                    {fundRequestRecord.files.length > 0 && (
-                        <div
-                            className={`label-tab ${shownType == 'files' ? 'active' : ''}`}
-                            data-dusk={`fundRequestRecordFilesTab`}
-                            onClick={() => setShownType('files')}>
-                            {translate('validation_request_details.labels.files', {
-                                count: fundRequestRecord.files.length,
-                            })}
-                        </div>
-                    )}
-
-                    {fundRequestRecord.clarifications.length > 0 && (
-                        <div
-                            className={`label-tab ${shownType == 'clarifications' ? 'active' : ''}`}
-                            onClick={() => setShownType('clarifications')}
-                            data-dusk={`fundRequestRecordClarificationsTab`}>
-                            {translate('validation_request_details.labels.clarification_requests', {
-                                count: fundRequestRecord.clarifications.length,
-                            })}
-                        </div>
-                    )}
-
-                    {fundRequestRecord.history.length > 0 && (
-                        <div
-                            className={`label-tab ${shownType == 'history' ? 'active' : ''}`}
-                            onClick={() => setShownType('history')}
-                            data-dusk={`fundRequestRecordHistoryTab`}>
-                            {translate('validation_request_details.labels.history', {
-                                count: fundRequestRecord.history.length,
-                            })}
-                        </div>
-                    )}
-                </div>
+                <BlockLabelTabs
+                    size={null}
+                    value={shownType}
+                    setValue={(type) => setShownType(type)}
+                    tabs={
+                        [
+                            fundRequestRecord.files.length > 0
+                                ? {
+                                      value: 'files',
+                                      dusk: 'fundRequestRecordFilesTab',
+                                      label: translate('validation_request_details.labels.files', {
+                                          count: fundRequestRecord.files.length,
+                                      }),
+                                  }
+                                : null,
+                            fundRequestRecord.clarifications.length > 0
+                                ? {
+                                      value: 'clarifications',
+                                      dusk: 'fundRequestRecordClarificationsTab',
+                                      label: translate('validation_request_details.labels.clarification_requests', {
+                                          count: fundRequestRecord.clarifications.length,
+                                      }),
+                                  }
+                                : null,
+                            fundRequestRecord.history.length > 0
+                                ? {
+                                      value: 'history',
+                                      dusk: 'fundRequestRecordHistoryTab',
+                                      label: translate('validation_request_details.labels.history', {
+                                          count: fundRequestRecord.history.length,
+                                      }),
+                                  }
+                                : null,
+                        ].filter(Boolean) as Array<{ value: string; label: string; dusk?: string }>
+                    }
+                />
             )}
 
             {shownType == 'clarifications' && fundRequestRecord.clarifications.length > 0 && (
diff --git a/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx b/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
index 458759915..aa022d31b 100644
--- a/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
+++ b/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
@@ -26,6 +26,7 @@ import Fund from '../../../props/models/Fund';
 import { hasPermission } from '../../../helpers/utils';
 import { Permission } from '../../../props/models/Organization';
 import { useFundService } from '../../../services/FundService';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function FundRequests() {
     const appConfigs = useAppConfigs();
@@ -200,21 +201,15 @@ export default function FundRequests() {
                 </div>
 
                 <div className="card-header-filters form">
-                    <div className="block block-label-tabs">
-                        <div className="label-tab-set">
-                            {stateGroups?.map((stateGroup) => (
-                                <div
-                                    key={stateGroup.key}
-                                    onClick={() => filterUpdate({ state_group: stateGroup.key })}
-                                    data-dusk={`fundRequestsStateTab_${stateGroup.key}`}
-                                    className={`label-tab label-tab-sm ${
-                                        filterValues.state_group === stateGroup.key ? 'active' : ''
-                                    }`}>
-                                    {stateGroup.label} ({fundRequests.meta.totals[stateGroup.key]})
-                                </div>
-                            ))}
-                        </div>
-                    </div>
+                    <BlockLabelTabs
+                        value={filterValues.state_group}
+                        setValue={(state_group) => filterUpdate({ state_group })}
+                        tabs={stateGroups?.map((stateGroup) => ({
+                            value: stateGroup.key,
+                            dusk: `fundRequestsStateTab_${stateGroup.key}`,
+                            label: `${stateGroup.label} (${fundRequests.meta.totals[stateGroup.key]})`,
+                        }))}
+                    />
 
                     <CardHeaderFilterNext filter={filter} funds={funds} searchDusk={'tableFundRequestSearch'}>
                         <FilterItemToggle show={true} label={translate('validation_requests.labels.search')}>
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
index dea8b6a27..de3ec263f 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
@@ -16,6 +16,9 @@ import usePushApiError from '../../../../hooks/usePushApiError';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableDateTime from '../../../elements/tables/elements/TableDateTime';
 import { hasPermission } from '../../../../helpers/utils';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
+import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
 
 export default function IdentityBankAccountsCard({
     identity,
@@ -34,6 +37,50 @@ export default function IdentityBankAccountsCard({
 
     const sponsorIdentitiesService = useSponsorIdentitiesService();
 
+    const canManageIdentities = hasPermission(organization, Permission.MANAGE_IDENTITIES);
+    const canViewFundRequests = hasPermission(
+        organization,
+        [Permission.VALIDATE_RECORDS, Permission.MANAGE_VALIDATORS],
+        false,
+    );
+    const canViewReimbursements = hasPermission(organization, Permission.MANAGE_REIMBURSEMENTS);
+    const canViewPayouts = organization.allow_payouts && hasPermission(organization, Permission.MANAGE_PAYOUTS);
+
+    const getBankAccountSourceMeta = useCallback(
+        (bank_account: SponsorIdentity['bank_accounts'][number]) => {
+            const label = bank_account.type_id
+                ? `${bank_account.created_by_locale} #${bank_account.type_id}`
+                : bank_account.created_by_locale;
+
+            if (bank_account.type === 'fund_request' && bank_account.type_id && canViewFundRequests) {
+                return {
+                    label,
+                    name: DashboardRoutes.FUND_REQUEST,
+                    params: { organizationId: organization.id, id: bank_account.type_id },
+                };
+            }
+
+            if (bank_account.type === 'reimbursement' && bank_account.type_id && canViewReimbursements) {
+                return {
+                    label,
+                    name: DashboardRoutes.REIMBURSEMENT,
+                    params: { organizationId: organization.id, id: bank_account.type_id },
+                };
+            }
+
+            if (bank_account.type === 'payout' && canViewPayouts) {
+                return {
+                    label,
+                    name: DashboardRoutes.PAYOUTS,
+                    params: { organizationId: organization.id },
+                };
+            }
+
+            return { label };
+        },
+        [canViewFundRequests, canViewPayouts, canViewReimbursements, organization.id],
+    );
+
     const editBankAccount = useCallback(
         (id?: number) => {
             openModal((modal) => (
@@ -98,7 +145,7 @@ export default function IdentityBankAccountsCard({
         <Card
             title={`Bankrekeningen (${identity.bank_accounts?.length || 0})`}
             buttons={[
-                hasPermission(organization, Permission.MANAGE_IDENTITIES) && {
+                canManageIdentities && {
                     text: 'Aanmaken',
                     type: 'primary',
                     icon: 'plus-circle',
@@ -109,44 +156,76 @@ export default function IdentityBankAccountsCard({
                 <EmptyCard title={'Geen bankrekening gevonden'} type={'card-section-content'} />
             ) : (
                 <CardTable columns={sponsorIdentitiesService.getBankAccountColumns()}>
-                    {identity?.bank_accounts?.map((bank_account, index) => (
-                        <tr key={index}>
-                            <td>{bank_account.iban}</td>
-                            <td>{bank_account.name}</td>
-                            <td>
-                                <TableDateTime value={bank_account.updated_at_locale} />
-                            </td>
-                            <td>{bank_account.created_by_locale}</td>
-                            <td className="table-td-actions text-right">
-                                {bank_account?.id && hasPermission(organization, Permission.MANAGE_IDENTITIES) ? (
-                                    <TableRowActions
-                                        content={(e) => (
-                                            <div className="dropdown dropdown-actions">
-                                                <div
-                                                    onClick={() => {
-                                                        e.close();
-                                                        editBankAccount(bank_account.id);
-                                                    }}
-                                                    className="dropdown-item">
-                                                    Bewerking
-                                                </div>
-                                                <div
-                                                    onClick={() => {
-                                                        e.close();
-                                                        deleteBankAccount(bank_account.id);
-                                                    }}
-                                                    className="dropdown-item">
-                                                    Verwijderen
+                    {identity?.bank_accounts?.map((bank_account, index) => {
+                        const sourceMeta = getBankAccountSourceMeta(bank_account);
+                        const canEdit = bank_account?.id && canManageIdentities;
+                        const canViewSource = Boolean(sourceMeta.name);
+
+                        return (
+                            <tr key={index}>
+                                <td>{bank_account.iban}</td>
+                                <td>{bank_account.name}</td>
+                                <td>
+                                    <TableDateTime value={bank_account.updated_at_locale} />
+                                </td>
+                                <td>
+                                    {sourceMeta.name ? (
+                                        <StateNavLink
+                                            name={sourceMeta.name}
+                                            params={sourceMeta.params}
+                                            className="text-primary text-semibold text-inherit text-decoration-link">
+                                            {sourceMeta.label}
+                                        </StateNavLink>
+                                    ) : (
+                                        sourceMeta.label
+                                    )}
+                                </td>
+                                <td className="table-td-actions text-right">
+                                    {canEdit || canViewSource ? (
+                                        <TableRowActions
+                                            content={(e) => (
+                                                <div className="dropdown dropdown-actions">
+                                                    {canViewSource && (
+                                                        <TableRowActionItem
+                                                            type="link"
+                                                            name={sourceMeta.name}
+                                                            params={sourceMeta.params}>
+                                                            <em className="mdi mdi-eye-outline icon-start" />
+                                                            Bekijk bron
+                                                        </TableRowActionItem>
+                                                    )}
+                                                    {canEdit && (
+                                                        <TableRowActionItem
+                                                            type="button"
+                                                            onClick={() => {
+                                                                e.close();
+                                                                editBankAccount(bank_account.id);
+                                                            }}>
+                                                            <em className="mdi mdi-pencil icon-start" />
+                                                            Bewerking
+                                                        </TableRowActionItem>
+                                                    )}
+                                                    {canEdit && (
+                                                        <TableRowActionItem
+                                                            type="button"
+                                                            onClick={() => {
+                                                                e.close();
+                                                                deleteBankAccount(bank_account.id);
+                                                            }}>
+                                                            <em className="mdi mdi-close icon-start" />
+                                                            Verwijderen
+                                                        </TableRowActionItem>
+                                                    )}
                                                 </div>
-                                            </div>
-                                        )}
-                                    />
-                                ) : (
-                                    <TableEmptyValue />
-                                )}
-                            </td>
-                        </tr>
-                    ))}
+                                            )}
+                                        />
+                                    ) : (
+                                        <TableEmptyValue />
+                                    )}
+                                </td>
+                            </tr>
+                        );
+                    })}
                 </CardTable>
             )}
         </Card>
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityPayoutsCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityPayoutsCard.tsx
index ee2f4d440..2a7eb4922 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityPayoutsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityPayoutsCard.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Organization from '../../../../props/models/Organization';
 import { PaginationData } from '../../../../props/ApiResponses';
 import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
@@ -34,10 +34,6 @@ export default function IdentityPayoutsCard({
     const [loading, setLoading] = useState(false);
     const [transactions, setTransactions] = useState<PaginationData<PayoutTransaction>>(null);
 
-    const fundsWithPayouts = useMemo(() => {
-        return funds?.filter((fund: Fund) => fund.allow_custom_amounts || fund.allow_preset_amounts);
-    }, [funds]);
-
     const [paginatorTransactionsKey] = useState('payouts');
 
     const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext({
@@ -97,7 +93,7 @@ export default function IdentityPayoutsCard({
                 filterValues={filterValues}
                 filterUpdate={filterUpdate}
                 fetchTransactions={fetchTransactions}
-                fundsWithPayouts={fundsWithPayouts}
+                funds={funds}
             />
         </Card>
     );
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
index b083d69ec..5b6ea23ab 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/elements/ProfileRecordsField.tsx
@@ -25,6 +25,7 @@ export default function ProfileRecordsField({
             input={(id) =>
                 recordType.key === 'birth_date' ? (
                     <DatePickerControl
+                        id={id}
                         value={dateParse(form.values[recordType.key] || '')}
                         placeholder={recordType.name}
                         onChange={(date) => form.update({ [recordType.key]: dateFormat(date) })}
diff --git a/react/src/dashboard/components/pages/identity-preferences/elements/NotificationPreferenceCard.tsx b/react/src/dashboard/components/pages/identity-preferences/elements/NotificationPreferenceCard.tsx
index ed7f13b2c..a03ead670 100644
--- a/react/src/dashboard/components/pages/identity-preferences/elements/NotificationPreferenceCard.tsx
+++ b/react/src/dashboard/components/pages/identity-preferences/elements/NotificationPreferenceCard.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { PreferenceOption } from '../../../../props/models/NotificationPreference';
 import useTranslate from '../../../../hooks/useTranslate';
+import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 
 export default function NotificationPreferenceCard({
     title,
@@ -20,10 +21,18 @@ export default function NotificationPreferenceCard({
             </div>
             <div className="form block block-preferences">
                 {preferences.map((preference) => (
-                    <label
+                    <div
                         key={preference.key}
-                        htmlFor={`option_${preference.type}_${preference.key}`}
-                        className="preference-option">
+                        className="preference-option"
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => togglePreference(preference, !preference.subscribed)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                togglePreference(preference, !preference.subscribed);
+                            }
+                        }}>
                         <div className="preference-option-details">
                             <div className="card-heading card-heading-padless">
                                 {translate(`notification_preferences.types.${preference.key}.title`)}
@@ -34,21 +43,14 @@ export default function NotificationPreferenceCard({
                             </div>
                         </div>
                         <div className="preference-option-input">
-                            <div className="form-toggle">
-                                <input
-                                    type="checkbox"
-                                    id={`option_${preference.type}_${preference.key}`}
-                                    checked={preference.subscribed}
-                                    onChange={(e) => togglePreference(preference, e.target.checked)}
-                                />
-                                <div className="form-toggle-inner flex-end">
-                                    <div className="toggle-input">
-                                        <div className="toggle-input-dot"></div>
-                                    </div>
-                                </div>
-                            </div>
+                            <ToggleControl
+                                id={`option_${preference.type}_${preference.key}`}
+                                checked={preference.subscribed}
+                                onChange={(_, checked) => togglePreference(preference, checked)}
+                                onClick={(e) => e.stopPropagation()}
+                            />
                         </div>
-                    </label>
+                    </div>
                 ))}
             </div>
         </div>
diff --git a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
index fa91eae77..11cae502c 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
@@ -34,6 +34,7 @@ import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import { useMarkdownService } from '../../../services/MarkdownService';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function ImplementationNotificationSend() {
     const { id } = useParams();
@@ -494,22 +495,31 @@ export default function ImplementationNotificationSend() {
                                         </div>
                                     )}
 
-                                <div className="block block-label-tabs">
-                                    <div className="label-tab-set">
-                                        <div
-                                            className={`label-tab ${targetGroup === 'identities' ? 'active' : ''}`}
-                                            onClick={() => setTargetGroup('identities')}>
-                                            <div className="mdi mdi-account-multiple-outline label-tab-icon-start" />
-                                            Aanvragers
-                                        </div>
-                                        <div
-                                            className={`label-tab ${targetGroup === 'providers' ? 'active' : ''}`}
-                                            onClick={() => setTargetGroup('providers')}>
-                                            <div className="mdi mdi-store-outline label-tab-icon-start" />
-                                            Aanbieders
-                                        </div>
-                                    </div>
-                                </div>
+                                <BlockLabelTabs
+                                    value={targetGroup}
+                                    setValue={(group) => setTargetGroup(group)}
+                                    size={null}
+                                    tabs={[
+                                        {
+                                            value: 'identities',
+                                            label: (
+                                                <Fragment>
+                                                    <div className="mdi mdi-account-multiple-outline label-tab-icon-start" />
+                                                    Aanvragers
+                                                </Fragment>
+                                            ),
+                                        },
+                                        {
+                                            value: 'providers',
+                                            label: (
+                                                <Fragment>
+                                                    <div className="mdi mdi-store-outline label-tab-icon-start" />
+                                                    Aanbieders
+                                                </Fragment>
+                                            ),
+                                        },
+                                    ]}
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/pages/implementation-pages/elements/ImplementationsInlineBlockEditor.tsx b/react/src/dashboard/components/pages/implementation-pages/elements/ImplementationsInlineBlockEditor.tsx
index 3ec2c51aa..d4b96a861 100644
--- a/react/src/dashboard/components/pages/implementation-pages/elements/ImplementationsInlineBlockEditor.tsx
+++ b/react/src/dashboard/components/pages/implementation-pages/elements/ImplementationsInlineBlockEditor.tsx
@@ -122,7 +122,7 @@ export default function ImplementationsInlineBlockEditor({
             <FormGroup
                 label="Paragraaf"
                 error={errors?.description}
-                input={() =>
+                input={(id) =>
                     markdown ? (
                         <MarkdownEditor
                             placeholder={'Paragraaf'}
@@ -137,6 +137,7 @@ export default function ImplementationsInlineBlockEditor({
                         />
                     ) : (
                         <textarea
+                            id={id}
                             placeholder={'Paragraaf'}
                             className={'form-control'}
                             value={pageBlock?.description}
diff --git a/react/src/dashboard/components/pages/implementations-edit/ImplementationDigid.tsx b/react/src/dashboard/components/pages/implementations-edit/ImplementationDigid.tsx
index 07e244f9e..2d98dea80 100644
--- a/react/src/dashboard/components/pages/implementations-edit/ImplementationDigid.tsx
+++ b/react/src/dashboard/components/pages/implementations-edit/ImplementationDigid.tsx
@@ -17,6 +17,7 @@ import FormPaneContainer from '../../elements/forms/elements/FormPaneContainer';
 import FormPane from '../../elements/forms/elements/FormPane';
 import FormGroup from '../../elements/forms/elements/FormGroup';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import ToggleControl from '../../elements/forms/controls/ToggleControl';
 
 export default function ImplementationDigid() {
     const { id } = useParams();
@@ -165,20 +166,12 @@ export default function ImplementationDigid() {
                         <FormGroup
                             label={'Status'}
                             input={(id) => (
-                                <label className="form-toggle form-label" htmlFor={id}>
-                                    <input
-                                        className="form-label"
-                                        type="checkbox"
-                                        id={id}
-                                        checked={form.values?.digid_enabled}
-                                        onChange={(e) => form.update({ digid_enabled: e.target.checked })}
-                                    />
-                                    <div className="form-toggle-inner flex-end">
-                                        <div className="toggle-input">
-                                            <div className="toggle-input-dot" />
-                                        </div>
-                                    </div>
-                                </label>
+                                <ToggleControl
+                                    id={id}
+                                    className="form-label"
+                                    checked={form.values?.digid_enabled}
+                                    onChange={(_, checked) => form.update({ digid_enabled: checked })}
+                                />
                             )}
                         />
                     </FormPane>
diff --git a/react/src/dashboard/components/pages/implementations-edit/ImplementationTermsAndPrivacy.tsx b/react/src/dashboard/components/pages/implementations-edit/ImplementationTermsAndPrivacy.tsx
index 659a31d1e..96ecaa395 100644
--- a/react/src/dashboard/components/pages/implementations-edit/ImplementationTermsAndPrivacy.tsx
+++ b/react/src/dashboard/components/pages/implementations-edit/ImplementationTermsAndPrivacy.tsx
@@ -127,7 +127,7 @@ export default function ImplementationTermsAndPrivacy() {
                             <FormGroup
                                 label={translate('implementation_edit.labels.show_privacy_checkbox')}
                                 error={form.errors.show_privacy_checkbox}
-                                input={(inputId) => (
+                                input={(id) => (
                                     <FormGroupInfo
                                         info={
                                             <Fragment>
@@ -143,7 +143,7 @@ export default function ImplementationTermsAndPrivacy() {
                                             </Fragment>
                                         }>
                                         <SelectControl
-                                            id={inputId}
+                                            id={id}
                                             className="form-control"
                                             propKey="value"
                                             propValue="label"
@@ -161,7 +161,7 @@ export default function ImplementationTermsAndPrivacy() {
                             <FormGroup
                                 label={translate('implementation_edit.labels.show_terms_checkbox')}
                                 error={form.errors.show_terms_checkbox}
-                                input={(inputId) => (
+                                input={(id) => (
                                     <FormGroupInfo
                                         info={
                                             <Fragment>
@@ -177,7 +177,7 @@ export default function ImplementationTermsAndPrivacy() {
                                             </Fragment>
                                         }>
                                         <SelectControl
-                                            id={inputId}
+                                            id={id}
                                             className="form-control"
                                             propKey="value"
                                             propValue="label"
diff --git a/react/src/dashboard/components/pages/implementations-edit/elements/ImplementationsBlockEditorItem.tsx b/react/src/dashboard/components/pages/implementations-edit/elements/ImplementationsBlockEditorItem.tsx
index fe737d8c6..303963a0c 100644
--- a/react/src/dashboard/components/pages/implementations-edit/elements/ImplementationsBlockEditorItem.tsx
+++ b/react/src/dashboard/components/pages/implementations-edit/elements/ImplementationsBlockEditorItem.tsx
@@ -8,6 +8,7 @@ import FormError from '../../../elements/forms/errors/FormError';
 import { useMediaService } from '../../../../services/MediaService';
 import PhotoSelector from '../../../elements/photo-selector/PhotoSelector';
 import SelectControl from '../../../elements/select-control/SelectControl';
+import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ImplementationsBlockEditorItem({
@@ -153,22 +154,12 @@ export default function ImplementationsBlockEditorItem({
                                     Button
                                 </label>
                                 <div className="flex-col">
-                                    <label className="form-toggle" htmlFor={`button_enabled_${index}`}>
-                                        <input
-                                            type="checkbox"
-                                            id={`button_enabled_${index}`}
-                                            checked={block.button_enabled}
-                                            onChange={(e) => {
-                                                onChange({ button_enabled: e.target.checked });
-                                            }}
-                                        />
-                                        <div className="form-toggle-inner flex-end">
-                                            <div className="toggle-input">
-                                                <div className="toggle-input-dot" />
-                                            </div>
-                                        </div>
-                                        <FormError error={errors['blocks.' + index + '.button_enabled']} />
-                                    </label>
+                                    <ToggleControl
+                                        id={`button_enabled_${index}`}
+                                        checked={block.button_enabled}
+                                        onChange={(_, checked) => onChange({ button_enabled: checked })}
+                                    />
+                                    <FormError error={errors['blocks.' + index + '.button_enabled']} />
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
index 86d0d4e4e..3a1ce3237 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
@@ -7,9 +7,9 @@ import useTranslate from '../../../../hooks/useTranslate';
 import { hasPermission } from '../../../../helpers/utils';
 import Organization, { Permission } from '../../../../props/models/Organization';
 import Fund from '../../../../props/models/Fund';
-import classNames from 'classnames';
 import OrganizationsFundsShowConfigsCard from './tabs-details-card/OrganizationsFundsShowConfigsCard';
 import OrganizationsFundsShowPhysicalCardTypesCard from './tabs-details-card/OrganizationsFundsShowPhysicalCardTypesCard';
+import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationsFundsShowDetailsCard({
     fund,
@@ -63,18 +63,14 @@ export default function OrganizationsFundsShowDetailsCard({
                 </div>
 
                 <div className="card-header-filters">
-                    <div className="block block-label-tabs">
-                        <div className="label-tab-set">
-                            {tabs?.map((tab) => (
-                                <div
-                                    key={tab}
-                                    className={classNames('label-tab', 'label-tab-sm', tab == viewType && 'active')}
-                                    onClick={() => setViewType(tab)}>
-                                    {translate(`funds_show.labels.base_card.header.${tab}`)}
-                                </div>
-                            ))}
-                        </div>
-                    </div>
+                    <BlockLabelTabs
+                        value={viewType}
+                        setValue={(tab) => setViewType(tab)}
+                        tabs={tabs?.map((tab) => ({
+                            value: tab,
+                            label: translate(`funds_show.labels.base_card.header.${tab}`),
+                        }))}
+                    />
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
index 533433dd7..43ea94f8f 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
@@ -21,6 +21,7 @@ import TableRowActions from '../../../../elements/tables/TableRowActions';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
 import CardHeaderFilter from '../../../../elements/tables/elements/CardHeaderFilter';
+import BlockLabelTabs from '../../../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationsFundsShowIdentitiesCard({
     fund,
@@ -96,19 +97,15 @@ export default function OrganizationsFundsShowIdentitiesCard({
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        <div className="block block-label-tabs">
-                            <div className="label-tab-set">
-                                {viewTypes?.map((type) => (
-                                    <div
-                                        key={type.key}
-                                        data-dusk={`${type.key}_tab`}
-                                        className={`label-tab label-tab-sm ${viewType == type.key ? 'active' : ''}`}
-                                        onClick={() => setViewType(type.key)}>
-                                        {type.name}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
+                        <BlockLabelTabs
+                            value={viewType}
+                            setValue={(type) => setViewType(type)}
+                            tabs={viewTypes?.map((type) => ({
+                                value: type.key,
+                                dusk: `${type.key}_tab`,
+                                label: type.name,
+                            }))}
+                        />
 
                         <div className="block block-inline-filters">
                             {filter.show && (
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
index 11166cdd2..0a9a1ec7f 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowImplementationsCard.tsx
@@ -21,6 +21,7 @@ import { useFundService } from '../../../../../services/FundService';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
 import CardHeaderFilter from '../../../../elements/tables/elements/CardHeaderFilter';
+import BlockLabelTabs from '../../../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationsFundsShowImplementationsCard({
     fund,
@@ -90,19 +91,15 @@ export default function OrganizationsFundsShowImplementationsCard({
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        <div className="block block-label-tabs">
-                            <div className="label-tab-set">
-                                {viewTypes?.map((type) => (
-                                    <div
-                                        key={type.key}
-                                        data-dusk={`${type.key}_tab`}
-                                        className={`label-tab label-tab-sm ${viewType == type.key ? 'active' : ''}`}
-                                        onClick={() => setViewType(type.key)}>
-                                        {type.name}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
+                        <BlockLabelTabs
+                            value={viewType}
+                            setValue={(type) => setViewType(type)}
+                            tabs={viewTypes?.map((type) => ({
+                                value: type.key,
+                                dusk: `${type.key}_tab`,
+                                label: type.name,
+                            }))}
+                        />
 
                         <div className="block block-inline-filters">
                             {filter.show && (
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
index 9ef054b1b..3a4395e1c 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
@@ -18,6 +18,7 @@ import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../../elements/table-empty-value/TableEmptyValue';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
 import CardHeaderFilter from '../../../../elements/tables/elements/CardHeaderFilter';
+import BlockLabelTabs from '../../../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationsFundsShowTopUpsCard({
     fund,
@@ -103,19 +104,15 @@ export default function OrganizationsFundsShowTopUpsCard({
 
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        <div className="block block-label-tabs">
-                            <div className="label-tab-set">
-                                {viewTypes?.map((type) => (
-                                    <div
-                                        key={type.key}
-                                        data-dusk={`${type.key}_tab`}
-                                        className={`label-tab label-tab-sm ${viewType == type.key ? 'active' : ''}`}
-                                        onClick={() => setViewType(type.key)}>
-                                        {type.name}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
+                        <BlockLabelTabs
+                            value={viewType}
+                            setValue={(type) => setViewType(type)}
+                            tabs={viewTypes?.map((type) => ({
+                                value: type.key,
+                                dusk: `${type.key}_tab`,
+                                label: type.name,
+                            }))}
+                        />
 
                         <div className="block block-inline-filters">
                             {filter.show && (
diff --git a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
index ef29dab7b..916ccf8bf 100644
--- a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
@@ -33,6 +33,7 @@ import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationFunds() {
     const translate = useTranslate();
@@ -246,25 +247,20 @@ export default function OrganizationFunds() {
                         <div className="form">
                             <div className="flex">
                                 <div>
-                                    <div className="block block-label-tabs">
-                                        <div className="label-tab-set">
-                                            <div
-                                                onClick={() => filterUpdate({ funds_type: 'active' })}
-                                                className={`label-tab label-tab-sm ${
-                                                    filterValues.funds_type == 'active' ? 'active' : ''
-                                                }`}>
-                                                Lopend ({funds.meta.unarchived_funds_total})
-                                            </div>
-
-                                            <div
-                                                onClick={() => filterUpdate({ funds_type: 'archived' })}
-                                                className={`label-tab label-tab-sm ${
-                                                    filterValues.funds_type == 'archived' ? 'active' : ''
-                                                }`}>
-                                                Archief ({funds.meta.archived_funds_total})
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <BlockLabelTabs
+                                        value={filterValues.funds_type}
+                                        setValue={(funds_type) => filterUpdate({ funds_type })}
+                                        tabs={[
+                                            {
+                                                value: 'active',
+                                                label: `Lopend (${funds.meta.unarchived_funds_total})`,
+                                            },
+                                            {
+                                                value: 'archived',
+                                                label: `Archief (${funds.meta.archived_funds_total})`,
+                                            },
+                                        ]}
+                                    />
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
index b2378c7ec..75d25f3bf 100644
--- a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
+++ b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
@@ -13,6 +13,7 @@ import { authContext } from '../../../contexts/AuthContext';
 import { StringParam, useQueryParam } from 'use-query-params';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function OrganizationsSecurity() {
     const activeOrganization = useActiveOrganization();
@@ -100,23 +101,15 @@ export default function OrganizationsSecurity() {
                                 <div className="block block-inline-filters">
                                     <div className="flex">
                                         <div>
-                                            <div className="block block-label-tabs pull-right">
-                                                <div className="label-tab-set">
-                                                    <div
-                                                        className={`label-tab label-tab-sm ${
-                                                            viewType == 'employees' ? 'active' : ''
-                                                        }`}
-                                                        onClick={() => setViewType('employees')}>
-                                                        Medewerkers
-                                                    </div>
-                                                    <div
-                                                        className={`label-tab label-tab-sm ${
-                                                            viewType == 'funds' ? 'active' : ''
-                                                        }`}
-                                                        onClick={() => setViewType('funds')}>
-                                                        Fondsen
-                                                    </div>
-                                                </div>
+                                            <div className="pull-right">
+                                                <BlockLabelTabs
+                                                    value={viewType}
+                                                    setValue={(type) => setViewType(type)}
+                                                    tabs={[
+                                                        { value: 'employees', label: 'Medewerkers' },
+                                                        { value: 'funds', label: 'Fondsen' },
+                                                    ]}
+                                                />
                                             </div>
                                         </div>
                                     </div>
diff --git a/react/src/dashboard/components/pages/payouts/Payouts.tsx b/react/src/dashboard/components/pages/payouts/Payouts.tsx
index d0a746a01..c4601687a 100644
--- a/react/src/dashboard/components/pages/payouts/Payouts.tsx
+++ b/react/src/dashboard/components/pages/payouts/Payouts.tsx
@@ -175,7 +175,7 @@ export default function Payouts() {
     }
 
     return (
-        <div className="card">
+        <div className="card" data-dusk="payoutsPage">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('payouts.header.title')} ({transactions.meta.total})
@@ -184,7 +184,10 @@ export default function Payouts() {
                 <div className={'card-header-filters'}>
                     <div className="block block-inline-filters">
                         {fundsWithPayouts?.length > 0 && (
-                            <button className="button button-primary button-sm" onClick={createPayout}>
+                            <button
+                                className="button button-primary button-sm"
+                                onClick={createPayout}
+                                data-dusk="payoutCreateButton">
                                 <em className="mdi mdi-plus-circle icon-start" />
                                 Uitbetaling aanmaken
                             </button>
@@ -331,7 +334,7 @@ export default function Payouts() {
                 filterValues={filterValues}
                 filterUpdate={filterUpdate}
                 fetchTransactions={fetchTransactions}
-                fundsWithPayouts={fundsWithPayouts}
+                funds={funds}
             />
         </div>
     );
diff --git a/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx b/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
index f2eda1f86..6f323d078 100644
--- a/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
+++ b/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
@@ -32,7 +32,7 @@ export default function PayoutsTable({
     filterValues,
     filterUpdate,
     fetchTransactions,
-    fundsWithPayouts,
+    funds,
 }: {
     filter: FilterScope<FilterModel>;
     loading: boolean;
@@ -42,7 +42,7 @@ export default function PayoutsTable({
     filterValues: FilterModel;
     filterUpdate: FilterSetter;
     fetchTransactions: (filters: object) => void;
-    fundsWithPayouts: Array<Partial<Fund>>;
+    funds: Array<Partial<Fund>>;
 }) {
     const openModal = useOpenModal();
     const setProgress = useSetProgress();
@@ -91,14 +91,14 @@ export default function PayoutsTable({
             openModal((modal) => (
                 <ModalPayoutsEdit
                     modal={modal}
-                    funds={fundsWithPayouts?.filter((item) => item.id === transaction.fund.id)}
+                    funds={funds?.filter((item) => item.id === transaction.fund.id)}
                     transaction={transaction}
                     organization={organization}
                     onUpdated={() => fetchTransactions(filter.activeValues)}
                 />
             ));
         },
-        [organization, fetchTransactions, fundsWithPayouts, filter.activeValues, openModal],
+        [organization, fetchTransactions, funds, filter.activeValues, openModal],
     );
 
     return (
@@ -118,6 +118,7 @@ export default function PayoutsTable({
                                 {transactions.data.map((transaction) => (
                                     <StateNavLink
                                         key={transaction.id}
+                                        dataDusk={`payoutsTableRow${transaction.id}`}
                                         name={DashboardRoutes.PAYOUT}
                                         params={{
                                             address: transaction.address,
@@ -225,7 +226,7 @@ export default function PayoutsTable({
                                                                 Annuleren
                                                             </div>
                                                         )}
-                                                        {transaction.transfer_in_pending && (
+                                                        {transaction.is_editable && transaction.transfer_in_pending && (
                                                             <div
                                                                 className="dropdown-item"
                                                                 onClick={() => {
diff --git a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
index 12d2f4e50..b122d0850 100644
--- a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
@@ -8,6 +8,7 @@ import ProviderFundInvitationsTable from './elements/ProviderFundInvitationsTabl
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { StringParam, useQueryParam } from 'use-query-params';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function ProviderFunds() {
     const translate = useTranslate();
@@ -53,64 +54,53 @@ export default function ProviderFunds() {
             <div className="card-heading flex-row">
                 <div className="flex-col flex-grow">{translate('provider_funds.title.main')}</div>
                 <div className="flex-col">
-                    <div className="block block-label-tabs">
-                        <div className="label-tab-set">
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'active' ? 'active' : ''}`}
-                                data-dusk="fundsActiveTab"
-                                onClick={() => setTab('active')}>
-                                {translate('provider_funds.tabs.active')} ({fundsAvailable.meta.totals.active})
-                            </div>
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'pending_rejected' ? 'active' : ''}`}
-                                data-dusk="fundsPendingTab"
-                                onClick={() => setTab('pending_rejected')}>
-                                {translate('provider_funds.tabs.pending_rejected')} (
-                                {fundsAvailable.meta.totals.pending})
-                            </div>
-
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'available' ? 'active' : ''}`}
-                                data-dusk="fundsAvailableTab"
-                                onClick={() => setTab('available')}>
-                                {translate('provider_funds.tabs.available')} ({fundsAvailable.meta.totals.available})
-                            </div>
-
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'archived' ? 'active' : ''}`}
-                                data-dusk="fundsArchivedTab"
-                                onClick={() => setTab('archived')}>
-                                {translate('provider_funds.tabs.archived')} ({fundsAvailable.meta.totals.archived})
-                            </div>
-
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'unsubscribed' ? 'active' : ''}`}
-                                data-dusk="fundsUnsubscribedTab"
-                                onClick={() => setTab('unsubscribed')}>
-                                {translate('provider_funds.tabs.unsubscribed')} (
-                                {fundsAvailable.meta.totals.unsubscribed})
-                            </div>
-                        </div>
-                    </div>
+                    <BlockLabelTabs
+                        value={tabQuery}
+                        setValue={(tab) => setTab(tab)}
+                        tabs={[
+                            {
+                                value: 'active',
+                                label: `${translate('provider_funds.tabs.active')} (${fundsAvailable.meta.totals.active})`,
+                                dusk: 'fundsActiveTab',
+                            },
+                            {
+                                value: 'pending_rejected',
+                                label: `${translate('provider_funds.tabs.pending_rejected')} (${fundsAvailable.meta.totals.pending})`,
+                                dusk: 'fundsPendingTab',
+                            },
+                            {
+                                value: 'available',
+                                label: `${translate('provider_funds.tabs.available')} (${fundsAvailable.meta.totals.available})`,
+                                dusk: 'fundsAvailableTab',
+                            },
+                            {
+                                value: 'archived',
+                                label: `${translate('provider_funds.tabs.archived')} (${fundsAvailable.meta.totals.archived})`,
+                                dusk: 'fundsArchivedTab',
+                            },
+                            {
+                                value: 'unsubscribed',
+                                label: `${translate('provider_funds.tabs.unsubscribed')} (${fundsAvailable.meta.totals.unsubscribed})`,
+                                dusk: 'fundsUnsubscribedTab',
+                            },
+                        ]}
+                    />
                 </div>
                 <div className="flex-col">
-                    <div className="block block-label-tabs">
-                        <div className="label-tab-set">
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'invitations' ? 'active' : ''}`}
-                                onClick={() => setTab('invitations')}>
-                                {translate('provider_funds.tabs.invitations')} ({fundsAvailable.meta.totals.invitations}
-                                )
-                            </div>
-
-                            <div
-                                className={`label-tab label-tab-sm ${tabQuery == 'invitations_archived' ? 'active' : ''}`}
-                                onClick={() => setTab('invitations_archived')}>
-                                {translate('provider_funds.tabs.invitations_archived')} (
-                                {fundsAvailable.meta.totals.invitations_archived})
-                            </div>
-                        </div>
-                    </div>
+                    <BlockLabelTabs
+                        value={tabQuery}
+                        setValue={(tab) => setTab(tab)}
+                        tabs={[
+                            {
+                                value: 'invitations',
+                                label: `${translate('provider_funds.tabs.invitations')} (${fundsAvailable.meta.totals.invitations})`,
+                            },
+                            {
+                                value: 'invitations_archived',
+                                label: `${translate('provider_funds.tabs.invitations_archived')} (${fundsAvailable.meta.totals.invitations_archived})`,
+                            },
+                        ]}
+                    />
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
index fb4e9361f..199252c28 100644
--- a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
@@ -27,6 +27,7 @@ import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import ReimbursementsTable from './elements/ReimbursementsTable';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function Reimbursements() {
     const activeOrganization = useActiveOrganization();
@@ -178,25 +179,15 @@ export default function Reimbursements() {
                                 Categorieën
                             </StateNavLink>
 
-                            <div className="block block-label-tabs">
-                                <div className="label-tab-set">
-                                    {archivedOptions.map((viewType) => (
-                                        <div
-                                            key={viewType.value}
-                                            onClick={() => setArchivedOption(viewType.value)}
-                                            className={`label-tab label-tab-sm ${
-                                                filterValues.archived == viewType.value ? 'active' : ''
-                                            }`}
-                                            data-dusk={`${
-                                                viewType.value
-                                                    ? 'reimbursementsFilterArchived'
-                                                    : 'reimbursementsFilterActive'
-                                            }`}>
-                                            {viewType.name}
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
+                            <BlockLabelTabs
+                                value={filterValues.archived}
+                                setValue={(archived) => setArchivedOption(archived)}
+                                tabs={archivedOptions.map((option) => ({
+                                    value: option.value,
+                                    dusk: option.value ? 'reimbursementsFilterArchived' : 'reimbursementsFilterActive',
+                                    label: option.name,
+                                }))}
+                            />
 
                             <div className="form">
                                 <div className="form-group">
diff --git a/react/src/dashboard/components/pages/reservations/Reservations.tsx b/react/src/dashboard/components/pages/reservations/Reservations.tsx
index 417e7b1ca..bf138d01a 100644
--- a/react/src/dashboard/components/pages/reservations/Reservations.tsx
+++ b/react/src/dashboard/components/pages/reservations/Reservations.tsx
@@ -28,6 +28,8 @@ import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import ReservationsTableFilters, { ReservationsTableFiltersProps } from './elements/ReservationsTableFilters';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import ToggleControl from '../../elements/forms/controls/ToggleControl';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function Reservations() {
     const identity = useAuthIdentity();
@@ -68,6 +70,7 @@ export default function Reservations() {
             order_by: 'created_at',
             order_dir: 'desc',
             per_page: paginatorService.getPerPage(paginatorKey),
+            page: 1,
         },
         {
             queryParams: {
@@ -313,23 +316,21 @@ export default function Reservations() {
                                 )}
 
                                 <div className="flex-col">
-                                    <div className="block block-label-tabs pull-right">
-                                        <div className="label-tab-set">
-                                            <div
-                                                className={`label-tab label-tab-sm ${
-                                                    shownReservationsType == 'active' ? 'active' : ''
-                                                }`}
-                                                onClick={() => setShownReservationType('active')}>
-                                                Lopend ({activeReservations.meta.total})
-                                            </div>
-                                            <div
-                                                className={`label-tab label-tab-sm ${
-                                                    shownReservationsType == 'archived' ? 'active' : ''
-                                                }`}
-                                                onClick={() => setShownReservationType('archived')}>
-                                                Archief ({archivedReservations.meta.total})
-                                            </div>
-                                        </div>
+                                    <div className="pull-right">
+                                        <BlockLabelTabs
+                                            value={shownReservationsType}
+                                            setValue={(type) => setShownReservationType(type)}
+                                            tabs={[
+                                                {
+                                                    value: 'active',
+                                                    label: `Lopend (${activeReservations.meta.total})`,
+                                                },
+                                                {
+                                                    value: 'archived',
+                                                    label: `Archief (${archivedReservations.meta.total})`,
+                                                },
+                                            ]}
+                                        />
                                     </div>
                                 </div>
 
@@ -362,23 +363,19 @@ export default function Reservations() {
                 {activeOrganization.identity_address == identity.address && (
                     <div className="card-section form">
                         <div className="flex flex flex-end">
-                            <label>
-                                <div className="form-toggle flex">
-                                    <input
-                                        type="checkbox"
-                                        id="accepted_by_default"
-                                        checked={acceptedByDefault}
-                                        onChange={(e) => toggleAcceptByDefault(e.target.checked)}
-                                    />
-                                    <div className="form-toggle-inner">
+                            <ToggleControl
+                                id="accepted_by_default"
+                                className="flex"
+                                checked={acceptedByDefault}
+                                labelRight={false}
+                                onChange={(_, checked) => toggleAcceptByDefault(checked)}
+                                customElement={
+                                    <span className="flex">
                                         <em className="mdi mdi-information-outline flex" />
-                                        &nbsp;Reserveringen automatisch accepteren &nbsp;
-                                        <div className="toggle-input">
-                                            <div className="toggle-input-dot" role="button" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </label>
+                                        <span>Reserveringen automatisch accepteren</span>
+                                    </span>
+                                }
+                            />
                         </div>
                     </div>
                 )}
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
index 3b67e257e..9cc53ec81 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
@@ -23,6 +23,7 @@ import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import usePushApiError from '../../../hooks/usePushApiError';
 import useProviderExporter from '../../../services/exporters/useProviderExporter';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function SponsorProviderOrganizations() {
     const translate = useTranslate();
@@ -197,21 +198,15 @@ export default function SponsorProviderOrganizations() {
                                     onChange={(order_by: string) => filterUpdate({ order_by })}
                                 />
 
-                                <div className="block block-label-tabs">
-                                    <div className="label-tab-set">
-                                        {stateGroups?.map((stateGroup) => (
-                                            <div
-                                                key={stateGroup.key}
-                                                data-dusk={`provider_tab_${stateGroup.key}`}
-                                                onClick={() => filterUpdate({ state_group: stateGroup.key })}
-                                                className={`label-tab label-tab-sm ${
-                                                    filterValues.state_group === stateGroup.key ? 'active' : ''
-                                                }`}>
-                                                {stateGroup.label}
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
+                                <BlockLabelTabs
+                                    value={filterValues.state_group}
+                                    setValue={(state_group) => filterUpdate({ state_group })}
+                                    tabs={stateGroups?.map((stateGroup) => ({
+                                        value: stateGroup.key,
+                                        label: stateGroup.label,
+                                        dusk: `provider_tab_${stateGroup.key}`,
+                                    }))}
+                                />
 
                                 <div className="form-group">
                                     <input
diff --git a/react/src/dashboard/components/pages/transactions/Transactions.tsx b/react/src/dashboard/components/pages/transactions/Transactions.tsx
index 2f7f5566f..6dd1a6fc9 100644
--- a/react/src/dashboard/components/pages/transactions/Transactions.tsx
+++ b/react/src/dashboard/components/pages/transactions/Transactions.tsx
@@ -43,6 +43,7 @@ import TransactionBulksCard from './elements/TransactionBulksCard';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
+import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function Transactions() {
     const envData = useEnvData();
@@ -458,21 +459,17 @@ export default function Transactions() {
                         {isSponsor && (
                             <div className="flex form">
                                 <div>
-                                    <div className="block block-label-tabs">
-                                        <div className="label-tab-set">
-                                            {viewTypes?.map((viewTypeItem) => (
-                                                <div
-                                                    key={viewTypeItem.key}
-                                                    data-dusk={`transaction_view_${viewTypeItem.key}`}
-                                                    onClick={() => setViewType(viewTypeItem)}
-                                                    className={`label-tab label-tab-sm ${
-                                                        viewType.key === viewTypeItem.key ? 'active' : ''
-                                                    }`}>
-                                                    {viewTypeItem.label}
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </div>
+                                    <BlockLabelTabs
+                                        value={viewType.key}
+                                        setValue={(key) =>
+                                            setViewType(viewTypes.find((type) => type.key === key) || viewType)
+                                        }
+                                        tabs={viewTypes?.map((type) => ({
+                                            value: type.key,
+                                            dusk: `transaction_view_${type.key}`,
+                                            label: type.label,
+                                        }))}
+                                    />
                                 </div>
                             </div>
                         )}
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index ac9320e9e..48b43ccc1 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -329,7 +329,10 @@ export default function VouchersViewComponent() {
                                 )}
 
                                 {showMakeTransactionButton && (
-                                    <div className="button button-primary button-sm" onClick={makeTransaction}>
+                                    <div
+                                        className="button button-primary button-sm"
+                                        data-dusk="voucherMakeTransaction"
+                                        onClick={makeTransaction}>
                                         <em className="mdi mdi-cash-fast icon-start" />
                                         {translate('vouchers.buttons.make_transaction')}
                                     </div>
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
index 5a74e0214..8398a2392 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
@@ -147,6 +147,7 @@ export default function VoucherTransactionsCard({
                                                                     organizationId: organization.id,
                                                                 }}>
                                                                 <em className="mdi mdi-eye-outline icon-start" />
+                                                                Bekijken
                                                             </StateNavLink>
                                                         </div>
                                                     )}
diff --git a/react/src/dashboard/contexts/MainContext.tsx b/react/src/dashboard/contexts/MainContext.tsx
index 1c068bfd2..089f5bbd0 100644
--- a/react/src/dashboard/contexts/MainContext.tsx
+++ b/react/src/dashboard/contexts/MainContext.tsx
@@ -46,7 +46,6 @@ const MainProvider = ({ children }: { children: React.ReactElement }) => {
         if (envData && authIdentity) {
             return organizationService
                 .list({
-                    dependency: 'permissions,logo',
                     order_by: `is_${envData.client_type}`,
                     order_dir: 'desc',
                     per_page: 500,
diff --git a/react/src/dashboard/hooks/usePayoutBankAccounts.tsx b/react/src/dashboard/hooks/usePayoutBankAccounts.tsx
new file mode 100644
index 000000000..005db1e1e
--- /dev/null
+++ b/react/src/dashboard/hooks/usePayoutBankAccounts.tsx
@@ -0,0 +1,154 @@
+import { useEffect, useMemo, useState } from 'react';
+import useTranslate from './useTranslate';
+import usePushApiError from './usePushApiError';
+import useSetProgress from './useSetProgress';
+import usePayoutTransactionService from '../services/PayoutTransactionService';
+import PayoutBankAccount from '../props/models/PayoutBankAccount';
+
+export type BankAccountSource = 'manual' | 'fund_request' | 'profile_bank_account' | 'reimbursement' | 'payout';
+
+export type PayoutBankAccountOption = {
+    id: number | null;
+    iban?: string;
+    iban_name?: string;
+    label: string;
+};
+
+type UsePayoutBankAccountsParams = {
+    organizationId?: number;
+    fundId?: number;
+    identityId?: number;
+    identityRequired?: boolean;
+    bankAccountSource?: BankAccountSource;
+    enabled?: boolean;
+    placeholderLabel: string;
+};
+
+export default function usePayoutBankAccounts({
+    organizationId,
+    fundId,
+    identityId,
+    identityRequired = false,
+    bankAccountSource,
+    enabled = true,
+    placeholderLabel,
+}: UsePayoutBankAccountsParams) {
+    const translate = useTranslate();
+    const pushApiError = usePushApiError();
+    const setProgress = useSetProgress();
+    const payoutTransactionService = usePayoutTransactionService();
+
+    const [bankAccounts, setBankAccounts] = useState<Array<PayoutBankAccount> | null>(null);
+    const [bankAccountsLoading, setBankAccountsLoading] = useState(false);
+
+    const bankAccountOptions = useMemo((): Array<PayoutBankAccountOption> => {
+        const getTypeLabel = (type?: string): string => {
+            switch (type) {
+                case 'fund_request':
+                    return 'Aanvraag';
+                case 'profile_bank_account':
+                    return 'Handmatig';
+                case 'reimbursement':
+                    return 'Declaratie';
+                case 'payout':
+                    return 'Uitbetaling';
+                default:
+                    return '';
+            }
+        };
+
+        const options = (bankAccounts || []).map((bankAccount) => {
+            const typeLabel = getTypeLabel(bankAccount.type);
+            const accountId = bankAccount.type_id || bankAccount.id;
+            const typePrefix = typeLabel ? `${typeLabel} #${accountId}` : `#${accountId}`;
+
+            return {
+                id: accountId,
+                iban: bankAccount.iban,
+                iban_name: bankAccount.iban_name,
+                label: `${typePrefix} - ${bankAccount.iban} / ${bankAccount.iban_name}`,
+            };
+        });
+
+        return [
+            {
+                id: null,
+                label:
+                    placeholderLabel || translate('modals.modal_payout_create.options.bank_account_select_placeholder'),
+            },
+            ...options,
+        ];
+    }, [bankAccounts, placeholderLabel, translate]);
+
+    useEffect(() => {
+        if (identityRequired && !identityId) {
+            setBankAccounts([]);
+            setBankAccountsLoading(false);
+            return;
+        }
+
+        if (!enabled || !organizationId || !fundId || bankAccountSource === 'manual' || !bankAccountSource) {
+            setBankAccounts(null);
+            setBankAccountsLoading(false);
+            return;
+        }
+
+        let canceled = false;
+
+        const fetchBankAccounts = async () => {
+            setProgress(0);
+            setBankAccountsLoading(true);
+
+            const collected: Array<PayoutBankAccount> = [];
+            let page = 1;
+            let lastPage = 1;
+
+            try {
+                do {
+                    const res = await payoutTransactionService.bankAccounts(organizationId, {
+                        page,
+                        per_page: 1000,
+                        type: bankAccountSource,
+                        identity_id: identityId,
+                    });
+
+                    collected.push(...(res.data?.data || []));
+                    lastPage = res.data?.meta?.last_page || page;
+                    page += 1;
+                } while (!canceled && page <= lastPage);
+
+                if (!canceled) {
+                    setBankAccounts(collected);
+                }
+            } catch (err) {
+                if (!canceled) {
+                    setBankAccounts([]);
+                    pushApiError(err);
+                }
+            } finally {
+                if (!canceled) {
+                    setBankAccountsLoading(false);
+                    setProgress(100);
+                }
+            }
+        };
+
+        fetchBankAccounts().then();
+
+        return () => {
+            canceled = true;
+        };
+    }, [
+        bankAccountSource,
+        enabled,
+        fundId,
+        identityId,
+        identityRequired,
+        organizationId,
+        payoutTransactionService,
+        pushApiError,
+        setProgress,
+    ]);
+
+    return { bankAccounts, bankAccountsLoading, bankAccountOptions };
+}
diff --git a/react/src/dashboard/i18n/nl/modals/modal-payout-create.js b/react/src/dashboard/i18n/nl/modals/modal-payout-create.js
index 1322dbaf8..638f7e1dd 100644
--- a/react/src/dashboard/i18n/nl/modals/modal-payout-create.js
+++ b/react/src/dashboard/i18n/nl/modals/modal-payout-create.js
@@ -5,10 +5,27 @@ export default {
         allocate_by: 'Toewijzingsmethode',
         assign_by_type: 'Methode',
         amount: 'Bedrag',
+        bank_account_source: 'Bron bankrekening',
+        bank_account: 'Bankrekening',
         iban: 'Naar IBAN',
         iban_name: 'Tenaamstelling IBAN',
         description: 'Omschrijving',
     },
+    info: {
+        fund: 'Selecteer het fonds waaruit de uitbetaling wordt gedaan. De regels die op dit fonds van toepassing zijn, worden automatisch overgenomen voor de uitbetaling.',
+        allocate_by: 'Kies of het bedrag vrij is (handmatig invoeren) of een vooraf ingesteld bedrag uit het fonds.',
+        amount: 'Het bedrag dat wordt uitbetaald. Bij vrij bedrag kunt u een bedrag tussen het minimum en maximum invoeren. Bij vaste bedragen selecteert u een vooraf ingesteld bedrag.',
+        assign_by_type: 'Koppel de uitbetaling optioneel aan een e-mailadres of BSN van de ontvanger.',
+        email: 'Voer het e-mailadres van de ontvanger in.',
+        bsn: 'Voer het BSN van de ontvanger in.',
+        bank_account_source:
+            'Kies de bron voor de bankrekening. U kunt handmatig invoeren, zoeken via een aanvraag, of een bankrekening gebruiken uit eerdere transacties.',
+        bank_account:
+            'Selecteer een bankrekening uit de beschikbare opties. De bankrekening wordt automatisch ingevuld met IBAN en tenaamstelling.',
+        iban: 'IBAN van de ontvanger. Dit is het internationale bankrekeningnummer waar het bedrag naartoe wordt overgemaakt.',
+        iban_name: 'Naam zoals geregistreerd bij de bank. Dit moet overeenkomen met de naam op de bankrekening.',
+        description: 'Optionele omschrijving voor de betaling. Deze wordt meegestuurd met de uitbetaling.',
+    },
     tooltips: {
         assign_type: [
             'Selecteer het fonds waarvoor het tegoed wordt aangemaakt. ',
@@ -21,4 +38,12 @@ export default {
         cancel: 'Annuleren',
         submit: 'Bevestigen',
     },
+    options: {
+        bank_account_source_manual: 'Handmatige invoer',
+        bank_account_source_fund_request: 'Zoeken via aanvraag',
+        bank_account_source_profile_bank_account: 'Handmatige bankrekening',
+        bank_account_source_reimbursement: 'Declaratie',
+        bank_account_source_payout: 'Uitbetaling',
+        bank_account_select_placeholder: 'Selecteer aanvraag',
+    },
 };
diff --git a/react/src/dashboard/i18n/nl/modals/modal-voucher-transaction.js b/react/src/dashboard/i18n/nl/modals/modal-voucher-transaction.js
index 51a1d4084..d7cd358b6 100644
--- a/react/src/dashboard/i18n/nl/modals/modal-voucher-transaction.js
+++ b/react/src/dashboard/i18n/nl/modals/modal-voucher-transaction.js
@@ -21,6 +21,8 @@ export default {
         target: 'Overboeken naar',
         target_iban: 'IBAN-nummer',
         target_name: 'IBAN-naam',
+        bank_account_source: 'Bron bankrekening',
+        bank_account: 'Bankrekening',
         target_provider_option: 'Aanbieder',
         target_iban_option: 'Bankrekening',
         iban_source: 'Soort',
@@ -28,6 +30,14 @@ export default {
         reimbursement_source: 'Declaratie',
         manual_source: 'Handmatig',
     },
+    options: {
+        bank_account_source_manual: 'Handmatige invoer',
+        bank_account_source_fund_request: 'Zoeken via aanvraag',
+        bank_account_source_profile_bank_account: 'Handmatige bankrekening',
+        bank_account_source_reimbursement: 'Declaratie',
+        bank_account_source_payout: 'Uitbetaling',
+        bank_account_select_placeholder: 'Selecteer bankrekening',
+    },
     buttons: {
         cancel: 'Annuleren',
         submit: 'Betaal',
diff --git a/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx b/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
index a9f426b95..2e6c5b10e 100644
--- a/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
+++ b/react/src/dashboard/layout/elements/aside/LayoutAsideSponsor.tsx
@@ -220,6 +220,7 @@ export default function LayoutAsideSponsor({ organization }: { organization: Org
                         state: DashboardRoutes.PAYOUTS,
                         stateParams: { organizationId: organization?.id },
                         show: organization.allow_payouts && hasPermission(organization, Permission.MANAGE_PAYOUTS),
+                        dusk: 'payoutsNav',
                     },
                     {
                         id: 'physical_cards',
diff --git a/react/src/dashboard/props/models/Announcement.tsx b/react/src/dashboard/props/models/Announcement.tsx
index bb0fe118f..1d21bda05 100644
--- a/react/src/dashboard/props/models/Announcement.tsx
+++ b/react/src/dashboard/props/models/Announcement.tsx
@@ -1,6 +1,6 @@
 export default interface Announcement {
     id: number;
-    type: string;
+    type: 'warning' | 'danger' | 'success' | 'primary' | 'default';
     title: string;
     active?: boolean;
     description?: string;
diff --git a/react/src/dashboard/props/models/Fund.tsx b/react/src/dashboard/props/models/Fund.tsx
index a8940df90..c4b0243e8 100644
--- a/react/src/dashboard/props/models/Fund.tsx
+++ b/react/src/dashboard/props/models/Fund.tsx
@@ -137,7 +137,6 @@ export default interface Fund {
     faq_title?: string;
     allow_reimbursements?: boolean;
     allow_voucher_payouts?: boolean;
-    allow_voucher_payout_amount?: string | null;
     allow_voucher_payout_count?: number | null;
     allow_physical_cards?: boolean;
     allow_blocking_vouchers?: boolean;
diff --git a/react/src/dashboard/props/models/PayoutBankAccount.tsx b/react/src/dashboard/props/models/PayoutBankAccount.tsx
new file mode 100644
index 000000000..324138206
--- /dev/null
+++ b/react/src/dashboard/props/models/PayoutBankAccount.tsx
@@ -0,0 +1,11 @@
+export default interface PayoutBankAccount {
+    id?: number;
+    iban: string;
+    iban_name: string;
+    type?: 'fund_request' | 'profile_bank_account' | 'reimbursement' | 'payout';
+    type_id: number;
+    created_at?: string;
+    created_at_locale?: string;
+    updated_at?: string;
+    updated_at_locale?: string;
+}
diff --git a/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx b/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
index 899d3ba76..153cdbd29 100644
--- a/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
+++ b/react/src/dashboard/props/models/Sponsor/SponsorIdentity.tsx
@@ -7,11 +7,13 @@ export type SponsorIdentityCounts = {
 };
 
 export type ProfileBankAccount = {
-    id: number;
+    id?: number;
     name: string;
     iban: string;
     created_by: string;
     created_by_locale: string;
+    type?: 'profile_bank_account' | 'reimbursement' | 'payout' | 'fund_request';
+    type_id?: number;
     created_at: string;
     created_at_locale: string;
     updated_at: string;
diff --git a/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx b/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
index 93523ecb7..6459de42a 100644
--- a/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
+++ b/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
@@ -51,6 +51,7 @@ export default interface SponsorVoucher {
     amount_available_locale?: string;
     amount_spent?: string;
     amount_spent_locale?: string;
+    identity_id?: number;
     note?: string;
     expire_at_locale?: string;
     in_use?: boolean;
diff --git a/react/src/dashboard/props/models/Voucher.tsx b/react/src/dashboard/props/models/Voucher.tsx
index 1e5107fdd..1f51cd9ab 100644
--- a/react/src/dashboard/props/models/Voucher.tsx
+++ b/react/src/dashboard/props/models/Voucher.tsx
@@ -66,7 +66,7 @@ export default interface Voucher {
     address?: string;
     fund_id: number;
     expired?: boolean;
-    fund: Fund;
+    fund: Fund & { voucher_payout_fixed_amount?: string | null };
     type?: 'regular' | 'product';
     state?: string;
     state_locale?: string;
diff --git a/react/src/dashboard/services/PayoutTransactionService.ts b/react/src/dashboard/services/PayoutTransactionService.ts
index 8f8259bcf..e61e33442 100644
--- a/react/src/dashboard/services/PayoutTransactionService.ts
+++ b/react/src/dashboard/services/PayoutTransactionService.ts
@@ -5,6 +5,7 @@ import Transaction from '../props/models/Transaction';
 import { ConfigurableTableColumn } from '../components/pages/vouchers/hooks/useConfigurableTable';
 import Papa from 'papaparse';
 import PayoutTransaction from '../props/models/PayoutTransaction';
+import PayoutBankAccount from '../props/models/PayoutBankAccount';
 
 export class PayoutTransactionService<T = PayoutTransaction> {
     /**
@@ -23,6 +24,10 @@ export class PayoutTransactionService<T = PayoutTransaction> {
         return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/payouts`, data);
     }
 
+    public bankAccounts(organizationId: number, data: object = {}): Promise<ApiResponse<PayoutBankAccount>> {
+        return this.apiRequest.get(`${this.prefix}/${organizationId}/sponsor/payouts/bank-accounts`, data);
+    }
+
     public store(organizationId: number, data: object = {}): Promise<ApiResponseSingle<Transaction>> {
         return this.apiRequest.post(`${this.prefix}/${organizationId}/sponsor/payouts`, data);
     }
diff --git a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
index 8141ef0d1..cec3850a1 100644
--- a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
+++ b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
@@ -259,7 +259,7 @@ export default function ModalPhysicalCardType({
                                 />
                             )}
 
-                            <FormError className={'text-center'} error={activateCodeForm.errors?.code} />
+                            <FormError error={activateCodeForm.errors?.code} textAlign="center" />
                         </div>
                     </div>
                     <div className="modal-footer">
diff --git a/react/src/webshop/components/modals/ModalVoucherPayout.tsx b/react/src/webshop/components/modals/ModalVoucherPayout.tsx
index 4a9123dad..de60ea2c5 100644
--- a/react/src/webshop/components/modals/ModalVoucherPayout.tsx
+++ b/react/src/webshop/components/modals/ModalVoucherPayout.tsx
@@ -16,6 +16,7 @@ import UIControlCheckbox from '../../../dashboard/components/elements/forms/ui-c
 import { currencyFormat } from '../../../dashboard/helpers/string';
 import BlockWarning from '../elements/block-warning/BlockWarning';
 import TranslateHtml from '../../../dashboard/components/elements/translate-html/TranslateHtml';
+import useFundRequestBankAccounts from '../../hooks/useFundRequestBankAccounts';
 
 export default function ModalVoucherPayout({
     modal,
@@ -36,7 +37,9 @@ export default function ModalVoucherPayout({
 
     const [state, setState] = useState<'form' | 'success'>('form');
     const [voucherList] = useState<Array<Voucher>>(vouchers || []);
-    const eligibleVouchers = usePayoutEligibleVouchers(voucherList);
+
+    const { fundRequestAccounts } = useFundRequestBankAccounts();
+    const eligibleVouchers = usePayoutEligibleVouchers(voucherList, fundRequestAccounts);
 
     const finish = useCallback(() => {
         modal.close();
@@ -48,12 +51,17 @@ export default function ModalVoucherPayout({
             voucher_id: selectedVoucher?.id || eligibleVouchers?.[0]?.id || null,
             amount: '',
             accept_compliance_rules: false,
+            fund_request_id: fundRequestAccounts?.[0]?.type_id || null,
         },
         (values) => {
             setProgress(0);
 
             payoutService
-                .store({ voucher_id: values.voucher_id, amount: values.amount })
+                .store({
+                    voucher_id: values.voucher_id,
+                    amount: values.amount,
+                    fund_request_id: values.fund_request_id,
+                })
                 .then(() => {
                     setState('success');
                 })
@@ -70,12 +78,23 @@ export default function ModalVoucherPayout({
         return eligibleVouchers.find((voucher) => voucher.id === form.values.voucher_id);
     }, [eligibleVouchers, form.values.voucher_id]);
 
+    const selectedBankAccount = useMemo(() => {
+        return fundRequestAccounts?.find((account) => account.type_id === form.values.fund_request_id);
+    }, [fundRequestAccounts, form.values.fund_request_id]);
+
+    const fundRequestOptions = useMemo(() => {
+        return (fundRequestAccounts || []).map((account) => ({
+            id: account.type_id,
+            name: `${account.created_by_locale} #${account.type_id} - ${account.iban} / ${account.name}`,
+        }));
+    }, [fundRequestAccounts]);
+
     const selectedVoucherId = selectedVoucherItem?.id;
     const updateForm = form.update;
 
     const fixedPayoutAmount = useMemo(() => {
-        return selectedVoucherItem?.fund?.allow_voucher_payout_amount;
-    }, [selectedVoucherItem?.fund?.allow_voucher_payout_amount]);
+        return selectedVoucherItem?.fund?.voucher_payout_fixed_amount;
+    }, [selectedVoucherItem?.fund?.voucher_payout_fixed_amount]);
 
     const payoutCountWarning = useMemo(() => {
         if (!selectedVoucherItem) {
@@ -123,21 +142,6 @@ export default function ModalVoucherPayout({
 
     const warningMessage = payoutCountWarning || payoutAmountWarning;
 
-    const fixedPayoutAmountOption = useMemo(() => {
-        if (fixedPayoutAmount === null || fixedPayoutAmount === undefined) {
-            return [];
-        }
-
-        const amountNumber = parseFloat(fixedPayoutAmount);
-
-        return [
-            {
-                key: fixedPayoutAmount,
-                name: isNaN(amountNumber) ? fixedPayoutAmount : currencyFormat(amountNumber),
-            },
-        ];
-    }, [fixedPayoutAmount]);
-
     useEffect(() => {
         if (!selectedVoucherId) {
             return;
@@ -150,11 +154,35 @@ export default function ModalVoucherPayout({
         }
     }, [fixedPayoutAmount, selectedVoucherId, updateForm]);
 
+    useEffect(() => {
+        if (!fundRequestAccounts?.length) {
+            return;
+        }
+
+        if (!form.values.fund_request_id) {
+            updateForm({ fund_request_id: fundRequestAccounts[0].type_id });
+            return;
+        }
+
+        if (!fundRequestAccounts.find((account) => account.type_id === form.values.fund_request_id)) {
+            updateForm({ fund_request_id: fundRequestAccounts[0].type_id });
+        }
+    }, [fundRequestAccounts, form.values.fund_request_id, updateForm]);
+
+    useEffect(() => {
+        if (!eligibleVouchers.length || form.values.voucher_id) {
+            return;
+        }
+
+        updateForm({ voucher_id: eligibleVouchers[0].id });
+    }, [eligibleVouchers, form.values.voucher_id, updateForm]);
+
     const disableSubmit = useMemo(() => {
         return (
             form.isLocked ||
             !form.values.voucher_id ||
             !form.values.amount ||
+            !form.values.fund_request_id ||
             !form.values.accept_compliance_rules ||
             Boolean(warningMessage)
         );
@@ -162,6 +190,7 @@ export default function ModalVoucherPayout({
         form.isLocked,
         form.values.accept_compliance_rules,
         form.values.amount,
+        form.values.fund_request_id,
         form.values.voucher_id,
         warningMessage,
     ]);
@@ -197,9 +226,9 @@ export default function ModalVoucherPayout({
                             <FormGroup
                                 label={translate('voucher.payout.voucher_label')}
                                 error={form.errors?.voucher_id}
-                                input={(inputId) => (
+                                input={(id) => (
                                     <SelectControl
-                                        id={inputId}
+                                        id={id}
                                         className="form-control"
                                         propKey="id"
                                         propValue="address"
@@ -218,26 +247,54 @@ export default function ModalVoucherPayout({
 
                             {!warningMessage && (
                                 <Fragment>
-                                    <FormGroup
-                                        label={translate('voucher.payout.amount')}
-                                        required={true}
-                                        error={form.errors?.amount}
-                                        input={(inputId) =>
-                                            fixedPayoutAmount !== null && fixedPayoutAmount !== undefined ? (
+                                    {fundRequestOptions.length > 1 && (
+                                        <FormGroup
+                                            label={translate('profile.bank_accounts.source')}
+                                            error={form.errors?.fund_request_id}
+                                            input={(id) => (
                                                 <SelectControl
-                                                    id={inputId}
+                                                    id={id}
                                                     className="form-control"
-                                                    propKey="key"
+                                                    propKey="id"
                                                     propValue="name"
                                                     allowSearch={false}
-                                                    options={fixedPayoutAmountOption}
-                                                    value={form.values.amount ?? ''}
-                                                    onChange={(amount?: string) => form.update({ amount })}
-                                                    dusk="voucherPayoutAmount"
+                                                    options={fundRequestOptions}
+                                                    value={form.values.fund_request_id ?? ''}
+                                                    onChange={(fund_request_id?: number) =>
+                                                        form.update({ fund_request_id })
+                                                    }
+                                                    dusk="voucherPayoutFundRequestSelect"
                                                 />
-                                            ) : (
+                                            )}
+                                        />
+                                    )}
+
+                                    <FormGroup
+                                        label={translate('voucher.payout.amount')}
+                                        required={true}
+                                        error={form.errors?.amount}
+                                        input={(id) => {
+                                            if (fixedPayoutAmount !== null && fixedPayoutAmount !== undefined) {
+                                                const amountNumber = parseFloat(fixedPayoutAmount);
+                                                const displayValue = isNaN(amountNumber)
+                                                    ? fixedPayoutAmount
+                                                    : currencyFormat(amountNumber);
+
+                                                return (
+                                                    <input
+                                                        id={id}
+                                                        className="form-control"
+                                                        type="text"
+                                                        value={displayValue}
+                                                        disabled={true}
+                                                        data-dusk="voucherPayoutAmount"
+                                                    />
+                                                );
+                                            }
+
+                                            return (
                                                 <input
-                                                    id={inputId}
+                                                    id={id}
                                                     className="form-control"
                                                     type="number"
                                                     min={0.1}
@@ -247,8 +304,8 @@ export default function ModalVoucherPayout({
                                                     placeholder={translate('voucher.payout.amount')}
                                                     data-dusk="voucherPayoutAmount"
                                                 />
-                                            )
-                                        }
+                                            );
+                                        }}
                                     />
 
                                     <div className="row">
@@ -256,13 +313,13 @@ export default function ModalVoucherPayout({
                                             <FormGroup
                                                 label={translate('voucher.payout.iban')}
                                                 required={true}
-                                                input={(inputId) => (
+                                                input={(id) => (
                                                     <input
-                                                        id={inputId}
+                                                        id={id}
                                                         className="form-control"
                                                         type="text"
                                                         disabled={true}
-                                                        value={selectedVoucherItem?.fund_request?.iban}
+                                                        value={selectedBankAccount?.iban || ''}
                                                         placeholder={translate('voucher.payout.iban')}
                                                     />
                                                 )}
@@ -273,13 +330,13 @@ export default function ModalVoucherPayout({
                                                 label={translate('voucher.payout.iban_name')}
                                                 required={true}
                                                 error={form.errors?.iban_name}
-                                                input={(inputId) => (
+                                                input={(id) => (
                                                     <input
-                                                        id={inputId}
+                                                        id={id}
                                                         className="form-control"
                                                         type="text"
                                                         disabled={true}
-                                                        value={selectedVoucherItem?.fund_request?.iban_name}
+                                                        value={selectedBankAccount?.name || ''}
                                                         placeholder={translate('voucher.payout.iban_name')}
                                                     />
                                                 )}
@@ -290,7 +347,7 @@ export default function ModalVoucherPayout({
                                     <FormGroup
                                         label={translate('voucher.payout.accept_compliance_rules_label')}
                                         required={true}
-                                        input={(inputId) => (
+                                        input={(id) => (
                                             <div className="flex flex-gap flex-vertical">
                                                 <BlockWarning>
                                                     <div className="block block-markdown">
@@ -300,7 +357,7 @@ export default function ModalVoucherPayout({
                                                     </div>
                                                 </BlockWarning>
                                                 <UIControlCheckbox
-                                                    id={inputId}
+                                                    id={id}
                                                     checked={form.values.accept_compliance_rules}
                                                     name="accept_compliance_rules"
                                                     label={translate('voucher.payout.accept_compliance_rules')}
diff --git a/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx b/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
index 1b0735cc0..294fdb271 100644
--- a/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
@@ -194,7 +194,7 @@ export default function FundRequestsShow() {
 
                             {showCreditInfo && (
                                 <div
-                                    className="fund-request-record-section"
+                                    className="card-section card-section-md"
                                     id={'fundRequestReceivedSection'}
                                     role="region"
                                     aria-labelledby={'fundRequestReceivedHeader'}>
@@ -207,7 +207,7 @@ export default function FundRequestsShow() {
                                     )}
 
                                     {fundRequest.vouchers?.length > 0 && (
-                                        <div className="block block-vouchers block-vouchers-with-border">
+                                        <div className="block block-vouchers">
                                             {fundRequest.vouchers.map((voucher) => (
                                                 <VoucherCard
                                                     key={voucher.id}
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestValuesOverview.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestValuesOverview.tsx
index da6117476..95ca9282b 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestValuesOverview.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestValuesOverview.tsx
@@ -59,7 +59,7 @@ export default function FundRequestValuesOverview({
     }, [criteriaSteps]);
 
     const criterionValue = useCallback(
-        (criterion: LocalCriterion, inGroup: boolean = false) => {
+        (criterion: LocalCriterion) => {
             if (criterion.record_type.type === 'select' || criterion.record_type.type === 'select_number') {
                 return (
                     criterion.record_type?.options?.find((item) => item?.value === criterion.input_value)?.name ||
@@ -67,8 +67,12 @@ export default function FundRequestValuesOverview({
                 );
             }
 
-            if (inGroup && criterion.record_type.type === 'bool' && criterion.record_type.control_type === 'checkbox') {
-                return criterion.input_value || translate('fund_request.options.no');
+            if (criterion.record_type.type === 'bool' && criterion.record_type.control_type === 'checkbox') {
+                return (
+                    criterion.record_type?.options?.find((item) => item?.value === criterion.input_value)?.name ||
+                    criterion.input_value ||
+                    translate('fund_request.options.no')
+                );
             }
 
             return criterion.input_value;
@@ -131,7 +135,7 @@ export default function FundRequestValuesOverview({
                                                                         {criterion.title || criterion.title_default}
                                                                     </div>
                                                                     <div className="preview-item-values-item-value">
-                                                                        {criterionValue(criterion, true)}
+                                                                        {criterionValue(criterion)}
                                                                     </div>
                                                                 </div>
                                                             ))}
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/criteria/FundRequestCriteriaChildren.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/criteria/FundRequestCriteriaChildren.tsx
index 2f8fc7a17..6911b18a8 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/criteria/FundRequestCriteriaChildren.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/criteria/FundRequestCriteriaChildren.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback } from 'react';
 import useTranslate from '../../../../../../../dashboard/hooks/useTranslate';
 import RecordType from '../../../../../../../dashboard/props/models/RecordType';
 import { Prefills } from '../../../FundRequest';
-import { upperFirst } from 'lodash';
+import { snakeCase, upperFirst } from 'lodash';
 
 export default function FundRequestCriteriaChildren({
     prefills,
@@ -15,7 +15,7 @@ export default function FundRequestCriteriaChildren({
 
     const splitChildLabel = useCallback((text?: string) => {
         const match = text ? text.match(/^(Kind\s+\d+)\s+(.+)$/) : null;
-        return match ? { child: match[1], value: upperFirst(match[2]) } : null;
+        return match ? { child: snakeCase(match[1]), value: upperFirst(match[2]) } : null;
     }, []);
 
     return (
@@ -34,7 +34,11 @@ export default function FundRequestCriteriaChildren({
                                     {index === 0 && (
                                         <div className="preview-item-values-item">
                                             <div className="preview-item-values-item-title">
-                                                {splitChildLabel(recordTypesByKey[child.record_type_key]?.name)?.child}
+                                                {translate(
+                                                    'fund_request.prefills.children_list.' +
+                                                        splitChildLabel(recordTypesByKey[child.record_type_key]?.name)
+                                                            ?.child,
+                                                )}
                                             </div>
                                         </div>
                                     )}
diff --git a/react/src/webshop/components/pages/me-app/MeApp.tsx b/react/src/webshop/components/pages/me-app/MeApp.tsx
index 70c5176df..b81acc472 100644
--- a/react/src/webshop/components/pages/me-app/MeApp.tsx
+++ b/react/src/webshop/components/pages/me-app/MeApp.tsx
@@ -36,7 +36,7 @@ export default function MeApp() {
                                     values={{ download_link: envData.config.me_app_link }}
                                 />
                             </div>
-                            <AppLinks className={'hide-sm'} type={'lg'} />
+                            <AppLinks className={'hide-sm'} />
                         </div>
                     </div>
                     <div className="me_app-download flex-center">
diff --git a/react/src/webshop/components/pages/payouts/Payouts.tsx b/react/src/webshop/components/pages/payouts/Payouts.tsx
index 32d174466..f6e08b0f9 100644
--- a/react/src/webshop/components/pages/payouts/Payouts.tsx
+++ b/react/src/webshop/components/pages/payouts/Payouts.tsx
@@ -19,6 +19,7 @@ import usePayoutEligibleVouchers from '../vouchers-show/hooks/usePayoutEligibleV
 import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
 import ModalVoucherPayout from '../../modals/ModalVoucherPayout';
 import IconPayout from '../../../../../assets/forus-webshop/resources/_webshop-common/assets/img/icon-payout.svg';
+import useFundRequestBankAccounts from '../../../hooks/useFundRequestBankAccounts';
 
 export default function Payouts() {
     const envData = useEnvData();
@@ -32,7 +33,9 @@ export default function Payouts() {
 
     const [payouts, setPayoutTransactions] = useState<PaginationData<PayoutTransaction>>(null);
     const [vouchers, setVouchers] = useState<Array<Voucher>>(null);
-    const payoutEligibleVouchers = usePayoutEligibleVouchers(vouchers);
+
+    const { fundRequestAccounts } = useFundRequestBankAccounts();
+    const payoutEligibleVouchers = usePayoutEligibleVouchers(vouchers, fundRequestAccounts);
 
     const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{ q: string }>(
         { q: '' },
diff --git a/react/src/webshop/components/pages/products-show/ProductsShow.tsx b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
index 32bd35e06..a7438b856 100644
--- a/react/src/webshop/components/pages/products-show/ProductsShow.tsx
+++ b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
@@ -41,6 +41,7 @@ import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
 import ModalVoucherPayout from '../../modals/ModalVoucherPayout';
 import usePayoutEligibleVouchers from '../vouchers-show/hooks/usePayoutEligibleVouchers';
 import useIsPayoutInfoProduct from './hooks/useIsPayoutInfoProduct';
+import useFundRequestBankAccounts from '../../../hooks/useFundRequestBankAccounts';
 
 export default function ProductsShow() {
     const { id } = useParams();
@@ -70,7 +71,8 @@ export default function ProductsShow() {
     const [vouchers, setVouchers] = useState<Array<Voucher>>(null);
 
     const isPayoutInfoProduct = useIsPayoutInfoProduct(product, appConfigs);
-    const payoutEligibleVouchers = usePayoutEligibleVouchers(vouchers);
+    const { fundRequestAccounts } = useFundRequestBankAccounts();
+    const payoutEligibleVouchers = usePayoutEligibleVouchers(vouchers, fundRequestAccounts);
 
     const { showBack } = useStateParams<{ showBack: boolean }>();
     const price = useProductPriceMinLocale(product);
diff --git a/react/src/webshop/components/pages/profile/Profile.tsx b/react/src/webshop/components/pages/profile/Profile.tsx
index 8bd1e96d2..1e9260540 100644
--- a/react/src/webshop/components/pages/profile/Profile.tsx
+++ b/react/src/webshop/components/pages/profile/Profile.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
-import BlockKeyValueList from '../../elements/block-key-value-list/BlockKeyValueList';
 import RecordType from '../../../../dashboard/props/models/RecordType';
 import ProfileModel from '../../../../dashboard/props/models/Profile';
 import { ProfileRecords, ProfileRecordType } from '../../../../dashboard/props/models/Sponsor/SponsorIdentity';
@@ -14,6 +13,8 @@ import { differenceInYears } from 'date-fns';
 import { dateParse } from '../../../../dashboard/helpers/dates';
 import IdentityAddressCard from './cards/IdentityAddressCard';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import ProfileBankAccountsCard from './cards/ProfileBankAccountsCard';
+import BlockKeyValueList from '../../elements/block-key-value-list/BlockKeyValueList';
 
 export default function Profile() {
     const translate = useTranslate();
@@ -192,33 +193,7 @@ export default function Profile() {
                         setProfile={setProfile}
                     />
 
-                    {profile?.bank_accounts?.length > 0 && (
-                        <div className="card">
-                            <div className="card-header">
-                                <h2 className="card-title">{translate('profile.bank_accounts.title')}</h2>
-                            </div>
-                            <div className="card-section">
-                                <div className="flex flex-vertical flex-gap">
-                                    {profile?.bank_accounts?.map((bank_account, index) => (
-                                        <div className="card-section-pane" key={index}>
-                                            <BlockKeyValueList
-                                                items={[
-                                                    {
-                                                        label: translate('profile.bank_accounts.iban'),
-                                                        value: bank_account.iban,
-                                                    },
-                                                    {
-                                                        label: translate('profile.bank_accounts.name'),
-                                                        value: bank_account.name,
-                                                    },
-                                                ]}
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    )}
+                    <ProfileBankAccountsCard bankAccounts={profile?.bank_accounts || []} />
                 </Fragment>
             )}
         </BlockShowcaseProfile>
diff --git a/react/src/webshop/components/pages/profile/cards/ProfileBankAccountsCard.tsx b/react/src/webshop/components/pages/profile/cards/ProfileBankAccountsCard.tsx
new file mode 100644
index 000000000..826231cbb
--- /dev/null
+++ b/react/src/webshop/components/pages/profile/cards/ProfileBankAccountsCard.tsx
@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import useTranslate from '../../../../../dashboard/hooks/useTranslate';
+import BlockKeyValueList from '../../../elements/block-key-value-list/BlockKeyValueList';
+import { ProfileBankAccount } from '../../../../../dashboard/props/models/Sponsor/SponsorIdentity';
+import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+
+export default function ProfileBankAccountsCard({ bankAccounts }: { bankAccounts: Array<ProfileBankAccount> }) {
+    const translate = useTranslate();
+
+    const renderBankAccountSource = useCallback((bank_account: ProfileBankAccount) => {
+        const label = bank_account.type_id
+            ? `${bank_account.created_by_locale} #${bank_account.type_id}`
+            : bank_account.created_by_locale;
+
+        if (!bank_account.type_id || bank_account.type === 'profile_bank_account') {
+            return label;
+        }
+
+        if (bank_account.type === 'fund_request') {
+            return (
+                <StateNavLink name={WebshopRoutes.FUND_REQUEST_SHOW} params={{ id: bank_account.type_id }}>
+                    {label}
+                </StateNavLink>
+            );
+        }
+
+        if (bank_account.type === 'reimbursement') {
+            return (
+                <StateNavLink name={WebshopRoutes.REIMBURSEMENT} params={{ id: bank_account.type_id }}>
+                    {label}
+                </StateNavLink>
+            );
+        }
+
+        if (bank_account.type === 'payout') {
+            return <StateNavLink name={WebshopRoutes.PAYOUTS}>{label}</StateNavLink>;
+        }
+
+        return label;
+    }, []);
+
+    if (!bankAccounts?.length) {
+        return null;
+    }
+
+    return (
+        <div className="card">
+            <div className="card-header">
+                <h2 className="card-title">{translate('profile.bank_accounts.title')}</h2>
+            </div>
+            <div className="card-section">
+                <div className="flex flex-vertical flex-gap">
+                    {bankAccounts.map((bank_account, index) => {
+                        const items = [
+                            {
+                                label: translate('profile.bank_accounts.iban'),
+                                value: bank_account.iban,
+                            },
+                            {
+                                label: translate('profile.bank_accounts.name'),
+                                value: bank_account.name,
+                            },
+                            ...(bank_account.type !== 'profile_bank_account'
+                                ? [
+                                      {
+                                          label: translate('profile.bank_accounts.source'),
+                                          value: renderBankAccountSource(bank_account),
+                                      },
+                                  ]
+                                : []),
+                        ];
+
+                        return (
+                            <div className="card-section-pane" key={index}>
+                                <BlockKeyValueList items={items} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
index b5013f0dc..970ba3c87 100644
--- a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
+++ b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
@@ -287,7 +287,7 @@ export default function ReimbursementsEdit() {
                                 }}>
                                 {generalErrorMsg && (
                                     <div className="card-section text-center">
-                                        <FormError error={generalErrorMsg} className={'text-semibold'} />
+                                        <FormError error={generalErrorMsg} textWeight="semibold" />
                                     </div>
                                 )}
 
diff --git a/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx b/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx
index fb016e733..9ec454536 100644
--- a/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx
@@ -20,6 +20,7 @@ import IconReimbursement from '../../../../../../assets/forus-webshop/resources/
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
 import ModalVoucherPayout from '../../../modals/ModalVoucherPayout';
 import usePayoutEligibleVouchers from '../hooks/usePayoutEligibleVouchers';
+import useFundRequestBankAccounts from '../../../../hooks/useFundRequestBankAccounts';
 
 export default function VoucherActions({
     voucher,
@@ -41,7 +42,8 @@ export default function VoucherActions({
 
     const voucherCard = useVoucherCard(voucher);
     const showPhysicalCardsOption = useShowPhysicalCardsOption(voucher);
-    const payoutEligibleVouchers = usePayoutEligibleVouchers([voucher].filter(Boolean));
+    const { fundRequestAccounts } = useFundRequestBankAccounts();
+    const payoutEligibleVouchers = usePayoutEligibleVouchers([voucher].filter(Boolean), fundRequestAccounts);
 
     const fundPhysicalCardTypes = useMemo(() => {
         return voucher?.fund?.fund_physical_card_types;
diff --git a/react/src/webshop/components/pages/vouchers-show/hooks/usePayoutEligibleVouchers.ts b/react/src/webshop/components/pages/vouchers-show/hooks/usePayoutEligibleVouchers.ts
index c51ff17ad..2facc8f81 100644
--- a/react/src/webshop/components/pages/vouchers-show/hooks/usePayoutEligibleVouchers.ts
+++ b/react/src/webshop/components/pages/vouchers-show/hooks/usePayoutEligibleVouchers.ts
@@ -1,9 +1,17 @@
 import { useMemo } from 'react';
 import Voucher from '../../../../../dashboard/props/models/Voucher';
+import { ProfileBankAccount } from '../../../../../dashboard/props/models/Sponsor/SponsorIdentity';
 
-export default function usePayoutEligibleVouchers(vouchers?: Array<Voucher> | null): Array<Voucher> {
+export default function usePayoutEligibleVouchers(
+    vouchers?: Array<Voucher> | null,
+    fundRequestAccounts?: Array<ProfileBankAccount> | null,
+): Array<Voucher> {
     return useMemo(() => {
-        if (!Array.isArray(vouchers)) {
+        if (!Array.isArray(vouchers) || vouchers.length === 0) {
+            return [];
+        }
+
+        if (!Array.isArray(fundRequestAccounts) || fundRequestAccounts.length === 0) {
             return [];
         }
 
@@ -11,7 +19,6 @@ export default function usePayoutEligibleVouchers(vouchers?: Array<Voucher> | nu
             .filter((voucher) => voucher?.fund?.allow_voucher_payouts)
             .filter((voucher) => voucher?.type !== 'product')
             .filter((voucher) => !voucher?.product_reservation?.id)
-            .filter((voucher) => voucher?.fund_request?.iban && voucher?.fund_request?.iban_name)
             .filter((voucher) => !voucher?.expired && !voucher?.deactivated && !voucher?.external);
-    }, [vouchers]);
+    }, [fundRequestAccounts, vouchers]);
 }
diff --git a/react/src/webshop/hooks/useFundRequestBankAccounts.ts b/react/src/webshop/hooks/useFundRequestBankAccounts.ts
new file mode 100644
index 000000000..589dd7174
--- /dev/null
+++ b/react/src/webshop/hooks/useFundRequestBankAccounts.ts
@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useProfileService } from '../../dashboard/services/ProfileService';
+import { ProfileBankAccount } from '../../dashboard/props/models/Sponsor/SponsorIdentity';
+import useAuthIdentity from './useAuthIdentity';
+
+export default function useFundRequestBankAccounts() {
+    const profileService = useProfileService();
+    const authIdentity = useAuthIdentity();
+    const [bankAccounts, setBankAccounts] = useState<Array<ProfileBankAccount>>(null);
+
+    const fetchProfile = useCallback(() => {
+        profileService
+            .profile()
+            .then((res) => setBankAccounts(res.data?.bank_accounts || []))
+            .catch(() => setBankAccounts([]));
+    }, [profileService]);
+
+    useEffect(() => {
+        if (!authIdentity?.profile) {
+            setBankAccounts([]);
+            return;
+        }
+
+        fetchProfile();
+    }, [authIdentity?.profile, fetchProfile]);
+
+    const fundRequestAccounts = useMemo(() => {
+        return (bankAccounts || []).filter((account) => account.type === 'fund_request');
+    }, [bankAccounts]);
+
+    return { bankAccounts, fundRequestAccounts };
+}
diff --git a/react/src/webshop/i18n/nl/pages/fund-request.mjs b/react/src/webshop/i18n/nl/pages/fund-request.mjs
index be2fb3fc5..0fd9dc865 100644
--- a/react/src/webshop/i18n/nl/pages/fund-request.mjs
+++ b/react/src/webshop/i18n/nl/pages/fund-request.mjs
@@ -240,6 +240,19 @@ export default {
         children: 'Kinderen',
         child: 'Kind',
         partner: 'Gegevens van uw partner',
+
+        children_list: {
+            kind_1: 'Kind 1',
+            kind_2: 'Kind 2',
+            kind_3: 'Kind 3',
+            kind_4: 'Kind 4',
+            kind_5: 'Kind 5',
+            kind_6: 'Kind 6',
+            kind_7: 'Kind 7',
+            kind_8: 'Kind 8',
+            kind_9: 'Kind 9',
+            kind_10: 'Kind 10',
+        },
     },
     cards: {
         back: 'Terug',
diff --git a/react/src/webshop/i18n/nl/pages/profile.mjs b/react/src/webshop/i18n/nl/pages/profile.mjs
index 5dafa145c..4e2ce2323 100644
--- a/react/src/webshop/i18n/nl/pages/profile.mjs
+++ b/react/src/webshop/i18n/nl/pages/profile.mjs
@@ -51,5 +51,6 @@ export default {
         title: 'Bankrekening',
         iban: 'IBAN',
         name: 'Tenaam stelling',
+        source: 'Bron',
     },
 };
diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index 238a0ecd1..14c6dcc79 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -1041,14 +1041,14 @@
                 "make_a_choice": "اختر واحدة"
             },
             "fund_request_step_done": {
-                "application_processing": "تم استلام طلبك. ستتم معالجة الطلب في غضون 10 أيام عمل. ستتلقى رسالة بريد إلكتروني بهذا الشأن.",
                 "application_received": "تم استلام الطلب",
                 "back": "رجوع",
                 "error_occurred": "حدث خطأ أثناء التقديم.",
                 "leave_form": "استمارة الإجازة",
                 "reason": "السبب:",
                 "sent": "تم الإرسال",
-                "sign_up": "التسجيل"
+                "sign_up": "التسجيل",
+                "application_processing": "تم استلام طلبك. ستتم معالجة الطلب في غضون 8 أسابيع كحد أقصى. ستتلقى رسالة بريد إلكتروني بهذا الشأن."
             },
             "fund_request_physical_card_request": {
                 "description": "سنقوم بإرسال بطاقتك الفعلية إلى العنوان الذي قدمته بمجرد أن تصبح جاهزة للاستخدام.",
@@ -1122,8 +1122,20 @@
             "child": "الطفل",
             "children": "الأطفال",
             "partner": "تفاصيل شريكك",
-            "subtitle": "إذا كانت معلوماتك غير صحيحة، يمكنك النقر على الزر الموجود في الأسفل.",
-            "title": "تحقق من صحة البيانات."
+            "children_list": {
+                "kind_1": "الطفل 1",
+                "kind_10": "الطفل 10",
+                "kind_2": "الطفل 2",
+                "kind_3": "الطفل 3",
+                "kind_4": "الطفل 4",
+                "kind_5": "الطفل 5",
+                "kind_6": "الطفل 6",
+                "kind_7": "الطفل 7",
+                "kind_8": "الطفل 8",
+                "kind_9": "الطفل 9"
+            },
+            "subtitle": "هل التفاصيل غير صحيحة؟ إذا كان الأمر كذلك، يرجى الاتصال بالبلدية.",
+            "title": "تم ملء التفاصيل أدناه بالفعل"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index 9a80d9e87..f28ebceb1 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -618,14 +618,14 @@
                 "make_a_choice": "Wählen Sie eine"
             },
             "fund_request_step_done": {
-                "application_processing": "Ihre Bewerbung ist eingegangen. Die Bewerbung wird innerhalb von 10 Arbeitstagen bearbeitet. Sie werden eine E-Mail darüber erhalten.",
                 "application_received": "Antrag eingegangen",
                 "back": "Zurück",
                 "error_occurred": "Bei der Anmeldung ist ein Fehler aufgetreten.",
                 "leave_form": "Urlaubsformular",
                 "reason": "Der Grund:",
                 "sent": "Gesendet!",
-                "sign_up": "Registrieren Sie sich"
+                "sign_up": "Registrieren Sie sich",
+                "application_processing": "Ihre Bewerbung ist eingegangen. Die Bewerbung wird innerhalb von maximal 8 Wochen bearbeitet. Sie erhalten darüber eine E-Mail."
             },
             "fund_request_physical_card_request": {
                 "description": "Wir senden Ihnen Ihre physische Karte an die von Ihnen angegebene Adresse, sobald sie einsatzbereit ist.",
@@ -699,8 +699,20 @@
             "child": "Kind",
             "children": "Kinder",
             "partner": "Angaben zu Ihrem Partner",
-            "subtitle": "Wenn Ihre Angaben nicht korrekt sind, können Sie auf die Schaltfläche am unteren Rand klicken.",
-            "title": "Prüfen Sie, ob die Daten korrekt sind."
+            "children_list": {
+                "kind_1": "Kind 1",
+                "kind_10": "Kind 10",
+                "kind_2": "Kind 2",
+                "kind_3": "Kind 3",
+                "kind_4": "Kind 4",
+                "kind_5": "Kind 5",
+                "kind_6": "Kind 6",
+                "kind_7": "Kind 7",
+                "kind_8": "Kind 8",
+                "kind_9": "Kind 9"
+            },
+            "subtitle": "Sind die Angaben nicht korrekt? Wenn ja, wenden Sie sich bitte an die Gemeinde.",
+            "title": "Die folgenden Angaben sind bereits ausgefüllt"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index 7b48340c8..c7f3efbd4 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -796,14 +796,14 @@
                 "make_a_choice": "Choose one"
             },
             "fund_request_step_done": {
-                "application_processing": "Your application has been received. The application will be processed within 10 business days. You will receive an email about this.",
                 "application_received": "Application received",
                 "back": "Back",
                 "error_occurred": "An error occurred while applying.",
                 "leave_form": "Leave form",
                 "reason": "Reason:",
                 "sent": "Sent!",
-                "sign_up": "Sign up"
+                "sign_up": "Sign up",
+                "application_processing": "Your application has been received. The application will be processed within a maximum of 8 weeks. You will receive an email about this."
             },
             "fund_request_physical_card_request": {
                 "description": "We will send your physical card to the address you provide as soon as it is ready for use.",
@@ -877,8 +877,20 @@
             "child": "Child",
             "children": "Children",
             "partner": "Details of your partner",
-            "subtitle": "If your information is incorrect, you can click the button at the bottom.",
-            "title": "Check that the data is correct."
+            "children_list": {
+                "kind_1": "Child 1",
+                "kind_10": "Child 10",
+                "kind_2": "Child 2",
+                "kind_3": "Child 3",
+                "kind_4": "Child 4",
+                "kind_5": "Child 5",
+                "kind_6": "Child 6",
+                "kind_7": "Child 7",
+                "kind_8": "Child 8",
+                "kind_9": "Child 9"
+            },
+            "subtitle": "Is the information not correct? If so, please contact the municipality.",
+            "title": "The information below is already filled in"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index 0f1f38f90..c45775f6f 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -618,14 +618,14 @@
                 "make_a_choice": "Choisissez une option"
             },
             "fund_request_step_done": {
-                "application_processing": "Votre demande a été reçue. La demande sera traitée dans les 10 jours ouvrables. Vous recevrez un e-mail à ce sujet.",
                 "application_received": "Demande reçue",
                 "back": "Retour",
                 "error_occurred": "Une erreur s'est produite lors de l'application.",
                 "leave_form": "Formulaire de congé",
                 "reason": "Raison :",
                 "sent": "Envoyé !",
-                "sign_up": "S'inscrire"
+                "sign_up": "S'inscrire",
+                "application_processing": "Votre demande a été reçue. La demande sera traitée dans un délai maximum de 8 semaines. Vous recevrez un e-mail à ce sujet."
             },
             "fund_request_physical_card_request": {
                 "description": "Nous enverrons votre carte physique à l'adresse que vous avez indiquée dès qu'elle sera prête à être utilisée.",
@@ -699,8 +699,20 @@
             "child": "Enfant",
             "children": "Les enfants",
             "partner": "Coordonnées de votre partenaire",
-            "subtitle": "Si vos informations sont incorrectes, vous pouvez cliquer sur le bouton en bas de page.",
-            "title": "Vérifier que les données sont correctes."
+            "children_list": {
+                "kind_1": "Enfant 1",
+                "kind_10": "Enfant 10",
+                "kind_2": "Enfant 2",
+                "kind_3": "Enfant 3",
+                "kind_4": "Enfant 4",
+                "kind_5": "Enfant 5",
+                "kind_6": "Enfant 6",
+                "kind_7": "Enfant 7",
+                "kind_8": "Enfant 8",
+                "kind_9": "Enfant 9"
+            },
+            "subtitle": "Les données ne sont pas correctes ? Si c'est le cas, veuillez contacter la municipalité.",
+            "title": "Les données ci-dessous sont déjà remplies"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index 6d823e992..e539c104c 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -618,14 +618,14 @@
                 "make_a_choice": "Wybierz jedną"
             },
             "fund_request_step_done": {
-                "application_processing": "Twoje zgłoszenie zostało odebrane. Wniosek zostanie rozpatrzony w ciągu 10 dni roboczych. Otrzymasz wiadomość e-mail na ten temat.",
                 "application_received": "Otrzymany wniosek",
                 "back": "Powrót",
                 "error_occurred": "Wystąpił błąd podczas aplikacji.",
                 "leave_form": "Formularz urlopowy",
                 "reason": "Powód:",
                 "sent": "Wysłane!",
-                "sign_up": "Zarejestruj się"
+                "sign_up": "Zarejestruj się",
+                "application_processing": "Twoje zgłoszenie zostało odebrane. Wniosek zostanie rozpatrzony w ciągu maksymalnie 8 tygodni. Otrzymasz wiadomość e-mail na ten temat."
             },
             "fund_request_physical_card_request": {
                 "description": "Wyślemy fizyczną kartę na podany adres, gdy tylko będzie ona gotowa do użycia.",
@@ -699,8 +699,20 @@
             "child": "Dziecko",
             "children": "Dzieci",
             "partner": "Szczegóły dotyczące partnera",
-            "subtitle": "Jeśli informacje są nieprawidłowe, możesz kliknąć przycisk na dole.",
-            "title": "Sprawdź, czy dane są prawidłowe."
+            "children_list": {
+                "kind_1": "Dziecko 1",
+                "kind_10": "Dziecko 10",
+                "kind_2": "Dziecko 2",
+                "kind_3": "Dziecko 3",
+                "kind_4": "Dziecko 4",
+                "kind_5": "Dziecko 5",
+                "kind_6": "Dziecko 6",
+                "kind_7": "Dziecko 7",
+                "kind_8": "Dziecko 8",
+                "kind_9": "Dziecko 9"
+            },
+            "subtitle": "Czy dane są nieprawidłowe? Jeśli tak, prosimy o kontakt z gminą.",
+            "title": "Poniższe dane są już wypełnione"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index b006a46ea..63d4c2587 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -618,14 +618,14 @@
                 "make_a_choice": "Выберите один"
             },
             "fund_request_step_done": {
-                "application_processing": "Ваша заявка получена. Заявка будет обработана в течение 10 рабочих дней. Об этом вы получите сообщение по электронной почте.",
                 "application_received": "Заявка получена",
                 "back": "Назад",
                 "error_occurred": "Во время применения произошла ошибка.",
                 "leave_form": "Форма отпуска",
                 "reason": "Причина:",
                 "sent": "Отправлено!",
-                "sign_up": "Зарегистрироваться"
+                "sign_up": "Зарегистрироваться",
+                "application_processing": "Ваше заявление получено. Заявка будет рассмотрена в течение максимум 8 недель. Об этом вы получите сообщение по электронной почте."
             },
             "fund_request_physical_card_request": {
                 "description": "Мы отправим вашу физическую карту по указанному вами адресу, как только она будет готова к использованию.",
@@ -699,8 +699,20 @@
             "child": "Ребенок",
             "children": "Дети",
             "partner": "Подробная информация о вашем партнере",
-            "subtitle": "Если ваша информация неверна, вы можете нажать кнопку внизу.",
-            "title": "Проверьте правильность данных."
+            "children_list": {
+                "kind_1": "Ребенок 1",
+                "kind_10": "Ребенок 10",
+                "kind_2": "Ребенок 2",
+                "kind_3": "Ребенок 3",
+                "kind_4": "Ребенок 4",
+                "kind_5": "Ребенок 5",
+                "kind_6": "Ребенок 6",
+                "kind_7": "Ребенок 7",
+                "kind_8": "Ребенок 8",
+                "kind_9": "Ребенок 9"
+            },
+            "subtitle": "Данные не верны? Если да, свяжитесь с муниципалитетом.",
+            "title": "Нижеприведенные данные уже заполнены"
         }
     },
     "fund_requests": {
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index fd1da64a4..8ab80fdff 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -1020,14 +1020,14 @@
                 "make_a_choice": "Birini seçin"
             },
             "fund_request_step_done": {
-                "application_processing": "Başvurunuz alınmıştır. Başvuru 10 iş günü içerisinde işleme alınacaktır. Bununla ilgili bir e-posta alacaksınız.",
                 "application_received": "Başvuru alındı",
                 "back": "Geri",
                 "error_occurred": "Başvuru sırasında bir hata oluştu.",
                 "leave_form": "İzin formu",
                 "reason": "Sebep:",
                 "sent": "Gönderdim!",
-                "sign_up": "Kaydolun"
+                "sign_up": "Kaydolun",
+                "application_processing": "Başvurunuz alınmıştır. Başvurunuz en fazla 8 hafta içerisinde işleme alınacaktır. Bununla ilgili bir e-posta alacaksınız."
             },
             "fund_request_physical_card_request": {
                 "description": "Fiziksel kartınızı kullanıma hazır olur olmaz verdiğiniz adrese göndereceğiz.",
@@ -1101,8 +1101,20 @@
             "child": "Çocuk",
             "children": "Çocuklar",
             "partner": "Partnerinizin detayları",
-            "subtitle": "Bilgileriniz yanlışsa, alttaki düğmeye tıklayabilirsiniz.",
-            "title": "Verilerin doğru olup olmadığını kontrol edin."
+            "children_list": {
+                "kind_1": "Çocuk 1",
+                "kind_10": "Çocuk 10",
+                "kind_2": "Çocuk 2",
+                "kind_3": "Çocuk 3",
+                "kind_4": "Çocuk 4",
+                "kind_5": "Çocuk 5",
+                "kind_6": "Çocuk 6",
+                "kind_7": "Çocuk 7",
+                "kind_8": "Çocuk 8",
+                "kind_9": "Çocuk 9"
+            },
+            "subtitle": "Bilgiler doğru değil mi? Eğer öyleyse, lütfen belediye ile iletişime geçin.",
+            "title": "Aşağıdaki bilgiler zaten doldurulmuştur"
         }
     },
     "fund": {
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index 91bb206c1..cd222fab1 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -618,14 +618,14 @@
                 "make_a_choice": "Виберіть один"
             },
             "fund_request_step_done": {
-                "application_processing": "Ваша заявка отримана. Заявка буде розглянута протягом 10 робочих днів. Ви отримаєте повідомлення про це електронною поштою.",
                 "application_received": "Заявка отримана",
                 "back": "Назад",
                 "error_occurred": "Виникла помилка при подачі заявки.",
                 "leave_form": "Бланк заяви на відпустку",
                 "reason": "Причина:",
                 "sent": "Відправлено!",
-                "sign_up": "Зареєструватися"
+                "sign_up": "Зареєструватися",
+                "application_processing": "Ваша заявка отримана. Заявка буде розглянута протягом максимум 8 тижнів. Ви отримаєте повідомлення про це електронною поштою."
             },
             "fund_request_physical_card_request": {
                 "description": "Ми надішлемо вашу фізичну картку на вказану вами адресу, як тільки вона буде готова до використання.",
@@ -699,8 +699,20 @@
             "child": "Дитинко.",
             "children": "Діти",
             "partner": "Інформація про вашого партнера",
-            "subtitle": "Якщо ваша інформація невірна, ви можете натиснути кнопку внизу.",
-            "title": "Перевірте правильність даних."
+            "children_list": {
+                "kind_1": "Дитина 1",
+                "kind_10": "Дитина 10",
+                "kind_2": "Дитина 2.",
+                "kind_3": "Дитина 3.",
+                "kind_4": "Дитина 4.",
+                "kind_5": "Дитина 5",
+                "kind_6": "Дитина 6",
+                "kind_7": "Дитина 7",
+                "kind_8": "Дитина 8.",
+                "kind_9": "Дитина 9"
+            },
+            "subtitle": "Неправильно вказані дані? Якщо так, зверніться до муніципалітету.",
+            "title": "Нижче наведені дані вже заповнені"
         }
     },
     "fund_requests": {
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index ff5286ac1..c4cb3ce32 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -1431,17 +1431,57 @@
         "fund_request.prefills.children",
         "Kinderen"
     ],
+    [
+        "fund_request.prefills.children_list.kind_1",
+        "Kind 1"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_10",
+        "Kind 10"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_2",
+        "Kind 2"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_3",
+        "Kind 3"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_4",
+        "Kind 4"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_5",
+        "Kind 5"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_6",
+        "Kind 6"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_7",
+        "Kind 7"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_8",
+        "Kind 8"
+    ],
+    [
+        "fund_request.prefills.children_list.kind_9",
+        "Kind 9"
+    ],
     [
         "fund_request.prefills.partner",
         "Gegevens van uw partner"
     ],
     [
         "fund_request.prefills.subtitle",
-        "Als uw informatie niet correct is, kunt u onderaan op de knop klikken."
+        "Kloppen de gegevens niet? Neem dan contact op met de gemeente."
     ],
     [
         "fund_request.prefills.title",
-        "Controleer of de gegevens correct zijn."
+        "De onderstaande gegevens zijn al ingevuld"
     ],
     [
         "fund_request.received.title",
@@ -1709,7 +1749,7 @@
     ],
     [
         "fund_request.sign_up.fund_request_step_done.application_processing",
-        "Je aanvraag is ontvangen. De aanvraag wordt binnen 10 werkdagen verwerkt. Je ontvangt hierover een e-mail."
+        "Je aanvraag is ontvangen. De aanvraag wordt binnen maximaal 8 weken verwerkt. Je ontvangt hierover een e-mail."
     ],
     [
         "fund_request.sign_up.fund_request_step_done.application_received",