diff --git a/.eslintrc.js b/.eslintrc.js
index e092237b8..a5a6ff767 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,6 +26,7 @@ module.exports = {
     plugins: ['no-for-of-loops', 'no-function-declare-after-return', 'react', 'react-hooks', 'prettier'],
     rules: {
         // ...
+        // 'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
         'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
         'react/react-in-jsx-scope': 'off',
diff --git a/package-lock.json b/package-lock.json
index ff48229b1..80f2fe463 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11052,9 +11052,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
-      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
diff --git a/react/assets/forus-platform/scss/_common/includes/common.scss b/react/assets/forus-platform/scss/_common/includes/common.scss
index 5340feb92..935667024 100644
--- a/react/assets/forus-platform/scss/_common/includes/common.scss
+++ b/react/assets/forus-platform/scss/_common/includes/common.scss
@@ -150,10 +150,6 @@ img {
     transition: color 0.3s;
 }
 
-.transition-background {
-    transition: background-color 0.3s;
-}
-
 .text-black {
     color: #000000;
 }
@@ -1579,4 +1575,4 @@ img {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss
index ed1080c22..546af94f9 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss
@@ -96,14 +96,8 @@
                 }
             }
 
-            .label {
-                &:not(:last-child):not(:last-of-type) {
-                    margin: 0;
-                }
-
-                .label-text {
-                    display: inline-block;
-                }
+            .label:not(:last-child):not(:last-of-type) {
+                margin: 0;
             }
 
             &:last-child {
diff --git a/react/assets/forus-webshop/scss/includes/components/_label.scss b/react/assets/forus-webshop/scss/includes/components/_label.scss
index 4205ca465..47f98536f 100644
--- a/react/assets/forus-webshop/scss/includes/components/_label.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_label.scss
@@ -36,14 +36,6 @@
         }
     }
 
-    .label-close {
-        color: #fff;
-        float: left;
-        font-size: 14px;
-        margin: 0 2.5px 0 -2.5px;
-        cursor: pointer;
-    }
-
     &.label-success {
         color: var(--label-success-color);
         background: var(--label-success-background);
@@ -109,4 +101,4 @@
             border-radius: calc(var(--border-radius) / 2);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx b/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
index 087ec0b6a..3b2236e08 100644
--- a/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { uniq, uniqueId } from 'lodash';
 import SelectControl from '../../select-control/SelectControl';
-import Label from '../../image_cropper/Label';
+import Label from '../../label/Label';
 
 export default function MultiSelectControl<T = number>({
     id = uniqueId('multiselect_'),
@@ -70,9 +70,13 @@ export default function MultiSelectControl<T = number>({
                     <label className="form-label">&nbsp;</label>
 
                     {value?.map((id) => (
-                        <Label type="primary" key={id.toString()}>
+                        <Label
+                            type="primary"
+                            key={id.toString()}
+                            icon="close"
+                            iconPosition="close"
+                            iconOnClick={() => removeItem(id)}>
                             {optionsById?.[id.toString()] || ''}
-                            <div className="mdi mdi-close label-close" onClick={() => removeItem(id)} />
                         </Label>
                     ))}
                 </div>
diff --git a/react/src/dashboard/components/elements/image_cropper/ImageCropper.tsx b/react/src/dashboard/components/elements/image_cropper/ImageCropper.tsx
index e756684e1..9af4d3a22 100644
--- a/react/src/dashboard/components/elements/image_cropper/ImageCropper.tsx
+++ b/react/src/dashboard/components/elements/image_cropper/ImageCropper.tsx
@@ -72,12 +72,12 @@ export default function ImageCropper({
                     'cover',
                 ).toBlob(
                     (blob) => resolve({ ...item, blob, data: blob ? createObjectURL(blob) : null }),
-                    file.type,
+                    'image/jpeg',
                     quality,
                 );
             });
         },
-        [file.type, img, quality],
+        [img, quality],
     );
 
     const onComplete = useCallback(
diff --git a/react/src/dashboard/components/elements/label/Label.tsx b/react/src/dashboard/components/elements/label/Label.tsx
new file mode 100644
index 000000000..d08e560e4
--- /dev/null
+++ b/react/src/dashboard/components/elements/label/Label.tsx
@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+
+export type LabelType =
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'danger-light'
+    | 'default'
+    | 'text'
+    | 'primary'
+    | 'primary-light';
+
+export default function Label({
+    children,
+    type,
+    className,
+    dusk,
+    icon,
+    iconPosition = 'start',
+    iconOnClick,
+    nowrap,
+}: {
+    children?: ReactNode | ReactNode[];
+    type?: LabelType;
+    className?: string;
+    dusk?: string;
+    icon?: string;
+    iconPosition?: 'start' | 'end' | 'close';
+    iconOnClick?: React.MouseEventHandler<HTMLElement>;
+    nowrap?: boolean;
+}) {
+    const iconClassName = classNames(
+        iconPosition === 'close' ? 'label-close' : iconPosition === 'end' ? 'icon-end' : 'icon-start',
+    );
+
+    const iconElement = icon ? (
+        <em className={classNames('mdi', `mdi-${icon}`, iconClassName)} onClick={iconOnClick} />
+    ) : null;
+
+    return (
+        <div
+            data-dusk={dusk}
+            className={classNames(
+                'label',
+                type === 'success' && 'label-success',
+                type === 'warning' && 'label-warning',
+                type === 'danger' && 'label-danger',
+                type === 'danger-light' && 'label-danger-light',
+                type === 'default' && 'label-default',
+                type === 'text' && 'label-text',
+                type === 'primary' && 'label-primary',
+                type === 'primary-light' && 'label-primary-light',
+                nowrap && 'nowrap',
+                className,
+            )}>
+            {iconPosition === 'start' && iconElement}
+            {children}
+            {iconPosition !== 'start' && iconElement}
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/elements/photo-selector/PhotoSelector.tsx b/react/src/dashboard/components/elements/photo-selector/PhotoSelector.tsx
index 26d0b2662..2b00d225c 100644
--- a/react/src/dashboard/components/elements/photo-selector/PhotoSelector.tsx
+++ b/react/src/dashboard/components/elements/photo-selector/PhotoSelector.tsx
@@ -4,6 +4,8 @@ import { uniqueId } from 'lodash';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushDanger from '../../../hooks/usePushDanger';
+import useFileTypeValidation from '../../../services/helpers/useFileTypeValidation';
 
 export default function PhotoSelector({
     id,
@@ -36,17 +38,31 @@ export default function PhotoSelector({
 
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
+    const pushDanger = usePushDanger();
+    const fileTypeIsValid = useFileTypeValidation();
+
+    const [acceptedFiles] = useState(['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp']);
+    const acceptedFilesLabel = acceptedFiles.map((item) => item.toUpperCase()).join(', ');
 
     const onPhotoChange = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => {
             const file = e.target.files[0];
             e.target.value = null;
 
+            if (!file) {
+                return;
+            }
+
+            if (!fileTypeIsValid(file, acceptedFiles)) {
+                return pushDanger(`Toegestaande formaten: ${acceptedFilesLabel}`);
+            }
+
             openModal((modal) => (
                 <ModalPhotoUploader
                     type={type}
                     file={file}
                     modal={modal}
+                    acceptedFiles={acceptedFiles}
                     onSubmit={(file, presets) => {
                         const thumbnail = presets.find((preset) => preset.key == 'thumbnail');
 
@@ -56,7 +72,7 @@ export default function PhotoSelector({
                 />
             ));
         },
-        [openModal, selectPhoto, type],
+        [acceptedFiles, acceptedFilesLabel, fileTypeIsValid, openModal, pushDanger, selectPhoto, type],
     );
 
     useEffect(() => {
@@ -70,7 +86,13 @@ export default function PhotoSelector({
                     <img src={thumbnailValue || assetUrl('/assets/img/placeholders/image-thumbnail.png')} alt="" />
                 </label>
                 <div className="photo-details">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <div className="photo-label">{label || translate('photo_selector.labels.image')}</div>
                     {description && <div className="photo-description">{description}</div>}
 
@@ -92,7 +114,13 @@ export default function PhotoSelector({
         return (
             <div className="block block-photo-selector">
                 <label htmlFor={id ? id : `photo_selector_${selectorId}`} className="photo-img">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <img src={thumbnailValue || assetUrl('/assets/img/placeholders/photo-selector.svg')} alt="" />
                 </label>
                 <div className="photo-details">
@@ -125,7 +153,13 @@ export default function PhotoSelector({
                 <label
                     htmlFor={id ? id : `photo_selector_${selectorId}`}
                     className="photo-selector-notifications-media">
-                    <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+                    <input
+                        type="file"
+                        hidden={true}
+                        accept={acceptedFiles.join(',')}
+                        ref={inputRef}
+                        onChange={onPhotoChange}
+                    />
                     <img
                         src={
                             thumbnailValue ||
@@ -140,7 +174,7 @@ export default function PhotoSelector({
                     <div className="photo-selector-notifications-hint">
                         De afbeelding dient vierkant te zijn met een afmeting van bijvoorbeeld 400x400px.
                         <br />
-                        Toegestaande formaten: JPG, PNG
+                        Toegestaande formaten: {acceptedFilesLabel}
                     </div>
                     <div className="button-group">
                         <button
diff --git a/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx b/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
index 656087288..3801b6315 100644
--- a/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
+++ b/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
@@ -15,6 +15,8 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import Implementation from '../../../props/models/Implementation';
 import Organization from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import useFileTypeValidation from '../../../services/helpers/useFileTypeValidation';
+import usePushDanger from '../../../hooks/usePushDanger';
 
 export default function PhotoSelectorBanner({
     disabled,
@@ -49,6 +51,10 @@ export default function PhotoSelectorBanner({
 
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
+    const pushDanger = usePushDanger();
+    const fileTypeIsValid = useFileTypeValidation();
+
+    const [acceptedFiles] = useState(['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp']);
     const [activeDropdown, setActiveDropdown] = useState<'style' | 'button' | 'color' | 'background' | 'overlay'>(null);
     const [descriptionPreview, setDescriptionPreview] = useState<string>(null);
 
@@ -78,12 +84,23 @@ export default function PhotoSelectorBanner({
             const file = e.target.files[0];
             e.target.value = null;
 
+            if (!file) {
+                return;
+            }
+
+            if (!fileTypeIsValid(file, acceptedFiles)) {
+                return pushDanger(
+                    `Toegestaande formaten: ${acceptedFiles.map((item) => item.toUpperCase()).join(', ')}`,
+                );
+            }
+
             openModal((modal) => (
                 <ModalPhotoUploader
                     type={'implementation_banner'}
                     file={file}
                     modal={modal}
                     initialCropWidth={100}
+                    acceptedFiles={acceptedFiles}
                     onSubmit={(file, presets) => {
                         const thumbnail = presets.find((preset) => preset.key == 'final');
 
@@ -93,7 +110,7 @@ export default function PhotoSelectorBanner({
                 />
             ));
         },
-        [openModal, selectPhoto],
+        [acceptedFiles, fileTypeIsValid, openModal, pushDanger, selectPhoto],
     );
 
     useEffect(() => {
@@ -113,7 +130,7 @@ export default function PhotoSelectorBanner({
 
     return (
         <div className="block block-banner-editor">
-            <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+            <input type="file" hidden={true} accept={acceptedFiles.join(',')} ref={inputRef} onChange={onPhotoChange} />
 
             <div
                 className={classNames(
diff --git a/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx b/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
index 30f369a65..93deed250 100644
--- a/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import FundForm from '../../../props/models/FundForm';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 
 export default function FundFormStateLabels({ fundForm }: { fundForm: FundForm }) {
     if (fundForm.state == 'active') {
-        return <Label type={'success'}>{fundForm.state_locale}</Label>;
+        return <Label type="success">{fundForm.state_locale}</Label>;
     }
 
     if (fundForm.state == 'archived') {
-        return <Label type={'default'}>{fundForm.state_locale}</Label>;
+        return <Label type="default">{fundForm.state_locale}</Label>;
     }
 
     return <TableEmptyValue />;
diff --git a/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
index 6f003df2e..7d46eb868 100644
--- a/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
@@ -1,18 +1,17 @@
-import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import classNames from 'classnames';
+import React, { useCallback, useMemo, useState } from 'react';
 import FundRequest from '../../../props/models/FundRequest';
 import FundRequestClarification from '../../../props/models/FundRequestClarification';
-import Label from '../image_cropper/Label';
+import Label, { LabelType } from '../label/Label';
 
 export default function FundRequestStateLabel({ fundRequest }: { fundRequest: FundRequest }) {
-    const [stateLabels] = useState({
-        pending: { label: 'primary-light', icon: 'circle-outline' },
-        declined: { label: 'danger', icon: 'circle-off-outline' },
-        approved: { label: 'success', icon: 'circle-slice-8' },
-        approved_partly: { label: 'success', icon: 'circle-slice-4' },
-        disregarded: { label: 'default', icon: 'circle-outline' },
-        assigned: { label: 'default', icon: 'circle-outline' },
-        clarification_requested: { label: 'warning', icon: 'circle-outline' },
+    const [stateLabels] = useState<Record<string, { type: LabelType; icon: string }>>({
+        pending: { type: 'primary-light', icon: 'circle-outline' },
+        declined: { type: 'danger', icon: 'circle-off-outline' },
+        approved: { type: 'success', icon: 'circle-slice-8' },
+        approved_partly: { type: 'success', icon: 'circle-slice-4' },
+        disregarded: { type: 'default', icon: 'circle-outline' },
+        assigned: { type: 'default', icon: 'circle-outline' },
+        clarification_requested: { type: 'warning', icon: 'circle-outline' },
     });
 
     const hasPendingClarifications = useCallback((clarifications: Array<FundRequestClarification>) => {
@@ -41,51 +40,19 @@ export default function FundRequestStateLabel({ fundRequest }: { fundRequest: Fu
         };
     }, [fundRequest, hasRecordsWithPendingClarifications]);
 
-    const getLabelClass = useCallback((label?: string) => {
-        switch (label) {
-            case 'primary-light':
-                return classNames('label-primary-light');
-            case 'danger':
-                return classNames('label-danger');
-            case 'success':
-                return classNames('label-success');
-            case 'default':
-                return classNames('label-default');
-            case 'warning':
-                return classNames('label-warning');
-            default:
-                return null;
-        }
-    }, []);
-
-    return (
-        <Fragment>
-            {fundRequest.state == 'pending' && fundRequest.employee ? (
-                <Fragment>
-                    {hasRecordsWithPendingClarifications ? (
-                        <div className={classNames('label', getLabelClass(stateLabels.clarification_requested?.label))}>
-                            <em
-                                className={classNames(
-                                    'mdi',
-                                    `mdi-${stateLabels.clarification_requested?.icon}`,
-                                    `icon-start`,
-                                )}
-                            />
-                            Extra info nodig
-                        </div>
-                    ) : (
-                        <Label type="primary">
-                            <em className="mdi mdi-circle-outline icon-start" />
-                            In behandeling
-                        </Label>
-                    )}
-                </Fragment>
-            ) : (
-                <div className={classNames('label', getLabelClass(stateLabels[localState.key]?.label))}>
-                    <em className={classNames('mdi', `mdi-${stateLabels[localState.key]?.icon}`, `icon-start`)} />
-                    {localState.label}
-                </div>
-            )}
-        </Fragment>
+    return fundRequest.state == 'pending' && fundRequest.employee ? (
+        hasRecordsWithPendingClarifications ? (
+            <Label type={stateLabels.clarification_requested?.type} icon={stateLabels.clarification_requested?.icon}>
+                Extra info nodig
+            </Label>
+        ) : (
+            <Label type="primary" icon="circle-outline">
+                In behandeling
+            </Label>
+        )
+    ) : (
+        <Label type={stateLabels[localState.key]?.type} icon={stateLabels[localState.key]?.icon}>
+            {localState.label}
+        </Label>
     );
 }
diff --git a/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx b/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
index 10238d484..d84eec017 100644
--- a/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
@@ -2,7 +2,7 @@ import Fund from '../../../props/models/Fund';
 import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import useTranslate from '../../../hooks/useTranslate';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 
 export default function FundStateLabels({ fund }: { fund: Fund }) {
     const translate = useTranslate();
@@ -12,15 +12,15 @@ export default function FundStateLabels({ fund }: { fund: Fund }) {
     }
 
     if (fund.state === 'active') {
-        return <Label type={'success'}>{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
+        return <Label type="success">{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
     }
 
     if (fund.state === 'paused' || fund.state === 'waiting') {
-        return <Label type={'warning'}>{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
+        return <Label type="warning">{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
     }
 
     if (fund.state === 'closed') {
-        return <Label type={'default'}>{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
+        return <Label type="default">{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
     }
 
     return <TableEmptyValue />;
diff --git a/react/src/dashboard/components/elements/resource-states/PrevalidationRequestStateLabels.tsx b/react/src/dashboard/components/elements/resource-states/PrevalidationRequestStateLabels.tsx
index 60fd751d8..cee14e609 100644
--- a/react/src/dashboard/components/elements/resource-states/PrevalidationRequestStateLabels.tsx
+++ b/react/src/dashboard/components/elements/resource-states/PrevalidationRequestStateLabels.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import useTranslate from '../../../hooks/useTranslate';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 import PrevalidationRequest from '../../../props/models/PrevalidationRequest';
 
 export default function PrevalidationRequestStateLabels({ request }: { request: PrevalidationRequest }) {
     const translate = useTranslate();
 
     if (request.state === 'success') {
-        return <Label type={'success'}>{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
+        return <Label type="success">{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
     }
 
     if (request.state === 'pending') {
-        return <Label type={'default'}>{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
+        return <Label type="default">{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
     }
 
     if (request.state === 'fail') {
-        return <Label type={'danger'}>{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
+        return <Label type="danger">{translate(`prevalidation_requests.states.${request.state}`)}</Label>;
     }
 
     return <TableEmptyValue />;
diff --git a/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx
index 610596fae..2791d10fe 100644
--- a/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 import Reimbursement from '../../../props/models/Reimbursement';
 
 export default function ReimbursementStateLabel({
@@ -11,7 +11,7 @@ export default function ReimbursementStateLabel({
 }) {
     if (reimbursement.expired) {
         return (
-            <Label type="danger_light" dusk={dusk}>
+            <Label type="danger-light" dusk={dusk}>
                 Verlopen
             </Label>
         );
@@ -19,7 +19,7 @@ export default function ReimbursementStateLabel({
 
     if (reimbursement.state === 'pending') {
         return (
-            <Label type={'default'} dusk={dusk}>
+            <Label type="default" dusk={dusk}>
                 {reimbursement.state_locale}
             </Label>
         );
@@ -27,7 +27,7 @@ export default function ReimbursementStateLabel({
 
     if (reimbursement.state === 'approved') {
         return (
-            <Label type={'success'} dusk={dusk}>
+            <Label type="success" dusk={dusk}>
                 {reimbursement.state_locale}
             </Label>
         );
@@ -35,7 +35,7 @@ export default function ReimbursementStateLabel({
 
     if (reimbursement.state === 'declined') {
         return (
-            <Label type={'danger'} dusk={dusk}>
+            <Label type="danger" dusk={dusk}>
                 {reimbursement.state_locale}
             </Label>
         );
diff --git a/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
index cf232661a..2f44b0747 100644
--- a/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/ReservationStateLabel.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import Reservation from '../../../props/models/Reservation';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 
 export default function ReservationStateLabel({ reservation }: { reservation: Reservation }) {
     if (reservation.expired) {
-        return <Label type="danger_light">Verlopen</Label>;
+        return <Label type="danger-light">Verlopen</Label>;
     }
 
     if (reservation?.state === 'waiting' || reservation?.state === 'pending') {
@@ -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/resource-states/TransactionStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
index e65562e14..6cde5805a 100644
--- a/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Transaction from '../../../props/models/Transaction';
 import PayoutTransaction from '../../../props/models/PayoutTransaction';
-import Label from '../image_cropper/Label';
+import Label from '../label/Label';
 
 export default function TransactionStateLabel({ transaction }: { transaction: Transaction | PayoutTransaction }) {
     return <Label type={transaction.state == 'success' ? 'success' : 'default'}>{transaction.state_locale}</Label>;
diff --git a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
index 68e22d5fb..8526c1a44 100644
--- a/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/CardHeaderFilterNext.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import FilterScope from '../../../../types/FilterScope';
-import FilterModel from '../../../../types/FilterModel';
+import { FilterModel, FilterScope } from '../../../../modules/filter_next/types/FilterParams';
 import CardHeaderFilter from './CardHeaderFilter';
 import Fund from '../../../../props/models/Fund';
 import SelectControl from '../../select-control/SelectControl';
diff --git a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
index 86f05ba94..c8ab6c216 100644
--- a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
+++ b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
@@ -20,13 +20,13 @@ export default function ModalDuplicatesPicker({
     hero_title = '',
     hero_subtitle = '',
     enableToggles = true,
-    label_on = '',
-    label_off = '',
+    label_on = 'Aanmaken',
+    label_off = 'Overslaan',
     items,
     onConfirm,
     onCancel,
     button_cancel = 'Annuleren',
-    button_none = 'Alles overslaan',
+    button_none = 'Alle overslaan',
     button_all = 'Ja op alles',
     button_confirm = 'Bevestigen',
 }: {
@@ -36,8 +36,8 @@ export default function ModalDuplicatesPicker({
     hero_title?: string;
     hero_subtitle: string | Array<string>;
     enableToggles: boolean;
-    label_on: string;
-    label_off: string;
+    label_on?: string;
+    label_off?: string;
     items: Array<ItemProp>;
     onConfirm: (data: { list: Array<ItemProp>; uids?: Array<string> }) => void;
     onCancel: () => void;
diff --git a/react/src/dashboard/components/modals/ModalFundOffers.tsx b/react/src/dashboard/components/modals/ModalFundOffers.tsx
index 514634802..0f7086964 100644
--- a/react/src/dashboard/components/modals/ModalFundOffers.tsx
+++ b/react/src/dashboard/components/modals/ModalFundOffers.tsx
@@ -13,7 +13,7 @@ import usePaginatorService from '../../modules/paginator/services/usePaginatorSe
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
 import TableEmptyValue from '../elements/table-empty-value/TableEmptyValue';
-import Label from '../elements/image_cropper/Label';
+import Label from '../elements/label/Label';
 import { DashboardRoutes } from '../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../modules/filter_next/useFilterNext';
 
diff --git a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
index 4f81663d6..32d5a78c1 100644
--- a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
@@ -193,8 +193,6 @@ export default function ModalPayoutsUpload({
                     hero_title={'Er zijn fouten opgetreden bij het importeren van de uitbetalingen'}
                     hero_subtitle={message}
                     enableToggles={false}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items.map((item) => ({
                         _uid: uniqueId('rand_'),
                         label: `Rij: ${item[0]}: ${item[3] || item[2]['email'] || item[2]['bsn'] || ''} - ${item[1]}`,
diff --git a/react/src/dashboard/components/modals/ModalPhotoUploader.tsx b/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
index 707b5c7f0..9f1d07270 100644
--- a/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
+++ b/react/src/dashboard/components/modals/ModalPhotoUploader.tsx
@@ -11,6 +11,7 @@ export default function ModalPhotoUploader({
     modal,
     onSubmit,
     className,
+    acceptedFiles = ['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp'],
     initialCropWidth = 90,
 }: {
     type: string;
@@ -18,6 +19,7 @@ export default function ModalPhotoUploader({
     modal: ModalState;
     onSubmit: (file: Blob, sizes: Array<ImageCropperPresetValue>) => void;
     className?: string;
+    acceptedFiles?: Array<string>;
     initialCropWidth?: number;
 }) {
     const appConfigs = useAppConfigs();
@@ -31,26 +33,34 @@ export default function ModalPhotoUploader({
     const [targetFile, setTargetFile] = useState<File>(file);
 
     const apply = useCallback(() => {
+        if (!final?.blob || !targetFile) {
+            return;
+        }
+
+        const dotIndex = targetFile.name.lastIndexOf('.');
+        const baseName = dotIndex === -1 ? targetFile.name : targetFile.name.slice(0, dotIndex);
+        const fileName = `${baseName}.jpg`;
+
         const blob = Object.assign(final.blob, {
-            name: targetFile.name,
+            name: fileName,
             lastModified: targetFile.lastModified,
         });
 
         onSubmit(blob, presets);
         modal.close();
-    }, [presets, targetFile, final, modal, onSubmit]);
+    }, [final, modal, onSubmit, presets, targetFile]);
 
     const changePhoto = useCallback(() => {
         const input = document.createElement('input');
         input.style.display = 'none';
         input.setAttribute('type', 'file');
-        input.setAttribute('accept', 'image/!*');
+        input.setAttribute('accept', (acceptedFiles || []).join(','));
         input.addEventListener('change', () => {
             setTargetFile(null);
             window.setTimeout(() => setTargetFile(input.files[0]), 0);
         });
         input.click();
-    }, []);
+    }, [acceptedFiles]);
 
     useEffect(() => {
         setMediaConfig(appConfigs.media[type]);
@@ -129,7 +139,7 @@ export default function ModalPhotoUploader({
                                 De afmeting van de afbeelding dient bijvoorbeeld {mediaConfig?.size.large[0]}x
                                 {mediaConfig?.size.large[1]}px te zijn. (breedte keer hoogte)
                                 <br />
-                                Toegestaande formaten: .JPG, .PNG
+                                Toegestaande formaten: {acceptedFiles.map((item) => item.toUpperCase()).join(', ')}
                                 <br />
                             </div>
                             <div className="form text-center">
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
index 2df4dd5db..f6f20faf4 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
@@ -185,8 +185,6 @@ export default function ModalPrevalidationRequestsUpload({
                     hero_title={'Er zijn fouten opgetreden bij het importeren van de aanvragers'}
                     hero_subtitle={message}
                     enableToggles={false}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items.map((item) => ({
                         value: `Rij: ${item[0]}: ${item[2]} - ${item[1]}`,
                         _uid: uniqueId('rand_'),
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index 56dd8033d..ba1593629 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -223,8 +223,6 @@ export default function ModalPrevalidationsUpload({
                     hero_title={'Er zijn fouten opgetreden bij het importeren van de aanvragers'}
                     hero_subtitle={message}
                     enableToggles={false}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items.map((item) => ({
                         value: `Rij: ${item[0]}: ${item[2]} - ${item[1]}`,
                         _uid: uniqueId('rand_'),
@@ -478,8 +476,6 @@ export default function ModalPrevalidationsUpload({
                         hero_title={title}
                         hero_subtitle={subtitle}
                         enableToggles={false}
-                        label_on={'Aanmaken'}
-                        label_off={'Overslaan'}
                         items={items}
                         onConfirm={() => {
                             setHideModal(false);
@@ -514,8 +510,6 @@ export default function ModalPrevalidationsUpload({
                         hero_subtitle={subtitle}
                         enableToggles={true}
                         label_on={'Aanpassen'}
-                        label_off={'Overslaan'}
-                        button_none={'Alles overslaan'}
                         button_all={'Pas alles aan'}
                         items={items}
                         onConfirm={({ list }) => {
@@ -766,6 +760,82 @@ export default function ModalPrevalidationsUpload({
         ],
     );
 
+    const showDuplicateRows = useCallback(
+        (rows = []) => {
+            const message = [
+                `${rows.length} van ${data.length}`,
+                'rij(en) uit het bulkbestand zijn niet',
+                'geïmporteerd vanwege dubbele waarden.',
+                'Bekijk het bestand bij welke rij(en) het mis gaat.',
+            ].join(' ');
+
+            pushDanger('Waarschuwing', message);
+            setHideModal(true);
+
+            openModal((modal) => (
+                <ModalDuplicatesPicker
+                    modal={modal}
+                    hero_title={'Er is een fout opgetreden bij het importeren van het bulkbestand'}
+                    hero_subtitle={message}
+                    enableToggles={false}
+                    items={rows}
+                    onConfirm={() => {
+                        reset();
+                        setHideModal(false);
+                    }}
+                    onCancel={() => {
+                        reset();
+                        setHideModal(false);
+                    }}
+                />
+            ));
+        },
+        [data, openModal, pushDanger, reset],
+    );
+
+    const checkDuplicates = useCallback(() => {
+        return new Promise((resolve, reject) => {
+            const submitData: RowDataPropData[] = JSON.parse(JSON.stringify(data));
+            const keyMap = new Map();
+            const duplicates = [];
+
+            submitData.forEach((item, index) => {
+                const primary_key = item?.[fund.csv_primary_key];
+                const normalized_key = typeof primary_key === 'string' ? primary_key.toLowerCase() : primary_key;
+
+                if (!normalized_key) {
+                    return;
+                }
+
+                if (!keyMap.has(normalized_key)) {
+                    keyMap.set(normalized_key, [index]);
+                } else {
+                    keyMap.get(normalized_key).push(index);
+                }
+            });
+
+            keyMap.forEach((indexes) => {
+                if (indexes.length > 1) {
+                    indexes.forEach((i) => {
+                        const originalValue = submitData[i]?.[fund.csv_primary_key];
+
+                        duplicates.push({
+                            value: `Rij: ${i + 1}: ${fund?.csv_primary_key} - ${originalValue}`,
+                            _uid: uniqueId('rand_'),
+                        });
+                    });
+                }
+            });
+
+            if (duplicates.length) {
+                showDuplicateRows(duplicates);
+                reject();
+            }
+
+            resolve(true);
+        });
+    }, [data, fund?.csv_primary_key, showDuplicateRows]);
+
     const submitCollectionCheck = useCallback(() => {
         setCsvProgress(CSVProgress.uploading);
         abortRef.current = false;
@@ -854,14 +924,16 @@ export default function ModalPrevalidationsUpload({
     ]);
 
     const onConfirmUpload = useCallback(() => {
-        setCsvComparing(true);
+        checkDuplicates().then(() => {
+            setCsvComparing(true);
 
-        pushSuccess('Inladen...', 'Inladen van gegevens voor controle op dubbele waarden!', {
-            icon: 'download-outline',
-        });
+            pushSuccess('Inladen...', 'Inladen van gegevens voor controle op dubbele waarden!', {
+                icon: 'download-outline',
+            });
 
-        submitCollectionCheck();
-    }, [pushSuccess, submitCollectionCheck]);
+            submitCollectionCheck();
+        }, console.error);
+    }, [checkDuplicates, pushSuccess, submitCollectionCheck]);
 
     const onDragEvent = useCallback((e: React.DragEvent, isDragOver: boolean) => {
         e?.preventDefault();
diff --git a/react/src/dashboard/components/modals/ModalReservationUpload.tsx b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
index 95d2d548d..089848414 100644
--- a/react/src/dashboard/components/modals/ModalReservationUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
@@ -196,8 +196,6 @@ export default function ModalReservationUpload({
                             'Om de reserveringen alsnog aan te maken dient het bestand aangepast en opnieuw aangeboden te worden.',
                     ]}
                     enableToggles={true}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items.map((item) => ({
                         _uid: uniqueId('rand_'),
                         label: item[2]?.['number'] ? item[2]?.['number'] + ' - ' + item[1] : item[1],
diff --git a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
index dd43c2425..f7be132ab 100644
--- a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
@@ -248,8 +248,6 @@ export default function ModalVoucherCreate({
                         'Deze e-mailadressen bezitten al een tegoed van dit fonds.',
                     ]}
                     enableToggles={true}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items}
                     onConfirm={onConfirm}
                     onCancel={onCancel}
@@ -276,8 +274,6 @@ export default function ModalVoucherCreate({
                         'Deze burgerservicenummers bezitten al een tegoed van dit fonds.',
                     ]}
                     enableToggles={true}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items}
                     onConfirm={onConfirm}
                     onCancel={onCancel}
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
index f48f53ed6..7be5cbd17 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
@@ -193,8 +193,6 @@ export default function ModalVoucherTransactionsUpload({
                     hero_title={'Transactie aanmaken mislukt!'}
                     hero_subtitle={[validation ? messageValidation : message]}
                     enableToggles={false}
-                    label_on={'Aanmaken'}
-                    label_off={'Overslaan'}
                     items={items.map((item) => ({
                         _uid: uniqueId('rand_'),
                         label: `Rij: ${item[0]}: ${item[2]['uid'] || ''} - ${item[1]}`,
diff --git a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
index d642f953e..2b1f9759e 100644
--- a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
@@ -305,11 +305,8 @@ export default function ModalVouchersUpload({
                             `Er zijn ${lowAmountOptions.length} tegoeden met een laag bedrag.`,
                             'Wilt u doorgaan?',
                         ]}
-                        button_none={'Alle overslaan'}
                         button_all={'Alle aanmaken'}
                         enableToggles={true}
-                        label_on={'Aanmaken'}
-                        label_off={'Overslaan'}
                         items={lowAmountOptions}
                         onConfirm={(data) => {
                             resolve(pickSelectedOrUnflagged(originalRows, data.uids, lowAmountOptionIds));
@@ -348,11 +345,8 @@ export default function ModalVouchersUpload({
                             `Weet u zeker dat u voor ${duplicateOptions.length} e-mailadres(sen) een extra tegoed wilt aanmaken?`,
                             'Deze e-mailadressen bezitten al een tegoed van dit fonds.',
                         ]}
-                        button_none={'Alle overslaan'}
                         button_all={'Alle aanmaken'}
                         enableToggles={true}
-                        label_on={'Aanmaken'}
-                        label_off={'Overslaan'}
                         items={duplicateOptions}
                         onConfirm={(data) => {
                             resolve(pickSelectedOrUnflagged(originalRows, data.uids, duplicateOptionIds));
@@ -393,10 +387,7 @@ export default function ModalVouchersUpload({
                             'Deze bsn(s) bezitten al een tegoed van dit fonds.',
                         ]}
                         enableToggles={true}
-                        button_none={'Alle overslaan'}
                         button_all={'Alle aanmaken'}
-                        label_on={'Aanmaken'}
-                        label_off={'Overslaan'}
                         items={bsnOptions}
                         onConfirm={(data) => {
                             resolve(pickSelectedOrUnflagged(originalRows, data.uids, bsnOptionIds));
@@ -614,8 +605,6 @@ export default function ModalVouchersUpload({
                         hero_title={'Er zijn fouten opgetreden bij het importeren van de tegoeden'}
                         hero_subtitle={message}
                         enableToggles={false}
-                        label_on={'Aanmaken'}
-                        label_off={'Overslaan'}
                         items={items.map((item) => ({
                             _uid: uniqueId('rand_'),
                             label: `Rij: ${item[0]}: ${item[2]['email'] || item[2]['bsn'] || ''} - ${item[1]}`,
diff --git a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
index fc6960ea7..c06416035 100644
--- a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
+++ b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
@@ -22,7 +22,7 @@ import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePushApiError from '../../../hooks/usePushApiError';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 
 export default function BankConnections() {
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index 1713e7e1d..9623b7959 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -85,7 +85,7 @@ export default function Employees() {
                 setLoading(false);
                 setProgress(100);
             });
-    }, [activeOrganization.id, employeeService, filterValuesActive, setProgress, pushApiError]);
+    }, [activeOrganization.id, employeeService, setProgress, pushApiError, filterValuesActive]);
 
     const fetchAdminEmployees = useCallback(() => {
         employeeService
@@ -115,27 +115,19 @@ export default function Employees() {
                     organization={activeOrganization}
                     employee={employee}
                     onSubmit={() => {
+                        fetchEmployees();
                         fetchAdminEmployees();
-                        filterUpdate({ page: employee ? employees.meta.current_page : employees.meta.last_page });
 
                         if (!employee) {
                             pushSuccess('Gelukt!', 'Nieuwe medewerker toegevoegd.');
                         } else {
-                            pushSuccess('Gelukt!', 'Employee updated.');
+                            pushSuccess('Gelukt!', 'De rollen zijn aagepast.');
                         }
                     }}
                 />
             ));
         },
-        [
-            openModal,
-            activeOrganization,
-            fetchAdminEmployees,
-            filterUpdate,
-            employees?.meta.current_page,
-            employees?.meta.last_page,
-            pushSuccess,
-        ],
+        [openModal, activeOrganization, fetchAdminEmployees, fetchEmployees, pushSuccess],
     );
 
     const exportEmployees = useCallback(() => {
@@ -178,7 +170,7 @@ export default function Employees() {
                             employeeService
                                 .delete(activeOrganization.id, employee.id)
                                 .then(() => {
-                                    filterUpdate({});
+                                    fetchEmployees();
                                     pushSuccess('Gelukt!', 'Medewerker verwijderd.');
                                     modal.close();
                                 })
@@ -189,7 +181,7 @@ export default function Employees() {
                 />
             ));
         },
-        [openModal, translate, employeeService, activeOrganization.id, filterUpdate, pushSuccess, pushApiError],
+        [openModal, translate, employeeService, activeOrganization.id, pushApiError, fetchEmployees, pushSuccess],
     );
 
     const canEditEmployee = useCallback(
@@ -332,10 +324,10 @@ export default function Employees() {
                             )}
                         </td>
                         <td>
-                            <TableDateTime value={employee.created_at_locale} />
+                            <TableDateTime value={employee.last_activity_at_locale} />
                         </td>
                         <td>
-                            <TableDateTime value={employee.last_activity_at_locale} />
+                            <TableDateTime value={employee.created_at_locale} />
                         </td>
 
                         {activeOrganization.identity_address != employee.identity_address ? (
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 872acfc52..b24e84da3 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
@@ -18,7 +18,7 @@ import { nl } from 'date-fns/locale';
 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 Label from '../../../elements/label/Label';
 import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 
 interface SelectionItem {
@@ -492,14 +492,14 @@ export default function FinancialFilters({
                     {Object.values(selections).map((selection: SelectionItem) => (
                         <Fragment key={selection.type}>
                             {(!selection.ids || selection.ids.length > 0) && (
-                                <Label type={'primary_light'} disabled={selection.items.length == 0}>
+                                <Label
+                                    type="primary-light"
+                                    icon={selection.items.length > 0 ? 'close' : undefined}
+                                    iconPosition="close"
+                                    iconOnClick={
+                                        selection.items.length > 0 ? () => resetSelection(selection.type) : undefined
+                                    }>
                                     <span>{strLimit(selection.names, 60)}</span>
-                                    {selection.items.length > 0 && (
-                                        <em
-                                            className="label-close mdi mdi-close"
-                                            onClick={() => resetSelection(selection.type)}
-                                        />
-                                    )}
                                 </Label>
                             )}
                         </Fragment>
diff --git a/react/src/dashboard/components/pages/fund-provider-product-view/FundProviderProductView.tsx b/react/src/dashboard/components/pages/fund-provider-product-view/FundProviderProductView.tsx
index 050b18592..7b5b5850b 100644
--- a/react/src/dashboard/components/pages/fund-provider-product-view/FundProviderProductView.tsx
+++ b/react/src/dashboard/components/pages/fund-provider-product-view/FundProviderProductView.tsx
@@ -274,15 +274,14 @@ export default function FundProviderProductView() {
                                     )}
                                 </Fragment>
                             ) : (
-                                <a
+                                <button
+                                    type="button"
                                     className="button button-primary button-sm nowrap"
-                                    onClick={(e) => {
-                                        e?.preventDefault();
-                                        editProduct(fund, fundProvider, product).then(setFundProvider);
-                                    }}>
+                                    disabled={product.expired}
+                                    onClick={() => editProduct(fund, fundProvider, product).then(setFundProvider)}>
                                     <em className="mdi mdi-play" />
                                     {translate('product.buttons.approve_product')}
-                                </a>
+                                </button>
                             )}
                         </Fragment>
                     )}
diff --git a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
index 3b1723c2f..b904e42d8 100644
--- a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
@@ -14,7 +14,7 @@ import Fund from '../../../props/models/Fund';
 import useTranslate from '../../../hooks/useTranslate';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function FundProvider() {
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProductRowData.tsx b/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProductRowData.tsx
index fc8b87898..09e4c85bf 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProductRowData.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProductRowData.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, MouseEvent, useCallback, useMemo } from 'react';
 import TableEntityMain from '../../../elements/tables/elements/TableEntityMain';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import classNames from 'classnames';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import TableDateOnly from '../../../elements/tables/elements/TableDateOnly';
 import SponsorProduct, { DealHistoryItem } from '../../../../props/models/Sponsor/SponsorProduct';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
@@ -244,7 +244,7 @@ export default function FundProviderProductRowData({
                                 ) : (
                                     <div className="flex flex-center">
                                         <div className="flex-self-center">
-                                            <Label type="text" className="nowrap">
+                                            <Label type="text" nowrap={true}>
                                                 Niet beschikbaar
                                             </Label>
                                             <div className="hidden" />
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestGroupRecordRow.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestGroupRecordRow.tsx
index a67528bbd..1b52da8c6 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestGroupRecordRow.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestGroupRecordRow.tsx
@@ -12,7 +12,7 @@ import Organization from '../../../../props/models/Organization';
 import ModalFundRequestRecordEdit from '../../../modals/ModalFundRequestRecordEdit';
 import ModalNotification from '../../../modals/ModalNotification';
 import useTranslate from '../../../../hooks/useTranslate';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import EmptyValue from '../../../elements/empty-value/EmptyValue';
 
 export default function FundRequestGroupRecordRow({
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordsHasClarifications.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordsHasClarifications.tsx
index dc1457ca8..60fe9f25b 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordsHasClarifications.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestRecordsHasClarifications.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { FundRequestLocal, FundRequestRecordLocal } from '../FundRequestsView';
 import useTranslate from '../../../../hooks/useTranslate';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import { uniq } from 'lodash';
 import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
diff --git a/react/src/dashboard/components/pages/households/Households.tsx b/react/src/dashboard/components/pages/households/Households.tsx
index 6a229141e..924b7c0a6 100644
--- a/react/src/dashboard/components/pages/households/Households.tsx
+++ b/react/src/dashboard/components/pages/households/Households.tsx
@@ -52,6 +52,7 @@ export default function Households() {
     const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
         q: string;
         fund_id?: number;
+        page?: number;
         per_page?: number;
         order_by?: string;
         order_dir?: string;
@@ -59,6 +60,7 @@ export default function Households() {
         {
             q: '',
             fund_id: null,
+            page: 1,
             order_by: 'created_at',
             order_dir: 'desc',
             per_page: paginatorService.getPerPage(paginatorTransactionsKey),
@@ -68,6 +70,7 @@ export default function Households() {
             queryParams: {
                 q: StringParam,
                 fund_id: NumberParam,
+                page: NumberParam,
                 per_page: NumberParam,
                 order_by: StringParam,
                 order_dir: StringParam,
diff --git a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
index 230a28a9d..8710411db 100644
--- a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
+++ b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
@@ -12,7 +12,7 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import useAuthIdentity2FAState from '../../../hooks/useAuthIdentity2FAState';
 import Auth2FARestriction from '../../elements/auth2fa-restriction/Auth2FARestriction';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 
 export default function PreferencesEmails() {
     const openModal = useOpenModal();
@@ -211,13 +211,13 @@ export default function PreferencesEmails() {
                             </div>
                             <div className="user_email-actions">
                                 {email.primary && (
-                                    <Label dusk="identityEmailListItemPrimary" type="success" className="pull-left">
+                                    <Label dusk="identityEmailListItemPrimary" type="success">
                                         Hoofd e-mailadres
                                     </Label>
                                 )}
 
                                 {!email.verified && !email.primary && (
-                                    <Label dusk="identityEmailListItemNotVerified" type="default" className="pull-left">
+                                    <Label dusk="identityEmailListItemNotVerified" type="default">
                                         Niet bevestigd
                                     </Label>
                                 )}
diff --git a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
index bdfa4c5c2..7858c72b5 100644
--- a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
+++ b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
@@ -13,7 +13,7 @@ import { authContext } from '../../../contexts/AuthContext';
 import { ResponseError } from '../../../props/ApiResponses';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 
 export default function Security2FA() {
     const assetUrl = useAssetUrl();
diff --git a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
index 3c247b1ee..a83bf8df1 100644
--- a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
+++ b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
@@ -15,7 +15,7 @@ import usePushSuccess from '../../../hooks/usePushSuccess';
 import useAuthIdentity2FAState from '../../../hooks/useAuthIdentity2FAState';
 import Auth2FARestriction from '../../elements/auth2fa-restriction/Auth2FARestriction';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 
@@ -228,7 +228,7 @@ export default function SecuritySessions() {
 
                             {session.current && (
                                 <div className="session-label">
-                                    <Label type="primary_light">Huidig</Label>
+                                    <Label type="primary-light">Huidig</Label>
                                 </div>
                             )}
 
diff --git a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
index f30ee8b55..d22229f9f 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
@@ -10,7 +10,7 @@ import useImplementationNotificationService from '../../../services/Implementati
 import SystemNotification from '../../../props/models/SystemNotification';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import InfoBox from '../../elements/info-box/InfoBox';
 import { useParams } from 'react-router';
@@ -248,19 +248,19 @@ export default function ImplementationNotifications() {
 
                                 <td className="nowrap">
                                     {notification.state?.state === 'active' && (
-                                        <Label type={'success'}>{notification.state.stateLabel}</Label>
+                                        <Label type="success">{notification.state.stateLabel}</Label>
                                     )}
 
                                     {notification.state?.state === 'inactive' && (
-                                        <Label type={'danger'}>{notification.state.stateLabel}</Label>
+                                        <Label type="danger">{notification.state.stateLabel}</Label>
                                     )}
 
                                     {notification.state?.state === 'active_partly' && (
-                                        <Label type={'warning'}>{notification.state.stateLabel}</Label>
+                                        <Label type="warning">{notification.state.stateLabel}</Label>
                                     )}
 
                                     {!['active', 'inactive', 'active_partly'].includes(notification.state?.state) && (
-                                        <Label type={'default'}>{notification.state.stateLabel}</Label>
+                                        <Label type="default">{notification.state.stateLabel}</Label>
                                     )}
                                 </td>
 
diff --git a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
index 2e481715d..0457fa03e 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
@@ -14,7 +14,7 @@ import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 
 export default function SystemNotificationEditor({
     fund,
@@ -191,28 +191,12 @@ export default function SystemNotificationEditor({
                                 <div className="text-strong">Status</div>
                             </div>
                             <div className="keyvalue-value">
-                                {state?.state === 'active' && (
-                                    <Label type={'success'} className={'transition-background'}>
-                                        {state.stateLabel}
-                                    </Label>
-                                )}
-
-                                {state?.state === 'inactive' && (
-                                    <Label type={'danger'} className={'transition-background'}>
-                                        {state.stateLabel}
-                                    </Label>
-                                )}
-
-                                {state?.state === 'active_partly' && (
-                                    <Label type={'warning'} className={'transition-background'}>
-                                        {state.stateLabel}
-                                    </Label>
-                                )}
+                                {state?.state === 'active' && <Label type="success">{state.stateLabel}</Label>}
+                                {state?.state === 'inactive' && <Label type="danger">{state.stateLabel}</Label>}
+                                {state?.state === 'active_partly' && <Label type="warning">{state.stateLabel}</Label>}
 
                                 {!['active', 'inactive', 'active_partly'].includes(state?.state) && (
-                                    <Label type={'default'} className={'transition-background'}>
-                                        {state.stateLabel}
-                                    </Label>
+                                    <Label type="default">{state.stateLabel}</Label>
                                 )}
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/implementations-edit/ImplementationCookies.tsx b/react/src/dashboard/components/pages/implementations-edit/ImplementationCookies.tsx
index 41ea7698c..7f6a38cbb 100644
--- a/react/src/dashboard/components/pages/implementations-edit/ImplementationCookies.tsx
+++ b/react/src/dashboard/components/pages/implementations-edit/ImplementationCookies.tsx
@@ -8,7 +8,7 @@ import { useParams } from 'react-router';
 import Implementation from '../../../props/models/Implementation';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import ImplementationsRootBreadcrumbs from '../implementations/elements/ImplementationsRootBreadcrumbs';
 import FormPaneContainer from '../../elements/forms/elements/FormPaneContainer';
 import FormPane from '../../elements/forms/elements/FormPane';
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 5c0e5d192..5af9a6bdb 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
@@ -11,7 +11,7 @@ import { hasPermission } from '../../../../../helpers/utils';
 import StateNavLink from '../../../../../modules/state_router/StateNavLink';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import Implementation from '../../../../../props/models/Implementation';
-import Label from '../../../../elements/image_cropper/Label';
+import Label from '../../../../elements/label/Label';
 import { Permission } from '../../../../../props/models/Organization';
 import { useFundService } from '../../../../../services/FundService';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
diff --git a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
index 78250bc17..878d28cdd 100644
--- a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
@@ -22,7 +22,7 @@ import MollieConnectionForm from './elements/MollieConnectionForm';
 import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
diff --git a/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx b/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
index 3c3e7b775..77597ebd1 100644
--- a/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
+++ b/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
@@ -21,7 +21,6 @@ import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import { strLimit } from '../../../helpers/string';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import { Permission } from '../../../props/models/Organization';
 import { usePrevalidationRequestService } from '../../../services/PrevalidationRequestService';
 import ModalPrevalidationRequestsUpload from '../../modals/ModalPrevalidationRequestsUpload';
@@ -226,10 +225,6 @@ export default function PrevalidationRequests() {
         }
     }, [activeOrganization?.allow_prevalidation_requests, navigateState]);
 
-    if (funds?.length === 0) {
-        return <EmptyCard title={'Geen fondsen gevonden'} />;
-    }
-
     if (!prevalidationRequests) {
         return <LoadingCard />;
     }
@@ -367,9 +362,25 @@ export default function PrevalidationRequests() {
 
             <LoaderTableCard
                 loading={!prevalidationRequests.meta}
-                empty={prevalidationRequests?.meta?.total == 0}
-                emptyTitle={translate('prevalidation_requests.empty.title')}
-                emptyDescription={translate('prevalidation_requests.empty.description')}
+                empty={prevalidationRequests?.meta?.total == 0 || funds?.length === 0}
+                emptyTitle={
+                    funds?.length === 0 ? 'Geen fondsen gevonden' : translate('prevalidation_requests.empty.title')
+                }
+                emptyDescription={
+                    funds?.length === 0
+                        ? 'Maak eerst een fonds aan om prevalidatieverzoeken toe te voegen.'
+                        : translate('prevalidation_requests.empty.description')
+                }
+                emptyButton={
+                    funds?.length === 0 &&
+                    hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && {
+                        text: 'Fonds aanmaken',
+                        type: 'primary',
+                        icon: 'plus',
+                        state: DashboardRoutes.FUND_CREATE,
+                        stateParams: { organizationId: activeOrganization.id },
+                    }
+                }
                 columns={prevalidationRequestService.getColumns()}
                 paginator={{ key: paginatorKey, data: prevalidationRequests, filterValues, filterUpdate }}>
                 {prevalidationRequests?.data?.map((row) => (
diff --git a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
index 6500160a4..336c590b8 100644
--- a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
+++ b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
@@ -31,11 +31,11 @@ import { strLimit } from '../../../helpers/string';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import { NumberParam, StringParam } from 'use-query-params';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePrevalidationExporter from '../../../services/exporters/usePrevalidationExporter';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { Permission } from '../../../props/models/Organization';
 import { uniq } from 'lodash';
+import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function Prevalidations() {
     const translate = useTranslate();
@@ -265,10 +265,6 @@ export default function Prevalidations() {
         fetchRecordTypes();
     }, [fetchRecordTypes]);
 
-    if (funds?.length === 0) {
-        return <EmptyCard title={'Geen fondsen gevonden'} />;
-    }
-
     if (!prevalidations) {
         return <LoadingCard />;
     }
@@ -428,10 +424,22 @@ export default function Prevalidations() {
 
             <LoaderTableCard
                 loading={!prevalidations.meta}
-                empty={prevalidations?.meta?.total == 0}
-                emptyTitle={'Geen aanvragers toevoegen'}
+                empty={prevalidations?.meta?.total == 0 || funds?.length === 0}
+                emptyTitle={funds?.length === 0 ? 'Geen fondsen gevonden' : 'Geen aanvragers toevoegen'}
                 emptyDescription={
-                    'U bent geen beoordelaar voor een fonds dat actief is om aanvragers aan toe te voegen.'
+                    funds?.length === 0
+                        ? 'Maak eerst een fonds aan om prevalidaties toe te voegen.'
+                        : 'U bent geen beoordelaar voor een fonds dat actief is om aanvragers aan toe te voegen.'
+                }
+                emptyButton={
+                    funds?.length === 0 &&
+                    hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && {
+                        text: 'Fonds aanmaken',
+                        type: 'primary',
+                        icon: 'plus',
+                        state: DashboardRoutes.FUND_CREATE,
+                        stateParams: { organizationId: activeOrganization.id },
+                    }
                 }
                 columns={prevalidationService.getColumns(headers || [], typesByKey)}
                 paginator={{ key: paginatorKey, data: prevalidations, filterValues, filterUpdate }}>
diff --git a/react/src/dashboard/components/pages/products-edit/elements/ProductsFormMediaUploader.tsx b/react/src/dashboard/components/pages/products-edit/elements/ProductsFormMediaUploader.tsx
index 619ed2398..c486829a3 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsFormMediaUploader.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsFormMediaUploader.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useRef } from 'react';
+import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useRef, useState } from 'react';
 import Media from '../../../../props/models/Media';
 import ModalPhotoUploader from '../../../modals/ModalPhotoUploader';
 import useOpenModal from '../../../../hooks/useOpenModal';
@@ -20,6 +20,8 @@ import {
     sortableKeyboardCoordinates,
     verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
+import usePushDanger from '../../../../hooks/usePushDanger';
+import useFileTypeValidation from '../../../../services/helpers/useFileTypeValidation';
 
 export default function ProductsFormMediaUploader({
     media,
@@ -36,8 +38,12 @@ export default function ProductsFormMediaUploader({
 
     const openModal = useOpenModal();
     const setProgress = useSetProgress();
+    const pushDanger = usePushDanger();
 
     const mediaService = useMediaService();
+    const fileTypeIsValid = useFileTypeValidation();
+
+    const [acceptedFiles] = useState(['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif', '.bmp']);
 
     const uploadMedia = useCallback(
         (mediaFile: Blob): Promise<Media> => {
@@ -61,24 +67,31 @@ export default function ProductsFormMediaUploader({
             const file = e.target.files[0];
             e.target.value = null;
 
+            if (!file) {
+                return;
+            }
+
+            if (!fileTypeIsValid(file, acceptedFiles)) {
+                return pushDanger(
+                    `Toegestaande formaten: ${acceptedFiles.map((item) => item.toUpperCase()).join(', ')}`,
+                );
+            }
+
             openModal((modal) => (
                 <ModalPhotoUploader
                     type={'product_photo'}
                     file={file}
                     modal={modal}
-                    onSubmit={(file /*, presets*/) => {
-                        //const thumbnail = presets.find((preset) => preset.key == 'thumbnail');
-
+                    acceptedFiles={acceptedFiles}
+                    onSubmit={(file) =>
                         uploadMedia(file).then((result) => {
                             setMedia((media) => [...media, result]);
-                        });
-                        /*selectPhoto(file);
-                        setThumbnailValue(thumbnail?.data);*/
-                    }}
+                        })
+                    }
                 />
             ));
         },
-        [openModal, setMedia, uploadMedia],
+        [acceptedFiles, fileTypeIsValid, openModal, pushDanger, setMedia, uploadMedia],
     );
 
     const sensors = useSensors(
@@ -103,7 +116,7 @@ export default function ProductsFormMediaUploader({
 
     return (
         <div className="block block-product-media-uploader">
-            <input type="file" hidden={true} accept={'image/*'} ref={inputRef} onChange={onPhotoChange} />
+            <input type="file" hidden={true} accept={acceptedFiles.join(',')} ref={inputRef} onChange={onPhotoChange} />
             <div className="product-media-preview">
                 {media?.[0] ? (
                     <img src={media?.[0]?.sizes?.small} alt="Front view of product" />
diff --git a/react/src/dashboard/components/pages/products-view/ProductView.tsx b/react/src/dashboard/components/pages/products-view/ProductView.tsx
index 6654d87a4..e12cbb3da 100644
--- a/react/src/dashboard/components/pages/products-view/ProductView.tsx
+++ b/react/src/dashboard/components/pages/products-view/ProductView.tsx
@@ -19,7 +19,7 @@ import ProductDetailsBlock from './elements/ProductDetailsBlock';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
 import ProductFund from '../../../props/models/ProductFund';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import classNames from 'classnames';
diff --git a/react/src/dashboard/components/pages/products-view/elements/panes/ProductDetailsBlockPropertiesPane.tsx b/react/src/dashboard/components/pages/products-view/elements/panes/ProductDetailsBlockPropertiesPane.tsx
index 08b6796a4..13d8e0d74 100644
--- a/react/src/dashboard/components/pages/products-view/elements/panes/ProductDetailsBlockPropertiesPane.tsx
+++ b/react/src/dashboard/components/pages/products-view/elements/panes/ProductDetailsBlockPropertiesPane.tsx
@@ -8,6 +8,7 @@ import StateNavLink from '../../../../../modules/state_router/StateNavLink';
 import classNames from 'classnames';
 import FormPane from '../../../../elements/forms/elements/FormPane';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
+import Label from '../../../../elements/label/Label';
 
 export default function ProductDetailsBlockPropertiesPane({
     title = null,
@@ -52,7 +53,10 @@ export default function ProductDetailsBlockPropertiesPane({
                     )}
 
                     <KeyValueItem label={translate('product.labels.expire')}>
-                        {product.expire_at ? product.expire_at_locale : 'Onbeperkt'}
+                        <Fragment>
+                            {product.expire_at ? product.expire_at_locale : 'Onbeperkt'}
+                            {product.expired && <Label type="default">{translate('product.labels.expired')}</Label>}
+                        </Fragment>
                     </KeyValueItem>
 
                     {showStockAndReservations && (
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
index 50271f030..3371683b3 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
@@ -15,7 +15,7 @@ import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard
 import useTranslate from '../../../../hooks/useTranslate';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import usePushApiError from '../../../../hooks/usePushApiError';
-import Label, { LabelType } from '../../../elements/image_cropper/Label';
+import Label, { LabelType } from '../../../elements/label/Label';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
 
@@ -52,6 +52,7 @@ export default function ProviderFundInvitationsTable({
         from?: string;
         to?: string;
         state?: string;
+        page?: number;
         per_page?: number;
     }>(
         {
@@ -59,6 +60,7 @@ export default function ProviderFundInvitationsTable({
             from: '',
             to: '',
             state: null,
+            page: 1,
             per_page: paginatorService.getPerPage(paginatorKey),
         },
         {
@@ -67,6 +69,7 @@ export default function ProviderFundInvitationsTable({
                 from: StringParam,
                 to: StringParam,
                 state: StringParam,
+                page: NumberParam,
                 per_page: NumberParam,
             },
         },
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
index ffb8b0b12..f9998a560 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -20,7 +20,7 @@ import useTranslate from '../../../../hooks/useTranslate';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import usePushApiError from '../../../../hooks/usePushApiError';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
 import useProviderFundsApplySuccess from '../hooks/useProviderFundsApplySuccess';
@@ -53,9 +53,13 @@ export default function ProviderFundsTable({
     const [paginatorKey] = useState(`provider_funds_${type}`);
     const [providerFunds, setProviderFunds] = useState<PaginationData<FundProvider>>(null);
 
-    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{ q: string; per_page?: number }>(
-        { q: '', per_page: paginatorService.getPerPage(paginatorKey) },
-        { queryParams: { q: StringParam, per_page: NumberParam } },
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q: string;
+        per_page?: number;
+        page?: number;
+    }>(
+        { q: '', per_page: paginatorService.getPerPage(paginatorKey), page: 1 },
+        { queryParams: { q: StringParam, per_page: NumberParam, page: NumberParam } },
     );
 
     const { resetFilters: resetFilters } = filter;
@@ -346,7 +350,7 @@ export default function ProviderFundsTable({
                                 )}
 
                                 {providerFund.state == 'unsubscribed' && (
-                                    <Label type="danger_light">{providerFund.state_locale}</Label>
+                                    <Label type="danger-light">{providerFund.state_locale}</Label>
                                 )}
                             </td>
                         )}
diff --git a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
index 4f273499d..34d836348 100644
--- a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
@@ -11,7 +11,7 @@ import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard
 import { useReimbursementsService } from '../../../../services/ReimbursementService';
 import Reimbursement from '../../../../props/models/Reimbursement';
 import ReimbursementStateLabel from '../../../elements/resource-states/ReimbursementStateLabel';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 
 export default function ReimbursementsTable({
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
index 2339a62b1..73415cd09 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ExtraPaymentRefund from '../../../../props/models/ExtraPaymentRefund';
 import useTranslate from '../../../../hooks/useTranslate';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import useProductReservationService from '../../../../services/ProductReservationService';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraPaymentDetailsPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraPaymentDetailsPane.tsx
index 1da8f6602..df548e025 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraPaymentDetailsPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraPaymentDetailsPane.tsx
@@ -10,7 +10,7 @@ import useOpenModal from '../../../../../hooks/useOpenModal';
 import useEnvData from '../../../../../hooks/useEnvData';
 import useTranslate from '../../../../../hooks/useTranslate';
 import usePushApiError from '../../../../../hooks/usePushApiError';
-import Label from '../../../../elements/image_cropper/Label';
+import Label from '../../../../elements/label/Label';
 import ModalReservationExtraPaymentRefund from '../../../../modals/ModalReservationExtraPaymentRefund';
 import FormPane from '../../../../elements/forms/elements/FormPane';
 
diff --git a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
index 67358d299..4b6e02332 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
@@ -7,7 +7,7 @@ import { useFundService } from '../../../../services/FundService';
 import Organization from '../../../../props/models/Organization';
 import classNames from 'classnames';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
index c62d706c2..b2e72ba02 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
@@ -12,7 +12,7 @@ import TableRowActions from '../../../elements/tables/TableRowActions';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
-import classNames from 'classnames';
+import Label from '../../../elements/label/Label';
 
 export default function FundProviderTableItem({
     fundProvider,
@@ -94,16 +94,17 @@ export default function FundProviderTableItem({
                 />
             </td>
             <td>
-                <div
-                    className={classNames(
-                        'label',
-                        fundProvider.state === 'accepted' && 'label-success',
-                        fundProvider.state === 'pending' && 'label-default',
-                        fundProvider.state === 'rejected' && 'label-danger',
-                        fundProvider.state === 'unsubscribed' && 'label-danger-light',
-                    )}>
+                <Label
+                    type={
+                        {
+                            accepted: 'success' as const,
+                            pending: 'default' as const,
+                            rejected: 'danger' as const,
+                            unsubscribed: 'danger-light' as const,
+                        }[fundProvider.state]
+                    }>
                     {fundProvider.state_locale}
-                </div>
+                </Label>
             </td>
             <td>
                 {fundProvider.state == 'pending' ? (
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
index 3a977e66a..4a2b19b89 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
@@ -11,7 +11,7 @@ import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { useOrganizationService } from '../../../../services/OrganizationService';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import { FilterModel, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
-import classNames from 'classnames';
+import Label from '../../../elements/label/Label';
 
 export default function ProvidersTableItemFunds({
     filterValues,
@@ -76,16 +76,20 @@ export default function ProvidersTableItemFunds({
                                             </div>
                                         </td>
                                         <td>
-                                            <div
-                                                className={classNames(
-                                                    'label',
-                                                    fundProvider.state === 'accepted' && 'label-success',
-                                                    fundProvider.state === 'pending' && 'label-default',
-                                                    fundProvider.state === 'rejected' && 'label-danger',
-                                                    fundProvider.state === 'unsubscribed' && 'label-danger-light',
-                                                )}>
+                                            <Label
+                                                type={
+                                                    fundProvider.state === 'accepted'
+                                                        ? 'success'
+                                                        : fundProvider.state === 'pending'
+                                                          ? 'default'
+                                                          : fundProvider.state === 'rejected'
+                                                            ? 'danger'
+                                                            : fundProvider.state === 'unsubscribed'
+                                                              ? 'danger-light'
+                                                              : undefined
+                                                }>
                                                 {fundProvider.state_locale}
-                                            </div>
+                                            </Label>
                                         </td>
                                         <td>
                                             <FundStateLabels fund={fundProvider.fund} />
diff --git a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
index 64213e272..d549b8545 100644
--- a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
+++ b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
@@ -21,7 +21,7 @@ import Bank from '../../../props/models/Bank';
 import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
diff --git a/react/src/dashboard/components/pages/transaction-bulks-view/elements/TransactionBulkTransactionsTable.tsx b/react/src/dashboard/components/pages/transaction-bulks-view/elements/TransactionBulkTransactionsTable.tsx
index 964e1b9a1..170362634 100644
--- a/react/src/dashboard/components/pages/transaction-bulks-view/elements/TransactionBulkTransactionsTable.tsx
+++ b/react/src/dashboard/components/pages/transaction-bulks-view/elements/TransactionBulkTransactionsTable.tsx
@@ -14,7 +14,7 @@ import useEnvData from '../../../../hooks/useEnvData';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import usePushApiError from '../../../../hooks/usePushApiError';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
@@ -42,6 +42,7 @@ export default function TransactionBulkTransactionsTable({
     const [perPageKey] = useState('transaction_bulks_transactions');
 
     const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        page?: number;
         per_page?: number;
         order_by: string;
         order_dir: string;
@@ -53,6 +54,7 @@ export default function TransactionBulkTransactionsTable({
         },
         {
             queryParams: {
+                page: NumberParam,
                 per_page: NumberParam,
                 order_by: StringParam,
                 order_dir: StringParam,
diff --git a/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx b/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx
index bf728e5d9..e9613e564 100644
--- a/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx
+++ b/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx
@@ -7,7 +7,7 @@ import { ConfigurableTableColumn } from '../../vouchers/hooks/useConfigurableTab
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 
diff --git a/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx b/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx
index cf910a522..ff37a8c73 100644
--- a/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx
+++ b/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx
@@ -12,7 +12,7 @@ import { strLimit } from '../../../../helpers/string';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import TransactionStateLabel from '../../../elements/resource-states/TransactionStateLabel';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import TranslateHtml from '../../../elements/translate-html/TranslateHtml';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index 48b43ccc1..74d474510 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -27,7 +27,7 @@ import ModalOrderPhysicalCard from '../../modals/ModalOrderPhysicalCard';
 import useTranslate from '../../../hooks/useTranslate';
 import useShowVoucherQrCode from '../vouchers/hooks/useShowVoucherQrCode';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Label from '../../elements/image_cropper/Label';
+import Label from '../../elements/label/Label';
 import { Permission } from '../../../props/models/Organization';
 import VoucherReservationsCard from './elements/VoucherReservationsCard';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
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 a7bf490f8..4824b5bbc 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
@@ -9,7 +9,7 @@ import Organization from '../../../../props/models/Organization';
 import { PaginationData } from '../../../../props/ApiResponses';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Label from '../../../elements/image_cropper/Label';
+import Label from '../../../elements/label/Label';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
diff --git a/react/src/dashboard/hooks/useFilter.tsx b/react/src/dashboard/hooks/useFilter.tsx
deleted file mode 100644
index 897aff0a9..000000000
--- a/react/src/dashboard/hooks/useFilter.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import FilterModel from '../types/FilterModel';
-import FilterSetter from '../types/FilterSetter';
-import FilterScope from '../types/FilterScope';
-
-export default function useFilter<T = FilterModel>(
-    defaultValues?: T & FilterModel,
-    throttledValues: Array<string> = ['q'],
-): FilterScope<T & FilterModel> {
-    const [throttledList] = useState(throttledValues);
-    const [initialValues] = useState<T & FilterModel>(defaultValues);
-    const [activeValues, setActiveValues] = useState<T & FilterModel>(initialValues);
-    const [values, setValues] = useState<T & FilterModel>(initialValues);
-    const prevFilters = useRef(values);
-    const [show, setShow] = useState(false);
-
-    const update = useCallback<FilterSetter<Partial<T>>>(
-        (values, reset = false): void => {
-            if (typeof values == 'function') {
-                setValues((oldValues: T) => {
-                    return reset
-                        ? { ...initialValues, ...(values as CallableFunction)(oldValues) }
-                        : (values as CallableFunction)(oldValues);
-                });
-
-                return;
-            }
-
-            setValues((filters) => (reset ? { ...initialValues, ...values } : { ...filters, ...values }));
-        },
-        [initialValues],
-    );
-
-    const resetFilters = useCallback((): void => {
-        update({} as T, true);
-    }, [update]);
-
-    const getTimeout = useCallback(
-        (current, old) => {
-            return throttledList.filter((filter) => current[filter] !== old[filter]).length > 0 ? 1000 : 0;
-        },
-        [throttledList],
-    );
-
-    const touch = useCallback(() => {
-        update((values) => ({ ...values }));
-    }, [update]);
-
-    useEffect(
-        function () {
-            const clear = setTimeout(
-                () => {
-                    setActiveValues(values);
-                },
-                getTimeout(values, prevFilters.current),
-            );
-
-            return () => clearTimeout(clear);
-        },
-        [values, getTimeout],
-    );
-
-    useEffect(() => {
-        prevFilters.current = values;
-    }, [values]);
-
-    return {
-        show,
-        setShow,
-        values,
-        activeValues,
-        update,
-        resetFilters,
-        touch,
-    };
-}
diff --git a/react/src/dashboard/i18n/nl/pages/product.js b/react/src/dashboard/i18n/nl/pages/product.js
index f05fea3e2..54a1aa23c 100644
--- a/react/src/dashboard/i18n/nl/pages/product.js
+++ b/react/src/dashboard/i18n/nl/pages/product.js
@@ -16,6 +16,7 @@ export default {
         ean_placeholder: 'Voeg een Europees artikelnummer toe',
         sku: 'SKU',
         sku_placeholder: 'Voeg een voorraadbeheereenheidnummer toe',
+        expired: 'Verlopen',
     },
     tooltips: {
         ean: [
diff --git a/react/src/dashboard/layout/Layout.tsx b/react/src/dashboard/layout/Layout.tsx
index 8bf8bd7c6..45efec8c3 100644
--- a/react/src/dashboard/layout/Layout.tsx
+++ b/react/src/dashboard/layout/Layout.tsx
@@ -41,7 +41,10 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
     }
 
     return (
-        <LoadScript googleMapsApiKey={envData?.config?.google_maps_api_key} libraries={libraries}>
+        <LoadScript
+            googleMapsApiKey={envData?.config?.google_maps_api_key}
+            libraries={libraries}
+            loadingElement={<></>}>
             <ErrorBoundaryHandler type={'main'} front={'dashboard'}>
                 <div
                     className={classNames(
diff --git a/react/src/dashboard/services/EmployeeService.ts b/react/src/dashboard/services/EmployeeService.ts
index 75872616a..9d308d99d 100644
--- a/react/src/dashboard/services/EmployeeService.ts
+++ b/react/src/dashboard/services/EmployeeService.ts
@@ -69,8 +69,8 @@ export class EmployeeService<T = Employee> {
             isProviderPanel ? 'branch_name_id' : null,
             isProviderPanel ? 'branch_number' : null,
             'auth_2fa',
-            'created_at',
             'last_activity',
+            'created_at',
         ].filter((item) => item);
 
         return list.map((key) => ({
diff --git a/react/src/dashboard/services/helpers/useFileTypeValidation.tsx b/react/src/dashboard/services/helpers/useFileTypeValidation.tsx
new file mode 100644
index 000000000..6f344a92e
--- /dev/null
+++ b/react/src/dashboard/services/helpers/useFileTypeValidation.tsx
@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+
+export default function useFileTypeValidation() {
+    return useCallback((file: File, acceptedFiles: Array<string>) => {
+        if (!acceptedFiles?.length) {
+            return true;
+        }
+
+        const accepted = acceptedFiles.map((item) => item.toLowerCase());
+
+        const fileName = file.name.toLowerCase();
+        const fileType = (file.type || '').toLowerCase();
+        const lastDotIndex = fileName.lastIndexOf('.');
+        const extension = lastDotIndex === -1 ? '' : fileName.slice(lastDotIndex);
+
+        return accepted.some((item) => {
+            if (item.startsWith('.')) {
+                return extension === item;
+            }
+
+            if (item.endsWith('/*')) {
+                const prefix = item.slice(0, -1);
+                return fileType.startsWith(prefix);
+            }
+
+            return fileType === item;
+        });
+    }, []);
+}
diff --git a/react/src/dashboard/types/FilterModel.tsx b/react/src/dashboard/types/FilterModel.tsx
deleted file mode 100644
index 66e44729f..000000000
--- a/react/src/dashboard/types/FilterModel.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default interface FilterModel {
-    q?: string;
-    per_page?: number;
-    page?: number;
-    order_by?: string;
-    order_dir?: string;
-    [key: string]: number | string | boolean | Array<number | string | boolean>;
-}
diff --git a/react/src/dashboard/types/FilterScope.tsx b/react/src/dashboard/types/FilterScope.tsx
deleted file mode 100644
index fcbbe5171..000000000
--- a/react/src/dashboard/types/FilterScope.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import FilterSetter from './FilterSetter';
-
-export default interface FilterScope<T> {
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    values: T;
-    activeValues: T;
-    update: FilterSetter<Partial<T>>;
-    resetFilters: () => void;
-    touch: () => void;
-}
diff --git a/react/src/dashboard/types/FilterSetter.tsx b/react/src/dashboard/types/FilterSetter.tsx
deleted file mode 100644
index dfda3f8e2..000000000
--- a/react/src/dashboard/types/FilterSetter.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import FilterModel from './FilterModel';
-
-type FilterSetter<T = FilterModel> = (values: T | ((values: T) => T), reset?: boolean) => void;
-
-export default FilterSetter;
diff --git a/react/src/webshop/Webshop.tsx b/react/src/webshop/Webshop.tsx
index 3502c06d3..5130f4a3d 100644
--- a/react/src/webshop/Webshop.tsx
+++ b/react/src/webshop/Webshop.tsx
@@ -114,7 +114,7 @@ export default function Webshop({ envData }: { envData: EnvDataWebshopProp }): R
 
     return (
         <FrameDirectorProvider>
-            <LoadScript googleMapsApiKey={envData.config.google_maps_api_key} language={'nl'}>
+            <LoadScript googleMapsApiKey={envData.config.google_maps_api_key} language={'nl'} loadingElement={<></>}>
                 <PushNotificationsProvider
                     groups={{
                         webshop: {
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
index 90d676440..953ebb4c1 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Markdown from '../markdown/Markdown';
 import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
 import useAssetUrl from '../../../hooks/useAssetUrl';
+import Label from '../label/Label';
 
 export default function CmsBlocksItem({
     block,
@@ -22,7 +23,11 @@ export default function CmsBlocksItem({
             </div>
             <div className="fund-information">
                 {block.title && <h2 className="fund-title">{block.title}</h2>}
-                {block.label && <div className="fund-label label label-primary">{block.label}</div>}
+                {block.label && (
+                    <Label type="primary" className="fund-label">
+                        {block.label}
+                    </Label>
+                )}
 
                 <div className="fund-description">
                     <Markdown content={block.description_html} />
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
index d620b950a..365901650 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocksItemLink.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Markdown from '../markdown/Markdown';
 import ImplementationPageBlock from '../../../props/models/ImplementationPageBlock';
 import useAssetUrl from '../../../hooks/useAssetUrl';
+import Label from '../label/Label';
 
 export default function CmsBlocksItemLink({ block }: { block: ImplementationPageBlock }) {
     const assetUrl = useAssetUrl();
@@ -20,7 +21,11 @@ export default function CmsBlocksItemLink({ block }: { block: ImplementationPage
             </div>
             <div className="fund-information">
                 {block.title && <h2 className="fund-title">{block.title}</h2>}
-                {block.label && <div className="fund-label label label-primary">{block.label}</div>}
+                {block.label && (
+                    <Label type="primary" className="fund-label">
+                        {block.label}
+                    </Label>
+                )}
 
                 <div className="fund-description">
                     <Markdown content={block.description_html} />
diff --git a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
index d59188ab1..1afe6a452 100644
--- a/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
+++ b/react/src/webshop/components/elements/file-uploader/FileUploader.tsx
@@ -12,6 +12,7 @@ import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import classNames from 'classnames';
 import BlockWarning from '../block-warning/BlockWarning';
 import { isPreviewableExtension } from '../../../../dashboard/helpers/filePreview';
+import useFileTypeValidation from '../../../../dashboard/services/helpers/useFileTypeValidation';
 
 export type FileUploaderItem = {
     id?: string;
@@ -89,6 +90,7 @@ export default function FileUploader({
     const pushInfo = usePushInfo();
     const translate = useTranslate();
     const openModal = useOpenModal();
+    const fileTypeIsValid = useFileTypeValidation();
 
     const [isDragOver, setIsDragOver] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -252,29 +254,9 @@ export default function FileUploader({
                 return [...files];
             }
 
-            const accepted = acceptedFiles.map((item) => item.toLowerCase());
-
-            return [...files].filter((file) => {
-                const fileName = file.name.toLowerCase();
-                const fileType = (file.type || '').toLowerCase();
-                const lastDotIndex = fileName.lastIndexOf('.');
-                const extension = lastDotIndex === -1 ? '' : fileName.slice(lastDotIndex);
-
-                return accepted.some((item) => {
-                    if (item.startsWith('.')) {
-                        return extension === item;
-                    }
-
-                    if (item.endsWith('/*')) {
-                        const prefix = item.slice(0, -1);
-                        return fileType.startsWith(prefix);
-                    }
-
-                    return fileType === item;
-                });
-            });
+            return [...files].filter((file) => fileTypeIsValid(file, acceptedFiles));
         },
-        [acceptedFiles],
+        [acceptedFiles, fileTypeIsValid],
     );
 
     const removeFile = useCallback(
diff --git a/react/src/dashboard/components/elements/image_cropper/Label.tsx b/react/src/webshop/components/elements/label/Label.tsx
similarity index 54%
rename from react/src/dashboard/components/elements/image_cropper/Label.tsx
rename to react/src/webshop/components/elements/label/Label.tsx
index 2d6ef29bf..3b467d944 100644
--- a/react/src/dashboard/components/elements/image_cropper/Label.tsx
+++ b/react/src/webshop/components/elements/label/Label.tsx
@@ -1,43 +1,41 @@
-import React, { ReactNode } from 'react';
 import classNames from 'classnames';
+import React, { ReactNode } from 'react';
 
-export type LabelType =
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'default'
-    | 'text'
-    | 'primary'
-    | 'danger_light'
-    | 'primary_light';
+export type LabelType = 'success' | 'warning' | 'danger' | 'default' | 'primary' | 'light' | 'default-outline';
 
 export default function Label({
     children,
     type,
-    dusk,
     className,
-    disabled = false,
+    dusk,
+    round = false,
+    nowrap = false,
+    size,
 }: {
-    children: ReactNode | ReactNode[];
-    type: LabelType;
-    dusk?: string;
+    children?: ReactNode | ReactNode[];
+    type?: LabelType;
     className?: string;
-    disabled?: boolean;
+    dusk?: string;
+    round?: boolean;
+    nowrap?: boolean;
+    size?: 'sm' | 'xl';
 }) {
     return (
         <div
             data-dusk={dusk}
             className={classNames(
                 'label',
-                type === 'text' && 'label-text',
+                type === 'success' && 'label-success',
+                type === 'warning' && 'label-warning',
                 type === 'danger' && 'label-danger',
                 type === 'default' && 'label-default',
-                type === 'warning' && 'label-warning',
                 type === 'primary' && 'label-primary',
-                type === 'success' && 'label-success',
-                type === 'danger_light' && 'label-danger-light',
-                type === 'primary_light' && 'label-primary-light',
-                disabled && 'disabled',
+                type === 'light' && 'label-light',
+                type === 'default-outline' && 'label-default-outline',
+                round && 'label-round',
+                nowrap && 'nowrap',
+                size === 'sm' && 'label-sm',
+                size === 'xl' && 'label-xl',
                 className,
             )}>
             {children}
diff --git a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemList.tsx b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemList.tsx
index 30a023d82..943ef4244 100644
--- a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemList.tsx
@@ -7,6 +7,7 @@ import { strLimit } from '../../../../../../dashboard/helpers/string';
 import FundsListItemModel from '../../../../../services/types/FundsListItemModel';
 import { uniqueId } from 'lodash';
 import { WebshopRoutes } from '../../../../../modules/state_router/RouterBuilder';
+import Label from '../../../label/Label';
 
 export default function FundsListItemList({
     fund,
@@ -36,33 +37,23 @@ export default function FundsListItemList({
                 <div className="fund-details">
                     <div className="fund-status-label">
                         {fund.canApply && !fund.showActivateButton && (
-                            <div className="label label-light">
-                                {translate('list_blocks.fund_item_list.status.is_applicable')}
-                            </div>
+                            <Label type="light">{translate('list_blocks.fund_item_list.status.is_applicable')}</Label>
                         )}
 
                         {fund.showActivateButton && (
-                            <div className="label label-success">
-                                {translate('list_blocks.fund_item_list.status.activateable')}
-                            </div>
+                            <Label type="success">{translate('list_blocks.fund_item_list.status.activateable')}</Label>
                         )}
 
                         {fund.alreadyReceived && (
-                            <div className="label label-primary">
-                                {translate('list_blocks.fund_item_list.status.active')}
-                            </div>
+                            <Label type="primary">{translate('list_blocks.fund_item_list.status.active')}</Label>
                         )}
 
                         {fund.showPendingButton && (
-                            <div className="label label-warning">
-                                {translate('list_blocks.fund_item_list.status.is_pending')}
-                            </div>
+                            <Label type="warning">{translate('list_blocks.fund_item_list.status.is_pending')}</Label>
                         )}
 
                         {fund.showRequestButton && (
-                            <div className="label label-light">
-                                {translate('list_blocks.fund_item_list.status.is_applicable')}
-                            </div>
+                            <Label type="light">{translate('list_blocks.fund_item_list.status.is_applicable')}</Label>
                         )}
                     </div>
 
diff --git a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemSearch.tsx b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemSearch.tsx
index 395753adb..55584c634 100644
--- a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemSearch.tsx
+++ b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemSearch.tsx
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import useTranslate from '../../../../../../dashboard/hooks/useTranslate';
 import FundsListItemModel from '../../../../../services/types/FundsListItemModel';
+import Label from '../../../label/Label';
 
 export default function FundsListItemSearch({
     fund,
@@ -31,15 +32,11 @@ export default function FundsListItemSearch({
                     <div className="search-subtitle">{fund.organization?.name}</div>
                     <div className="search-status-label">
                         {fund.showPendingButton && (
-                            <div className="label label-default">
-                                {translate('list_blocks.fund_item_search.buttons.is_pending')}
-                            </div>
+                            <Label type="default">{translate('list_blocks.fund_item_search.buttons.is_pending')}</Label>
                         )}
 
                         {fund.alreadyReceived && (
-                            <div className="label label-success">
-                                {translate('list_blocks.fund_item_search.status.active')}
-                            </div>
+                            <Label type="success">{translate('list_blocks.fund_item_search.status.active')}</Label>
                         )}
                     </div>
                 </div>
diff --git a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
index f936c3b88..3eb8692b8 100644
--- a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
@@ -6,6 +6,7 @@ import Provider from '../../../../../props/models/Provider';
 import { clickOnKeyEnter } from '../../../../../../dashboard/helpers/wcag';
 import useTranslate from '../../../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../../../modules/state_router/RouterBuilder';
+import Label from '../../../label/Label';
 
 export default function ProvidersListItemList({
     provider,
@@ -92,10 +93,10 @@ export default function ProvidersListItemList({
                                         <div className="office-details">
                                             <div className="office-title">{office.address}</div>
                                             <div className="office-labels">
-                                                <div className="label label-default">
+                                                <Label type="default">
                                                     {provider.business_type.name ||
                                                         translate('list_blocks.provider_item_list.no_data')}
-                                                </div>
+                                                </Label>
                                             </div>
                                             {(office.phone || provider.phone || provider.email) && (
                                                 <div>
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 9a764dbbc..1716518b8 100644
--- a/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
@@ -20,6 +20,7 @@ import useOpenModal from '../../../../dashboard/hooks/useOpenModal';
 import useIsMobile from '../../../hooks/useIsMobile';
 import FundRequestClarification from '../../../../dashboard/props/models/FundRequestClarification';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function FundRequestsShow() {
     const { id } = useParams();
@@ -138,16 +139,20 @@ export default function FundRequestsShow() {
                                         {translate('fund_request.details.status')}
                                     </div>
                                     <div className="fund-request-prop-value" aria-live="polite">
-                                        <div
-                                            className={classNames(
-                                                'label',
-                                                fundRequest.state === 'pending' && 'label-warning',
-                                                fundRequest.state === 'approved' && 'label-success',
-                                                fundRequest.state === 'declined' && 'label-default',
-                                                fundRequest.state === 'disregarded' && 'label-danger',
-                                            )}>
+                                        <Label
+                                            type={
+                                                fundRequest.state === 'pending'
+                                                    ? 'warning'
+                                                    : fundRequest.state === 'approved'
+                                                      ? 'success'
+                                                      : fundRequest.state === 'declined'
+                                                        ? 'default'
+                                                        : fundRequest.state === 'disregarded'
+                                                          ? 'danger'
+                                                          : undefined
+                                            }>
                                             {fundRequest.state_locale}
-                                        </div>
+                                        </Label>
                                     </div>
                                 </div>
                                 <div className="fund-request-prop">
diff --git a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestClarificationsBlock.tsx b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestClarificationsBlock.tsx
index d745dd901..e4b67b9a2 100644
--- a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestClarificationsBlock.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestClarificationsBlock.tsx
@@ -3,6 +3,7 @@ import FundRequest from '../../../../../dashboard/props/models/FundRequest';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import FundRequestClarification from '../../../../../dashboard/props/models/FundRequestClarification';
 import FundRequestRecord from '../../../../../dashboard/props/models/FundRequestRecord';
+import Label from '../../../elements/label/Label';
 
 export default function FundRequestClarificationsBlock({
     fundRequest,
@@ -116,12 +117,12 @@ export default function FundRequestClarificationsBlock({
                                     {translate('fund_request.clarifications.provide_info')}
                                 </button>
                             ) : (
-                                <div className="label label-light label-xl nowrap">
+                                <Label type="light" size="xl" nowrap={true}>
                                     {translate('fund_request.clarifications.info_responded_count', {
                                         count: item?.clarificationsResponded?.length,
                                     })}
                                     <em className="mdi mdi-check-bold icon-end" aria-hidden="true" />
-                                </div>
+                                </Label>
                             )}
                         </div>
                     </div>
diff --git a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlock.tsx b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlock.tsx
index 0433084a3..773ec5e22 100644
--- a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlock.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlock.tsx
@@ -31,11 +31,7 @@ export default function FundRequestRecordsBlock({
             fundRequest?.fund?.criteria
                 ?.filter(
                     (criterion) =>
-                        ![
-                            'children_same_address_nth',
-                            'partner_same_address_nth',
-                            'partner_same_address_gender_female_nth',
-                        ].includes(criterion.record_type_key),
+                        !['children_same_address_nth', 'partner_same_address_nth'].includes(criterion.record_type_key),
                 )
                 .map((criterion) => criterion.record_type_key) || []
         );
diff --git a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItem.tsx b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItem.tsx
index d1c6fc2be..ac2b2a8e5 100644
--- a/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItem.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/elements/FundRequestRecordsBlockItem.tsx
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { uniq } from 'lodash';
 import useIsMobile from '../../../../hooks/useIsMobile';
 import FundRequestClarification from '../../../../../dashboard/props/models/FundRequestClarification';
+import Label from '../../../elements/label/Label';
 
 export default function FundRequestRecordsBlockItem({
     record,
@@ -70,17 +71,17 @@ export default function FundRequestRecordsBlockItem({
 
                 <div className="fund-request-record-header-actions">
                     {notAnsweredCount > 0 && (
-                        <div className="label label-primary label-xl nowrap">
-                            <div className="label-blink" aria-hidden="true" />
-                            {notAnsweredCount} <div className="label-text">{translate('fund_request.record.new')}</div>
-                        </div>
+                        <Label type="primary" size="xl" nowrap={true}>
+                            <span className="label-blink" aria-hidden="true" />
+                            {notAnsweredCount} <span>{translate('fund_request.record.new')}</span>
+                        </Label>
                     )}
 
                     {notAnsweredCount === 0 && answeredCount > 0 && (
-                        <div className="label label-light label-xl nowrap">
+                        <Label type="light" size="xl" nowrap={true}>
                             {translate('fund_request.record.answer')}
                             <em className="mdi mdi-check-bold icon-end" aria-hidden="true" />
-                        </div>
+                        </Label>
                     )}
 
                     {record.clarifications.length > 0 && !inline && (
diff --git a/react/src/webshop/components/pages/fund-requests/elements/FundRequestCard.tsx b/react/src/webshop/components/pages/fund-requests/elements/FundRequestCard.tsx
index f2dda1d3d..d55dc8a89 100644
--- a/react/src/webshop/components/pages/fund-requests/elements/FundRequestCard.tsx
+++ b/react/src/webshop/components/pages/fund-requests/elements/FundRequestCard.tsx
@@ -4,6 +4,7 @@ import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
+import Label from '../../../elements/label/Label';
 
 export default function FundRequestCard({ fundRequest }: { fundRequest: FundRequest }) {
     const assetUrl = useAssetUrl();
@@ -41,30 +42,19 @@ export default function FundRequestCard({ fundRequest }: { fundRequest: FundRequ
                         </div>
                     </div>
                     <div className="fund-request-overview">
-                        {fundRequest.state === 'pending' && (
-                            <div className="label label-warning">{fundRequest.state_locale}</div>
-                        )}
-
-                        {fundRequest.state === 'approved' && (
-                            <div className="label label-success">{fundRequest.state_locale}</div>
-                        )}
-
-                        {fundRequest.state === 'declined' && (
-                            <div className="label label-default">{fundRequest.state_locale}</div>
-                        )}
-
-                        {fundRequest.state === 'disregarded' && (
-                            <div className="label label-danger">{fundRequest.state_locale}</div>
-                        )}
+                        {fundRequest.state === 'pending' && <Label type="warning">{fundRequest.state_locale}</Label>}
+                        {fundRequest.state === 'approved' && <Label type="success">{fundRequest.state_locale}</Label>}
+                        {fundRequest.state === 'declined' && <Label type="default">{fundRequest.state_locale}</Label>}
+                        {fundRequest.state === 'disregarded' && <Label type="danger">{fundRequest.state_locale}</Label>}
                     </div>
                 </div>
                 <div className="fund-request-values">
                     <div className="fund-request-values-label">
                         {notAnsweredCount > 0 && (
-                            <div className="label label-primary label-xl">
-                                <div className="label-blink" aria-hidden="true" />
+                            <Label type="primary" size="xl">
+                                <span className="label-blink" aria-hidden="true" />
                                 {translate('fund_requests.card.questions_count', { count: notAnsweredCount })}
-                            </div>
+                            </Label>
                         )}
                     </div>
                     <div className="fund-request-values-date">
@@ -80,10 +70,10 @@ export default function FundRequestCard({ fundRequest }: { fundRequest: FundRequ
                 </div>
                 <div className="fund-request-values-label">
                     {notAnsweredCount > 0 && (
-                        <div className="label label-primary label-xl">
-                            <div className="label-blink" aria-hidden="true" />
+                        <Label type="primary" size="xl">
+                            <span className="label-blink" aria-hidden="true" />
                             {translate('fund_requests.card.questions_count', { count: notAnsweredCount })}
-                        </div>
+                        </Label>
                     )}
                 </div>
             </div>
diff --git a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
index 4cf9536eb..9268f4b45 100644
--- a/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/steps/FundRequestStepCriteria.tsx
@@ -236,12 +236,8 @@ export default function FundRequestStepCriteria({
                                 <Fragment>
                                     {criteria
                                         .filter((criterion) => criterion.fill_type === 'prefill')
-                                        .filter((criterion) =>
-                                            [
-                                                'partner_same_address_nth',
-                                                'partner_same_address_gender_female_nth',
-                                            ].includes(criterion.record_type_key),
-                                        ).length > 0 &&
+                                        .filter((criterion) => criterion.record_type_key === 'partner_same_address_nth')
+                                        .length > 0 &&
                                         prefills.partner.length > 0 && (
                                             <FundRequestCriteriaPartner
                                                 recordTypesByKey={recordTypesByKey}
@@ -265,11 +261,9 @@ export default function FundRequestStepCriteria({
                                         .filter((criterion) => criterion.fill_type === 'prefill')
                                         .filter(
                                             (criterion) =>
-                                                ![
-                                                    'children_same_address_nth',
-                                                    'partner_same_address_nth',
-                                                    'partner_same_address_gender_female_nth',
-                                                ].includes(criterion.record_type_key),
+                                                !['children_same_address_nth', 'partner_same_address_nth'].includes(
+                                                    criterion.record_type_key,
+                                                ),
                                         ).length > 0 && (
                                         <div className="preview-item-panel">
                                             <div className="preview-item-values">
@@ -280,7 +274,6 @@ export default function FundRequestStepCriteria({
                                                             ![
                                                                 'children_same_address_nth',
                                                                 'partner_same_address_nth',
-                                                                'partner_same_address_gender_female_nth',
                                                             ].includes(criterion.record_type_key),
                                                     )
                                                     .map((criterion) => (
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 923cc017c..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
@@ -164,11 +164,8 @@ export default function FundRequestValuesOverview({
 
                                 {step.criteria
                                     .filter((criterion) => criterion.fill_type === 'prefill')
-                                    .filter((criterion) =>
-                                        ['partner_same_address_nth', 'partner_same_address_gender_female_nth'].includes(
-                                            criterion.record_type_key,
-                                        ),
-                                    ).length > 0 &&
+                                    .filter((criterion) => criterion.record_type_key === 'partner_same_address_nth')
+                                    .length > 0 &&
                                     prefills.partner.length > 0 && (
                                         <FundRequestCriteriaPartner
                                             recordTypesByKey={recordTypesByKey}
@@ -193,11 +190,9 @@ export default function FundRequestValuesOverview({
                                         (criterion) =>
                                             !(
                                                 criterion.fill_type === 'prefill' &&
-                                                [
-                                                    'children_same_address_nth',
-                                                    'partner_same_address_nth',
-                                                    'partner_same_address_gender_female_nth',
-                                                ].includes(criterion.record_type_key)
+                                                ['children_same_address_nth', 'partner_same_address_nth'].includes(
+                                                    criterion.record_type_key,
+                                                )
                                             ),
                                     ).length > 0 && (
                                     <div className="preview-item-panel">
@@ -211,7 +206,6 @@ export default function FundRequestValuesOverview({
                                                             [
                                                                 'children_same_address_nth',
                                                                 'partner_same_address_nth',
-                                                                'partner_same_address_gender_female_nth',
                                                             ].includes(criterion.record_type_key)
                                                         ),
                                                 )
diff --git a/react/src/webshop/components/pages/home/Home.tsx b/react/src/webshop/components/pages/home/Home.tsx
index 2b6367dde..1a143feb2 100644
--- a/react/src/webshop/components/pages/home/Home.tsx
+++ b/react/src/webshop/components/pages/home/Home.tsx
@@ -18,6 +18,7 @@ import Section from '../../elements/sections/Section';
 import BlockProductCategories from '../../elements/block-product-categories/BlockProductCategories';
 import RandomProductsBlock from './elements/RandomProductsBlock';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function Home() {
     const envData = useEnvData();
@@ -178,7 +179,7 @@ export default function Home() {
                         <div className="pre-check-banner-content">
                             {appConfigs.pre_check_banner_label && (
                                 <h2 className="pre-check-banner-label">
-                                    <span className="label label-primary">{appConfigs.pre_check_banner_label}</span>
+                                    <Label type="primary">{appConfigs.pre_check_banner_label}</Label>
                                 </h2>
                             )}
                             {appConfigs.pre_check_banner_title && (
diff --git a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
index 1a1a2c606..5af0e8156 100644
--- a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
+++ b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
@@ -14,6 +14,7 @@ import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
 import Auth2FARestriction from '../../elements/auth2fa-restriction/Auth2FARestriction';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function PreferencesEmails() {
     const translate = useTranslate();
@@ -239,18 +240,16 @@ export default function PreferencesEmails() {
                                                 <div className="flex-row">
                                                     <div className="flex flex-col flex-center flex">
                                                         {email.primary && (
-                                                            <label
-                                                                className="label label-success"
-                                                                data-dusk="identityEmailListItemPrimary">
+                                                            <Label type="success" dusk="identityEmailListItemPrimary">
                                                                 {translate('preferences_emails.labels.primary')}
-                                                            </label>
+                                                            </Label>
                                                         )}
                                                         {!email.verified && !email.primary && (
-                                                            <label
-                                                                className="label label-default"
-                                                                data-dusk="identityEmailListItemNotVerified">
+                                                            <Label
+                                                                type="default"
+                                                                dusk="identityEmailListItemNotVerified">
                                                                 {translate('preferences_emails.labels.not_confirmed')}
-                                                            </label>
+                                                            </Label>
                                                         )}
                                                     </div>
                                                     {!email.primary && (
diff --git a/react/src/webshop/components/pages/identity-security/Security2FA.tsx b/react/src/webshop/components/pages/identity-security/Security2FA.tsx
index 4839bf56a..1144eaac9 100644
--- a/react/src/webshop/components/pages/identity-security/Security2FA.tsx
+++ b/react/src/webshop/components/pages/identity-security/Security2FA.tsx
@@ -14,6 +14,7 @@ import Modal2FADeactivate from '../../modals/Modal2FADeactivate';
 import Modal2FASetup from '../../modals/Modal2FASetup';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function Security2FA() {
     const openModal = useOpenModal();
@@ -169,9 +170,7 @@ export default function Security2FA() {
                                             </div>
                                         ) : (
                                             <div className="auth-2fa-item-label">
-                                                <div className="label label-light">
-                                                    {translate('security_2fa.disabled')}
-                                                </div>
+                                                <Label type="light">{translate('security_2fa.disabled')}</Label>
                                             </div>
                                         )}
                                     </div>
@@ -190,9 +189,9 @@ export default function Security2FA() {
                                                         {activeProvidersByKey[provider_type.type].phone}
                                                     </div>
                                                     <div className="label-group pull-right">
-                                                        <div className="label label-success">
+                                                        <Label type="success">
                                                             {translate('security_2fa.number_confirmed')}
-                                                        </div>
+                                                        </Label>
                                                     </div>
                                                 </div>
                                                 <div className="auth-phone-details-description">
diff --git a/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx b/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
index 7b1ed4c75..c6373c3c8 100644
--- a/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
+++ b/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
@@ -17,6 +17,7 @@ import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../dashboard/modules/filter_next/useFilterNext';
+import Label from '../../elements/label/Label';
 
 export default function SecuritySessions() {
     const openModal = useOpenModal();
@@ -257,17 +258,17 @@ export default function SecuritySessions() {
                                             </div>
                                             {session.current && (
                                                 <div className="session-label">
-                                                    <div className="label label-primary">
+                                                    <Label type="primary">
                                                         {translate('security_sessions.labels.online')}
-                                                    </div>
+                                                    </Label>
                                                 </div>
                                             )}
 
                                             {session.active && !session.current && (
                                                 <div className="session-label">
-                                                    <div className="label label-success">
+                                                    <Label type="success">
                                                         {translate('security_sessions.labels.online')}
-                                                    </div>
+                                                    </Label>
                                                 </div>
                                             )}
                                         </div>
diff --git a/react/src/webshop/components/pages/payouts/elements/PayoutCardLabel.tsx b/react/src/webshop/components/pages/payouts/elements/PayoutCardLabel.tsx
index e99dc770d..075570028 100644
--- a/react/src/webshop/components/pages/payouts/elements/PayoutCardLabel.tsx
+++ b/react/src/webshop/components/pages/payouts/elements/PayoutCardLabel.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import PayoutTransaction from '../../../../../dashboard/props/models/PayoutTransaction';
 import classNames from 'classnames';
+import Label from '../../../elements/label/Label';
 
 export default function PayoutCardLabel({ payout, className }: { payout: PayoutTransaction; className?: string }) {
     return (
         <div className={classNames('payout-status-label', className)}>
-            {payout.state === 'pending' && <div className="label label-warning">{payout.state_locale}</div>}
-            {payout.state === 'success' && <div className="label label-success">{payout.state_locale}</div>}
-            {payout.state === 'canceled' && <div className="label label-default">{payout.state_locale}</div>}
+            {payout.state === 'pending' && <Label type="warning">{payout.state_locale}</Label>}
+            {payout.state === 'success' && <Label type="success">{payout.state_locale}</Label>}
+            {payout.state === 'canceled' && <Label type="default">{payout.state_locale}</Label>}
         </div>
     );
 }
diff --git a/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx b/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
index aefc1d00f..1da939375 100644
--- a/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
+++ b/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
-import useFilter from '../../../../dashboard/hooks/useFilter';
 import Paginator from '../../../../dashboard/modules/paginator/components/Paginator';
 import EmptyBlock from '../../elements/empty-block/EmptyBlock';
 import { useNavigateState } from '../../../modules/state_router/Router';
@@ -14,6 +13,8 @@ import { usePhysicalCardsService } from '../../../services/PhysicalCardsService'
 import PhysicalCard from '../../../../dashboard/props/models/PhysicalCard';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import useFilterNext from '../../../../dashboard/modules/filter_next/useFilterNext';
+import { BooleanParam, NumberParam, StringParam } from 'use-query-params';
 
 export default function PhysicalCards() {
     const appConfigs = useAppConfigs();
@@ -26,29 +27,43 @@ export default function PhysicalCards() {
 
     const [physicalCards, setPhysicalCards] = useState<PaginationData<PhysicalCard>>(null);
 
-    const filter = useFilter<{
+    const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{
+        page: number;
+        per_page: number;
         archived: 0 | 1;
-        physical_card: 0 | 1;
-    }>({
-        per_page: 15,
-        archived: 0,
-        order_by: 'voucher_type',
-        order_dir: 'desc',
-        physical_card: 1,
-    });
+        order_by?: string;
+        order_dir?: string;
+    }>(
+        {
+            page: 1,
+            per_page: 15,
+            archived: 0,
+            order_by: 'voucher_type',
+            order_dir: 'desc',
+        },
+        {
+            queryParams: {
+                page: NumberParam,
+                archived: BooleanParam,
+                per_page: NumberParam,
+                order_by: StringParam,
+                order_dir: StringParam,
+            },
+        },
+    );
 
-    const fetchVouchers = useCallback(() => {
+    const fetchPhysicalCards = useCallback(() => {
         setProgress(0);
 
         physicalCardService
-            .index(filter.activeValues)
+            .index({ ...filterValuesActive, archived: filterValuesActive?.archived ? 1 : 0 })
             .then((res) => setPhysicalCards(res.data))
             .finally(() => setProgress(100));
-    }, [filter.activeValues, setProgress, physicalCardService]);
+    }, [filterValuesActive, setProgress, physicalCardService]);
 
     useEffect(() => {
-        fetchVouchers();
-    }, [fetchVouchers]);
+        fetchPhysicalCards();
+    }, [fetchPhysicalCards]);
 
     useEffect(() => {
         if (!appConfigs.has_physical_cards) {
@@ -82,12 +97,12 @@ export default function PhysicalCards() {
                                     className={classNames(
                                         'label-tab',
                                         'label-tab-sm',
-                                        !filter.values.archived && 'active',
+                                        !filterValues.archived && 'active',
                                     )}
-                                    onClick={() => filter.update({ archived: 0 })}
+                                    onClick={() => filterUpdate({ archived: 0 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
-                                    aria-pressed={!filter.values.archived}
+                                    aria-pressed={!filterValues.archived}
                                     data-dusk="physicalCardsFilterActive"
                                     role="button">
                                     {translate('physical_cards.filters.active')}
@@ -96,12 +111,12 @@ export default function PhysicalCards() {
                                     className={classNames(
                                         'label-tab',
                                         'label-tab-sm',
-                                        filter.values.archived && 'active',
+                                        filterValues.archived && 'active',
                                     )}
-                                    onClick={() => filter.update({ archived: 1 })}
+                                    onClick={() => filterUpdate({ archived: 1 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
-                                    aria-pressed={!!filter.values.archived}
+                                    aria-pressed={!!filterValues.archived}
                                     data-dusk="physicalCardsFilterArchived"
                                     role="button">
                                     {translate('physical_cards.filters.archive')}
@@ -120,7 +135,7 @@ export default function PhysicalCards() {
                                     type={'physical_card'}
                                     key={physicalCard.id}
                                     voucher={physicalCard.voucher}
-                                    onVoucherDestroyed={() => fetchVouchers()}
+                                    onVoucherDestroyed={() => fetchPhysicalCards()}
                                 />
                             ))}
 
@@ -128,8 +143,8 @@ export default function PhysicalCards() {
                                 <div className="card-section">
                                     <Paginator
                                         meta={physicalCards.meta}
-                                        filters={filter.values}
-                                        updateFilters={filter.update}
+                                        filters={filterValues}
+                                        updateFilters={filterUpdate}
                                     />
                                 </div>
                             </div>
diff --git a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupDistance.tsx b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupDistance.tsx
index 43c95a13d..62c3e58a3 100644
--- a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupDistance.tsx
+++ b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupDistance.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import FormGroup from '../../../elements/forms/FormGroup';
 import SelectControl from '../../../../../dashboard/components/elements/select-control/SelectControl';
-import FilterSetter from '../../../../../dashboard/types/FilterSetter';
+import { FilterSetter } from '../../../../../dashboard/modules/filter_next/types/FilterParams';
 import ProductsFilterGroup from './base-group/ProductsFilterGroup';
 
 export default function ProductsFilterGroupDistance({
diff --git a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupPrice.tsx b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupPrice.tsx
index e54811fa7..13d086fb0 100644
--- a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupPrice.tsx
+++ b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupPrice.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import FormGroup from '../../../elements/forms/FormGroup';
-import FilterSetter from '../../../../../dashboard/types/FilterSetter';
+import { FilterSetter } from '../../../../../dashboard/modules/filter_next/types/FilterParams';
 import RangeControl from '../../../elements/forms/RangeControl';
 import ProductsFilterGroup from './base-group/ProductsFilterGroup';
 
diff --git a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupProviders.tsx b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupProviders.tsx
index f6ea9e2c1..ae2ff4381 100644
--- a/react/src/webshop/components/pages/products/elements/ProductsFilterGroupProviders.tsx
+++ b/react/src/webshop/components/pages/products/elements/ProductsFilterGroupProviders.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import FormGroup from '../../../elements/forms/FormGroup';
-import FilterSetter from '../../../../../dashboard/types/FilterSetter';
+import { FilterSetter } from '../../../../../dashboard/modules/filter_next/types/FilterParams';
 import SelectControl from '../../../../../dashboard/components/elements/select-control/SelectControl';
 import Organization from '../../../../../dashboard/props/models/Organization';
 import useSetProgress from '../../../../../dashboard/hooks/useSetProgress';
diff --git a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
index 818b79838..a842375c9 100644
--- a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
+++ b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
@@ -18,6 +18,7 @@ import BlockLoader from '../../elements/block-loader/BlockLoader';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
+import Label from '../../elements/label/Label';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function ProvidersOffice() {
@@ -159,10 +160,10 @@ export default function ProvidersOffice() {
                                                 {translate('providers_office.details.type')}:
                                             </div>
                                             <div className="data-list-value">
-                                                <div className="label label-default label-sm">
+                                                <Label type="default" size="sm">
                                                     {provider.business_type.name ||
                                                         translate('providers_office.details.type_none')}
-                                                </div>
+                                                </Label>
                                             </div>
                                         </div>
                                     )}
@@ -284,12 +285,12 @@ export default function ProvidersOffice() {
                                                             <div className="office-details">
                                                                 <div className="office-title">{office.address}</div>
                                                                 <div className="office-labels">
-                                                                    <div className="label label-default">
+                                                                    <Label type="default">
                                                                         {provider.business_type?.name ||
                                                                             translate(
                                                                                 'providers_office.providers.type_none',
                                                                             )}
-                                                                    </div>
+                                                                    </Label>
                                                                 </div>
                                                                 {(office.phone || provider.phone || provider.email) && (
                                                                     <div>
diff --git a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
index d98a50a33..4fb36aaeb 100644
--- a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
+++ b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
@@ -23,6 +23,7 @@ import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
 import Section from '../../elements/sections/Section';
 import usePushDanger from '../../../../dashboard/hooks/usePushDanger';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function ProvidersShow() {
     const { id } = useParams();
@@ -166,10 +167,10 @@ export default function ProvidersShow() {
                                                     {translate('provider.details.type')}
                                                 </div>
                                                 <div className="data-list-value">
-                                                    <div className="label label-default label-sm">
+                                                    <Label type="default" size="sm">
                                                         {provider.business_type?.name ||
                                                             translate('provider.details.type_none')}
-                                                    </div>
+                                                    </Label>
                                                 </div>
                                             </div>
                                         )}
@@ -233,10 +234,10 @@ export default function ProvidersShow() {
                                                             <div className="office-details">
                                                                 <div className="office-title">{office.address}</div>
                                                                 <div className="office-labels">
-                                                                    <div className="label label-default">
+                                                                    <Label type="default">
                                                                         {provider?.business_type?.name ||
                                                                             translate('provider.details.type_none')}
-                                                                    </div>
+                                                                    </Label>
                                                                 </div>
                                                                 {(office.phone || provider.phone || provider.email) && (
                                                                     <div>
diff --git a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
index e185e5083..60720e024 100644
--- a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
+++ b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
@@ -12,6 +12,7 @@ import IconReimbursement from '../../../../../../assets/forus-webshop/resources/
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
 import classNames from 'classnames';
+import Label from '../../../elements/label/Label';
 
 export default function ReimbursementCard({
     onDelete,
@@ -114,7 +115,9 @@ export default function ReimbursementCard({
                     {!reimbursement.expired && reimbursement.state === 'draft' && (
                         <div className="reimbursement-overview" data-dusk="reimbursementsItemLabelDraft">
                             <div className="reimbursement-overview-status">
-                                <div className="label label-default label-round">{reimbursement?.state_locale}</div>
+                                <Label type="default" round={true}>
+                                    {reimbursement?.state_locale}
+                                </Label>
                             </div>
                             <div className="reimbursement-overview-item">
                                 <div className="reimbursement-overview-label">
@@ -130,9 +133,9 @@ export default function ReimbursementCard({
                     {!reimbursement.expired && reimbursement.state === 'pending' && (
                         <div className="reimbursement-overview" data-dusk="reimbursementsItemLabelPending">
                             <div className="reimbursement-overview-status">
-                                <div className="label label-warning label-round">
+                                <Label type="warning" round={true}>
                                     {translate('reimbursements.item.states.pending')}
-                                </div>
+                                </Label>
                             </div>
                             <div className="reimbursement-overview-item">
                                 <div className="reimbursement-overview-label">
@@ -148,9 +151,9 @@ export default function ReimbursementCard({
                     {!reimbursement.expired && reimbursement.state === 'approved' && (
                         <div className="reimbursement-overview" data-dusk="reimbursementsItemLabelApproved">
                             <div className="reimbursement-overview-status">
-                                <div className="label label-success label-round">
+                                <Label type="success" round={true}>
                                     {translate('reimbursements.item.states.accepted')}
-                                </div>
+                                </Label>
                             </div>
                             <div className="reimbursement-overview-item">
                                 <div className="reimbursement-overview-label">
@@ -166,9 +169,9 @@ export default function ReimbursementCard({
                     {!reimbursement.expired && reimbursement.state === 'declined' && (
                         <div className="reimbursement-overview" data-dusk="reimbursementsItemLabelDeclined">
                             <div className="reimbursement-overview-status">
-                                <div className="label label-default label-round">
+                                <Label type="default" round={true}>
                                     {translate('reimbursements.item.states.declined')}
-                                </div>
+                                </Label>
                             </div>
                             <div className="reimbursement-overview-item">
                                 <div className="reimbursement-overview-label">
@@ -190,9 +193,9 @@ export default function ReimbursementCard({
                     {reimbursement.expired && (
                         <div className="reimbursement-overview" data-dusk="reimbursementsItemLabelExpired">
                             <div className="reimbursement-overview-status">
-                                <div className="label label-danger label-round">
+                                <Label type="danger" round={true}>
                                     {translate('reimbursements.item.states.expired')}
-                                </div>
+                                </Label>
                             </div>
                             <div className="reimbursement-overview-item">
                                 <div className="reimbursement-overview-label">
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 31c2729df..ff9e23d31 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -15,6 +15,7 @@ import classNames from 'classnames';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
 import FileUploader from '../../elements/file-uploader/FileUploader';
+import Label from '../../elements/label/Label';
 
 export default function ReservationsShow() {
     const { id } = useParams();
@@ -108,17 +109,7 @@ export default function ReservationsShow() {
                                             <h1 className="reservation-title">
                                                 {translate('reservation.details.title')}
                                             </h1>
-                                            <div
-                                                className={classNames(
-                                                    'label',
-                                                    stateData.stateClass === 'warning' && 'label-warning',
-                                                    stateData.stateClass === 'success' && 'label-success',
-                                                    stateData.stateClass === 'default' && 'label-default',
-                                                    stateData.stateClass === 'waiting' && 'label-waiting',
-                                                    stateData.stateClass === 'danger' && 'label-danger',
-                                                )}>
-                                                {stateData.stateText}
-                                            </div>
+                                            <Label type={stateData.stateClass}>{stateData.stateText}</Label>
                                         </div>
                                         <div className="block block-key-value-list block-key-value-list-pane">
                                             <div className="block-key-value-list-item">
@@ -283,30 +274,30 @@ export default function ReservationsShow() {
                                             <div className="key-value-list-item-value">
                                                 {!reservation.extra_payment.is_fully_refunded &&
                                                     reservation.extra_payment.is_paid && (
-                                                        <div className="label label-success">
+                                                        <Label type="success">
                                                             {reservation.extra_payment.state_locale}
-                                                        </div>
+                                                        </Label>
                                                     )}
 
                                                 {!reservation.extra_payment.is_fully_refunded &&
                                                     reservation.extra_payment.is_pending && (
-                                                        <div className="label label-default">
+                                                        <Label type="default">
                                                             {reservation.extra_payment.state_locale}
-                                                        </div>
+                                                        </Label>
                                                     )}
 
                                                 {['failed', 'canceled', 'expired'].includes(
                                                     reservation.extra_payment.state,
                                                 ) && (
-                                                    <div className="label label-danger">
+                                                    <Label type="danger">
                                                         {reservation.extra_payment.state_locale}
-                                                    </div>
+                                                    </Label>
                                                 )}
 
                                                 {reservation.extra_payment.is_fully_refunded && (
-                                                    <div className="label label-danger">
+                                                    <Label type="danger">
                                                         {translate('reservation.extra_amount.refunded')}:
-                                                    </div>
+                                                    </Label>
                                                 )}
                                             </div>
                                         </div>
@@ -503,23 +494,17 @@ export default function ReservationsShow() {
                                                                     {translate('reservation.extra_amount_refund.state')}
                                                                 </div>
                                                                 {refund.state == 'refunded' && (
-                                                                    <div className="label label-success">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="success">{refund.state_locale}</Label>
                                                                 )}
 
                                                                 {['canceled', 'failed'].includes(refund.state) && (
-                                                                    <div className="label label-danger">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="danger">{refund.state_locale}</Label>
                                                                 )}
 
                                                                 {!['refunded', 'canceled', 'failed'].includes(
                                                                     refund.state,
                                                                 ) && (
-                                                                    <div className="label label-warning">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="warning">{refund.state_locale}</Label>
                                                                 )}
                                                             </div>
                                                         </td>
@@ -538,23 +523,17 @@ export default function ReservationsShow() {
                                                         <td className="hide-sm">
                                                             <div className="block-card-table-item">
                                                                 {refund.state == 'refunded' && (
-                                                                    <div className="label label-success">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="success">{refund.state_locale}</Label>
                                                                 )}
 
                                                                 {['canceled', 'failed'].includes(refund.state) && (
-                                                                    <div className="label label-danger">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="danger">{refund.state_locale}</Label>
                                                                 )}
 
                                                                 {!['refunded', 'canceled', 'failed'].includes(
                                                                     refund.state,
                                                                 ) && (
-                                                                    <div className="label label-warning">
-                                                                        {refund.state_locale}
-                                                                    </div>
+                                                                    <Label type="warning">{refund.state_locale}</Label>
                                                                 )}
                                                             </div>
                                                         </td>
diff --git a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
index 671e46461..7dbef2de7 100644
--- a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
+++ b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
@@ -7,7 +7,7 @@ import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import usePayReservationExtra from '../hooks/usePayReservationExtra';
 import useCancelReservation from '../hooks/useCancelReservation';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
-import classNames from 'classnames';
+import Label from '../../../elements/label/Label';
 
 export default function ReservationCard({
     reservation,
@@ -82,27 +82,18 @@ export default function ReservationCard({
                             <div className="reservation-overview">
                                 <div className="reservation-overview-status">
                                     {reservation.state === 'waiting' && stateData?.expiresIn > 0 && (
-                                        <div className="label label-default-outline nowrap">
+                                        <Label type="default-outline" nowrap={true}>
                                             <span className="label-blink label-blink-primary" aria-hidden="true" />
-                                            <span className="label-text">
+                                            <span>
                                                 {translate('reservations.card.remaining_minutes', {
                                                     minutes: stateData.expiresIn,
                                                 })}
                                             </span>
-                                        </div>
+                                        </Label>
                                     )}
-                                    <div
-                                        className={classNames(
-                                            'label',
-                                            stateData.stateClass === 'warning' && 'label-warning',
-                                            stateData.stateClass === 'success' && 'label-success',
-                                            stateData.stateClass === 'default' && 'label-default',
-                                            stateData.stateClass === 'waiting' && 'label-waiting',
-                                            stateData.stateClass === 'danger' && 'label-danger',
-                                        )}
-                                        data-dusk={stateData.stateDusk}>
+                                    <Label dusk={stateData.stateDusk} type={stateData.stateClass}>
                                         {stateData.stateText}
-                                    </div>
+                                    </Label>
                                 </div>
                                 <div className="reservation-overview-item hidden-xs hidden-sm">
                                     <div className="reservation-overview-label">
diff --git a/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx b/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
index b73f443ed..ed6ec50f7 100644
--- a/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
+++ b/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import Reservation from '../../../../../dashboard/props/models/Reservation';
 import { startCase } from 'lodash';
+import { LabelType } from '../../../elements/label/Label';
 
 export default function useComposeStateAndExpires() {
     const translate = useTranslate();
@@ -12,12 +13,12 @@ export default function useComposeStateAndExpires() {
                 pending: 'warning',
                 accepted: 'success',
                 rejected: 'default',
-                waiting: 'waiting',
+                waiting: 'warning',
             };
 
             const data: {
                 stateText?: string;
-                stateClass?: 'warning' | 'success' | 'default' | 'waiting' | 'danger';
+                stateClass?: LabelType;
                 stateDusk?: string;
                 expiresIn?: number;
             } = {
diff --git a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
index d3343857b..79f466f1a 100644
--- a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
@@ -23,8 +23,8 @@ import { GoogleMap } from '../../../../dashboard/components/elements/google-map/
 import Office from '../../../../dashboard/props/models/Office';
 import MapMarkerProviderOffice from '../../elements/map-markers/MapMarkerProviderOffice';
 import useAppConfigs from '../../../hooks/useAppConfigs';
-import classNames from 'classnames';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import Label from '../../elements/label/Label';
 
 export default function VouchersShow() {
     const { number } = useParams();
@@ -164,13 +164,9 @@ export default function VouchersShow() {
                                         <div className="voucher-details">
                                             <div className="voucher-details-info">
                                                 {voucher?.product && (
-                                                    <div
-                                                        className={classNames(
-                                                            'label',
-                                                            voucher?.used ? 'label-default' : 'label-success',
-                                                        )}>
+                                                    <Label type={voucher?.used ? 'default' : 'success'}>
                                                         {voucher?.used ? 'Gebruikt' : 'Ongebruikt'}
-                                                    </div>
+                                                    </Label>
                                                 )}
                                                 <div className="voucher-details-info-fund" data-dusk="voucherTitle">
                                                     {voucherCard.title}
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 9ec454536..5f520ec03 100644
--- a/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/elements/VoucherActions.tsx
@@ -183,7 +183,7 @@ export default function VoucherActions({
                     <StateNavLink
                         className="voucher-actions-button"
                         name={WebshopRoutes.PRODUCTS}
-                        query={{ fund_id: voucher.fund_id }}>
+                        query={{ fund_ids: [voucher.fund_id] }}>
                         <em className="mdi mdi-tag-heart-outline" />
                         {translate('voucher.actions.view_all_products')}
                     </StateNavLink>
diff --git a/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx b/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
index 94686fc58..0e437d174 100644
--- a/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
+++ b/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
@@ -1,5 +1,4 @@
 import React, { Fragment, useCallback } from 'react';
-import classNames from 'classnames';
 import Voucher from '../../../../../dashboard/props/models/Voucher';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { useVoucherService } from '../../../../services/VoucherService';
@@ -9,6 +8,7 @@ import ModalNotification from '../../../modals/ModalNotification';
 import useVoucherData from '../../../../services/helpers/useVoucherData';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
+import Label from '../../../elements/label/Label';
 
 export default function VoucherCard({
     type = 'voucher',
@@ -93,23 +93,21 @@ export default function VoucherCard({
 
                 {!voucher.deactivated && (
                     <div className="voucher-status-label">
-                        {voucher.expired && (
-                            <div className="label label-light">{translate('vouchers.card.expired')}</div>
-                        )}
+                        {voucher.expired && <Label type="light">{translate('vouchers.card.expired')}</Label>}
 
                         {voucherCard.type == 'product' && !voucher.expired && (
-                            <div className={classNames('label', voucherCard.used ? 'label-warning' : 'label-success')}>
+                            <Label type={voucherCard.used ? 'warning' : 'success'}>
                                 {!voucherCard.used
                                     ? translate('vouchers.card.unused')
                                     : translate('vouchers.card.used')}
-                            </div>
+                            </Label>
                         )}
                     </div>
                 )}
 
                 {voucher.deactivated && (
                     <div className="voucher-status-label">
-                        <div className="label label-danger">{translate('vouchers.card.deactivated')}</div>
+                        <Label type="danger">{translate('vouchers.card.deactivated')}</Label>
                     </div>
                 )}
 
diff --git a/react/src/webshop/i18n/nl/pages/reimbursements.mjs b/react/src/webshop/i18n/nl/pages/reimbursements.mjs
index 4184f1b85..26ab57300 100644
--- a/react/src/webshop/i18n/nl/pages/reimbursements.mjs
+++ b/react/src/webshop/i18n/nl/pages/reimbursements.mjs
@@ -37,7 +37,7 @@ export default {
     },
     details: {
         title: 'Declaratie gegevens',
-        code: 'Nummer: #:code',
+        code: 'Nummer: #{{code}}',
         labels: {
             title: 'Titel',
             amount: 'Bedrag',