diff --git a/react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss b/react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss
index 91a26d486..8acb01164 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-banner-editor.scss
@@ -49,7 +49,7 @@
             gap: 10px;
             padding: 30px 30px;
             z-index: 1;
-            border-radius: 4px;
+            border-radius: var(--border-radius);
 
             .banner-editor-title {
                 font: 500 15px/20px var(--base-font);
@@ -109,7 +109,7 @@
             .banner-editor-control-color {
                 padding: 0 5px;
                 border: 1px solid var(--border-color);
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 display: flex;
                 flex-direction: row;
                 align-items: center;
@@ -122,7 +122,7 @@
                 .banner-editor-control-color-preview {
                     width: 16px;
                     height: 16px;
-                    border-radius: 4px;
+                    border-radius: var(--border-radius);
                     box-shadow: 1px 1px 5px 0 rgba(25, 39, 52, 0.11);
                 }
 
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-danger_zone.scss b/react/assets/forus-platform/scss/_common/blocks/block-danger_zone.scss
index d7c0a67b4..397e4ed70 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-danger_zone.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-danger_zone.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     border: 1px solid var(--color-danger);
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     background: #fff;
     align-items: center;
     margin-bottom: 20px;
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss b/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
index 2a0150be8..1e037033c 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-financial-dashboard.scss
@@ -122,7 +122,7 @@
             flex-basis: 33.333%;
             margin-right: 20px;
             background: #ffffff;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             box-shadow: 0 2px 8px rgba(#000, 0.1);
             cursor: default;
 
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-mail_preview.scss b/react/assets/forus-platform/scss/_common/blocks/block-mail_preview.scss
index 15d38ff3b..25146ea8d 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-mail_preview.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-mail_preview.scss
@@ -77,7 +77,7 @@ $mailFont: Verdana, Arial, sans-serif;
         padding: 5px 75px;
         font: 600 14px/40px $mailFont;
         color: #fff;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         text-decoration: none;
         background-color: #315efd;
         cursor: pointer;
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-markdownable.scss b/react/assets/forus-platform/scss/_common/blocks/block-markdownable.scss
index e21983311..22ce764c9 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-markdownable.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-markdownable.scss
@@ -114,7 +114,7 @@
 
         .note-editing-area {
             border: 1px solid var(--border-color);
-            border-radius: 3px;
+            border-radius: var(--border-radius);
             background-color: #ffffff;
 
             .note-placeholder {
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-pincode.scss b/react/assets/forus-platform/scss/_common/blocks/block-pincode.scss
index f8aa1d4a0..9de0adbef 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-pincode.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-pincode.scss
@@ -30,7 +30,7 @@
         width: 40px;
         border: 1px solid var(--border-color);
         background: #fff;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         margin-right: 6px;
         padding: 9px 0;
         font: 600 18px/38px 'Open Sans', arial, sans-serif;
@@ -84,7 +84,7 @@
                 background: #b7bfc6;
                 width: 7px;
                 height: 2px;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
             }
         }
     }
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-pre-checks-blocks-editor.scss b/react/assets/forus-platform/scss/_common/blocks/block-pre-checks-blocks-editor.scss
index dc65bebaa..2818c20f8 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-pre-checks-blocks-editor.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-pre-checks-blocks-editor.scss
@@ -164,7 +164,7 @@
                                         width: 100%;
                                         height: 100%;
                                         object-fit: cover;
-                                        border-radius: 4px;
+                                        border-radius: var(--border-radius);
                                         border: 1px solid var(--border-color);
                                     }
                                 }
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-product.scss b/react/assets/forus-platform/scss/_common/blocks/block-product.scss
index 6da44719d..00a668c4c 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-product.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-product.scss
@@ -8,7 +8,7 @@
     .block-product-media {
         flex: 0 0 190px;
         border: 1px solid #d4d9dd;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         overflow: hidden;
 
         img {
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-sessions.scss b/react/assets/forus-platform/scss/_common/blocks/block-sessions.scss
index bcb83fd59..dcf3e0559 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-sessions.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-sessions.scss
@@ -122,7 +122,7 @@
                         display: block;
                         width: 3px;
                         height: 3px;
-                        border-radius: 3px;
+                        border-radius: var(--border-radius);
                         position: absolute;
                         left: 0;
                         top: 50%;
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-subsidy-product-overview.scss b/react/assets/forus-platform/scss/_common/blocks/block-subsidy-product-overview.scss
index d968c1845..81c9b9717 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-subsidy-product-overview.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-subsidy-product-overview.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     background: #ffffff;
-    border-radius: 5px;
+    border-radius: var(--border-radius);
     box-shadow: 0 2px 8px rgba(#000, 0.1);
     margin: 0 0 30px;
     overflow: hidden;
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-voucher-records-editor.scss b/react/assets/forus-platform/scss/_common/blocks/block-voucher-records-editor.scss
index 17e5fcc19..5c529f50a 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-voucher-records-editor.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-voucher-records-editor.scss
@@ -1,6 +1,6 @@
 &.block-voucher-records-editor {
     .block-voucher-record-list {
-        border-radius: 5px;
+        border-radius: var(--border-radius);
         border: 1px dashed var(--border-color);
         padding: 15px;
         margin-bottom: 20px;
diff --git a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature-text-image-columns.scss b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature-text-image-columns.scss
index c26477112..71dcb52be 100644
--- a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature-text-image-columns.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature-text-image-columns.scss
@@ -59,7 +59,7 @@
                 display: block;
                 width: 5px;
                 height: 100%;
-                border-radius: 3px;
+                border-radius: var(--border-radius);
                 background: linear-gradient(0deg, #7db75a 0%, #7db75a 100%), #e6eeaf;
                 position: absolute;
                 top: 0;
diff --git a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature.scss b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature.scss
index c5d9f23df..0793c72ee 100644
--- a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-feature.scss
@@ -44,7 +44,7 @@
         .block-feature-label {
             font: 600 11px/14px var(--base-font);
             padding: 2px 4px;
-            border-radius: 4px;
+            border-radius: var(--border-radius);
             border: 1px solid #dadfe5;
             background: #ebeef1;
             color: #151b26;
diff --git a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-features.scss b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-features.scss
index 9d5f6cf0a..35ae4d59c 100644
--- a/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-features.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/marketplace-features/block-features.scss
@@ -27,7 +27,7 @@
             .features-label {
                 font: 600 11px/14px var(--base-font);
                 padding: 2px 4px;
-                border-radius: 4px;
+                border-radius: var(--border-radius);
                 border: 1px solid #dadfe5;
                 background: #ebeef1;
                 color: #151b26;
diff --git a/react/assets/forus-platform/scss/_common/components/buttons.scss b/react/assets/forus-platform/scss/_common/components/buttons.scss
index 80a8c673f..e91ed63c8 100644
--- a/react/assets/forus-platform/scss/_common/components/buttons.scss
+++ b/react/assets/forus-platform/scss/_common/components/buttons.scss
@@ -1,7 +1,7 @@
 .button {
     display: inline-flex;
     width: fit-content;
-    border-radius: 3px;
+    border-radius: var(--border-radius);
     font: 500 13px/20px var(--base-font);
     padding: 7px 10px;
     box-shadow: var(--box-shadow);
diff --git a/react/assets/forus-platform/scss/_common/components/forms.scss b/react/assets/forus-platform/scss/_common/components/forms.scss
index dd88430c1..ee0016d79 100644
--- a/react/assets/forus-platform/scss/_common/components/forms.scss
+++ b/react/assets/forus-platform/scss/_common/components/forms.scss
@@ -1,20 +1,4 @@
 .form {
-    datepicker,
-    .datepicker {
-        border: none;
-        outline: none;
-        position: relative;
-
-        .form-control {
-            position: absolute;
-            left: -1px;
-            top: -1px;
-            right: -1px;
-            bottom: -1px;
-            width: calc(100% + 2px) !important;
-        }
-    }
-
     .form-label {
         display: block;
         cursor: default;
@@ -224,7 +208,7 @@
         color: var(--text-color);
         font: 500 13px/24px var(--base-font);
         transition: background-color 0.4s ease, border 0.4s ease;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         appearance: none;
 
         &[disabled] {
@@ -387,7 +371,7 @@
         height: 36px;
         color: var(--text-color);
         font: 600 16px/24px var(--base-font);
-        border-radius: 3px;
+        border-radius: var(--border-radius);
 
         &.form-value-placeholder-sm {
             padding: 0 0;
@@ -467,132 +451,6 @@
             }
         }
 
-        &.form-group-inline {
-            margin-bottom: 10px;
-            flex-wrap: wrap;
-            position: relative;
-
-            .block-form_tooltip {
-                position: absolute;
-                top: 20px;
-                right: -45px;
-                transform: translate(0, -50%);
-                z-index: 5;
-            }
-
-            & > .form-label {
-                width: 200px;
-                padding-top: 8px;
-                padding-bottom: 8px;
-                margin: 0;
-                text-align: right;
-                padding-right: 10px;
-                float: left;
-                color: black;
-
-                &.form-label-required {
-                    &:before {
-                        content: '*';
-                        padding-right: 2px;
-                        display: inline-block;
-                        margin-left: -8px;
-                        width: 8px;
-                    }
-
-                    &:after {
-                        display: none;
-                    }
-                }
-            }
-
-            & > .form-offset,
-            & > .form-control,
-            & > .react-datepicker-wrapper {
-                width: calc(100% - 200px);
-                float: left;
-
-                .form-toggle {
-                    padding: 8px 0;
-                }
-            }
-
-            & > .form-error {
-                margin-left: 200px;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            & > .form-title {
-                padding: 8px 0;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            &.form-group-inline-xl {
-                & > .form-label {
-                    width: 250px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 250px);
-                }
-
-                & > .form-error {
-                    margin-left: 250px;
-                    width: calc(100% - 250px);
-                }
-            }
-
-            &.form-group-inline-lg {
-                & > .form-label {
-                    width: 145px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 145px);
-                }
-
-                & > .form-error {
-                    margin-left: 145px;
-                    width: calc(100% - 145px);
-                }
-            }
-
-            &.form-group-inline-md {
-                & > .form-label {
-                    width: 125px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 125px);
-                }
-
-                & > .form-error {
-                    margin-left: 125px;
-                    width: calc(100% - 125px);
-                }
-            }
-
-            &.form-group-inline-sm {
-                & > .form-label {
-                    width: 80px;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: calc(100% - 80px);
-                }
-
-                & > .form-error {
-                    margin-left: 80px;
-                    width: calc(100% - 80px);
-                }
-            }
-        }
-
         &:last-child,
         &.form-group-last {
             margin-bottom: 0 !important;
@@ -601,7 +459,7 @@
 
     .control-frame {
         border: 1px solid #eef1f5;
-        border-radius: 5px;
+        border-radius: var(--border-radius);
         padding: 10px 15px 10px;
         margin: 5px 0 10px;
         font: 400 14px var(--base-font);
@@ -899,6 +757,7 @@
         .select-control {
             width: var(--selector-width);
             position: absolute;
+            z-index: 2;
 
             .select-control-input {
                 .form-control:not([type='radio']):not([type='checkbox']) {
@@ -959,7 +818,7 @@
             margin-right: 5px;
             margin-left: -25px;
             float: left;
-            border-radius: 3px;
+            border-radius: var(--border-radius);
 
             .mdi {
                 color: #262626;
@@ -1125,7 +984,7 @@
                 color: #9ca6af;
                 background: #f6f9fc;
                 border: 1px dashed #d4d9dd;
-                border-radius: 3px;
+                border-radius: var(--border-radius);
                 word-wrap: break-word;
                 white-space: pre-wrap;
             }
@@ -1136,24 +995,4 @@
         font: 600 14px/20px var(--base-font);
         color: #151b26;
     }
-
-    @media screen and (max-width: 600px) {
-        .form-group {
-            &.form-group-inline {
-                .form-label {
-                    width: auto !important;
-                    padding: 3px 0 !important;
-
-                    &.form-label-required {
-                        padding-left: 5px !important;
-                    }
-                }
-
-                .form-offset,
-                .form-control {
-                    width: 100% !important;
-                }
-            }
-        }
-    }
 }
diff --git a/react/assets/forus-platform/scss/_common/components/labels.scss b/react/assets/forus-platform/scss/_common/components/labels.scss
index 4bc4f2668..45377d5bc 100644
--- a/react/assets/forus-platform/scss/_common/components/labels.scss
+++ b/react/assets/forus-platform/scss/_common/components/labels.scss
@@ -5,12 +5,13 @@
     border-radius: calc(var(--border-radius));
     cursor: default;
     white-space: nowrap;
+    align-items: center;
 
     .mdi {
         font-size: 1.5em;
         float: right;
         color: inherit;
-        line-height: 24px;
+        line-height: 20px;
 
         &.icon-start {
             margin-left: -5px;
@@ -61,6 +62,11 @@
         color: #fff;
     }
 
+    &.label-text {
+        color: #8ca3a6;
+        background-color: transparent;
+    }
+
     &.label-primary {
         background: var(--color-primary);
         color: #fff;
@@ -71,46 +77,7 @@
         color: var(--color-primary);
     }
 
-    &.label-primary-variant {
-        background: var(--color-primary-light);
-        color: #fff;
-    }
-
-    &.label-sm {
-        padding: 0 5px;
-        line-height: 18px;
-        font-size: 10px;
-        font-weight: 700;
-    }
-
-    &.label-lg {
-        padding: 4px 10px;
-        line-height: 18px;
-        font-size: 11px;
-        font-weight: 700;
-    }
-
-    &.label-round {
-        border-radius: 30px;
-    }
-
-    &.label-tag {
-        font: 600 12px/25px var(--base-font);
-        padding: 0 10px;
-    }
-
     &:not(:last-child):not(:last-of-type) {
         margin: 0 5px 5px 0;
     }
-
-    &[ng-click] {
-        cursor: pointer;
-    }
-}
-
-@media screen and (max-width: 1000px) {
-    .label {
-        padding: 0 10px;
-        font: 700 11px/22px var(--base-font);
-    }
 }
diff --git a/react/assets/forus-platform/scss/_common/components/modals.scss b/react/assets/forus-platform/scss/_common/components/modals.scss
index 1b189181f..0c52e93a8 100644
--- a/react/assets/forus-platform/scss/_common/components/modals.scss
+++ b/react/assets/forus-platform/scss/_common/components/modals.scss
@@ -447,7 +447,7 @@
             border: 1px solid #eff6f8;
             background: #fff;
             padding: 10px 80px;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             font: 400 22px/34px var(--base-font);
             color: #646f79;
             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
@@ -766,7 +766,7 @@
 
             .modal-warning {
                 border: 1px dashed #d4d9dd;
-                border-radius: 3px;
+                border-radius: var(--border-radius);
                 padding: 15px 13px;
                 margin-top: 20px;
                 background-color: #f6f9fc;
@@ -851,7 +851,7 @@
                 margin-bottom: 15px;
 
                 .icon {
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     border: 1px solid #d4d9dd;
                     background: #fff;
                     display: flex;
@@ -889,7 +889,7 @@
                     flex-basis: 0;
                     flex-grow: 1;
                     max-width: 100%;
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     border: 1px dashed #d4d9dd;
                     background: #fff;
                     padding: 20px;
diff --git a/react/assets/forus-platform/scss/_common/components/tables.scss b/react/assets/forus-platform/scss/_common/components/tables.scss
index 6b32e1c91..31036afe4 100644
--- a/react/assets/forus-platform/scss/_common/components/tables.scss
+++ b/react/assets/forus-platform/scss/_common/components/tables.scss
@@ -403,12 +403,12 @@
 
                     &.td-media-sm {
                         width: 30px;
-                        border-radius: 4px;
+                        border-radius: var(--border-radius);
                     }
 
                     &.td-media-md {
                         width: 40px;
-                        border-radius: 4px;
+                        border-radius: var(--border-radius);
                     }
 
                     &.td-media-round {
diff --git a/react/assets/forus-platform/scss/_common/components/tags.scss b/react/assets/forus-platform/scss/_common/components/tags.scss
deleted file mode 100644
index 26b7365bd..000000000
--- a/react/assets/forus-platform/scss/_common/components/tags.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.tag {
-    border-radius: 20px;
-    color: #fff;
-    font: 600 12px/25px var(--base-font);
-    padding: 0 10px;
-    display: inline-flex;
-    margin-bottom: 10px;
-    cursor: default;
-
-    .mdi {
-        font-size: 1.5em;
-        float: right;
-        color: inherit;
-        line-height: 24px;
-
-        &.icon-start {
-            margin-left: -5px;
-            margin-right: 5px;
-        }
-
-        &.icon-end {
-            margin-left: 5px;
-            margin-right: -5px;
-        }
-    }
-
-    .tag-link {
-        cursor: pointer;
-    }
-
-    &.tag-primary {
-        background: var(--color-primary);
-    }
-
-    &.tag-primary-light {
-        background: var(--color-primary-light);
-    }
-
-    &.tag-success {
-        background: #2cc6ab;
-    }
-
-    &.tag-danger {
-        background: #e63b3b;
-    }
-
-    &.tag-warning {
-        background: #ff9b00;
-    }
-
-    &.tag-default {
-        background: #8ca3a6;
-    }
-
-    &.tag-text {
-        color: #8ca3a6;
-        background-color: transparent;
-    }
-
-    &.tag-sm {
-        line-height: 20px;
-        padding: 0 7.5px;
-        font-size: 11px;
-    }
-
-    &.tag-square {
-        border-radius: 2px;
-    }
-
-    &:first-child,
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    &:not(:last-of-type),
-    &:not(:last-child) {
-        margin-right: 10px;
-    }
-}
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index 154fad7f3..c26837b68 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -14,7 +14,6 @@
 @import 'includes/printables';
 
 // components
-@import 'components/tags';
 @import 'components/forms';
 @import 'components/tables';
 @import 'components/buttons';
@@ -151,7 +150,7 @@ body {
         max-width: 80vw;
         width: 240px;
         border: 1px solid #f3f4f5;
-        border-radius: 5px;
+        border-radius: var(--border-radius);
         box-shadow: 0 5px 25px rgba(#000, 0.15);
         padding: 5px 20px;
         @include cf();
@@ -310,7 +309,7 @@ body {
 
                 .notifications-menu-inner {
                     background: #ffffff;
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     box-shadow: 0 10px 25px rgba(#000, 0.15);
                     position: relative;
 
@@ -510,7 +509,7 @@ body {
                     top: 60px;
                     border: 1px solid #f3f4f5;
                     background: #fff;
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     box-shadow: 0 5px 30px rgba(#000, 0.1);
                     min-width: 220px;
                     max-width: 80%;
@@ -649,7 +648,7 @@ body {
                     display: flex;
                     flex-direction: row;
                     align-items: flex-start;
-                    border-radius: 3px;
+                    border-radius: var(--border-radius);
                     transition: background-color 0.4s;
                     gap: 6px;
 
@@ -750,7 +749,7 @@ body {
                 &.sidebar-nav-group-active {
                     & > .sidebar-nav-group-header {
                         background: #134478;
-                        border-radius: 3px;
+                        border-radius: var(--border-radius);
 
                         .sidebar-nav-group-header-icon {
                             .sidebar-nav-group-header-icon-default {
@@ -958,11 +957,6 @@ body {
                     }
                 }
 
-                .form-group-inline > .form-label {
-                    padding-top: 5px;
-                    padding-bottom: 5px;
-                }
-
                 .block-label-tabs {
                     .label-tab {
                         height: 30px;
@@ -1981,7 +1975,7 @@ body {
 
             .download-link {
                 border: 1px dashed #d2e6ff;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 position: relative;
                 display: block;
                 margin-bottom: 25px;
@@ -2048,7 +2042,7 @@ body {
 
         .download-url {
             border: 1px dashed #d2e6ff;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             padding: 13px;
             width: 320px;
             margin: 0 auto 25px;
@@ -2065,7 +2059,7 @@ body {
         .download-confirmation {
             border: 1px dashed #d2e6ff;
             margin-bottom: 20px;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             padding: 13px;
             display: block;
             cursor: pointer;
@@ -2352,7 +2346,7 @@ body {
 
     &.card-block-requests {
         box-shadow: 0 2px 5px rgba(25, 39, 52, 0.11);
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         margin: 20px 0;
         color: #646f79;
         background-color: #fff;
@@ -2510,7 +2504,7 @@ body {
             padding: 15px;
             background: #fff;
             z-index: 5;
-            border-radius: 4px;
+            border-radius: var(--border-radius);
             font: 500 13px/20px var(--base-font);
             text-transform: none;
             color: #45535e;
@@ -3092,7 +3086,7 @@ body {
                 box-shadow: none;
                 margin-bottom: 15px;
                 border: 1px solid #e5e6ec;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
 
                 .card-section {
                     background: #fff;
@@ -3839,7 +3833,7 @@ body {
         font: 400 11px/16px var(--base-font);
         border: 1px dashed #d4d9dd;
         padding: 17.5px;
-        border-radius: 5px;
+        border-radius: var(--border-radius);
 
         &.block-info-primary {
             background-color: #f7f9fc;
@@ -3992,7 +3986,7 @@ body {
             border: 1px solid #d4d9dd;
             flex-direction: row;
             padding: 5px 15px;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             float: left;
             margin-bottom: 10px;
 
@@ -4455,7 +4449,7 @@ body {
                     position: relative;
 
                     .card-section-fund {
-                        border-radius: 5px;
+                        border-radius: var(--border-radius);
                         background: #fff;
                         margin-bottom: 12.5px;
                         box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.05);
@@ -4584,7 +4578,7 @@ body {
                         &:not(.line-item) {
                             width: 100%;
                             border: 2px dashed #d2e6ff;
-                            border-radius: 5px;
+                            border-radius: var(--border-radius);
                             box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1);
                             position: relative;
                             z-index: 1;
@@ -4713,7 +4707,7 @@ body {
                 margin: 0 0 20px;
                 height: 5px;
                 background: #d2e6ff;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 width: 100%;
                 position: relative;
 
@@ -4723,7 +4717,7 @@ body {
                     top: -1px;
                     bottom: -1px;
                     background: #009ef4;
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     transition: 1s;
                 }
             }
@@ -4796,7 +4790,7 @@ body {
                 padding: 15px 10px 10px;
                 display: block;
                 background: #fff;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.1);
                 transform: translate(0, 0);
                 transition: 0.4s;
@@ -4970,7 +4964,7 @@ body {
     &.block-file {
         width: 100%;
         border: 1px dashed #d4d9dd;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         text-align: left;
         cursor: default;
         display: flex;
@@ -5116,23 +5110,6 @@ body {
                 &:last-child {
                     margin-right: 0;
                 }
-
-                &.form-group-inline {
-                    flex-direction: row;
-
-                    .form-label {
-                        line-height: 14px;
-                        padding-right: 10px;
-                        color: var(--color-primary);
-                        width: auto;
-                    }
-
-                    & > .form-offset,
-                    & > .form-control,
-                    & > .form-control {
-                        width: auto;
-                    }
-                }
             }
 
             .form-control {
@@ -5329,7 +5306,7 @@ body {
     &.block-information {
         background: #fff;
         padding: 15px 20px;
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         font: 400 13px/20px var(--base-font);
         margin-bottom: 15px;
@@ -5397,7 +5374,7 @@ body {
 
                 &:not(.line-item) {
                     width: 220px;
-                    border-radius: 5px;
+                    border-radius: var(--border-radius);
                     box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1);
                     position: relative;
                     z-index: 1;
@@ -5975,7 +5952,7 @@ body {
 
                         button {
                             background: rgba(53, 97, 255, 0.15);
-                            border-radius: 5px;
+                            border-radius: var(--border-radius);
                             font: 500 14px/25px var(--base-font);
                             color: #3561ff;
                             margin: 0 auto;
@@ -6485,7 +6462,7 @@ body {
                             display: block;
                             width: 4px;
                             height: 4px;
-                            border-radius: 5px;
+                            border-radius: var(--border-radius);
                             background: var(--color-primary-light);
                             left: 0;
                             top: 50%;
@@ -6658,7 +6635,7 @@ body {
         font: 700 14px/30px var(--base-font);
         padding: 10px 65px;
         text-align: center;
-        border-radius: 5px;
+        border-radius: var(--border-radius);
 
         &.button-primary {
             background: #305dfb;
@@ -6704,23 +6681,6 @@ body {
 
         .form-group {
             margin-bottom: 15px;
-
-            &.form-group-inline {
-                & > .form-label {
-                    width: auto;
-                    float: none;
-                    text-align: left;
-                    padding: 0;
-                }
-
-                & > .form-control,
-                & > .form-offset,
-                & > .form-error {
-                    float: none;
-                    width: 100%;
-                    margin: 0;
-                }
-            }
         }
     }
 
@@ -6741,7 +6701,7 @@ body {
         &.block-office-edit-card {
             background: #fff;
             border: 1px solid #d2e6ff;
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             box-shadow: 2px 5px 5px rgba($color: #000000, $alpha: 0.05);
             margin-bottom: 25px;
 
@@ -6897,7 +6857,7 @@ body {
 
                     .button {
                         background-color: #e1e8ff;
-                        border-radius: 5px;
+                        border-radius: var(--border-radius);
                     }
                 }
             }
diff --git a/react/assets/forus-platform/scss/_common/includes/printables.scss b/react/assets/forus-platform/scss/_common/includes/printables.scss
index a7e9bf71c..78f6ca61e 100644
--- a/react/assets/forus-platform/scss/_common/includes/printables.scss
+++ b/react/assets/forus-platform/scss/_common/includes/printables.scss
@@ -105,7 +105,7 @@ body {
 
             .printable-organization-info {
                 background: #f5f5f5;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 padding: 20px;
                 margin-left: 70px;
                 margin-right: 70px;
diff --git a/react/assets/forus-platform/scss/_common/includes/third-party.scss b/react/assets/forus-platform/scss/_common/includes/third-party.scss
index 5f70b07c0..f953c3b4c 100644
--- a/react/assets/forus-platform/scss/_common/includes/third-party.scss
+++ b/react/assets/forus-platform/scss/_common/includes/third-party.scss
@@ -1,175 +1,3 @@
-/*==========  Style Sheet - Third-party  ==========*/
-.nano {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-.nano > .nano-content {
-    position: absolute;
-    overflow: scroll;
-    overflow-x: hidden;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-.nano > .nano-content:focus {
-    outline: thin dotted;
-}
-.nano > .nano-content::-webkit-scrollbar {
-    display: none;
-}
-.has-scrollbar > .nano-content::-webkit-scrollbar {
-    display: block;
-}
-.nano > .nano-pane {
-    position: absolute;
-    width: 6px;
-    right: 6px;
-    top: 3px;
-    bottom: 3px;
-    cursor: pointer;
-    background-color: #eee;
-    opacity: 0.5;
-    transition: all 0.4s;
-}
-.nano > .nano-pane > .nano-slider {
-    background: #009ef4;
-    position: relative;
-    margin: 0 2px;
-}
-.nano:hover > .nano-pane,
-.nano-pane.active,
-.nano-pane.flashed {
-    opacity: 1;
-}
-
-[ng\:cloak],
-[ng-cloak],
-[data-ng-cloak],
-[x-ng-cloak],
-.ng-cloak,
-.x-ng-cloak {
-    display: none !important;
-}
-
-._720kb {
-    &-datepicker {
-        &-calendar {
-            max-width: 275px;
-            border: 1px solid #e9ecee;
-            border-radius: 5px;
-            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
-
-            &-days-header {
-                background: #fff;
-                border-bottom: 0;
-                padding: 0 5px;
-
-                div {
-                    color: #134478;
-                    font-size: 12px;
-                }
-            }
-
-            &-body {
-                display: flex;
-                flex-direction: row;
-                align-content: center;
-                flex-wrap: wrap;
-                padding: 0 5px 5px;
-                margin: 0;
-                width: 100%;
-            }
-
-            &-day {
-                width: calc(100% / 7);
-                padding: 0;
-                font-size: 13px;
-                font-weight: 500;
-                color: #282b39;
-                border-radius: 40px;
-                margin: 0;
-                height: 35px;
-                line-height: 35px;
-                position: relative;
-                z-index: 1;
-                transition: color 0.4s;
-
-                &:before {
-                    content: '';
-                    display: block;
-                    width: 28px;
-                    height: 28px;
-                    margin: 0;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    z-index: -1;
-                    border-radius: 20px;
-                    transition: background 0.4s;
-                }
-
-                &:hover {
-                    background: transparent;
-
-                    &:before {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
-                }
-
-                &._720kb-datepicker-active {
-                    color: #fff;
-                    background: transparent;
-
-                    &:before {
-                        background: #009ef4;
-                    }
-                }
-
-                &._720kb-datepicker-disabled {
-                    color: rgba(0, 0, 0, 0.2);
-                    background: transparent;
-
-                    &:before {
-                        background: rgba(25, 2, 0, 0.02);
-                    }
-                }
-            }
-
-            &-header {
-                &:nth-child(odd),
-                &:nth-child(even) {
-                    background: #fff;
-                    border-bottom: 1px solid #e9ecee;
-                }
-            }
-
-            &-month {
-                color: #282b39;
-                font: 500 13px/40px var(--base-font);
-
-                a {
-                    & > span {
-                        color: #282b39;
-                        font: 500 13px/40px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
-
-datepicker[input-visible='true'] {
-    ._720kb-datepicker-calendar {
-        top: 100%;
-        margin-top: 1px;
-        left: 0;
-    }
-}
-
 .react-datepicker-wrapper {
     width: 100%;
 }
diff --git a/react/assets/forus-platform/scss/_common/landing.scss b/react/assets/forus-platform/scss/_common/landing.scss
index 4dfb869c2..dc7cd6d6a 100644
--- a/react/assets/forus-platform/scss/_common/landing.scss
+++ b/react/assets/forus-platform/scss/_common/landing.scss
@@ -149,43 +149,6 @@
     .form-group {
         margin-bottom: 10px;
         @include cf();
-
-        &.form-group-inline {
-            margin-bottom: 10px;
-            // display: flex;
-            flex-wrap: wrap;
-
-            & > .form-label {
-                // flex: 0 0 28%;
-                // max-width: 28%;
-                width: 200px;
-                padding-top: 8px;
-                padding-bottom: 8px;
-                margin: 0;
-                text-align: right;
-                padding-right: 15px;
-                float: left;
-            }
-
-            & > .form-offset,
-            & > .form-control {
-                // flex: 0 0 72%;
-                // max-width: 72%;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            & > .form-error {
-                margin-left: 200px;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            &:last-child,
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-        }
     }
 
     .checkbox {
@@ -734,7 +697,7 @@
             /*display: block;
             background: #fff;
             box-shadow: 0 0 30px rgba(#000, .15);
-            border-radius: 5px;
+            border-radius: var(--border-radius);
             padding: 10px;
             padding-right: 65px;
             position: relative;
@@ -1253,7 +1216,7 @@
             &:not(.line-item) {
                 width: 100%;
                 border: 2px dashed #d2e6ff;
-                border-radius: 5px;
+                border-radius: var(--border-radius);
                 box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1);
                 position: relative;
                 z-index: 1;
diff --git a/react/assets/forus-platform/scss/_common/select-controls/select-control-organizations.scss b/react/assets/forus-platform/scss/_common/select-controls/select-control-organizations.scss
index 02e646168..7063d80d0 100644
--- a/react/assets/forus-platform/scss/_common/select-controls/select-control-organizations.scss
+++ b/react/assets/forus-platform/scss/_common/select-controls/select-control-organizations.scss
@@ -2,7 +2,7 @@
     --control-height: 50px;
     --control-line-height: 24px;
     --control-option-height: 36px;
-    --control-border-radius: 5px;
+    --control-border-radius: var(--border-radius);
 
     border-radius: var(--control-border-radius) !important;
 
@@ -191,7 +191,7 @@
             border: 1px solid #d4d9dd;
             border-top: 0;
             box-shadow: 0 12px 30px rgba(25, 39, 52, 0.18);
-            border-radius: 3px;
+            border-radius: var(--border-radius);
 
             .select-control-options {
                 position: relative;
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
index fd64e52b2..390d69f69 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
@@ -20,9 +20,10 @@
         width: var(--wrapper-width);
         padding: 0 var(--wrapper-padding);
         max-width: 100%;
+        min-height: calc(100vh - var(--top-navbar-height));
         margin: 0 auto;
-        display: block;
-        min-height: calc(100vh - var(--showcase-fullscreen-bottom-offset));
+        display: flex;
+        flex-direction: column;
 
         .wrapper {
             padding: 0 !important;
@@ -51,10 +52,9 @@
         flex-direction: row;
 
         .showcase-aside {
-            height: fit-content;
-            width: var(--aside-width);
-            max-width: var(--aside-width);
-            min-width: var(--aside-width);
+            flex: 0 0 var(--aside-width);
+            min-width: 0;
+            overflow: auto;
 
             .showcase-aside-block {
                 position: relative;
@@ -121,7 +121,7 @@
                         cursor: pointer;
                         align-items: center;
                         gap: 8px;
-                        transition: background-color .4s;
+                        transition: background-color 0.4s;
 
                         .showcase-aside-block-option-check {
                             display: flex;
@@ -395,8 +395,8 @@
 
         .showcase-content {
             padding-left: 30px;
-            flex-grow: 1;
-            max-width: calc(100% - var(--aside-width));
+            flex: 1 1 calc(100% - var(--aside-width));
+            min-width: 0;
 
             .showcase-content-header {
                 position: relative;
@@ -460,21 +460,18 @@
                     justify-content: flex-end;
 
                     .showcase-filters-item {
-                        margin: 0;
-                        margin-right: 10px;
+                        margin: 0 10px 0 0;
                         display: flex;
 
                         & > .form-label {
                             width: auto;
                             padding: 2.5px;
                             font: 700 11px/25px var(--base-font);
-                            margin: 0;
-                            margin-right: 10px;
+                            margin: 0 10px 0 0;
                         }
 
                         .form-control:not([type='radio']):not([type='checkbox']) {
-                            padding: 4px 10px;
-                            padding-right: 25px;
+                            padding: 4px 25px 4px 10px;
                             min-width: 130px;
                             font-size: 12px;
                         }
@@ -515,8 +512,6 @@
     }
 
     &.block-showcase-fullscreen {
-        @include fill_parent();
-        position: fixed;
         margin: 0 0 0 0;
         display: flex;
         flex-direction: column;
@@ -526,19 +521,19 @@
             width: 100%;
             height: 100%;
             position: relative;
-            flex: 2;
+            display: flex;
+            flex-direction: column;
         }
 
         .showcase-layout {
             height: 100%;
             border-top: 1px solid var(--border-color);
-            @include fill_parent();
-            position: absolute;
+            margin: 0 -20px 0;
+            flex: 1 1 auto;
 
             .showcase-aside {
                 border-radius: 0;
                 border-right: 1px solid var(--border-color);
-                height: 100%;
                 background-color: #fff;
                 @include webkit_scrollbar();
 
@@ -585,9 +580,7 @@
     @media screen and (max-width: 1300px) {
         .showcase-layout {
             .showcase-aside {
-                width: 280px;
-                min-width: 280px;
-                max-width: 280px;
+                flex: 0 0 280px;
 
                 .showcase-aside-block {
                     .showcase-aside-tabs {
@@ -608,7 +601,7 @@
             }
 
             .showcase-content {
-                max-width: calc(100% - 280px);
+                flex: 1 1 calc(100% - 280px);
             }
         }
     }
@@ -625,7 +618,6 @@
 
         .showcase-wrapper {
             position: relative;
-            min-height: auto;
         }
 
         .showcase-mobile-filters {
@@ -695,16 +687,16 @@
                 width: 100%;
                 max-width: 100%;
                 margin: 0 20px 10px -20px;
-                min-width: calc(100% + 40px);
+                min-width: 0;
                 padding: 0;
                 border-top: 1px solid var(--border-color);
                 border-bottom: 1px solid var(--border-color);
                 z-index: 2;
                 border-radius: 0;
-                height: fit-content;
                 box-shadow: 2px 12px 12px 2px rgba($color: #000000, $alpha: 0.075);
                 display: none;
                 border-top: none;
+                flex: 0 0 auto;
 
                 .showcase-aside-block {
                     margin-bottom: 0;
@@ -714,13 +706,12 @@
                 }
 
                 &.show-mobile {
-                    display: block;
+                    display: flex;
                 }
             }
 
             .showcase-content {
                 padding: 0 0 0;
-                max-width: 100%;
 
                 .showcase-content-header {
                     flex-direction: column;
@@ -757,16 +748,11 @@
         }
 
         &.block-showcase-fullscreen {
-            position: absolute;
-            height: calc(85vh - 50px);
-
             #main-content {
                 height: 100%;
             }
 
             .showcase-wrapper {
-                min-height: 100%;
-
                 .showcase-layout {
                     .showcase-aside {
                         height: auto;
@@ -774,8 +760,6 @@
                     }
 
                     .showcase-content {
-                        top: 50px;
-
                         .block.block.block-google-map {
                             bottom: 0;
                         }
diff --git a/react/assets/forus-webshop/scss/includes/components/_form.scss b/react/assets/forus-webshop/scss/includes/components/_form.scss
index 79c7d809c..a0d773213 100644
--- a/react/assets/forus-webshop/scss/includes/components/_form.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_form.scss
@@ -4,23 +4,6 @@
 }
 
 .form {
-    datepicker,
-    .datepicker {
-        height: 50px;
-        border: none;
-        outline: none;
-        position: relative;
-
-        .form-control {
-            position: absolute;
-            left: -1px;
-            top: -1px;
-            right: -1px;
-            bottom: -1px;
-            width: calc(100% + 2px) !important;
-        }
-    }
-
     .form-error {
         font: 400 13px/20px var(--base-font);
         color: #ad0003;
@@ -609,63 +592,6 @@
             margin-bottom: 0;
         }
 
-        &.form-group-inline {
-            margin-bottom: 10px;
-            flex-wrap: wrap;
-
-            & > .form-label {
-                width: 200px;
-                padding-top: 8px;
-                padding-bottom: 8px;
-                margin: 0;
-                text-align: right;
-                padding-right: 15px;
-                float: left;
-            }
-
-            & > .form-offset,
-            & > .form-control {
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            & > .form-error {
-                margin-left: 200px;
-                width: calc(100% - 200px);
-                float: left;
-            }
-
-            &:last-child,
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-
-            @media screen and (max-width: 1000px) {
-                display: flex;
-                flex-direction: column;
-
-                & > .form-label {
-                    float: none;
-                    width: auto;
-                    float: none;
-                    text-align: left;
-                    padding: 0 0 0;
-                }
-
-                & > .form-offset,
-                & > .form-control {
-                    width: auto;
-                    float: none;
-                }
-
-                & > .form-error {
-                    margin-left: 0;
-                    width: auto;
-                    float: none;
-                }
-            }
-        }
-
         &.form-group-fit {
             width: fit-content;
         }
@@ -683,139 +609,6 @@
         }
     }
 
-    datepicker,
-    .datepicker {
-        border: none;
-        outline: none;
-        position: relative;
-
-        .form-control {
-            position: absolute;
-            left: -1px;
-            top: -1px;
-            right: -1px;
-            bottom: -1px;
-            width: calc(100% + 2px) !important;
-        }
-
-        ._720kb-datepicker-calendar {
-            max-width: 340px;
-            border: 1px solid #e9ecee;
-            border-radius: var(--border-radius);
-            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
-            top: calc(100% + 5px);
-            left: 0;
-            width: 100%;
-            min-width: 270px;
-
-            &-days-header {
-                background: #fff;
-                border-bottom: 0;
-                padding: 0 5px;
-
-                div {
-                    color: #333333;
-                    font-size: 12px;
-                }
-            }
-
-            &-body {
-                display: flex;
-                flex-direction: row;
-                align-content: center;
-                flex-wrap: wrap;
-                padding: 0 5px 5px;
-                margin: 0;
-                width: 100%;
-            }
-
-            &-day {
-                width: calc(100% / 7);
-                padding: 0;
-                font-size: 13px;
-                font-weight: 500;
-                color: #282b39;
-                border-radius: 40px;
-                margin: 0;
-                height: 38px;
-                line-height: 38px;
-                position: relative;
-                z-index: 1;
-                transition: color 0.4s;
-
-                &:before {
-                    content: '';
-                    display: block;
-                    width: 28px;
-                    height: 28px;
-                    margin: 0;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    z-index: -1;
-                    border-radius: 20px;
-                    transition: background 0.4s;
-                }
-
-                &:hover {
-                    background: transparent;
-
-                    &:before {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
-                }
-
-                &._720kb-datepicker-active {
-                    color: #fff;
-                    background: transparent;
-
-                    &:before {
-                        background: var(--color-primary);
-                    }
-                }
-
-                &._720kb-datepicker-disabled {
-                    color: rgba(0, 0, 0, 0.2);
-                    background: transparent;
-
-                    &:before {
-                        background: none;
-                    }
-                }
-            }
-
-            &-header {
-                &:nth-child(odd),
-                &:nth-child(even) {
-                    background: #fff;
-                    border-bottom: 1px solid #e9ecee;
-                }
-
-                &:not(.ng-hide):nth-child(2) {
-                    margin-bottom: -10px;
-
-                    & ~ ._720kb-datepicker-calendar-body,
-                    & ~ ._720kb-datepicker-calendar-days-header {
-                        display: none;
-                    }
-                }
-            }
-
-            &-month {
-                color: #282b39;
-                font: 500 13px/40px var(--base-font);
-
-                a {
-                    & > span {
-                        color: #282b39;
-                        font: 500 13px/40px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-
     .checkbox {
         display: inline-block;
         padding: 5px 15px 0 20px;
@@ -1262,11 +1055,6 @@
             margin: 0 0 5px;
         }
 
-        datepicker,
-        .datepicker {
-            height: 42px;
-        }
-
         .ui-control .ui-control-clear {
             right: 10px;
 
diff --git a/react/assets/forus-webshop/scss/includes/components/_label.scss b/react/assets/forus-webshop/scss/includes/components/_label.scss
index a5733aa0a..2070c0bea 100644
--- a/react/assets/forus-webshop/scss/includes/components/_label.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_label.scss
@@ -95,10 +95,6 @@
         font-weight: 700;
     }
 
-    &.label-lg {
-        padding: 2px 10px;
-    }
-
     &.label-xl {
         padding: 5px 10px;
     }
@@ -124,9 +120,5 @@
         &:not(.label-round) {
             border-radius: calc(var(--border-radius) / 2);
         }
-
-        &.label-lg {
-            padding: 0 10px;
-        }
     }
 }
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/includes/components/table.scss b/react/assets/forus-webshop/scss/includes/components/table.scss
index 7c1711ec7..f09225264 100644
--- a/react/assets/forus-webshop/scss/includes/components/table.scss
+++ b/react/assets/forus-webshop/scss/includes/components/table.scss
@@ -105,13 +105,6 @@ table.table {
             }
         }
 
-        &[ng-click]:hover {
-            td,
-            th {
-                background: #f6f8f9;
-            }
-        }
-
         &:last-child {
             td {
                 border-bottom: none;
diff --git a/react/assets/forus-webshop/scss/includes/includes/shame.scss b/react/assets/forus-webshop/scss/includes/includes/shame.scss
index bec67bdbf..6c397ad5a 100644
--- a/react/assets/forus-webshop/scss/includes/includes/shame.scss
+++ b/react/assets/forus-webshop/scss/includes/includes/shame.scss
@@ -53,8 +53,6 @@ html {
     }
 }
 
-[ng-click],
-[ui-sref],
 .clickable,
 .state-nav-link {
     cursor: pointer;
diff --git a/react/assets/forus-webshop/scss/includes/includes/third-party.scss b/react/assets/forus-webshop/scss/includes/includes/third-party.scss
index c2f542dff..80758c46d 100644
--- a/react/assets/forus-webshop/scss/includes/includes/third-party.scss
+++ b/react/assets/forus-webshop/scss/includes/includes/third-party.scss
@@ -55,48 +55,6 @@
     bottom: 180px !important;
 }
 
-.nano > .nano-content::-webkit-scrollbar {
-    display: none;
-}
-
-.has-scrollbar > .nano-content::-webkit-scrollbar {
-    display: block;
-}
-
-.nano > .nano-pane {
-    position: absolute;
-    width: 6px;
-    right: 6px;
-    top: 3px;
-    bottom: 3px;
-    cursor: pointer;
-    background-color: transparent;
-    opacity: 0.5;
-    transition: all .4s;
-}
-
-.nano > .nano-pane > .nano-slider {
-    background: #d4d9dd;
-    position: relative;
-    margin: 0 0px;
-    border-radius: 8px;
-}
-
-.nano:hover > .nano-pane,
-.nano-pane.active,
-.nano-pane.flashed {
-    opacity: 1;
-}
-
-[ng\:cloak],
-[ng-cloak],
-[data-ng-cloak],
-[x-ng-cloak],
-.ng-cloak,
-.x-ng-cloak {
-    display: none !important;
-}
-
 .gm-style .gm-style-mtc label,
 .gm-style .gm-style-mtc div {
     font-weight: 400;
@@ -388,114 +346,6 @@
     // read speaker skip class, added for referencing
 }
 
-._720kb {
-    &-datepicker {
-        &-calendar {
-            max-width: 275px;
-            border: 1px solid #e9ecee;
-            border-radius: 5px;
-            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
-
-            &-days-header {
-                background: #fff;
-                border-bottom: 0;
-                padding: 0 5px;
-
-                div {
-                    color: #134478;
-                    font-size: 12px;
-                }
-            }
-
-            &-body {
-                display: flex;
-                flex-direction: row;
-                align-content: center;
-                flex-wrap: wrap;
-                padding: 0 5px 5px;
-                margin: 0;
-                width: 100%;
-            }
-
-            &-day {
-                width: calc(100% / 7);
-                padding: 0;
-                font-size: 13px;
-                font-weight: 500;
-                color: #282b39;
-                border-radius: 40px;
-                margin: 0;
-                height: 35px;
-                line-height: 35px;
-                position: relative;
-                z-index: 1;
-                transition: color .4s;
-
-                &:before {
-                    content: '';
-                    display: block;
-                    width: 28px;
-                    height: 28px;
-                    margin: 0;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    z-index: -1;
-                    border-radius: 20px;
-                    transition: background .4s;
-                }
-
-                &:hover {
-                    background: transparent;
-
-                    &:before {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
-                }
-
-                &._720kb-datepicker-active {
-                    color: #fff;
-                    background: transparent;
-
-                    &:before {
-                        background: #009ef4;
-                    }
-                }
-
-                &._720kb-datepicker-disabled {
-                    color: rgba(0, 0, 0, 0.2);
-                    background: transparent;
-
-                    &:before {
-                        background: rgba(25, 2, 0, 0.02);
-                    }
-                }
-            }
-
-            &-header {
-                &:nth-child(odd),
-                &:nth-child(even) {
-                    background: #fff;
-                    border-bottom: 1px solid #e9ecee;
-                }
-            }
-
-            &-month {
-                color: #282b39;
-                font: 500 13px/40px var(--base-font);
-
-                a {
-                    & > span {
-                        color: #282b39;
-                        font: 500 13px/40px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
-
 @media print {
     .gm-style .gmnoprint,
     .gmnoprint {
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
index b23d5c9e8..722f0a6c6 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #1B8761;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
index b3b96e4fe..65fc12479 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #004d93;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 135px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
index e57cd42fb..1ccbafb01 100644
--- a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #3558a2;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index 3adaecf8f..a05890d0e 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #0d4379;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 155px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
index c345e09d7..17a878722 100644
--- a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #ee8016;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 170px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
index df4f9a1ad..6d12b8890 100644
--- a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #305dfb;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
index e350d8777..6a8e7eed3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #627c18;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #0b0e12;
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
index bc5c8ebc3..18831f2fa 100644
--- a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #e60204;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 155px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index 55c0b60c6..2c53f842e 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #24a1a1;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 160px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index f91694e30..eeea645b3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #22398e;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 160px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
index cb3ddaf5b..0008e2b53 100644
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #9f3031;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
index c5be5ebe8..90340ff17 100644
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #b31869;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
index 186052c25..bbef9688b 100644
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #fd5392;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 130px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
index a2fff2203..6570ef49f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
@@ -276,8 +276,6 @@ $primaryColorLight: #660066;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 135px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
index 1c3a2d2dc..66ca081f5 100644
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #b9cb18;
     --showcase-aside-button-hover-border: 1px solid #498fb4;
     --showcase-aside-button-hover-background: transparent;
 
-    --showcase-fullscreen-bottom-offset: 140px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #666;
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index a951def71..96f03c884 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -280,8 +280,6 @@ $primaryColorLight: #1c8fd7;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary-light);
 
-    --showcase-fullscreen-bottom-offset: 140px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
index c073afe5c..b19001636 100644
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
@@ -377,8 +377,6 @@ $primaryColorLight: #2f7f6b;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 50px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
index 440aa0bf6..7a7ebd40d 100644
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #2a2a7f;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 175px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
index cb54eeeef..e2164fd78 100644
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #2a2a7f;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 115px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
index 6844deed9..84bca3093 100644
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
@@ -275,8 +275,6 @@ $primaryColorLight: #0c6dcb;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary);
 
-    --showcase-fullscreen-bottom-offset: 135px;
-
     --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
diff --git a/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx b/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx
index a81656d51..d49b1c27d 100644
--- a/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/FormGroup.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import FormError from '../errors/FormError';
 import { uniqueId } from 'lodash';
 import classNames from 'classnames';
@@ -6,8 +6,6 @@ import classNames from 'classnames';
 export default function FormGroup({
     id,
     error,
-    inline,
-    inlineSize,
     label,
     input,
     required,
@@ -15,8 +13,6 @@ export default function FormGroup({
 }: {
     id?: string;
     error?: string | Array<string>;
-    inline?: boolean;
-    inlineSize?: 'sm' | 'md' | 'lg' | 'xl';
     label?: string | React.ReactElement | Array<React.ReactElement>;
     input?: (input_id: string) => React.ReactElement;
     required?: boolean;
@@ -25,34 +21,15 @@ export default function FormGroup({
     const input_id = useState(id || uniqueId('input_group_id_'))[0];
 
     return (
-        <div
-            className={classNames(
-                'form-group',
-                inline && 'form-group-inline',
-                inlineSize === 'sm' && 'form-group-inline-sm',
-                inlineSize === 'md' && 'form-group-inline-md',
-                inlineSize === 'lg' && 'form-group-inline-lg',
-                inlineSize === 'xl' && 'form-group-inline-xl',
-                error && 'form-group-error',
-                className,
-            )}>
+        <div className={classNames('form-group', error && 'form-group-error', className)}>
             {label && (
                 <label htmlFor={input_id} className={classNames(`form-label`, required && 'form-label-required')}>
                     {label}
                 </label>
             )}
 
-            {inline ? (
-                <div className="form-offset">
-                    {input && input(input_id)}
-                    {error && <FormError error={error} />}
-                </div>
-            ) : (
-                <Fragment>
-                    {input && input(input_id)}
-                    {error && <FormError error={error} />}
-                </Fragment>
-            )}
+            {input && input(input_id)}
+            {error && <FormError error={error} />}
         </div>
     );
 }
diff --git a/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx b/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
index 676a9c6c9..087ec0b6a 100644
--- a/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/MultiSelectControl.tsx
@@ -1,6 +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';
 
 export default function MultiSelectControl<T = number>({
     id = uniqueId('multiselect_'),
@@ -57,26 +58,23 @@ export default function MultiSelectControl<T = number>({
 
     return (
         <div>
-            <div className="form-group form-group-inline">
+            <div className="form-group">
                 <label className="form-label" htmlFor={id}>
                     {label}
                 </label>
-                <div className="form-offset">
-                    <SelectControl propKey={'id'} value={selected} options={optionsAvailable} onChange={selectOption} />
-                </div>
+                <SelectControl propKey={'id'} value={selected} options={optionsAvailable} onChange={selectOption} />
             </div>
 
             {value?.length > 0 && (
-                <div className="form-group form-group-inline">
+                <div className="form-group">
                     <label className="form-label">&nbsp;</label>
-                    <div className="form-offset">
-                        {value?.map((id) => (
-                            <div className="tag tag-primary tag-square pull-left" key={id.toString()}>
-                                {optionsById?.[id.toString()] || ''}
-                                <div className="tag-link mdi mdi-close icon-end" onClick={() => removeItem(id)} />
-                            </div>
-                        ))}
-                    </div>
+
+                    {value?.map((id) => (
+                        <Label type="primary" key={id.toString()}>
+                            {optionsById?.[id.toString()] || ''}
+                            <div className="mdi mdi-close label-close" onClick={() => removeItem(id)} />
+                        </Label>
+                    ))}
                 </div>
             )}
         </div>
diff --git a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
index 1c80be134..50705cb45 100644
--- a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
+++ b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
@@ -297,37 +297,33 @@ export default function FundCriteriaEditorItem({
                             <div className="row">
                                 <div className="col col-xs-12 col-sm-4">
                                     <label className="form-label">Persoonsgegeven</label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            className={`form-control ${disabled ? 'disabled' : ''}`}
-                                            placeholder="Persoonsgegeven"
-                                            disabled={disabled}
-                                            value={recordType}
-                                            allowSearch={true}
-                                            onChange={setRecordType}
-                                            options={recordTypes}
-                                        />
-                                    </div>
+                                    <SelectControl
+                                        className={`form-control ${disabled ? 'disabled' : ''}`}
+                                        placeholder="Persoonsgegeven"
+                                        disabled={disabled}
+                                        value={recordType}
+                                        allowSearch={true}
+                                        onChange={setRecordType}
+                                        options={recordTypes}
+                                    />
                                     <FormError error={errors?.['criteria.0.record_type_key']} />
                                 </div>
 
                                 {recordType?.operators?.length > 0 && operators && (
                                     <div className="col col-xs-12 col-sm-4">
                                         <label className="form-label">Verhouding</label>
-                                        <div className="form-offset">
-                                            <SelectControl
-                                                className={`form-control ${disabled ? 'disabled' : ''}`}
-                                                placeholder="Verhouding"
-                                                disabled={disabled}
-                                                allowSearch={false}
-                                                propKey={'key'}
-                                                value={operators[recordType.key]}
-                                                options={recordType?.operators}
-                                                onChange={(operator: Operators) => {
-                                                    setOperators({ ...operators, [recordType.key]: operator });
-                                                }}
-                                            />
-                                        </div>
+                                        <SelectControl
+                                            className={`form-control ${disabled ? 'disabled' : ''}`}
+                                            placeholder="Verhouding"
+                                            disabled={disabled}
+                                            allowSearch={false}
+                                            propKey={'key'}
+                                            value={operators[recordType.key]}
+                                            options={recordType?.operators}
+                                            onChange={(operator: Operators) => {
+                                                setOperators({ ...operators, [recordType.key]: operator });
+                                            }}
+                                        />
                                         <FormError error={errors?.['criteria.0.operator']} />
                                     </div>
                                 )}
@@ -354,21 +350,19 @@ export default function FundCriteriaEditorItem({
 
                                             {['select', 'select_number', 'bool'].includes(recordType.type) &&
                                                 operators[recordType.key] != '*' && (
-                                                    <div className="form-offset">
-                                                        <SelectControl
-                                                            className={`form-control ${disabled ? 'disabled' : ''}`}
-                                                            placeholder="Verhouding"
-                                                            allowSearch={false}
-                                                            propKey={'value'}
-                                                            value={values[recordType.key]}
-                                                            options={recordType.options}
-                                                            disabled={disabled}
-                                                            onChange={(value: string) => {
-                                                                values[recordType.key] = value;
-                                                                setValues({ ...values });
-                                                            }}
-                                                        />
-                                                    </div>
+                                                    <SelectControl
+                                                        className={`form-control ${disabled ? 'disabled' : ''}`}
+                                                        placeholder="Verhouding"
+                                                        allowSearch={false}
+                                                        propKey={'value'}
+                                                        value={values[recordType.key]}
+                                                        options={recordType.options}
+                                                        disabled={disabled}
+                                                        onChange={(value: string) => {
+                                                            values[recordType.key] = value;
+                                                            setValues({ ...values });
+                                                        }}
+                                                    />
                                                 )}
 
                                             {['date'].includes(recordType.type) && operators[recordType.key] != '*' && (
diff --git a/react/src/dashboard/components/elements/image_cropper/Label.tsx b/react/src/dashboard/components/elements/image_cropper/Label.tsx
new file mode 100644
index 000000000..2d6ef29bf
--- /dev/null
+++ b/react/src/dashboard/components/elements/image_cropper/Label.tsx
@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+
+export type LabelType =
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'default'
+    | 'text'
+    | 'primary'
+    | 'danger_light'
+    | 'primary_light';
+
+export default function Label({
+    children,
+    type,
+    dusk,
+    className,
+    disabled = false,
+}: {
+    children: ReactNode | ReactNode[];
+    type: LabelType;
+    dusk?: string;
+    className?: string;
+    disabled?: boolean;
+}) {
+    return (
+        <div
+            data-dusk={dusk}
+            className={classNames(
+                'label',
+                type === 'text' && 'label-text',
+                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',
+                className,
+            )}>
+            {children}
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx b/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
index e8767d18b..30f369a65 100644
--- a/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundFormStateLabels.tsx
@@ -1,20 +1,16 @@
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import FundForm from '../../../props/models/FundForm';
+import Label from '../image_cropper/Label';
 
 export default function FundFormStateLabels({ fundForm }: { fundForm: FundForm }) {
-    const [stateLabels] = useState({
-        active: 'tag-success',
-        archived: 'tag-default',
-    });
+    if (fundForm.state == 'active') {
+        return <Label type={'success'}>{fundForm.state_locale}</Label>;
+    }
 
-    return (
-        <Fragment>
-            {stateLabels[fundForm.state] ? (
-                <span className={`tag tag-sm ${stateLabels[fundForm.state] || ''}`}>{fundForm.state_locale}</span>
-            ) : (
-                <TableEmptyValue />
-            )}
-        </Fragment>
-    );
+    if (fundForm.state == 'archived') {
+        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 e9a21f32f..29009029b 100644
--- a/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import FundRequest from '../../../props/models/FundRequest';
 import FundRequestClarification from '../../../props/models/FundRequestClarification';
+import Label from '../image_cropper/Label';
 
 export default function FundRequestStateLabel({ fundRequest }: { fundRequest: FundRequest }) {
     const [stateLabels] = useState({
@@ -45,13 +46,7 @@ export default function FundRequestStateLabel({ fundRequest }: { fundRequest: Fu
             {fundRequest.state == 'pending' && fundRequest.employee ? (
                 <Fragment>
                     {hasRecordsWithPendingClarifications ? (
-                        <div
-                            className={classNames(
-                                'label',
-                                'label-tag',
-                                'label-round',
-                                `label-${stateLabels.clarification_requested?.label}`,
-                            )}>
+                        <div className={classNames('label', `label-${stateLabels.clarification_requested?.label}`)}>
                             <em
                                 className={classNames(
                                     'mdi',
@@ -62,20 +57,14 @@ export default function FundRequestStateLabel({ fundRequest }: { fundRequest: Fu
                             Extra info nodig
                         </div>
                     ) : (
-                        <div className="label label-tag label-round label-primary">
+                        <Label type="primary">
                             <em className="mdi mdi-circle-outline icon-start" />
                             In behandeling
-                        </div>
+                        </Label>
                     )}
                 </Fragment>
             ) : (
-                <div
-                    className={classNames(
-                        'label',
-                        'label-tag',
-                        'label-round',
-                        `label-${stateLabels[localState.key]?.label}`,
-                    )}>
+                <div className={classNames('label', `label-${stateLabels[localState.key]?.label}`)}>
                     <em className={classNames('mdi', `mdi-${stateLabels[localState.key]?.icon}`, `icon-start`)} />
                     {localState.label}
                 </div>
diff --git a/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx b/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
index efcb8d039..10238d484 100644
--- a/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundStateLabels.tsx
@@ -1,33 +1,27 @@
 import Fund from '../../../props/models/Fund';
-import React, { Fragment, useState } from 'react';
+import React from 'react';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import useTranslate from '../../../hooks/useTranslate';
+import Label from '../image_cropper/Label';
 
 export default function FundStateLabels({ fund }: { fund: Fund }) {
     const translate = useTranslate();
 
-    const [stateLabels] = useState({
-        active: 'tag-success',
-        paused: 'tag-warning',
-        closed: 'tag-default',
-        waiting: 'tag-warning',
-    });
+    if (fund.archived) {
+        return <Label type="default">{translate('components.organization_funds.states.archived')}</Label>;
+    }
 
-    return (
-        <Fragment>
-            {!fund.archived && stateLabels[fund.state] ? (
-                <span className={`tag tag-sm ${stateLabels[fund.state] || ''}`}>
-                    {translate(`components.organization_funds.states.${fund.state}`)}
-                </span>
-            ) : (
-                <TableEmptyValue />
-            )}
+    if (fund.state === 'active') {
+        return <Label type={'success'}>{translate(`components.organization_funds.states.${fund.state}`)}</Label>;
+    }
 
-            {fund.archived && (
-                <span className="tag tag-sm tag-default">
-                    {translate('components.organization_funds.states.archived')}
-                </span>
-            )}
-        </Fragment>
-    );
+    if (fund.state === 'paused' || fund.state === 'waiting') {
+        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 <TableEmptyValue />;
 }
diff --git a/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx
new file mode 100644
index 000000000..610596fae
--- /dev/null
+++ b/react/src/dashboard/components/elements/resource-states/ReimbursementStateLabel.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Label from '../image_cropper/Label';
+import Reimbursement from '../../../props/models/Reimbursement';
+
+export default function ReimbursementStateLabel({
+    reimbursement,
+    dusk,
+}: {
+    reimbursement: Reimbursement;
+    dusk?: string;
+}) {
+    if (reimbursement.expired) {
+        return (
+            <Label type="danger_light" dusk={dusk}>
+                Verlopen
+            </Label>
+        );
+    }
+
+    if (reimbursement.state === 'pending') {
+        return (
+            <Label type={'default'} dusk={dusk}>
+                {reimbursement.state_locale}
+            </Label>
+        );
+    }
+
+    if (reimbursement.state === 'approved') {
+        return (
+            <Label type={'success'} dusk={dusk}>
+                {reimbursement.state_locale}
+            </Label>
+        );
+    }
+
+    if (reimbursement.state === 'declined') {
+        return (
+            <Label type={'danger'} dusk={dusk}>
+                {reimbursement.state_locale}
+            </Label>
+        );
+    }
+
+    return null;
+}
diff --git a/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
index 8c9480099..e65562e14 100644
--- a/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/TransactionStateLabel.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import Transaction from '../../../props/models/Transaction';
 import PayoutTransaction from '../../../props/models/PayoutTransaction';
-import classNames from 'classnames';
+import Label from '../image_cropper/Label';
 
 export default function TransactionStateLabel({ transaction }: { transaction: Transaction | PayoutTransaction }) {
-    return (
-        <div className={classNames('label', transaction.state == 'success' ? 'label-success' : 'label-default')}>
-            {transaction.state_locale}
-        </div>
-    );
+    return <Label type={transaction.state == 'success' ? 'success' : 'default'}>{transaction.state_locale}</Label>;
 }
diff --git a/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx b/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
index 39cc59b9c..e249668e8 100644
--- a/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
+++ b/react/src/dashboard/components/elements/tables/elements/FilterItemToggle.tsx
@@ -25,7 +25,7 @@ export default function FilterItemToggle({
                 <em className="mdi mdi-menu-down form-label-icon-active" />
             </label>
 
-            <div className="form-offset">{children}</div>
+            {children}
         </div>
     );
 }
diff --git a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
index f0755a712..999ffec5e 100644
--- a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
+++ b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
@@ -165,19 +165,18 @@ export default function Modal2FADeactivate({
                                     {type == 'authenticator' && (
                                         <div className="form-label">Voer de 6-cijferige code in vanuit de app</div>
                                     )}
-                                    <div className="form-group-offset">
-                                        <PincodeControl
-                                            value={confirmationCode}
-                                            onChange={setConfirmationCode}
-                                            className={'block-pincode-compact'}
-                                            valueType={'num'}
-                                            blockSize={3}
-                                            blockCount={2}
-                                            ariaLabel={'Voer de tweefactorauthenticatiecode in voor deactivering'}
-                                        />
 
-                                        <FormError error={errorCode} />
-                                    </div>
+                                    <PincodeControl
+                                        value={confirmationCode}
+                                        onChange={setConfirmationCode}
+                                        className={'block-pincode-compact'}
+                                        valueType={'num'}
+                                        blockSize={3}
+                                        blockCount={2}
+                                        ariaLabel={'Voer de tweefactorauthenticatiecode in voor deactivering'}
+                                    />
+
+                                    <FormError error={errorCode} />
                                 </div>
                             </div>
                             {type == 'phone' && (
diff --git a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
index fc0910ad1..d97eea389 100644
--- a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
+++ b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
@@ -100,7 +100,8 @@ export default function ModalCreatePrevalidation({
             }
 
             prevalidationService
-                .submit(
+                .store(
+                    fund.organization_id,
                     {
                         ...values,
                         ...dateValues,
@@ -137,7 +138,7 @@ export default function ModalCreatePrevalidation({
     );
 
     const removeExtraRecord = useCallback(
-        (recordKey) => {
+        (recordKey: string) => {
             if (prevalidationRecords?.includes(recordKey)) {
                 prevalidationRecords.splice(prevalidationRecords.indexOf(recordKey), 1);
                 delete form.values[recordKey];
@@ -299,16 +300,14 @@ export default function ModalCreatePrevalidation({
                                             <label className="form-label">Selecteer persoonsgegevens</label>
                                             <div className="flex-row">
                                                 <div className="flex-col flex-grow">
-                                                    <div className="form-offset">
-                                                        <SelectControl
-                                                            propKey={'key'}
-                                                            value={formNewRecord.values.record_type_key}
-                                                            options={recordTypesAvailable}
-                                                            onChange={(record_type_key: string) => {
-                                                                formNewRecord.update({ record_type_key });
-                                                            }}
-                                                        />
-                                                    </div>
+                                                    <SelectControl
+                                                        propKey={'key'}
+                                                        value={formNewRecord.values.record_type_key}
+                                                        options={recordTypesAvailable}
+                                                        onChange={(record_type_key: string) => {
+                                                            formNewRecord.update({ record_type_key });
+                                                        }}
+                                                    />
                                                 </div>
 
                                                 <div className="flex-col">
diff --git a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
index 6e02aae12..4b603275e 100644
--- a/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
+++ b/react/src/dashboard/components/modals/ModalDuplicatesPicker.tsx
@@ -203,7 +203,7 @@ export default function ModalDuplicatesPicker({
                                                             {item.model ? labels.label_on : labels.label_off}
                                                         </div>
                                                         <div className="switch-input-control">
-                                                            <div className="form-group form-group-inline">
+                                                            <div className="form-group">
                                                                 <ToggleControl
                                                                     checked={item.model || false}
                                                                     onChange={(e) => {
diff --git a/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx b/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
index 4bd9c1c2b..91b388faa 100644
--- a/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
+++ b/react/src/dashboard/components/modals/ModalFundInviteProviders.tsx
@@ -86,16 +86,14 @@ export default function ModalFundInviteProviders({
                                             Nodig aanbieders uit van:
                                         </label>
 
-                                        <div className="form-offset">
-                                            <SelectControl
-                                                className={'form-control'}
-                                                options={funds}
-                                                propKey={'id'}
-                                                allowSearch={true}
-                                                value={form.values?.fund_id}
-                                                onChange={(fund_id: number) => form.update({ fund_id })}
-                                            />
-                                        </div>
+                                        <SelectControl
+                                            className={'form-control'}
+                                            options={funds}
+                                            propKey={'id'}
+                                            allowSearch={true}
+                                            value={form.values?.fund_id}
+                                            onChange={(fund_id: number) => form.update({ fund_id })}
+                                        />
 
                                         <FormError error={form.errors?.fund_id} />
                                     </div>
diff --git a/react/src/dashboard/components/modals/ModalFundOffers.tsx b/react/src/dashboard/components/modals/ModalFundOffers.tsx
index 72c755a44..75d57c54e 100644
--- a/react/src/dashboard/components/modals/ModalFundOffers.tsx
+++ b/react/src/dashboard/components/modals/ModalFundOffers.tsx
@@ -14,6 +14,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';
 
 type LocalProduct = Product & {
     allowed: boolean;
@@ -185,14 +186,11 @@ export default function ModalFundOffers({
                                                 </td>
 
                                                 <td className="text-right">
-                                                    <div
-                                                        className={`tag ${
-                                                            offer.allowed ? 'tag-success' : 'tag-default'
-                                                        }`}>
+                                                    <Label type={offer.allowed ? 'success' : 'default'}>
                                                         {offer.allowed
                                                             ? translate(`modals.modal_funds_offers.labels.available`)
                                                             : translate(`modals.modal_funds_offers.labels.rejected`)}
-                                                    </div>
+                                                    </Label>
                                                 </td>
                                             </tr>
                                         ))}
diff --git a/react/src/dashboard/components/modals/ModalPayoutEdit.tsx b/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
index 99d1d0b39..7a624d29a 100644
--- a/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutEdit.tsx
@@ -151,8 +151,6 @@ export default function ModalPayoutEdit({
                 <div className="modal-body">
                     <div className="modal-section">
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             required={true}
                             label={translate('modals.modal_payout_create.labels.fund')}
                             input={(id) => (
@@ -174,8 +172,6 @@ export default function ModalPayoutEdit({
                         />
 
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             required={true}
                             label={translate('modals.modal_payout_create.labels.allocate_by')}
                             input={(id) => (
@@ -193,8 +189,6 @@ export default function ModalPayoutEdit({
                         />
 
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             required={true}
                             label={translate('modals.modal_payout_create.labels.amount')}
                             input={(id) =>
@@ -233,8 +227,6 @@ export default function ModalPayoutEdit({
 
                         {assignTypes.length > 0 && (
                             <FormGroup
-                                inline={true}
-                                className={'form-group-inline-lg'}
                                 required={true}
                                 label={translate('modals.modal_payout_create.labels.assign_by_type')}
                                 input={() => (
@@ -251,8 +243,6 @@ export default function ModalPayoutEdit({
 
                         {assignType?.hasInput && (
                             <FormGroup
-                                inline={true}
-                                className={'form-group-inline-lg'}
                                 required={true}
                                 label={assignType.inputLabel}
                                 input={() => (
@@ -268,8 +258,6 @@ export default function ModalPayoutEdit({
                         )}
 
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             required={true}
                             label={translate('modals.modal_payout_create.labels.iban')}
                             input={(id) => (
@@ -285,8 +273,6 @@ export default function ModalPayoutEdit({
                         />
 
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             required={true}
                             label={translate('modals.modal_payout_create.labels.iban_name')}
                             input={(id) => (
@@ -302,8 +288,6 @@ export default function ModalPayoutEdit({
                         />
 
                         <FormGroup
-                            inline={true}
-                            className={'form-group-inline-lg'}
                             label={translate('modals.modal_payout_create.labels.description')}
                             input={(id) => (
                                 <textarea
diff --git a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
index e0cc6a6f8..8c1b6b0ac 100644
--- a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
@@ -474,24 +474,23 @@ export default function ModalPayoutsUpload({
                     )}>
                     {step == STEP_SET_UP && (
                         <div className="modal-section form">
-                            <div className="form-group form-group-inline form-group-inline-lg">
+                            <div className="form-group">
                                 <div className="form-label">{translate('modals.modal_voucher_create.labels.fund')}</div>
-                                <div className="form-offset">
-                                    <FormGroupInfo
-                                        info={'Selecteer het fonds waaruit de uitbetalingen moeten plaatsvinden.'}>
-                                        <SelectControl
-                                            className="flex-grow"
-                                            value={fund.id}
-                                            propKey={'id'}
-                                            onChange={(fund_id: number) => {
-                                                setFund(funds.find((fund) => fund.id === fund_id));
-                                            }}
-                                            options={funds}
-                                            allowSearch={false}
-                                            optionsComponent={SelectControlOptionsFund}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
+
+                                <FormGroupInfo
+                                    info={'Selecteer het fonds waaruit de uitbetalingen moeten plaatsvinden.'}>
+                                    <SelectControl
+                                        className="flex-grow"
+                                        value={fund.id}
+                                        propKey={'id'}
+                                        onChange={(fund_id: number) => {
+                                            setFund(funds.find((fund) => fund.id === fund_id));
+                                        }}
+                                        options={funds}
+                                        allowSearch={false}
+                                        optionsComponent={SelectControlOptionsFund}
+                                    />
+                                </FormGroupInfo>
                             </div>
                         </div>
                     )}
diff --git a/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx b/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
index 2885fc5aa..1ab922a0c 100644
--- a/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
+++ b/react/src/dashboard/components/modals/ModalPreCheckEditFundExclusions.tsx
@@ -70,81 +70,73 @@ export default function ModalPreCheckEditFundExclusions({
                 <div className="modal-header">Fonds toevoegen</div>
                 <div className="modal-body modal-body-visible">
                     <div className="modal-section">
-                        <div className="form-group form-group-inline form-group-inline-md">
+                        <div className="form-group">
                             <label className="form-label form-label-required">Fonds</label>
-                            <div className="form-offset">
-                                <FormGroupInfo
-                                    error={form.errors?.fund_id}
-                                    info={
-                                        <Fragment>
-                                            De naam van de regeling (het fonds) waarvoor u wilt instellen of deze wordt
-                                            meegenomen in de Regelingencheck.
-                                        </Fragment>
-                                    }>
-                                    <SelectControl
-                                        className="form-control inline-filter-control"
-                                        disabled={!!fund?.id}
-                                        propKey={'id'}
-                                        propValue={'name'}
-                                        options={funds}
-                                        value={form.values.fund_id}
-                                        onChange={(fund_id: number) => form.update({ fund_id })}
-                                        optionsComponent={SelectControlOptionsFund}
-                                    />
-                                </FormGroupInfo>
-                            </div>
+                            <FormGroupInfo
+                                error={form.errors?.fund_id}
+                                info={
+                                    <Fragment>
+                                        De naam van de regeling (het fonds) waarvoor u wilt instellen of deze wordt
+                                        meegenomen in de Regelingencheck.
+                                    </Fragment>
+                                }>
+                                <SelectControl
+                                    className="form-control inline-filter-control"
+                                    disabled={!!fund?.id}
+                                    propKey={'id'}
+                                    propValue={'name'}
+                                    options={funds}
+                                    value={form.values.fund_id}
+                                    onChange={(fund_id: number) => form.update({ fund_id })}
+                                    optionsComponent={SelectControlOptionsFund}
+                                />
+                            </FormGroupInfo>
                         </div>
 
-                        <div className="form-group form-group-inline form-group-inline-md">
+                        <div className="form-group">
                             <label className="form-label form-label-required">Uitgesloten</label>
-                            <div className="form-offset">
-                                <FormGroupInfo
-                                    error={form.errors?.pre_check_excluded}
-                                    info={
-                                        <Fragment>
-                                            Geef aan of deze regeling moet worden uitgesloten van de Regelingencheck.
-                                            Als u kiest voor Ja, worden er geen vragen gesteld over de voorwaarden van
-                                            dit fonds en wordt het niet meegenomen in het eindadvies.
-                                        </Fragment>
-                                    }>
-                                    <SelectControl
-                                        className="form-control inline-filter-control"
-                                        propKey={'value'}
-                                        propValue={'label'}
-                                        options={disableOptions}
-                                        value={form.values.excluded}
-                                        onChange={(excluded: boolean) => form.update({ excluded })}
-                                    />
-                                </FormGroupInfo>
-                            </div>
+
+                            <FormGroupInfo
+                                error={form.errors?.pre_check_excluded}
+                                info={
+                                    <Fragment>
+                                        Geef aan of deze regeling moet worden uitgesloten van de Regelingencheck. Als u
+                                        kiest voor Ja, worden er geen vragen gesteld over de voorwaarden van dit fonds
+                                        en wordt het niet meegenomen in het eindadvies.
+                                    </Fragment>
+                                }>
+                                <SelectControl
+                                    className="form-control inline-filter-control"
+                                    propKey={'value'}
+                                    propValue={'label'}
+                                    options={disableOptions}
+                                    value={form.values.excluded}
+                                    onChange={(excluded: boolean) => form.update({ excluded })}
+                                />
+                            </FormGroupInfo>
                         </div>
 
                         {!form.values.excluded && (
-                            <div className="form-group form-group-inline form-group-inline-md">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">Uitleg</label>
-                                <div className="form-offset">
-                                    <textarea
-                                        className="form-control"
-                                        placeholder="Voeg omschrijving toe"
-                                        value={form.values.note}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                    />
 
-                                    <FormError error={form.errors['exclusion.note']} />
-                                </div>
+                                <textarea
+                                    className="form-control"
+                                    placeholder="Voeg omschrijving toe"
+                                    value={form.values.note}
+                                    onChange={(e) => form.update({ note: e.target.value })}
+                                />
+
+                                <FormError error={form.errors['exclusion.note']} />
                             </div>
                         )}
 
                         <div className="form-group">
-                            <div className="form-label" />
-                            <div className="form-offset">
-                                <div className="block block-info">
-                                    <em className="mdi mdi-information block-info-icon" />
-                                    Soms is het wenselijk dat een regeling niet wordt meegenomen in de Regelingencheck.
-                                    Door het fonds aan deze lijst toe te voegen, worden de bijbehorende voorwaarden niet
-                                    getoond aan de gebruiker en wordt de regeling niet meegenomen in het uiteindelijke
-                                    advies.
-                                </div>
+                            <div className="block block-info">
+                                <em className="mdi mdi-information block-info-icon" />
+                                Soms is het wenselijk dat een regeling niet wordt meegenomen in de Regelingencheck. Door
+                                het fonds aan deze lijst toe te voegen, worden de bijbehorende voorwaarden niet getoond
+                                aan de gebruiker en wordt de regeling niet meegenomen in het uiteindelijke advies.
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
similarity index 57%
rename from react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx
rename to react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index 6f94f600e..e4d0989c8 100644
--- a/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -1,23 +1,36 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Fund from '../../../../props/models/Fund';
-import { useFundService } from '../../../../services/FundService';
-import useOpenModal from '../../../../hooks/useOpenModal';
-import ModalCreatePrevalidation from '../../../modals/ModalCreatePrevalidation';
-import { useFileService } from '../../../../services/FileService';
-import CSVProgressBar from '../../../elements/csv-progress-bar/CSVProgressBar';
-import RecordType from '../../../../props/models/RecordType';
+import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import { ModalState } from '../../modules/modals/context/ModalContext';
+import Fund from '../../props/models/Fund';
+import { useFileService } from '../../services/FileService';
+import { fileSize } from '../../helpers/string';
 import Papa from 'papaparse';
-import { isEmpty, uniqueId } from 'lodash';
-import usePushSuccess from '../../../../hooks/usePushSuccess';
-import { usePrevalidationService } from '../../../../services/PrevalidationService';
-import ModalDuplicatesPicker from '../../../modals/ModalDuplicatesPicker';
-import useTranslate from '../../../../hooks/useTranslate';
-import usePushDanger from '../../../../hooks/usePushDanger';
-import { ResponseError } from '../../../../props/ApiResponses';
-import { fileSize } from '../../../../helpers/string';
+import { uniqueId, isEmpty } from 'lodash';
+import usePushSuccess from '../../hooks/usePushSuccess';
+import usePushDanger from '../../hooks/usePushDanger';
+import { ResponseError } from '../../props/ApiResponses';
+import ModalDuplicatesPicker from './ModalDuplicatesPicker';
+import useOpenModal from '../../hooks/useOpenModal';
+import CSVProgressBar from '../elements/csv-progress-bar/CSVProgressBar';
+import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
-import { fileToText } from '../../../../helpers/utils';
-import usePushApiError from '../../../../hooks/usePushApiError';
+import usePushInfo from '../../hooks/usePushInfo';
+import { fileToText } from '../../helpers/utils';
+import { useFundService } from '../../services/FundService';
+import RecordType from '../../props/models/RecordType';
+import { usePrevalidationService } from '../../services/PrevalidationService';
+import usePushApiError from '../../hooks/usePushApiError';
+
+type CSVErrorProp = {
+    emptyHeader?: string | string[];
+    emptyBody?: string | string[];
+    invalidRecordTypes?: string | string[];
+    missingRecordTypes?: string | string[];
+    invalidRows?: string | string[];
+};
+
+type CSVWarningProp = {
+    optionalRecordTypes?: string | string[];
+};
 
 type RowDataPropData = { [key: string]: string };
 
@@ -28,17 +41,22 @@ type RowDataProp = {
     data: RowDataPropData;
 };
 
-export default function CSVUpload({
+export default function ModalPrevalidationsUpload({
     fund,
-    onUpdated = null,
-    recordTypes = [],
+    modal,
+    className,
+    recordTypes,
+    onCompleted,
 }: {
     fund: Fund;
-    onUpdated?: () => void;
-    recordTypes: Array<RecordType>;
+    modal: ModalState;
+    className?: string;
+    recordTypes?: Array<RecordType>;
+    onCompleted: () => void;
 }) {
-    const openModal = useOpenModal();
+    const pushInfo = usePushInfo();
     const translate = useTranslate();
+    const openModal = useOpenModal();
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const pushApiError = usePushApiError();
@@ -47,16 +65,27 @@ export default function CSVUpload({
     const fundService = useFundService();
     const prevalidationService = usePrevalidationService();
 
+    const [data, setData] = useState<Array<RowDataProp>>(null);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [changed, setChanged] = useState<boolean>(false);
+    const [csvFile, setCsvFile] = useState<File>(null);
+    const [hideModal, setHideModal] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);
-    const [dataChunkSize] = useState<number>(100);
+    const [dataChunkSize] = useState<number>(50);
+    const [progressBar, setProgressBar] = useState<number>(null);
+    const [csvComparing, setCsvComparing] = useState(false);
+
+    const [csvErrors, setCsvErrors] = useState<CSVErrorProp>({});
+    const [csvWarnings, setCsvWarnings] = useState<CSVWarningProp>({});
+    const [csvIsValid, setCsvIsValid] = useState(false);
+    const [csvProgress, setCsvProgress] = useState<number>(0);
+
     const [progressStatus, setProgressStatus] = useState<string>('');
     const [acceptedFiles] = useState(['.csv']);
 
-    const abort = useRef<boolean>(false);
+    const abortRef = useRef<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const [data, setData] = useState(null);
-
     const criteriaRecordTypeKeys = useMemo(() => {
         return recordTypes?.filter((recordType) => recordType.criteria)?.map((recordType) => recordType.key);
     }, [recordTypes]);
@@ -71,62 +100,42 @@ export default function CSVUpload({
         })[0]?.value;
     }, [fund.criteria, fundRecordKey]);
 
-    const [csvFile, setCsvFile] = useState<File>(null);
-    const [csvErrors, setCsvErrors] = useState<string | string[]>(null);
-    const [csvIsValid, setCsvIsValid] = useState(false);
-    const [csvWarnings, setCsvWarnings] = useState<string | string[]>(null);
-    const [csvProgress, setCsvProgress] = useState<number>(null);
-    const [csvProgressBar, setCsvProgressBar] = useState<number>(null);
-    const [csvComparing, setCsvComparing] = useState(false);
+    const closeModal = useCallback(() => {
+        if (loading) {
+            return pushInfo('Bezig met uploaden.');
+        }
+
+        if (changed) {
+            onCompleted();
+        }
 
-    const reset = useCallback(() => {
-        abort.current = true;
+        modal.close();
+    }, [changed, loading, modal, onCompleted, pushInfo]);
+
+    const downloadExampleCsv = useCallback(() => {
+        fileService.downloadFile((fund.key || 'fund') + '_sample.csv', fundService.sampleCSV(fund));
+    }, [fileService, fund, fundService]);
+
+    const reset = useCallback((abortRefValue = true) => {
+        abortRef.current = abortRefValue;
 
         setCsvFile(null);
-        setCsvErrors(null);
+        setCsvErrors({});
         setCsvIsValid(false);
-        setCsvWarnings(null);
         setCsvProgress(null);
-        setCsvProgressBar(null);
-        setCsvComparing(false);
-    }, []);
-
-    const onDragEvent = useCallback((e: React.DragEvent, isDragOver: boolean) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-
-        setIsDragOver(isDragOver);
     }, []);
 
     const filterSelectedFiles = useCallback(
         (files: FileList) => {
             return [...files].filter((file) => {
-                return acceptedFiles.filter((type) => file.name.endsWith(type));
+                return acceptedFiles.includes('.' + file.name.split('.')[file.name.split('.').length - 1]);
             });
         },
         [acceptedFiles],
     );
 
-    const updateProgressBarValue = useCallback((progress: number) => {
-        setCsvProgressBar(progress);
-        setProgressStatus(progress < 100 ? 'Aan het uploaden...' : 'Klaar!');
-    }, []);
-
-    const chunkList = useCallback((arr: Array<number>, len: number) => {
-        const chunks = [];
-        const n = arr.length;
-
-        let i = 0;
-
-        while (i < n) {
-            chunks.push(arr.slice(i, (i += len)));
-        }
-
-        return chunks;
-    }, []);
-
-    const validateFile = useCallback(
-        function (data: Array<{ [key: string]: string }>): Array<string> {
+    const validateCsvData = useCallback(
+        function (data: Array<RowDataProp>): Array<string> {
             return data
                 .map((row, row_key) => {
                     const rowRecordKeys = Object.keys(row);
@@ -136,9 +145,10 @@ export default function CSVUpload({
                     });
 
                     if (missingRecordTypes.length > 0) {
-                        return `Lijn ${
-                            row_key + 1
-                        }: heet ontbrekende verplichte persoonsgegevens: "${missingRecordTypes.join('", "')}"`;
+                        return [
+                            `Lijn ${row_key + 1}:`,
+                            `heet ontbrekende verplichte persoonsgegevens: "${missingRecordTypes.join('", "')}"`,
+                        ].join(' ');
                     }
 
                     return null;
@@ -148,6 +158,58 @@ export default function CSVUpload({
         [fund?.csv_required_keys],
     );
 
+    const showInvalidRows = useCallback(
+        (errors = {}, rows = [], rowIndex = 0) => {
+            const items = Object.keys(errors)
+                .map(function (key) {
+                    const keyData = key.split('.');
+                    const keyDataId = keyData[1];
+                    const fieldKey = keyData[2];
+                    const index = parseInt(keyDataId, 10) + 1 + rowIndex;
+
+                    return [index, errors[key], fieldKey];
+                })
+                .sort((a, b) => a[0] - b[0]);
+
+            const uniqueRows = items.reduce((arr, item) => {
+                return arr.includes(item[0]) ? arr : [...arr, item[0]];
+            }, []);
+
+            const message = [
+                `${uniqueRows.length} van ${rows.length}`,
+                `rij(en) uit het bulkbestand zijn niet geimporteerd,`,
+                `bekijk het bestand bij welke rij(en) het mis gaat.`,
+            ].join(' ');
+
+            pushDanger('Waarschuwing', message);
+
+            setHideModal(true);
+
+            openModal((modal) => (
+                <ModalDuplicatesPicker
+                    modal={modal}
+                    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_'),
+                        label: item?.[fund.csv_primary_key],
+                    }))}
+                    onConfirm={() => {
+                        reset();
+                    }}
+                    onCancel={() => {
+                        reset();
+                    }}
+                />
+            ));
+        },
+        [fund.csv_primary_key, openModal, pushDanger, reset],
+    );
+
     const parseCsvFile = useCallback(
         async (file: File): Promise<Papa.ParseResult<Array<string>>> => {
             return await new Promise(function (complete) {
@@ -163,19 +225,15 @@ export default function CSVUpload({
     );
 
     const uploadFile = useCallback(
-        async (file: File) => {
-            reset();
-
-            if (!file) {
-                return setCsvErrors('Kies eerst een .csv bestand.');
-            }
-
+        async (file?: File) => {
             const results = await parseCsvFile(file);
 
             if (!results) {
-                return;
+                return reset();
             }
 
+            results.data = results.data.filter((item) => !!item);
+
             const data = (results.data = results.data.filter((item) => !!item));
             const header = data.length > 0 ? data[0] : [];
 
@@ -183,14 +241,18 @@ export default function CSVUpload({
                 return Array.isArray(row) && row.filter((item) => !!item).length > 0;
             });
 
-            setCsvFile(file);
-
             if (header.length == 0) {
-                return setCsvErrors('Het .csv bestand is leeg, controleer het bestand.');
+                setCsvErrors({ emptyHeader: 'Het .csv bestand is leeg, controleer het bestand' });
+                setCsvIsValid(false);
+                return;
             }
 
             if (body.length == 0) {
-                return setCsvErrors('Het .csv bestand heeft kolomnamen maar geen inhoud, controleer de inhoud.');
+                setCsvErrors({
+                    emptyBody: 'Het .csv bestand heeft kolomnamen maar geen inhoud, controleer de inhoud.',
+                });
+                setCsvIsValid(false);
+                return;
             }
 
             // append eligibility key
@@ -211,28 +273,27 @@ export default function CSVUpload({
                 return fund.csv_required_keys.indexOf(recordTypeKey) == -1;
             });
 
+            const csvErrors: CSVErrorProp = {};
+            const csvWarnings: CSVWarningProp = {};
+
             if (invalidRecordTypes.length > 0) {
-                return setCsvErrors(
-                    `Het .csv bestand heeft de volgende ongeldige persoonsgegevens: '${invalidRecordTypes.join(
-                        "', '",
-                    )}'`,
-                );
+                csvErrors.invalidRecordTypes = `Het .csv bestand heeft de volgende ongeldige persoonsgegevens: '${invalidRecordTypes.join(
+                    "', '",
+                )}'`;
             }
 
             if (missingRecordTypes.length > 0) {
-                return setCsvErrors(
-                    `In het .csv bestand ontbreken persoonsgegevens die verplicht zijn voor dit fonds '${
-                        fund.name
-                    }': '${missingRecordTypes.join("', '")}'`,
-                );
+                csvErrors.missingRecordTypes = `In het .csv bestand ontbreken persoonsgegevens die verplicht zijn voor dit fonds '${
+                    fund.name
+                }': '${missingRecordTypes.join("', '")}'`;
             }
 
             if (optionalRecordTypes.length > 0) {
-                setCsvWarnings([
+                csvWarnings.optionalRecordTypes = [
                     `In het .csv bestand zijn persoonsgegevens toegevoegd die optioneel zijn voor "${fund.name}" fonds. `,
                     'Controleer of deze persoonsgegevens echt nodig zijn voor de toekenning. ',
                     `De volgende persoonsgegevens zijn optioneel: "${optionalRecordTypes.join("', '")}".`,
-                ]);
+                ];
             }
 
             const parsedData = body.reduce(function (result, val) {
@@ -245,66 +306,43 @@ export default function CSVUpload({
                 });
 
                 return isEmpty(row) ? result : [...result, row];
-            }, []);
+            }, []) as RowDataProp[];
 
-            const invalidRows = validateFile(parsedData);
+            const invalidRows = validateCsvData(parsedData);
 
             if (invalidRows.length > 0) {
-                return setCsvErrors(['Volgende problemen zijn opgetreden bij dit .csv bestand:', ...invalidRows]);
+                csvErrors.invalidRows = ['Volgende problemen zijn opgetreden bij dit .csv bestand:', ...invalidRows];
             }
 
+            setCsvFile(file);
+
+            setCsvErrors(csvErrors);
+            setCsvWarnings(csvWarnings);
+
             setData(parsedData);
-            setCsvIsValid(true);
+            setCsvIsValid(Object.keys(csvErrors).length === 0);
             setCsvProgress(1);
         },
-        [parseCsvFile, fund, fundRecordKey, fundRecordKeyValue, validateFile, reset, criteriaRecordTypeKeys],
+        [criteriaRecordTypeKeys, fund, fundRecordKey, fundRecordKeyValue, parseCsvFile, reset, validateCsvData],
     );
 
-    const showInvalidRows = useCallback(
-        (errors = {}, rows = [], rowIndex = 0) => {
-            const items = Object.keys(errors)
-                .map(function (key) {
-                    const keyData = key.split('.');
-                    const keyDataId = keyData[1];
-                    const fieldKey = keyData[2];
-                    const index = parseInt(keyDataId, 10) + 1 + rowIndex;
-
-                    return [index, errors[key], fieldKey];
-                })
-                .sort((a, b) => a[0] - b[0]);
+    const updateProgressBarValue = useCallback((progress: number) => {
+        setProgressBar(progress);
+        setProgressStatus(progress < 100 ? 'Aan het uploaden...' : 'Klaar!');
+    }, []);
 
-            const uniqueRows = items.reduce((arr, item) => {
-                return arr.includes(item[0]) ? arr : [...arr, item[0]];
-            }, []);
+    const chunkList = useCallback((arr: Array<number>, len: number) => {
+        const chunks = [];
+        const n = arr.length;
 
-            const message = [
-                `${uniqueRows.length} van ${rows.length}`,
-                `rij(en) uit het bulkbestand zijn niet geimporteerd,`,
-                `bekijk het bestand bij welke rij(en) het mis gaat.`,
-            ].join(' ');
+        let i = 0;
 
-            pushDanger('Waarschuwing', message);
+        while (i < n) {
+            chunks.push(arr.slice(i, (i += len)));
+        }
 
-            openModal((modal) => (
-                <ModalDuplicatesPicker
-                    modal={modal}
-                    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_'),
-                        label: item?.[fund.csv_primary_key],
-                    }))}
-                    onConfirm={() => reset()}
-                    onCancel={() => reset()}
-                />
-            ));
-        },
-        [fund.csv_primary_key, openModal, pushDanger, reset],
-    );
+        return chunks;
+    }, []);
 
     const startUploadingToServer = useCallback(
         (data: Array<RowDataPropData>, overwriteUids: Array<string> = []) => {
@@ -320,7 +358,7 @@ export default function CSVUpload({
 
                 const uploadChunk = async function (data: Array<{ [key: string]: string }>) {
                     prevalidationService
-                        .submitCollection(data, fund.id, overwriteUids, {
+                        .storeBatch(fund.organization_id, data, fund.id, overwriteUids, {
                             name: csvFile.name,
                             content: await fileToText(csvFile),
                             total: data.length,
@@ -329,19 +367,21 @@ export default function CSVUpload({
                             chunkSize: dataChunkSize,
                         })
                         .then(() => {
+                            setChanged(true);
+
                             currentChunkNth++;
                             updateProgressBarValue((currentChunkNth / chunksCount) * 100);
 
                             if (currentChunkNth == chunksCount) {
                                 setTimeout(() => {
-                                    setCsvProgressBar(100);
+                                    setProgressBar(100);
                                     setCsvProgress(3);
-                                    onUpdated?.();
+                                    onCompleted?.();
                                     resolve(null);
                                 }, 0);
                             } else {
-                                if (abort.current) {
-                                    return (abort.current = false);
+                                if (abortRef.current) {
+                                    return (abortRef.current = false);
                                 }
 
                                 uploadChunk(submitData[currentChunkNth]);
@@ -368,7 +408,8 @@ export default function CSVUpload({
             chunkList,
             dataChunkSize,
             fund.id,
-            onUpdated,
+            fund.organization_id,
+            onCompleted,
             prevalidationService,
             pushDanger,
             showInvalidRows,
@@ -422,6 +463,8 @@ export default function CSVUpload({
                     value: row[fund.csv_primary_key],
                 }));
 
+                setHideModal(true);
+
                 openModal((modal) => (
                     <ModalDuplicatesPicker
                         modal={modal}
@@ -456,6 +499,8 @@ export default function CSVUpload({
                                 ].join(' '),
                             );
 
+                            setHideModal(false);
+
                             if (newAndUpdatedRecords.length > 0) {
                                 return startUploadingToServer(newAndUpdatedRecords, updatePrimaryKeys).then(() => {
                                     if (skipUids.length > 0) {
@@ -471,24 +516,25 @@ export default function CSVUpload({
                                 }, console.error);
                             }
 
-                            onUpdated?.();
+                            onCompleted?.();
                             setCsvProgress(3);
                             updateProgressBarValue(100);
                             pushSuccess('Klaar!', skipUids.length + ' gegevens overgeslagen, geen nieuwe aangemaakt!');
                         }}
                         onCancel={() => {
-                            onUpdated?.();
+                            setHideModal(false);
+                            onCompleted?.();
                         }}
                     />
                 ));
             }
         },
-        [fund.csv_primary_key, onUpdated, openModal, pushSuccess, startUploadingToServer, updateProgressBarValue],
+        [fund.csv_primary_key, onCompleted, openModal, pushSuccess, startUploadingToServer, updateProgressBarValue],
     );
 
     const submitCollectionCheck = useCallback(() => {
         setCsvProgress(2);
-        abort.current = false;
+        abortRef.current = false;
 
         const submitData = chunkList(JSON.parse(JSON.stringify(data)), dataChunkSize);
         const chunksCount = submitData.length;
@@ -501,7 +547,7 @@ export default function CSVUpload({
 
         const uploadChunk = function (data: Array<string>) {
             prevalidationService
-                .submitCollectionCheck(data, fund.id, [])
+                .submitCollectionCheck(fund.organization_id, data, fund.id, [])
                 .then((res) => {
                     currentChunkNth++;
                     updateProgressBarValue((currentChunkNth / chunksCount) * 100);
@@ -510,6 +556,8 @@ export default function CSVUpload({
 
                     if (currentChunkNth == chunksCount) {
                         setTimeout(() => {
+                            setLoading(false);
+
                             pushSuccess('Vergelijken...', 'Gegevens ingeladen! Vergelijken met .csv...', {
                                 icon: 'timer-sand',
                             });
@@ -520,8 +568,8 @@ export default function CSVUpload({
                             );
                         }, 0);
                     } else {
-                        if (abort.current) {
-                            return (abort.current = false);
+                        if (abortRef.current) {
+                            return (abortRef.current = false);
                         }
 
                         uploadChunk(submitData[currentChunkNth]);
@@ -540,6 +588,7 @@ export default function CSVUpload({
                 });
         };
 
+        setLoading(true);
         uploadChunk(submitData[currentChunkNth]);
     }, [
         chunkList,
@@ -547,6 +596,7 @@ export default function CSVUpload({
         data,
         dataChunkSize,
         fund?.id,
+        fund?.organization_id,
         prevalidationService,
         pushDanger,
         pushSuccess,
@@ -557,6 +607,7 @@ export default function CSVUpload({
 
     const onConfirmUpload = useCallback(() => {
         setCsvComparing(true);
+
         pushSuccess('Inladen...', 'Inladen van gegevens voor controle op dubbele waarden!', {
             icon: 'download-outline',
         });
@@ -564,168 +615,170 @@ export default function CSVUpload({
         submitCollectionCheck();
     }, [pushSuccess, submitCollectionCheck]);
 
-    const addSinglePrevalidation = useCallback(() => {
-        openModal((modal) => (
-            <ModalCreatePrevalidation
-                modal={modal}
-                fund={fund}
-                recordTypes={recordTypes}
-                onCreated={() => onUpdated?.()}
-            />
-        ));
-    }, [fund, onUpdated, openModal, recordTypes]);
-
-    const downloadSample = useCallback(() => {
-        fileService.downloadFile((fund.key || 'fund') + '_sample.csv', fundService.sampleCSV(fund));
-    }, [fileService, fund, fundService]);
+    const onDragEvent = useCallback((e: React.DragEvent, isDragOver: boolean) => {
+        e?.preventDefault();
+        e?.stopPropagation();
 
-    useEffect(() => {
-        return () => reset();
-    }, [reset]);
+        setIsDragOver(isDragOver);
+    }, []);
 
     return (
         <div
-            className={`block block-csv ${isDragOver ? 'is-dragover' : ''}`}
-            onDragOver={(e) => onDragEvent(e, true)}
-            onDragEnter={(e) => onDragEvent(e, true)}
-            onDragLeave={(e) => onDragEvent(e, false)}
-            onDragEnd={(e) => onDragEvent(e, false)}
-            onDrop={(e) => {
-                onDragEvent(e, false);
-                uploadFile(filterSelectedFiles(e.dataTransfer.files)?.[0]).then();
-            }}>
-            <div className="csv-inner">
-                <input
-                    hidden={true}
-                    ref={inputRef}
-                    type="file"
-                    accept={(acceptedFiles || []).join(',')}
-                    onChange={(e) => {
-                        uploadFile(filterSelectedFiles(e.target.files)?.[0]).then();
-                        e.target.value = null;
-                    }}
-                />
-
-                {csvProgress <= 1 && (
-                    <div className="csv-upload-btn" onClick={() => inputRef.current.click()}>
-                        <div className="csv-upload-icon">
-                            <div className="mdi mdi-upload" />
-                        </div>
-                        <div className="csv-upload-text">
-                            {translate('csv_upload.labels.upload')}
-                            <br />
-                            <span>{translate('csv_upload.labels.swipe')}</span>
-                        </div>
-                    </div>
-                )}
-
-                <div className="csv-upload-btn-groups">
-                    <div className="button-group flex-center">
-                        {csvProgress <= 1 && (
-                            <button
-                                id="add_single_prevalidation"
-                                className="button button-default"
-                                onClick={addSinglePrevalidation}>
-                                <em className="mdi mdi-plus icon-start" />
-                                Activatiecode aanmaken
-                            </button>
-                        )}
-
-                        {csvProgress <= 1 && (
-                            <button className="button button-primary" onClick={() => inputRef.current.click()}>
-                                <em className="mdi mdi-upload icon-start" />
-                                {translate('csv_upload.labels.upload')}
-                            </button>
-                        )}
-                    </div>
-
-                    <div className="button-group flex-center">
-                        {csvProgress <= 1 && (
-                            <button
-                                className="button button-text button-text-muted button-slim"
-                                onClick={downloadSample}>
-                                <em className="mdi mdi-file-table-outline icon-start" />
-                                Download voorbeeld bestand
-                            </button>
-                        )}
-                    </div>
-                </div>
-
-                {csvProgress >= 2 && (
-                    <div className={`csv-upload-progress ${csvProgress === 3 ? 'done' : ''}`}>
-                        <div className="csv-upload-icon">
-                            {csvProgress === 2 && <div className="mdi mdi-loading" />}
-                            {csvProgress === 3 && <div className="mdi mdi-check" />}
-                        </div>
-
-                        <CSVProgressBar progressBar={csvProgressBar} status={progressStatus} />
-                    </div>
-                )}
-
-                {csvProgress <= 1 && csvFile && (
-                    <div className="csv-upload-actions">
-                        {csvFile && (
-                            <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
-                                <div className="block-file-details">
-                                    <div className="file-icon">
-                                        {csvIsValid ? (
-                                            <div className="mdi mdi-file-outline" />
-                                        ) : (
-                                            <div className="mdi mdi-close-circle" />
-                                        )}
+            className={classNames(
+                'modal',
+                'modal-bulk-upload',
+                'modal-animated',
+                (modal.loading || hideModal) && 'modal-loading',
+                isDragOver && 'is-dragover',
+                className,
+            )}>
+            <div className="modal-backdrop" onClick={closeModal} />
+            <div className="modal-window">
+                <a className="mdi mdi-close modal-close" onClick={closeModal} role="button" />
+                <div className="modal-header">Upload CSV-bestand</div>
+                <div className={classNames('modal-body', 'form')}>
+                    <div
+                        className="block block-csv"
+                        onDragOver={(e) => onDragEvent(e, true)}
+                        onDragEnter={(e) => onDragEvent(e, true)}
+                        onDragLeave={(e) => onDragEvent(e, false)}
+                        onDragEnd={(e) => onDragEvent(e, false)}
+                        onDrop={(e) => {
+                            onDragEvent(e, false);
+                            uploadFile(filterSelectedFiles(e.dataTransfer.files)?.[0]).then();
+                        }}>
+                        <div className="csv-inner">
+                            <input
+                                hidden={true}
+                                ref={inputRef}
+                                type="file"
+                                data-dusk={'inputUpload'}
+                                accept={(acceptedFiles || []).join(',')}
+                                onChange={(e) => {
+                                    uploadFile(filterSelectedFiles(e.target.files)?.[0]).then();
+                                    e.target.value = null;
+                                }}
+                            />
+
+                            {csvProgress <= 1 && (
+                                <div className="csv-upload-btn" onClick={() => inputRef.current.click()}>
+                                    <div className="csv-upload-icon">
+                                        <div className="mdi mdi-upload" />
                                     </div>
-                                    <div className="file-details">
-                                        <div className="file-name">{csvFile.name}</div>
-                                        <div className="file-size">{fileSize(csvFile.size)}</div>
+                                    <div className="csv-upload-text">
+                                        {translate('csv_upload.labels.upload')}
+                                        <br />
+                                        <span>{translate('csv_upload.labels.swipe')}</span>
                                     </div>
-                                    <div className="file-remove mdi mdi-close" onClick={reset} />
                                 </div>
+                            )}
+
+                            <div className="button-group flex-center">
+                                {csvProgress <= 1 && (
+                                    <button className="button button-default" onClick={downloadExampleCsv}>
+                                        <em className="mdi mdi-file-table-outline icon-start"> </em>
+                                        <span>{translate('vouchers.buttons.download_csv')}</span>
+                                    </button>
+                                )}
+                                {csvProgress <= 1 && (
+                                    <button
+                                        className="button button-primary"
+                                        onClick={() => inputRef.current.click()}
+                                        data-dusk="selectFileButton">
+                                        <em className="mdi mdi-upload icon-start" />
+                                        <span>{translate('vouchers.buttons.upload_csv')}</span>
+                                    </button>
+                                )}
+                            </div>
 
-                                {csvProgress == 1 && csvIsValid && !csvComparing && (
-                                    <div className="block-file-buttons">
-                                        <div className="button-group flex-center">
-                                            <button className="button button-default button-sm" onClick={reset}>
-                                                Cancel
-                                            </button>
-
-                                            <button
-                                                className="button button-primary button-sm"
-                                                onClick={onConfirmUpload}>
-                                                Upload
-                                            </button>
+                            {csvProgress >= 2 && (
+                                <div className={`csv-upload-progress ${csvProgress == 3 ? 'done' : ''}`}>
+                                    <div className="csv-upload-icon">
+                                        {csvProgress == 2 && <div className="mdi mdi-loading" />}
+                                        {csvProgress == 3 && (
+                                            <div className="mdi mdi-check" data-dusk="successUploadIcon" />
+                                        )}
+                                    </div>
+                                    <CSVProgressBar progressBar={progressBar} status={progressStatus} />
+                                </div>
+                            )}
+
+                            {csvFile && csvProgress < 2 && (
+                                <div className="csv-upload-actions">
+                                    <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
+                                        <div className="block-file-details">
+                                            <div className="file-icon">
+                                                {csvIsValid ? (
+                                                    <div className="mdi mdi-file-outline" />
+                                                ) : (
+                                                    <div className="mdi mdi-close-circle" />
+                                                )}
+                                            </div>
+                                            <div className="file-details">
+                                                <div className="file-name">{csvFile.name}</div>
+                                                <div className="file-size">{fileSize(csvFile.size)}</div>
+                                            </div>
+                                            <div className="file-remove mdi mdi-close" onClick={() => reset(false)} />
                                         </div>
                                     </div>
-                                )}
-                            </div>
-                        )}
 
-                        {csvWarnings && !csvErrors && (
-                            <div className="csv-file-warning">
-                                {[].concat(csvWarnings).map((warning) => (
-                                    <div key={warning}>{warning}</div>
-                                ))}
-                            </div>
-                        )}
+                                    {Object.keys(csvErrors).length === 0 && Object.keys(csvWarnings).length > 0 && (
+                                        <div className="csv-file-warning">
+                                            {Object.keys(csvWarnings).map((key) => (
+                                                <div key={key}>{csvWarnings[key]}</div>
+                                            ))}
+                                        </div>
+                                    )}
 
-                        {csvErrors && (
-                            <Fragment>
-                                {[].concat(csvErrors).map((error, index) => (
-                                    <div key={index} className="csv-file-error">
-                                        {error}
-                                    </div>
-                                ))}
-                            </Fragment>
-                        )}
+                                    {Object.keys(csvErrors).length > 0 && (
+                                        <div className="csv-file-error">
+                                            {Object.keys(csvErrors).map((key) => (
+                                                <div key={key}>{csvErrors[key]}</div>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </div>
                     </div>
-                )}
+                </div>
 
-                {csvProgress == 3 && (
-                    <div className="text-center">
-                        <button type={'button'} className="button button-primary" onClick={reset}>
-                            {translate('csv_upload.labels.done')}
+                <div className="modal-footer text-center">
+                    {csvProgress < 2 && (
+                        <button
+                            className="button button-default"
+                            onClick={closeModal}
+                            id="close"
+                            data-dusk="closeModalButton">
+                            Annuleren
                         </button>
+                    )}
+
+                    <div className="flex-grow" />
+
+                    <div className="button-group">
+                        <Fragment>
+                            {csvProgress < 3 ? (
+                                <button
+                                    className="button button-primary"
+                                    onClick={onConfirmUpload}
+                                    disabled={csvProgress != 1 || loading || !csvIsValid || csvComparing}
+                                    data-dusk="uploadFileButton">
+                                    Bevestigen
+                                </button>
+                            ) : (
+                                <button
+                                    type={'button'}
+                                    className="button button-primary"
+                                    disabled={loading}
+                                    onClick={closeModal}
+                                    data-dusk="closeModalButton">
+                                    Sluiten
+                                </button>
+                            )}
+                        </Fragment>
                     </div>
-                )}
+                </div>
             </div>
         </div>
     );
diff --git a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
index d676e42dd..6cf05a0cd 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
@@ -116,34 +116,32 @@ export default function ModalReimbursementDetailsEdit({
 
                             <div className="form-group">
                                 <label className="form-label form-label-required">Categorie</label>
-                                <div className="form-group-offset">
-                                    <div className="row">
-                                        <div className="col col-xs-9">
-                                            <SelectControl
-                                                className={'form-control'}
-                                                options={categories}
-                                                propKey={'id'}
-                                                allowSearch={false}
-                                                value={form.values.reimbursement_category_id}
-                                                onChange={(reimbursement_category_id?: number) => {
-                                                    form.update({ reimbursement_category_id });
-                                                }}
-                                            />
-                                        </div>
-
-                                        <div className="col col-xs-3">
-                                            <button
-                                                className="button button-primary button-fill"
-                                                onClick={() => manageCategories()}
-                                                type="button">
-                                                Wijzig categorieën
-                                            </button>
-                                        </div>
+                                <div className="row">
+                                    <div className="col col-xs-9">
+                                        <SelectControl
+                                            className={'form-control'}
+                                            options={categories}
+                                            propKey={'id'}
+                                            allowSearch={false}
+                                            value={form.values.reimbursement_category_id}
+                                            onChange={(reimbursement_category_id?: number) => {
+                                                form.update({ reimbursement_category_id });
+                                            }}
+                                        />
                                     </div>
-                                </div>
 
-                                <FormError error={form.errors.category_name} />
+                                    <div className="col col-xs-3">
+                                        <button
+                                            className="button button-primary button-fill"
+                                            onClick={() => manageCategories()}
+                                            type="button">
+                                            Wijzig categorieën
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
+
+                            <FormError error={form.errors.category_name} />
                         </div>
                     </div>
 
diff --git a/react/src/dashboard/components/modals/ModalReservationCreate.tsx b/react/src/dashboard/components/modals/ModalReservationCreate.tsx
index 9a74af38c..c717ce806 100644
--- a/react/src/dashboard/components/modals/ModalReservationCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationCreate.tsx
@@ -142,7 +142,7 @@ export default function ModalReservationCreate({
                             </div>
                             <div className="row">
                                 <div className="col col-sm-11 col-xs-12">
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">Pasnummer</label>
                                         <input
                                             className="form-control"
@@ -181,25 +181,23 @@ export default function ModalReservationCreate({
                             </div>
                             <div className="row">
                                 <div className="col col-sm-11 col-xs-12">
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <label className="form-label">Aanbod</label>
-                                        <div className="form-offset">
-                                            <FormGroupInfo
-                                                info={<TranslateHtml i18n={'reservation_create.tooltips.product'} />}>
-                                                <SelectControl
-                                                    className="form-control"
-                                                    propKey={'id'}
-                                                    options={products}
-                                                    value={formProducts.values.product_id}
-                                                    onChange={(product_id: number) =>
-                                                        formProducts.update({ product_id })
-                                                    }
-                                                />
-                                            </FormGroupInfo>
-                                        </div>
+
+                                        <FormGroupInfo
+                                            info={<TranslateHtml i18n={'reservation_create.tooltips.product'} />}>
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey={'id'}
+                                                options={products}
+                                                value={formProducts.values.product_id}
+                                                onChange={(product_id: number) => formProducts.update({ product_id })}
+                                            />
+                                        </FormGroupInfo>
+
                                         <FormError error={formProducts.errors.product_id} />
                                     </div>
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">Notitie</label>
                                         <textarea
                                             className="form-control"
diff --git a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
index 2c7afea5d..98a444f85 100644
--- a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
@@ -348,153 +348,138 @@ export default function ModalVoucherCreate({
 
                                 {showGeneralFields && (
                                     <div className="modal-fields-list">
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label form-label-required">
                                                 {translate('modals.modal_voucher_create.labels.fund')}
                                             </div>
-                                            <div className="form-offset">
-                                                <FormGroupInfo
-                                                    info={
-                                                        <TranslateHtml
-                                                            i18n={'modals.modal_voucher_create.tooltips.assign_type'}
-                                                        />
-                                                    }>
-                                                    <SelectControl
-                                                        className={'flex-grow'}
-                                                        value={fund.id}
-                                                        propKey={'id'}
-                                                        onChange={(fund_id: number) => {
-                                                            setFund(funds.find((fund) => fund.id === fund_id));
-                                                        }}
-                                                        options={funds}
-                                                        allowSearch={false}
-                                                        optionsComponent={SelectControlOptionsFund}
+
+                                            <FormGroupInfo
+                                                info={
+                                                    <TranslateHtml
+                                                        i18n={'modals.modal_voucher_create.tooltips.assign_type'}
                                                     />
-                                                    <FormError error={form.errors?.fund_id} />
-                                                </FormGroupInfo>
-                                            </div>
+                                                }>
+                                                <SelectControl
+                                                    className={'flex-grow'}
+                                                    value={fund.id}
+                                                    propKey={'id'}
+                                                    onChange={(fund_id: number) => {
+                                                        setFund(funds.find((fund) => fund.id === fund_id));
+                                                    }}
+                                                    options={funds}
+                                                    allowSearch={false}
+                                                    optionsComponent={SelectControlOptionsFund}
+                                                />
+                                                <FormError error={form.errors?.fund_id} />
+                                            </FormGroupInfo>
                                         </div>
 
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label form-label-required">
                                                 {translate('modals.modal_voucher_create.labels.credit_type')}
                                             </div>
-                                            <div className="form-offset">
-                                                <FormGroupInfo
-                                                    info={
-                                                        <TranslateHtml
-                                                            i18n={'modals.modal_voucher_create.tooltips.type'}
-                                                        />
-                                                    }>
-                                                    <SelectControl
-                                                        value={form.values.type}
-                                                        propKey={'key'}
-                                                        onChange={(type: 'vouchers' | 'product_vouchers') => {
-                                                            form.update({ type });
-                                                        }}
-                                                        options={creditTypes}
-                                                        allowSearch={false}
-                                                    />
-                                                    <FormError error={form.errors?.type} />
-                                                </FormGroupInfo>
-                                            </div>
+
+                                            <FormGroupInfo
+                                                info={
+                                                    <TranslateHtml i18n={'modals.modal_voucher_create.tooltips.type'} />
+                                                }>
+                                                <SelectControl
+                                                    value={form.values.type}
+                                                    propKey={'key'}
+                                                    onChange={(type: 'vouchers' | 'product_vouchers') => {
+                                                        form.update({ type });
+                                                    }}
+                                                    options={creditTypes}
+                                                    allowSearch={false}
+                                                />
+                                                <FormError error={form.errors?.type} />
+                                            </FormGroupInfo>
                                         </div>
 
                                         {fund.type === 'budget' && form.values.type == 'vouchers' && (
-                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                            <div className="form-group">
                                                 <div className="form-label form-label-required">
                                                     {translate('modals.modal_voucher_create.labels.amount')}
                                                 </div>
-                                                <div className="form-offset">
-                                                    <input
-                                                        type={'number'}
-                                                        className="form-control"
-                                                        placeholder={translate(
-                                                            'modals.modal_voucher_create.labels.amount',
-                                                        )}
-                                                        value={form.values.amount || ''}
-                                                        step=".01"
-                                                        min="0.01"
-                                                        max={fund.limit_per_voucher}
-                                                        onChange={(e) => form.update({ amount: e.target.value })}
-                                                    />
-                                                    {!form.errors?.amount && (
-                                                        <div className="form-hint">
-                                                            Limiet {fund.limit_per_voucher_locale}
-                                                        </div>
-                                                    )}
-                                                    <FormError error={form.errors?.amount} />
-                                                </div>
+
+                                                <input
+                                                    type={'number'}
+                                                    className="form-control"
+                                                    placeholder={translate('modals.modal_voucher_create.labels.amount')}
+                                                    value={form.values.amount || ''}
+                                                    step=".01"
+                                                    min="0.01"
+                                                    max={fund.limit_per_voucher}
+                                                    onChange={(e) => form.update({ amount: e.target.value })}
+                                                />
+                                                {!form.errors?.amount && (
+                                                    <div className="form-hint">
+                                                        Limiet {fund.limit_per_voucher_locale}
+                                                    </div>
+                                                )}
+                                                <FormError error={form.errors?.amount} />
                                             </div>
                                         )}
 
                                         {form.values.type == 'product_vouchers' && (
-                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                            <div className="form-group">
                                                 <div className="form-label">
                                                     {translate('modals.modal_product_voucher_create.labels.product')}
                                                 </div>
-                                                <div className="form-offset">
-                                                    <SelectControl
-                                                        value={form.values.product_id}
-                                                        propKey={'id'}
-                                                        options={products}
-                                                        placeholder="Selecteer aanbod..."
-                                                        onChange={(product_id: number) => form.update({ product_id })}
-                                                    />
-                                                </div>
+                                                <SelectControl
+                                                    value={form.values.product_id}
+                                                    propKey={'id'}
+                                                    options={products}
+                                                    placeholder="Selecteer aanbod..."
+                                                    onChange={(product_id: number) => form.update({ product_id })}
+                                                />
                                                 <FormError error={form.errors?.product_id} />
                                             </div>
                                         )}
 
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label form-label-required">
                                                 {translate('modals.modal_voucher_create.labels.assign_by_type')}
                                             </div>
-                                            <div className="form-offset">
-                                                <FormGroupInfo
-                                                    info={
-                                                        <TranslateHtml
-                                                            i18n={'modals.modal_voucher_create.tooltips.funds'}
-                                                        />
-                                                    }>
-                                                    <SelectControl
-                                                        value={assignType}
-                                                        propValue={'label'}
-                                                        onChange={setAssignType}
-                                                        options={assignTypes}
-                                                        allowSearch={false}
+                                            <FormGroupInfo
+                                                info={
+                                                    <TranslateHtml
+                                                        i18n={'modals.modal_voucher_create.tooltips.funds'}
                                                     />
-                                                    <FormError error={form.errors?.assign_by_type} />
-                                                </FormGroupInfo>
-                                            </div>
+                                                }>
+                                                <SelectControl
+                                                    value={assignType}
+                                                    propValue={'label'}
+                                                    onChange={setAssignType}
+                                                    options={assignTypes}
+                                                    allowSearch={false}
+                                                />
+                                                <FormError error={form.errors?.assign_by_type} />
+                                            </FormGroupInfo>
                                         </div>
 
                                         {fund?.backoffice?.backoffice_enabled && assignType.key !== 'bsn' && (
-                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                            <div className="form-group">
                                                 <div className={`form-label`}>&nbsp;</div>
-                                                <div className="form-offset">
-                                                    <InfoBox
-                                                        type={'warning'}
-                                                        iconPosition={'top'}
-                                                        iconColor={'warning'}>
-                                                        <p className={'text-strong'}>
-                                                            Let op! De backoffice integratie stuurt mogelijk geen data
-                                                        </p>
-                                                        <p>
-                                                            Om data te laten versturen via de backoffice integratie, is
-                                                            het noodzakelijk dat de inwoner een BSN heeft geverifieerd
-                                                            door in te loggen met DigiD. Bij het aanmaken van een tegoed
-                                                            op basis van een activatiecode of e-mailadres, wordt deze
-                                                            stap overgeslagen en zal er mogelijk geen data vanuit het
-                                                            systeem worden verstuurd via de backoffice integratie.
-                                                        </p>
-                                                    </InfoBox>
-                                                </div>
+
+                                                <InfoBox type={'warning'} iconPosition={'top'} iconColor={'warning'}>
+                                                    <p className={'text-strong'}>
+                                                        Let op! De backoffice integratie stuurt mogelijk geen data
+                                                    </p>
+                                                    <p>
+                                                        Om data te laten versturen via de backoffice integratie, is het
+                                                        noodzakelijk dat de inwoner een BSN heeft geverifieerd door in
+                                                        te loggen met DigiD. Bij het aanmaken van een tegoed op basis
+                                                        van een activatiecode of e-mailadres, wordt deze stap
+                                                        overgeslagen en zal er mogelijk geen data vanuit het systeem
+                                                        worden verstuurd via de backoffice integratie.
+                                                    </p>
+                                                </InfoBox>
                                             </div>
                                         )}
 
                                         {assignType.hasInput && (
-                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                            <div className="form-group">
                                                 <div
                                                     className={`form-label form-label-required ${
                                                         ['email', 'bsn'].includes(assignType.key)
@@ -503,91 +488,81 @@ export default function ModalVoucherCreate({
                                                     }`}>
                                                     {assignType.inputLabel}
                                                 </div>
-                                                <div className="form-offset">
-                                                    <input
-                                                        className="form-control"
-                                                        placeholder={assignType.inputLabel}
-                                                        value={form.values[assignType.key] || ''}
-                                                        onChange={(e) =>
-                                                            form.update({ [assignType.key]: e.target.value })
-                                                        }
-                                                    />
-                                                    <FormError error={form.errors?.[assignType.key]} />
-                                                </div>
+                                                <input
+                                                    className="form-control"
+                                                    placeholder={assignType.inputLabel}
+                                                    value={form.values[assignType.key] || ''}
+                                                    onChange={(e) => form.update({ [assignType.key]: e.target.value })}
+                                                />
+                                                <FormError error={form.errors?.[assignType.key]} />
                                             </div>
                                         )}
 
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 {translate('modals.modal_voucher_create.labels.client_uid')}
                                             </div>
-                                            <div className="form-offset">
-                                                <input
-                                                    className="form-control"
-                                                    placeholder={translate(
-                                                        'modals.modal_voucher_create.labels.client_uid',
-                                                    )}
-                                                    value={form.values.client_uid || ''}
-                                                    onChange={(e) => form.update({ client_uid: e.target.value })}
-                                                />
-                                                <FormError error={form.errors?.client_uid} />
-                                            </div>
+
+                                            <input
+                                                className="form-control"
+                                                placeholder={translate('modals.modal_voucher_create.labels.client_uid')}
+                                                value={form.values.client_uid || ''}
+                                                onChange={(e) => form.update({ client_uid: e.target.value })}
+                                            />
+                                            <FormError error={form.errors?.client_uid} />
                                         </div>
 
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 {translate('modals.modal_voucher_create.labels.expire_at')}
                                             </div>
-                                            <div className="form-offset">
-                                                <DatePickerControl
-                                                    value={dateParse(form.values.expire_at)}
-                                                    dateMin={dateMinLimit}
-                                                    dateMax={dateParse(fund.end_date)}
-                                                    placeholder={translate('dd-MM-yyyy')}
-                                                    onChange={(expire_at: Date) => {
-                                                        form.update({ expire_at: dateFormat(expire_at) });
-                                                    }}
-                                                />
-                                                <FormError error={form.errors?.expire_at} />
-                                            </div>
+
+                                            <DatePickerControl
+                                                value={dateParse(form.values.expire_at)}
+                                                dateMin={dateMinLimit}
+                                                dateMax={dateParse(fund.end_date)}
+                                                placeholder={translate('dd-MM-yyyy')}
+                                                onChange={(expire_at: Date) => {
+                                                    form.update({ expire_at: dateFormat(expire_at) });
+                                                }}
+                                            />
+                                            <FormError error={form.errors?.expire_at} />
                                         </div>
 
                                         {fund.type === 'subsidies' && (
-                                            <div className="form-group form-group-inline form-group-inline-lg">
+                                            <div className="form-group">
                                                 <div className="form-label form-label-required">
                                                     {translate('modals.modal_voucher_create.labels.limit_multiplier')}
                                                 </div>
-                                                <div className="form-offset">
-                                                    <input
-                                                        type={'number'}
-                                                        className="form-control"
-                                                        placeholder={translate(
-                                                            'modals.modal_voucher_create.labels.limit_multiplier',
-                                                        )}
-                                                        value={form.values.limit_multiplier}
-                                                        step=".01"
-                                                        min="0.01"
-                                                        onChange={(e) =>
-                                                            form.update({ limit_multiplier: parseInt(e.target.value) })
-                                                        }
-                                                    />
-                                                </div>
+
+                                                <input
+                                                    type={'number'}
+                                                    className="form-control"
+                                                    placeholder={translate(
+                                                        'modals.modal_voucher_create.labels.limit_multiplier',
+                                                    )}
+                                                    value={form.values.limit_multiplier}
+                                                    step=".01"
+                                                    min="0.01"
+                                                    onChange={(e) => {
+                                                        form.update({ limit_multiplier: parseInt(e.target.value) });
+                                                    }}
+                                                />
+
                                                 <FormError error={form.errors?.limit_multiplier} />
                                             </div>
                                         )}
 
-                                        <div className="form-group form-group-inline form-group-inline-lg">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 {translate('modals.modal_voucher_create.labels.note')}
                                             </div>
-                                            <div className="form-offset">
-                                                <textarea
-                                                    className="form-control r-n"
-                                                    placeholder={translate('modals.modal_voucher_create.labels.note')}
-                                                    value={form.values.note || ''}
-                                                    onChange={(e) => form.update({ note: e.target.value })}
-                                                />
-                                            </div>
+                                            <textarea
+                                                className="form-control r-n"
+                                                placeholder={translate('modals.modal_voucher_create.labels.note')}
+                                                value={form.values.note || ''}
+                                                onChange={(e) => form.update({ note: e.target.value })}
+                                            />
                                             <FormError error={form.errors?.note} />
                                         </div>
                                     </div>
@@ -617,7 +592,7 @@ export default function ModalVoucherCreate({
                                 </div>
                             )}
                         </div>
-                        <div className="form-group form-group-inline form-group-inline-lg">
+                        <div className="form-group">
                             <div className="form-label" />
                             <div className="block block-info">
                                 <em className="mdi mdi-information block-info-icon" />
diff --git a/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx b/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
index 7a51f4a4e..0c83f33d3 100644
--- a/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherDeactivation.tsx
@@ -129,7 +129,7 @@ export default function ModalVoucherDeactivation({
                         </div>
 
                         {hasEmail && (
-                            <div className="form-group.form-group-inline">
+                            <div className="form-group">
                                 <CheckboxControl
                                     title={'Informeer de gebruiker via een e-mailbericht.'}
                                     checked={form.values.notify_by_email || false}
diff --git a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
index da079f043..f8e80224c 100644
--- a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
@@ -130,21 +130,19 @@ export default function ModalVoucherRecordEdit({
                             <div className="col-lg-10 col-offset-lg-1">
                                 <div className="form-group">
                                     <div className="form-label form-label-required">Soort persoonsgegeven</div>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            className="form-control"
-                                            value={form.values.record_type_key}
-                                            propKey={'key'}
-                                            options={recordTypes}
-                                            allowSearch={false}
-                                            disabled={
-                                                !!record || (recordTypes.length == 1 && recordTypes[0].key == null)
-                                            }
-                                            onChange={(record_type_key: string) => {
-                                                form.update({ record_type_key: record_type_key });
-                                            }}
-                                        />
-                                    </div>
+
+                                    <SelectControl
+                                        className="form-control"
+                                        value={form.values.record_type_key}
+                                        propKey={'key'}
+                                        options={recordTypes}
+                                        allowSearch={false}
+                                        disabled={!!record || (recordTypes.length == 1 && recordTypes[0].key == null)}
+                                        onChange={(record_type_key: string) => {
+                                            form.update({ record_type_key: record_type_key });
+                                        }}
+                                    />
+
                                     <FormError error={form.errors?.record_type_key} />
                                 </div>
 
@@ -183,12 +181,11 @@ export default function ModalVoucherRecordEdit({
 
                                 <div className="form-group">
                                     <div className="form-label" />
-                                    <div className="form-offset">
-                                        <div className="block block-info">
-                                            <em className="mdi mdi-information block-info-icon" />
-                                            Controleer de gegevens. Na het aanmaken van het tegoed kan het niet worden
-                                            verwijderd.
-                                        </div>
+
+                                    <div className="block block-info">
+                                        <em className="mdi mdi-information block-info-icon" />
+                                        Controleer de gegevens. Na het aanmaken van het tegoed kan het niet worden
+                                        verwijderd.
                                     </div>
                                 </div>
                             </div>
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
index 3be082ba5..348810684 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
@@ -273,7 +273,7 @@ export default function ModalVoucherTransaction({
                     <div className="modal-body modal-body-visible">
                         <div className="modal-section modal-section-pad">
                             {targets.length > 1 && form.values.target !== 'top_up' && (
-                                <div className="form-group form-group-inline form-group-inline-md">
+                                <div className="form-group">
                                     <div className="form-label form-label-required">
                                         {translate('modals.modal_voucher_transaction.labels.target')}
                                     </div>
@@ -292,7 +292,7 @@ export default function ModalVoucherTransaction({
                             )}
 
                             {form.values.target === 'provider' && (
-                                <div className="form-group form-group-inline form-group-inline-md">
+                                <div className="form-group">
                                     <div className="form-label form-label-required">
                                         {translate('modals.modal_voucher_transaction.labels.provider')}
                                     </div>
@@ -310,7 +310,7 @@ export default function ModalVoucherTransaction({
                             )}
 
                             {ibanSources && canUseReimbursements && form.values.target === 'iban' && (
-                                <div className="form-group form-group-inline form-group-inline-md">
+                                <div className="form-group">
                                     <div className="form-label form-label-required">
                                         {translate('modals.modal_voucher_transaction.labels.iban_source')}
                                     </div>
@@ -331,7 +331,7 @@ export default function ModalVoucherTransaction({
                             {ibanSources &&
                                 form.values.iban_source === 'reimbursement' &&
                                 form.values.target === 'iban' && (
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <div className="form-label form-label-required">
                                             {translate('modals.modal_voucher_transaction.labels.reimbursement')}
                                         </div>
@@ -348,127 +348,125 @@ export default function ModalVoucherTransaction({
 
                             {form.values.target === 'iban' &&
                                 (form.values.iban_source === 'manual' || reimbursement?.id) && (
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <div className="form-label form-label-required">
                                             {translate('modals.modal_voucher_transaction.labels.target_iban')}
                                         </div>
-                                        <div className="form-offset">
-                                            {form.values.iban_source === 'manual' ? (
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control"
-                                                    defaultValue={form.values.target_iban || ''}
-                                                    placeholder="IBAN-nummer"
-                                                    onChange={(e) => form.update({ target_iban: e.target.value })}
-                                                />
-                                            ) : (
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control"
-                                                    value={reimbursement.iban || ''}
-                                                    disabled={true}
-                                                />
-                                            )}
-
-                                            <FormError error={form.errors?.target_iban} />
-                                        </div>
+
+                                        {form.values.iban_source === 'manual' ? (
+                                            <input
+                                                type={'text'}
+                                                className="form-control"
+                                                defaultValue={form.values.target_iban || ''}
+                                                placeholder="IBAN-nummer"
+                                                onChange={(e) => form.update({ target_iban: e.target.value })}
+                                            />
+                                        ) : (
+                                            <input
+                                                type={'text'}
+                                                className="form-control"
+                                                value={reimbursement.iban || ''}
+                                                disabled={true}
+                                            />
+                                        )}
+
+                                        <FormError error={form.errors?.target_iban} />
                                     </div>
                                 )}
 
                             {form.values.target === 'iban' &&
                                 (form.values.iban_source === 'manual' || reimbursement?.id) && (
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <div className="form-label form-label-required">
                                             {translate('modals.modal_voucher_transaction.labels.target_name')}
                                         </div>
-                                        <div className="form-offset">
-                                            {form.values.iban_source === 'manual' ? (
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control"
-                                                    defaultValue={form.values.target_name || ''}
-                                                    placeholder="IBAN-naam"
-                                                    onChange={(e) => form.update({ target_name: e.target.value })}
-                                                />
-                                            ) : (
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control"
-                                                    value={reimbursement.iban_name || ''}
-                                                    disabled={true}
-                                                />
-                                            )}
-
-                                            <FormError error={form.errors?.target_name} />
-                                        </div>
+
+                                        {form.values.iban_source === 'manual' ? (
+                                            <input
+                                                type={'text'}
+                                                className="form-control"
+                                                defaultValue={form.values.target_name || ''}
+                                                placeholder="IBAN-naam"
+                                                onChange={(e) => form.update({ target_name: e.target.value })}
+                                            />
+                                        ) : (
+                                            <input
+                                                type={'text'}
+                                                className="form-control"
+                                                value={reimbursement.iban_name || ''}
+                                                disabled={true}
+                                            />
+                                        )}
+
+                                        <FormError error={form.errors?.target_name} />
                                     </div>
                                 )}
 
-                            <div className="form-group form-group-inline form-group-inline-md">
+                            <div className="form-group">
                                 <div className="form-label form-label-required">
                                     {translate('modals.modal_voucher_transaction.labels.amount')}
                                 </div>
-                                <div className="form-offset">
-                                    <input
-                                        className="form-control"
-                                        type="number"
-                                        value={form.values.amount || ''}
-                                        step=".01"
-                                        min=".02"
-                                        max={amountLimit}
-                                        placeholder={translate('modals.modal_voucher_transaction.labels.amount')}
-                                        onChange={(e) => form.update({ amount: e.target.value })}
-                                    />
-                                    {!form.errors?.amount ? (
-                                        <div className="form-hint">
-                                            Limiet {currencyFormat(parseFloat(amountLimit?.toString()))}
-                                        </div>
-                                    ) : (
-                                        <FormError error={form.errors?.amount} />
-                                    )}
-                                </div>
+
+                                <input
+                                    className="form-control"
+                                    type="number"
+                                    value={form.values.amount || ''}
+                                    step=".01"
+                                    min=".02"
+                                    max={amountLimit}
+                                    placeholder={translate('modals.modal_voucher_transaction.labels.amount')}
+                                    onChange={(e) => form.update({ amount: e.target.value })}
+                                />
+                                {!form.errors?.amount ? (
+                                    <div className="form-hint">
+                                        Limiet {currencyFormat(parseFloat(amountLimit?.toString()))}
+                                    </div>
+                                ) : (
+                                    <FormError error={form.errors?.amount} />
+                                )}
+
                                 <FormError error={form.errors?.amount} />
                             </div>
 
-                            <div className="form-group form-group-inline form-group-inline-md">
+                            <div className="form-group">
                                 <div className="form-label">
                                     {translate('modals.modal_voucher_transaction.labels.note')}
                                 </div>
-                                <div className="form-offset">
-                                    <textarea
-                                        className="form-control r-n"
-                                        value={form.values.note}
-                                        placeholder={translate('modals.modal_voucher_transaction.labels.note')}
-                                        onChange={(e) => form.update({ note: e.target.value })}
-                                    />
-                                    {!form.errors?.note ? (
-                                        <div className="form-hint">Max. 255 tekens</div>
-                                    ) : (
-                                        <FormError error={form.errors?.note} />
-                                    )}
-                                </div>
+
+                                <textarea
+                                    className="form-control r-n"
+                                    value={form.values.note}
+                                    placeholder={translate('modals.modal_voucher_transaction.labels.note')}
+                                    onChange={(e) => form.update({ note: e.target.value })}
+                                />
+                                {!form.errors?.note ? (
+                                    <div className="form-hint">Max. 255 tekens</div>
+                                ) : (
+                                    <FormError error={form.errors?.note} />
+                                )}
+
                                 <FormError error={form.errors?.note} />
                             </div>
 
                             {form.values.target === 'provider' && (
                                 <Fragment>
-                                    <div className="form-group form-group-inline form-group-inline-md">
+                                    <div className="form-group">
                                         <div className="form-label" />
-                                        <div className="form-offset">
-                                            <label className="checkbox">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={form.values.note_shared}
-                                                    onChange={(e) => form.update({ note_shared: e.target.checked })}
-                                                />
-                                                <div className="checkbox-label">
-                                                    <div className="checkbox-box">
-                                                        <div className="mdi mdi-check" />
-                                                    </div>
-                                                    {translate('modals.modal_voucher_transaction.labels.note_shared')}
+
+                                        <label className="checkbox">
+                                            <input
+                                                type="checkbox"
+                                                checked={form.values.note_shared}
+                                                onChange={(e) => form.update({ note_shared: e.target.checked })}
+                                            />
+                                            <div className="checkbox-label">
+                                                <div className="checkbox-box">
+                                                    <div className="mdi mdi-check" />
                                                 </div>
-                                            </label>
-                                        </div>
+                                                {translate('modals.modal_voucher_transaction.labels.note_shared')}
+                                            </div>
+                                        </label>
+
                                         <FormError error={form.errors?.note_shared} />
                                     </div>
 
diff --git a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
index 681feac92..074b70347 100644
--- a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
@@ -1001,40 +1001,38 @@ export default function ModalVouchersUpload({
                     )}>
                     {step == STEP_SET_UP && (
                         <div className="modal-section form">
-                            <div className="form-group form-group-inline form-group-inline-lg">
+                            <div className="form-group">
                                 <div className="form-label">{translate('modals.modal_voucher_create.labels.fund')}</div>
-                                <div className="form-offset">
-                                    <FormGroupInfo info={<TranslateHtml i18n={'csv_upload.tooltips.funds'} />}>
-                                        <SelectControl
-                                            className="flex-grow"
-                                            value={fund.id}
-                                            propKey={'id'}
-                                            onChange={(fund_id: number) => {
-                                                setFund(funds.find((fund) => fund.id === fund_id));
-                                            }}
-                                            options={funds}
-                                            allowSearch={false}
-                                            optionsComponent={SelectControlOptionsFund}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
+
+                                <FormGroupInfo info={<TranslateHtml i18n={'csv_upload.tooltips.funds'} />}>
+                                    <SelectControl
+                                        className="flex-grow"
+                                        value={fund.id}
+                                        propKey={'id'}
+                                        onChange={(fund_id: number) => {
+                                            setFund(funds.find((fund) => fund.id === fund_id));
+                                        }}
+                                        options={funds}
+                                        allowSearch={false}
+                                        optionsComponent={SelectControlOptionsFund}
+                                    />
+                                </FormGroupInfo>
                             </div>
 
-                            <div className="form-group form-group-inline form-group-inline-lg">
+                            <div className="form-group">
                                 <div className="form-label">
                                     {translate('modals.modal_voucher_create.labels.credit_type')}
                                 </div>
-                                <div className="form-offset">
-                                    <FormGroupInfo info={<TranslateHtml i18n={'csv_upload.tooltips.type'} />}>
-                                        <SelectControl
-                                            value={type}
-                                            propKey={'key'}
-                                            onChange={(type: 'fund_voucher' | 'product_voucher') => setType(type)}
-                                            options={types}
-                                            allowSearch={false}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
+
+                                <FormGroupInfo info={<TranslateHtml i18n={'csv_upload.tooltips.type'} />}>
+                                    <SelectControl
+                                        value={type}
+                                        propKey={'key'}
+                                        onChange={(type: 'fund_voucher' | 'product_voucher') => setType(type)}
+                                        options={types}
+                                        allowSearch={false}
+                                    />
+                                </FormGroupInfo>
                             </div>
                         </div>
                     )}
diff --git a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
index da6df7a8d..ba7097573 100644
--- a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
+++ b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
@@ -1635,19 +1635,19 @@ export default function SignUpProvider() {
                                                     <label className="form-label">
                                                         {translate('organization_edit.labels.business_type')}
                                                     </label>
-                                                    <div className="form-offset">
-                                                        {businessTypes && (
-                                                            <SelectControl
-                                                                value={formOrganization.values.business_type_id}
-                                                                propKey={'id'}
-                                                                onChange={(business_type_id?: number) => {
-                                                                    formOrganization.update({ business_type_id });
-                                                                }}
-                                                                options={businessTypes}
-                                                                placeholder={'Selecteer organisatie type...'}
-                                                            />
-                                                        )}
-                                                    </div>
+
+                                                    {businessTypes && (
+                                                        <SelectControl
+                                                            value={formOrganization.values.business_type_id}
+                                                            propKey={'id'}
+                                                            onChange={(business_type_id?: number) => {
+                                                                formOrganization.update({ business_type_id });
+                                                            }}
+                                                            options={businessTypes}
+                                                            placeholder={'Selecteer organisatie type...'}
+                                                        />
+                                                    )}
+
                                                     <FormError error={formOrganization.errors.business_type_id} />
                                                 </div>
                                             </div>
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
index 07a9480e5..da78d0edf 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationAdd.tsx
@@ -274,20 +274,18 @@ export default function SignUpStepOrganizationAdd({
                                     <label className="form-label">
                                         {translate('organization_edit.labels.business_type')}
                                     </label>
-                                    <div className="form-offset">
-                                        {businessTypes && (
-                                            <SelectControl
-                                                value={formOrganization.values.business_type_id}
-                                                propKey={'id'}
-                                                allowSearch={true}
-                                                onChange={(business_type_id?: number) =>
-                                                    formOrganization.update({ business_type_id })
-                                                }
-                                                options={businessTypes}
-                                                placeholder={'Selecteer organisatie type...'}
-                                            />
-                                        )}
-                                    </div>
+                                    {businessTypes && (
+                                        <SelectControl
+                                            value={formOrganization.values.business_type_id}
+                                            propKey={'id'}
+                                            allowSearch={true}
+                                            onChange={(business_type_id?: number) =>
+                                                formOrganization.update({ business_type_id })
+                                            }
+                                            options={businessTypes}
+                                            placeholder={'Selecteer organisatie type...'}
+                                        />
+                                    )}
                                     <FormError error={formOrganization.errors.business_type_id} />
                                 </div>
                             </div>
diff --git a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
index 4c10e57c3..a726bebc9 100644
--- a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
+++ b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
@@ -22,6 +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';
 
 export default function BankConnections() {
     const activeOrganization = useActiveOrganization();
@@ -361,15 +362,12 @@ export default function BankConnections() {
                                                     </td>
                                                     <td>{bankConnection.iban}</td>
                                                     <td>
-                                                        <div
-                                                            className={
-                                                                'label ' +
-                                                                (bankConnection.state == 'active'
-                                                                    ? 'label-success'
-                                                                    : 'label-default')
+                                                        <Label
+                                                            type={
+                                                                bankConnection.state == 'active' ? 'success' : 'default'
                                                             }>
                                                             {bankConnection.state_locale}
-                                                        </div>
+                                                        </Label>
                                                     </td>
                                                     <td />
                                                 </tr>
diff --git a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
index 84691dd8c..f66b8dc26 100644
--- a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
+++ b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
@@ -275,327 +275,327 @@ export default function BiConnection() {
 
                     {filterValues.view_type === 'settings' && (
                         <div className="card-section card-section-primary">
-                            <div className="form-group form-group-inline">
-                                <div className="form-label">{translate('bi_connection.labels.enabled')}</div>
-
-                                <div className="form-offset">
-                                    <FormGroupInfo
-                                        error={form.errors?.enabled}
-                                        info={
-                                            <Fragment>
-                                                <h4>Kies de juiste instelling</h4>
-                                                <p>
-                                                    Vul bij de header bovenstaande naam en sleutelcode in. Voor het
-                                                    instellen van de token zijn er twee opties:
-                                                </p>
-                                                <ul></ul>
-                                                <ul>
-                                                    <li>
-                                                        URL-parameter: Kies deze optie als uw BI-tool token ondersteunt.
-                                                        Voeg de token toe als een parameter in de URL
-                                                    </li>
-                                                    <li>
-                                                        Header: Kies deze optie als uw BI-tool header ondersteunt. Voeg
-                                                        de token toe in de header
-                                                    </li>
-                                                </ul>
-                                            </Fragment>
-                                        }>
-                                        <SelectControl
-                                            className="form-control"
-                                            propKey={'value'}
-                                            value={form.values.enabled}
-                                            options={authTypes}
-                                            allowSearch={false}
-                                            onChange={(enabled: 0 | 1) => form.update({ enabled })}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
-                            </div>
+                            <div className="row">
+                                <div className="col col-md-10 col-md-offset-2 col-xs-12">
+                                    <div className="form-group">
+                                        <div className="form-label">{translate('bi_connection.labels.enabled')}</div>
 
-                            {form && !!form.values.enabled && (
-                                <Fragment>
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">{translate('bi_connection.labels.url')}</div>
-
-                                        <div className="form-offset">
-                                            <FormGroupInfo
-                                                dashed={true}
-                                                copyShow={true}
-                                                copyValue={activeOrganization.bi_connection_url}
-                                                copyDisable={!connection?.access_token}
-                                                info={
+                                        <FormGroupInfo
+                                            error={form.errors?.enabled}
+                                            info={
+                                                <Fragment>
+                                                    <h4>Kies de juiste instelling</h4>
                                                     <p>
-                                                        Dit is de URL voor het exporteren van gegevens. Kopieer deze
-                                                        naar de BI-tool.
+                                                        Vul bij de header bovenstaande naam en sleutelcode in. Voor het
+                                                        instellen van de token zijn er twee opties:
                                                     </p>
-                                                }>
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control form-control-dashed"
-                                                    disabled={!connection?.access_token}
-                                                    defaultValue={activeOrganization.bi_connection_url}
-                                                    readOnly={true}
-                                                />
-                                            </FormGroupInfo>
-                                        </div>
+                                                    <ul></ul>
+                                                    <ul>
+                                                        <li>
+                                                            URL-parameter: Kies deze optie als uw BI-tool token
+                                                            ondersteunt. Voeg de token toe als een parameter in de URL
+                                                        </li>
+                                                        <li>
+                                                            Header: Kies deze optie als uw BI-tool header ondersteunt.
+                                                            Voeg de token toe in de header
+                                                        </li>
+                                                    </ul>
+                                                </Fragment>
+                                            }>
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey={'value'}
+                                                value={form.values.enabled}
+                                                options={authTypes}
+                                                allowSearch={false}
+                                                onChange={(enabled: 0 | 1) => form.update({ enabled })}
+                                            />
+                                        </FormGroupInfo>
                                     </div>
 
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">{translate('bi_connection.labels.data_types')}</div>
-                                        <div className="form-offset">
-                                            <div className="checkbox-container-compact">
-                                                {availableDataTypes?.map((types, index: number) => (
-                                                    <div className="row" key={index}>
-                                                        {types.map((type, index: number) => (
-                                                            <div className="col col-xs-12 col-lg-6" key={index}>
-                                                                <CheckboxControl
-                                                                    id={`data_type_name_${type.key}`}
-                                                                    className="checkbox-compact"
-                                                                    title={type.name}
-                                                                    checked={!!dataTypes[type.key]}
-                                                                    onChange={(e) => {
-                                                                        dataTypes[type.key] = e.target.checked;
-                                                                        setDataTypes({ ...dataTypes });
-                                                                    }}
-                                                                />
-                                                            </div>
-                                                        ))}
-                                                    </div>
-                                                ))}
-                                                <FormError error={form.errors?.data_types} />
+                                    {form && !!form.values.enabled && (
+                                        <Fragment>
+                                            <div className="form-group">
+                                                <div className="form-label">
+                                                    {translate('bi_connection.labels.url')}
+                                                </div>
+
+                                                <FormGroupInfo
+                                                    dashed={true}
+                                                    copyShow={true}
+                                                    copyValue={activeOrganization.bi_connection_url}
+                                                    copyDisable={!connection?.access_token}
+                                                    info={
+                                                        <p>
+                                                            Dit is de URL voor het exporteren van gegevens. Kopieer deze
+                                                            naar de BI-tool.
+                                                        </p>
+                                                    }>
+                                                    <input
+                                                        type={'text'}
+                                                        className="form-control form-control-dashed"
+                                                        disabled={!connection?.access_token}
+                                                        defaultValue={activeOrganization.bi_connection_url}
+                                                        readOnly={true}
+                                                    />
+                                                </FormGroupInfo>
                                             </div>
-                                        </div>
-                                    </div>
 
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">
-                                            {translate('bi_connection.labels.header_name')}
-                                        </div>
+                                            <div className="form-group">
+                                                <div className="form-label">
+                                                    {translate('bi_connection.labels.data_types')}
+                                                </div>
 
-                                        <div className="form-offset">
-                                            <FormGroupInfo
-                                                dashed={true}
-                                                copyShow={true}
-                                                copyValue={headerKey}
-                                                info={
-                                                    <p>
-                                                        Dit is de naam van de key die wordt gebruikt voor de verificatie
-                                                        van verzoeken. Kopieer en plak deze waarde in de {'"key"'}{' '}
-                                                        waarde van de header {'"X-API-KEY"'} in de BI-tool.
-                                                    </p>
-                                                }>
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control form-control-dashed"
-                                                    defaultValue={headerKey}
-                                                    readOnly={true}
-                                                />
-                                            </FormGroupInfo>
-                                        </div>
-                                    </div>
+                                                <div className="checkbox-container-compact">
+                                                    {availableDataTypes?.map((types, index: number) => (
+                                                        <div className="row" key={index}>
+                                                            {types.map((type, index: number) => (
+                                                                <div className="col col-xs-12 col-lg-6" key={index}>
+                                                                    <CheckboxControl
+                                                                        id={`data_type_name_${type.key}`}
+                                                                        className="checkbox-compact"
+                                                                        title={type.name}
+                                                                        checked={!!dataTypes[type.key]}
+                                                                        onChange={(e) => {
+                                                                            dataTypes[type.key] = e.target.checked;
+                                                                            setDataTypes({ ...dataTypes });
+                                                                        }}
+                                                                    />
+                                                                </div>
+                                                            ))}
+                                                        </div>
+                                                    ))}
+                                                    <FormError error={form.errors?.data_types} />
+                                                </div>
+                                            </div>
 
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">{translate('bi_connection.labels.header_key')}</div>
+                                            <div className="form-group">
+                                                <div className="form-label">
+                                                    {translate('bi_connection.labels.header_name')}
+                                                </div>
 
-                                        <div className="form-offset">
-                                            <FormGroupInfo
-                                                dashed={true}
-                                                copyShow={true}
-                                                copyValue={connection?.access_token}
-                                                copyDisable={!connection?.access_token}
-                                                info={
-                                                    <p>
-                                                        Dit is de waarde van de X-API-KEY key header, die wordt gebruikt
-                                                        als token voor verificatie van verzoeken. Het is mogelijk om het
-                                                        handmatig te regenereren en de vervalperiode in te stellen op
-                                                        het tabblad {'"Beveilging"'}. Kopieer deze waarde en plak het in
-                                                        het veld {'"value"'} van de header {'"X-API-KEY"'} in de
-                                                        BI-tool.
-                                                    </p>
-                                                }>
-                                                <input
-                                                    type={'text'}
-                                                    className="form-control form-control-dashed"
-                                                    disabled={!connection?.access_token}
-                                                    value={connection?.access_token || ''}
-                                                    placeholder={translate('bi_connection.labels.token_placeholder')}
-                                                    readOnly={true}
-                                                />
-                                            </FormGroupInfo>
-                                        </div>
-                                    </div>
+                                                <FormGroupInfo
+                                                    dashed={true}
+                                                    copyShow={true}
+                                                    copyValue={headerKey}
+                                                    info={
+                                                        <p>
+                                                            Dit is de naam van de key die wordt gebruikt voor de
+                                                            verificatie van verzoeken. Kopieer en plak deze waarde in de{' '}
+                                                            {'"key"'} waarde van de header {'"X-API-KEY"'} in de
+                                                            BI-tool.
+                                                        </p>
+                                                    }>
+                                                    <input
+                                                        type={'text'}
+                                                        className="form-control form-control-dashed"
+                                                        defaultValue={headerKey}
+                                                        readOnly={true}
+                                                    />
+                                                </FormGroupInfo>
+                                            </div>
 
-                                    {connection?.id && (
-                                        <div className="form-group form-group-inline">
-                                            <div className="form-label" />
-                                            <div className="form-offset flex">
-                                                <button
-                                                    type="button"
-                                                    className="button button-default button-sm"
-                                                    onClick={() => resetToken()}>
-                                                    <em className="mdi mdi-refresh icon-start" />
-                                                    {translate('bi_connection.buttons.generate_new_key')}
-                                                </button>
-
-                                                {!connection?.expired && (
-                                                    <div className="expiration-value">
-                                                        {`Verloopt ${connection?.expire_after_locale}`}
-                                                    </div>
-                                                )}
+                                            <div className="form-group">
+                                                <div className="form-label">
+                                                    {translate('bi_connection.labels.header_key')}
+                                                </div>
+
+                                                <FormGroupInfo
+                                                    dashed={true}
+                                                    copyShow={true}
+                                                    copyValue={connection?.access_token}
+                                                    copyDisable={!connection?.access_token}
+                                                    info={
+                                                        <p>
+                                                            Dit is de waarde van de X-API-KEY key header, die wordt
+                                                            gebruikt als token voor verificatie van verzoeken. Het is
+                                                            mogelijk om het handmatig te regenereren en de vervalperiode
+                                                            in te stellen op het tabblad {'"Beveilging"'}. Kopieer deze
+                                                            waarde en plak het in het veld {'"value"'} van de header{' '}
+                                                            {'"X-API-KEY"'} in de BI-tool.
+                                                        </p>
+                                                    }>
+                                                    <input
+                                                        type={'text'}
+                                                        className="form-control form-control-dashed"
+                                                        disabled={!connection?.access_token}
+                                                        value={connection?.access_token || ''}
+                                                        placeholder={translate(
+                                                            'bi_connection.labels.token_placeholder',
+                                                        )}
+                                                        readOnly={true}
+                                                    />
+                                                </FormGroupInfo>
                                             </div>
-                                        </div>
-                                    )}
 
-                                    {connection?.expired && (
-                                        <div className="form-group form-group-inline">
-                                            <div className="form-label">&nbsp;</div>
+                                            {connection?.id && (
+                                                <div className="form-group">
+                                                    <div className="form-label" />
+                                                    <button
+                                                        type="button"
+                                                        className="button button-default button-sm"
+                                                        onClick={() => resetToken()}>
+                                                        <em className="mdi mdi-refresh icon-start" />
+                                                        {translate('bi_connection.buttons.generate_new_key')}
+                                                    </button>
+
+                                                    {!connection?.expired && (
+                                                        <div className="expiration-value">
+                                                            {`Verloopt ${connection?.expire_after_locale}`}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            )}
+
+                                            {connection?.expired && (
+                                                <div className="form-group">
+                                                    <div className="form-label">&nbsp;</div>
 
-                                            <div className="form-offset">
-                                                <div className="block block-info-box block-warning-box block-info-box-dashed">
-                                                    <em className="info-box-icon mdi mdi-alert-outline" />
+                                                    <div className="block block-info-box block-warning-box block-info-box-dashed">
+                                                        <em className="info-box-icon mdi mdi-alert-outline" />
 
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            <p>Token verlopen. Genereer een nieuwe.</p>
+                                                        <div className="info-box-content">
+                                                            <div className="block block-markdown">
+                                                                <p>Token verlopen. Genereer een nieuwe.</p>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
+                                            )}
+
+                                            <div className="form-group">
+                                                <div className="form-label">&nbsp;</div>
+
+                                                <InfoBox iconPosition={'top'}>
+                                                    <h4>Gegevens exporteren naar de BI-tool</h4>
+                                                    <ul>
+                                                        <li>Open de BI-tool en ga naar instellingen.</li>
+                                                        <li>
+                                                            Voeg een nieuwe gegevensbron of verbinding toe en selecteer
+                                                            de optie om verbinding te maken met een externe URL.
+                                                        </li>
+                                                        <li>Voer de bovenstaande URL in.</li>
+                                                        <li>Vul bij de header bovenstaande naam en sleutelcode in.</li>
+                                                    </ul>
+                                                </InfoBox>
                                             </div>
-                                        </div>
+                                        </Fragment>
                                     )}
-
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">&nbsp;</div>
-
-                                        <div className="form-offset">
-                                            <InfoBox iconPosition={'top'}>
-                                                <h4>Gegevens exporteren naar de BI-tool</h4>
-                                                <ul>
-                                                    <li>Open de BI-tool en ga naar instellingen.</li>
-                                                    <li>
-                                                        Voeg een nieuwe gegevensbron of verbinding toe en selecteer de
-                                                        optie om verbinding te maken met een externe URL.
-                                                    </li>
-                                                    <li>Voer de bovenstaande URL in.</li>
-                                                    <li>Vul bij de header bovenstaande naam en sleutelcode in.</li>
-                                                </ul>
-                                            </InfoBox>
-                                        </div>
-                                    </div>
-                                </Fragment>
-                            )}
+                                </div>
+                            </div>
                         </div>
                     )}
 
                     {filterValues.view_type === 'security' && (
                         <div className="card-section card-section-primary">
-                            <div className="form-group form-group-inline">
-                                <div className="form-label">{translate('bi_connection.labels.expiration_period')}</div>
-
-                                <div className="form-offset">
-                                    <FormGroupInfo
-                                        error={form.errors?.expiration_period}
-                                        info={
-                                            <p>
-                                                Kies een vervalperiode voor het authenticatietoken. Nadat het token is
-                                                verlopen, moet het opnieuw worden gegenereerd door te klikken op{' '}
-                                                {'"Vernieuwen"'}.
-                                            </p>
-                                        }>
-                                        <SelectControl
-                                            className="form-control"
-                                            propKey={'value'}
-                                            value={form.values.expiration_period}
-                                            options={expirationPeriods}
-                                            allowSearch={false}
-                                            onChange={(expiration_period: number) => {
-                                                form.update({ expiration_period });
-                                            }}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
-                            </div>
+                            <div className="row">
+                                <div className="col col-md-10 col-md-offset-2 col-xs-12">
+                                    <div className="form-group">
+                                        <div className="form-label">
+                                            {translate('bi_connection.labels.expiration_period')}
+                                        </div>
+
+                                        <FormGroupInfo
+                                            error={form.errors?.expiration_period}
+                                            info={
+                                                <p>
+                                                    Kies een vervalperiode voor het authenticatietoken. Nadat het token
+                                                    is verlopen, moet het opnieuw worden gegenereerd door te klikken op{' '}
+                                                    {'"Vernieuwen"'}.
+                                                </p>
+                                            }>
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey={'value'}
+                                                value={form.values.expiration_period}
+                                                options={expirationPeriods}
+                                                allowSearch={false}
+                                                onChange={(expiration_period: number) => {
+                                                    form.update({ expiration_period });
+                                                }}
+                                            />
+                                        </FormGroupInfo>
+                                    </div>
 
-                            <div className="form-group form-group-inline">
-                                <div className="form-label">IP-adressen op de witte lijst</div>
+                                    <div className="form-group">
+                                        <div className="form-label">IP-adressen op de witte lijst</div>
+
+                                        {ips?.map((ipItem, index: number) => (
+                                            <div className="form-group" key={index}>
+                                                <div className="form-group-info">
+                                                    <div className="form-group-info-control">
+                                                        <input
+                                                            type="text"
+                                                            className="form-control"
+                                                            value={ipItem.value}
+                                                            placeholder={`${translate('bi_connection.labels.ip')} ${
+                                                                index + 1
+                                                            }`}
+                                                            onChange={(e) => {
+                                                                setIps((ips) => {
+                                                                    ips[index].value = e.target.value;
+                                                                    return [...ips];
+                                                                });
+                                                            }}
+                                                        />
+                                                    </div>
+
+                                                    <div className="form-group-info-button">
+                                                        <div
+                                                            className="button button-default button-icon pull-left"
+                                                            onClick={() => removeIp(index)}>
+                                                            <em className="mdi mdi-trash-can-outline" />
+                                                        </div>
+                                                    </div>
+                                                </div>
 
-                                <div className="form-offset">
-                                    {ips?.map((ipItem, index: number) => (
-                                        <div className="form-group" key={index}>
-                                            <div className="form-group-info">
-                                                <div className="form-group-info-control">
+                                                <FormError error={form.errors?.[`ips.${index}`]} />
+
+                                                {index == ips?.length - 1 && (
+                                                    <div className="flex-row">
+                                                        <div className="flex-col">
+                                                            <div className="form-group-divider" />
+                                                        </div>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        ))}
+
+                                        <div className="form-group">
+                                            <div className="flex-row">
+                                                <div className="flex-col flex-grow">
                                                     <input
                                                         type="text"
                                                         className="form-control"
-                                                        value={ipItem.value}
+                                                        value={ip}
+                                                        onChange={(e) => setIp(e.target.value)}
                                                         placeholder={`${translate('bi_connection.labels.ip')} ${
-                                                            index + 1
+                                                            ips?.length + 1
                                                         }`}
-                                                        onChange={(e) => {
-                                                            setIps((ips) => {
-                                                                ips[index].value = e.target.value;
-                                                                return [...ips];
-                                                            });
-                                                        }}
                                                     />
                                                 </div>
-
-                                                <div className="form-group-info-button">
-                                                    <div
-                                                        className="button button-default button-icon pull-left"
-                                                        onClick={() => removeIp(index)}>
-                                                        <em className="mdi mdi-trash-can-outline" />
+                                                <div className="flex-col">
+                                                    <div className="button button-primary nowrap" onClick={addIp}>
+                                                        IP-adres toevoegen
                                                     </div>
                                                 </div>
                                             </div>
-
-                                            <FormError error={form.errors?.[`ips.${index}`]} />
-
-                                            {index == ips?.length - 1 && (
-                                                <div className="flex-row">
-                                                    <div className="flex-col">
-                                                        <div className="form-group-divider" />
-                                                    </div>
-                                                </div>
-                                            )}
+                                            <FormError error={ipError} />
+                                            <FormError error={form.errors?.ips} />
                                         </div>
-                                    ))}
 
-                                    <div className="form-group">
-                                        <div className="flex-row">
-                                            <div className="flex-col flex-grow">
-                                                <input
-                                                    type="text"
-                                                    className="form-control"
-                                                    value={ip}
-                                                    onChange={(e) => setIp(e.target.value)}
-                                                    placeholder={`${translate('bi_connection.labels.ip')} ${
-                                                        ips?.length + 1
-                                                    }`}
-                                                />
-                                            </div>
-                                            <div className="flex-col">
-                                                <div className="button button-primary nowrap" onClick={addIp}>
-                                                    IP-adres toevoegen
-                                                </div>
-                                            </div>
+                                        <div className="form-group">
+                                            <InfoBox iconPosition={'top'} iconColor={'primary'}>
+                                                <p>
+                                                    Het whitelisten van IP-adressen is een veiligheidsmaatregel om de
+                                                    lijst van gebruikers te beperken die gegevens van het account kunnen
+                                                    downloaden. Bij het gebruik van een zelf gehoste BI-tool of
+                                                    handmatige gegevensexport, vraag dan de IT-afdeling om het IP-adres.
+                                                    Bij het gebruik van een BI-tool als SaaS-product is het whitelisten
+                                                    van IP-adressen niet van toepassing.
+                                                </p>
+                                            </InfoBox>
                                         </div>
-                                        <FormError error={ipError} />
-                                        <FormError error={form.errors?.ips} />
-                                    </div>
-
-                                    <div className="form-group">
-                                        <InfoBox iconPosition={'top'} iconColor={'primary'}>
-                                            <p>
-                                                Het whitelisten van IP-adressen is een veiligheidsmaatregel om de lijst
-                                                van gebruikers te beperken die gegevens van het account kunnen
-                                                downloaden. Bij het gebruik van een zelf gehoste BI-tool of handmatige
-                                                gegevensexport, vraag dan de IT-afdeling om het IP-adres. Bij het
-                                                gebruik van een BI-tool als SaaS-product is het whitelisten van
-                                                IP-adressen niet van toepassing.
-                                            </p>
-                                        </InfoBox>
                                     </div>
                                 </div>
                             </div>
diff --git a/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx b/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx
deleted file mode 100644
index ea399b6b8..000000000
--- a/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { useState, useCallback, useEffect, Fragment } from 'react';
-import { useFundService } from '../../../services/FundService';
-import Fund from '../../../props/models/Fund';
-import CSVUpload from './elements/CSVUpload';
-import { useRecordTypeService } from '../../../services/RecordTypeService';
-import RecordType from '../../../props/models/RecordType';
-import PrevalidatedTable from './elements/PrevalidatedTable';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
-import useTranslate from '../../../hooks/useTranslate';
-import LoadingCard from '../../elements/loading-card/LoadingCard';
-import { hasPermission } from '../../../helpers/utils';
-import useSetProgress from '../../../hooks/useSetProgress';
-import SelectControl from '../../elements/select-control/SelectControl';
-import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
-
-export default function CsvValidations() {
-    const translate = useTranslate();
-    const setProgress = useSetProgress();
-
-    const fundService = useFundService();
-    const recordTypeService = useRecordTypeService();
-
-    const [fund, setFund] = useState<Fund>(null);
-    const [funds, setFunds] = useState<Array<Fund>>(null);
-    const [recordTypes, setRecordTypes] = useState<Array<RecordType>>(null);
-
-    const [filters, setFilters] = useState({});
-
-    const fetchFunds = useCallback(() => {
-        setProgress(0);
-
-        fundService
-            .listPublic({ state: 'active_paused_and_closed' })
-            .then((res) => {
-                const list = res.data.data.filter((fund) => hasPermission(fund.organization, 'validate_records'));
-                setFund(list[0] || null);
-                setFunds(list);
-            })
-            .finally(() => setProgress(100));
-    }, [fundService, setProgress]);
-
-    const fetchRecordTypes = useCallback(() => {
-        setProgress(0);
-
-        recordTypeService
-            .list()
-            .then((res) => setRecordTypes(res.data))
-            .finally(() => setProgress(100));
-    }, [recordTypeService, setProgress]);
-
-    useEffect(() => {
-        fetchFunds();
-    }, [fetchFunds]);
-
-    useEffect(() => {
-        fetchRecordTypes();
-    }, [fetchRecordTypes]);
-
-    if (!funds) {
-        return <LoadingCard />;
-    }
-
-    return (
-        <Fragment>
-            <div className="card form">
-                <div className="card-header">
-                    <div className="card-title flex-grow">{translate('csv_validation.header.title')}</div>
-
-                    <div className="card-header-filters">
-                        <div className="block block-inline-filters">
-                            <div className="form">
-                                <div className="form-group">
-                                    <SelectControl
-                                        className="form-control inline-filter-control"
-                                        options={funds}
-                                        value={fund}
-                                        placeholder={translate('vouchers.labels.fund')}
-                                        allowSearch={false}
-                                        onChange={(fund: Fund) => setFund(fund)}
-                                        optionsComponent={SelectControlOptionsFund}
-                                        dusk="prevalidationSelectFund"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                {fund && fund?.state != 'closed' && (
-                    <CSVUpload
-                        fund={fund}
-                        recordTypes={recordTypes}
-                        onUpdated={() => setFilters((filters) => ({ ...filters }))}
-                    />
-                )}
-            </div>
-
-            {fund && <PrevalidatedTable fund={fund} recordTypes={recordTypes} externalFilters={filters} />}
-
-            {funds?.length == 0 && (
-                <EmptyCard
-                    description={
-                        'U bent geen beoordelaar voor een fonds dat actief is om aanvragers aan toe te voegen.'
-                    }
-                />
-            )}
-        </Fragment>
-    );
-}
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index 7b18cb439..c54df52da 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -28,6 +28,7 @@ import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import useEmployeeExporter from '../../../services/exporters/useEmployeeExporter';
+import TableDateTime from '../../elements/tables/elements/TableDateTime';
 
 export default function Employees() {
     const isProviderPanel = useIsProviderPanel();
@@ -336,6 +337,12 @@ export default function Employees() {
                                                     </div>
                                                 )}
                                             </td>
+                                            <td>
+                                                <TableDateTime value={employee.created_at_locale} />
+                                            </td>
+                                            <td>
+                                                <TableDateTime value={employee.last_activity_at_locale} />
+                                            </td>
 
                                             {activeOrganization.identity_address != employee.identity_address ? (
                                                 <td className={'table-td-actions text-right'}>
diff --git a/react/src/dashboard/components/pages/feedback/Feedback.tsx b/react/src/dashboard/components/pages/feedback/Feedback.tsx
index f87202762..947b14687 100644
--- a/react/src/dashboard/components/pages/feedback/Feedback.tsx
+++ b/react/src/dashboard/components/pages/feedback/Feedback.tsx
@@ -72,26 +72,30 @@ export default function Feedback() {
 
                         {/* Description */}
                         <div className="card-section card-section-primary">
-                            <div className="block block-information">
-                                <em className="mdi mdi-information block-information-icon"></em>
-                                <div className="block-information-info">
-                                    Bedankt voor het delen van de feedback. Hierdoor kunnen we het systeem verder
-                                    verbeteren.
-                                    <br />
-                                    {envData?.config?.feedback_email && (
-                                        <span>
-                                            Heb je vragen over het gebruik en wil je graag hulp? Neem dan contact op met
-                                            onze helpdesk via !{envData?.config?.feedback_email}
-                                        </span>
-                                    )}
+                            <div className="row">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                    <div className="block block-information">
+                                        <em className="mdi mdi-information block-information-icon"></em>
+                                        <div className="block-information-info">
+                                            Bedankt voor het delen van de feedback. Hierdoor kunnen we het systeem
+                                            verder verbeteren.
+                                            <br />
+                                            {envData?.config?.feedback_email && (
+                                                <span>
+                                                    Heb je vragen over het gebruik en wil je graag hulp? Neem dan
+                                                    contact op met onze helpdesk via !{envData?.config?.feedback_email}
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
 
                         <div className="card-section card-section-primary">
                             <div className="row">
-                                <div className="col col-lg-9 col-xs-12">
-                                    <div className="form-group form-group-inline">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">
                                             {translate('components.feedback.labels.title')}
                                         </label>
@@ -107,7 +111,7 @@ export default function Feedback() {
                                         <FormError error={form.errors?.title} />
                                     </div>
 
-                                    <div className="form-group form-group-inline">
+                                    <div className="form-group">
                                         <label className="form-label">
                                             {translate('components.feedback.labels.urgency')}
                                         </label>
@@ -123,7 +127,7 @@ export default function Feedback() {
                                         <FormError error={form.errors?.urgency} />
                                     </div>
 
-                                    <div className="form-group form-group-inline">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">
                                             {translate('components.feedback.labels.content')}
                                         </label>
@@ -138,11 +142,7 @@ export default function Feedback() {
                                         <FormError error={form.errors?.content} />
                                     </div>
 
-                                    <div className="form-group form-group-inline">
-                                        <label htmlFor="" className="form-label">
-                                            {translate('components.feedback.labels.contact')}
-                                        </label>
-
+                                    <div className="form-group">
                                         <CheckboxControl
                                             id="use_email"
                                             title={translate('components.feedback.labels.use_customer_email')}
@@ -153,7 +153,7 @@ export default function Feedback() {
                                     </div>
 
                                     {form.values?.use_customer_email && (
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label form-label-required">
                                                 {translate('components.feedback.labels.email')}
                                             </label>
@@ -200,9 +200,9 @@ export default function Feedback() {
 
                         <div className="card-section card-section-primary">
                             <div className="row">
-                                <div className="col col-lg-9">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                     <div className="form-data-preview">
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('components.feedback.labels.title')}
                                             </label>
@@ -210,7 +210,7 @@ export default function Feedback() {
                                         </div>
 
                                         {form.values.urgency && (
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label">
                                                     {translate('components.feedback.labels.urgency')}
                                                 </label>
@@ -225,7 +225,7 @@ export default function Feedback() {
                                         )}
 
                                         {form.values?.content && (
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label">
                                                     {translate('components.feedback.labels.content')}
                                                 </label>
@@ -234,7 +234,7 @@ export default function Feedback() {
                                         )}
 
                                         {form.values?.use_customer_email && (
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label">
                                                     {translate('components.feedback.labels.email')}
                                                 </label>
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 024e2ca50..1c3d6ed5f 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
@@ -17,6 +17,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';
 
 interface SelectionItem {
     ids?: Array<number>;
@@ -496,10 +497,7 @@ export default function FinancialFilters({
                     {Object.values(selections).map((selection: SelectionItem) => (
                         <Fragment key={selection.type}>
                             {(!selection.ids || selection.ids.length > 0) && (
-                                <div
-                                    className={`label label-primary-light label-round label-lg ${
-                                        selection.items.length == 0 ? 'disabled' : ''
-                                    }`}>
+                                <Label type={'primary_light'} disabled={selection.items.length == 0}>
                                     <span>{strLimit(selection.names, 60)}</span>
                                     {selection.items.length > 0 && (
                                         <em
@@ -507,7 +505,7 @@ export default function FinancialFilters({
                                             onClick={() => resetSelection(selection.type)}
                                         />
                                     )}
-                                </div>
+                                </Label>
                             )}
                         </Fragment>
                     ))}
diff --git a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
index bd7360e4f..b9be6cfb6 100644
--- a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
@@ -126,7 +126,7 @@ export default function FundBackofficeEdit() {
         [formUpdate],
     );
 
-    const selectCertificateFile = useCallback((e) => {
+    const selectCertificateFile = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         e?.preventDefault();
         e?.stopPropagation();
 
@@ -242,8 +242,8 @@ export default function FundBackofficeEdit() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">Status</label>
                                     <label className="form-toggle form-label" htmlFor="backoffice_enabled">
                                         <input
@@ -261,7 +261,7 @@ export default function FundBackofficeEdit() {
                                     </label>
                                 </div>
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="backoffice_url">
                                         API url
                                     </label>
@@ -278,7 +278,7 @@ export default function FundBackofficeEdit() {
                                     />
                                     <FormError error={form.errors.backoffice_url} />
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="backoffice_key">
                                         API sleutel
                                     </label>
@@ -296,61 +296,61 @@ export default function FundBackofficeEdit() {
                                     <FormError error={form.errors.backoffice_key} />
                                 </div>
 
-                                <div className="form-group form-group-inline tooltipped">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Upload .PEM bestand</label>
-                                    <div className="form-offset">
-                                        {form.values.backoffice_certificate && (
-                                            <pre className="code">
-                                                {showCertificate
-                                                    ? form.values.backoffice_certificate
-                                                    : 'Certificaat geselecteerd'}
-                                            </pre>
-                                        )}
 
-                                        <div className="button-group">
-                                            <input
-                                                type="file"
-                                                accept={'.pem'}
-                                                hidden={true}
-                                                onChange={onFileChange}
-                                                ref={fileInput}
-                                            />
+                                    {form.values.backoffice_certificate && (
+                                        <pre className="code">
+                                            {showCertificate
+                                                ? form.values.backoffice_certificate
+                                                : 'Certificaat geselecteerd'}
+                                        </pre>
+                                    )}
 
-                                            <div
-                                                className="button button-primary"
-                                                onClick={(e) => selectCertificateFile(e)}>
-                                                <em className="mdi mdi-upload icon-start" />
-                                                Upload bestand
-                                            </div>
+                                    <div className="button-group">
+                                        <input
+                                            type="file"
+                                            accept={'.pem'}
+                                            hidden={true}
+                                            onChange={onFileChange}
+                                            ref={fileInput}
+                                        />
+
+                                        <div
+                                            className="button button-primary"
+                                            onClick={(e) => selectCertificateFile(e)}>
+                                            <em className="mdi mdi-upload icon-start" />
+                                            Upload bestand
+                                        </div>
 
-                                            {form.values.backoffice_certificate && (
-                                                <Fragment>
+                                        {form.values.backoffice_certificate && (
+                                            <Fragment>
+                                                <div
+                                                    className="button button-danger"
+                                                    onClick={() => form.update({ backoffice_certificate: '' })}>
+                                                    <em className="mdi mdi-delete-outline icon-start" />
+                                                    Verwijderen bestand
+                                                </div>
+
+                                                {showCertificate ? (
                                                     <div
-                                                        className="button button-danger"
-                                                        onClick={() => form.update({ backoffice_certificate: '' })}>
-                                                        <em className="mdi mdi-delete-outline icon-start" />
-                                                        Verwijderen bestand
+                                                        className="button button-text button-text-primary"
+                                                        onClick={() => setShowCertificate(!showCertificate)}>
+                                                        <em className="mdi mdi-eye-off-outline icon-start" />
+                                                        Verberg certificaat
                                                     </div>
-
-                                                    {showCertificate ? (
-                                                        <div
-                                                            className="button button-text button-text-primary"
-                                                            onClick={() => setShowCertificate(!showCertificate)}>
-                                                            <em className="mdi mdi-eye-off-outline icon-start" />
-                                                            Verberg certificaat
-                                                        </div>
-                                                    ) : (
-                                                        <div
-                                                            className="button button-text button-text-primary"
-                                                            onClick={() => setShowCertificate(!showCertificate)}>
-                                                            <em className="mdi mdi-eye-outline icon-start" />
-                                                            Bekijk certificaat
-                                                        </div>
-                                                    )}
-                                                </Fragment>
-                                            )}
-                                        </div>
+                                                ) : (
+                                                    <div
+                                                        className="button button-text button-text-primary"
+                                                        onClick={() => setShowCertificate(!showCertificate)}>
+                                                        <em className="mdi mdi-eye-outline icon-start" />
+                                                        Bekijk certificaat
+                                                    </div>
+                                                )}
+                                            </Fragment>
+                                        )}
                                     </div>
+
                                     <FormError error={form.errors.backoffice_key} />
                                     <Tooltip text="Upload het benodigde certificaat voor het tot stand brengen van een “two-sided” SSL-verbinding tussen het platform en de externe API." />
                                 </div>
@@ -360,51 +360,49 @@ export default function FundBackofficeEdit() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Downtime pad</label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <SelectControl
-                                                    className={'form-control'}
-                                                    options={fallbackOptions}
-                                                    propKey={'value'}
-                                                    propValue={'label'}
-                                                    allowSearch={false}
-                                                    value={form.values?.backoffice_fallback}
-                                                    onChange={(value?: boolean) => {
-                                                        form.update({ backoffice_fallback: value });
-                                                    }}
-                                                />
-                                            </div>
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={`button button-default button-icon pull-left ${
-                                                        showInfoBlock ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setShowInfoBlock(!showInfoBlock)}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <SelectControl
+                                                className={'form-control'}
+                                                options={fallbackOptions}
+                                                propKey={'value'}
+                                                propValue={'label'}
+                                                allowSearch={false}
+                                                value={form.values?.backoffice_fallback}
+                                                onChange={(value?: boolean) => {
+                                                    form.update({ backoffice_fallback: value });
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={`button button-default button-icon pull-left ${
+                                                    showInfoBlock ? 'active' : ''
+                                                }`}
+                                                onClick={() => setShowInfoBlock(!showInfoBlock)}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
+                                    </div>
 
-                                        {showInfoBlock && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                <div className="info-box-content">
-                                                    <div className="block block-markdown">
-                                                        <p>
-                                                            Stel in wat de gebruiker ziet als de externe API downtime
-                                                            heeft.
-                                                        </p>
-                                                    </div>
+                                    {showInfoBlock && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            <div className="info-box-content">
+                                                <div className="block block-markdown">
+                                                    <p>
+                                                        Stel in wat de gebruiker ziet als de externe API downtime heeft.
+                                                    </p>
                                                 </div>
                                             </div>
-                                        )}
+                                        </div>
+                                    )}
 
-                                        <FormError error={form.errors.backoffice_fallback} />
-                                    </div>
+                                    <FormError error={form.errors.backoffice_fallback} />
                                 </div>
                             </div>
                         </div>
@@ -412,52 +410,51 @@ export default function FundBackofficeEdit() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">Ineligibility policy</label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <SelectControl
-                                                    className={'form-control'}
-                                                    options={ineligiblePolicyOptions}
-                                                    propKey={'value'}
-                                                    propValue={'label'}
-                                                    allowSearch={false}
-                                                    value={form.values?.backoffice_ineligible_policy}
-                                                    onChange={(value?: string) => {
-                                                        form.update({ backoffice_ineligible_policy: value });
-                                                    }}
-                                                />
-                                            </div>
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={`button button-default button-icon pull-left ${
-                                                        showPolicyInfoBlock ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setShowPolicyInfoBlock(!showPolicyInfoBlock)}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <SelectControl
+                                                className={'form-control'}
+                                                options={ineligiblePolicyOptions}
+                                                propKey={'value'}
+                                                propValue={'label'}
+                                                allowSearch={false}
+                                                value={form.values?.backoffice_ineligible_policy}
+                                                onChange={(value?: string) => {
+                                                    form.update({ backoffice_ineligible_policy: value });
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={`button button-default button-icon pull-left ${
+                                                    showPolicyInfoBlock ? 'active' : ''
+                                                }`}
+                                                onClick={() => setShowPolicyInfoBlock(!showPolicyInfoBlock)}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
+                                    </div>
 
-                                        {showPolicyInfoBlock && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                <div className="info-box-content">
-                                                    <div className="block block-markdown">
-                                                        <p>What should happen when the requester is not eligible.</p>
-                                                    </div>
+                                    {showPolicyInfoBlock && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            <div className="info-box-content">
+                                                <div className="block block-markdown">
+                                                    <p>What should happen when the requester is not eligible.</p>
                                                 </div>
                                             </div>
-                                        )}
+                                        </div>
+                                    )}
 
-                                        <FormError error={form.errors.backoffice_ineligible_policy} />
-                                    </div>
+                                    <FormError error={form.errors.backoffice_ineligible_policy} />
                                 </div>
 
                                 {form.values.backoffice_ineligible_policy == 'redirect' && (
-                                    <div className="form-group form-group-inline">
+                                    <div className="form-group">
                                         <label className="form-label">Redirect url</label>
                                         <input
                                             className="form-control"
diff --git a/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx b/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
index fa3630b30..e35cb88f5 100644
--- a/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
@@ -260,60 +260,56 @@ export default function FundProviderProductSubsidyEdit() {
                     </div>
                     <div className="card-section card-section-primary form">
                         <div className="row">
-                            <div className="col col-lg-4 col-xs-12">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                 <div className="subsidy-form-content">
                                     <div className="form">
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 Totaal aantal
                                                 <Tooltip
                                                     text={`Totaal aantal aanbiedingen dat vanuit ${fund.name} gebruikt mag worden.`}
                                                 />
                                             </div>
-                                            <div className="form-offset">
-                                                <div className="col col-lg-12">
-                                                    <div className="form-value-placeholder text-right">
-                                                        {deal.limit_total_unlimited ? 'Onbeperkt' : deal.limit_total}
-                                                    </div>
+
+                                            <div className="col col-lg-12">
+                                                <div className="form-value-placeholder text-right">
+                                                    {deal.limit_total_unlimited ? 'Onbeperkt' : deal.limit_total}
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 Limiet per aanvrager
                                                 <Tooltip text="Hoevaak mag er per inwoner gebruik gemaakt worden van deze aanbieding." />
                                             </div>
-                                            <div className="form-offset">
-                                                <div className="col col-lg-12">
-                                                    <div className="form-value-placeholder text-right">
-                                                        {deal.limit_per_identity}
-                                                    </div>
+
+                                            <div className="col col-lg-12">
+                                                <div className="form-value-placeholder text-right">
+                                                    {deal.limit_per_identity}
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 Bijdrage
                                                 <Tooltip text="Volledige bijdrage vanuit de sponsor" />
                                             </div>
-                                            <div className="form-offset">
-                                                <div className="col col-lg-12">
-                                                    <div className="form-value-placeholder text-right">
-                                                        {currencyFormat(parseFloat(deal.amount))}
-                                                    </div>
+
+                                            <div className="col col-lg-12">
+                                                <div className="form-value-placeholder text-right">
+                                                    {currencyFormat(parseFloat(deal.amount))}
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <div className="form-label">
                                                 Gebruikt
                                                 <Tooltip text="Hoeveel tegoed (tot zijn limiet) heeft de aanvrager gebruikt." />
                                             </div>
-                                            <div className="form-offset">
-                                                <div className="col col-lg-12">
-                                                    <div className="form-value-placeholder text-right">
-                                                        {deal.voucher_transactions_count}
-                                                    </div>
+
+                                            <div className="col col-lg-12">
+                                                <div className="form-value-placeholder text-right">
+                                                    {deal.voucher_transactions_count}
                                                 </div>
                                             </div>
                                         </div>
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 2f2346d0d..e401148b8 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
@@ -23,6 +23,7 @@ import useTranslate from '../../../hooks/useTranslate';
 import ProductDetailsBlock from '../products-view/elements/ProductDetailsBlock';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
 import usePushApiError from '../../../hooks/usePushApiError';
+import Label from '../../elements/image_cropper/Label';
 
 export default function FundProviderProductView() {
     const { id, fundId, fundProviderId } = useParams();
@@ -305,7 +306,7 @@ export default function FundProviderProductView() {
                             <Fragment>
                                 {fundProvider.fund.type == 'budget' && (
                                     <div className="form">
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <ToggleControl
                                                 checked={fundProvider.allow_products || productAllowed}
                                                 disabled={fundProvider.allow_products}
@@ -333,13 +334,13 @@ export default function FundProviderProductView() {
                                         )}
 
                                         {product.is_available && productAllowed && (
-                                            <div className="tag tag-success nowrap">
+                                            <Label type="success" className="nowrap">
                                                 {translate('product.buttons.subsidy_active')}
                                                 <em
                                                     className="mdi mdi-close icon-end clickable"
                                                     onClick={() => disableProviderProduct(product)}
                                                 />
-                                            </div>
+                                            </Label>
                                         )}
                                     </Fragment>
                                 )}
@@ -509,9 +510,9 @@ export default function FundProviderProductView() {
                                                 </td>
                                                 <td>
                                                     {item.active ? (
-                                                        <div className="tag tag-success">Actief</div>
+                                                        <Label type="success">Actief</Label>
                                                     ) : (
-                                                        <div className="tag tag-default">Afgelopen</div>
+                                                        <Label type="default">Afgelopen</Label>
                                                     )}
                                                 </td>
                                                 {!(fund.type == 'subsidies' || item.active) ? (
diff --git a/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx b/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
index b7b683357..a0a592767 100644
--- a/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
+++ b/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
@@ -121,210 +121,198 @@ export default function FundProviderProductEditor({
                 </div>
                 <div className="card-section card-section-primary form">
                     <div className="row">
-                        <div className="col col-lg-8 col-md-12">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <Tooltip
                                     text={`Totaal aantal aanbiedingen dat vanuit ${fund.name} gebruikt mag worden`}
                                 />
                                 <div className="form-label form-label-required">Totaal aantal</div>
-                                <div className="form-offset">
+
+                                <div className="row">
+                                    <div className="col col-lg-6 col-xs-12">
+                                        {product.unlimited_stock && form.values.limit_total_unlimited ? (
+                                            <input className="form-control" disabled={true} value="Ongelimiteerd" />
+                                        ) : (
+                                            <input
+                                                className="form-control"
+                                                required={true}
+                                                value={form.values.limit_total || ''}
+                                                onChange={(e) => {
+                                                    form.update({
+                                                        limit_total: e.target.value ? parseFloat(e.target.value) : null,
+                                                    });
+                                                }}
+                                                type="number"
+                                                placeholder="Totaal aanbod"
+                                                min={1}
+                                                max={product.unlimited_stock ? '' : product.stock_amount}
+                                            />
+                                        )}
+                                        <FormError error={form.errors['enable_products.0.limit_total']} />
+
+                                        {product.unlimited_stock ? (
+                                            <div className="form-limit">Ongelimiteerd</div>
+                                        ) : (
+                                            <div className="form-limit">Limiet 1/{product.stock_amount}</div>
+                                        )}
+                                    </div>
+                                    <div className="col col-lg-6 col-xs-12">
+                                        {product.unlimited_stock && (
+                                            <label className="checkbox" htmlFor="unlimited_stock_subsidy">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={form.values.limit_total_unlimited}
+                                                    onChange={(e) => {
+                                                        form.update({ limit_total_unlimited: e.target.checked });
+                                                    }}
+                                                    id="unlimited_stock_subsidy"
+                                                />
+                                                <div className="checkbox-label">
+                                                    <div className="checkbox-box">
+                                                        <div className="mdi mdi-check" />
+                                                    </div>
+                                                    Onbeperkt
+                                                </div>
+                                            </label>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="form-group tooltipped">
+                                <Tooltip text="Hoevaak mag er per inwoner gebruik gemaakt worden van deze aanbieding?" />
+                                <div className="form-label form-label-required">Aantal per aanvrager</div>
+
+                                <div className="row">
+                                    <div className="col col-lg-6 col-xs-12">
+                                        <input
+                                            className="form-control"
+                                            required={true}
+                                            value={form.values.limit_per_identity || ''}
+                                            onChange={(e) =>
+                                                form.update({
+                                                    limit_per_identity: e.target.value
+                                                        ? parseFloat(e.target.value)
+                                                        : null,
+                                                })
+                                            }
+                                            type="number"
+                                            placeholder="Limiet per aanvrager"
+                                            min={1}
+                                            max={product.unlimited_stock ? '' : product.stock_amount}
+                                        />
+                                        <FormError error={form.errors['enable_products.0.limit_per_identity']} />
+
+                                        {product.unlimited_stock ? (
+                                            <div className="form-limit">Ongelimiteerd</div>
+                                        ) : (
+                                            <div className="form-limit">Limiet 1/{product.stock_amount}</div>
+                                        )}
+                                    </div>
+                                    <div className="col col-lg-6 col-xs-12" />
+                                </div>
+                            </div>
+
+                            {fund.type == 'subsidies' && (
+                                <div className="form-group tooltipped">
+                                    <Tooltip text="Volledige bijdrage vanuit de sponsor (voor de inwoner is het gratis)" />
+                                    <div className="form-label form-label-required">Bijdrage</div>
+
                                     <div className="row">
                                         <div className="col col-lg-6 col-xs-12">
-                                            {product.unlimited_stock && form.values.limit_total_unlimited ? (
-                                                <input className="form-control" disabled={true} value="Ongelimiteerd" />
+                                            {form.values.gratis ? (
+                                                <input className="form-control" disabled={true} value={product.price} />
                                             ) : (
                                                 <input
                                                     className="form-control"
-                                                    required={true}
-                                                    value={form.values.limit_total || ''}
+                                                    disabled={form.values.gratis}
+                                                    value={form.values.amount}
                                                     onChange={(e) => {
                                                         form.update({
-                                                            limit_total: e.target.value
-                                                                ? parseFloat(e.target.value)
-                                                                : null,
+                                                            amount: e.target.value ? parseFloat(e.target.value) : 0,
                                                         });
                                                     }}
                                                     type="number"
-                                                    placeholder="Totaal aanbod"
-                                                    min={1}
-                                                    max={product.unlimited_stock ? '' : product.stock_amount}
+                                                    placeholder="Bijdrage"
+                                                    step=".05"
+                                                    min={0}
                                                 />
                                             )}
-                                            <FormError error={form.errors['enable_products.0.limit_total']} />
-
-                                            {product.unlimited_stock ? (
-                                                <div className="form-limit">Ongelimiteerd</div>
-                                            ) : (
-                                                <div className="form-limit">Limiet 1/{product.stock_amount}</div>
-                                            )}
+                                            <FormError error={form.errors['enable_products.0.amount']} />
                                         </div>
                                         <div className="col col-lg-6 col-xs-12">
-                                            {product.unlimited_stock && (
-                                                <label className="checkbox" htmlFor="unlimited_stock_subsidy">
+                                            {(product.price_type === 'free' || product.price_type === 'regular') && (
+                                                <label className="checkbox" htmlFor="subsidie">
                                                     <input
                                                         type="checkbox"
-                                                        checked={form.values.limit_total_unlimited}
-                                                        onChange={(e) => {
-                                                            form.update({ limit_total_unlimited: e.target.checked });
-                                                        }}
-                                                        id="unlimited_stock_subsidy"
+                                                        checked={form.values.gratis}
+                                                        onChange={(e) => form.update({ gratis: e.target.checked })}
+                                                        id="subsidie"
                                                     />
                                                     <div className="checkbox-label">
                                                         <div className="checkbox-box">
-                                                            <div className="mdi mdi-check" />
+                                                            <em className="mdi mdi-check" />
                                                         </div>
-                                                        Onbeperkt
+                                                        Volledige bijdrage
                                                     </div>
                                                 </label>
                                             )}
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-
-                            <div className="form-group form-group-inline tooltipped">
-                                <Tooltip text="Hoevaak mag er per inwoner gebruik gemaakt worden van deze aanbieding?" />
-                                <div className="form-label form-label-required">Aantal per aanvrager</div>
-                                <div className="form-offset">
-                                    <div className="row">
-                                        <div className="col col-lg-6 col-xs-12">
-                                            <input
-                                                className="form-control"
-                                                required={true}
-                                                value={form.values.limit_per_identity || ''}
-                                                onChange={(e) =>
-                                                    form.update({
-                                                        limit_per_identity: e.target.value
-                                                            ? parseFloat(e.target.value)
-                                                            : null,
-                                                    })
-                                                }
-                                                type="number"
-                                                placeholder="Limiet per aanvrager"
-                                                min={1}
-                                                max={product.unlimited_stock ? '' : product.stock_amount}
-                                            />
-                                            <FormError error={form.errors['enable_products.0.limit_per_identity']} />
-
-                                            {product.unlimited_stock ? (
-                                                <div className="form-limit">Ongelimiteerd</div>
-                                            ) : (
-                                                <div className="form-limit">Limiet 1/{product.stock_amount}</div>
-                                            )}
-                                        </div>
-                                        <div className="col col-lg-6 col-xs-12" />
-                                    </div>
-                                </div>
-                            </div>
-
-                            {fund.type == 'subsidies' && (
-                                <div className="form-group form-group-inline tooltipped">
-                                    <Tooltip text="Volledige bijdrage vanuit de sponsor (voor de inwoner is het gratis)" />
-                                    <div className="form-label form-label-required">Bijdrage</div>
-                                    <div className="form-offset">
-                                        <div className="row">
-                                            <div className="col col-lg-6 col-xs-12">
-                                                {form.values.gratis ? (
-                                                    <input
-                                                        className="form-control"
-                                                        disabled={true}
-                                                        value={product.price}
-                                                    />
-                                                ) : (
-                                                    <input
-                                                        className="form-control"
-                                                        disabled={form.values.gratis}
-                                                        value={form.values.amount}
-                                                        onChange={(e) => {
-                                                            form.update({
-                                                                amount: e.target.value ? parseFloat(e.target.value) : 0,
-                                                            });
-                                                        }}
-                                                        type="number"
-                                                        placeholder="Bijdrage"
-                                                        step=".05"
-                                                        min={0}
-                                                    />
-                                                )}
-                                                <FormError error={form.errors['enable_products.0.amount']} />
-                                            </div>
-                                            <div className="col col-lg-6 col-xs-12">
-                                                {(product.price_type === 'free' ||
-                                                    product.price_type === 'regular') && (
-                                                    <label className="checkbox" htmlFor="subsidie">
-                                                        <input
-                                                            type="checkbox"
-                                                            checked={form.values.gratis}
-                                                            onChange={(e) => form.update({ gratis: e.target.checked })}
-                                                            id="subsidie"
-                                                        />
-                                                        <div className="checkbox-label">
-                                                            <div className="checkbox-box">
-                                                                <em className="mdi mdi-check" />
-                                                            </div>
-                                                            Volledige bijdrage
-                                                        </div>
-                                                    </label>
-                                                )}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
                             )}
 
-                            <div className="form-group form-group-inline tooltipped">
+                            <div className="form-group tooltipped">
                                 <Tooltip text="Tot wanneer de subsidie geldig is. Kies de gewenste datum of de einddatum van het fonds." />
                                 <div className="form-label">Verloopdatum</div>
-                                <div className="form-offset">
-                                    <div className="row">
-                                        {form.values.expires_with_fund ? (
-                                            <div className="col col-lg-6 col-xs-12">
-                                                <input className="form-control" value={fund.end_date} disabled={true} />
-                                                <FormError error={form.errors['enable_products.0.expire_at']} />
-                                            </div>
-                                        ) : (
-                                            <div className="col col-lg-6 col-xs-12">
-                                                <DatePickerControl
-                                                    value={dateParse(form.values.expire_at)}
-                                                    placeholder={translate('jjjj-MM-dd')}
-                                                    onChange={(date) => form.update({ expire_at: dateFormat(date) })}
-                                                />
-                                                <FormError error={form.errors['enable_products.0.expire_at']} />
-                                            </div>
-                                        )}
 
+                                <div className="row">
+                                    {form.values.expires_with_fund ? (
                                         <div className="col col-lg-6 col-xs-12">
-                                            <label className="checkbox" htmlFor="expires_with_fund">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={form.values.expires_with_fund}
-                                                    onChange={(e) => {
-                                                        form.update({ expires_with_fund: e.target.checked });
-                                                    }}
-                                                    id="expires_with_fund"
-                                                />
-                                                <div className="checkbox-label">
-                                                    <div className="checkbox-box">
-                                                        <div className="mdi mdi-check" />
-                                                    </div>
-                                                    Verloopt met het fonds
-                                                </div>
-                                            </label>
+                                            <input className="form-control" value={fund.end_date} disabled={true} />
+                                            <FormError error={form.errors['enable_products.0.expire_at']} />
                                         </div>
+                                    ) : (
+                                        <div className="col col-lg-6 col-xs-12">
+                                            <DatePickerControl
+                                                value={dateParse(form.values.expire_at)}
+                                                placeholder={translate('jjjj-MM-dd')}
+                                                onChange={(date) => form.update({ expire_at: dateFormat(date) })}
+                                            />
+                                            <FormError error={form.errors['enable_products.0.expire_at']} />
+                                        </div>
+                                    )}
+
+                                    <div className="col col-lg-6 col-xs-12">
+                                        <label className="checkbox" htmlFor="expires_with_fund">
+                                            <input
+                                                type="checkbox"
+                                                checked={form.values.expires_with_fund}
+                                                onChange={(e) => {
+                                                    form.update({ expires_with_fund: e.target.checked });
+                                                }}
+                                                id="expires_with_fund"
+                                            />
+                                            <div className="checkbox-label">
+                                                <div className="checkbox-box">
+                                                    <div className="mdi mdi-check" />
+                                                </div>
+                                                Verloopt met het fonds
+                                            </div>
+                                        </label>
                                     </div>
                                 </div>
                             </div>
 
                             {form.errors['enable_products.0'] && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <div className="form-label">&nbsp;</div>
-                                    <div className="form-offset">
-                                        {form.errors['enable_products.0'].map((error: string, index: number) => (
-                                            <div className={'form-error'} key={index}>
-                                                {error}
-                                            </div>
-                                        ))}
-                                    </div>
+
+                                    {form.errors['enable_products.0'].map((error: string, index: number) => (
+                                        <div className={'form-error'} key={index}>
+                                            {error}
+                                        </div>
+                                    ))}
                                 </div>
                             )}
                         </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
index 670ed5a45..180693b34 100644
--- a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
@@ -17,6 +17,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';
 
 export default function FundProvider() {
     const { fundId, id } = useParams();
@@ -119,9 +120,9 @@ export default function FundProvider() {
                                     <div className="connection-content-title">
                                         Verbinding met betaalmethode toestaan
                                         {fundProvider.allow_extra_payments ? (
-                                            <div className="label label-success">Geaccepteerd</div>
+                                            <Label type="success">Geaccepteerd</Label>
                                         ) : (
-                                            <div className="label label-warning">Geweigerd</div>
+                                            <Label type="warning">Geweigerd</Label>
                                         )}
                                     </div>
                                     <div className="connection-content-info block block-tooltip-details block-tooltip-hover">
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
index d42ca6829..d5d365f17 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
@@ -13,6 +13,7 @@ import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct, { DealHistory } from '../../../../props/models/Sponsor/SponsorProduct';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import Label from '../../../elements/image_cropper/Label';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -143,13 +144,13 @@ export default function SubsidyFundProducts({
                                                 {product.is_available && product.allowed && (
                                                     <div className="flex flex-center">
                                                         <div className="flex-self-center">
-                                                            <div className="tag tag-success nowrap flex">
+                                                            <Label type="success" className={'nowrap flex'}>
                                                                 Subsidie actief
                                                                 <em
                                                                     className="mdi mdi-close icon-end clickable"
                                                                     onClick={() => disableProviderProduct(product)}
                                                                 />
-                                                            </div>
+                                                            </Label>
                                                             <div className="hidden" />
                                                         </div>
                                                     </div>
@@ -158,7 +159,9 @@ export default function SubsidyFundProducts({
                                                 {!product.is_available && (
                                                     <div className="flex flex-center">
                                                         <div className="flex-self-center">
-                                                            <div className="tag tag-text nowrap">Niet beschikbaar</div>
+                                                            <Label type="text" className="nowrap">
+                                                                Niet beschikbaar
+                                                            </Label>
                                                             <div className="hidden" />
                                                         </div>
                                                     </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
index c5ea540b5..6c37f6941 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
@@ -14,6 +14,7 @@ import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct, { DealHistory } from '../../../../props/models/Sponsor/SponsorProduct';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import Label from '../../../elements/image_cropper/Label';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -167,13 +168,13 @@ export default function SubsidyFundSponsorProducts({
                                                 {product.is_available && product.allowed && (
                                                     <div className="flex flex-center">
                                                         <div className="flex-self-center">
-                                                            <div className="tag tag-success nowrap flex">
+                                                            <Label type="success" className="nowrap flex">
                                                                 Subsidie actief
                                                                 <em
                                                                     className="mdi mdi-close icon-end clickable"
                                                                     onClick={() => disableProviderProduct(product)}
                                                                 />
-                                                            </div>
+                                                            </Label>
                                                             <div className="hidden" />
                                                         </div>
                                                     </div>
@@ -182,7 +183,9 @@ export default function SubsidyFundSponsorProducts({
                                                 {!product.is_available && (
                                                     <div className="flex flex-center">
                                                         <div className="flex-self-center">
-                                                            <div className="tag tag-text nowrap">Niet beschikbaar</div>
+                                                            <Label type={'text'} className="nowrap">
+                                                                Niet beschikbaar
+                                                            </Label>
                                                             <div className="hidden" />
                                                         </div>
                                                     </div>
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileBankAccount.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileBankAccount.tsx
index ce6c5978f..a0e93a9f5 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileBankAccount.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileBankAccount.tsx
@@ -78,8 +78,6 @@ export default function ModalEditProfileBankAccount({
                 </Fragment>
             }>
             <FormGroup
-                inline={true}
-                inlineSize={'lg'}
                 label={translate('identities.bank_account.iban_name.label')}
                 error={form.errors.name}
                 input={(id) => (
@@ -97,8 +95,6 @@ export default function ModalEditProfileBankAccount({
             />
 
             <FormGroup
-                inline={true}
-                inlineSize={'lg'}
                 label={translate('identities.bank_account.iban.label')}
                 error={form.errors.iban}
                 input={(id) => (
diff --git a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
index ee09018b7..f08bd4f27 100644
--- a/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/modals/ModalEditProfileRecords.tsx
@@ -99,8 +99,6 @@ export default function ModalEditProfileRecords({
                 return (
                     <FormGroup
                         key={index}
-                        inline={true}
-                        inlineSize={'lg'}
                         label={field.label}
                         input={(id) => (
                             <FormGroupInfo info={translate('identities.record_info.' + field.key)}>
@@ -120,8 +118,6 @@ export default function ModalEditProfileRecords({
                 return (
                     <Fragment key={recordType.key}>
                         <FormGroup
-                            inline={true}
-                            inlineSize={'lg'}
                             label={recordType.name}
                             error={form.errors?.[recordType.key]}
                             input={(id) => (
@@ -168,8 +164,6 @@ export default function ModalEditProfileRecords({
 
                         {recordType?.key === 'birth_date' && (
                             <FormGroup
-                                inline={true}
-                                inlineSize={'lg'}
                                 label={'Leeftijd'}
                                 input={(id) => (
                                     <FormGroupInfo info={translate('identities.record_info.age')}>
diff --git a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
index 8d00b5b07..54f25a5a5 100644
--- a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
+++ b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
@@ -11,6 +11,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';
 
 export default function PreferencesEmails() {
     const openModal = useOpenModal();
@@ -48,7 +49,7 @@ export default function PreferencesEmails() {
             .finally(() => setProgress(100));
     }, [identityEmailService, setProgress]);
 
-    const updateEmail = useCallback((email, data) => {
+    const updateEmail = useCallback((email: IdentityEmail, data: object) => {
         setEmails((emails) => {
             Object.assign(emails.data[emails.data.indexOf(email)], data);
 
@@ -57,7 +58,7 @@ export default function PreferencesEmails() {
     }, []);
 
     const resendVerification = useCallback(
-        (email) => {
+        (email: IdentityEmail) => {
             if (email['disabled']) {
                 return false;
             }
@@ -81,8 +82,8 @@ export default function PreferencesEmails() {
     );
 
     const makePrimary = useCallback(
-        (email) => {
-            if (email.disabled) {
+        (email: IdentityEmail) => {
+            if (email['disabled']) {
                 return false;
             }
 
@@ -100,8 +101,8 @@ export default function PreferencesEmails() {
     );
 
     const deleteEmail = useCallback(
-        (email) => {
-            if (email.disabled) {
+        (email: IdentityEmail) => {
+            if (email['disabled']) {
                 return false;
             }
 
@@ -207,19 +208,15 @@ export default function PreferencesEmails() {
                             </div>
                             <div className="user_email-actions">
                                 {email.primary && (
-                                    <label
-                                        data-dusk="identityEmailListItemPrimary"
-                                        className="label label-success label-round label-lg pull-left">
+                                    <Label dusk="identityEmailListItemPrimary" type="success" className="pull-left">
                                         Hoofd e-mailadres
-                                    </label>
+                                    </Label>
                                 )}
 
                                 {!email.verified && !email.primary && (
-                                    <label
-                                        data-dusk="identityEmailListItemNotVerified"
-                                        className="label label-default label-round label-lg pull-left">
+                                    <Label dusk="identityEmailListItemNotVerified" type="default" className="pull-left">
                                         Niet bevestigd
-                                    </label>
+                                    </Label>
                                 )}
 
                                 {!email.primary && (
diff --git a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
index dbc9a26fe..bdfa4c5c2 100644
--- a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
+++ b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
@@ -13,6 +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';
 
 export default function Security2FA() {
     const assetUrl = useAssetUrl();
@@ -131,11 +132,11 @@ export default function Security2FA() {
                             {provider_type.title}
                             <div className="auth-2fa-item-label">
                                 {!Object.keys(activeProvidersByKey).includes(provider_type.type) && (
-                                    <div className="label label-default">Uitgeschakeld</div>
+                                    <Label type="default">Uitgeschakeld</Label>
                                 )}
 
                                 {Object.keys(activeProvidersByKey).includes(provider_type.type) && (
-                                    <div className="label label-success">Ingeschakeld</div>
+                                    <Label type="success">Ingeschakeld</Label>
                                 )}
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
index 111a0fcdd..c553d3279 100644
--- a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
+++ b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
@@ -16,6 +16,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';
 
 export default function SecuritySessions() {
     const openModal = useOpenModal();
@@ -226,13 +227,13 @@ export default function SecuritySessions() {
 
                             {session.current && (
                                 <div className="session-label">
-                                    <div className="label label-round label-primary-light">Huidig</div>
+                                    <Label type="primary_light">Huidig</Label>
                                 </div>
                             )}
 
                             {session.active && !session.current && (
                                 <div className="session-label">
-                                    <div className="label label-round label-success">Online</div>
+                                    <Label type="success">Online</Label>
                                 </div>
                             )}
                         </div>
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
index a73a3ada8..fe737d8c6 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
@@ -208,18 +208,17 @@ export default function ImplementationsBlockEditorItem({
                                 </div>
                                 <div className="form-group">
                                     <label className="form-label form-label-required">Open knop koppeling in</label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            className="form-control"
-                                            propKey={'value'}
-                                            allowSearch={false}
-                                            value={block.button_target_blank}
-                                            onChange={(value: boolean) => {
-                                                onChange({ button_target_blank: value });
-                                            }}
-                                            options={buttonTargets}
-                                        />
-                                    </div>
+
+                                    <SelectControl
+                                        className="form-control"
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={block.button_target_blank}
+                                        onChange={(value: boolean) => {
+                                            onChange({ button_target_blank: value });
+                                        }}
+                                        options={buttonTargets}
+                                    />
                                 </div>
                                 <div className="form-group">
                                     <label className="form-label">Button Link Label</label>
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
index 23cc1de8f..c273b6ddc 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import ImplementationPage from '../../../../props/models/ImplementationPage';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
 import { ApiResponseSingle, ResponseError } from '../../../../props/ApiResponses';
@@ -73,37 +73,37 @@ export default function ImplementationsCmsHomeProductsBlockEditor({
     }, [saveBlockRef, submitData]);
 
     return (
-        <div className={'col col-lg-9'}>
+        <Fragment>
             <div className="card-heading">Aanbod sectie</div>
-            <div className="form-group form-group-inline form-group-inline-xl">
+            <div className="form-group">
                 <label className="form-label">Sectietitel</label>
-                <div className="form-offset">
-                    <input
-                        className={'form-control'}
-                        value={pageBlock?.title}
-                        placeholder={'Sectietitel'}
-                        onChange={(e) => setPageBlock({ ...pageBlock, title: e.target.value })}
-                    />
-                </div>
+
+                <input
+                    className={'form-control'}
+                    value={pageBlock?.title}
+                    placeholder={'Sectietitel'}
+                    onChange={(e) => setPageBlock({ ...pageBlock, title: e.target.value })}
+                />
+
                 <FormError error={errors?.title} />
             </div>
-            <div className="form-group form-group-inline form-group-inline-xl">
+            <div className="form-group">
                 <label className="form-label">Paragraaf</label>
-                <div className="form-offset">
-                    <MarkdownEditor
-                        placeholder={'Paragraaf'}
-                        alignment={pageBlock?.description_alignment}
-                        onChangeAlignment={(description_alignment: 'left' | 'center' | 'right') => {
-                            setPageBlock((pageBlock) => ({ ...pageBlock, description_alignment }));
-                        }}
-                        extendedOptions={true}
-                        allowAlignment={true}
-                        value={pageBlock?.description_html}
-                        onChange={(description) => setPageBlock({ ...pageBlock, description })}
-                    />
-                    <FormError error={errors?.description} />
-                </div>
+
+                <MarkdownEditor
+                    placeholder={'Paragraaf'}
+                    alignment={pageBlock?.description_alignment}
+                    onChangeAlignment={(description_alignment: 'left' | 'center' | 'right') => {
+                        setPageBlock((pageBlock) => ({ ...pageBlock, description_alignment }));
+                    }}
+                    extendedOptions={true}
+                    allowAlignment={true}
+                    value={pageBlock?.description_html}
+                    onChange={(description) => setPageBlock({ ...pageBlock, description })}
+                />
+
+                <FormError error={errors?.description} />
             </div>
-        </div>
+        </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
index 6fb5798e9..cb3c0b5b3 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
@@ -250,68 +250,66 @@ export default function ImplementationsCmsPageForm({
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Status</label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            className="form-control"
-                                            propKey={'value'}
-                                            value={form.values?.state}
-                                            onChange={(state: string) => form.update({ state })}
-                                            options={states}
-                                        />
-                                        <FormError error={form.errors.state} />
-                                    </div>
+
+                                    <SelectControl
+                                        className="form-control"
+                                        propKey={'value'}
+                                        value={form.values?.state}
+                                        onChange={(state: string) => form.update({ state })}
+                                        options={states}
+                                    />
+                                    <FormError error={form.errors.state} />
                                 </div>
 
                                 {pageTypeConfig.type === 'extra' && (
-                                    <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                                    <div className="form-group tooltipped">
                                         <label className="form-label">Pagina type</label>
-                                        <div className="form-offset">
-                                            <div className="form-group-info">
-                                                <div className="form-group-info-control">
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propKey={'value'}
-                                                        value={form.values?.external}
-                                                        onChange={(external: boolean) => form.update({ external })}
-                                                        options={types}
-                                                    />
-                                                </div>
-                                                <div className="form-group-info-button">
-                                                    <div
-                                                        className={`button button-default button-icon pull-left ${
-                                                            showInfoBlockType ? 'active' : ''
-                                                        }`}
-                                                        onClick={() => setShowInfoBlockType(!showInfoBlockType)}>
-                                                        <em className="mdi mdi-information" />
-                                                    </div>
+
+                                        <div className="form-group-info">
+                                            <div className="form-group-info-control">
+                                                <SelectControl
+                                                    className="form-control"
+                                                    propKey={'value'}
+                                                    value={form.values?.external}
+                                                    onChange={(external: boolean) => form.update({ external })}
+                                                    options={types}
+                                                />
+                                            </div>
+                                            <div className="form-group-info-button">
+                                                <div
+                                                    className={`button button-default button-icon pull-left ${
+                                                        showInfoBlockType ? 'active' : ''
+                                                    }`}
+                                                    onClick={() => setShowInfoBlockType(!showInfoBlockType)}>
+                                                    <em className="mdi mdi-information" />
                                                 </div>
                                             </div>
+                                        </div>
 
-                                            {showInfoBlockType && (
-                                                <div className="block block-info-box block-info-box-primary">
-                                                    <div className="info-box-icon mdi mdi-information" />
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            De interne privacyverklaring pagina wordt gehost op ons
-                                                            webshopdomein. Hieronder kunt u de inhoud van de pagina
-                                                            aanpassen. U kunt er ook voor kiezen om een externe
-                                                            privacyverklaring te gebruiken en de doorverwijzingslink op
-                                                            te geven.
-                                                        </div>
+                                        {showInfoBlockType && (
+                                            <div className="block block-info-box block-info-box-primary">
+                                                <div className="info-box-icon mdi mdi-information" />
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        De interne privacyverklaring pagina wordt gehost op ons
+                                                        webshopdomein. Hieronder kunt u de inhoud van de pagina
+                                                        aanpassen. U kunt er ook voor kiezen om een externe
+                                                        privacyverklaring te gebruiken en de doorverwijzingslink op te
+                                                        geven.
                                                     </div>
                                                 </div>
-                                            )}
+                                            </div>
+                                        )}
 
-                                            <FormError error={form.errors.external} />
-                                        </div>
+                                        <FormError error={form.errors.external} />
                                     </div>
                                 )}
 
                                 {form.values?.external ? (
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label" htmlFor="external_url">
                                             Externe url
                                         </label>
@@ -326,66 +324,62 @@ export default function ImplementationsCmsPageForm({
                                         <FormError error={form.errors.external_url} />
                                     </div>
                                 ) : (
-                                    <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                                    <div className="form-group tooltipped">
                                         <label className="form-label">
                                             {translate(`implementation_edit.labels.${pageType}`)}
                                         </label>
-                                        <div className="form-offset">
-                                            <MarkdownEditor
-                                                alignment={form.values?.description_alignment}
-                                                extendedOptions={true}
-                                                allowAlignment={true}
-                                                value={form.values?.description_html}
-                                                onChange={(value) => form.update({ description: value })}
-                                            />
-                                        </div>
+
+                                        <MarkdownEditor
+                                            alignment={form.values?.description_alignment}
+                                            extendedOptions={true}
+                                            allowAlignment={true}
+                                            value={form.values?.description_html}
+                                            onChange={(value) => form.update({ description: value })}
+                                        />
                                     </div>
                                 )}
 
                                 {pageTypeConfig.description_position_configurable && !form.values?.external && (
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label">Positie van de content</label>
-                                        <div className="form-offset">
-                                            <div className="form-group-info">
-                                                <div className="form-group-info-control">
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propKey={'value'}
-                                                        value={form.values?.description_position}
-                                                        onChange={(description_position: string) => {
-                                                            form.update({ description_position });
-                                                        }}
-                                                        options={descriptionPositions}
-                                                    />
-                                                </div>
-                                                <div className="form-group-info-button">
-                                                    <div
-                                                        className={`button button-default button-icon pull-left ${
-                                                            showInfoBlockTypePosition ? 'active' : ''
-                                                        }`}
-                                                        onClick={() =>
-                                                            setShowInfoBlockTypePosition(!showInfoBlockTypePosition)
-                                                        }>
-                                                        <em className="mdi mdi-information" />
-                                                    </div>
+
+                                        <div className="form-group-info">
+                                            <div className="form-group-info-control">
+                                                <SelectControl
+                                                    className="form-control"
+                                                    propKey={'value'}
+                                                    value={form.values?.description_position}
+                                                    onChange={(description_position: string) => {
+                                                        form.update({ description_position });
+                                                    }}
+                                                    options={descriptionPositions}
+                                                />
+                                            </div>
+                                            <div className="form-group-info-button">
+                                                <div
+                                                    className={`button button-default button-icon pull-left ${
+                                                        showInfoBlockTypePosition ? 'active' : ''
+                                                    }`}
+                                                    onClick={() =>
+                                                        setShowInfoBlockTypePosition(!showInfoBlockTypePosition)
+                                                    }>
+                                                    <em className="mdi mdi-information" />
                                                 </div>
                                             </div>
+                                        </div>
 
-                                            {showInfoBlockTypePosition && (
-                                                <div className="block block-info-box block-info-box-primary">
-                                                    <div className="info-box-icon mdi mdi-information" />
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            <p>
-                                                                {translate(`implementation_edit.tooltips.${pageType}`)}
-                                                            </p>
-                                                        </div>
+                                        {showInfoBlockTypePosition && (
+                                            <div className="block block-info-box block-info-box-primary">
+                                                <div className="info-box-icon mdi mdi-information" />
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        <p>{translate(`implementation_edit.tooltips.${pageType}`)}</p>
                                                     </div>
                                                 </div>
-                                            )}
+                                            </div>
+                                        )}
 
-                                            <FormError error={form.errors.description_position} />
-                                        </div>
+                                        <FormError error={form.errors.description_position} />
                                     </div>
                                 )}
                             </div>
@@ -394,34 +388,38 @@ export default function ImplementationsCmsPageForm({
 
                     {pageTypeConfig.key == 'home' && (
                         <div className="card-section card-section-primary">
-                            <ImplementationsCmsHomeProductsBlockEditor
-                                activeOrganization={activeOrganization}
-                                implementation={implementation}
-                                pageBlock={pageBlock}
-                                setPageBlock={setPageBlock}
-                                saveBlockRef={cmsBlockEditorRef}
-                            />
+                            <div className="row">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                    <ImplementationsCmsHomeProductsBlockEditor
+                                        activeOrganization={activeOrganization}
+                                        implementation={implementation}
+                                        pageBlock={pageBlock}
+                                        setPageBlock={setPageBlock}
+                                        saveBlockRef={cmsBlockEditorRef}
+                                    />
+                                </div>
+                            </div>
                         </div>
                     )}
 
                     {pageTypeConfig.blocks && !form.values?.external && (
                         <div className="card-section card-section-primary">
-                            <div className="form-group form-group-inline form-group-inline-xl">
-                                <label className="form-label">Blokken</label>
-
-                                <ImplementationsBlockEditor
-                                    blocks={blocks}
-                                    setBlocks={setBlocks}
-                                    errors={form.errors}
-                                    setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
-                                    createFaqRef={faqEditorValidateRef}
-                                    implementation={implementation}
-                                />
-                            </div>
+                            <div className={'row'}>
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                    <div className="form-group">
+                                        <label className="form-label">Blokken</label>
+
+                                        <ImplementationsBlockEditor
+                                            blocks={blocks}
+                                            setBlocks={setBlocks}
+                                            errors={form.errors}
+                                            setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
+                                            createFaqRef={faqEditorValidateRef}
+                                            implementation={implementation}
+                                        />
+                                    </div>
 
-                            <div className="row">
-                                <div className="col col-lg-9">
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label">Blokken per rij</label>
                                         <SelectControl
                                             className="form-control"
@@ -438,18 +436,17 @@ export default function ImplementationsCmsPageForm({
 
                     {pageTypeConfig.faq && !form.values?.external && (
                         <div className="card-section card-section-primary">
-                            <div className="form-group form-group-inline form-group-inline-xl">
+                            <div className="form-group">
                                 <label className="form-label">Veel gestelde vragen</label>
-                                <div className="form-offset">
-                                    <FaqEditor
-                                        faq={faq}
-                                        setFaq={setFaq}
-                                        organization={activeOrganization}
-                                        errors={form?.errors}
-                                        setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
-                                        createFaqRef={blockEditorValidateRef}
-                                    />
-                                </div>
+
+                                <FaqEditor
+                                    faq={faq}
+                                    setFaq={setFaq}
+                                    organization={activeOrganization}
+                                    errors={form?.errors}
+                                    setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
+                                    createFaqRef={blockEditorValidateRef}
+                                />
                             </div>
                         </div>
                     )}
diff --git a/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx b/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
index 5805ad549..b3bdb1c28 100644
--- a/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
@@ -391,8 +391,8 @@ export default function ImplementationsCms() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline form-group-inline-xl">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="title">
                                         {translate('implementation_edit.labels.header_title')}
                                     </label>
@@ -406,53 +406,51 @@ export default function ImplementationsCms() {
                                     />
                                     <FormError error={form.errors.title} />
                                 </div>
-                                <div className="form-group form-group-inline form-group-inline-xl">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="title">
                                         {translate('implementation_edit.labels.header_description')}
                                     </label>
 
-                                    <div className="form-offset">
-                                        {form.values?.description_alignment && (
-                                            <MarkdownEditor
-                                                alignment={form.values?.description_alignment}
-                                                placeholder={'Omschrijving'}
-                                                extendedOptions={true}
-                                                allowAlignment={true}
-                                                value={form.values?.description_html}
-                                                onChange={(description) => form.update({ description })}
-                                                onChangeAlignment={(description_alignment) => {
-                                                    form.update({ description_alignment });
-                                                }}
-                                            />
-                                        )}
-                                    </div>
+                                    {form.values?.description_alignment && (
+                                        <MarkdownEditor
+                                            alignment={form.values?.description_alignment}
+                                            placeholder={'Omschrijving'}
+                                            extendedOptions={true}
+                                            allowAlignment={true}
+                                            value={form.values?.description_html}
+                                            onChange={(description) => form.update({ description })}
+                                            onChangeAlignment={(description_alignment) => {
+                                                form.update({ description_alignment });
+                                            }}
+                                        />
+                                    )}
+
                                     <FormError error={form.errors.description} />
                                 </div>
 
-                                <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                                <div className="form-group tooltipped">
                                     <label className="form-label" htmlFor="page_title_suffix">
                                         {translate('implementation_edit.labels.page_title_suffix')}
                                     </label>
-                                    <div className="form-offset">
-                                        <FormGroupInfo
-                                            info={
-                                                <Fragment>
-                                                    Het eerste deel van de paginatitel, zichtbaar in het browsertabblad,
-                                                    is standaard ingesteld. Het tweede deel kan worden aangepast. De
-                                                    titel mag maximaal 60 tekens lang zijn
-                                                </Fragment>
-                                            }>
-                                            <input
-                                                id="page_title_suffix"
-                                                type="text"
-                                                className="form-control"
-                                                placeholder="Browser tab postfix"
-                                                value={form.values?.page_title_suffix || ''}
-                                                onChange={(e) => form.update({ page_title_suffix: e.target.value })}
-                                            />
-                                        </FormGroupInfo>
-                                        <FormError error={form.errors.page_title_suffix} />
-                                    </div>
+
+                                    <FormGroupInfo
+                                        info={
+                                            <Fragment>
+                                                Het eerste deel van de paginatitel, zichtbaar in het browsertabblad, is
+                                                standaard ingesteld. Het tweede deel kan worden aangepast. De titel mag
+                                                maximaal 60 tekens lang zijn
+                                            </Fragment>
+                                        }>
+                                        <input
+                                            id="page_title_suffix"
+                                            type="text"
+                                            className="form-control"
+                                            placeholder="Browser tab postfix"
+                                            value={form.values?.page_title_suffix || ''}
+                                            onChange={(e) => form.update({ page_title_suffix: e.target.value })}
+                                        />
+                                    </FormGroupInfo>
+                                    <FormError error={form.errors.page_title_suffix} />
                                 </div>
                             </div>
                         </div>
@@ -460,10 +458,8 @@ export default function ImplementationsCms() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     label={'Button'}
                                     error={form.errors?.banner_button}
                                     input={() => (
@@ -476,8 +472,6 @@ export default function ImplementationsCms() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     required={true}
                                     label={'Button text'}
                                     error={form.errors?.banner_button_text}
@@ -493,8 +487,6 @@ export default function ImplementationsCms() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     required={true}
                                     label={'Button link'}
                                     error={form.errors?.banner_button_url}
@@ -510,8 +502,6 @@ export default function ImplementationsCms() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     required={true}
                                     label={'Open knop koppeling in'}
                                     error={form.errors?.banner_button_target}
@@ -536,54 +526,53 @@ export default function ImplementationsCms() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label" htmlFor="info_url">
                                         {translate('implementation_edit.labels.communication')}
                                     </label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <SelectControl
-                                                    className="form-control"
-                                                    propKey="value"
-                                                    propValue="label"
-                                                    allowSearch={false}
-                                                    options={communicationTypes}
-                                                    value={form.values?.informal_communication}
-                                                    onChange={(value?: boolean) => {
-                                                        form.update({ informal_communication: value });
-                                                    }}
-                                                />
-                                            </div>
 
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={`button button-default button-icon pull-left ${
-                                                        showInfoBlock ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setShowInfoBlock(!showInfoBlock)}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey="value"
+                                                propValue="label"
+                                                allowSearch={false}
+                                                options={communicationTypes}
+                                                value={form.values?.informal_communication}
+                                                onChange={(value?: boolean) => {
+                                                    form.update({ informal_communication: value });
+                                                }}
+                                            />
+                                        </div>
+
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={`button button-default button-icon pull-left ${
+                                                    showInfoBlock ? 'active' : ''
+                                                }`}
+                                                onClick={() => setShowInfoBlock(!showInfoBlock)}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
+                                    </div>
 
-                                        {showInfoBlock && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                <div className="info-box-content">
-                                                    <div className="block block-markdown">
-                                                        <p>
-                                                            Kies de aanspreekvorm. Deze aanspreekvorm staat in teksten
-                                                            op de website en in de berichten die het systeem verstuurt.
-                                                        </p>
-                                                    </div>
+                                    {showInfoBlock && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            <div className="info-box-content">
+                                                <div className="block block-markdown">
+                                                    <p>
+                                                        Kies de aanspreekvorm. Deze aanspreekvorm staat in teksten op de
+                                                        website en in de berichten die het systeem verstuurt.
+                                                    </p>
                                                 </div>
                                             </div>
-                                        )}
+                                        </div>
+                                    )}
 
-                                        <FormError error={form.errors.informal_communication} />
-                                    </div>
+                                    <FormError error={form.errors.informal_communication} />
                                 </div>
                             </div>
                         </div>
@@ -591,32 +580,31 @@ export default function ImplementationsCms() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">
                                         {translate('implementation_edit.labels.announcement_show')}
                                     </label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            className="form-control"
-                                            propKey="value"
-                                            propValue="label"
-                                            allowSearch={false}
-                                            options={announcementState}
-                                            value={form.values?.announcement.active}
-                                            onChange={(value?: boolean) => {
-                                                form.update({
-                                                    announcement: { ...form.values.announcement, active: value },
-                                                });
-                                            }}
-                                        />
-                                        <FormError error={form.errors['announcement.active']} />
-                                    </div>
+
+                                    <SelectControl
+                                        className="form-control"
+                                        propKey="value"
+                                        propValue="label"
+                                        allowSearch={false}
+                                        options={announcementState}
+                                        value={form.values?.announcement.active}
+                                        onChange={(value?: boolean) => {
+                                            form.update({
+                                                announcement: { ...form.values.announcement, active: value },
+                                            });
+                                        }}
+                                    />
+                                    <FormError error={form.errors['announcement.active']} />
                                 </div>
 
                                 {form.values?.announcement.active && (
                                     <Fragment>
-                                        <div className="form-group form-group-inline form-group-inline-xl">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('implementation_edit.labels.announcement_type')}
                                             </label>
@@ -637,7 +625,7 @@ export default function ImplementationsCms() {
                                             <FormError error={form.errors['announcement.type']} />
                                         </div>
 
-                                        <div className="form-group form-group-inline form-group-inline-xl">
+                                        <div className="form-group">
                                             <label className="form-label" htmlFor="announcement_title">
                                                 {translate('implementation_edit.labels.announcement_title')}
                                             </label>
@@ -659,29 +647,28 @@ export default function ImplementationsCms() {
                                             <FormError error={form.errors['announcement.title']} />
                                         </div>
 
-                                        <div className="form-group form-group-inline form-group-inline-xl">
+                                        <div className="form-group">
                                             <label className="form-label" htmlFor="title">
                                                 {translate('implementation_edit.labels.announcement_description')}
                                             </label>
 
-                                            <div className="form-offset">
-                                                <MarkdownEditor
-                                                    value={form.values?.announcement.description_html}
-                                                    placeholder={'Beschrijving'}
-                                                    onChange={(value) => {
-                                                        form.update({
-                                                            announcement: {
-                                                                ...form.values.announcement,
-                                                                description: value,
-                                                            },
-                                                        });
-                                                    }}
-                                                />
-                                            </div>
+                                            <MarkdownEditor
+                                                value={form.values?.announcement.description_html}
+                                                placeholder={'Beschrijving'}
+                                                onChange={(value) => {
+                                                    form.update({
+                                                        announcement: {
+                                                            ...form.values.announcement,
+                                                            description: value,
+                                                        },
+                                                    });
+                                                }}
+                                            />
+
                                             <FormError error={form.errors['announcement.description']} />
                                         </div>
 
-                                        <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                                        <div className="form-group tooltipped">
                                             <label className="form-label">
                                                 {translate('implementation_edit.labels.announcement_expire')}
                                             </label>
@@ -708,47 +695,45 @@ export default function ImplementationsCms() {
                                         </div>
 
                                         {form.values?.announcement.expire && (
-                                            <div className="form-group form-group-inline form-group-inline-xl">
+                                            <div className="form-group">
                                                 <label className="form-label">
                                                     {translate('implementation_edit.labels.announcement_expire_at')}
                                                 </label>
-                                                <div className="form-offset">
-                                                    <DatePickerControl
-                                                        dateFormat={'dd-MM-yyyy'}
-                                                        value={dateParse(form.values?.announcement.expire_at)}
-                                                        placeholder="dd-MM-jjjj"
-                                                        onChange={(value) => {
-                                                            form.update({
-                                                                announcement: {
-                                                                    ...form.values.announcement,
-                                                                    expire_at: dateFormat(value),
-                                                                },
-                                                            });
-                                                        }}
-                                                    />
-                                                    <FormError error={form.errors['announcement.expire_at']} />
-                                                </div>
-                                            </div>
-                                        )}
 
-                                        <div className="form-group form-group-inline form-group-inline-xl tooltipped">
-                                            <label className="form-label">
-                                                {translate('implementation_edit.labels.announcement_replace')}
-                                            </label>
-                                            <div className="form-offset">
-                                                <CheckboxControl
-                                                    title={'Herstel aankondiging indien aanvrager opnieuw inlogt.'}
-                                                    checked={form.values?.announcement.replace}
-                                                    onChange={(e) => {
+                                                <DatePickerControl
+                                                    dateFormat={'dd-MM-yyyy'}
+                                                    value={dateParse(form.values?.announcement.expire_at)}
+                                                    placeholder="dd-MM-jjjj"
+                                                    onChange={(value) => {
                                                         form.update({
                                                             announcement: {
                                                                 ...form.values.announcement,
-                                                                replace: e.target.checked,
+                                                                expire_at: dateFormat(value),
                                                             },
                                                         });
                                                     }}
                                                 />
+                                                <FormError error={form.errors['announcement.expire_at']} />
                                             </div>
+                                        )}
+
+                                        <div className="form-group tooltipped">
+                                            <label className="form-label">
+                                                {translate('implementation_edit.labels.announcement_replace')}
+                                            </label>
+
+                                            <CheckboxControl
+                                                title={'Herstel aankondiging indien aanvrager opnieuw inlogt.'}
+                                                checked={form.values?.announcement.replace}
+                                                onChange={(e) => {
+                                                    form.update({
+                                                        announcement: {
+                                                            ...form.values.announcement,
+                                                            replace: e.target.checked,
+                                                        },
+                                                    });
+                                                }}
+                                            />
                                         </div>
                                     </Fragment>
                                 )}
@@ -758,10 +743,8 @@ export default function ImplementationsCms() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     label={translate('implementation_edit.labels.show_privacy_checkbox')}
                                     error={form.errors.show_privacy_checkbox}
                                     input={(id) => (
@@ -795,8 +778,6 @@ export default function ImplementationsCms() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'xl'}
                                     label={translate('implementation_edit.labels.show_terms_checkbox')}
                                     error={form.errors.show_terms_checkbox}
                                     input={(id) => (
diff --git a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
index 715a5aa2c..b093daf39 100644
--- a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
+++ b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
@@ -8,6 +8,7 @@ import { useParams } from 'react-router';
 import Implementation from '../../../props/models/Implementation';
 import { getStateRouteUrl, useNavigateState } from '../../../modules/state_router/Router';
 import usePushApiError from '../../../hooks/usePushApiError';
+import Label from '../../elements/image_cropper/Label';
 
 export default function ImplementationsCookies() {
     const { id } = useParams();
@@ -66,7 +67,7 @@ export default function ImplementationsCookies() {
             <div className="card">
                 <div className="card-header">
                     <div className="flex flex-grow card-title">Cookiemelding</div>
-                    <div className="label label-success">Actief</div>
+                    <Label type="success">Actief</Label>
                 </div>
 
                 <div className="card-section">
diff --git a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
index 6e1743026..33990e255 100644
--- a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
+++ b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
@@ -92,8 +92,6 @@ export default function ImplementationsTranslations() {
 
                 <div className="card-section form">
                     <FormGroup
-                        inline={true}
-                        inlineSize={'lg'}
                         label={'Languages'}
                         input={() => (
                             <Fragment>
diff --git a/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx b/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
index 1664d699f..9b3f4cbeb 100644
--- a/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
+++ b/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
@@ -123,8 +123,8 @@ export default function ImplementationsDigid() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="digid_app_id">
                                         App identificatienummer
                                     </label>
@@ -139,7 +139,7 @@ export default function ImplementationsDigid() {
                                     />
                                     <FormError error={form.errors.digid_app_id} />
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required" htmlFor="digid_shared_secret">
                                         Sleutelcode
                                     </label>
@@ -154,7 +154,7 @@ export default function ImplementationsDigid() {
                                     />
                                     <FormError error={form.errors.digid_shared_secret} />
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="digid_a_select_server">
                                         DigiD Server
                                     </label>
@@ -169,7 +169,7 @@ export default function ImplementationsDigid() {
                                     />
                                     <FormError error={form.errors.digid_a_select_server} />
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label">Status</label>
                                     <label className="form-toggle form-label" htmlFor="status">
                                         <input
diff --git a/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx b/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
index 15721b734..6188ecc95 100644
--- a/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
+++ b/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
@@ -13,6 +13,7 @@ import Implementation from '../../../props/models/Implementation';
 import { getStateRouteUrl, useNavigateState } from '../../../modules/state_router/Router';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
+import InfoBox from '../../elements/info-box/InfoBox';
 
 export default function ImplementationsEmail() {
     const { id } = useParams();
@@ -113,8 +114,8 @@ export default function ImplementationsEmail() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="email_from_address">
                                         Afzender emailadres
                                     </label>
@@ -128,7 +129,7 @@ export default function ImplementationsEmail() {
                                     />
                                     <FormError error={form.errors.email_from_address} />
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="email_from_name">
                                         Afzender naam
                                     </label>
@@ -148,16 +149,11 @@ export default function ImplementationsEmail() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9">
-                                <div className="form-group form-group-inline">
-                                    <label className="form-label">
-                                        <em className="mdi mdi-information" style={{ fontSize: '18px' }} />
-                                    </label>
-                                    <span>
-                                        Forus zal uw e-mailadres verifieren en uw systeembeheer vragen om Forus zijn
-                                        mailservice als veilige afzender toe te voegen aan uw domein.
-                                    </span>
-                                </div>
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <InfoBox iconPosition={'top'}>
+                                    Forus zal uw e-mailadres verifieren en uw systeembeheer vragen om Forus zijn
+                                    mailservice als veilige afzender toe te voegen aan uw domein.
+                                </InfoBox>
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx b/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
index 1748a888c..82a048890 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
@@ -151,58 +151,55 @@ export default function ImplementationsNotificationsBranding() {
                         <div className="row">
                             <div className="col col-lg-9 col-lg-12">
                                 <div className="form">
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label">Logo</label>
-                                        <div className="form-offset">
-                                            <PhotoSelector
-                                                type="email_logo"
-                                                thumbnail={media?.sizes?.thumbnail}
-                                                defaultThumbnail={implementation.email_logo_default.sizes.thumbnail}
-                                                selectPhoto={(file) => setMediaFile(file)}
-                                                resetPhoto={() => {
-                                                    setMedia(null);
-                                                    setMediaFile(null);
-                                                }}
-                                                template="photo-selector-notifications"
-                                                description-translate="organization_edit.labels.photo_description"
-                                            />
-
-                                            <FormError error={form.errors.email_logo_uid} />
-                                        </div>
+
+                                        <PhotoSelector
+                                            type="email_logo"
+                                            thumbnail={media?.sizes?.thumbnail}
+                                            defaultThumbnail={implementation.email_logo_default.sizes.thumbnail}
+                                            selectPhoto={(file) => setMediaFile(file)}
+                                            resetPhoto={() => {
+                                                setMedia(null);
+                                                setMediaFile(null);
+                                            }}
+                                            template="photo-selector-notifications"
+                                            description-translate="organization_edit.labels.photo_description"
+                                        />
+
+                                        <FormError error={form.errors.email_logo_uid} />
                                     </div>
 
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label">Kleur van de elementen</label>
-                                        <div className="form-offset">
-                                            <input
-                                                className="form-control"
-                                                type="color"
-                                                value={form.values.email_color}
-                                                onChange={(e) => form.update({ email_color: e.target.value })}
-                                            />
-
-                                            <FormError error={form.errors.email_color} />
-                                            <Tooltip text="Kleur van knoppen en links in de e-mailberichten." />
-                                        </div>
+
+                                        <input
+                                            className="form-control"
+                                            type="color"
+                                            value={form.values.email_color}
+                                            onChange={(e) => form.update({ email_color: e.target.value })}
+                                        />
+
+                                        <FormError error={form.errors.email_color} />
+                                        <Tooltip text="Kleur van knoppen en links in de e-mailberichten." />
                                     </div>
-                                    <div className="form-group form-group-inline form-group-inline-xl">
+                                    <div className="form-group">
                                         <label className="form-label">Handtekening</label>
-                                        <div className="form-offset">
-                                            <MarkdownEditor
-                                                value={form.values.email_signature_html}
-                                                allowLists={false}
-                                                onChange={(value) => form.update({ email_signature: value })}
-                                            />
-
-                                            <div className="form-hint">
-                                                {translate('system_notifications.hints.maxlen', {
-                                                    attribute: 'handtekening',
-                                                    size: 4096,
-                                                })}
-                                            </div>
-
-                                            <FormError error={form.errors.email_signature} />
+
+                                        <MarkdownEditor
+                                            value={form.values.email_signature_html}
+                                            allowLists={false}
+                                            onChange={(value) => form.update({ email_signature: value })}
+                                        />
+
+                                        <div className="form-hint">
+                                            {translate('system_notifications.hints.maxlen', {
+                                                attribute: 'handtekening',
+                                                size: 4096,
+                                            })}
                                         </div>
+
+                                        <FormError error={form.errors.email_signature} />
                                     </div>
                                 </div>
                             </div>
diff --git a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
index 4bd7e0f8e..8035a5ab2 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
@@ -13,6 +13,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';
 
 export default function SystemNotificationEditor({
     fund,
@@ -183,16 +184,29 @@ export default function SystemNotificationEditor({
                                 <div className="text-strong">Status</div>
                             </div>
                             <div className="keyvalue-value">
-                                <div
-                                    className={`transition-background label label-round ${
-                                        {
-                                            active: 'label-success',
-                                            inactive: 'label-danger',
-                                            active_partly: 'label-warning',
-                                        }[state.state]
-                                    }`}>
-                                    {state.stateLabel}
-                                </div>
+                                {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>
+                                )}
+
+                                {!['active', 'inactive', 'active_partly'].includes(state?.state) && (
+                                    <Label type={'default'} className={'transition-background'}>
+                                        {state.stateLabel}
+                                    </Label>
+                                )}
                             </div>
                         </div>
                         <div className="keyvalue-item">
diff --git a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
index 89cf0f443..0860cd2ad 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
@@ -441,50 +441,47 @@ export default function ImplementationsNotificationsSend() {
                     <div className="card-section">
                         <div className="form-group">
                             <label className="form-label">Kies een fonds</label>
-                            <div className="form-offset">
-                                <SelectControl
-                                    className="form-control"
-                                    allowSearch={false}
-                                    value={fund}
-                                    onChange={(value: Fund) => setFund(value)}
-                                    options={funds}
-                                />
-                            </div>
+
+                            <SelectControl
+                                className="form-control"
+                                allowSearch={false}
+                                value={fund}
+                                onChange={(value: Fund) => setFund(value)}
+                                options={funds}
+                            />
                         </div>
 
                         {targetGroup == 'identities' && (
                             <div className="form-group">
                                 <label className="form-label">Verstuur naar</label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        className="form-control"
-                                        propKey={'value'}
-                                        allowSearch={false}
-                                        value={identitiesFilters.values.target}
-                                        onChange={(value: string) => {
-                                            identitiesFilters.update({ target: value });
-                                        }}
-                                        options={identityTargets}
-                                    />
-                                </div>
+
+                                <SelectControl
+                                    className="form-control"
+                                    propKey={'value'}
+                                    allowSearch={false}
+                                    value={identitiesFilters.values.target}
+                                    onChange={(value: string) => {
+                                        identitiesFilters.update({ target: value });
+                                    }}
+                                    options={identityTargets}
+                                />
                             </div>
                         )}
 
                         {targetGroup == 'providers' && (
                             <div className="form-group">
                                 <label className="form-label">Verstuur naar</label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        className="form-control"
-                                        propKey={'value'}
-                                        allowSearch={false}
-                                        value={providersFilters.values.target}
-                                        onChange={(value: string) => {
-                                            providersFilters.update({ target: value });
-                                        }}
-                                        options={providerTargets}
-                                    />
-                                </div>
+
+                                <SelectControl
+                                    className="form-control"
+                                    propKey={'value'}
+                                    allowSearch={false}
+                                    value={providersFilters.values.target}
+                                    onChange={(value: string) => {
+                                        providersFilters.update({ target: value });
+                                    }}
+                                    options={providerTargets}
+                                />
                             </div>
                         )}
                     </div>
diff --git a/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx b/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
index 9042d443a..7a51aeee7 100644
--- a/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
@@ -12,6 +12,7 @@ import SystemNotification from '../../../props/models/SystemNotification';
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePushApiError from '../../../hooks/usePushApiError';
+import Label from '../../elements/image_cropper/Label';
 
 export default function ImplementationsNotifications() {
     const activeOrganization = useActiveOrganization();
@@ -293,16 +294,23 @@ export default function ImplementationsNotifications() {
                                                 </td>
 
                                                 <td className="nowrap">
-                                                    <div
-                                                        className={`label label-round nowrap ${
-                                                            {
-                                                                active: 'label-success',
-                                                                inactive: 'label-danger',
-                                                                active_partly: 'label-warning',
-                                                            }[notification.state.state]
-                                                        }`}>
-                                                        {notification.state.stateLabel}
-                                                    </div>
+                                                    {notification.state?.state === 'active' && (
+                                                        <Label type={'success'}>{notification.state.stateLabel}</Label>
+                                                    )}
+
+                                                    {notification.state?.state === 'inactive' && (
+                                                        <Label type={'danger'}>{notification.state.stateLabel}</Label>
+                                                    )}
+
+                                                    {notification.state?.state === 'active_partly' && (
+                                                        <Label type={'warning'}>{notification.state.stateLabel}</Label>
+                                                    )}
+
+                                                    {!['active', 'inactive', 'active_partly'].includes(
+                                                        notification.state?.state,
+                                                    ) && (
+                                                        <Label type={'default'}>{notification.state.stateLabel}</Label>
+                                                    )}
                                                 </td>
 
                                                 <td className="nowrap">
diff --git a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
index 690a4a694..2e0e7e234 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
@@ -37,7 +37,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
     const [showBranchNumberTooltip, setShowBranchNumberTooltip] = useState<boolean>(false);
 
     const fetchOffice = useCallback(
-        (id) => {
+        (id: number) => {
             setProgress(0);
 
             officeService
@@ -99,7 +99,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
     const { update: updateForm } = form;
 
     const onScheduleChange = useCallback(
-        (schedule) => {
+        (schedule: OfficeSchedule[]) => {
             updateForm({ schedule: schedule });
         },
         [updateForm],
@@ -131,24 +131,23 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-xs-12 col-md-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label className="form-label">&nbsp;</label>
-                            <div className="form-offset">
-                                <PhotoSelector
-                                    type="office_photo"
-                                    thumbnail={office?.photo?.sizes?.thumbnail}
-                                    selectPhoto={(file) => setMediaFile(file)}
-                                />
-                            </div>
+
+                            <PhotoSelector
+                                type="office_photo"
+                                thumbnail={office?.photo?.sizes?.thumbnail}
+                                selectPhoto={(file) => setMediaFile(file)}
+                            />
                         </div>
                     </div>
                 </div>
             </div>
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-xs-12 col-md-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label className="form-label form-label-required">
                                 {translate('offices_edit.labels.address')}
                             </label>
@@ -162,7 +161,7 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                             <FormError error={form.errors?.address} />
                         </div>
 
-                        <div className="form-group form-group-inline">
+                        <div className="form-group">
                             <label className="form-label">{translate('offices_edit.labels.phone')}</label>
                             <input
                                 type="text"
@@ -179,8 +178,8 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-xs-12 col-md-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label className="form-label">{translate('offices_edit.labels.branch_number')}</label>
                             <div className="form-group-info">
                                 <div className="form-group-info-control">
@@ -206,16 +205,15 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                         </div>
 
                         {showBranchNumberTooltip && (
-                            <div className="form-group form-group-inline">
-                                <label className="form-label"></label>
-                                <div className="form-offset block block-info">
+                            <div className="form-group">
+                                <div className="block block-info">
                                     <em className="mdi mdi-information block-info-icon" />
                                     {translate('offices_edit.info.branch_number')}
                                 </div>
                             </div>
                         )}
 
-                        <div className="form-group form-group-inline">
+                        <div className="form-group">
                             <label className="form-label">{translate('offices_edit.labels.branch_name')}</label>
                             <div className="form-group-info">
                                 <div className="form-group-info-control">
@@ -244,16 +242,15 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                         </div>
 
                         {showBranchNameTooltip && (
-                            <div className="form-group form-group-inline">
-                                <label className="form-label"></label>
-                                <div className="form-offset block block-info">
+                            <div className="form-group">
+                                <div className="block block-info">
                                     <em className="mdi mdi-information block-info-icon" />
                                     {translate('offices_edit.info.branch_name')}
                                 </div>
                             </div>
                         )}
 
-                        <div className="form-group form-group-inline">
+                        <div className="form-group">
                             <label className="form-label">{translate('offices_edit.labels.branch_id')}</label>
                             <div className="form-group-info">
                                 <div className="form-group-info-control">
@@ -282,9 +279,8 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                         </div>
 
                         {showBranchIdTooltip && (
-                            <div className="form-group form-group-inline">
-                                <label className="form-label"></label>
-                                <div className="form-offset block block-info">
+                            <div className="form-group">
+                                <div className="block block-info">
                                     <em className="mdi mdi-information block-info-icon" />
                                     {translate('offices_edit.info.branch_id')}
                                 </div>
@@ -296,18 +292,17 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-xs-12 col-md-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label className="form-label">&nbsp;</label>
-                            <div className="form-offset">
-                                {(form.values || !id) && (
-                                    <ScheduleControl
-                                        schedule={form.values?.schedule || []}
-                                        onChange={onScheduleChange}
-                                        errors={form.errors}
-                                    />
-                                )}
-                            </div>
+
+                            {(form.values || !id) && (
+                                <ScheduleControl
+                                    schedule={form.values?.schedule || []}
+                                    onChange={onScheduleChange}
+                                    errors={form.errors}
+                                />
+                            )}
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/organizations-contacts/OrganizationsContacts.tsx b/react/src/dashboard/components/pages/organizations-contacts/OrganizationsContacts.tsx
index 982099472..32325d903 100644
--- a/react/src/dashboard/components/pages/organizations-contacts/OrganizationsContacts.tsx
+++ b/react/src/dashboard/components/pages/organizations-contacts/OrganizationsContacts.tsx
@@ -66,103 +66,100 @@ export default function OrganizationsContacts() {
                 </div>
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-sm-12">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
                             {form.values.contacts?.map((contact, index) => (
-                                <div key={contact.key} className="form-group form-group-inline">
+                                <div key={contact.key} className="form-group">
                                     <label className="form-label">
                                         {translate(`organization_contacts.labels.${contact.key}`)}
                                     </label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <div className="flex flex-grow flex-vertical">
-                                                    <input
-                                                        className="form-control"
-                                                        value={contact.value || ''}
-                                                        type={contact.type}
-                                                        onChange={(e) => {
-                                                            form.values.contacts[index].value = e.target.value;
-                                                            form.update({ ...form.values });
-                                                        }}
-                                                        placeholder={translate(
-                                                            'organization_contacts.labels.' + contact.key,
-                                                        )}
-                                                    />
-                                                    <FormError error={form.errors?.[`contacts.${index}.value`]} />
-                                                </div>
-                                            </div>
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={classNames(
-                                                        'button',
-                                                        'button-default',
-                                                        'button-icon',
-                                                        'pull-left',
-                                                        shownInfoBoxes.includes(contact.key) && 'active',
+
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <div className="flex flex-grow flex-vertical">
+                                                <input
+                                                    className="form-control"
+                                                    value={contact.value || ''}
+                                                    type={contact.type}
+                                                    onChange={(e) => {
+                                                        form.values.contacts[index].value = e.target.value;
+                                                        form.update({ ...form.values });
+                                                    }}
+                                                    placeholder={translate(
+                                                        'organization_contacts.labels.' + contact.key,
                                                     )}
-                                                    onClick={() => {
-                                                        setShownInfoBoxes((list) => {
-                                                            if (list.includes(contact.key)) {
-                                                                list.splice(list.indexOf(contact.key), 1);
-                                                            } else {
-                                                                list.push(contact.key);
-                                                            }
+                                                />
+                                                <FormError error={form.errors?.[`contacts.${index}.value`]} />
+                                            </div>
+                                        </div>
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={classNames(
+                                                    'button',
+                                                    'button-default',
+                                                    'button-icon',
+                                                    'pull-left',
+                                                    shownInfoBoxes.includes(contact.key) && 'active',
+                                                )}
+                                                onClick={() => {
+                                                    setShownInfoBoxes((list) => {
+                                                        if (list.includes(contact.key)) {
+                                                            list.splice(list.indexOf(contact.key), 1);
+                                                        } else {
+                                                            list.push(contact.key);
+                                                        }
 
-                                                            return [...list];
-                                                        });
-                                                    }}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+                                                        return [...list];
+                                                    });
+                                                }}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
+                                    </div>
 
-                                        {shownInfoBoxes.includes(contact.key) && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                {contact.key == 'fund_balance_low' && (
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            <h4>Laag saldo op het fonds</h4>
-                                                            <p>
-                                                                Vul hier een e-mailadres in dat een notificatie krijgt
-                                                                wanneer het saldo op het fonds te laag is. Dit kan ook
-                                                                een e-mailadres zijn dat geen medewerker is van de
-                                                                organisatie.
-                                                            </p>
-                                                        </div>
+                                    {shownInfoBoxes.includes(contact.key) && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            {contact.key == 'fund_balance_low' && (
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        <h4>Laag saldo op het fonds</h4>
+                                                        <p>
+                                                            Vul hier een e-mailadres in dat een notificatie krijgt
+                                                            wanneer het saldo op het fonds te laag is. Dit kan ook een
+                                                            e-mailadres zijn dat geen medewerker is van de organisatie.
+                                                        </p>
                                                     </div>
-                                                )}
+                                                </div>
+                                            )}
 
-                                                {contact.key == 'bank_connections_expiring' && (
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            <h4>Bank integratie verloopt</h4>
-                                                            <p>
-                                                                Vul hier een e-mailadres in dat een notificatie krijgt
-                                                                wanneer de huidige bank integratie verloopt. Dit kan ook
-                                                                een e-mailadres zijn dat geen medewerker is van de
-                                                                organisatie.
-                                                            </p>
-                                                        </div>
+                                            {contact.key == 'bank_connections_expiring' && (
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        <h4>Bank integratie verloopt</h4>
+                                                        <p>
+                                                            Vul hier een e-mailadres in dat een notificatie krijgt
+                                                            wanneer de huidige bank integratie verloopt. Dit kan ook een
+                                                            e-mailadres zijn dat geen medewerker is van de organisatie.
+                                                        </p>
                                                     </div>
-                                                )}
+                                                </div>
+                                            )}
 
-                                                {contact.key == 'provider_applied' && (
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            <h4>Aanbieder heeft zich aangemeld</h4>
-                                                            <p>
-                                                                Vul hier een e-mailadres in dat een notificatie krijgt
-                                                                wanneer een aanbieder zich heeft aangemeld voor een
-                                                                fonds. Dit kan ook een e-mailadres zijn dat geen
-                                                                medewerker is van de organisatie.
-                                                            </p>
-                                                        </div>
+                                            {contact.key == 'provider_applied' && (
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        <h4>Aanbieder heeft zich aangemeld</h4>
+                                                        <p>
+                                                            Vul hier een e-mailadres in dat een notificatie krijgt
+                                                            wanneer een aanbieder zich heeft aangemeld voor een fonds.
+                                                            Dit kan ook een e-mailadres zijn dat geen medewerker is van
+                                                            de organisatie.
+                                                        </p>
                                                     </div>
-                                                )}
-                                            </div>
-                                        )}
-                                    </div>
+                                                </div>
+                                            )}
+                                        </div>
+                                    )}
                                 </div>
                             ))}
                         </div>
diff --git a/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx b/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
index dd7fb8176..a3543efd5 100644
--- a/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
+++ b/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
@@ -62,7 +62,7 @@ export default function OrganizationForm() {
     }, [businessTypeService, setProgress]);
 
     const fetchOrganization = useCallback(
-        (id) => {
+        (id: number) => {
             setProgress(0);
 
             organizationService
@@ -149,7 +149,7 @@ export default function OrganizationForm() {
 
     useEffect(() => {
         if (organizationId) {
-            fetchOrganization(organizationId);
+            fetchOrganization(parseInt(organizationId));
         }
     }, [organizationId, fetchOrganization]);
 
@@ -178,27 +178,20 @@ export default function OrganizationForm() {
             </div>
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-xs-12">
-                        <div className="form-group form-group-inline">
-                            <label htmlFor="" className="form-label">
-                                &nbsp;
-                            </label>
-                            <div className="form-offset">
-                                <PhotoSelector
-                                    type="organization_logo"
-                                    thumbnail={organization?.logo?.sizes?.thumbnail}
-                                    selectPhoto={(file) => setMediaFile(file)}
-                                />
-                            </div>
-                        </div>
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <PhotoSelector
+                            type="organization_logo"
+                            thumbnail={organization?.logo?.sizes?.thumbnail}
+                            selectPhoto={(file) => setMediaFile(file)}
+                        />
                     </div>
                 </div>
             </div>
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-lg-9 col-lg-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label htmlFor="name" className="form-label form-label-required">
                                 {translate('organization_edit.labels.name')}
                             </label>
@@ -211,114 +204,114 @@ export default function OrganizationForm() {
                             />
                             <FormError error={form.errors?.name} />
                         </div>
-                        <div className="form-group form-group-inline">
+                        <div className="form-group">
                             <label htmlFor="iban" className="form-label form-label-required">
                                 {translate('organization_edit.labels.bank')}
                             </label>
-                            <div className="form-offset">
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    placeholder={'IBAN-nummer'}
-                                    value={form.values?.iban || ''}
-                                    onChange={(e) => form.update({ iban: e.target.value })}
-                                    disabled={organization && organization?.identity_address != authIdentity.address}
-                                />
-                                {organization && organization?.identity_address != authIdentity.address && (
-                                    <div className="form-hint">Alleen de eigenaar kan het rekeningnummer wijzigen.</div>
-                                )}
-                                <FormError error={form.errors?.iban} />
-                            </div>
+
+                            <input
+                                type="text"
+                                className="form-control"
+                                placeholder={'IBAN-nummer'}
+                                value={form.values?.iban || ''}
+                                onChange={(e) => form.update({ iban: e.target.value })}
+                                disabled={organization && organization?.identity_address != authIdentity.address}
+                            />
+                            {organization && organization?.identity_address != authIdentity.address && (
+                                <div className="form-hint">Alleen de eigenaar kan het rekeningnummer wijzigen.</div>
+                            )}
+                            <FormError error={form.errors?.iban} />
                         </div>
                     </div>
                 </div>
             </div>
 
             <div className="card-section card-section-primary">
-                <div className="form-group form-group-inline">
-                    <label htmlFor="email" className="form-label form-label-required">
-                        {translate('organization_edit.labels.mail')}
-                    </label>
-                    <div className="form-offset">
-                        <div className="row">
-                            <div className="col col-lg-8 col-lg-12">
-                                <input
-                                    id={'email'}
-                                    type="email"
-                                    className="form-control"
-                                    value={form.values?.email || ''}
-                                    onChange={(e) => form.update({ email: e.target.value })}
-                                    placeholder="E-mailadres"
-                                />
-                                <FormError error={form.errors?.email} />
-                            </div>
+                <div className="row">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
+                            <label htmlFor="email" className="form-label form-label-required">
+                                {translate('organization_edit.labels.mail')}
+                            </label>
 
-                            <div className="col col-lg-4 col-lg-12">
-                                <CheckboxControl
-                                    id={'email_public'}
-                                    title={'Maak publiek'}
-                                    checked={!!form.values?.email_public}
-                                    onChange={(e) => form.update({ email_public: e.target.checked })}
-                                />
+                            <div className="row">
+                                <div className="col col-lg-8 col-lg-12">
+                                    <input
+                                        id={'email'}
+                                        type="email"
+                                        className="form-control"
+                                        value={form.values?.email || ''}
+                                        onChange={(e) => form.update({ email: e.target.value })}
+                                        placeholder="E-mailadres"
+                                    />
+                                    <FormError error={form.errors?.email} />
+                                </div>
+
+                                <div className="col col-lg-4 col-lg-12">
+                                    <CheckboxControl
+                                        id={'email_public'}
+                                        title={'Maak publiek'}
+                                        checked={!!form.values?.email_public}
+                                        onChange={(e) => form.update({ email_public: e.target.checked })}
+                                    />
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
 
-                <div className="form-group form-group-inline">
-                    <label htmlFor="phone" className="form-label form-label-required">
-                        {translate('organization_edit.labels.phone')}
-                    </label>
-                    <div className="form-offset">
-                        <div className="row">
-                            <div className="col col-lg-8 col-lg-12">
-                                <input
-                                    id="phone"
-                                    type="text"
-                                    className="form-control"
-                                    value={form.values?.phone || ''}
-                                    onChange={(e) => form.update({ phone: e.target.value })}
-                                    placeholder="Telefoonnummer"
-                                />
-                                <FormError error={form.errors?.phone} />
-                            </div>
+                        <div className="form-group">
+                            <label htmlFor="phone" className="form-label form-label-required">
+                                {translate('organization_edit.labels.phone')}
+                            </label>
 
-                            <div className="col col-lg-4 col-lg-12">
-                                <CheckboxControl
-                                    id={'phone_public'}
-                                    title={'Maak publiek'}
-                                    checked={!!form.values?.phone_public}
-                                    onChange={(e) => form.update({ phone_public: e.target.checked })}
-                                />
+                            <div className="row">
+                                <div className="col col-lg-8 col-lg-12">
+                                    <input
+                                        id="phone"
+                                        type="text"
+                                        className="form-control"
+                                        value={form.values?.phone || ''}
+                                        onChange={(e) => form.update({ phone: e.target.value })}
+                                        placeholder="Telefoonnummer"
+                                    />
+                                    <FormError error={form.errors?.phone} />
+                                </div>
+
+                                <div className="col col-lg-4 col-lg-12">
+                                    <CheckboxControl
+                                        id={'phone_public'}
+                                        title={'Maak publiek'}
+                                        checked={!!form.values?.phone_public}
+                                        onChange={(e) => form.update({ phone_public: e.target.checked })}
+                                    />
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </div>
 
-                <div className="form-group form-group-inline">
-                    <label htmlFor="website" className="form-label">
-                        {translate('organization_edit.labels.website')}
-                    </label>
-                    <div className="form-offset">
-                        <div className="row">
-                            <div className="col col-lg-8 col-lg-12">
-                                <input
-                                    type="text"
-                                    className="form-control"
-                                    value={form.values?.website || ''}
-                                    onChange={(e) => form.update({ website: e.target.value })}
-                                    placeholder="Website"
-                                />
-                                <FormError error={form.errors?.website} />
-                            </div>
+                        <div className="form-group">
+                            <label htmlFor="website" className="form-label">
+                                {translate('organization_edit.labels.website')}
+                            </label>
 
-                            <div className="col col-lg-4 col-lg-12">
-                                <CheckboxControl
-                                    id={'website_public'}
-                                    title={'Maak publiek'}
-                                    checked={!!form.values?.website_public}
-                                    onChange={(e) => form.update({ website_public: e.target.checked })}
-                                />
+                            <div className="row">
+                                <div className="col col-lg-8 col-lg-12">
+                                    <input
+                                        type="text"
+                                        className="form-control"
+                                        value={form.values?.website || ''}
+                                        onChange={(e) => form.update({ website: e.target.value })}
+                                        placeholder="Website"
+                                    />
+                                    <FormError error={form.errors?.website} />
+                                </div>
+
+                                <div className="col col-lg-4 col-lg-12">
+                                    <CheckboxControl
+                                        id={'website_public'}
+                                        title={'Maak publiek'}
+                                        checked={!!form.values?.website_public}
+                                        onChange={(e) => form.update({ website_public: e.target.checked })}
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -327,23 +320,22 @@ export default function OrganizationForm() {
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-lg-9 col-lg-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label htmlFor="" className="form-label form-label-required">
                                 {translate('organization_edit.labels.business_type')}
                             </label>
-                            <div className="form-offset">
-                                <SelectControl
-                                    className={'form-control'}
-                                    options={businessTypes || []}
-                                    propKey={'id'}
-                                    allowSearch={true}
-                                    value={form.values?.business_type_id}
-                                    optionsComponent={SelectControlOptionsFD}
-                                    onChange={(id?: number) => form.update({ business_type_id: id })}
-                                />
-                                <FormError error={form.errors?.business_type_id} />
-                            </div>
+
+                            <SelectControl
+                                className={'form-control'}
+                                options={businessTypes || []}
+                                propKey={'id'}
+                                allowSearch={true}
+                                value={form.values?.business_type_id}
+                                optionsComponent={SelectControlOptionsFD}
+                                onChange={(id?: number) => form.update({ business_type_id: id })}
+                            />
+                            <FormError error={form.errors?.business_type_id} />
                         </div>
                     </div>
                 </div>
@@ -351,19 +343,18 @@ export default function OrganizationForm() {
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-lg-9 col-lg-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label htmlFor="description" className="form-label form-label-required">
                                 {translate('organization_edit.labels.description')}
                             </label>
-                            <div className="form-offset">
-                                <MarkdownEditor
-                                    value={form.values?.description_html || ''}
-                                    onChange={(description) => form.update({ description })}
-                                    placeholder={translate('organization_edit.labels.description')}
-                                />
-                                <FormError error={form.errors?.description} />
-                            </div>
+
+                            <MarkdownEditor
+                                value={form.values?.description_html || ''}
+                                onChange={(description) => form.update({ description })}
+                                placeholder={translate('organization_edit.labels.description')}
+                            />
+                            <FormError error={form.errors?.description} />
                         </div>
                     </div>
                 </div>
@@ -371,8 +362,8 @@ export default function OrganizationForm() {
 
             <div className="card-section card-section-primary">
                 <div className="row">
-                    <div className="col col-lg-9 col-lg-12">
-                        <div className="form-group form-group-inline">
+                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                        <div className="form-group">
                             <label htmlFor="kvk" className="form-label form-label-required">
                                 {translate('organization_edit.labels.kvk')}
                             </label>
@@ -385,7 +376,7 @@ export default function OrganizationForm() {
                             />
                             <FormError error={form.errors?.kvk} />
                         </div>
-                        <div className="form-group form-group-inline">
+                        <div className="form-group">
                             <label htmlFor="kvk" className="form-label">
                                 {translate('organization_edit.labels.tax')}
                             </label>
diff --git a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
index 3b3f187ea..4ce6826b0 100644
--- a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
@@ -460,9 +460,8 @@ export default function OrganizationsFundsEdit() {
                 </div>
 
                 <div className="card-section card-section-primary">
-                    <div className="form-group form-group-inline">
-                        <label className="form-label hidden-md">&nbsp;</label>
-                        <div className="form-offset">
+                    <div className="row">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
                             <PhotoSelector
                                 type={'fund_logo'}
                                 thumbnail={fund?.logo?.sizes?.thumbnail}
@@ -474,8 +473,8 @@ export default function OrganizationsFundsEdit() {
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-xs-12">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('funds_edit.labels.name')}
                                 </label>
@@ -491,21 +490,20 @@ export default function OrganizationsFundsEdit() {
                                 <FormError error={form.errors?.name} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label">{translate('funds_edit.labels.description_short')}</label>
-                                <div className="form-offset">
-                                    <textarea
-                                        className="form-control r-n"
-                                        maxLength={500}
-                                        placeholder="Omschrijving"
-                                        value={form.values.description_short || ''}
-                                        onChange={(e) => {
-                                            form.update({ description_short: e.target.value });
-                                        }}
-                                    />
-                                    <div className="form-hint">Max. 500 tekens</div>
-                                    <FormError error={form.errors?.description_short}></FormError>
-                                </div>
+
+                                <textarea
+                                    className="form-control r-n"
+                                    maxLength={500}
+                                    placeholder="Omschrijving"
+                                    value={form.values.description_short || ''}
+                                    onChange={(e) => {
+                                        form.update({ description_short: e.target.value });
+                                    }}
+                                />
+                                <div className="form-hint">Max. 500 tekens</div>
+                                <FormError error={form.errors?.description_short}></FormError>
                             </div>
                         </div>
                     </div>
@@ -513,8 +511,8 @@ export default function OrganizationsFundsEdit() {
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-xs-12">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">Totaalbedrag tonen (Me-app)</label>
                                 <CheckboxControl
                                     id={'voucher_amount_visible'}
@@ -536,8 +534,8 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Verberg details</label>
                                     <CheckboxControl
                                         id={'hide_meta'}
@@ -559,105 +557,101 @@ export default function OrganizationsFundsEdit() {
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-xs-12">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">Soort fonds</label>
-                                <div className="form-offset">
-                                    {!fund && (
-                                        <SelectControl
-                                            propKey={'value'}
-                                            allowSearch={false}
-                                            value={form.values.type}
-                                            options={fundTypes}
-                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                            onChange={(type: string) => form.update({ type })}
-                                        />
-                                    )}
-                                    <FormError error={form.errors?.type} />
-                                </div>
+
+                                {!fund && (
+                                    <SelectControl
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={form.values.type}
+                                        options={fundTypes}
+                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                        onChange={(type: string) => form.update({ type })}
+                                    />
+                                )}
+                                <FormError error={form.errors?.type} />
 
                                 {fund && (
-                                    <div className="form-offset">
-                                        <div className="block block-fund_types">
-                                            {form.values.type == 'budget' && (
-                                                <div className="fund_type-item fund_type-item-read">
-                                                    <div className="fund_type-item-inner">
-                                                        <div className="fund_type-media">
-                                                            <img
-                                                                className="fund_type-media-img"
-                                                                src={assetUrl(
-                                                                    '/assets/img/fund-types/icon-fund-actions-read.svg',
-                                                                )}
-                                                                alt={''}
-                                                            />
-                                                        </div>
-                                                        <div className="fund_type-name">Financieel budget</div>
-                                                        <div className="fund_type-check">
-                                                            <div className="mdi mdi-check" />
-                                                        </div>
+                                    <div className="block block-fund_types">
+                                        {form.values.type == 'budget' && (
+                                            <div className="fund_type-item fund_type-item-read">
+                                                <div className="fund_type-item-inner">
+                                                    <div className="fund_type-media">
+                                                        <img
+                                                            className="fund_type-media-img"
+                                                            src={assetUrl(
+                                                                '/assets/img/fund-types/icon-fund-actions-read.svg',
+                                                            )}
+                                                            alt={''}
+                                                        />
+                                                    </div>
+                                                    <div className="fund_type-name">Financieel budget</div>
+                                                    <div className="fund_type-check">
+                                                        <div className="mdi mdi-check" />
                                                     </div>
                                                 </div>
-                                            )}
-
-                                            {form.values.type == 'subsidies' && (
-                                                <div className="fund_type-item fund_type-item-read">
-                                                    <div className="fund_type-item-inner">
-                                                        <div className="fund_type-media">
-                                                            <img
-                                                                className="fund_type-media-img"
-                                                                src={assetUrl(
-                                                                    '/assets/img/fund-types/icon-fund-budget-read.svg',
-                                                                )}
-                                                                alt={''}
-                                                            />
-                                                        </div>
-                                                        <div className="fund_type-name">Acties</div>
-                                                        <div className="fund_type-check">
-                                                            <div className="mdi mdi-check" />
-                                                        </div>
+                                            </div>
+                                        )}
+
+                                        {form.values.type == 'subsidies' && (
+                                            <div className="fund_type-item fund_type-item-read">
+                                                <div className="fund_type-item-inner">
+                                                    <div className="fund_type-media">
+                                                        <img
+                                                            className="fund_type-media-img"
+                                                            src={assetUrl(
+                                                                '/assets/img/fund-types/icon-fund-budget-read.svg',
+                                                            )}
+                                                            alt={''}
+                                                        />
+                                                    </div>
+                                                    <div className="fund_type-name">Acties</div>
+                                                    <div className="fund_type-check">
+                                                        <div className="mdi mdi-check" />
                                                     </div>
                                                 </div>
-                                            )}
-
-                                            {form.values.type == 'external' && (
-                                                <div className="fund_type-item fund_type-item-read">
-                                                    <div className="fund_type-item-inner">
-                                                        <div className="fund_type-media">
-                                                            <img
-                                                                className="fund_type-media-img"
-                                                                src={assetUrl(
-                                                                    '/assets/img/fund-types/icon-fund-external-read.svg',
-                                                                )}
-                                                                alt={''}
-                                                            />
-                                                        </div>
-
-                                                        <div className="fund_type-name">Informatief (met doorlink)</div>
-
-                                                        <div className="fund_type-check">
-                                                            <div className="mdi mdi-check" />
-                                                        </div>
+                                            </div>
+                                        )}
+
+                                        {form.values.type == 'external' && (
+                                            <div className="fund_type-item fund_type-item-read">
+                                                <div className="fund_type-item-inner">
+                                                    <div className="fund_type-media">
+                                                        <img
+                                                            className="fund_type-media-img"
+                                                            src={assetUrl(
+                                                                '/assets/img/fund-types/icon-fund-external-read.svg',
+                                                            )}
+                                                            alt={''}
+                                                        />
+                                                    </div>
+
+                                                    <div className="fund_type-name">Informatief (met doorlink)</div>
+
+                                                    <div className="fund_type-check">
+                                                        <div className="mdi mdi-check" />
                                                     </div>
                                                 </div>
-                                            )}
-                                        </div>
+                                            </div>
+                                        )}
                                     </div>
                                 )}
                             </div>
                             {activeOrganization.allow_payouts && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">Uitkomst van een aanvraag</label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            propKey={'value'}
-                                            allowSearch={false}
-                                            value={form.values.outcome_type}
-                                            options={outcomeTypes}
-                                            disabled={!!fund}
-                                            onChange={(outcome_type: string) => form.update({ outcome_type })}
-                                        />
-                                        <FormError error={form.errors?.type} />
-                                    </div>
+
+                                    <SelectControl
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={form.values.outcome_type}
+                                        options={outcomeTypes}
+                                        disabled={!!fund}
+                                        onChange={(outcome_type: 'voucher' | 'payout') => form.update({ outcome_type })}
+                                    />
+                                    <FormError error={form.errors?.type} />
                                 </div>
                             )}
                         </div>
@@ -667,55 +661,53 @@ export default function OrganizationsFundsEdit() {
                 {form.values.type == 'external' && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">Pagina type</label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <SelectControl
-                                                    propKey={'value'}
-                                                    allowSearch={false}
-                                                    value={form.values.external_page}
-                                                    options={externalFundPageTypes}
-                                                    onChange={(external_page: boolean) => {
-                                                        form.update({ external_page });
-                                                    }}
-                                                />
-                                            </div>
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={`button button-default button-icon pull-left ${
-                                                        showInfoBlock ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setShowInfoBlock(!showInfoBlock)}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <SelectControl
+                                                propKey={'value'}
+                                                allowSearch={false}
+                                                value={form.values.external_page}
+                                                options={externalFundPageTypes}
+                                                onChange={(external_page: boolean) => {
+                                                    form.update({ external_page });
+                                                }}
+                                            />
+                                        </div>
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={`button button-default button-icon pull-left ${
+                                                    showInfoBlock ? 'active' : ''
+                                                }`}
+                                                onClick={() => setShowInfoBlock(!showInfoBlock)}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
+                                    </div>
 
-                                        {showInfoBlock && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                <div className="info-box-content">
-                                                    <div className="block block-markdown">
-                                                        <h4>Kies de juiste instelling</h4>
-                                                        <p>
-                                                            Een interne pagina leidt de gebruiker eerst door naar een
-                                                            pagina binnen de webshop. Een externe pagina leidt de
-                                                            gebruiker na het klikken direct door naar de URL die is
-                                                            ingevuld.
-                                                        </p>
-                                                    </div>
+                                    {showInfoBlock && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            <div className="info-box-content">
+                                                <div className="block block-markdown">
+                                                    <h4>Kies de juiste instelling</h4>
+                                                    <p>
+                                                        Een interne pagina leidt de gebruiker eerst door naar een pagina
+                                                        binnen de webshop. Een externe pagina leidt de gebruiker na het
+                                                        klikken direct door naar de URL die is ingevuld.
+                                                    </p>
                                                 </div>
                                             </div>
-                                        )}
-                                        <FormError error={form.errors?.external_page} />
-                                    </div>
+                                        </div>
+                                    )}
+                                    <FormError error={form.errors?.external_page} />
                                 </div>
 
                                 {form.values.external_page && (
-                                    <div className="form-group form-group-inline">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">Externe url</label>
                                         <input
                                             className="form-control"
@@ -736,8 +728,8 @@ export default function OrganizationsFundsEdit() {
                 {tags?.length > 0 && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <MultiSelectControl
                                         label="Categorieën"
                                         options={tags}
@@ -754,31 +746,30 @@ export default function OrganizationsFundsEdit() {
                 {form.values.type != 'external' && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <div className="form-label form-label-required">
                                         {translate('funds_edit.labels.application_method')}
                                     </div>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            propKey={'key'}
-                                            allowSearch={false}
-                                            value={form.values.application_method}
-                                            options={applicationMethods}
-                                            disabled={
-                                                (fund && fund.state != 'waiting') ||
-                                                !hasPermission(activeOrganization, 'manage_funds')
-                                            }
-                                            onChange={(application_method: string) => {
-                                                form.update({ application_method });
-                                                onMethodChange(application_method, form.values.application_method);
-                                            }}
-                                        />
-                                    </div>
+
+                                    <SelectControl
+                                        propKey={'key'}
+                                        allowSearch={false}
+                                        value={form.values.application_method}
+                                        options={applicationMethods}
+                                        disabled={
+                                            (fund && fund.state != 'waiting') ||
+                                            !hasPermission(activeOrganization, 'manage_funds')
+                                        }
+                                        onChange={(application_method: string) => {
+                                            form.update({ application_method });
+                                            onMethodChange(application_method, form.values.application_method);
+                                        }}
+                                    />
                                 </div>
 
                                 {form.values.application_method != 'none' && (
-                                    <div className="form-group form-group-inline">
+                                    <div className="form-group">
                                         <label className="form-label form-label-required">
                                             {translate('funds_edit.labels.request_btn_text')}
                                         </label>
@@ -795,30 +786,29 @@ export default function OrganizationsFundsEdit() {
                                     </div>
                                 )}
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <div className="form-label form-label-required">
                                         {translate('funds_edit.labels.criteria_label_requirement_show')}
                                     </div>
-                                    <div className="form-offset">
-                                        <FormGroupInfo
-                                            info={
-                                                <Fragment>
-                                                    De optie om verplichte of optionele vragen in het aanvraagformulier
-                                                    te markeren met een informatieve tekst
-                                                </Fragment>
-                                            }>
-                                            <SelectControl
-                                                propKey={'value'}
-                                                allowSearch={false}
-                                                value={form.values.criteria_label_requirement_show}
-                                                options={shownCriteriaLabelDetails}
-                                                disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                                onChange={(criteria_label_requirement_show: string) => {
-                                                    form.update({ criteria_label_requirement_show });
-                                                }}
-                                            />
-                                        </FormGroupInfo>
-                                    </div>
+
+                                    <FormGroupInfo
+                                        info={
+                                            <Fragment>
+                                                De optie om verplichte of optionele vragen in het aanvraagformulier te
+                                                markeren met een informatieve tekst
+                                            </Fragment>
+                                        }>
+                                        <SelectControl
+                                            propKey={'value'}
+                                            allowSearch={false}
+                                            value={form.values.criteria_label_requirement_show}
+                                            options={shownCriteriaLabelDetails}
+                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                            onChange={(criteria_label_requirement_show: string) => {
+                                                form.update({ criteria_label_requirement_show });
+                                            }}
+                                        />
+                                    </FormGroupInfo>
                                 </div>
                             </div>
                         </div>
@@ -828,8 +818,8 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">
                                         {translate('funds_edit.labels.external_link_text')}
                                     </label>
@@ -844,20 +834,20 @@ export default function OrganizationsFundsEdit() {
                                     <FormError error={form.errors?.external_link_text} />
                                 </div>
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label">
                                         {translate('funds_edit.labels.external_link_url')}
                                     </label>
-                                    <div className="form-offset">
-                                        <input
-                                            className="form-control"
-                                            placeholder="https://gemeente+1.nl/aanmelden"
-                                            value={form.values.external_link_url || ''}
-                                            onChange={(e) => {
-                                                form.update({ external_link_url: e.target.value });
-                                            }}
-                                        />
-                                    </div>
+
+                                    <input
+                                        className="form-control"
+                                        placeholder="https://gemeente+1.nl/aanmelden"
+                                        value={form.values.external_link_url || ''}
+                                        onChange={(e) => {
+                                            form.update({ external_link_url: e.target.value });
+                                        }}
+                                    />
+
                                     <FormError error={form.errors?.external_link_url} />
                                 </div>
                             </div>
@@ -868,17 +858,17 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">{translate('funds_edit.labels.description')}</label>
-                                    <div className="form-offset">
-                                        <MarkdownEditor
-                                            value={form.values?.description_html || ''}
-                                            onChange={(description) => form.update({ description })}
-                                            extendedOptions={true}
-                                            placeholder={translate('organization_edit.labels.description')}
-                                        />
-                                    </div>
+
+                                    <MarkdownEditor
+                                        value={form.values?.description_html || ''}
+                                        onChange={(description) => form.update({ description })}
+                                        extendedOptions={true}
+                                        placeholder={translate('organization_edit.labels.description')}
+                                    />
+
                                     <FormError error={form.errors?.description} />
                                 </div>
                             </div>
@@ -888,8 +878,8 @@ export default function OrganizationsFundsEdit() {
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-xs-12">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">Aanbod plaatsen verzoek</label>
                                 <CheckboxControl
                                     id={'provider_products_required'}
@@ -912,30 +902,33 @@ export default function OrganizationsFundsEdit() {
 
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
-                        <div className="form-group form-group-inline">
-                            <label className="form-label">Titel van blok</label>
-                            <input
-                                className="form-control"
-                                placeholder="Veel gestelde vragen"
-                                value={form.values.faq_title || ''}
-                                onChange={(e) => {
-                                    form.update({ faq_title: e.target.value });
-                                }}
-                            />
-                            <FormError error={form.errors?.faq_title} />
-                        </div>
+                        <div className="row">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
+                                    <label className="form-label">Titel van blok</label>
+                                    <input
+                                        className="form-control"
+                                        placeholder="Veel gestelde vragen"
+                                        value={form.values.faq_title || ''}
+                                        onChange={(e) => {
+                                            form.update({ faq_title: e.target.value });
+                                        }}
+                                    />
+                                    <FormError error={form.errors?.faq_title} />
+                                </div>
 
-                        <div className="form-group form-group-inline">
-                            <label className="form-label">Veel gestelde vragen</label>
-                            <div className="form-offset">
-                                <FaqEditor
-                                    faq={faq}
-                                    organization={activeOrganization}
-                                    setFaq={setFaq}
-                                    errors={form?.errors}
-                                    setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
-                                    createFaqRef={faqEditorBlock}
-                                />
+                                <div className="form-group">
+                                    <label className="form-label">Veel gestelde vragen</label>
+
+                                    <FaqEditor
+                                        faq={faq}
+                                        organization={activeOrganization}
+                                        setFaq={setFaq}
+                                        errors={form?.errors}
+                                        setErrors={(errors: ResponseErrorData) => form.setErrors(errors)}
+                                        createFaqRef={faqEditorBlock}
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -944,23 +937,22 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">
                                         {translate('funds_edit.labels.description_position')}
                                     </label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            propKey={'value'}
-                                            allowSearch={false}
-                                            value={form.values.description_position}
-                                            options={descriptionPositions}
-                                            onChange={(description_position: string) => {
-                                                form.update({ description_position });
-                                            }}
-                                        />
-                                        <FormError error={form.errors?.description_position} />
-                                    </div>
+
+                                    <SelectControl
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={form.values.description_position}
+                                        options={descriptionPositions}
+                                        onChange={(description_position: string) => {
+                                            form.update({ description_position });
+                                        }}
+                                    />
+                                    <FormError error={form.errors?.description_position} />
                                 </div>
                             </div>
                         </div>
@@ -969,8 +961,8 @@ export default function OrganizationsFundsEdit() {
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-lg-12">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('funds_edit.labels.start')}
                                 </label>
@@ -989,7 +981,7 @@ export default function OrganizationsFundsEdit() {
                                 <FormError error={form.errors?.start_date} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('funds_edit.labels.end')}
                                 </label>
@@ -1014,80 +1006,96 @@ export default function OrganizationsFundsEdit() {
 
                 {hasFundFormula && (
                     <div className="card-section card-section-primary">
-                        {(form.values.formula_products as FundFormulaProduct[]).map((formulaProduct, index) => (
-                            <div className="form-group form-group-inline" key={index}>
-                                <div className="form-label">
-                                    {index == 0 ? translate('funds_edit.labels.products') : ''}
-                                </div>
+                        <div className="row">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                {(form.values.formula_products as FundFormulaProduct[]).map((formulaProduct, index) => (
+                                    <div className="form-group" key={index}>
+                                        <div className="form-label">
+                                            {index == 0 ? translate('funds_edit.labels.products') : ''}
+                                        </div>
 
-                                <div className="form-offset">
-                                    <div className="flex-row">
-                                        <div className="flex-col flex-grow">
-                                            <div className="flex-row flex-grow">
-                                                <div className="flex-col flex-col-4">
-                                                    <SelectControl
-                                                        propKey={'id'}
-                                                        value={formulaProduct.product_id}
-                                                        placeholder="Selecteer aanbieding..."
-                                                        options={productOptions?.[index] || []}
-                                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                                        onChange={(product_id: number) => {
-                                                            updateFormFormulaProduct(index, 'product_id', product_id);
-                                                        }}
-                                                    />
-                                                    <FormError
-                                                        error={form.errors?.[`formula_products.${index}.product_id`]}
-                                                    />
-                                                </div>
-                                                <div className="flex-col flex-col-2">
-                                                    <SelectControl
-                                                        propKey={'key'}
-                                                        value={formulaProduct.record_type_key_multiplier}
-                                                        placeholder="Selecteer aanbieding..."
-                                                        options={recordTypesMultiplier}
-                                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                                        onChange={(record_type_key_multiplier: string) => {
-                                                            updateFormFormulaProduct(
-                                                                index,
-                                                                'record_type_key_multiplier',
-                                                                record_type_key_multiplier,
-                                                            );
-                                                        }}
-                                                    />
-                                                    <FormError
-                                                        error={
-                                                            form.errors?.[
-                                                                `formula_products.${index}.record_type_key_multiplier`
-                                                            ]
-                                                        }
-                                                    />
+                                        <div className="flex-row">
+                                            <div className="flex-col flex-grow">
+                                                <div className="flex-row flex-grow">
+                                                    <div className="flex-col flex-col-4">
+                                                        <SelectControl
+                                                            propKey={'id'}
+                                                            value={formulaProduct.product_id}
+                                                            placeholder="Selecteer aanbieding..."
+                                                            options={productOptions?.[index] || []}
+                                                            disabled={
+                                                                !hasPermission(activeOrganization, 'manage_funds')
+                                                            }
+                                                            onChange={(product_id: number) => {
+                                                                updateFormFormulaProduct(
+                                                                    index,
+                                                                    'product_id',
+                                                                    product_id,
+                                                                );
+                                                            }}
+                                                        />
+                                                        <FormError
+                                                            error={
+                                                                form.errors?.[`formula_products.${index}.product_id`]
+                                                            }
+                                                        />
+                                                    </div>
+                                                    <div className="flex-col flex-col-2">
+                                                        <SelectControl
+                                                            propKey={'key'}
+                                                            value={formulaProduct.record_type_key_multiplier}
+                                                            placeholder="Selecteer aanbieding..."
+                                                            options={recordTypesMultiplier}
+                                                            disabled={
+                                                                !hasPermission(activeOrganization, 'manage_funds')
+                                                            }
+                                                            onChange={(record_type_key_multiplier: string) => {
+                                                                updateFormFormulaProduct(
+                                                                    index,
+                                                                    'record_type_key_multiplier',
+                                                                    record_type_key_multiplier,
+                                                                );
+                                                            }}
+                                                        />
+                                                        <FormError
+                                                            error={
+                                                                form.errors?.[
+                                                                    `formula_products.${index}.record_type_key_multiplier`
+                                                                ]
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
 
-                                        <div className="flex-col">
-                                            <div
-                                                className="button button-primary button-icon"
-                                                onClick={() => {
-                                                    form.values.formula_products.splice(index, 1);
-                                                    updateForm({ formula_products: form.values.formula_products });
-                                                }}>
-                                                <em className="mdi mdi-close" />
+                                            <div className="flex-col">
+                                                <div
+                                                    className="button button-primary button-icon"
+                                                    onClick={() => {
+                                                        form.values.formula_products.splice(index, 1);
+                                                        updateForm({
+                                                            formula_products: form.values.formula_products,
+                                                        });
+                                                    }}>
+                                                    <em className="mdi mdi-close" />
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
+                                ))}
+
+                                <div className="form-group">
+                                    <label className="form-label">
+                                        {!form.values.formula_products.length
+                                            ? translate('funds_edit.labels.products')
+                                            : ''}
+                                    </label>
+                                    <div className="button button-primary" onClick={() => addProduct()}>
+                                        <em className="mdi mdi-plus-circle icon-start" />
+                                        Aanbieding toevoegen
+                                    </div>
                                 </div>
                             </div>
-                        ))}
-
-                        <div className="form-group form-group-inline">
-                            <label className="form-label">
-                                {!form.values.formula_products.length ? translate('funds_edit.labels.products') : ''}
-                            </label>
-                            <div className="button button-primary" onClick={() => addProduct()}>
-                                <em className="mdi mdi-plus-circle icon-start" />
-                                Aanbieding toevoegen
-                            </div>
                         </div>
                     </div>
                 )}
@@ -1095,26 +1103,26 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="form-group form-group-inline col col-lg-9 col-md-12">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                 <label className="form-label">Standaard beoordelaar</label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        propKey={'id'}
-                                        propValue={'email'}
-                                        allowSearch={false}
-                                        value={form.values.default_validator_employee_id}
-                                        options={validators}
-                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                        onChange={(default_validator_employee_id: number) => {
-                                            form.update({ default_validator_employee_id });
-                                        }}
-                                    />
-                                </div>
+
+                                <SelectControl
+                                    propKey={'id'}
+                                    propValue={'email'}
+                                    allowSearch={false}
+                                    value={form.values.default_validator_employee_id}
+                                    options={validators}
+                                    disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                    onChange={(default_validator_employee_id: number) => {
+                                        form.update({ default_validator_employee_id });
+                                    }}
+                                />
+
                                 <FormError error={form.errors?.default_validator_employee_id} />
                             </div>
 
                             {form.values.default_validator_employee_id && (
-                                <div className="form-group form-group-inline col col-lg-9 col-md-12">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
                                     <label className="form-label">Aanmeldingen</label>
                                     <CheckboxControl
                                         title={'Automatisch goedkeuren wanneer er een BSN-nummer vast staat.'}
@@ -1134,16 +1142,15 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <div className="form-label">Instellingen aanvraagformulier</div>
-                                    <div className="form-offset">
-                                        <FundConfigContactInfoEditor
-                                            value={form.values}
-                                            onChange={form.update}
-                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                        />
-                                    </div>
+
+                                    <FundConfigContactInfoEditor
+                                        value={form.values}
+                                        onChange={form.update}
+                                        disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -1153,35 +1160,34 @@ export default function OrganizationsFundsEdit() {
                 {!form.values.external_page && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <div className="form-label">
                                         {translate('funds_edit.labels.notification_amount')}
                                     </div>
-                                    <div className="form-offset">
-                                        <FormGroupInfo
-                                            info={
-                                                <Fragment>
-                                                    Handig! Stel een minimum bedrag in voor het saldo van de regeling.
-                                                    Er wordt automatisch een e-mail verstuurd als het saldo voor de
-                                                    regeling lager is dan deze grens. De e-mail wordt verstuurd naar
-                                                    gebruikers met de rollen beheerder en financiën.
-                                                </Fragment>
-                                            }>
-                                            <input
-                                                className="form-control"
-                                                type="number"
-                                                value={form.values.notification_amount || ''}
-                                                onChange={(e) => {
-                                                    form.update({ notification_amount: e.target.value });
-                                                }}
-                                                disabled={!hasPermission(activeOrganization, 'manage_funds')}
-                                                placeholder={translate('funds_edit.labels.notification_amount')}
-                                            />
-                                        </FormGroupInfo>
 
-                                        <FormError error={form.errors?.notification_amount} />
-                                    </div>
+                                    <FormGroupInfo
+                                        info={
+                                            <Fragment>
+                                                Handig! Stel een minimum bedrag in voor het saldo van de regeling. Er
+                                                wordt automatisch een e-mail verstuurd als het saldo voor de regeling
+                                                lager is dan deze grens. De e-mail wordt verstuurd naar gebruikers met
+                                                de rollen beheerder en financiën.
+                                            </Fragment>
+                                        }>
+                                        <input
+                                            className="form-control"
+                                            type="number"
+                                            value={form.values.notification_amount || ''}
+                                            onChange={(e) => {
+                                                form.update({ notification_amount: e.target.value });
+                                            }}
+                                            disabled={!hasPermission(activeOrganization, 'manage_funds')}
+                                            placeholder={translate('funds_edit.labels.notification_amount')}
+                                        />
+                                    </FormGroupInfo>
+
+                                    <FormError error={form.errors?.notification_amount} />
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx b/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
index f1d306bb4..48be5fed2 100644
--- a/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
@@ -114,42 +114,34 @@ export default function OrganizationsFundsSecurity() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-lg-9 col-xs-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <div className="form-label">2FA beperkingen</div>
-                                    <div className="form-offset">
+
+                                    <SelectControl
+                                        className="form-control"
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={form.values?.auth_2fa_policy}
+                                        options={auth2FARequiredOptions}
+                                        onChange={(
+                                            auth_2fa_policy: 'global' | 'optional' | 'required' | 'restrict_features',
+                                        ) => form.update({ auth_2fa_policy })}
+                                    />
+                                </div>
+
+                                {form.values?.auth_2fa_policy == 'global' && (
+                                    <div className="form-group">
                                         <SelectControl
-                                            className="form-control"
+                                            className="form-control disabled"
                                             propKey={'value'}
                                             allowSearch={false}
-                                            value={form.values?.auth_2fa_policy}
+                                            value={fund.organization_funds_2fa.auth_2fa_policy}
                                             options={auth2FARequiredOptions}
-                                            onChange={(
-                                                auth_2fa_policy:
-                                                    | 'global'
-                                                    | 'optional'
-                                                    | 'required'
-                                                    | 'restrict_features',
-                                            ) => form.update({ auth_2fa_policy })}
+                                            disabled={true}
+                                            onChange={() => null}
                                         />
                                     </div>
-                                </div>
-
-                                {form.values?.auth_2fa_policy == 'global' && (
-                                    <div className="form-group form-group-inline">
-                                        <div className="form-label">&nbsp;</div>
-                                        <div className="form-offset">
-                                            <SelectControl
-                                                className="form-control disabled"
-                                                propKey={'value'}
-                                                allowSearch={false}
-                                                value={fund.organization_funds_2fa.auth_2fa_policy}
-                                                options={auth2FARequiredOptions}
-                                                disabled={true}
-                                                onChange={() => null}
-                                            />
-                                        </div>
-                                    </div>
                                 )}
 
                                 {form.values?.auth_2fa_policy != 'global' ? (
diff --git a/react/src/dashboard/components/pages/organizations-funds-security/elements/OrganizationsFundsSecurityAuth2FAForm.tsx b/react/src/dashboard/components/pages/organizations-funds-security/elements/OrganizationsFundsSecurityAuth2FAForm.tsx
index 7b52a5e73..b054a1990 100644
--- a/react/src/dashboard/components/pages/organizations-funds-security/elements/OrganizationsFundsSecurityAuth2FAForm.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-security/elements/OrganizationsFundsSecurityAuth2FAForm.tsx
@@ -37,72 +37,69 @@ export default function OrganizationsFundsSecurityAuth2FAForm({
     return (
         <Fragment>
             {formValues?.auth_2fa_policy == 'required' && (
-                <div className="form-group form-group-inline">
+                <div className="form-group">
                     <div className="form-label">Onthoud IP-adres</div>
-                    <div className="form-offset">
-                        <SelectControl
-                            className="form-control"
-                            propKey={'value'}
-                            allowSearch={false}
-                            value={formValues.auth_2fa_remember_ip}
-                            options={auth2FARememberIpOptions}
-                            disabled={disabled}
-                            onChange={(auth_2fa_remember_ip: boolean) =>
-                                setFormValues({ ...formValues, auth_2fa_remember_ip: auth_2fa_remember_ip })
-                            }
-                        />
-                    </div>
+
+                    <SelectControl
+                        className="form-control"
+                        propKey={'value'}
+                        allowSearch={false}
+                        value={formValues.auth_2fa_remember_ip}
+                        options={auth2FARememberIpOptions}
+                        disabled={disabled}
+                        onChange={(auth_2fa_remember_ip: boolean) =>
+                            setFormValues({ ...formValues, auth_2fa_remember_ip: auth_2fa_remember_ip })
+                        }
+                    />
+
                     <FormError error={formErrors?.auth_2fa_remember_ip} />
                 </div>
             )}
 
-            <div className="form-group form-group-inline">
-                <div className="form-label"></div>
-                <div className="form-offset">
-                    <div>
-                        {formValues?.auth_2fa_policy == 'restrict_features' && (
-                            <CheckboxControl
-                                title={'Aanpassen van e-mailadres'}
-                                checked={formValues?.auth_2fa_restrict_emails}
-                                disabled={disabled}
-                                onChange={(e) =>
-                                    setFormValues({ ...formValues, auth_2fa_restrict_emails: e.target.checked })
-                                }
-                            />
-                        )}
-                    </div>
+            <div className="form-group">
+                <div>
+                    {formValues?.auth_2fa_policy == 'restrict_features' && (
+                        <CheckboxControl
+                            title={'Aanpassen van e-mailadres'}
+                            checked={formValues?.auth_2fa_restrict_emails}
+                            disabled={disabled}
+                            onChange={(e) =>
+                                setFormValues({ ...formValues, auth_2fa_restrict_emails: e.target.checked })
+                            }
+                        />
+                    )}
+                </div>
 
-                    <div>
-                        {formValues?.auth_2fa_policy == 'restrict_features' && (
-                            <CheckboxControl
-                                title={'Aanpassen van inlog sessies'}
-                                checked={formValues?.auth_2fa_restrict_auth_sessions}
-                                disabled={disabled}
-                                onChange={(e) =>
-                                    setFormValues({
-                                        ...formValues,
-                                        auth_2fa_restrict_auth_sessions: e.target.checked,
-                                    })
-                                }
-                            />
-                        )}
-                    </div>
+                <div>
+                    {formValues?.auth_2fa_policy == 'restrict_features' && (
+                        <CheckboxControl
+                            title={'Aanpassen van inlog sessies'}
+                            checked={formValues?.auth_2fa_restrict_auth_sessions}
+                            disabled={disabled}
+                            onChange={(e) =>
+                                setFormValues({
+                                    ...formValues,
+                                    auth_2fa_restrict_auth_sessions: e.target.checked,
+                                })
+                            }
+                        />
+                    )}
+                </div>
 
-                    <div>
-                        {formValues?.auth_2fa_policy == 'restrict_features' && (
-                            <CheckboxControl
-                                title={'Indienen van declaraties'}
-                                checked={formValues?.auth_2fa_restrict_reimbursements}
-                                disabled={disabled}
-                                onChange={(e) =>
-                                    setFormValues({
-                                        ...formValues,
-                                        auth_2fa_restrict_reimbursements: e.target.checked,
-                                    })
-                                }
-                            />
-                        )}
-                    </div>
+                <div>
+                    {formValues?.auth_2fa_policy == 'restrict_features' && (
+                        <CheckboxControl
+                            title={'Indienen van declaraties'}
+                            checked={formValues?.auth_2fa_restrict_reimbursements}
+                            disabled={disabled}
+                            onChange={(e) =>
+                                setFormValues({
+                                    ...formValues,
+                                    auth_2fa_restrict_reimbursements: e.target.checked,
+                                })
+                            }
+                        />
+                    )}
                 </div>
             </div>
         </Fragment>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
index 73de62a85..01c0a2a1e 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowStatisticsCard.tsx
@@ -92,7 +92,7 @@ export default function OrganizationsFundsShowStatisticsCard({
                         <a
                             className={`keyvalue-item col col-lg-3 ${!canAccessFund ? 'keyvalue-item-disabled' : ''}`}
                             onClick={() => {
-                                navigateState('csv-validation', { fundId: fund.organization_id });
+                                navigateState('csv-validation', { organizationId: fund.organization_id });
                             }}>
                             <div className="keyvalue-key">{translate('fund_card_sponsor.labels.applicants')}</div>
                             <div className="keyvalue-value">
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 288637c3f..d5fcf961c 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
@@ -15,6 +15,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';
 
 export default function OrganizationsFundsShowImplementationsCard({
     fund,
@@ -191,12 +192,12 @@ export default function OrganizationsFundsShowImplementationsCard({
                                                 <td>{implementation?.name}</td>
                                                 {fund.state == 'active' && (
                                                     <td>
-                                                        <div className="label label-success">Zichtbaar</div>
+                                                        <Label type="success">Zichtbaar</Label>
                                                     </td>
                                                 )}
                                                 {fund.state != 'active' && (
                                                     <td>
-                                                        <div className="label label-success">Onzichtbaar</div>
+                                                        <Label type="default">Onzichtbaar</Label>
                                                     </td>
                                                 )}
 
diff --git a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
index 35c99251e..ffaa9cf88 100644
--- a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
+++ b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
@@ -126,56 +126,53 @@ export default function OrganizationsSecurity() {
                         {viewType == 'employees' && (
                             <div className="card-section card-section-primary">
                                 <div className="row">
-                                    <div className="col col-lg-9 col-xs-12">
-                                        <div className="form-group form-group-inline">
+                                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                        <div className="form-group">
                                             {' '}
                                             <label className="form-label">2FA beperkingen</label>
-                                            <div className="form-offset">
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey="value"
+                                                allowSearch={false}
+                                                value={form.values.auth_2fa_policy}
+                                                options={auth2FARequiredOptions}
+                                                onChange={(
+                                                    auth_2fa_policy: 'optional' | 'required' | 'restrict_features',
+                                                ) => form.update({ auth_2fa_policy })}
+                                            />
+                                            <FormError error={form.errors.auth_2fa_policy} />
+                                        </div>
+
+                                        {form.values.auth_2fa_policy == 'required' && (
+                                            <div className="form-group">
+                                                <label className="form-label">Onthoud IP-adres</label>
+
                                                 <SelectControl
                                                     className="form-control"
                                                     propKey="value"
                                                     allowSearch={false}
-                                                    value={form.values.auth_2fa_policy}
-                                                    options={auth2FARequiredOptions}
-                                                    onChange={(
-                                                        auth_2fa_policy: 'optional' | 'required' | 'restrict_features',
-                                                    ) => form.update({ auth_2fa_policy })}
+                                                    value={form.values.auth_2fa_remember_ip}
+                                                    options={auth2FARememberIpOptions}
+                                                    onChange={(auth_2fa_remember_ip: 1 | 0) =>
+                                                        form.update({ auth_2fa_remember_ip })
+                                                    }
                                                 />
-                                            </div>
-                                            <FormError error={form.errors.auth_2fa_policy} />
-                                        </div>
 
-                                        {form.values.auth_2fa_policy == 'required' && (
-                                            <div className="form-group form-group-inline">
-                                                <label className="form-label">Onthoud IP-adres</label>
-                                                <div className="form-offset">
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propKey="value"
-                                                        allowSearch={false}
-                                                        value={form.values.auth_2fa_remember_ip}
-                                                        options={auth2FARememberIpOptions}
-                                                        onChange={(auth_2fa_remember_ip: 1 | 0) =>
-                                                            form.update({ auth_2fa_remember_ip })
-                                                        }
-                                                    />
-                                                </div>
                                                 <FormError error={form.errors.auth_2fa_remember_ip} />
                                             </div>
                                         )}
 
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">Restrict features</label>
-                                            <div className="form-offset">
-                                                <div>
-                                                    <CheckboxControl
-                                                        title={'BI tools'}
-                                                        checked={form.values.auth_2fa_restrict_bi_connections}
-                                                        onChange={(_, checked) =>
-                                                            form.update({ auth_2fa_restrict_bi_connections: checked })
-                                                        }
-                                                    />
-                                                </div>
+
+                                            <div>
+                                                <CheckboxControl
+                                                    title={'BI tools'}
+                                                    checked={form.values.auth_2fa_restrict_bi_connections}
+                                                    onChange={(_, checked) =>
+                                                        form.update({ auth_2fa_restrict_bi_connections: checked })
+                                                    }
+                                                />
                                             </div>
                                         </div>
                                     </div>
@@ -186,83 +183,82 @@ export default function OrganizationsSecurity() {
                         {viewType == 'funds' && (
                             <div className="card-section card-section-primary">
                                 <div className="row">
-                                    <div className="col col-lg-9 col-xs-12">
-                                        <div className="form-group form-group-inline">
+                                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                        <div className="form-group">
                                             <label className="form-label">2FA beperkingen</label>
-                                            <div className="form-offset">
+
+                                            <SelectControl
+                                                className="form-control"
+                                                propKey="value"
+                                                allowSearch={false}
+                                                value={form.values.auth_2fa_funds_policy}
+                                                options={auth2FAFundsRequiredOptions}
+                                                onChange={(
+                                                    auth_2fa_funds_policy:
+                                                        | 'optional'
+                                                        | 'required'
+                                                        | 'restrict_features',
+                                                ) => form.update({ auth_2fa_funds_policy })}
+                                            />
+
+                                            <FormError error={form.errors?.auth_2fa_funds_policy} />
+                                        </div>
+
+                                        {form.values.auth_2fa_funds_policy == 'required' && (
+                                            <div className="form-group">
+                                                <label className="form-label">Onthoud IP-adres</label>
+
                                                 <SelectControl
                                                     className="form-control"
                                                     propKey="value"
                                                     allowSearch={false}
-                                                    value={form.values.auth_2fa_funds_policy}
-                                                    options={auth2FAFundsRequiredOptions}
-                                                    onChange={(
-                                                        auth_2fa_funds_policy:
-                                                            | 'optional'
-                                                            | 'required'
-                                                            | 'restrict_features',
-                                                    ) => form.update({ auth_2fa_funds_policy })}
+                                                    value={form.values.auth_2fa_funds_remember_ip}
+                                                    onChange={(auth_2fa_funds_remember_ip: 1 | 0) =>
+                                                        form.update({ auth_2fa_funds_remember_ip })
+                                                    }
+                                                    options={auth2FARememberIpOptions}
                                                 />
-                                            </div>
-                                            <FormError error={form.errors?.auth_2fa_funds_policy} />
-                                        </div>
 
-                                        {form.values.auth_2fa_funds_policy == 'required' && (
-                                            <div className="form-group form-group-inline">
-                                                <label className="form-label">Onthoud IP-adres</label>
-                                                <div className="form-offset">
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propKey="value"
-                                                        allowSearch={false}
-                                                        value={form.values.auth_2fa_funds_remember_ip}
-                                                        onChange={(auth_2fa_funds_remember_ip: 1 | 0) =>
-                                                            form.update({ auth_2fa_funds_remember_ip })
-                                                        }
-                                                        options={auth2FARememberIpOptions}
-                                                    />
-                                                </div>
                                                 <FormError error={form.errors?.auth_2fa_funds_remember_ip} />
                                             </div>
                                         )}
 
                                         {form.values.auth_2fa_funds_policy == 'restrict_features' && (
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label">Verplicht instellen voor</label>
-                                                <div className="form-offset">
-                                                    <div>
-                                                        <CheckboxControl
-                                                            title={'Aanpassen van e-mailadres'}
-                                                            checked={form.values.auth_2fa_funds_restrict_emails}
-                                                            onChange={(_, checked) =>
-                                                                form.update({ auth_2fa_funds_restrict_emails: checked })
-                                                            }
-                                                        />
-                                                    </div>
 
-                                                    <div>
-                                                        <CheckboxControl
-                                                            title={'Aanpassen van inlog sessies'}
-                                                            checked={form.values.auth_2fa_funds_restrict_auth_sessions}
-                                                            onChange={(_, checked) =>
-                                                                form.update({
-                                                                    auth_2fa_funds_restrict_auth_sessions: checked,
-                                                                })
-                                                            }
-                                                        />
-                                                    </div>
+                                                <div>
+                                                    <CheckboxControl
+                                                        title={'Aanpassen van e-mailadres'}
+                                                        checked={form.values.auth_2fa_funds_restrict_emails}
+                                                        onChange={(_, checked) =>
+                                                            form.update({ auth_2fa_funds_restrict_emails: checked })
+                                                        }
+                                                    />
+                                                </div>
 
-                                                    <div>
-                                                        <CheckboxControl
-                                                            title={'Indienen van declaraties'}
-                                                            checked={form.values.auth_2fa_funds_restrict_reimbursements}
-                                                            onChange={(_, checked) =>
-                                                                form.update({
-                                                                    auth_2fa_funds_restrict_reimbursements: checked,
-                                                                })
-                                                            }
-                                                        />
-                                                    </div>
+                                                <div>
+                                                    <CheckboxControl
+                                                        title={'Aanpassen van inlog sessies'}
+                                                        checked={form.values.auth_2fa_funds_restrict_auth_sessions}
+                                                        onChange={(_, checked) =>
+                                                            form.update({
+                                                                auth_2fa_funds_restrict_auth_sessions: checked,
+                                                            })
+                                                        }
+                                                    />
+                                                </div>
+
+                                                <div>
+                                                    <CheckboxControl
+                                                        title={'Indienen van declaraties'}
+                                                        checked={form.values.auth_2fa_funds_restrict_reimbursements}
+                                                        onChange={(_, checked) =>
+                                                            form.update({
+                                                                auth_2fa_funds_restrict_reimbursements: checked,
+                                                            })
+                                                        }
+                                                    />
                                                 </div>
                                             </div>
                                         )}
diff --git a/react/src/dashboard/components/pages/organizations-translations/OrganizationsTranslations.tsx b/react/src/dashboard/components/pages/organizations-translations/OrganizationsTranslations.tsx
index cf74bf17c..2853fd290 100644
--- a/react/src/dashboard/components/pages/organizations-translations/OrganizationsTranslations.tsx
+++ b/react/src/dashboard/components/pages/organizations-translations/OrganizationsTranslations.tsx
@@ -200,8 +200,6 @@ export default function OrganizationsTranslations() {
                         <div className="row">
                             <div className="col col-lg-9 col-xs-12">
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'lg'}
                                     label={'Vertalingen inschakelen'}
                                     error={form.errors?.translations_enabled}
                                     input={(id) => (
@@ -234,8 +232,6 @@ export default function OrganizationsTranslations() {
                         <div className="row">
                             <div className="col col-lg-9 col-xs-12">
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'lg'}
                                     label={'Daglimiet'}
                                     error={form.errors?.translations_daily_limit}
                                     input={(id) => (
@@ -261,8 +257,6 @@ export default function OrganizationsTranslations() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'lg'}
                                     label={'Weeklimiet'}
                                     error={form.errors?.translations_weekly_limit}
                                     input={(id) => (
@@ -290,8 +284,6 @@ export default function OrganizationsTranslations() {
                                     )}
                                 />
                                 <FormGroup
-                                    inline={true}
-                                    inlineSize={'lg'}
                                     label={'Maandlimiet'}
                                     error={form.errors?.translations_monthly_limit}
                                     input={(id) => (
diff --git a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
index 922a24efe..fc492d576 100644
--- a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
@@ -21,6 +21,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';
 
 export default function PaymentMethods() {
     const activeOrganization = useActiveOrganization();
@@ -226,14 +227,14 @@ export default function PaymentMethods() {
                                                 {translate('mollie_connection.header.title')}
                                             </span>
                                             <div className="flex flex-grow"></div>
-                                            <label
-                                                className={
-                                                    (mollieConnection.onboarding_state == 'completed'
-                                                        ? 'label-success'
-                                                        : 'label-warning') + ' label'
+                                            <Label
+                                                type={
+                                                    mollieConnection.onboarding_state == 'completed'
+                                                        ? 'success'
+                                                        : 'warning'
                                                 }>
                                                 {mollieConnection.onboarding_state_locale}
-                                            </label>
+                                            </Label>
                                         </div>
 
                                         <div className="flex">
diff --git a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionForm.tsx b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionForm.tsx
index 20ebd0094..b6bed8e4c 100644
--- a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionForm.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionForm.tsx
@@ -85,13 +85,13 @@ export default function MollieConnectionForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-lg-12">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label">&nbsp;</label>
                                 <div className="form-title">{translate('mollie_connection.titles.address')}</div>
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('mollie_connection.labels.country')}
                                 </label>
@@ -106,7 +106,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.country_code} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label">{translate('mollie_connection.labels.city')}</label>
                                 <input
                                     className="form-control"
@@ -118,7 +118,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.city} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label">{translate('mollie_connection.labels.street')}</label>
                                 <input
                                     className="form-control"
@@ -130,7 +130,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.street} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label">{translate('mollie_connection.labels.postcode')}</label>
                                 <input
                                     className="form-control"
@@ -147,15 +147,15 @@ export default function MollieConnectionForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-lg-9 col-lg-12">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label">&nbsp;</label>
                                 <div className="form-title">
                                     {translate('mollie_connection.titles.contact_information')}
                                 </div>
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('mollie_connection.labels.organization_name')}
                                 </label>
@@ -169,7 +169,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.name} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('mollie_connection.labels.first_name')}
                                 </label>
@@ -183,7 +183,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.first_name} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('mollie_connection.labels.last_name')}
                                 </label>
@@ -197,7 +197,7 @@ export default function MollieConnectionForm({
                                 <FormError error={form.errors.last_name} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('mollie_connection.labels.email')}
                                 </label>
@@ -217,15 +217,15 @@ export default function MollieConnectionForm({
                 <div className="card-section card-section-primary">
                     <div className="form-group">
                         <div className="row">
-                            <div className="col col-lg-9 col-lg-12">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">&nbsp;</label>
                                     <div className="form-title">
                                         {translate('mollie_connection.titles.profile_information')}
                                     </div>
                                 </div>
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">
                                         {translate('mollie_connection.labels.profile_name')}
                                     </label>
@@ -239,7 +239,7 @@ export default function MollieConnectionForm({
                                     <FormError error={form.errors.profile_name} />
                                 </div>
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">
                                         {translate('mollie_connection.labels.phone')}
                                     </label>
@@ -253,7 +253,7 @@ export default function MollieConnectionForm({
                                     <FormError error={form.errors.phone} />
                                 </div>
 
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">
                                         {translate('mollie_connection.labels.website')}
                                     </label>
diff --git a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
index 7594fa50b..ccfad1fa8 100644
--- a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
@@ -160,15 +160,15 @@ export default function MollieConnectionProfileDetails({
                         <div className="card-section card-section-primary">
                             <div className="form-group">
                                 <div className="row">
-                                    <div className="col col-lg-9 col-lg-12">
-                                        <div className="form-group form-group-inline">
+                                    <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                        <div className="form-group">
                                             <label className="form-label">&nbsp;</label>
                                             <div className="form-title">
                                                 {translate('mollie_connection.titles.profile_information')}
                                             </div>
                                         </div>
 
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('mollie_connection.labels.profile_name')}
                                             </label>
@@ -182,7 +182,7 @@ export default function MollieConnectionProfileDetails({
                                             <FormError error={form.errors.name} />
                                         </div>
 
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('mollie_connection.labels.email')}
                                             </label>
@@ -196,7 +196,7 @@ export default function MollieConnectionProfileDetails({
                                             <FormError error={form.errors.email} />
                                         </div>
 
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('mollie_connection.labels.phone')}
                                             </label>
@@ -210,7 +210,7 @@ export default function MollieConnectionProfileDetails({
                                             <FormError error={form.errors.phone} />
                                         </div>
 
-                                        <div className="form-group form-group-inline">
+                                        <div className="form-group">
                                             <label className="form-label">
                                                 {translate('mollie_connection.labels.website')}
                                             </label>
diff --git a/react/src/dashboard/components/pages/pre-check/PreCheck.tsx b/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
index 032439e01..26790ff8f 100644
--- a/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
+++ b/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
@@ -465,74 +465,64 @@ export default function PreCheck() {
                 </div>
 
                 <div className="card-section card-section-primary">
-                    <div className="form-group">
-                        <div className="form-offset">
-                            <PhotoSelector
-                                type={'pre_check_banner'}
-                                thumbnail={thumbnailMedia?.sizes.thumbnail}
-                                selectPhoto={selectPhoto}
-                            />
-                        </div>
-                    </div>
+                    <PhotoSelector
+                        type={'pre_check_banner'}
+                        thumbnail={thumbnailMedia?.sizes.thumbnail}
+                        selectPhoto={selectPhoto}
+                    />
 
                     <div className="form-group">
                         <div className="form-label">Actieve banner</div>
-                        <div className="form-offset">
-                            <SelectControl
-                                className={'form-control'}
-                                propKey={'value'}
-                                allowSearch={false}
-                                options={bannerStates}
-                                value={bannerForm.values.pre_check_banner_state}
-                                onChange={(pre_check_banner_state: string) => {
-                                    bannerForm.update({ pre_check_banner_state });
-                                }}
-                            />
-                            <FormError error={bannerForm.errors?.pre_check_banner_state} />
-                        </div>
+
+                        <SelectControl
+                            className={'form-control'}
+                            propKey={'value'}
+                            allowSearch={false}
+                            options={bannerStates}
+                            value={bannerForm.values.pre_check_banner_state}
+                            onChange={(pre_check_banner_state: string) => {
+                                bannerForm.update({ pre_check_banner_state });
+                            }}
+                        />
+                        <FormError error={bannerForm.errors?.pre_check_banner_state} />
                     </div>
 
                     <div className="form-group">
                         <div className="form-label form-label-required">
                             {translate('funds_pre_check.labels.title')}
                         </div>
-                        <div className="form-offset">
-                            <input
-                                className={'form-control r-n'}
-                                placeholder={translate('funds_pre_check.labels.title')}
-                                value={bannerForm.values.pre_check_banner_title || ''}
-                                onChange={(e) => bannerForm.update({ pre_check_banner_title: e.target.value })}
-                            />
-                            <FormError error={bannerForm.errors?.pre_check_banner_title} />
-                        </div>
+                        <input
+                            className={'form-control r-n'}
+                            placeholder={translate('funds_pre_check.labels.title')}
+                            value={bannerForm.values.pre_check_banner_title || ''}
+                            onChange={(e) => bannerForm.update({ pre_check_banner_title: e.target.value })}
+                        />
+                        <FormError error={bannerForm.errors?.pre_check_banner_title} />
                     </div>
 
                     <div className="form-group">
                         <div className="form-label form-label-required">
                             {translate('funds_pre_check.labels.description')}
                         </div>
-                        <div className="form-offset">
-                            <textarea
-                                className={'form-control r-n'}
-                                placeholder={translate('funds_pre_check.labels.description')}
-                                value={bannerForm.values.pre_check_banner_description || ''}
-                                onChange={(e) => bannerForm.update({ pre_check_banner_description: e.target.value })}
-                            />
-                            <FormError error={bannerForm.errors?.pre_check_banner_description} />
-                        </div>
+                        <textarea
+                            className={'form-control r-n'}
+                            placeholder={translate('funds_pre_check.labels.description')}
+                            value={bannerForm.values.pre_check_banner_description || ''}
+                            onChange={(e) => bannerForm.update({ pre_check_banner_description: e.target.value })}
+                        />
+                        <FormError error={bannerForm.errors?.pre_check_banner_description} />
                     </div>
 
                     <div className="form-group">
                         <div className="form-label">{translate('funds_pre_check.labels.label')}</div>
-                        <div className="form-offset">
-                            <input
-                                className={'form-control r-n'}
-                                placeholder={translate('funds_pre_check.labels.label')}
-                                value={bannerForm.values.pre_check_banner_label || ''}
-                                onChange={(e) => bannerForm.update({ pre_check_banner_label: e.target.value })}
-                            />
-                            <FormError error={bannerForm.errors?.pre_check_banner_label} />
-                        </div>
+
+                        <input
+                            className={'form-control r-n'}
+                            placeholder={translate('funds_pre_check.labels.label')}
+                            value={bannerForm.values.pre_check_banner_label || ''}
+                            onChange={(e) => bannerForm.update({ pre_check_banner_label: e.target.value })}
+                        />
+                        <FormError error={bannerForm.errors?.pre_check_banner_label} />
                     </div>
 
                     <InfoBox>
diff --git a/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
similarity index 59%
rename from react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx
rename to react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
index cffff506d..747d96d55 100644
--- a/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx
+++ b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
@@ -1,55 +1,61 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import Fund from '../../../../props/models/Fund';
-import RecordType from '../../../../props/models/RecordType';
-import useFilter from '../../../../hooks/useFilter';
-import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import ClickOutside from '../../../elements/click-outside/ClickOutside';
-import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
-import SelectControl from '../../../elements/select-control/SelectControl';
-import { dateFormat, dateParse } from '../../../../helpers/dates';
-import DatePickerControl from '../../../elements/forms/controls/DatePickerControl';
-import useOpenModal from '../../../../hooks/useOpenModal';
-import { PaginationData } from '../../../../props/ApiResponses';
-import Prevalidation from '../../../../props/models/Prevalidation';
-import { usePrevalidationService } from '../../../../services/PrevalidationService';
-import Paginator from '../../../../modules/paginator/components/Paginator';
-import { useEmployeeService } from '../../../../services/EmployeeService';
-import useActiveOrganization from '../../../../hooks/useActiveOrganization';
-import ModalNotification from '../../../modals/ModalNotification';
-import usePushSuccess from '../../../../hooks/usePushSuccess';
-import LoadingCard from '../../../elements/loading-card/LoadingCard';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
-import useTranslate from '../../../../hooks/useTranslate';
-import useSetProgress from '../../../../hooks/useSetProgress';
-import Employee from '../../../../props/models/Employee';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import TableRowActions from '../../../elements/tables/TableRowActions';
-import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import usePrevalidationExporter from '../../../../services/exporters/usePrevalidationExporter';
-
-export default function PrevalidatedTable({
-    fund,
-    recordTypes = [],
-    externalFilters = {},
-}: {
-    fund: Fund;
-    recordTypes: Array<RecordType>;
-    externalFilters: object;
-}) {
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { useFundService } from '../../../services/FundService';
+import Fund from '../../../props/models/Fund';
+import { useRecordTypeService } from '../../../services/RecordTypeService';
+import RecordType from '../../../props/models/RecordType';
+import useTranslate from '../../../hooks/useTranslate';
+import LoadingCard from '../../elements/loading-card/LoadingCard';
+import { hasPermission } from '../../../helpers/utils';
+import useSetProgress from '../../../hooks/useSetProgress';
+import SelectControl from '../../elements/select-control/SelectControl';
+import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
+import useActiveOrganization from '../../../hooks/useActiveOrganization';
+import useOpenModal from '../../../hooks/useOpenModal';
+import usePushSuccess from '../../../hooks/usePushSuccess';
+import { useEmployeeService } from '../../../services/EmployeeService';
+import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
+import { usePrevalidationService } from '../../../services/PrevalidationService';
+import Employee from '../../../props/models/Employee';
+import { PaginationData } from '../../../props/ApiResponses';
+import Prevalidation from '../../../props/models/Prevalidation';
+import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
+import useFilterNext from '../../../modules/filter_next/useFilterNext';
+import ModalNotification from '../../modals/ModalNotification';
+import ModalCreatePrevalidation from '../../modals/ModalCreatePrevalidation';
+import ModalPrevalidationsUpload from '../../modals/ModalPrevalidationsUpload';
+import ClickOutside from '../../elements/click-outside/ClickOutside';
+import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
+import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
+import { dateFormat, dateParse } from '../../../helpers/dates';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
+import TableTopScroller from '../../elements/tables/TableTopScroller';
+import { strLimit } from '../../../helpers/string';
+import TableRowActions from '../../elements/tables/TableRowActions';
+import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
+import Paginator from '../../../modules/paginator/components/Paginator';
+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';
+
+export default function Prevalidations() {
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
-
+    const pushSuccess = usePushSuccess();
     const activeOrganization = useActiveOrganization();
-    const prevalidationExporter = usePrevalidationExporter();
 
+    const fundService = useFundService();
     const employeeService = useEmployeeService();
     const paginatorService = usePaginatorService();
+    const recordTypeService = useRecordTypeService();
     const prevalidationService = usePrevalidationService();
 
+    const prevalidationExporter = usePrevalidationExporter();
+
+    const [funds, setFunds] = useState<Array<Fund>>(null);
     const [paginatorKey] = useState('products');
+    const [recordTypes, setRecordTypes] = useState<Array<RecordType>>(null);
 
     const [employees, setEmployees] = useState<Array<Employee>>(null);
     const [prevalidations, setPrevalidations] = useState<PaginationData<Prevalidation>>(null);
@@ -74,7 +80,49 @@ export default function PrevalidatedTable({
         { key: 0, name: 'Nee' },
     ]);
 
+    const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
+        q?: string;
+        to?: string;
+        from?: string;
+        state?: string;
+        fund_id?: number;
+        exported?: number;
+        page?: number;
+        per_page?: number;
+    }>(
+        {
+            q: '',
+            fund_id: null,
+            state: states[0].key,
+            exported: statesExported[0].key,
+            from: null,
+            to: null,
+            page: 1,
+            per_page: paginatorService.getPerPage(paginatorKey, 10),
+        },
+        {
+            queryParams: {
+                q: StringParam,
+                fund_id: NumberParam,
+                state: StringParam,
+                exported: NumberParam,
+                from: StringParam,
+                to: StringParam,
+                per_page: NumberParam,
+                page: NumberParam,
+            },
+        },
+    );
+
+    const fund = useMemo(() => {
+        return funds?.find((fund) => fund.id === filterValues?.fund_id);
+    }, [funds, filterValues?.fund_id]);
+
     const headers = useMemo(() => {
+        if (!fund?.csv_primary_key) {
+            return null;
+        }
+
         const headers: string[] = prevalidations?.data
             ?.reduce((headers, prevalidation) => {
                 return prevalidation.records
@@ -85,15 +133,15 @@ export default function PrevalidatedTable({
             ?.filter((header: string) => !header?.endsWith('_hash'))
             ?.sort();
 
-        const primaryKey = headers?.indexOf(fund.csv_primary_key);
+        const primaryKey = headers?.indexOf(fund?.csv_primary_key);
 
         if (primaryKey !== -1) {
             headers?.splice(primaryKey, 1);
-            headers?.unshift(fund.csv_primary_key);
+            headers?.unshift(fund?.csv_primary_key);
         }
 
         return headers;
-    }, [fund.csv_primary_key, prevalidations]);
+    }, [fund?.csv_primary_key, prevalidations]);
 
     const rows = useMemo(() => {
         return prevalidations?.data?.map((prevalidation) => ({
@@ -108,32 +156,26 @@ export default function PrevalidatedTable({
         prevalidationService.getColumns(headers || [], typesByKey),
     );
 
-    const filter = useFilter({
-        q: '',
-        fund_id: fund ? fund.id : null,
-        state: states[0].key,
-        exported: statesExported[0].key,
-        from: null,
-        to: null,
-        per_page: paginatorService.getPerPage(paginatorKey),
-    });
-
     const exportData = useCallback(() => {
         prevalidationExporter.exportData(activeOrganization.id, {
-            ...externalFilters,
+            ...filterValuesActive,
             ...filter.activeValues,
             fund_id: fund.id,
         });
-    }, [activeOrganization.id, externalFilters, filter.activeValues, fund.id, prevalidationExporter]);
+    }, [activeOrganization.id, filterValuesActive, filter.activeValues, fund?.id, prevalidationExporter]);
 
     const fetchPrevalidations = useCallback(() => {
+        if (!fund?.id) {
+            return;
+        }
+
         setProgress(0);
 
         prevalidationService
-            .list({ ...externalFilters, ...filter.activeValues, fund_id: fund.id })
+            .list(activeOrganization.id, { ...filterValuesActive, fund_id: fund.id })
             .then((res) => setPrevalidations(res.data))
             .finally(() => setProgress(100));
-    }, [setProgress, prevalidationService, externalFilters, filter.activeValues, fund.id]);
+    }, [setProgress, prevalidationService, filterValuesActive, fund?.id, activeOrganization.id]);
 
     const fetchEmployees = useCallback(() => {
         setProgress(0);
@@ -144,6 +186,29 @@ export default function PrevalidatedTable({
             .finally(() => setProgress(100));
     }, [setProgress, activeOrganization.id, employeeService]);
 
+    const fetchFunds = useCallback(() => {
+        setProgress(0);
+
+        fundService
+            .list(activeOrganization?.id, { state: 'active_paused_and_closed' })
+            .then((res) => {
+                const funds = res.data.data.filter((fund) => hasPermission(fund.organization, 'validate_records'));
+
+                setFunds(funds);
+                filterUpdate({ fund_id: funds?.[0]?.id });
+            })
+            .finally(() => setProgress(100));
+    }, [setProgress, fundService, activeOrganization?.id, filterUpdate]);
+
+    const fetchRecordTypes = useCallback(() => {
+        setProgress(0);
+
+        recordTypeService
+            .list()
+            .then((res) => setRecordTypes(res.data))
+            .finally(() => setProgress(100));
+    }, [recordTypeService, setProgress]);
+
     const deletePrevalidation = useCallback(
         (prevalidation: Prevalidation) => {
             openModal((modal) => (
@@ -159,10 +224,12 @@ export default function PrevalidatedTable({
                         onClick: () => {
                             modal.close();
 
-                            prevalidationService.destroy(prevalidation.uid).then(() => {
-                                pushSuccess('Gegeven verwijderd');
-                                fetchPrevalidations();
-                            });
+                            prevalidationService
+                                .destroy(prevalidation.fund.organization_id, prevalidation.uid)
+                                .then(() => {
+                                    pushSuccess('Gegeven verwijderd');
+                                    fetchPrevalidations();
+                                });
                         },
                     }}
                     buttonCancel={{ onClick: () => modal.close() }}
@@ -172,6 +239,29 @@ export default function PrevalidatedTable({
         [fetchPrevalidations, openModal, prevalidationService, pushSuccess],
     );
 
+    const createPrevalidation = useCallback(
+        (fund: Fund, onCreate?: () => void) => {
+            openModal((modal) => (
+                <ModalCreatePrevalidation
+                    modal={modal}
+                    fund={fund}
+                    recordTypes={recordTypes}
+                    onCreated={() => onCreate?.()}
+                />
+            ));
+        },
+        [openModal, recordTypes],
+    );
+
+    const uploadPrevalidations = useCallback(
+        (fund: Fund, onCreate?: () => void) => {
+            openModal((modal) => (
+                <ModalPrevalidationsUpload modal={modal} recordTypes={recordTypes} fund={fund} onCompleted={onCreate} />
+            ));
+        },
+        [openModal, recordTypes],
+    );
+
     useEffect(() => {
         fetchEmployees();
     }, [fetchEmployees]);
@@ -180,6 +270,18 @@ export default function PrevalidatedTable({
         fetchPrevalidations();
     }, [fetchPrevalidations]);
 
+    useEffect(() => {
+        fetchFunds();
+    }, [fetchFunds]);
+
+    useEffect(() => {
+        fetchRecordTypes();
+    }, [fetchRecordTypes]);
+
+    if (funds?.length === 0) {
+        return <EmptyCard title={'Geen fondsen gevonden'} />;
+    }
+
     if (!prevalidations) {
         return <LoadingCard />;
     }
@@ -187,9 +289,41 @@ export default function PrevalidatedTable({
     return (
         <div className="card form" data-dusk="tablePrevalidationContent">
             <div className="card-header">
-                <div className="card-title flex flex-grow">{translate('prevalidated_table.header.title')}</div>
+                <div className="card-title flex flex-grow">
+                    {translate('prevalidated_table.header.title')} ({prevalidations?.meta?.total})
+                </div>
                 <div className="card-header-filters">
-                    <div className="block block-inline-filters ">
+                    <div className="block block-inline-filters">
+                        <button
+                            id="create_voucher"
+                            className="button button-primary"
+                            disabled={funds?.filter((fund) => fund.id)?.length < 1}
+                            onClick={() => createPrevalidation(fund, fetchPrevalidations)}>
+                            <em className="mdi mdi-plus-circle icon-start" />
+                            {translate('csv_validation.buttons.create')}
+                        </button>
+
+                        <button
+                            id="prevalidations_upload_csv"
+                            className="button button-primary"
+                            onClick={() => uploadPrevalidations(fund, fetchPrevalidations)}>
+                            <em className="mdi mdi-upload icon-start" />
+                            {translate('csv_validation.buttons.upload')}
+                        </button>
+
+                        <div className="form-group">
+                            <SelectControl
+                                className="form-control inline-filter-control"
+                                options={funds}
+                                value={fund}
+                                placeholder={translate('vouchers.labels.fund')}
+                                allowSearch={false}
+                                onChange={(fund: Fund) => filterUpdate({ fund_id: fund?.id })}
+                                optionsComponent={SelectControlOptionsFund}
+                                dusk="prevalidationSelectFund"
+                            />
+                        </div>
+
                         {filter.show && (
                             <div
                                 className="button button-text"
@@ -304,7 +438,13 @@ export default function PrevalidatedTable({
                 </div>
             </div>
 
-            {rows.length > 0 && headers && (
+            <LoaderTableCard
+                loading={!prevalidations.meta}
+                empty={prevalidations.meta.total == 0}
+                emptyTitle={'Geen aanvragers toevoegen'}
+                emptyDescription={
+                    'U bent geen beoordelaar voor een fonds dat actief is om aanvragers aan toe te voegen.'
+                }>
                 <div className="card-section">
                     <div className="card-block card-block-table">
                         {configsElement}
@@ -317,6 +457,16 @@ export default function PrevalidatedTable({
                                     {rows?.map((row) => (
                                         <tr key={row.id} data-dusk={`tablePrevalidationRow${row.id}`}>
                                             <td className="text-primary text-strong">{row.uid}</td>
+
+                                            <td>
+                                                <div className="text-primary text-semibold">
+                                                    {strLimit(row.fund?.name, 32)}
+                                                </div>
+
+                                                <div className="text-strong text-md text-muted-dark">
+                                                    {strLimit(row.fund?.implementation?.name, 32)}
+                                                </div>
+                                            </td>
                                             <td className="text-primary text-strong">
                                                 {employeesByAddress?.[row?.identity_address] || 'Unknown'}
                                             </td>
@@ -331,21 +481,15 @@ export default function PrevalidatedTable({
                                             ))}
 
                                             <td className="text-right">
-                                                <div
-                                                    className={`tag tag-sm ${
-                                                        row.state == 'pending' ? 'tag-default' : 'tag-success'
-                                                    }`}>
+                                                <Label type={row.state == 'pending' ? 'default' : 'success'}>
                                                     {row.state == 'pending' ? 'Nee' : 'Ja'}
-                                                </div>
+                                                </Label>
                                             </td>
 
                                             <td className="text-right">
-                                                <div
-                                                    className={`tag tag-sm ${
-                                                        !row.exported ? 'tag-default' : 'tag-success'
-                                                    }`}>
+                                                <Label type={!row.exported ? 'default' : 'success'}>
                                                     {!row.exported ? 'Nee' : 'Ja'}
-                                                </div>
+                                                </Label>
                                             </td>
 
                                             <td className={'table-td-actions text-right'}>
@@ -375,22 +519,18 @@ export default function PrevalidatedTable({
                         </TableTopScroller>
                     </div>
                 </div>
-            )}
-
-            {prevalidations?.meta.total === 0 && (
-                <EmptyCard type={'card-section'} description={'Geen gegevens van aanvragers gevonden'} />
-            )}
 
-            {prevalidations?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={prevalidations.meta}
-                        filters={filter.values}
-                        updateFilters={filter.update}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                {prevalidations?.meta.total > 0 && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={prevalidations.meta}
+                            filters={filterValues}
+                            updateFilters={filterUpdate}
+                            perPageKey={paginatorKey}
+                        />
+                    </div>
+                )}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/products-edit/elements/ProductCategoriesControl.tsx b/react/src/dashboard/components/pages/products-edit/elements/ProductCategoriesControl.tsx
index 349b311f6..f993c23d2 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductCategoriesControl.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductCategoriesControl.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import FormError from '../../../elements/forms/errors/FormError';
 import ProductCategory from '../../../../props/models/ProductCategory';
 import SelectControl from '../../../elements/select-control/SelectControl';
@@ -113,31 +113,28 @@ export default function ProductCategoriesControl({
         }
     }, [changeCategory, loadProductCategories, value, ready]);
     return (
-        <div className="col col-lg-9 col-lg-12">
+        <Fragment>
             {[...categoriesHierarchy.keys()].map((index) => (
-                <div className="form-group form-group-inline" key={categoriesHierarchy.length + '-' + index}>
+                <div className="form-group" key={categoriesHierarchy.length + '-' + index}>
                     {index == 0 ? (
                         <label className="form-label form-label-required">
                             {translate('product_edit.labels.category')}
                         </label>
-                    ) : (
-                        <label className="form-label">&nbsp;</label>
-                    )}
-
-                    <div className="form-offset">
-                        <SelectControl
-                            className="form-control"
-                            propKey="id"
-                            options={categoriesHierarchy[index]}
-                            value={categoriesValues[index]}
-                            onChange={(value?: number) => changeCategory(index, value)}
-                            disabled={disabled}
-                            placeholder="Selecteer categorie..."
-                        />
-                    </div>
+                    ) : null}
+
+                    <SelectControl
+                        className="form-control"
+                        propKey="id"
+                        options={categoriesHierarchy[index]}
+                        value={categoriesValues[index]}
+                        onChange={(value?: number) => changeCategory(index, value)}
+                        disabled={disabled}
+                        placeholder="Selecteer categorie..."
+                    />
+
                     {index == categoriesHierarchy.length - 1 && <FormError error={errors} />}
                 </div>
             ))}
-        </div>
+        </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
index e2a7c4c12..93771f9fd 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
@@ -551,21 +551,18 @@ export default function ProductsForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-xs-11 col-lg-9 col-xs-12">
-                            <div className="form-group form-group-inline">
-                                <label className="form-label">&nbsp;</label>
-                                <div className="form-offset">
-                                    <PhotoSelector
-                                        type="office_photo"
-                                        disabled={!isEditable}
-                                        thumbnail={product?.photo?.sizes?.thumbnail}
-                                        selectPhoto={(file) => setMediaFile(file)}
-                                    />
-                                    <FormError error={mediaErrors} />
-                                </div>
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
+                                <PhotoSelector
+                                    type="office_photo"
+                                    disabled={!isEditable}
+                                    thumbnail={product?.photo?.sizes?.thumbnail}
+                                    selectPhoto={(file) => setMediaFile(file)}
+                                />
+                                <FormError error={mediaErrors} />
                             </div>
-                            <div className="form-group form-group-inline" />
-                            <div className="form-group form-group-inline">
+                            <div className="form-group" />
+                            <div className="form-group">
                                 <label className="form-label">
                                     {translate('product_edit.labels.alternative_text')}
                                 </label>
@@ -584,8 +581,8 @@ export default function ProductsForm({
                 </div>
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-xs-11 col-lg-9">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label form-label-required">
                                     {translate('product_edit.labels.name')}
                                 </label>
@@ -600,121 +597,116 @@ export default function ProductsForm({
                                 <FormError error={form.errors?.name} />
                             </div>
 
-                            <div className="form-group form-group-inline tooltipped">
+                            <div className="form-group tooltipped">
                                 <label className="form-label form-label-required">
                                     {translate('product_edit.labels.description')}
                                 </label>
-                                <div className="form-offset">
-                                    <MarkdownEditor
-                                        value={form.values.description_html || ''}
-                                        disabled={!isEditable}
-                                        onChange={(description) => form.update({ description })}
-                                        placeholder={translate('product_edit.labels.description')}
-                                    />
-                                    <Tooltip
-                                        text={
-                                            'Bijvoorbeeld: aantal lessen, abonnementsvorm, omschrijving cursus, einddatum activiteit, voorwaarden, bijzonderheden, etc.'
-                                        }
-                                    />
-                                    <FormError error={form.errors?.description} />
-                                </div>
+
+                                <MarkdownEditor
+                                    value={form.values.description_html || ''}
+                                    disabled={!isEditable}
+                                    onChange={(description) => form.update({ description })}
+                                    placeholder={translate('product_edit.labels.description')}
+                                />
+                                <Tooltip
+                                    text={
+                                        'Bijvoorbeeld: aantal lessen, abonnementsvorm, omschrijving cursus, einddatum activiteit, voorwaarden, bijzonderheden, etc.'
+                                    }
+                                />
+                                <FormError error={form.errors?.description} />
                             </div>
                         </div>
                     </div>
                 </div>
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-xs-11 col-lg-9">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">Aanbod type</label>
-                                <div className="form-offset">
-                                    <div className="block block-label-tabs">
-                                        <div className="label-tab-set">
-                                            {priceTypes?.map((priceType) => (
-                                                <div
-                                                    key={priceType.value}
-                                                    className={`label-tab label-tab-sm 
+
+                                <div className="block block-label-tabs">
+                                    <div className="label-tab-set">
+                                        {priceTypes?.map((priceType) => (
+                                            <div
+                                                key={priceType.value}
+                                                className={`label-tab label-tab-sm 
                                                     ${form.values.price_type === priceType.value ? 'active' : ''} 
                                                     ${!isEditable ? 'disabled' : ''}`}
-                                                    onClick={() => form.update({ price_type: priceType.value })}>
-                                                    {priceType.label}
-                                                </div>
-                                            ))}
-                                        </div>
-                                        <Tooltip text={translate('product_edit.tooltips.product_type')?.split('\n')} />
+                                                onClick={() => form.update({ price_type: priceType.value })}>
+                                                {priceType.label}
+                                            </div>
+                                        ))}
                                     </div>
+                                    <Tooltip text={translate('product_edit.tooltips.product_type')?.split('\n')} />
                                 </div>
                             </div>
 
                             {form.values.price_type === 'regular' && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label form-label-required">Bedrag</label>
-                                    <div className="form-offset">
-                                        <input
-                                            className="form-control"
-                                            disabled={!isEditable}
-                                            value={form.values.price || ''}
-                                            onChange={(e) => {
-                                                form.update({
-                                                    price: e.target.value ? parseFloat(e.target.value) : '',
-                                                });
-                                            }}
-                                            type="number"
-                                            placeholder="Bedrag in euro's"
-                                            step="0.01"
-                                        />
-                                        <FormError error={form.errors.price} />
-                                    </div>
+
+                                    <input
+                                        className="form-control"
+                                        disabled={!isEditable}
+                                        value={form.values.price || ''}
+                                        onChange={(e) => {
+                                            form.update({
+                                                price: e.target.value ? parseFloat(e.target.value) : '',
+                                            });
+                                        }}
+                                        type="number"
+                                        placeholder="Bedrag in euro's"
+                                        step="0.01"
+                                    />
+                                    <FormError error={form.errors.price} />
                                 </div>
                             )}
 
                             {form.values.price_type === 'discount_percentage' && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label">Kortingspercentage</label>
-                                    <div className="form-offset">
-                                        <input
-                                            className="form-control"
-                                            disabled={!isEditable}
-                                            value={form.values.price_discount || ''}
-                                            onChange={(e) => {
-                                                form.update({
-                                                    price_discount: e.target.value ? parseFloat(e.target.value) : '',
-                                                });
-                                            }}
-                                            type="number"
-                                            placeholder="20%"
-                                            step="0.01"
-                                            max={100}
-                                        />
-                                        <FormError error={form.errors.price_discount} />
-                                    </div>
+
+                                    <input
+                                        className="form-control"
+                                        disabled={!isEditable}
+                                        value={form.values.price_discount || ''}
+                                        onChange={(e) => {
+                                            form.update({
+                                                price_discount: e.target.value ? parseFloat(e.target.value) : '',
+                                            });
+                                        }}
+                                        type="number"
+                                        placeholder="20%"
+                                        step="0.01"
+                                        max={100}
+                                    />
+                                    <FormError error={form.errors.price_discount} />
                                 </div>
                             )}
 
                             {form.values.price_type === 'discount_fixed' && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label">Korting</label>
-                                    <div className="form-offset">
-                                        <input
-                                            className="form-control"
-                                            disabled={!isEditable}
-                                            value={form.values.price_discount}
-                                            onChange={(e) => {
-                                                form.update({
-                                                    price_discount: e.target.value ? parseFloat(e.target.value) : '',
-                                                });
-                                            }}
-                                            type="number"
-                                            placeholder="€ 20"
-                                            step="0.01"
-                                        />
-                                        <FormError error={form.errors.price_discount} />
-                                    </div>
+
+                                    <input
+                                        className="form-control"
+                                        disabled={!isEditable}
+                                        value={form.values.price_discount}
+                                        onChange={(e) => {
+                                            form.update({
+                                                price_discount: e.target.value ? parseFloat(e.target.value) : '',
+                                            });
+                                        }}
+                                        type="number"
+                                        placeholder="€ 20"
+                                        step="0.01"
+                                    />
+                                    <FormError error={form.errors.price_discount} />
                                 </div>
                             )}
 
                             {product && (
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     <label className="form-label">{translate('product_edit.labels.sold')}</label>
                                     <input
                                         className="form-control"
@@ -732,61 +724,56 @@ export default function ProductsForm({
                                 </div>
                             )}
 
-                            <div className="form-group form-group-inline tooltipped">
+                            <div className="form-group tooltipped">
                                 <label className="form-label form-label-required">
                                     {translate('product_edit.labels.total')}
                                 </label>
+
                                 {product && product.unlimited_stock && (
-                                    <div className="form-offset">
-                                        <div className="form-value text-muted">
-                                            {translate('product_edit.labels.stock_unlimited')}
-                                        </div>
+                                    <div className="form-value text-muted">
+                                        {translate('product_edit.labels.stock_unlimited')}
                                     </div>
                                 )}
 
                                 {(!product || (product && !product.unlimited_stock)) && (
-                                    <div className="form-offset">
-                                        <div className="row">
-                                            {!form.values.unlimited_stock ? (
-                                                <div className="col col-lg-7">
-                                                    <input
-                                                        className="form-control"
-                                                        disabled={
-                                                            !isEditable || !!product || form.values.unlimited_stock
-                                                        }
-                                                        value={form.values.total_amount}
-                                                        onChange={(e) => {
-                                                            form.update({
-                                                                total_amount: e.target.value
-                                                                    ? parseFloat(e.target.value)
-                                                                    : '',
-                                                            });
-                                                        }}
-                                                        type="number"
-                                                        placeholder="Aantal in voorraad"
-                                                    />
-                                                </div>
-                                            ) : (
-                                                <div className="col col-lg-7">
-                                                    <input
-                                                        className="form-control"
-                                                        value={translate('product_edit.labels.stock_unlimited')}
-                                                        disabled={true}
-                                                    />
-                                                </div>
-                                            )}
-
-                                            <div className="col col-lg-5">
-                                                <CheckboxControl
-                                                    disabled={!isEditable || (product && !product.unlimited_stock)}
-                                                    id="unlimited_stock"
-                                                    title={translate('product_edit.labels.stock_unlimited')}
-                                                    checked={form.values.unlimited_stock}
+                                    <div className="row">
+                                        {!form.values.unlimited_stock ? (
+                                            <div className="col col-lg-7">
+                                                <input
+                                                    className="form-control"
+                                                    disabled={!isEditable || !!product || form.values.unlimited_stock}
+                                                    value={form.values.total_amount}
                                                     onChange={(e) => {
-                                                        form.update({ unlimited_stock: e.target.checked });
+                                                        form.update({
+                                                            total_amount: e.target.value
+                                                                ? parseFloat(e.target.value)
+                                                                : '',
+                                                        });
                                                     }}
+                                                    type="number"
+                                                    placeholder="Aantal in voorraad"
                                                 />
                                             </div>
+                                        ) : (
+                                            <div className="col col-lg-7">
+                                                <input
+                                                    className="form-control"
+                                                    value={translate('product_edit.labels.stock_unlimited')}
+                                                    disabled={true}
+                                                />
+                                            </div>
+                                        )}
+
+                                        <div className="col col-lg-5">
+                                            <CheckboxControl
+                                                disabled={!isEditable || (product && !product.unlimited_stock)}
+                                                id="unlimited_stock"
+                                                title={translate('product_edit.labels.stock_unlimited')}
+                                                checked={form.values.unlimited_stock}
+                                                onChange={(e) => {
+                                                    form.update({ unlimited_stock: e.target.checked });
+                                                }}
+                                            />
                                         </div>
                                     </div>
                                 )}
@@ -795,50 +782,47 @@ export default function ProductsForm({
                             </div>
 
                             {product && !product.unlimited_stock && (
-                                <div className="form-group form-group-inline tooltipped">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">
                                         {translate('product_edit.labels.stock_amount')}
                                     </label>
-                                    <div className="form-offset">
-                                        <div className="form-group-info">
-                                            <div className="form-group-info-control">
-                                                <input
-                                                    className="form-control"
-                                                    value={form.values.stock_amount}
-                                                    onChange={(e) =>
-                                                        form.update({
-                                                            stock_amount: e.target.value
-                                                                ? parseFloat(e.target.value)
-                                                                : '',
-                                                        })
-                                                    }
-                                                    type="number"
-                                                    placeholder="Stock"
-                                                    disabled={!isEditable}
-                                                />
-                                            </div>
-                                            <div className="form-group-info-button">
-                                                <div
-                                                    className={`button button-default button-icon pull-left ${
-                                                        showInfoBlockStock ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setShowInfoBlockStock(!showInfoBlockStock)}>
-                                                    <em className="mdi mdi-information" />
-                                                </div>
+
+                                    <div className="form-group-info">
+                                        <div className="form-group-info-control">
+                                            <input
+                                                className="form-control"
+                                                value={form.values.stock_amount}
+                                                onChange={(e) =>
+                                                    form.update({
+                                                        stock_amount: e.target.value ? parseFloat(e.target.value) : '',
+                                                    })
+                                                }
+                                                type="number"
+                                                placeholder="Stock"
+                                                disabled={!isEditable}
+                                            />
+                                        </div>
+                                        <div className="form-group-info-button">
+                                            <div
+                                                className={`button button-default button-icon pull-left ${
+                                                    showInfoBlockStock ? 'active' : ''
+                                                }`}
+                                                onClick={() => setShowInfoBlockStock(!showInfoBlockStock)}>
+                                                <em className="mdi mdi-information" />
                                             </div>
                                         </div>
-                                        {showInfoBlockStock && (
-                                            <div className="block block-info-box block-info-box-primary">
-                                                <div className="info-box-icon mdi mdi-information" />
-                                                <div className="info-box-content">
-                                                    <div className="block block-markdown">
-                                                        {translate('tooltip.product.limit')}
-                                                    </div>
+                                    </div>
+                                    {showInfoBlockStock && (
+                                        <div className="block block-info-box block-info-box-primary">
+                                            <div className="info-box-icon mdi mdi-information" />
+                                            <div className="info-box-content">
+                                                <div className="block block-markdown">
+                                                    {translate('tooltip.product.limit')}
                                                 </div>
                                             </div>
-                                        )}
-                                        <FormError error={form.errors.stock_amount} />
-                                    </div>
+                                        </div>
+                                    )}
+                                    <FormError error={form.errors.stock_amount} />
                                 </div>
                             )}
                         </div>
@@ -847,41 +831,37 @@ export default function ProductsForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-xs-11 col-lg-9">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">{translate('product_edit.labels.ean')}</label>
-                                <div className="form-offset">
-                                    <FormGroupInfo
-                                        info={<TranslateHtml i18n={'product_edit.tooltips.ean'} />}
-                                        error={form.errors?.ean}>
-                                        <input
-                                            className="form-control"
-                                            value={form.values.ean || ''}
-                                            onChange={(e) => form.update({ ean: e.target.value })}
-                                            type="text"
-                                            placeholder={translate('product_edit.labels.ean_placeholder')}
-                                            disabled={!isEditable}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
+                                <FormGroupInfo
+                                    info={<TranslateHtml i18n={'product_edit.tooltips.ean'} />}
+                                    error={form.errors?.ean}>
+                                    <input
+                                        className="form-control"
+                                        value={form.values.ean || ''}
+                                        onChange={(e) => form.update({ ean: e.target.value })}
+                                        type="text"
+                                        placeholder={translate('product_edit.labels.ean_placeholder')}
+                                        disabled={!isEditable}
+                                    />
+                                </FormGroupInfo>
                             </div>
 
-                            <div className="form-group form-group-inline tooltipped">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">{translate('product_edit.labels.sku')}</label>
-                                <div className="form-offset">
-                                    <FormGroupInfo
-                                        info={<TranslateHtml i18n={'product_edit.tooltips.sku'} />}
-                                        error={form.errors?.sku}>
-                                        <input
-                                            className="form-control"
-                                            value={form.values.sku || ''}
-                                            onChange={(e) => form.update({ sku: e.target.value })}
-                                            type="text"
-                                            placeholder={translate('product_edit.labels.sku_placeholder')}
-                                            disabled={!isEditable}
-                                        />
-                                    </FormGroupInfo>
-                                </div>
+                                <FormGroupInfo
+                                    info={<TranslateHtml i18n={'product_edit.tooltips.sku'} />}
+                                    error={form.errors?.sku}>
+                                    <input
+                                        className="form-control"
+                                        value={form.values.sku || ''}
+                                        onChange={(e) => form.update({ sku: e.target.value })}
+                                        type="text"
+                                        placeholder={translate('product_edit.labels.sku_placeholder')}
+                                        disabled={!isEditable}
+                                    />
+                                </FormGroupInfo>
                             </div>
                         </div>
                     </div>
@@ -889,43 +869,41 @@ export default function ProductsForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <div className="col col-xs-11 col-lg-9">
-                            <div className="form-group form-group-inline tooltipped">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group tooltipped">
                                 <label className="form-label">{translate('product_edit.labels.expire')}</label>
-                                <div className="form-offset">
-                                    <div className="row">
-                                        <div className="col col-lg-7">
-                                            {nonExpiring ? (
-                                                <input
-                                                    className="form-control"
-                                                    defaultValue={translate('product_edit.labels.unlimited')}
-                                                    disabled={true}
-                                                />
-                                            ) : (
-                                                <DatePickerControl
-                                                    disabled={!isEditable}
-                                                    dateFormat={'dd-MM-yyyy'}
-                                                    value={dateParse(form.values.expire_at)}
-                                                    onChange={(date) => form.update({ expire_at: dateFormat(date) })}
-                                                    placeholder="dd-MM-jjjj"
-                                                />
-                                            )}
-                                        </div>
-                                        <div className="col col-lg-5">
-                                            <CheckboxControl
+                                <div className="row">
+                                    <div className="col col-lg-7">
+                                        {nonExpiring ? (
+                                            <input
+                                                className="form-control"
+                                                defaultValue={translate('product_edit.labels.unlimited')}
+                                                disabled={true}
+                                            />
+                                        ) : (
+                                            <DatePickerControl
                                                 disabled={!isEditable}
-                                                id="non_expiring"
-                                                title={translate('product_edit.labels.unlimited')}
-                                                checked={nonExpiring}
-                                                onChange={() => setNonExpiring(!nonExpiring)}
+                                                dateFormat={'dd-MM-yyyy'}
+                                                value={dateParse(form.values.expire_at)}
+                                                onChange={(date) => form.update({ expire_at: dateFormat(date) })}
+                                                placeholder="dd-MM-jjjj"
                                             />
-                                        </div>
-                                        <Tooltip
-                                            text={
-                                                'De uiterlijke datum tot en met wanneer uw aanbieding loopt. Aanbieding wordt na deze datum verwijderd uit de webshop en kan niet meer worden opgehaald.'
-                                            }
+                                        )}
+                                    </div>
+                                    <div className="col col-lg-5">
+                                        <CheckboxControl
+                                            disabled={!isEditable}
+                                            id="non_expiring"
+                                            title={translate('product_edit.labels.unlimited')}
+                                            checked={nonExpiring}
+                                            onChange={() => setNonExpiring(!nonExpiring)}
                                         />
                                     </div>
+                                    <Tooltip
+                                        text={
+                                            'De uiterlijke datum tot en met wanneer uw aanbieding loopt. Aanbieding wordt na deze datum verwijderd uit de webshop en kan niet meer worden opgehaald.'
+                                        }
+                                    />
                                 </div>
                                 <FormError error={form.errors.expire_at} />
                             </div>
@@ -936,95 +914,94 @@ export default function ProductsForm({
                 {allowsReservations && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-xs-11 col-lg-9">
-                                <div className="form-group form-group-inline tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Reserveringen</label>
-                                    <div className="form-offset">
-                                        <CheckboxControl
-                                            disabled={!isEditable}
-                                            id="reservation_enabled"
-                                            title="De klant mag het aanbod reserveren"
-                                            checked={form.values.reservation_enabled}
-                                            onChange={(e) => form.update({ reservation_enabled: e.target.checked })}
-                                        />
-                                        <FormError error={form.errors.reservation_enabled} />
-                                    </div>
+
+                                    <CheckboxControl
+                                        disabled={!isEditable}
+                                        id="reservation_enabled"
+                                        title="De klant mag het aanbod reserveren"
+                                        checked={form.values.reservation_enabled}
+                                        onChange={(e) => form.update({ reservation_enabled: e.target.checked })}
+                                    />
+                                    <FormError error={form.errors.reservation_enabled} />
+
                                     <Tooltip text={translate('product_edit.tooltips.reservation_enabled')} />
                                 </div>
                             </div>
                         </div>
                         <div className="row">
                             {form.values.reservation_enabled && (
-                                <div className="col col-xs-11 col-lg-9">
-                                    <div className="form-group form-group-inline tooltipped">
+                                <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                    <div className="form-group tooltipped">
                                         <label className="form-label" htmlFor="reservation_policy">
                                             Reserveringen accepteren
                                         </label>
-                                        <div className="form-offset">
-                                            <div className="form-group-info">
-                                                <div className="form-group-info-control">
-                                                    <SelectControl
-                                                        className="form-control"
-                                                        propValue={'label'}
-                                                        propKey={'value'}
-                                                        allowSearch={false}
-                                                        value={form.values.reservation_policy}
-                                                        onChange={(reservation_policy: string) => {
-                                                            form.update({ reservation_policy });
-                                                        }}
-                                                        options={reservationPolicies}
-                                                    />
-                                                </div>
-                                                <div className="form-group-info-button">
-                                                    <div
-                                                        className={`button button-default button-icon pull-left ${
-                                                            showInfoBlockStockReservationPolicy ? 'active' : ''
-                                                        }`}
-                                                        onClick={() => {
-                                                            setShowInfoBlockStockReservationPolicy(
-                                                                !showInfoBlockStockReservationPolicy,
-                                                            );
-                                                        }}>
-                                                        <em className="mdi mdi-information" />
-                                                    </div>
+
+                                        <div className="form-group-info">
+                                            <div className="form-group-info-control">
+                                                <SelectControl
+                                                    className="form-control"
+                                                    propValue={'label'}
+                                                    propKey={'value'}
+                                                    allowSearch={false}
+                                                    value={form.values.reservation_policy}
+                                                    onChange={(reservation_policy: string) => {
+                                                        form.update({ reservation_policy });
+                                                    }}
+                                                    options={reservationPolicies}
+                                                />
+                                            </div>
+                                            <div className="form-group-info-button">
+                                                <div
+                                                    className={`button button-default button-icon pull-left ${
+                                                        showInfoBlockStockReservationPolicy ? 'active' : ''
+                                                    }`}
+                                                    onClick={() => {
+                                                        setShowInfoBlockStockReservationPolicy(
+                                                            !showInfoBlockStockReservationPolicy,
+                                                        );
+                                                    }}>
+                                                    <em className="mdi mdi-information" />
                                                 </div>
                                             </div>
-                                            {showInfoBlockStockReservationPolicy && (
-                                                <div className="block block-info-box block-info-box-primary">
-                                                    <div className="info-box-icon mdi mdi-information" />
-                                                    <div className="info-box-content">
-                                                        <div className="block block-markdown">
-                                                            Standaard instelling kunt u bij uw reserveringen aanpassen.
-                                                            Geef hier optioneel aan of u de reservering handmatig of
-                                                            automatisch wilt accepteren.
-                                                        </div>
+                                        </div>
+                                        {showInfoBlockStockReservationPolicy && (
+                                            <div className="block block-info-box block-info-box-primary">
+                                                <div className="info-box-icon mdi mdi-information" />
+                                                <div className="info-box-content">
+                                                    <div className="block block-markdown">
+                                                        Standaard instelling kunt u bij uw reserveringen aanpassen. Geef
+                                                        hier optioneel aan of u de reservering handmatig of automatisch
+                                                        wilt accepteren.
                                                     </div>
                                                 </div>
-                                            )}
-                                            <FormError error={form.errors.reservation_policy} />
-                                        </div>
+                                            </div>
+                                        )}
+                                        <FormError error={form.errors.reservation_policy} />
                                     </div>
 
-                                    <div className="form-group form-group-inline tooltipped">
+                                    <div className="form-group tooltipped">
                                         <label htmlFor="" className="form-label">
                                             Klantgegevens
                                         </label>
-                                        <div className="form-offset">
-                                            <CheckboxControl
-                                                disabled={!isEditable}
-                                                id="reservation_fields"
-                                                title="De klant vragen om aanvullende informatie op te geven"
-                                                checked={form.values.reservation_fields}
-                                                onChange={(e) => form.update({ reservation_fields: e.target.checked })}
-                                            />
-                                            <FormError error={form.errors.reservation_fields} />
-                                        </div>
+
+                                        <CheckboxControl
+                                            disabled={!isEditable}
+                                            id="reservation_fields"
+                                            title="De klant vragen om aanvullende informatie op te geven"
+                                            checked={form.values.reservation_fields}
+                                            onChange={(e) => form.update({ reservation_fields: e.target.checked })}
+                                        />
+                                        <FormError error={form.errors.reservation_fields} />
+
                                         <Tooltip text={translate('product_edit.tooltips.reservation_fields')} />
                                     </div>
 
                                     {form.values.reservation_fields && (
                                         <Fragment>
-                                            <div className="form-group form-group-inline tooltipped">
+                                            <div className="form-group tooltipped">
                                                 <label className="form-label" htmlFor="reservation_phone">
                                                     Telefoonnummer klant
                                                 </label>
@@ -1041,7 +1018,7 @@ export default function ProductsForm({
                                                 <FormError error={form.errors.reservation_phone} />
                                             </div>
 
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label" htmlFor="reservation_address">
                                                     Adres klant
                                                 </label>
@@ -1059,7 +1036,7 @@ export default function ProductsForm({
                                                 <FormError error={form.errors.reservation_address} />
                                             </div>
 
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label" htmlFor="reservation_birth_date">
                                                     Geboortedatum klant
                                                 </label>
@@ -1087,8 +1064,8 @@ export default function ProductsForm({
                 {organization.can_receive_extra_payments && hasPermission(organization, 'manage_payment_methods') && (
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col-lg-9">
-                                <div className="form-group form-group-inline">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label" htmlFor="reservation_extra_payments">
                                         {translate('product_edit.labels.extra_payments')}
                                     </label>
@@ -1113,12 +1090,14 @@ export default function ProductsForm({
 
                 <div className="card-section card-section-primary">
                     <div className="row">
-                        <ProductCategoriesControl
-                            disabled={!isEditable}
-                            value={form.values.product_category_id}
-                            onChange={(product_category_id) => form.update({ product_category_id })}
-                            errors={form.errors.product_category_id}
-                        />
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <ProductCategoriesControl
+                                disabled={!isEditable}
+                                value={form.values.product_category_id}
+                                onChange={(product_category_id) => form.update({ product_category_id })}
+                                errors={form.errors.product_category_id}
+                            />
+                        </div>
                     </div>
                 </div>
 
diff --git a/react/src/dashboard/components/pages/products-view/ProductView.tsx b/react/src/dashboard/components/pages/products-view/ProductView.tsx
index 118008e58..8255b914f 100644
--- a/react/src/dashboard/components/pages/products-view/ProductView.tsx
+++ b/react/src/dashboard/components/pages/products-view/ProductView.tsx
@@ -22,6 +22,7 @@ import ToggleControl from '../../elements/forms/controls/ToggleControl';
 import Paginator from '../../../modules/paginator/components/Paginator';
 import ProductFund from '../../../props/models/ProductFund';
 import usePushApiError from '../../../hooks/usePushApiError';
+import Label from '../../elements/image_cropper/Label';
 
 type ProductFundLocal = ProductFund & {
     chat?: FundProviderChat;
@@ -267,9 +268,9 @@ export default function ProductView() {
                                                 </td>
                                                 <td>
                                                     {fund.approved ? (
-                                                        <div className="label label-success">Geaccepteerd</div>
+                                                        <Label type="success">Geaccepteerd</Label>
                                                     ) : (
-                                                        <div className="label label-default">Wachtend</div>
+                                                        <Label type="default">Wachtend</Label>
                                                     )}
                                                 </td>
                                                 {!product.sponsor_organization && fundToggles && (
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 7c545e7e0..03e791b8b 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
@@ -18,9 +18,10 @@ import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import Label, { LabelType } from '../../../elements/image_cropper/Label';
 
 type FundProviderInvitationLocal = FundProviderInvitation & {
-    status_class?: string;
+    status_type?: LabelType;
     status_text?: string;
 };
 
@@ -98,24 +99,25 @@ export default function ProviderFundInvitationsTable({
     );
 
     const mapProviderFunds = useCallback(
-        (items: Array<FundProviderInvitation>) => {
-            return items.map((item) => ({
-                ...item,
-                ...(item.state
-                    ? {
-                          status_text: translate(`provider_funds.status.${item.expired ? 'expired' : item.state}`),
-                          status_class:
-                              item.state == 'pending' && !item.expired
-                                  ? 'tag-warning'
-                                  : item.expired
-                                    ? 'tag-default'
-                                    : 'tag-success',
-                      }
-                    : {
-                          status_text: translate('provider_funds.status.closed'),
-                          status_class: 'tag-default',
-                      }),
-            }));
+        (
+            items: Array<FundProviderInvitation>,
+        ): Array<FundProviderInvitation & { status_text: string; status_type: LabelType }> => {
+            return items.map(function (item) {
+                if (item.state) {
+                    return {
+                        ...item,
+                        status_text: translate(`provider_funds.status.${item.expired ? 'expired' : item.state}`),
+                        status_type:
+                            item.state == 'pending' && !item.expired ? 'warning' : item.expired ? 'default' : 'success',
+                    };
+                }
+
+                return {
+                    ...item,
+                    status_text: translate('provider_funds.status.closed'),
+                    status_type: 'default',
+                };
+            });
         },
         [translate],
     );
@@ -250,9 +252,7 @@ export default function ProviderFundInvitationsTable({
                                                 </strong>
                                             </td>
                                             <td className={`nowrap`}>
-                                                <div className={`tag tag-sm ${invitation.status_class}`}>
-                                                    {invitation.status_text}
-                                                </div>
+                                                <Label type={invitation.status_type}>{invitation.status_text}</Label>
                                             </td>
                                             {type === 'invitations' && invitation.can_be_accepted ? (
                                                 <td>
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
index ba35d302c..bc55cf680 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
@@ -26,6 +26,7 @@ import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import Label from '../../../elements/image_cropper/Label';
 
 type FundProviderUnsubscribeLocal = FundProviderUnsubscribe & {
     showTooltip?: boolean;
@@ -323,27 +324,19 @@ export default function ProviderFundUnsubscriptionsTable({
                                             </td>
                                             <td className="nowrap">
                                                 {unsubscription.state == 'approved' && (
-                                                    <div className="tag tag-sm tag-success">
-                                                        {unsubscription.state_locale}
-                                                    </div>
+                                                    <Label type="success">{unsubscription.state_locale}</Label>
                                                 )}
 
                                                 {unsubscription.state == 'pending' && (
-                                                    <div className="tag tag-sm tag-warning">
-                                                        {unsubscription.state_locale}
-                                                    </div>
+                                                    <Label type="warning">{unsubscription.state_locale}</Label>
                                                 )}
 
                                                 {unsubscription.state == 'overdue' && (
-                                                    <div className="tag tag-sm tag-danger">
-                                                        {unsubscription.state_locale}
-                                                    </div>
+                                                    <Label type="danger">{unsubscription.state_locale}</Label>
                                                 )}
 
                                                 {unsubscription.state == 'canceled' && (
-                                                    <div className="tag tag-sm tag-default">
-                                                        {unsubscription.state_locale}
-                                                    </div>
+                                                    <Label type="default">{unsubscription.state_locale}</Label>
                                                 )}
                                             </td>
                                             <td className={'table-td-actions text-right'}>
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 f12fcbc62..441149621 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -24,6 +24,7 @@ import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import classNames from 'classnames';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function ProviderFundsTable({
     type,
@@ -302,28 +303,22 @@ export default function ProviderFundsTable({
                                             {!providerFund.fund.archived && !providerFund.fund.expired && (
                                                 <td className="nowrap">
                                                     {providerFund.state == 'accepted' && (
-                                                        <div className="tag tag-sm tag-success">
-                                                            {providerFund.state_locale}
-                                                        </div>
+                                                        <Label type="success">{providerFund.state_locale}</Label>
                                                     )}
 
                                                     {providerFund.state == 'pending' && (
-                                                        <div className="tag tag-sm tag-warning">
-                                                            {providerFund.state_locale}
-                                                        </div>
+                                                        <Label type="warning">{providerFund.state_locale}</Label>
                                                     )}
 
                                                     {providerFund.state == 'rejected' && (
-                                                        <div className="tag tag-sm tag-danger">
-                                                            {providerFund.state_locale}
-                                                        </div>
+                                                        <Label type="danger">{providerFund.state_locale}</Label>
                                                     )}
                                                 </td>
                                             )}
 
                                             {(providerFund.fund.archived || providerFund.fund.expired) && (
                                                 <td className="nowrap">
-                                                    <div className="tag tag-sm tag-default">Archived</div>
+                                                    <Label type="default">Archived</Label>
                                                 </td>
                                             )}
 
diff --git a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
index c12f776f1..a408c08a9 100644
--- a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
+++ b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
@@ -21,6 +21,7 @@ import useFilePreview from '../../../services/helpers/useFilePreview';
 import { useFileService } from '../../../services/FileService';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
+import ReimbursementStateLabel from '../../elements/resource-states/ReimbursementStateLabel';
 
 export default function ReimbursementsView() {
     const { id } = useParams();
@@ -40,12 +41,6 @@ export default function ReimbursementsView() {
 
     const [reimbursement, setReimbursement] = useState<Reimbursement>(null);
 
-    const [stateLabels] = useState({
-        pending: 'label-default',
-        approved: 'label-success',
-        declined: 'label-danger',
-    });
-
     const fetchReimbursement = useCallback(() => {
         setProgress(0);
 
@@ -228,18 +223,7 @@ export default function ReimbursementsView() {
 
                                         <div className="flex flex-vertical flex-center">
                                             <div className="flex flex-horizontal">
-                                                {!reimbursement.expired && (
-                                                    <label
-                                                        className={`label ${stateLabels[reimbursement.state] || ''}`}>
-                                                        {reimbursement.state_locale}
-                                                    </label>
-                                                )}
-
-                                                {reimbursement.expired && (
-                                                    <label className="label label-danger-light">
-                                                        {reimbursement.expired}
-                                                    </label>
-                                                )}
+                                                <ReimbursementStateLabel reimbursement={reimbursement} />
                                             </div>
                                         </div>
                                     </div>
@@ -466,11 +450,10 @@ export default function ReimbursementsView() {
                                     <div className="keyvalue-item">
                                         <div className="keyvalue-key">{translate('reimbursements.labels.state')}</div>
                                         <div className="keyvalue-value">
-                                            <label
-                                                className={`label ${stateLabels[reimbursement.state] || ''}`}
-                                                data-dusk="reimbursementState">
-                                                {reimbursement.state_locale}
-                                            </label>
+                                            <ReimbursementStateLabel
+                                                reimbursement={reimbursement}
+                                                dusk={'reimbursementState'}
+                                            />
                                         </div>
                                     </div>
 
diff --git a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
index 1f2cffa4a..05e63a8ab 100644
--- a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Organization from '../../../../props/models/Organization';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import Paginator from '../../../../modules/paginator/components/Paginator';
@@ -13,6 +13,8 @@ import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard
 import { useReimbursementsService } from '../../../../services/ReimbursementService';
 import Reimbursement from '../../../../props/models/Reimbursement';
 import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import ReimbursementStateLabel from '../../../elements/resource-states/ReimbursementStateLabel';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function ReimbursementsTable({
     loading,
@@ -31,12 +33,6 @@ export default function ReimbursementsTable({
 }) {
     const reimbursementService = useReimbursementsService();
 
-    const [stateLabels] = useState({
-        pending: 'label-default',
-        approved: 'label-success',
-        declined: 'label-danger',
-    });
-
     const { headElement, configsElement } = useConfigurableTable(reimbursementService.getColumns());
 
     return (
@@ -112,30 +108,29 @@ export default function ReimbursementsTable({
                                         </td>
 
                                         <td>
-                                            <span
-                                                className={`label ${stateLabels[reimbursement.state] || ''}`}
-                                                data-dusk={`reimbursementState${reimbursement.id}`}>
-                                                {reimbursement.state_locale}
-                                            </span>
+                                            <ReimbursementStateLabel
+                                                reimbursement={reimbursement}
+                                                dusk={'reimbursementState' + reimbursement.id}
+                                            />
                                         </td>
 
                                         <td>
                                             {reimbursement.voucher_transaction?.state == 'pending' && (
-                                                <span className="label label-default">
+                                                <Label type="default">
                                                     {reimbursement.voucher_transaction.state_locale}
-                                                </span>
+                                                </Label>
                                             )}
 
                                             {reimbursement.voucher_transaction?.state == 'success' && (
-                                                <span className="label label-success">
+                                                <Label type="success">
                                                     {reimbursement.voucher_transaction.state_locale}
-                                                </span>
+                                                </Label>
                                             )}
 
                                             {reimbursement.voucher_transaction?.state == 'canceled' && (
-                                                <span className="label label-danger">
+                                                <Label type="danger">
                                                     {reimbursement.voucher_transaction.state_locale}
-                                                </span>
+                                                </Label>
                                             )}
 
                                             {!reimbursement.voucher_transaction && <TableEmptyValue />}
diff --git a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
index 5591f1d49..e446ce65c 100644
--- a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
+++ b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
@@ -105,69 +105,70 @@ export default function ReservationsSettings() {
                         </div>
                     </div>
                 </div>
+
                 <div className="card-section card-section-primary card-section-settings">
                     <div className="row">
-                        <div className="col-xs-12 col-lg-8">
-                            <div className="form-group form-group-inline">
+                        <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
                                 <label className="form-label" htmlFor="reservation_phone">
                                     {translate('reservation_settings.labels.phone')}
                                 </label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        value={form.values.reservation_phone}
-                                        propKey={'value'}
-                                        propValue={'label'}
-                                        onChange={(value: 'no' | 'optional' | 'required') =>
-                                            form.update({ reservation_phone: value })
-                                        }
-                                        options={reservationFieldOptions}
-                                    />
-                                    <FormError error={form.errors.reservation_phone} />
-                                </div>
+                                <SelectControl
+                                    value={form.values.reservation_phone}
+                                    propKey={'value'}
+                                    propValue={'label'}
+                                    onChange={(value: 'no' | 'optional' | 'required') => {
+                                        form.update({ reservation_phone: value });
+                                    }}
+                                    options={reservationFieldOptions}
+                                />
+                                <FormError error={form.errors.reservation_phone} />
                             </div>
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label" htmlFor="reservation_address">
                                     {translate('reservation_settings.labels.address')}
                                 </label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        value={form.values.reservation_address}
-                                        propKey={'value'}
-                                        propValue={'label'}
-                                        onChange={(value: 'no' | 'optional' | 'required') =>
-                                            form.update({ reservation_address: value })
-                                        }
-                                        options={reservationFieldOptions}
-                                    />
-                                    <FormError error={form.errors.reservation_address} />
-                                </div>
+
+                                <SelectControl
+                                    value={form.values.reservation_address}
+                                    propKey={'value'}
+                                    propValue={'label'}
+                                    onChange={(value: 'no' | 'optional' | 'required') =>
+                                        form.update({ reservation_address: value })
+                                    }
+                                    options={reservationFieldOptions}
+                                />
+                                <FormError error={form.errors.reservation_address} />
                             </div>
 
-                            <div className="form-group form-group-inline">
+                            <div className="form-group">
                                 <label className="form-label" htmlFor="reservation_birth_date">
                                     {translate('reservation_settings.labels.birth_date')}
                                 </label>
-                                <div className="form-offset">
-                                    <SelectControl
-                                        value={form.values.reservation_birth_date}
-                                        propKey={'value'}
-                                        propValue={'label'}
-                                        onChange={(value: 'no' | 'optional' | 'required') =>
-                                            form.update({ reservation_birth_date: value })
-                                        }
-                                        options={reservationFieldOptions}
-                                    />
-                                    <FormError error={form.errors.reservation_birth_date} />
-                                </div>
+
+                                <SelectControl
+                                    value={form.values.reservation_birth_date}
+                                    propKey={'value'}
+                                    propValue={'label'}
+                                    onChange={(value: 'no' | 'optional' | 'required') =>
+                                        form.update({ reservation_birth_date: value })
+                                    }
+                                    options={reservationFieldOptions}
+                                />
+                                <FormError error={form.errors.reservation_birth_date} />
                             </div>
                         </div>
                     </div>
                 </div>
+
                 <div className="card-section card-section-primary">
-                    <div className="form-group form-group-inline">
-                        <label className="form-label">{translate('reservation_settings.labels.fields')}</label>
-                        <div className="form-offset">
-                            <ReservationFieldsEditor fields={fields} onChange={setFields} errors={form.errors} />
+                    <div className="row">
+                        <div className="col col-md-10 col-md-offset-2 col-xs-12">
+                            <div className="form-group">
+                                <label className="form-label">{translate('reservation_settings.labels.fields')}</label>
+
+                                <ReservationFieldsEditor fields={fields} onChange={setFields} errors={form.errors} />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -176,23 +177,22 @@ export default function ReservationsSettings() {
                     hasPermission(activeOrganization, 'manage_payment_methods') && (
                         <div className="card-section card-section-primary card-section-settings">
                             <div className="row">
-                                <div className="col-xs-12 col-lg-8">
-                                    <div className="form-group form-group-inline">
+                                <div className="col col-md-10 col-md-offset-2 col-xs-12">
+                                    <div className="form-group">
                                         <label className="form-label" htmlFor="reservation_birth_date">
                                             {translate('reservation_settings.labels.extra_payments')}
                                         </label>
-                                        <div className="form-offset">
-                                            <SelectControl
-                                                value={form.values.reservation_allow_extra_payments}
-                                                propKey={'value'}
-                                                propValue={'label'}
-                                                onChange={(value: boolean) =>
-                                                    form.update({ reservation_allow_extra_payments: value })
-                                                }
-                                                options={extraPaymentsOptions}
-                                            />
-                                            <FormError error={form.errors.reservation_allow_extra_payments} />
-                                        </div>
+
+                                        <SelectControl
+                                            value={form.values.reservation_allow_extra_payments}
+                                            propKey={'value'}
+                                            propValue={'label'}
+                                            onChange={(value: boolean) =>
+                                                form.update({ reservation_allow_extra_payments: value })
+                                            }
+                                            options={extraPaymentsOptions}
+                                        />
+                                        <FormError error={form.errors.reservation_allow_extra_payments} />
                                     </div>
                                 </div>
                             </div>
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
index b83c21578..1e913b319 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
@@ -11,6 +11,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';
 
 export default function ReservationExtraPaymentDetails({
     payment,
@@ -125,18 +126,18 @@ export default function ReservationExtraPaymentDetails({
                 <div className="card-block card-block-keyvalue">
                     <KeyValueItem label={translate('reservation.labels.status')}>
                         {!payment.is_fully_refunded && payment.is_paid && (
-                            <div className="label label-success">{payment.state_locale}</div>
+                            <Label type="success">{payment.state_locale}</Label>
                         )}
 
                         {!payment.is_fully_refunded && payment.is_pending && (
-                            <div className="label default">{payment.state_locale}</div>
+                            <Label type="default">{payment.state_locale}</Label>
                         )}
 
                         {['failed', 'canceled', 'expired'].includes(payment.state) && (
-                            <div className="label label-danger">{payment.state_locale}</div>
+                            <Label type="danger">{payment.state_locale}</Label>
                         )}
 
-                        {payment.is_fully_refunded && <div className="label label-danger">Terugbetaald</div>}
+                        {payment.is_fully_refunded && <Label type="danger">Terugbetaald</Label>}
                     </KeyValueItem>
 
                     <KeyValueItem label={translate('reservation.labels.amount')}>
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
index c5a18f5fa..52ae11f9f 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ExtraPaymentRefund from '../../../../props/models/ExtraPaymentRefund';
 import useTranslate from '../../../../hooks/useTranslate';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function ReservationExtraPaymentRefunds({ refunds }: { refunds: Array<ExtraPaymentRefund> }) {
     const translate = useTranslate();
@@ -35,15 +36,15 @@ export default function ReservationExtraPaymentRefunds({ refunds }: { refunds: A
                                         <td>{refund.amount_locale}</td>
                                         <td>
                                             {refund.state == 'refunded' && (
-                                                <div className="tag tag-sm tag-success">{refund.state_locale}</div>
+                                                <Label type="success">{refund.state_locale}</Label>
                                             )}
 
                                             {['canceled', 'failed'].includes(refund.state) && (
-                                                <div className="tag tag-sm tag-danger">{refund.state_locale}</div>
+                                                <Label type="danger">{refund.state_locale}</Label>
                                             )}
 
                                             {!['refunded', 'canceled', 'failed'].includes(refund.state) && (
-                                                <div className="tag tag-sm tag-warning">{refund.state_locale}</div>
+                                                <Label type="warning">{refund.state_locale}</Label>
                                             )}
                                         </td>
                                     </tr>
diff --git a/react/src/dashboard/components/pages/reservations/Reservations.tsx b/react/src/dashboard/components/pages/reservations/Reservations.tsx
index f818a5abc..761c9963d 100644
--- a/react/src/dashboard/components/pages/reservations/Reservations.tsx
+++ b/react/src/dashboard/components/pages/reservations/Reservations.tsx
@@ -281,8 +281,6 @@ export default function Reservations() {
         });
     }, [activeOrganization, productService, providerFundService]);
 
-    useEffect(() => console.log(selectedMeta), [selectedMeta]);
-
     if (!reservations) {
         return <LoadingCard />;
     }
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationLabel.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationLabel.tsx
index 5ddb0e925..073461432 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationLabel.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationLabel.tsx
@@ -1,26 +1,29 @@
 import React from 'react';
 import Reservation from '../../../../props/models/Reservation';
-import classNames from 'classnames';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function ReservationLabel({ reservation }: { reservation: Reservation }) {
     if (reservation.expired) {
-        return <label className="label label-danger-light">Verlopen</label>;
+        return <Label type="danger_light">Verlopen</Label>;
     }
 
-    return (
-        <label
-            className={classNames(
-                `label`,
-                reservation?.state === 'waiting' && 'label-default',
-                reservation?.state === 'pending' && 'label-default',
-                reservation?.state === 'accepted' && 'label-success',
-                reservation?.state === 'rejected' && 'label-danger',
-                reservation?.state === 'canceled' && 'label-danger',
-                reservation?.state === 'canceled_by_client' && 'label-danger',
-                reservation?.state === 'canceled_payment_expired' && 'label-danger',
-                reservation?.state === 'canceled_payment_canceled' && 'label-danger',
-            )}>
-            {reservation.state_locale}
-        </label>
-    );
+    if (reservation?.state === 'waiting' || reservation?.state === 'pending') {
+        return <Label type="default">{reservation.state_locale}</Label>;
+    }
+
+    if (reservation?.state === 'accepted') {
+        return <Label type="success">{reservation.state_locale}</Label>;
+    }
+
+    if (
+        reservation?.state === 'rejected' ||
+        reservation?.state === 'canceled' ||
+        reservation?.state === 'canceled_by_client' ||
+        reservation?.state === 'canceled_payment_expired' ||
+        reservation?.state === 'canceled_payment_canceled'
+    ) {
+        return <Label type="danger">{reservation.state_locale}</Label>;
+    }
+
+    return <Label type={'default'}>reservation.state_locale</Label>;
 }
diff --git a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
index a9a02f36a..68bb9329b 100644
--- a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
+++ b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/elements/SponsorFundUnsubscriptionTableItem.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { strLimit } from '../../../../helpers/string';
 import Organization from '../../../../props/models/Organization';
 import FundProviderUnsubscribe from '../../../../props/models/FundProviderUnsubscribe';
@@ -6,6 +6,7 @@ import useAssetUrl from '../../../../hooks/useAssetUrl';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import Tooltip from '../../../elements/tooltip/Tooltip';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function SponsorFundUnsubscriptionTableItem({
     organization,
@@ -16,13 +17,6 @@ export default function SponsorFundUnsubscriptionTableItem({
 }) {
     const assetUrl = useAssetUrl();
 
-    const [stateClasses] = useState({
-        approved: 'success',
-        pending: 'warning',
-        overdue: 'danger',
-        canceled: 'default',
-    });
-
     return (
         <StateNavLink
             customElement={'tr'}
@@ -78,9 +72,14 @@ export default function SponsorFundUnsubscriptionTableItem({
             </td>
 
             <td className="nowrap">
-                <div className={`tag tag-sm tag-${stateClasses[unsubscription.state] || 'default'}`}>
-                    {unsubscription.state_locale}
-                </div>
+                {unsubscription.state === 'approved' && <Label type={'success'}>{unsubscription.state_locale}</Label>}
+                {unsubscription.state === 'pending' && <Label type={'warning'}>{unsubscription.state_locale}</Label>}
+                {unsubscription.state === 'overdue' && <Label type={'danger'}>{unsubscription.state_locale}</Label>}
+                {unsubscription.state === 'canceled' && <Label type={'default'}>{unsubscription.state_locale}</Label>}
+
+                {!['approved', 'pending', 'overdue', 'canceled'].includes(unsubscription.state) && (
+                    <Label type={'default'}>{unsubscription.state_locale}</Label>
+                )}
             </td>
 
             <td className="nowrap">
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 3baec30b4..bec7a5656 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
@@ -9,6 +9,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';
 
 export default function ProductMonitoredHistoryCardFunds({
     type = 'card',
@@ -78,17 +79,9 @@ export default function ProductMonitoredHistoryCardFunds({
                                 )}
                             </td>
                             <td>
-                                {fund.state === 'approved' && (
-                                    <span className="label label-success">{fund.state_locale}</span>
-                                )}
-
-                                {fund.state === 'pending' && (
-                                    <span className="label label-default">{fund.state_locale}</span>
-                                )}
-
-                                {fund.state === 'not_applied' && (
-                                    <span className="label label-warning">{fund.state_locale}</span>
-                                )}
+                                {fund.state === 'approved' && <Label type="success">{fund.state_locale}</Label>}
+                                {fund.state === 'pending' && <Label type="default">{fund.state_locale}</Label>}
+                                {fund.state === 'not_applied' && <Label type="warning">{fund.state_locale}</Label>}
                             </td>
                             <td className="table-td-actions">
                                 <TableRowActions
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
index 18356bc2a..ca1f2fd7b 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
@@ -252,19 +252,15 @@ export default function SponsorProviderOrganizations() {
 
                             {!filter.show && (
                                 <Fragment>
-                                    <div className="form-group form-group-inline">
-                                        <label className="form-label">Sorteer op:</label>
-                                        <div className="form-offset">
-                                            <SelectControl
-                                                className={'form-control form-control-text nowrap'}
-                                                options={orderByOptions}
-                                                propKey={'value'}
-                                                allowSearch={false}
-                                                value={filterValues.order_by}
-                                                onChange={(order_by: string) => filterUpdate({ order_by })}
-                                            />
-                                        </div>
-                                    </div>
+                                    <label className="form-label">Sorteer op:</label>
+                                    <SelectControl
+                                        className={'form-control form-control-text nowrap'}
+                                        options={orderByOptions}
+                                        propKey={'value'}
+                                        allowSearch={false}
+                                        value={filterValues.order_by}
+                                        onChange={(order_by: string) => filterUpdate({ order_by })}
+                                    />
 
                                     <div className="block block-label-tabs">
                                         <div className="label-tab-set">
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 b6b8b1d45..59d6aaa6b 100644
--- a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
+++ b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
@@ -21,6 +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';
 
 export default function TransactionBulksView() {
     const envData = useEnvData();
@@ -453,19 +454,19 @@ export default function TransactionBulksView() {
                                 <KeyValueItem label={translate('financial_dashboard_transaction.labels.status')}>
                                     <Fragment>
                                         {transactionBulk.state == 'rejected' && (
-                                            <span className="label label-danger">{transactionBulk.state_locale}</span>
+                                            <Label type="danger">{transactionBulk.state_locale}</Label>
                                         )}
                                         {transactionBulk.state == 'error' && (
-                                            <span className="label label-danger">{transactionBulk.state_locale}</span>
+                                            <Label type="danger">{transactionBulk.state_locale}</Label>
                                         )}
                                         {transactionBulk.state == 'draft' && (
-                                            <span className="label label-default">{transactionBulk.state_locale}</span>
+                                            <Label type="default">{transactionBulk.state_locale}</Label>
                                         )}
                                         {transactionBulk.state == 'accepted' && (
-                                            <span className="label label-success">{transactionBulk.state_locale}</span>
+                                            <Label type="success">{transactionBulk.state_locale}</Label>
                                         )}
                                         {transactionBulk.state == 'pending' && (
-                                            <span className="label label-default">{transactionBulk.state_locale}</span>
+                                            <Label type="default">{transactionBulk.state_locale}</Label>
                                         )}
                                         {transactionBulk.state == 'pending' && (
                                             <Tooltip text="De status van bulkbetaling wordt om het uur gecontroleerd." />
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 baf958e6d..fd059273b 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
@@ -16,6 +16,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';
 
 export default function TransactionBulkTransactionsTable({
     organization,
@@ -191,14 +192,9 @@ export default function TransactionBulkTransactionsTable({
                                         <td>{strLimit(transaction.product?.name || '-', 25) || '-'}</td>
 
                                         <td>
-                                            <div
-                                                className={
-                                                    transaction.state == 'success'
-                                                        ? 'label label-success'
-                                                        : 'label label-default'
-                                                }>
+                                            <Label type={transaction.state == 'success' ? 'success' : 'default'}>
                                                 {transaction.state_locale}
-                                            </div>
+                                            </Label>
                                         </td>
                                         <td>
                                             <StateNavLink
diff --git a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
index fbc3144a1..aa1b429d5 100644
--- a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
+++ b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
@@ -80,10 +80,10 @@ export default function TransactionSettings() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-xs-10 col-md-8 col-lg-6">
-                                <div className="form-group form-group-inline form-group-inline-xl tooltipped">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group tooltipped">
                                     <label className="form-label">Select data</label>
-                                    <div className="form-offset flex flex-vertical">
+                                    <div className="flex flex-vertical">
                                         <CheckboxControl
                                             id="bank_transaction_id"
                                             title="Transactie ID"
@@ -229,20 +229,18 @@ export default function TransactionSettings() {
                                 </div>
                             </div>
 
-                            <div className="col col-xs-12 col-md-12">
-                                <div className="form-group form-group-inline form-group-inline-xl">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">Scheidingsteken</label>
-                                    <div className="form-offset flex flex-vertical">
-                                        <SelectControl
-                                            className="form-control"
-                                            propValue={'value'}
-                                            propKey={'key'}
-                                            allowSearch={false}
-                                            value={form.values?.bank_separator}
-                                            onChange={(bank_separator: string) => form.update({ bank_separator })}
-                                            options={separatorOptions}
-                                        />
-                                    </div>
+                                    <SelectControl
+                                        className="form-control"
+                                        propValue={'value'}
+                                        propKey={'key'}
+                                        allowSearch={false}
+                                        value={form.values?.bank_separator}
+                                        onChange={(bank_separator: string) => form.update({ bank_separator })}
+                                        options={separatorOptions}
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -250,127 +248,125 @@ export default function TransactionSettings() {
 
                     <div className="card-section card-section-primary">
                         <div className="row">
-                            <div className="col col-xs-12 col-md-12">
-                                <div className="form-group form-group-inline form-group-inline-xl">
+                            <div className="col col-md-8 col-md-offset-2 col-xs-12">
+                                <div className="form-group">
                                     <label className="form-label">Voorbeeld omschrijving bankafschrift</label>
 
-                                    <div className="form-offset">
-                                        <div className="form-group-info form-group-info-dashed">
-                                            <div className="form-group-info-control">
-                                                <input
-                                                    type="text"
-                                                    disabled={true}
-                                                    className="form-control"
-                                                    value={statementExample}
-                                                />
+                                    <div className="form-group-info form-group-info-dashed">
+                                        <div className="form-group-info-control">
+                                            <input
+                                                type="text"
+                                                disabled={true}
+                                                className="form-control"
+                                                value={statementExample}
+                                            />
 
-                                                <div className="form-group-info-button">
-                                                    <div
-                                                        className="button button-default button-icon pull-left"
-                                                        onClick={() => setShowExampleTooltip(!showExampleTooltip)}>
-                                                        <em className="mdi mdi-information" />
-                                                    </div>
+                                            <div className="form-group-info-button">
+                                                <div
+                                                    className="button button-default button-icon pull-left"
+                                                    onClick={() => setShowExampleTooltip(!showExampleTooltip)}>
+                                                    <em className="mdi mdi-information" />
                                                 </div>
                                             </div>
                                         </div>
+                                    </div>
 
-                                        <div className="form-hint">
-                                            De omschrijving op het bankafschrift kan maximaal 140 karakters bevatten.
-                                        </div>
+                                    <div className="form-hint">
+                                        De omschrijving op het bankafschrift kan maximaal 140 karakters bevatten.
+                                    </div>
 
-                                        <div className="form-hint form-hint-margin-less">
-                                            Fondsnaam, Vestgingsnaam en Notitie worden afgekort indien het limiet van
-                                            140 karakters is overschreden
-                                        </div>
+                                    <div className="form-hint form-hint-margin-less">
+                                        Fondsnaam, Vestgingsnaam en Notitie worden afgekort indien het limiet van 140
+                                        karakters is overschreden
+                                    </div>
 
-                                        {showExampleTooltip && (
-                                            <div className="block block-info block-info-list">
-                                                <div className="block-info-list-title">
-                                                    <em className="mdi mdi-information block-info-icon" />
-                                                    Gegevens gebruikt in het voorbeeld:
-                                                </div>
+                                    {showExampleTooltip && (
+                                        <div className="block block-info block-info-list">
+                                            <div className="block-info-list-title">
+                                                <em className="mdi mdi-information block-info-icon" />
+                                                Gegevens gebruikt in het voorbeeld:
+                                            </div>
 
-                                                <ul className="block-info-list-items">
-                                                    <li className="block-info-list-item">
-                                                        Transactie ID:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_transaction_id} • 10 karakters
-                                                        </span>
-                                                    </li>
+                                            <ul className="block-info-list-items">
+                                                <li className="block-info-list-item">
+                                                    Transactie ID:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_transaction_id} • 10 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Transactiedatum:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_transaction_date} • 10 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Transactiedatum:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_transaction_date} • 10 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Transactietijd:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_transaction_time} • 8 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Transactietijd:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_transaction_time} • 8 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Reserveringsnummer:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_reservation_number} • 9 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Reserveringsnummer:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_reservation_number} • 9 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Vestigingsnummer:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_branch_number} • 12 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Vestigingsnummer:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_branch_number} • 12 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Vestiging ID:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_branch_id} • 3-20 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Vestiging ID:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_branch_id} • 3-20 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Vestigingsnaam:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_branch_name} • 3-100 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Vestigingsnaam:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_branch_name} • 3-100 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Fondsnaam:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_fund_name} • 3-100 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Fondsnaam:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_fund_name} • 3-100 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Voornaam:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_reservation_first_name} • 3-100 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Voornaam:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_reservation_first_name} • 3-100 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Achternaam:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_reservation_last_name} • 3-100 karakters
-                                                        </span>
-                                                    </li>
+                                                <li className="block-info-list-item">
+                                                    Achternaam:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_reservation_last_name} • 3-100 karakters
+                                                    </span>
+                                                </li>
 
-                                                    <li className="block-info-list-item">
-                                                        Notitie:
-                                                        <span className="block-info-list-item-value">
-                                                            {testData.bank_note} • 255 karakters
-                                                        </span>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        )}
-                                    </div>
+                                                <li className="block-info-list-item">
+                                                    Notitie:
+                                                    <span className="block-info-list-item-value">
+                                                        {testData.bank_note} • 255 karakters
+                                                    </span>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>
diff --git a/react/src/dashboard/components/pages/transactions/Transactions.tsx b/react/src/dashboard/components/pages/transactions/Transactions.tsx
index 6293e80c6..a7ebf99fa 100644
--- a/react/src/dashboard/components/pages/transactions/Transactions.tsx
+++ b/react/src/dashboard/components/pages/transactions/Transactions.tsx
@@ -39,6 +39,7 @@ import TableRowActions from '../../elements/tables/TableRowActions';
 import TransactionStateLabel from '../../elements/resource-states/TransactionStateLabel';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import usePushApiError from '../../../hooks/usePushApiError';
+import Label from '../../elements/image_cropper/Label';
 
 export default function Transactions() {
     const envData = useEnvData();
@@ -955,22 +956,16 @@ export default function Transactions() {
                                                 <td>
                                                     {(transaction.bulk_state == 'rejected' ||
                                                         transaction.bulk_state == 'error') && (
-                                                        <div className="label label-danger">
-                                                            {transaction.bulk_state_locale}
-                                                        </div>
+                                                        <Label type="danger">{transaction.bulk_state_locale}</Label>
                                                     )}
 
                                                     {(transaction.bulk_state == 'draft' ||
                                                         transaction.bulk_state == 'pending') && (
-                                                        <div className="label label-default">
-                                                            {transaction.bulk_state_locale}
-                                                        </div>
+                                                        <Label type="default">{transaction.bulk_state_locale}</Label>
                                                     )}
 
                                                     {transaction.bulk_state == 'accepted' && (
-                                                        <div className="label label-success">
-                                                            {transaction.bulk_state_locale}
-                                                        </div>
+                                                        <Label type="success">{transaction.bulk_state_locale}</Label>
                                                     )}
 
                                                     {!transaction.bulk_state && <TableEmptyValue />}
@@ -1116,32 +1111,23 @@ export default function Transactions() {
                                             <td>{transactionBulk.voucher_transactions_count}</td>
                                             <td>
                                                 {transactionBulk.state === 'rejected' && (
-                                                    <div className="label label-danger">
-                                                        {transactionBulk.state_locale}
-                                                    </div>
+                                                    <Label type="danger">{transactionBulk.state_locale}</Label>
                                                 )}
+
                                                 {transactionBulk.state === 'error' && (
-                                                    <div className="label label-danger">
-                                                        {transactionBulk.state_locale}
-                                                    </div>
+                                                    <Label type="danger">{transactionBulk.state_locale}</Label>
                                                 )}
 
                                                 {transactionBulk.state === 'draft' && (
-                                                    <div className="label label-default">
-                                                        {transactionBulk.state_locale}
-                                                    </div>
+                                                    <Label type="default">{transactionBulk.state_locale}</Label>
                                                 )}
 
                                                 {transactionBulk.state === 'accepted' && (
-                                                    <div className="label label-success">
-                                                        {transactionBulk.state_locale}
-                                                    </div>
+                                                    <Label type="success">{transactionBulk.state_locale}</Label>
                                                 )}
 
                                                 {transactionBulk.state === 'pending' && (
-                                                    <div className="label label-default">
-                                                        {transactionBulk.state_locale}
-                                                    </div>
+                                                    <Label type="default">{transactionBulk.state_locale}</Label>
                                                 )}
                                             </td>
 
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index 9dde7f67d..a97d04af4 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -28,6 +28,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';
 
 export default function VouchersViewComponent() {
     const { id } = useParams();
@@ -316,23 +317,21 @@ export default function VouchersViewComponent() {
                         </div>
                         <div className="flex flex-vertical flex-center">
                             {!voucher.expired && voucher.state == 'active' && (
-                                <div className="tag tag-success tag-sm">{voucher.state_locale}</div>
+                                <Label type="success">{voucher.state_locale}</Label>
                             )}
                         </div>
                         <div className="flex flex-vertical flex-center">
                             {!voucher.expired && voucher.state == 'pending' && (
-                                <div className="tag tag-default tag-sm">{voucher.state_locale}</div>
+                                <Label type="default">{voucher.state_locale}</Label>
                             )}
                         </div>
                         <div className="flex flex-vertical flex-center">
                             {!voucher.expired && voucher.state == 'deactivated' && (
-                                <div className="tag tag-danger tag-sm">{voucher.state_locale}</div>
+                                <Label type="danger">{voucher.state_locale}</Label>
                             )}
                         </div>
                         <div className="flex flex-vertical flex-center">
-                            {voucher.expired && (
-                                <div className="tag tag-warning tag-sm">{translate('vouchers.labels.expired')}</div>
-                            )}
+                            {voucher.expired && <Label type="warning">{translate('vouchers.labels.expired')}</Label>}
                         </div>
                     </div>
                     {hasPermission(activeOrganization, 'manage_vouchers') && (
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
index 7ad944108..2cf5599e1 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
@@ -14,6 +14,7 @@ import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import Label from '../../../elements/image_cropper/Label';
 
 export default function VoucherTransactions({
     blockTitle,
@@ -85,7 +86,7 @@ export default function VoucherTransactions({
                                         <ThSortable
                                             filter={filter}
                                             label={translate('transactions.labels.uid')}
-                                            value="id"
+                                            value="uid"
                                         />
                                         <ThSortable
                                             filter={filter}
@@ -173,13 +174,9 @@ export default function VoucherTransactions({
                                             </td>
                                             <td>
                                                 {transaction.state == 'success' ? (
-                                                    <div className="label label-success">
-                                                        {transaction.state_locale}
-                                                    </div>
+                                                    <Label type="success">{transaction.state_locale}</Label>
                                                 ) : (
-                                                    <div className="label label-default">
-                                                        {transaction.state_locale}
-                                                    </div>
+                                                    <Label type="default">{transaction.state_locale}</Label>
                                                 )}
                                             </td>
 
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx b/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
index 80047b5c5..5fa1e1cb3 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
@@ -72,43 +72,42 @@ export default function VoucherRecordsEditor({
         <div className="block block-voucher-records-editor form">
             <div className="block-voucher-record-list" hidden={records.length === 0}>
                 {records.map((record, index) => (
-                    <div key={index} className="form-group form-group-inline form-group-inline-lg">
+                    <div key={index} className="form-group">
                         <div className="form-label">{record.name}</div>
-                        <div className="form-offset">
-                            <div className="voucher-record-item">
-                                <div className="voucher-record-item-input flex-flex-vertical">
-                                    {record.key != 'birth_date' ? (
-                                        <input
-                                            type="text"
-                                            className="form-control"
-                                            value={record.value || ''}
-                                            placeholder={record.name}
-                                            onChange={(e) => {
-                                                records[index].value = e.target.value;
-                                                setRecords([...records]);
-                                            }}
-                                        />
-                                    ) : (
-                                        <DatePickerControl
-                                            value={dateParse(record.value)}
-                                            placeholder={translate('dd-MM-yyyy')}
-                                            onChange={(value: Date) => {
-                                                const recordsData = [...records];
-                                                recordsData[index].value = dateFormat(value);
-                                                setRecords(recordsData);
-                                            }}
-                                        />
-                                    )}
-
-                                    <FormError error={errors?.[record.key]} />
-                                </div>
 
-                                <div className="voucher-record-item-actions">
-                                    <div
-                                        className="button button-icon button-default"
-                                        onClick={() => removeRecord(record.key)}>
-                                        <em className="mdi mdi-close" />
-                                    </div>
+                        <div className="voucher-record-item">
+                            <div className="voucher-record-item-input flex-flex-vertical">
+                                {record.key != 'birth_date' ? (
+                                    <input
+                                        type="text"
+                                        className="form-control"
+                                        value={record.value || ''}
+                                        placeholder={record.name}
+                                        onChange={(e) => {
+                                            records[index].value = e.target.value;
+                                            setRecords([...records]);
+                                        }}
+                                    />
+                                ) : (
+                                    <DatePickerControl
+                                        value={dateParse(record.value)}
+                                        placeholder={translate('dd-MM-yyyy')}
+                                        onChange={(value: Date) => {
+                                            const recordsData = [...records];
+                                            recordsData[index].value = dateFormat(value);
+                                            setRecords(recordsData);
+                                        }}
+                                    />
+                                )}
+
+                                <FormError error={errors?.[record.key]} />
+                            </div>
+
+                            <div className="voucher-record-item-actions">
+                                <div
+                                    className="button button-icon button-default"
+                                    onClick={() => removeRecord(record.key)}>
+                                    <em className="mdi mdi-close" />
                                 </div>
                             </div>
                         </div>
@@ -118,7 +117,7 @@ export default function VoucherRecordsEditor({
 
             {recordTypesAvailable?.length > 0 && (
                 <div className="block-voucher-record-add">
-                    <div className="form-group form-group-inline form-group-inline-lg">
+                    <div className="form-group">
                         <div className="form-label">Selecteer persoonsgegevens</div>
                         {!showRecordSelector ? (
                             <div className="button button-primary" onClick={() => setShowRecordSelector(true)}>
@@ -137,7 +136,7 @@ export default function VoucherRecordsEditor({
                     </div>
 
                     {showRecordSelector && (
-                        <div className="form-group form-group-inline form-group-inline-lg">
+                        <div className="form-group">
                             <div className="form-label" />
                             <div className="block-voucher-record-add-actions">
                                 <button
diff --git a/react/src/dashboard/i18n/en/i18n-components.js b/react/src/dashboard/i18n/en/i18n-components.js
index 2b18910a2..79a45cf80 100644
--- a/react/src/dashboard/i18n/en/i18n-components.js
+++ b/react/src/dashboard/i18n/en/i18n-components.js
@@ -44,7 +44,6 @@ export default {
             title: 'Title',
             content: 'Content',
             urgency: 'Urgency',
-            contact: 'Contact',
             use_customer_email: 'I would like to be notified by email about this feedback',
         },
         buttons: {
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index a7ded8b45..098c01136 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -329,6 +329,8 @@ export default {
         },
         buttons: {
             choose: 'Kies een ander fonds',
+            create: 'Activatiecode aanmaken',
+            upload: 'Upload .csv bestand',
         },
     },
     // FINANCIAL DASHBOARD = financial-dashboard-transaction.pug
@@ -1440,6 +1442,8 @@ export default {
             actions: 'Actie',
             auth_2fa: '2FA',
             owner: 'Eigenaar',
+            created_at: 'Aangemaakt op',
+            last_activity: 'Laatste handeling',
         },
         buttons: {
             adjust: 'Aanpassen',
@@ -1752,10 +1756,11 @@ export default {
     // PRE VALIDATED TABLE = prevalidated_table.pug
     prevalidated_table: {
         header: {
-            title: 'Gegevens van aanvragers',
+            title: 'Klaarzetten',
         },
         labels: {
             code: 'Code',
+            fund: 'Fonds',
             employee: 'Medewerker',
             search: 'Zoeken',
             exported: 'Geëxporteerd',
@@ -1769,6 +1774,7 @@ export default {
             export_selected: 'Exporteer selectie',
             export_csv: 'Exporteer als .CSV',
             export_xls: 'Exporteer als .XLS',
+            add_new: 'Exporteer als .XLS',
         },
     },
 
diff --git a/react/src/dashboard/i18n/nl/pages/system-notifications.js b/react/src/dashboard/i18n/nl/pages/system-notifications.js
index f339548c5..549647c99 100644
--- a/react/src/dashboard/i18n/nl/pages/system-notifications.js
+++ b/react/src/dashboard/i18n/nl/pages/system-notifications.js
@@ -31,11 +31,6 @@ export default {
             title: 'Reservering geannuleerd door aanvrager',
             description: 'Aanbieders ontvangen dit bericht wanneer hun reservering door de aanvrager is geannuleerd.',
         },
-        'notifications_fund_providers.revoked_budget': {
-            title: 'Aanbieder geweigerd voor het scannen van een financieel-tegoed',
-            description:
-                'Aanbieders ontvangen dit bericht wanneer de sponsor ze weigert voor het scannen van een financieel-tegoed.',
-        },
         'notifications_fund_providers.revoked_products': {
             title: 'Aanbieder geweigerd voor het aanbieden van alle aanbiedingen',
             description: 'Aanbieders ontvangen dit bericht wanneer de sponsor al hun aanbod weigert.',
diff --git a/react/src/dashboard/props/models/Employee.tsx b/react/src/dashboard/props/models/Employee.tsx
index 00504275c..f9accd149 100644
--- a/react/src/dashboard/props/models/Employee.tsx
+++ b/react/src/dashboard/props/models/Employee.tsx
@@ -19,4 +19,6 @@ export default interface Employee {
         number: number;
         full_name: string;
     };
+    created_at_locale?: string;
+    last_activity_at_locale?: string;
 }
diff --git a/react/src/dashboard/props/models/FundRequest.tsx b/react/src/dashboard/props/models/FundRequest.tsx
index a84255337..9ad71723a 100644
--- a/react/src/dashboard/props/models/FundRequest.tsx
+++ b/react/src/dashboard/props/models/FundRequest.tsx
@@ -57,4 +57,5 @@ export default interface FundRequest {
     payouts?: Array<PayoutTransaction>;
     vouchers?: Array<Voucher>;
     current_period?: boolean;
+    active_vouchers?: Array<Voucher>;
 }
diff --git a/react/src/dashboard/props/models/Prevalidation.tsx b/react/src/dashboard/props/models/Prevalidation.tsx
index be17fb8cb..07c22a2a8 100644
--- a/react/src/dashboard/props/models/Prevalidation.tsx
+++ b/react/src/dashboard/props/models/Prevalidation.tsx
@@ -1,4 +1,5 @@
 import PrevalidationRecord from './PrevalidationRecord';
+import Fund from './Fund';
 
 export default interface Prevalidation {
     id: number;
@@ -8,6 +9,7 @@ export default interface Prevalidation {
     identity_address: string;
     records_hash: string;
     state: string;
+    fund?: Fund;
     uid?: string;
     uid_hash?: string;
 }
diff --git a/react/src/dashboard/props/models/Reimbursement.tsx b/react/src/dashboard/props/models/Reimbursement.tsx
index 8d740bbb3..0829a87c1 100644
--- a/react/src/dashboard/props/models/Reimbursement.tsx
+++ b/react/src/dashboard/props/models/Reimbursement.tsx
@@ -18,7 +18,7 @@ export default interface Reimbursement {
     lead_time_locale: string;
     employee?: Employee;
     expired: boolean;
-    state: string;
+    state: 'pending' | 'approved' | 'declined';
     state_locale: string;
     voucher_transaction: Transaction;
     deactivated: boolean;
diff --git a/react/src/dashboard/router/routes.tsx b/react/src/dashboard/router/routes.tsx
index e68df8e65..0f49ac58c 100644
--- a/react/src/dashboard/router/routes.tsx
+++ b/react/src/dashboard/router/routes.tsx
@@ -7,7 +7,7 @@ import FundRequests from '../components/pages/fund-requests/FundRequests';
 import FundRequestsView from '../components/pages/fund-requests-view/FundRequestsView';
 import Home from '../components/pages/home/Home';
 import Employees from '../components/pages/employees/Employees';
-import CsvValidations from '../components/pages/csv_validations/CsvValidations';
+import Prevalidations from '../components/pages/prevalidations/Prevalidations';
 import Organizations from '../components/pages/organizations/Organizations';
 import IdentityRestore from '../components/pages/auth/IdentityRestore';
 import Redirect from '../components/pages/redirect/Redirect';
@@ -605,9 +605,9 @@ router.state('feedback', <Feedback />, {
     altPath: `/organizations/:organizationId/feedback`,
 });
 
-router.state('csv-validation', <CsvValidations />, {
-    path: `/aanvragers-toevoegen`,
-    altPath: `/csv-validations`,
+router.state('csv-validation', <Prevalidations />, {
+    path: `/organisaties/:organizationId/aanvragers-toevoegen`,
+    altPath: `/organizations/:organizationId/csv-validations`,
 });
 
 router.state('preferences-emails', <PreferencesEmails />, {
diff --git a/react/src/dashboard/services/EmployeeService.ts b/react/src/dashboard/services/EmployeeService.ts
index e1343cdae..75872616a 100644
--- a/react/src/dashboard/services/EmployeeService.ts
+++ b/react/src/dashboard/services/EmployeeService.ts
@@ -69,6 +69,8 @@ export class EmployeeService<T = Employee> {
             isProviderPanel ? 'branch_name_id' : null,
             isProviderPanel ? 'branch_number' : null,
             'auth_2fa',
+            'created_at',
+            'last_activity',
         ].filter((item) => item);
 
         return list.map((key) => ({
diff --git a/react/src/dashboard/services/FundService.ts b/react/src/dashboard/services/FundService.ts
index 8214a1aac..e6c4f28a6 100644
--- a/react/src/dashboard/services/FundService.ts
+++ b/react/src/dashboard/services/FundService.ts
@@ -40,10 +40,6 @@ export class FundService<T = Fund> {
         return this.apiRequest.get(`${this.prefix}/${company_id}/funds`, data);
     }
 
-    public listPublic(data: object = {}): Promise<ResponseSimple<{ data: Array<T> }>> {
-        return this.apiRequest.get(`${this.prefix_public}`, data);
-    }
-
     public read(company_id: number, fund_id: number, data: object = {}): Promise<ApiResponseSingle<T>> {
         return this.apiRequest.get(`${this.prefix}/${company_id}/funds/${fund_id}`, data);
     }
diff --git a/react/src/dashboard/services/PrevalidationService.ts b/react/src/dashboard/services/PrevalidationService.ts
index d693458f8..6b1fd306e 100644
--- a/react/src/dashboard/services/PrevalidationService.ts
+++ b/react/src/dashboard/services/PrevalidationService.ts
@@ -16,26 +16,31 @@ export class PrevalidationService<T = Prevalidation> {
      *
      * @param data
      */
-    public prefix = '/platform/prevalidations';
+    public prefix = '/platform/organizations';
 
-    public list(filters: object = {}): Promise<ApiResponse<T>> {
-        return this.apiRequest.get(`${this.prefix}`, filters);
+    /**
+     * @param organization_id
+     * @param filters
+     */
+    public list(organization_id: number, filters: object = {}): Promise<ApiResponse<T>> {
+        return this.apiRequest.get(`${this.prefix}/${organization_id}/prevalidations`, filters);
     }
 
-    public submit(data: object = {}, fund_id: number = null): Promise<ApiResponseSingle<T>> {
-        return this.apiRequest.post(`${this.prefix}`, {
+    public store(organization_id: number, data: object = {}, fund_id: number = null): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.post(`${this.prefix}/${organization_id}/prevalidations`, {
             data: data,
             fund_id: fund_id,
         });
     }
 
-    public submitCollection(
+    public storeBatch(
+        organization_id: number,
         data: Array<{ [key: string]: string }>,
         fund_id: number = null,
         overwrite: Array<string> = [],
         file?: object,
     ): Promise<T> {
-        return this.apiRequest.post(`${this.prefix}/collection`, {
+        return this.apiRequest.post(`${this.prefix}/${organization_id}/prevalidations/collection`, {
             data: data,
             fund_id: fund_id,
             overwrite: overwrite,
@@ -44,6 +49,7 @@ export class PrevalidationService<T = Prevalidation> {
     }
 
     public submitCollectionCheck(
+        organization_id: number,
         data: Array<string>,
         fund_id: number = null,
         overwrite: Array<string> = [],
@@ -53,37 +59,37 @@ export class PrevalidationService<T = Prevalidation> {
             db: Array<{ uid_hash: string; records_hash: string }>;
         };
     }> {
-        return this.apiRequest.post(`${this.prefix}/collection/hash`, {
+        return this.apiRequest.post(`${this.prefix}/${organization_id}/prevalidations/collection/hash`, {
             data: data,
             fund_id: fund_id,
             overwrite: overwrite,
         });
     }
 
-    public destroy(code: string): Promise<ApiResponseSingle<T>> {
-        return this.apiRequest.delete(`${this.prefix}/${code}`);
-    }
-
-    public exportFields(): Promise<ApiResponseSingle<Array<ExportFieldProp>>> {
-        return this.apiRequest.get(`${this.prefix}/export-fields`);
+    public destroy(organization_id: number, code: string): Promise<ApiResponseSingle<T>> {
+        return this.apiRequest.delete(`${this.prefix}/${organization_id}/prevalidations/${code}`);
     }
 
-    public export(filters: object = {}): Promise<ResponseSimple<ArrayBuffer>> {
-        return this.apiRequest.get(`${this.prefix}/export`, filters, {
+    public export(organization_id: number, filters: object = {}): Promise<ResponseSimple<ArrayBuffer>> {
+        return this.apiRequest.get(`${this.prefix}/${organization_id}/prevalidations/export`, filters, {
             responseType: 'arraybuffer',
         });
     }
 
+    public exportFields(organization_id: number): Promise<ApiResponseSingle<Array<ExportFieldProp>>> {
+        return this.apiRequest.get(`${this.prefix}/${organization_id}/prevalidations/export-fields`);
+    }
+
     public getColumns(headers: Array<string>, typesByKey: object): Array<ConfigurableTableColumn> {
-        const list = ['code', 'employee', ...headers, 'active', 'exported'];
+        const list = ['code', 'fund', 'employee', ...headers, 'active', 'exported'];
 
         return list.map((key) => ({
             key,
-            label: typesByKey[key] || `prevalidated_table.labels.${key}`,
+            label: typesByKey?.[key] || `prevalidated_table.labels.${key}`,
             tooltip: {
                 key: key,
-                title: typesByKey[key] || `prevalidated_table.labels.${key}`,
-                description: typesByKey[key] || `prevalidated_table.tooltips.${key}`,
+                title: typesByKey?.[key] || `prevalidated_table.labels.${key}`,
+                description: typesByKey?.[key] || `prevalidated_table.tooltips.${key}`,
             },
         }));
     }
diff --git a/react/src/dashboard/services/exporters/usePrevalidationExporter.tsx b/react/src/dashboard/services/exporters/usePrevalidationExporter.tsx
index 9be187753..592641cfe 100644
--- a/react/src/dashboard/services/exporters/usePrevalidationExporter.tsx
+++ b/react/src/dashboard/services/exporters/usePrevalidationExporter.tsx
@@ -24,13 +24,13 @@ export default function usePrevalidationExporter() {
                 console.info('- data loaded from the api.');
 
                 prevalidationService
-                    .export(queryFilters)
+                    .export(organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res, 'prevalidations'))
                     .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
-            prevalidationService.exportFields().then((res) => {
+            prevalidationService.exportFields(organization_id).then((res) => {
                 openModal((modal) => (
                     <ModalExportDataSelect modal={modal} sections={makeSections(res.data.data)} onSuccess={onSuccess} />
                 ));
diff --git a/react/src/webshop/Webshop.tsx b/react/src/webshop/Webshop.tsx
index 89d0dedce..1cc2774c1 100644
--- a/react/src/webshop/Webshop.tsx
+++ b/react/src/webshop/Webshop.tsx
@@ -34,6 +34,7 @@ import CookieBanner from './modules/cookie_banner/CookieBanner';
 import ReadSpeakerScript from './modules/read_speaker/ReadSpeakerScript';
 import { isValidLocaleString } from '../dashboard/helpers/url';
 import { FrameDirectorProvider } from '../dashboard/modules/frame_director/context/FrameDirectorContext';
+import { LayoutProvider } from './contexts/LayoutContext';
 
 const locale = localStorage.getItem('locale');
 
@@ -133,22 +134,24 @@ export default function Webshop({ envData }: { envData: EnvDataWebshopProp }): R
                         },
                     }}>
                     <RouterSelector envData={envData as unknown as EnvDataProp}>
-                        <LoadingBarProvider>
-                            <PrintableProvider>
-                                <ModalsProvider>
-                                    <MainProvider cookiesAccepted={allowOptionalCookies}>
-                                        <TitleProvider>
-                                            <AuthProvider>
-                                                <QueryParamProvider adapter={ReactRouter6Adapter}>
-                                                    <StateHashPrefixRedirect />
-                                                    <RouterLayout envData={envData} />
-                                                </QueryParamProvider>
-                                            </AuthProvider>
-                                        </TitleProvider>
-                                    </MainProvider>
-                                </ModalsProvider>
-                            </PrintableProvider>
-                        </LoadingBarProvider>
+                        <LayoutProvider>
+                            <LoadingBarProvider>
+                                <PrintableProvider>
+                                    <ModalsProvider>
+                                        <MainProvider cookiesAccepted={allowOptionalCookies}>
+                                            <TitleProvider>
+                                                <AuthProvider>
+                                                    <QueryParamProvider adapter={ReactRouter6Adapter}>
+                                                        <StateHashPrefixRedirect />
+                                                        <RouterLayout envData={envData} />
+                                                    </QueryParamProvider>
+                                                </AuthProvider>
+                                            </TitleProvider>
+                                        </MainProvider>
+                                    </ModalsProvider>
+                                </PrintableProvider>
+                            </LoadingBarProvider>
+                        </LayoutProvider>
 
                         <CookieBanner envData={envData} setAllowOptionalCookies={setAllowOptionalCookies} />
                         <AwsRumScript awsRum={envData.config?.aws_rum} cookiesAccepted={allowOptionalCookies} />
diff --git a/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx b/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
index 8568ab5ed..b468ae045 100644
--- a/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
+++ b/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
@@ -8,6 +8,7 @@ import ReadSpeakerButton from '../../../modules/read_speaker/ReadSpeakerButton';
 import useIsMobile from '../../../hooks/useIsMobile';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
+import { useNavbarHeaderHeight } from '../../../hooks/useNavbarHeaderHeight';
 
 export default function BlockShowcasePage({
     aside = null,
@@ -26,6 +27,7 @@ export default function BlockShowcasePage({
 }) {
     const isMobile = useIsMobile(1000);
     const translate = useTranslate();
+    const navbarHeaderHeight = useNavbarHeaderHeight();
 
     const [showModalFilters, setShowModalFilters] = useState(false);
 
@@ -40,10 +42,11 @@ export default function BlockShowcasePage({
     const toggleMobileMenu = useCallback(() => {
         return showModalFilters ? hideMobileMenu() : showMobileMenu();
     }, [showMobileMenu, showModalFilters]);
-
     return (
         <BlockShowcase className={showCaseClassName} breadcrumbItems={[]}>
-            <div className="showcase-wrapper">
+            <div
+                className="showcase-wrapper"
+                style={{ '--top-navbar-height': `${navbarHeaderHeight}px` } as CSSProperties}>
                 <div className={classNames('showcase-mobile-filters', 'rs_skip', countFiltersApplied && 'active')}>
                     <div className="mobile-filters-count">
                         <div className="mobile-filters-count-value">{countFiltersApplied}</div>
@@ -62,16 +65,16 @@ export default function BlockShowcasePage({
                     </div>
                 </div>
 
-                <div className="hide-sm">
-                    {breadcrumbItems?.length > 0 && (
+                {breadcrumbItems?.length > 0 && (
+                    <div className="hide-sm">
                         <BlockBreadcrumbs
                             items={breadcrumbItems}
                             after={
                                 <ReadSpeakerButton className={'breadcrumb-read-speaker'} targetId={'main-content'} />
                             }
                         />
-                    )}
-                </div>
+                    </div>
+                )}
 
                 <ErrorBoundaryHandler>
                     <div className="showcase-layout">
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 62e31fc2e..36cfee59d 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
@@ -115,8 +115,7 @@ export default function FundsListItemList({
                             name={'fund-requests'}
                             dataDusk="pendingButton"
                             params={{ fund_id: fund.id }}
-                            className="button button-text button-xs"
-                            ng-click="$dir.goToFundRequests($event)">
+                            className="button button-text button-xs">
                             {translate('list_blocks.fund_item_list.buttons.check_status')}
                             <em className="mdi mdi-chevron-right icon-right" aria-hidden="true" />
                         </StateNavLink>
diff --git a/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx b/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx
index 96aae3ef3..cc38e4ee7 100644
--- a/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx
+++ b/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktop.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useContext, useEffect } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import useAppConfigs from '../../../../hooks/useAppConfigs';
 import Announcements from '../../announcements/Announcements';
 import classNames from 'classnames';
@@ -11,6 +11,8 @@ import { TopNavbarDesktopUser } from './TopNavbarDesktopUser';
 import useEnvData from '../../../../hooks/useEnvData';
 import { mainContext } from '../../../../contexts/MainContext';
 import { TopNavbarDesktopSearchButton } from './TopNavbarDesktopSearchButton';
+import { layoutContext } from '../../../../contexts/LayoutContext';
+import { useElementSize } from '../../../../hooks/useElementSize';
 
 export const TopNavbarDesktop = ({
     hideOnScroll = false,
@@ -22,6 +24,9 @@ export const TopNavbarDesktop = ({
     const envData = useEnvData();
     const appConfigs = useAppConfigs();
     const { showSearchBox } = useContext(mainContext);
+    const { setNavbarHeaderHeight } = useContext(layoutContext);
+    const navbarDesktopRef = useRef<HTMLElement>(null);
+    const { height: navbarDesktopHeight } = useElementSize(navbarDesktopRef);
 
     const [visible, setVisible] = React.useState(false);
     const [prevOffsetY, setPrevOffsetY] = React.useState(0);
@@ -37,8 +42,13 @@ export const TopNavbarDesktop = ({
         window.addEventListener('scroll', updateScrolled);
     }, [updateScrolled]);
 
+    useEffect(() => {
+        setNavbarHeaderHeight(navbarDesktopHeight);
+    }, [setNavbarHeaderHeight, navbarDesktopHeight]);
+
     return (
         <nav
+            ref={navbarDesktopRef}
             className={classNames(
                 'block block-navbar-desktop',
                 className,
diff --git a/react/src/webshop/components/elements/top-navbar/mobile/TopNavbarMobile.tsx b/react/src/webshop/components/elements/top-navbar/mobile/TopNavbarMobile.tsx
index 503fe9e8a..fe79bff82 100644
--- a/react/src/webshop/components/elements/top-navbar/mobile/TopNavbarMobile.tsx
+++ b/react/src/webshop/components/elements/top-navbar/mobile/TopNavbarMobile.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useContext } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import useEnvData from '../../../../hooks/useEnvData';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import { mainContext } from '../../../../contexts/MainContext';
@@ -13,6 +13,8 @@ import TopNavbarMobileButtons from './TopNavbarMobileButtons';
 import TopNavbarSearch from '../TopNavbarSearch';
 import Announcements from '../../announcements/Announcements';
 import useAppConfigs from '../../../../hooks/useAppConfigs';
+import { useElementSize } from '../../../../hooks/useElementSize';
+import { layoutContext } from '../../../../contexts/LayoutContext';
 
 export const TopNavbarMobile = () => {
     const { showSearchBox, setShowSearchBox, mobileMenuOpened, setMobileMenuOpened } = useContext(mainContext);
@@ -25,6 +27,10 @@ export const TopNavbarMobile = () => {
     const translate = useTranslate();
     const authIdentity = useAuthIdentity();
 
+    const { setNavbarHeaderHeight } = useContext(layoutContext);
+    const navbarDesktopRef = useRef<HTMLDivElement>(null);
+    const { height: navbarDesktopHeight } = useElementSize(navbarDesktopRef);
+
     const toggleSearchBox = useCallback(
         (e: React.MouseEvent) => {
             e.stopPropagation();
@@ -49,8 +55,12 @@ export const TopNavbarMobile = () => {
         [setMobileMenuOpened, setShowSearchBox],
     );
 
+    useEffect(() => {
+        setNavbarHeaderHeight(navbarDesktopHeight);
+    }, [setNavbarHeaderHeight, navbarDesktopHeight]);
+
     return (
-        <div className="block block-navbar-mobile">
+        <div ref={navbarDesktopRef} className="block block-navbar-mobile">
             {appConfigs?.announcements && (
                 <div className="navbar-mobile-section">
                     <Announcements announcements={appConfigs?.announcements} />
diff --git a/react/src/webshop/components/modals/Modal2FADeactivate.tsx b/react/src/webshop/components/modals/Modal2FADeactivate.tsx
index 07f3173d1..485987920 100644
--- a/react/src/webshop/components/modals/Modal2FADeactivate.tsx
+++ b/react/src/webshop/components/modals/Modal2FADeactivate.tsx
@@ -185,19 +185,17 @@ export default function Modal2FADeactivate({
                             <div className="modal-section-space" />
 
                             <div className="form-group">
-                                <div className="form-group-offset">
-                                    <PincodeControl
-                                        value={confirmationCode}
-                                        onChange={setConfirmationCode}
-                                        className={'block-pincode-compact'}
-                                        valueType={'num'}
-                                        blockSize={3}
-                                        blockCount={2}
-                                        ariaLabel={translate('modal_2fa_deactivate.enter_2fa_code_deactivation')}
-                                    />
+                                <PincodeControl
+                                    value={confirmationCode}
+                                    onChange={setConfirmationCode}
+                                    className={'block-pincode-compact'}
+                                    valueType={'num'}
+                                    blockSize={3}
+                                    blockCount={2}
+                                    ariaLabel={translate('modal_2fa_deactivate.enter_2fa_code_deactivation')}
+                                />
 
-                                    <FormError error={errorCode} />
-                                </div>
+                                <FormError error={errorCode} />
 
                                 {type == 'phone' && (
                                     <div className="text-center">
diff --git a/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx b/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
index c8a81b996..5f009d5cd 100644
--- a/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
+++ b/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
@@ -91,7 +91,7 @@ export default function ModalDeactivateVoucher({
                                 <div className="form-label">
                                     {translate('modal_deactivate_voucher.reason_for_stopping')}
                                 </div>
-                                <div className="form-group form-group-inline">
+                                <div className="form-group">
                                     {reasons?.map((item) => (
                                         <InputRadioControl
                                             key={item.key}
diff --git a/react/src/webshop/components/pages/funds-request/FundRequest.tsx b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
index c6cd5f47c..2dc507a39 100644
--- a/react/src/webshop/components/pages/funds-request/FundRequest.tsx
+++ b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
@@ -242,7 +242,15 @@ export default function FundRequest() {
 
         fundRequestService
             .store(fund.id, formDataBuild(pendingCriteria.filter((criterion) => shouldRequestRecord(criterion))))
-            .then(() => {
+            .then((res) => {
+                const active_vouchers = res.data.data.active_vouchers;
+
+                if (res.data.data.state === 'approved' && active_vouchers.length > 0) {
+                    return active_vouchers.length > 1
+                        ? navigateState('vouchers')
+                        : navigateState('voucher', active_vouchers[0]);
+                }
+
                 if (fund.auto_validation) {
                     return applyFund(fund);
                 }
@@ -272,6 +280,7 @@ export default function FundRequest() {
         setStepByName,
         submitInProgress,
         shouldRequestRecord,
+        navigateState,
     ]);
 
     const criterionTitle = useCallback(
diff --git a/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx b/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
index 7c5bbcf06..d57af8fef 100644
--- a/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
+++ b/react/src/webshop/components/pages/identity-security/SecuritySessions.tsx
@@ -256,7 +256,7 @@ export default function SecuritySessions() {
                                             </div>
                                             {session.current && (
                                                 <div className="session-label">
-                                                    <div className="label label-lg label-primary">
+                                                    <div className="label label-primary">
                                                         {translate('security_sessions.labels.online')}
                                                     </div>
                                                 </div>
@@ -264,7 +264,7 @@ export default function SecuritySessions() {
 
                                             {session.active && !session.current && (
                                                 <div className="session-label">
-                                                    <div className="label label-lg label-success">
+                                                    <div className="label label-success">
                                                         {translate('security_sessions.labels.online')}
                                                     </div>
                                                 </div>
diff --git a/react/src/webshop/components/pages/providers/Providers.tsx b/react/src/webshop/components/pages/providers/Providers.tsx
index 08842f8f3..d9d1406f8 100644
--- a/react/src/webshop/components/pages/providers/Providers.tsx
+++ b/react/src/webshop/components/pages/providers/Providers.tsx
@@ -27,6 +27,7 @@ import { BooleanParam, NumberParam, StringParam } from 'use-query-params';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
 import UIControlText from '../../../../dashboard/components/elements/forms/ui-controls/UIControlText';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
+import classNames from 'classnames';
 
 export default function Providers() {
     const translate = useTranslate();
@@ -253,10 +254,12 @@ export default function Providers() {
             contentStyles={filterValues?.show_map ? { background: '#fff' } : undefined}
             showCaseClassName={filterValues.show_map ? 'block-showcase-fullscreen' : ''}
             countFiltersApplied={countFiltersApplied}
-            breadcrumbItems={[
-                { name: translate('providers.breadcrumbs.home'), state: 'home' },
-                { name: translate('providers.breadcrumbs.providers') },
-            ]}
+            breadcrumbItems={
+                !filterValues.show_map && [
+                    { name: translate('providers.breadcrumbs.home'), state: 'home' },
+                    { name: translate('providers.breadcrumbs.providers') },
+                ]
+            }
             aside={
                 funds &&
                 appConfigs &&
@@ -412,39 +415,44 @@ export default function Providers() {
                         </h1>
                         <div className="showcase-filters-block">
                             <div className="block block-label-tabs form">
-                                <div className={`showcase-filters-item ${filterValues.show_map ? 'hide-sm' : ''}`}>
-                                    <label className="form-label">{translate('providers.filters.sort')}</label>
-                                    <SelectControl
-                                        id={'sort_by'}
-                                        allowSearch={false}
-                                        propKey={'id'}
-                                        propValue={'label'}
-                                        options={sortByOptions}
-                                        value={
-                                            sortByOptions.find(
-                                                (option) =>
-                                                    option.value.order_by == filterValues.order_by &&
-                                                    option.value.order_dir == filterValues.order_dir,
-                                            )?.id
-                                        }
-                                        onChange={(id: number) => {
-                                            filterUpdate(
-                                                sortByOptions.find((option) => {
-                                                    return option.id == id;
-                                                })?.value || {},
-                                            );
-                                        }}
-                                    />
-                                </div>
+                                {!filterValues.show_map && (
+                                    <div className={classNames('showcase-filters-item')}>
+                                        <label className="form-label">{translate('providers.filters.sort')}</label>
+                                        <SelectControl
+                                            id={'sort_by'}
+                                            allowSearch={false}
+                                            propKey={'id'}
+                                            propValue={'label'}
+                                            options={sortByOptions}
+                                            value={
+                                                sortByOptions.find(
+                                                    (option) =>
+                                                        option.value.order_by == filterValues.order_by &&
+                                                        option.value.order_dir == filterValues.order_dir,
+                                                )?.id
+                                            }
+                                            onChange={(id: number) => {
+                                                filterUpdate(
+                                                    sortByOptions.find((option) => option.id == id)?.value || {},
+                                                );
+                                            }}
+                                        />
+                                    </div>
+                                )}
                                 {appConfigs?.show_providers_map && (
                                     <div
-                                        className={`block block-label-tabs pull-right ${
-                                            filterValues.show_map ? 'block-label-tabs-sm' : ''
-                                        }`}>
+                                        className={classNames(
+                                            'block',
+                                            'block-label-tabs',
+                                            'pull-right',
+                                            filterValues.show_map && 'block-label-tabs-sm',
+                                        )}>
                                         <button
-                                            className={`label-tab label-tab-sm ${
-                                                filterValues.show_map ? '' : 'active'
-                                            }`}
+                                            className={classNames(
+                                                'label-tab',
+                                                'label-tab-sm',
+                                                !filterValues.show_map && 'active',
+                                            )}
                                             onClick={() => filterUpdate({ show_map: false })}
                                             onKeyDown={clickOnKeyEnter}
                                             tabIndex={0}
@@ -453,9 +461,11 @@ export default function Providers() {
                                             {translate('providers.view.list')}
                                         </button>
                                         <button
-                                            className={`label-tab label-tab-sm ${
-                                                filterValues.show_map ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'label-tab',
+                                                'label-tab-sm',
+                                                filterValues.show_map && 'active',
+                                            )}
                                             onClick={() => filterUpdate({ show_map: true })}
                                             onKeyDown={clickOnKeyEnter}
                                             tabIndex={0}
diff --git a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
index 1257707c2..313d718d6 100644
--- a/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
+++ b/react/src/webshop/components/pages/reimbursements-edit/ReimbursementsEdit.tsx
@@ -139,7 +139,7 @@ export default function ReimbursementsEdit() {
         const filesKeys = Object.keys(errors).filter((key) => key.startsWith('files.'));
 
         filesKeys.forEach(
-            (value, index) => (filesList[index].error = errors[`files.${index}`] || value),
+            (value, index) => (filesList[index]['error'] = errors[`files.${index}`] || value),
             [...Array(filesList.length).keys()].map(() => null),
         );
 
@@ -311,8 +311,8 @@ export default function ReimbursementsEdit() {
 
                                 <div className="card-section">
                                     <div className="row">
-                                        <div className="col col-xs-12 col-md-10">
-                                            <div className="form-group form-group-inline">
+                                        <div className="col col-xs-12 col-md-offset-2 col-md-8">
+                                            <div className="form-group">
                                                 <label className="form-label" htmlFor="voucher_id">
                                                     <div className="flex-inline flex-gap-sm">
                                                         <div className="flex">
@@ -326,26 +326,24 @@ export default function ReimbursementsEdit() {
                                                         </div>
                                                     </div>
                                                 </label>
-                                                <div className="form-offset">
-                                                    <SelectControl
-                                                        id="voucher_id"
-                                                        propValue="address"
-                                                        propKey="id"
-                                                        allowSearch={false}
-                                                        value={form.values.voucher_id ?? ''}
-                                                        onChange={(voucher_id?: number) => form.update({ voucher_id })}
-                                                        options={vouchers}
-                                                        optionsComponent={SelectControlOptionsVouchers}
+                                                <SelectControl
+                                                    id="voucher_id"
+                                                    propValue="address"
+                                                    propKey="id"
+                                                    allowSearch={false}
+                                                    value={form.values.voucher_id ?? ''}
+                                                    onChange={(voucher_id?: number) => form.update({ voucher_id })}
+                                                    options={vouchers}
+                                                    optionsComponent={SelectControlOptionsVouchers}
+                                                />
+                                                <FormError error={form.errors.voucher_id} />
+                                                {selectedVoucher?.records?.length > 0 && (
+                                                    <BlockVoucherRecords
+                                                        toggle={true}
+                                                        compact={true}
+                                                        voucher={selectedVoucher}
                                                     />
-                                                    <FormError error={form.errors.voucher_id} />
-                                                    {selectedVoucher?.records?.length > 0 && (
-                                                        <BlockVoucherRecords
-                                                            toggle={true}
-                                                            compact={true}
-                                                            voucher={selectedVoucher}
-                                                        />
-                                                    )}
-                                                </div>
+                                                )}
                                             </div>
                                         </div>
                                     </div>
@@ -353,8 +351,8 @@ export default function ReimbursementsEdit() {
 
                                 <div className="card-section">
                                     <div className="row">
-                                        <div className="col col-xs-12 col-md-10">
-                                            <div className="form-group form-group-inline">
+                                        <div className="col col-xs-12 col-md-offset-2 col-md-8">
+                                            <div className="form-group">
                                                 <label className="form-label form-label-required" htmlFor="title">
                                                     {translate('reimbursements.form.title')}
                                                 </label>
@@ -369,7 +367,7 @@ export default function ReimbursementsEdit() {
                                                 />
                                                 <FormError error={form.errors.title} />
                                             </div>
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label form-label-required" htmlFor="amount">
                                                     {translate('reimbursements.form.amount')}
                                                 </label>
@@ -385,7 +383,7 @@ export default function ReimbursementsEdit() {
                                                 />
                                                 <FormError error={form.errors.amount} />
                                             </div>
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label" htmlFor="description">
                                                     {translate('reimbursements.form.description')}
                                                 </label>
@@ -400,7 +398,7 @@ export default function ReimbursementsEdit() {
                                                 />
                                                 <FormError error={form.errors.description} />
                                             </div>
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label form-label-required" htmlFor="iban">
                                                     <div className="flex-inline">
                                                         <div className="flex">
@@ -425,7 +423,7 @@ export default function ReimbursementsEdit() {
                                                 />
                                                 <FormError error={form.errors.iban} />
                                             </div>
-                                            <div className="form-group form-group-inline">
+                                            <div className="form-group">
                                                 <label className="form-label form-label-required" htmlFor="iban_name">
                                                     {translate('reimbursements.form.iban_name')}
                                                 </label>
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 0acc91f1a..fa8919c76 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -12,6 +12,7 @@ import usePayReservationExtra from '../reservations/hooks/usePayReservationExtra
 import useCancelReservation from '../reservations/hooks/useCancelReservation';
 import { BooleanParam, useQueryParam } from 'use-query-params';
 import classNames from 'classnames';
+import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
 
 export default function ReservationsShow() {
     const { id } = useParams();
@@ -207,9 +208,11 @@ export default function ReservationsShow() {
                         </div>
 
                         {reservation.state === 'waiting' && stateData.expiresIn && !showLoadingBtn && (
-                            <div className="card-footer card-footer-warning card-footer-sm">
-                                {translate('reservation.expiring', stateData)}
-                            </div>
+                            <TranslateHtml
+                                i18n={'reservation.expiring'}
+                                values={stateData}
+                                className="card-footer card-footer-warning card-footer-sm"
+                            />
                         )}
 
                         {reservation.state === 'canceled_payment_expired' && (
diff --git a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
index 5b4274997..2af0a114b 100644
--- a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
+++ b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
@@ -82,7 +82,7 @@ export default function ReservationCard({
                                         <div className="label label-default-outline nowrap">
                                             <span className="label-blink label-blink-primary" aria-hidden="true" />
                                             <span className="label-text">
-                                                {translate('reservations.remaining_minutes', {
+                                                {translate('reservations.card.remaining_minutes', {
                                                     minutes: stateData.expiresIn,
                                                 })}
                                             </span>
diff --git a/react/src/webshop/contexts/LayoutContext.tsx b/react/src/webshop/contexts/LayoutContext.tsx
index 33ed00ab3..bdc3bf5fb 100644
--- a/react/src/webshop/contexts/LayoutContext.tsx
+++ b/react/src/webshop/contexts/LayoutContext.tsx
@@ -1,44 +1,26 @@
-import React, { ReactNode } from 'react';
-import { createContext, useState, useMemo, useCallback } from 'react';
+import React, { createContext, ReactNode, useState } from 'react';
 
-interface LayoutData {
-    layoutType?: string;
-    filtersVariantCollapse?: boolean;
-    headerVariant?: boolean;
+interface LayoutContextProps {
+    navbarHeaderHeight: number;
+    setNavbarHeaderHeight: (h: number) => void;
 }
 
-const layoutStore = createContext<{
-    layoutData?: LayoutData;
-    setLayoutData: (data: LayoutData | ((a: LayoutData | null) => LayoutData | null)) => void;
-    setLayoutType: (layoutType: string) => void;
-}>(null);
+export const layoutContext = createContext<LayoutContextProps>({
+    navbarHeaderHeight: 0,
+    setNavbarHeaderHeight: () => {},
+});
 
-const { Provider } = layoutStore;
-
-const defaultLayoutData = {
-    filtersVariantCollapse: false,
-    headerVariant: false,
-};
-
-const LayoutProvider = ({ children }: { children: ReactNode }) => {
-    const [layoutData, setLayoutData] = useState<LayoutData>({ ...defaultLayoutData });
-
-    const setData = useCallback((data: LayoutData | ((a: LayoutData) => LayoutData)) => {
-        setLayoutData((old) => ({ ...old, ...defaultLayoutData, ...data }));
-    }, []);
+interface LayoutProviderProps {
+    children: ReactNode;
+}
 
-    const setLayoutType = useCallback((layoutType: string) => setData({ layoutType }), [setData]);
+export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
+    const [desktopHeaderHeight, setDesktopHeaderHeight] = useState(0);
 
-    const layoutMemo = useMemo(
-        () => ({
-            layoutData: layoutData,
-            setLayoutData: setData,
-            setLayoutType: setLayoutType,
-        }),
-        [setLayoutType, layoutData, setData],
+    return (
+        <layoutContext.Provider
+            value={{ navbarHeaderHeight: desktopHeaderHeight, setNavbarHeaderHeight: setDesktopHeaderHeight }}>
+            {children}
+        </layoutContext.Provider>
     );
-
-    return <Provider value={layoutMemo}>{children}</Provider>;
 };
-
-export { LayoutProvider, layoutStore };
diff --git a/react/src/webshop/hooks/useElementSize.tsx b/react/src/webshop/hooks/useElementSize.tsx
new file mode 100644
index 000000000..dd0c63887
--- /dev/null
+++ b/react/src/webshop/hooks/useElementSize.tsx
@@ -0,0 +1,34 @@
+import { RefObject, useLayoutEffect, useState } from 'react';
+
+interface Size {
+    width: number;
+    height: number;
+}
+
+export function useElementSize<T extends HTMLElement>(ref: RefObject<T>): Size {
+    const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node) {
+            return;
+        }
+
+        const update = (): void => {
+            const rect = node.getBoundingClientRect();
+            setSize({ width: rect.width, height: rect.height });
+        };
+
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(node);
+        window.addEventListener('resize', update);
+
+        return () => {
+            ro.disconnect();
+            window.removeEventListener('resize', update);
+        };
+    }, [ref]);
+
+    return size;
+}
diff --git a/react/src/webshop/hooks/useNavbarHeaderHeight.tsx b/react/src/webshop/hooks/useNavbarHeaderHeight.tsx
new file mode 100644
index 000000000..62dfe13ea
--- /dev/null
+++ b/react/src/webshop/hooks/useNavbarHeaderHeight.tsx
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { layoutContext } from '../contexts/LayoutContext';
+
+export const useNavbarHeaderHeight = (): number => {
+    return useContext(layoutContext).navbarHeaderHeight;
+};